html, body{
padding:0;
margin:0;
font-family: "Segoe UI";
background-color:#f1efec;
height: 100vh;
}
::-webkit-scrollbar { width: 0;}

h6{
padding:0;
margin:0;
padding-bottom:2%;
}

a{
text-decoration:none;
color:#f1efec;
}
header{
height:50px;
width:100vw;
top:0;
position:fixed;
z-index:10;
opacity:0;
background-color:#2f3338;
border-bottom:1px solid #f1efec;
color:#f1efec;
animation-name: header_animation;
animation-duration: 1.5s;
animation-delay:5s;
animation-fill-mode: forwards;
color:#f1efec;
}
@keyframes header_animation{
	from{opacity:0;}
	to{opacity:1;}
}
.menu_center
{
height:100%;
width:70vw;
margin:0 auto;
}
.menu_l0{
height:100%;
width:10vw;
position:relative;
float:left;
}
.menu_l1, .menu_l2, .menu_l3, .menu_l4, .menu_l5{
height:100%;
width:12vw;
position:relative;
float:left;
background-color:#2f3338;
}
.menu_l0 p, .menu_l1 p, .menu_l2 p, .menu_l3 p, .menu_l4 p, .menu_l5 p{
margin:0 auto;
text-align:center;
line-height:1.3em;
font-size:2em;
font-weight: lighter;
}
.menu_l1:hover, .menu_l2:hover, .menu_l3:hover, .menu_l4:hover, .menu_l5:hover{
background-color:#f1efec;
color:#2f3338;
}
.menu_l1_border, .menu_l2_border, .menu_l3_border, .menu_l4_border, .menu_l5_border{
bottom:0;
float:right;
height:2px;
position:absolute;
right:0;
background-color:#f1efec;
animation-name: menu_box_animation;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
.menu_l1:hover .menu_l1_border, .menu_l2:hover .menu_l2_border, .menu_l3:hover .menu_l3_border, .menu_l4:hover .menu_l4_border, .menu_l5:hover .menu_l5_border{
animation-name: menu_box_hover_animation;
animation-duration: 1s;
animation-fill-mode: forwards;
	
}
@keyframes menu_box_animation{
	from{width:100%;}
	to{width:0%;}
}
@keyframes menu_box_hover_animation{
	from{width:0%;}
	to{width:100%;}
}


.follower {
  width: 20px;
  height: 20px;
  background-color: grey;
  border-radius: 10px;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
  z-index:-1;
}
.layer1{
width:100%;
height:100%;
overflow:hidden;
background-color:#2f3338;
}
.l1_img{
width:100%;
height:100%;
position:absolute;
top:0;
background-image:url("../img/aerial-aerial-photography-aerial-shot-1173777.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position-y: 100%;
opacity: 0.1;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}






.l1_sketch_animation{
	
width:100vw;
height:100vh;
position:absolute;
top:10vh;
z-index:2;
}
.l1_sketch_animation1{
position:absolute;
width:32vh;
height:64vh;
left:40%;
top:15%;
opacity:0;
border-style: solid;
border-width: 1px;
border-color:#f1efec;
border-radius: 5%;
animation-name: l1_sketch_animation_1;
animation-duration: 4s;
animation-delay:0.5s;
animation-fill-mode: forwards;
	
}
.l1_sketch_animation2{
position:absolute;
width:32vh;
height:64vh;
left:41%;
top:13%;
opacity:0;
border-style: solid;
border-width: 1px;
border-color:#f1efec;
border-radius: 5%;
animation-name: l1_sketch_animation_2;
animation-duration: 4s;
animation-delay:0.6s;
animation-fill-mode: forwards;
	
}
.l1_sketch_animation3{
position:absolute;
width:28vh;
height:54vh;
left:41.5%;
top:20%;
opacity:0;
border-style: solid;
border-width: 1px;
border-color:#f1efec;
animation-name: l1_sketch_animation_3;
animation-duration: 4s;
animation-delay:0.55s;
animation-fill-mode: forwards;
	
}
.l1_sketch_animation3_title{
width:90%;
margin-left:5%;
margin-top:5%;
height:10%;
position:absolute;
text-align:center;
font-size:1.1em;
font-style:italic;
top:0;
opacity:0;
color:#f1efec;
animation-name: l1_description_animation;
animation-duration: 1.5s;
animation-delay:6.5s;
animation-fill-mode: forwards;
}
.l1_sketch_animation3_text{
width:90%;
margin-left:5%;
margin-top:110%;
height:25%;
position:absolute;
opacity:0;
background-color:#2f3338;
color:#f1efec;
border-radius: 5%;
animation-name: l1_description_animation;
animation-duration: 1.5s;
animation-delay:6.5s;
animation-fill-mode: forwards;
}

@keyframes l1_sketch_animation_1{
	0%{
		transform:scale(2);
		opacity:0;
		-webkit-filter: blur(5px);
	}
	55%{
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
	70%{
		left:40%;
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
	100%{
		left:70%;
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
}
@keyframes l1_sketch_animation_2{
	0%{
		transform:scale(2);
		opacity:0;
		-webkit-filter: blur(5px);
	}
	55%{
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
	70%{
		left:41%;
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
	100%{
		left:71%;
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
}
@keyframes l1_sketch_animation_3{
	0%{
		transform:scale(2);
		opacity:0;
		-webkit-filter: blur(5px);
	}
	55%{
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
	70%{
		left:41.5%;
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
	100%{
		left:71.5%;
		transform:scale(1);
		opacity:1;
		-webkit-filter: blur(0px);
	}
}

.l1_description{
position:absolute;
height:70vh;
width:48vw;
left:20vw;
top:20vh;
z-index:2;
}
.l1_description_title{
width:100%;
height:13%;
right:0;
float:right;
vertical-align: text-bottom;
opacity:0;
color:#f1efec;
font-size:3em;
animation-name: l1_description_animation;
animation-duration: 2s;
animation-delay:4s;
animation-fill-mode: forwards;
}
.l1_description_source{
	
text-overflow: ellipsis ellipsis;
text-align: justify;
text-justify: inter-word;
width:100%;
height:75%;
right:0;
float:right;
opacity:0;
color:#f1efec;
font-size:1.5em;
font-style: italic;
font-weight: lighter;
animation-name: l1_description_animation;
animation-duration: 1.5s;
animation-delay:4.5s;
animation-fill-mode: forwards;
}
@keyframes l1_description_animation{
	0%{
		opacity:0;
		-webkit-filter: blur(5px);
	}
	100%{
		opacity:1;
		-webkit-filter: blur(0px);
	}


}
.scroll{
position:absolute;
width:2px;
height:4vh;
left:50%;
opacity:0;
background-color:#2f3338;
bottom:0;
animation-name: scroll_animation;
animation-duration: 2s;
animation-delay:5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes scroll_animation{
	0%{
		height:4vh;
		opacity:1;
	}
	50%{
		height:0vh;
		opacity:1;
	}
	100%{
		height:4vh;
		opacity:1;
	}
}



.layer2{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
background-color:#2f3338;
}
.layer3{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}
.layer4{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}


.l3_img{
top:100vh;
width:100vw;
height:100vh;
background-color:#2f3338;
/*background-image:url("E:/ZPI_Strona/asphalt-dawn-daylight-1813227.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position-y: 75%;
opacity: 0.8;*/
clip-path: polygon(100% 0, 0 0, 0 100%);

}


.l2_tech{
margin-left:20vw;
padding-right:10px;
width:13vw;
height:80vh;
float:left;
top:10vh;
position:absolute;
text-align:right;
color:#f1efec;
border-right: 2px solid #f1efec;
}
.l2_descriptions{
margin-left:40vw;
width:40vw;
margin-top:35vh;
height:20vh;
float:left;
top:10vh;
position:absolute;
color:#f1efec;
text-align:justify;
}

.l2_tech_C, .l2_tech_Pyhon, .l2_tech_PHP, .l2_tech_Java, .l2_tech_HTML, .l2_tech_JS, .l2_tech_CSS, .l2_tech_MySQL, .l2_tech_Git, .l2_tech_Photoshop {
width:100%;
height:8vh;
line-height:8vh;
font-weight:lighter;	
font-size:3em;
}

.l3_teammates{
position:absolute;
right:0;
width:30vw;
height:80vh;
top:20vh;
}
.l3_teammates_cube{
height:10vh;
width:100%;	
color:#9e9e9e;

text-align:center;
}
.l3_teammates_cube:hover{
color:#1c1c1c;
}

.l3_KJ, .l3_PatrykWojdak, .l3_KD, .l3_MJ, .l3_PawelWojtysiak, .l3_BZ{
width:70vw;
height:90vh;
opacity:0;
position:absolute;
top:10vh;
}
.l3_KJ{opacity:1;}
.l3_KJ_photo, .l3_Patryk_photo, .l3_KD_photo, .l3_MJ_photo, .l3_Pawel_photo, .l3_BZ_photo{
height:100%;
width:45%;
position:absolute;
top:0;
right:0;
background-size: cover, auto ;
background-repeat: no-repeat;
background-position: center top;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.l3_KJ_photo{
background-image:url("../photo/KJ3_s.jpg");
}
.l3_Patryk_photo{
background-image:url("../photo/PW3_s.jpg");
}
.l3_KD_photo{
background-image:url("../photo/KD_s.jpg");
}
.l3_MJ_photo{
background-image:url("../photo/MJ3_s.jpg");
}
.l3_Pawel_photo{
background-image:url("../photo/PawelW2_s.jpg");
}
.l3_BZ_photo{
background-image:url("../photo/BZ_s.jpg");
}
.l3_KamilJ_name{
color:#1c1c1c;
}
.l3_KamilJ_decs
{
color:#ffc703;
}
.l3_KamilJ_name, .l3_Patryk_name, .l3_KamilD_name, .l3_Mateusz_name, .l3_Pawel_name, .l3_Bartosz_name{
width:100%;
height:7vh;
font-size:2em;
line-height:10vh;
font-weight: regular;
}
.l3_KamilJ_desc, .l3_Patryk_cube_decs, .l3_KamilD_desc, .l3_Mateusz_desc, .l3_Pawel_cube_decs, .l3_Bartosz_desc{
width:100%;
height:3vh;
font-size:1em;
font-weight: lighter;
text-align:center;
}

.l3_KJ_desc, .l3_Patryk_desc, .l3_KD_desc, .l3_MJ_desc, .l3_Pawel_desc, .l3_BZ_desc{
width:33%;
height:25%;
position:absolute;
top:25%;
left:20%
}
.l3_desc_Name{
font-size:3em;
font-weight:bold;
color:#f1efec;
}
.l3_desc_Role{
margin-top:2%;
font-size:1em;
font-weight:regular;
color:#ffc703;
}
.l3_desc_Int{
margin-top:5%;
font-size:1em;
font-weight:lighter;
font-style:italic;
color:#f1efec;
text-align:justify;
}
.layer3_5{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}

.l3_5_description{
width:100%;
height:90%;
top:10%;
position:absolute;

}
.l3_5_description_title{
width:30%;
height:10%;
color:#2f3338;
font-size:3em;
font-weight:lighter;
border-bottom:2px solid #9e9e9e;
text-align:center;
margin:0 auto;
}
.l3_5_harmonogram{
width:50%;
height:85%;
color:#2f3338;
font-size:1.2em;
font-weight:lighter;
font-style:italic;
text-align:justify;
top:5%;
position:relative;
margin:0 auto;
}



.l4_description{
width:100%;
height:30%;
top:10%;
position:absolute;

}
.l4_description_title{
width:50%;
height:35%;
color:#2f3338;
font-size:3em;
font-weight:lighter;
border-bottom:2px solid #9e9e9e;
text-align:center;
margin:0 auto;
}
.l4_description_txt{
width:50%;
height:50%;
color:#2f3338;
font-size:1em;
font-weight:lighter;
font-style:italic;
text-align:center;
top:10%;
position:relative;
margin:0 auto;
}

.l4_logos{
width:50%;
height:15%;
top:35%;
left:25%;
position:absolute;
}
.l4_logos_atos, .l4_logos_ukw{
width:50%;
height:100%;
float:left;
}
.l4_logos_atos{
background-image:url("../img/atos_logo.png");
background-size: contain ;
background-repeat: no-repeat;
background-position: center center;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.l4_logos_ukw{
background-image:url("../img/ukw_logo.png");
background-size: contain ;
background-repeat: no-repeat;
background-position: center center;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.l4_map{
width:100%;
height:35%;
position:absolute;
bottom:0;
}
.map {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
width:100%;
height:100%;
border:0;
opacity:0.6;
}
footer{
width:100%;
height:25vh;
background-color:#2f3338;
color:#f1efec;
}
.footer_addresses{
width:100%;
height:22vh;

color:#f1efec;
}

.footer_addresses_atos{
width:25%;
width:25%;
margin-left:25%;
height:22vh;
float:left;

position:absolute;
}


.footer_addresses_ukw{
width:45%;
margin-left:5%;
height:22vh;
float:right;
position:absolute;
right:0;
}
.footer_bot{
width:60vw;
margin:0 auto;
height:3vh;
font-weight:lighter;
}
.footer_bot_copyright{
width:50%;
height:100%;
float:left;
}
.footer_bot_created{
width:50%;
height:100%;
float:right;
text-align:right;
}