/************************ GENERAL ************************/

body{
    min-width:320px;
    font-family: 'Manrope', sans-serif;
    font-weight:300;
    color:#ccd6f6;
    line-height:1.2;
    background-color:#0a1921;
    overflow-x:hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
    min-height:100%;min-height:100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    --aspect-ratio: 1/1.5;
	--imgwidthmax: 500px;
}

*::selection{background:#64ffda;color:#0a1921;}
*::-moz-selection{background:#64ffda;color:#0a1921;}

strong{font-weight:700;color:#64ffda;}

/************************ HEADER ************************/

header{padding-top:20px;text-align:center;}
header img{width:35px;}

/************************ PAGE HEADER ************************/

#page-header{margin:50px 0;position:relative;}
#page-header img{max-width: 600px;}
#page-header .ph-copy{
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	width:100%;
}
#page-header .ph-copy p{
	text-transform:uppercase;
	font-weight: 700;
	font-size:16px;
	margin:15px 0 5px 0;
	color:#64ffda;
}
#page-header .ph-copy h1{
	font-family:'Playfair Display', serif;
	font-size:65px;
	line-height: 0.9;
}

/************************ ABOUT ************************/

#about{margin-bottom:50px;}
#about .logo-extended{width:250px;margin-bottom:20px}
#about .about-text{font-size:17px;line-height:27px;}
#about #network{margin-bottom: 20px}
#about #network img{width:20px;display:inline-block;margin-right: 10px}
#about h2{
	font-weight: 700;
	font-size:17px;
	margin-bottom:15px;
	text-transform: uppercase;
}
#about p{font-size: 16px;margin-bottom: 10px;}
#about .about-title{color:#ccd6f6;}
#about .about-title + p{font-weight: 700;}

#about .client-logos-wrapper{margin-top:30px;}
#about .client-logos-wrapper img{max-width:120px;max-height:80px;margin:20px;}

/************************ WORKS ************************/

#works{margin-bottom:100px;}
#works .work-wrapper{margin-bottom:30px;}
#works .work-img{background-color:#253b46;margin-bottom: 20px;}
#works .work-img img{
	max-width: 100%;
	mix-blend-mode: multiply;
	filter:grayscale(100%) contrast(1) brightness(100%);
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}
#works .work-img img:hover{
	mix-blend-mode:initial;
	filter:none;
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}
#works h3{
	margin-bottom:10px;
	font-size:27px;
	font-family:'Playfair Display', serif;
}
#works p{font-size:14px;}
#works p.work-year{color:#ccd6f6;font-weight:700;margin-top:10px;}

/************************ PATH ************************/

#path{margin-bottom:50px;position:relative;}
#path .path-bg{
	position:absolute;
	width: 100%;
	max-width:500px;
	left:50%;
	top:50%;
	transform:translateY(-50%) translateX(-50%);
	opacity:0.5;
}
#path h4{
	margin-bottom:40px;
	font-size: 30px;
	font-family:'Playfair Display', serif;
}
#path .path-wrapper{position:relative;padding-left:25px;}
#path .path-wrapper:before{
	position:absolute;
	content:"";
	width: 3px;
	height: 100%;
	left:0;
	top:0;
	background-color:#172933;
}
#path .path-wrapper .path-item:not(:last-child){
	border-bottom:solid 1px #364a55;
	padding-bottom:20px;
	margin-bottom:20px;
}
#path .path-wrapper .path-item h5{
	margin-bottom:10px;
	font-size:17px;
	font-family:'Playfair Display', serif;
}
#path .path-wrapper .path-item p{font-size:14px;line-height:1.7;}

/************************ FOOTER ************************/

#final{margin:20px 0;}
#final img{width: 150px;}

/************************ RESPONSIVE ************************/

@media all and (max-width: 1199px){

	#about .client-logos-wrapper img{max-width:100px;margin:10px;}
 
}

@media all and (max-width: 991px){
    
    #page-header{margin:35px 0;}
    #page-header .ph-copy h1{font-size:55px}

    #about .client-logos-wrapper img{max-width:80px;max-height:50px;margin:5px;}
        
}

@media all and (max-width: 767px){
    
    #about #network{margin-top:15px;}
    #about .client-logos-wrapper{margin-top:20px;}
    #about .client-logos-wrapper img{max-width: 65px;max-height: 35px;margin: 10px;}

    #path{margin-bottom:0;}
    #path .path-wrapper{margin-bottom:30px;}

}

@media all and (max-width: 575px){
    
    #page-header{margin:25px 0;}
    #page-header img{max-width:300px;}
    #page-header .ph-copy h1{font-size:35px}
    #page-header .ph-copy p{font-size:15px;margin-top:10px;}

    #about .about-text{font-size: 14px;}
    #about .client-logos-wrapper{margin-top: 10px;}
    #about .logo-extended{width:200px;}

    #works h3{font-size:16px;}
    #works p{font-size:13px;}

    #path h4{font-size:20px;margin-bottom:30px;}
    #path .path-wrapper .path-item h5{font-size:15px;}
    #path .path-wrapper .path-item p{font-size:13px;}

    #final{margin-top:10px;}
    
}

@media all and (max-width: 480px){
    
    
}