.start
{
	overflow: hidden;
	visibility:visible;
	text-align:center;
}			

body
{
	margin: 0px;
	padding: 0px;
	border:0px;
	position:relative;
	overflow-x: hidden;
	box-sizing: border-box;
	background-color:#000000;
	vertical-align:middle;		
}			

p {font-weight:700;}

.index_top
{
	width:100vw;
	height:50vh;
	box-sizing:border-box;
	overflow: visible;
	font-family: 'Comfortaa', cursive;
	line-height:50vh;
	color:#ffffff;
	font-size:12vw;	
	
}

.index_menu_container
{
	width:100vw;
	height:50vh;
	box-sizing:border-box;
	overflow: visible;
	font-family: 'Oswald', sans-serif;
	font-weight:700;
	color:#ff2323;
	font-size:5vw;
	text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;	
}

.index_menu_item
{
	width:50vw;
	height:50vh;
	box-sizing:border-box;
	overflow:visible;
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
	line-height:50vh;
}

.index_menu_item:hover
{
    animation-name: link;
    animation-duration: 1s;
    animation-fill-mode: forwards;	
}


.index_menu_item  img
{  
	position: absolute;
	left:0px;
	top:0px;
	width:inherit;
	height:inherit;
	object-fit: cover;
	object-position: 50% 50%;	
	z-index:-1;
 }
 
@media all and (orientation:portrait)
{
.index_top
{
	height:34vh;
	line-height:34vh;
}

.index_menu_container
{
	height:66vh;
	font-size:11vw;
	
}

.index_menu_item
{
	width:100vw;
	height:33vh;
	line-height:33vh;	
	display:block;
}
}

.start a
{
	color:inherit;
}

a
{
	text-decoration:none;
}

#topbar
{
	width:100%;
	height:50px;
	background-color:#000000;
	position: fixed;
	top: 0px;
	right:0px;	
	white-space:nowrap;
	text-align:center;
	z-index:2;
	line-height:50px;
	vertical-align:middle;	
}
			
#logo
{
	font-family: 'Comfortaa', cursive;
	font-size:40px;
	margin:5px;
	margin-left:10px;
	margin-right:10px;
	color:#ffffff;
}

@media screen and (max-width: 480px)
{
		#logo{font-size:5vw;}
}

.menu
{
	font-family: 'Lato', sans-serif;
	font-size:20px;
	margin:5px;
	margin-left:10px;
	margin-right:10px;
	color:#ff2323;
}

#menusmall
{
	display:none;
}
@media screen and (max-width: 800px) {
.menu
{
	display:none;
}

#menusmall
{
	display:inline;
}
}

.menu a
{
	color:#ff2323;
	margin:5px;
	margin-left:10px;
	margin-right:10px;
}

.menu a:hover
{
	color:#fb8495;
}

#menudown
{
	background-color:#000000;
	text-align:right;
	margin: 0px;
	padding:5px;
	position:fixed;
	width:100%;
	top: 50px;
	left: 0px;
	z-index:2;
	box-sizing: border-box;
	display:none;
}

#menudown a
{
	margin:0px;
}

.container
{
	position:relative;
	max-width:100%;
	box-sizing: border-box;
	background-color:#ffffff;
	margin: auto;
    background-repeat: no-repeat;
	background-position: center;
	background-size:cover ;
	background-attachment: fixed;
	min-height:100vh;
	display: flex;
	justify-content: center;
	align-items: center; 	
}

#studio
{
	background-image: url('jiroe-537946-unsplash.jpg');
}

.header
{
	width:100%;
	height:100%;
	margin:6px;
}

.header h1
{
	font-family: 'Oswald', sans-serif;
	font-size:35px;
	line-height:39px;
	font-weight:700;
	color:#ff2323;
	text-align: center;
	margin:0;
	padding-top:0;
	padding:2.5vmin;	
	text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;	
}
#webdesign
{
	background-image: url('kevin-ku-364843-unsplash.jpg');

}

#webdesign p
{
		text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;	
}

#studio p
{
		text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;	
}

#webdesign .linki
{
	color:#d3e4ea;
}

#webdesign .linki:hover
{
	color:#ffffff;
}

#webdesign p a
{
	color:#d3e4ea;
}

#webdesign p a:hover
{
	color:#ffffff;
}

.tresc
{
	padding-top:50px;
	padding-bottom:50px;
	overflow: hidden; 
	text-align:center;
	box-sizing: border-box;
	width:1024px;
	max-width:100%;
	min-height:100vh;
	display: flex;
	flex-wrap: wrap;	
	justify-content:center;
	align-content:flex-start;
	background-color:rgba(0,0,0,.8)
	
}

.tresc img
{
padding:5vmin;
height:auto;
width:initial;
max-width:50%;
max-height:100%;
box-sizing: border-box;
}

