﻿
/*--------------------------------------------------------------
   RESET
--------------------------------------------------------------*/

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
pre{white-space:pre-wrap}
small{font-size:80%}






/*--------------------------------------------------------------
   BASE
--------------------------------------------------------------*/

/* main */
html{cursor:none!important}
html,body{margin:0;height:100%;-webkit-overflow-scrolling:touch;overflow-scrolling:touch}
body{overflow-x:hidden;overflow-y:scroll}
svg:not(:root){overflow:hidden}
.clear{clear:both}
.hideclear{display:none}
.row:after{content:"";display:table;clear:both}
::-webkit-scrollbar{width:0;height:0}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#000;border-radius:0}     
.c-scrollbar{display:none!important}


/* typography */
@font-face{font-family:'PPNeueMontreal-Book';src:local('PPNeueMontreal-Book'),url("../webfonts/PPNeueMontreal-Book.otf")format('opentype')}
h1,h2,h3,h4,h5,h6,p,a,strong,span{margin:0;padding:0;font-style:normal;font-weight:normal;letter-spacing:normal!important;font-family:'PPNeueMontreal-Book',sans-serif!important}
h1{font-size:6vw;text-transform:uppercase;line-height:0}
h2{font-size:55px;text-transform:uppercase;line-height:55px}
h3{font-size:18px;text-transform:uppercase}
h4{font-size:35px;text-transform:uppercase}
p{font-size:20px}
a{font-size:20px;text-decoration:none;transition:.3s ease;cursor:none!important}
span{transition:.3s ease}
strong{font-size:20px}
i{font-size:12px;transition:.3s ease}
.paragraph{line-height:35px}
.white{color:#fff}
.black{color:#212121}


/* loader */
#loader{z-index:1001;position:fixed;top:20px;left:40px}
#loader-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}
#loader-wrapper .loader-section{position:fixed;top:0;width:100%;bottom:0;background:#000;z-index:1000}
.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:1.6s cubic-bezier(.55,0,.1,1);transition:1.2s cubic-bezier(.55,0,.1,1)}
#loader div{display:inline-block;overflow:hidden!important;margin:0!important;padding-top:12vw}
#loader span{font-size:32vw!important;margin:0!important;line-height:0!important}
.letter1{display:inline-block;animation:reveal 2s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.6s;opacity:0;transform-origin:bottom right}
.letter2{display:inline-block;animation:reveal 2s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.61s;opacity:0;transform-origin:bottom right}
.letter3{display:inline-block;animation:reveal 2s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.64s;opacity:0;transform-origin:bottom right}
.letter4{display:inline-block;animation:reveal 2s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.67s;opacity:0;transform-origin:bottom right}
.image-1{animation:scale 3s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.6s}
@keyframes reveal{
0%{-webkit-transform:translatey(32vw) rotate(-90deg) scale(.7);transform:translatey(32vw) rotate(-90deg) scale(.7)}
40%{-webkit-transform:translatey(0) rotate(0deg) scale(1);transform:translatey(0) rotate(0deg) scale(1);opacity:1}
55%{-webkit-transform:translatey(0) rotate(0deg) scale(1);transform:translatey(0) rotate(0deg) scale(1);opacity:1}
100%{-webkit-transform:translatey(-35vw);transform:translatey(-35vw);opacity:1}
}
@keyframes scale{
0%{-webkit-transform:scale(1.35);transform:scale(1.35)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
#content-loader-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}
#content-loader-wrapper .content-loader-section{position:fixed;top:0;width:100%;bottom:0;background:#f7f7f7;z-index:1000}
.loaded #content-loader-wrapper{visibility:hidden;opacity:0;-webkit-transition:1.6s cubic-bezier(.55,0,.1,1);transition:1.2s cubic-bezier(.55,0,.1,1)}






/*--------------------------------------------------------------
   ERROR PAGES
--------------------------------------------------------------*/
.error-page{position:absolute;top:50%;left:50%;text-align:center;transform:translate(-50%,-50%)}
.error-title{display:block;font-size:15vw!important;line-height:15vw!important}
.error-btn{margin-top:50px}
.error-btn a{position:relative;text-transform:uppercase}
.error-btn a:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.error-btn a:hover:after{transform:scaleX(1);transform-origin:bottom left}


.coming-soon-page{position:absolute;top:50%;left:50%;text-align:center;transform:translate(-50%,-50%)}
.coming-soon-title{display:block;font-size:7vw!important;line-height:7vw!important}





/*--------------------------------------------------------------
   HOME
--------------------------------------------------------------*/

/* cursor */
#pointer-dot{left:-2px;top:-2px;width:0;height:0;position:fixed;border-radius:4px;z-index:101;pointer-events:none}
#pointer-ring{left:0;top:0;width:0;height:0;padding:15px;position:fixed;border-radius:100px;z-index:102;pointer-events:none}
.home{background:#000}
.content{background:#F7F7F7}
.home #pointer-dot{border:3px solid #fff;background:#fff}
.home #pointer-ring{border:1.5px solid rgba(255,255,255,.5)}
.content #pointer-dot{border:3px solid #212121;background:#212121}
.content #pointer-ring{border:1.5px solid rgba(0,0,0,.4)}


/* header */
.header{z-index:99;position:absolute;top:0;left:0;right:0;padding:10px 40px 5px}
.left-header{float:left;text-transform:uppercase}
.right-header{float:right;text-transform:uppercase}
.right-header a{position:relative;margin-left:160px}
.right-header .white:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.right-header .white:hover:after{transform:scaleX(1);transform-origin:bottom left}
.right-header .black:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#212121;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.right-header .black:hover:after{transform:scaleX(1);transform-origin:bottom left}


/* projects */
.mobile{display:none}	
.panel.align-top{align-items:flex-start;scroll-snap-type:y mandatory!important}
.panel{width:100%;position:relative;box-sizing:border-box;height:100vh;scroll-snap-type:y mandatory!important}
.project{position:absolute;left:40px;bottom:4vw}
.project-btn{display:flex;top:50%;right:40px;position:absolute;transform:translateY(-50%)}
.view-project{padding:0px 10px;border:4px solid #fff;border-radius:100px;font-size:6vw!important;text-transform:uppercase;transition:.5s cubic-bezier(.55,0,.1,1)!important}
.view-project:hover{transform:rotate(-25deg);transform-origin:center center}
.project-desc{position:absolute;left:40px;top:50%;transform:translateY(-50%)}
.panel div{background-size:cover;background-position:center center;width:100%;height:100%;position:absolute;left:0;right:0;top:0;bottom:0}
.image-1{z-index:1;background:url("../img/wing-power.jpg");transform-origin:center center}
.image-2{z-index:3;background:url("../img/fortune-jets.jpg")}
.image-3{z-index:5;background:url("../img/iron-edge.jpg")}
.image-4{z-index:7;background:url("../img/universal.jpg")}
.image-5{z-index:9;background:url("../img/cp-auction.jpg")}
.inner1{z-index:2}
.inner2{z-index:4}
.inner3{z-index:6}
.inner4{z-index:8}
.inner5{z-index:10}


/* footer */
.footer-about{position:absolute;left:40px;top:35%;transform:translatey(-35%);width:auto;max-width:400px;opacity:.8}
.footer-email{position:absolute;left:40px;bottom:120px}
.footer-email a{display:block;position:relative;font-size:6vw!important;text-transform:uppercase;line-height:6vw!important}
.top-email{display:block;font-size:6vw!important;position:absolute;left:0;top:-6vw;transition:all 1s cubic-bezier(.55,0,.1,1)}
.footer-email a:hover .top-email{padding-left:69%}
.footer-email a:hover .arrowsvg{opacity:1}
.arrowsvg{z-index:99;fill:#fff;transform:rotate(90deg);position:absolute;left:0;top:-4.5vw;transition:all 1s cubic-bezier(.55,0,.1,1);opacity:0;animation:scroll 3s cubic-bezier(.55,0,.1,1) infinite both;width:4vw;height:4vw}
@keyframes scroll{0%{transform:translateY(0) rotate(90deg)}50%{transform:translateY(-16px) rotate(90deg)}100%{transform:translateY(0) rotate(90deg)}}
.white-dot{display:inline-block;height:.7vw;width:.7vw;border-radius:100px;background:#fff;margin-left:5px}
.black-dot{display:inline-block;height:.7vw;width:.7vw;border-radius:100px;background:#212121;margin-left:5px}
.footer-links{position:absolute;right:40px;bottom:10px}
.link1{margin-right:40px}
.link2{margin-left:50px}
.footer-links a{position:relative;text-transform:uppercase}
.footer-links .white:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.footer-links .white:hover:after{transform:scaleX(1);transform-origin:bottom left}
.footer-links .black:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#212121;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.footer-links .black:hover:after{transform:scaleX(1);transform-origin:bottom left}
.disclaimer{position:absolute;left:40px;bottom:10px;opacity:.3;display:block;margin-top:10px;text-transform:uppercase}






/*--------------------------------------------------------------
   MOBILE
--------------------------------------------------------------*/

/* projects */	
.white-header{background:#F7F7F7}
.mobile-panel{width:100%;position:relative;box-sizing:border-box;height:100vh}
.project-section{display:block;overflow:auto;margin-top:70px;animation:fade 2s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:1.9s;opacity:0}
@keyframes fade{0%{opacity:0}100%{opacity:1}}
@keyframes fade-p{0%{opacity:0}100%{opacity:.8}}
.project-title{position:absolute;left:0;bottom:-35px}
.project-title p{position:relative;text-transform:uppercase}
.mobile-arrowsvg{z-index:99;fill:#fff;position:absolute;right:-40px;bottom:2px;transition:all 1s cubic-bezier(.55,0,.1,1);animation:mobilescroll 3s cubic-bezier(.55,0,.1,1) infinite both;width:15px;height:15px}
@keyframes mobilescroll{0%{transform:translatex(0)}50%{transform:translatex(-16px)}100%{transform:translateY(0)}}
.project-view-mobile{position:absolute;right:0;bottom:-35px;text-transform:uppercase}
.image-wrap{background-size:cover!important;background-position:center center!important;width:auto;height:700px;position:relative;margin:40px 40px 90px}
.mobile-image-1{background:url("../img/wing-power.jpg")}
.mobile-image-2{background:url("../img/fortune-jets.jpg")}
.mobile-image-3{background:url("../img/iron-edge.jpg")}
.mobile-image-4{background:url("../img/universal.jpg")}
.mobile-image-5{background:url("../img/cp-auction.jpg")}


/* footer */
.mobile-footer{display:block;overflow:auto;position:relative;height:100vh}
.footer-about{position:absolute;left:40px;top:35%;transform:translatey(-35%);width:auto;max-width:400px;opacity:.8}
.footer-email{position:absolute;left:40px;bottom:120px}
.footer-email a{display:block;position:relative;font-size:6vw!important;text-transform:uppercase;line-height:6vw!important}
.top-email{display:block;font-size:6vw!important;position:absolute;left:0;top:-6vw;transition:all 1s cubic-bezier(.55,0,.1,1)}
.footer-email a:hover .top-email{padding-left:69%}
.footer-email a:hover .arrowsvg{opacity:1}
.arrowsvg{z-index:99;fill:#fff;transform:rotate(90deg);position:absolute;left:0;top:-4.5vw;transition:all 1s cubic-bezier(.55,0,.1,1);opacity:0;animation:scroll 3s cubic-bezier(.55,0,.1,1) infinite both;width:4vw;height:4vw}
@keyframes scroll{0%{transform:translateY(0) rotate(90deg)}50%{transform:translateY(-16px) rotate(90deg)}100%{transform:translateY(0) rotate(90deg)}}
.dot{display:inline-block;height:.7vw;width:.7vw;border-radius:100px;background:#fff;margin-left:5px}
.footer-links{position:absolute;right:40px;bottom:20px}
.link1{margin-right:40px}
.link2{margin-left:50px}
.footer-links a{position:relative;text-transform:uppercase}
.footer-links a:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.footer-links a:hover:after{transform:scaleX(1);transform-origin:bottom left}
.disclaimer{position:absolute;left:40px;bottom:20px;opacity:.3;display:block;margin-top:10px;text-transform:uppercase}






/*--------------------------------------------------------------
   PAGES
--------------------------------------------------------------*/

/* intro */ 
.intro-section{padding:40px;position:relative;min-height:500px;height:35vw}
.intro-section h1{position:absolute;left:40px;top:50%;transform:translatey(-50%);display:inline-block;overflow:hidden!important;margin:0!important;line-height:6vw!important}
.title1{display:inline-block;animation:slide .7s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.4s;opacity:0;font-size:6vw!important;margin:0!important;line-height:0!important}
.title2{display:inline-block;animation:slide .7s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.5s;opacity:0;font-size:6vw!important;margin:0!important;line-height:0!important}
.intro-section p{position:absolute;right:40px;bottom:40px;width:auto;max-width:450px;animation:fade-p 1s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.55s;opacity:0}
.breadcrumb{position:absolute;left:40px;bottom:40px;text-transform:uppercase;animation:fade 1s cubic-bezier(.55,0,.1,1);animation-fill-mode:forwards;animation-delay:.55s;opacity:0}
.breadcrumb span{font-size:20px}
.breadcrumb a{opacity:.3;position:relative}
.breadcrumb a:hover{opacity:1}
.breadcrumb a:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#212121;transform-origin:bottom right;transition:transform 0.5s cubic-bezier(.55,0,.1,1)!important}
.breadcrumb a:hover:after{transform:scaleX(1);transform-origin:bottom left}
@keyframes slide{0%{-webkit-transform:translatey(6vw);transform:translatey(6vw)}100%{-webkit-transform:translatey(0);transform:translatey(0);opacity:1}}


/* images */ 
.section-parallax{position:relative;width:100%;height:100%;overflow:hidden}
.parallax-content{background-size:cover;position:relative;background-position:center;background-repeat:no-repeat;width:100%;height:140%}  
.image-banner{height:60vw}
.dark-img-bg{background:#000!important}
.left-image{float:left;width:50%}
.right-image{float:right;width:50%}
.mobile-image{display:none}


/* text */ 
.text-section{padding:200px 40px}
.text-section-inner{display:block;overflow:auto;width:auto;max-width:1400px}
.text-section-inner h2{float:left}
.text-section-inner p{float:right;width:auto;max-width:1000px;opacity:.8}
.text-section-inner a{opacity:1!important;position:relative}
.text-section-inner a:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px!important;bottom:0;left:0;background-color:#212121;transform:scaleX(1);transform-origin:bottom left}
.staging-disclaimer{opacity:.5!important;font-size:12px!important}


/* next */ 
.next-section{height:23vw;position:relative;background:#000;transition:1s cubic-bezier(.55,0,.1,1);border-bottom:1px solid #000}
.next-section:hover{background:#f7f7f7;border-bottom:1px solid #D6D6D6}
.next-section:hover .next-arrowsvg2{opacity:0!important}
.next-section:hover .next-arrowsvg1{opacity:1!important}
.next-section:hover h1{color:#212121!important;padding-left:50%}
.next-section h1{position:absolute;left:40px;top:50%;transform:translatey(-50%);transition:1s cubic-bezier(.55,0,.1,1)!important}
.next-arrowsvg1{z-index:99;position:absolute;left:86px;top:36%;transform:translatey(-36%);transition:all 1s cubic-bezier(.55,0,.1,1);animation:nextscroll 3s cubic-bezier(.55,0,.1,1) infinite both;width:6vw;height:6vw;fill:#212121;opacity:0}
.next-arrowsvg2{z-index:99;fill:#fff;position:absolute;right:86px;top:36%;transform:translatey(-36%);transition:all 1s cubic-bezier(.55,0,.1,1);animation:nextscroll 3s cubic-bezier(.55,0,.1,1) infinite both;width:6vw;height:6vw}
@keyframes nextscroll{0%{transform:translatex(0)}50%{transform:translatex(-46px)}100%{transform:translateY(0)}}


/* footer */ 
.content-footer{display:block;overflow:auto;position:relative;height:100vh}






/*--------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------*/

@media screen and (max-width:1600px){
    
/* typography */    
p,a,span{font-size:19px}
.paragraph{line-height:30px}  
.breadcrumb span{font-size:19px}	
    
    
/* header */    
.right-header a{margin-left:100px}
.right-header a:after{height:1.5px!important}    
    
    
/* footer */  
.footer-about{max-width:370px}	
.footer-email{bottom:100px} 
.footer-links a:after{height:1.5px!important}  
	
	
/* text */ 
.intro-section p{max-width:400px}	
.text-section{padding:150px 40px}	
.text-section-inner{max-width:1100px}
.text-section-inner p{max-width:700px}
.next-arrowsvg1{top:38%;transform:translatey(-38%)}
.next-arrowsvg2{top:38%;transform:translatey(-38%)}	
} 






@media screen and (max-width:1120px){
    
/* text */    
.text-section-inner h2{float:none}
.text-section-inner p{float:none;max-width:100%;margin-top:50px}

}






@media screen and (max-width:1000px){.project{bottom:5vw}}






@media screen and (max-width:800px){
	
/* loader */ 	
#loader{display:flex;justify-content:center;align-items:center;left:20px;right:20px}	
#loader div{padding-top:13vw}	
#loader span{font-size:34vw!important}	
	
	
/* cursor */      
html{cursor:auto!important}
a{cursor:pointer!important}
#pointer-dot{display:none}
#pointer-ring{display:none}
	

/* typography */   
h1{font-size:50px}	
h2{font-size:50px}	
p,a,span{font-size:15px}
.paragraph{line-height:25px}	
	
	
/* header */
.header{top:0;padding:10px 20px 5px;position:fixed}	
.black-header{background:#000}	
.right-header a{margin-left:30px}	
	
	
/* projects */	
.desktop{display:none}	
.mobile{display:block}	
.image-wrap{margin:20px 20px 90px}
.left-image{float:none;width:100%}
.right-image{float:none;width:100%}	
	
	
/* intro */ 
.intro-section{padding:20px;min-height:450px;height:450px}
.intro-section h1{left:20px;top:auto;bottom:230px;transform:translatey(0);line-height:50px!important}
.title1{font-size:50px!important}
.title2{font-size:50px!important}
.intro-section p{right:auto;left:20px;bottom:40px;max-width:300px}
.breadcrumb{left:20px;bottom:290px}
.breadcrumb span{font-size:15px}
	
	
/* images */ 	
.image-banner{display:none}	
.mobile-image{display:block;background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;height:400px}	
.mobile-image2{display:block;background-position:center;background-repeat:no-repeat;width:100%;height:400px;background-size:135%}	
.mobile-image-wrap-wing{background:#2d77e2;width:100%;height:400px;display:flex;align-items:center;justify-content:center}	
.mobile-image-wrap-jets{background:#293133;width:100%;height:400px;display:flex;align-items:center;justify-content:center}	
.mobile-image-wrap-universal{background:#26282d;width:100%;height:400px;display:flex;align-items:center;justify-content:center}	
.mobile-image-wrap-iron{background:#bf0021;width:100%;height:400px;display:flex;align-items:center;justify-content:center}	
.mobile-image-wrap-cp{background:#e52831;width:100%;height:400px;display:flex;align-items:center;justify-content:center}
.mobile-image3{display:block;background-size:cover;background-position:center;background-repeat:no-repeat;width:110%;height:110%}	
	
	
/* text */ 
.text-section{padding:100px 20px}
.text-section-inner h2{float:none;margin-bottom:30px}
.text-section-inner p{float:none;margin-top:0}	
	
	
/* next */ 
.next-section{height:200px}
.next-section:hover h1{padding-left:48%}
.next-section h1{left:20px}
.next-arrowsvg1{left:76px;top:38%;transform:translatey(-38%);width:40px;height:40px}
.next-arrowsvg2{right:36px;top:38%;transform:translatey(-38%);width:40px;height:40px}

	
/* footer */
.footer-about{left:20px;right:20px;max-width:250px}
.footer-email{left:20px;bottom:100px}
.footer-email a{font-size:50px!important;line-height:80px!important}
.top-email{font-size:50px!important;top:-50px}
.arrowsvg{top:-30px;width:40px;height:40px}	
@keyframes scroll{0%{transform:translateY(0) rotate(90deg)}50%{transform:translateY(-10px) rotate(90deg)}100%{transform:translateY(0) rotate(90deg)}}	
.footer-links{right:20px}
.link1{margin-right:0}
.link2{margin-left:30px}	
.disclaimer{left:20px}	
}






@media screen and (max-width:600px){
		
/* typography */   
h1{font-size:35px}	
h2{font-size:35px;line-height:35px}	
	
	
/* error pages */ 	
.error-btn{margin-top:40px}		
	

/* projects */  
.image-wrap{height:400px}		
	

/* intro */ 	
.intro-section h1{line-height:35px!important}	
.title1{font-size:35px!important}
.title2{font-size:35px!important}	
	

/* next */  
.next-section:hover h1{padding-left:42%}
.next-arrowsvg1{left:46px;top:43%;transform:translatey(-43%);width:30px;height:30px}
.next-arrowsvg2{right:36px;top:43%;transform:translatey(-43%);width:30px;height:30px}
@keyframes nextscroll{0%{transform:translatex(0)}50%{transform:translatex(-16px)}100%{transform:translateY(0)}}	


/* footer */
.footer-about{top:50%;transform:translatey(-50%)}	
.footer-email{bottom:150px}
.footer-email a{font-size:30px!important;line-height:60px!important}
.top-email{font-size:30px!important;top:-35px}
.arrowsvg{top:-10px;width:20px;height:20px}	
.footer-links{right:auto;left:-10px;bottom:70px}	
.disclaimer{bottom:40px}		
}






@media screen and (max-width:450px){
	
/* images */  	
.mobile-image3{width:100%;height:88%}		
	
/* next */  
.next-section:hover h1{padding-left:25%}
@keyframes nextscroll{0%{transform:translatex(0)}50%{transform:translatex(-13px)}100%{transform:translateY(0)}}		
}