.info
{
	width:500px;
	margin:6px;
	position:relative;
}

.infoYT
{
	width:750px;
	margin:6px;
	position:relative;
}

.info h2, .infoYT h2
{
	font-family: 'Oswald', sans-serif;
	font-size:30px;
	line-height:34px;
	font-weight:700;
	color:#ff2323;
	text-align: left;
	margin:0;
	padding:0;
	text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;	
}

p
{
	font-family: 'Lato', sans-serif;
	font-size:20px;	
	color:#ffffff;
	text-align: justify;
	margin:0;
	padding:0;
}

.tresc p a
{
	color:#b1afb4;
}

.tresc p a:hover
{
	color:#ffffff;
}

.info .linki
{
	font-size:40px;	
	line-height:45px;
	color:#b1afb4;
}

.info .linki:hover
{
	color:#ffffff;
	cursor: pointer;
}

.stopka
{
	width:100%;
	height:50px;
	background-color:#000000;
	position: fixed;
	bottom: 0px;
	right:0px;	
	white-space:nowrap;
	text-align:right;
	z-index:2;
	line-height:50px;
	vertical-align:middle;	
	font-family: 'Lato', sans-serif;
	font-size:17px;
	padding-right:5vmin;
	color:#ff2323;	
}

.stopka img
{
	padding-left:5vmin;	
	vertical-align:middle;	
}

.stopka a
{
	color:#ffffff;
}

.stopka a:hover
{
	text-decoration:underline;
}


@media screen and (max-width: 700px)
{
.info h1
  {
	font-size:5vw; 
	line-height:5.5vw;
  }

.info p
{
	font-size:4vw;	
}

.info .linki
{
	font-size:5vw;	
	line-height:6vw;
}

.stopka
{
	font-size:4vw;	
}

}

.iframe_wrapper
{
	width:100%;
	margin:0;
	padding:0;
}

.iframe_container:before {
	content:"";
	display: block;
	padding-top: 56.25%;
}

.iframe_container
{
    position: relative;
	height:100%;
}

.iframe_containerBC:before {
	content:"";
	display: block;
	padding-top: 100%;
}

.iframe_containerBC
{
    position: relative;
	height:100%;
}

iframe
{
    position: absolute;
    top: 0;
    left: 0;
	width:100%;
	height:100%;
	border:0;
	overflow: hidden;
}

.menuboczne
{
font-family: 'Lato', sans-serif;
position:fixed;
top:50px;
left:0px;
background-color:rgba(0,0,0,.8);
width:200px;
height: calc(100vh - 100px);
color:#ffffff;
padding-top:20px;
padding-left:20px;
box-sizing: border-box;
font-size:20px;
text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;	
}

.menuboczne .naglowek
{
font-family: 'Oswald', sans-serif;
color:#ff2323;
}

@media screen and (max-width: 1440px)
{
.menuboczne
{
display:none;
}	
}

.menuboczne a
{
	color:#ffffff;
}

.menuboczne a:hover
{
	color:#d3e4ea;
}

.element
{
	position:relative;
	width:500px;
	margin:6px;
	padding:0px;
	height:281px;
	box-sizing:border-box;
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
	font-family: 'Oswald', sans-serif;
	font-size:37px;
	font-weight:700;
	color:#ff2323;
	text-align: center;
	text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;		
	display: inline-flex;
	justify-content: center;
	align-items: center; 		
}

.elementlink
{
	position:relative;
	width:500px;
	margin:6px;
	padding:0px;
	height:281px;
	box-sizing:border-box;
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
	font-family: 'Oswald', sans-serif;
	font-size:37px;
	font-weight:700;
	color:#ff2323;
	text-align: center;
	text-shadow:0px 0px 5px #000000,-3px -3px 3px #000000,3px 3px 3px #000000,-3px 3px 3px #000000,3px -3px 3px #000000;		
	display: inline-flex;
	justify-content: center;
	align-items: center; 
}

.elementlink:hover
{
    animation-name: link;
    animation-duration: 1s;
    animation-fill-mode: forwards;	
	}

@keyframes link {
     from {color: #ff2323;}
     to {color: #fb8495;}
	 }


@media screen and (max-width: 640px)
{
.element	
{
	width:95vw;
	height:calc(95vw / 16 * 9);
	margin-left:0px;
	margin-right:0px;
	margin-top:0.5vh;
	margin-bottom:0.5vh;	
	font-size:7vw;
}

.elementlink
{
	width:95vw;
	height:calc(95vw / 16 * 9);
	margin-left:0px;
	margin-right:0px;
	margin-top:0.5vh;
	margin-bottom:0.5vh;	
	font-size:7vw;
}

}

.iframe_container:before {
	content:"";
	display: block;
	padding-top: 56.25%;
}

.iframe_container
{
    position: relative;
	height:100%;
	width:100%;
}