@charset "utf-8";
/* CSS Document */

/* ------- webfonts ------- */
@font-face{font-family:'founders_grotesk';src:url('fonts/FoundersGrotesk-Regular.eot');src:local('☺'), url('fonts/FoundersGrotesk-Regular.woff') format('woff'), url('fonts/FoundersGrotesk-Regular.ttf') format('truetype'), url('fonts/FoundersGrotesk-Regular.svg') format('svg');font-weight:normal;font-style:normal}

/* ------- STYLES ------- */

/* GENERAL */
.guide-1{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:20px;z-index:1}
.guide-2{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*1 + 20px*2);z-index:1}
.guide-3{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*2 + 20px*3);z-index:1}
.guide-4{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*3 + 20px*4);z-index:1}
.guide-5{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*4 + 20px*5);z-index:1}
.guide-6{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*5 + 20px*6);z-index:1}
.guide-7{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*6 + 20px*7);z-index:1}
.guide-8{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*7 + 20px*8);z-index:1}
.guide-9{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*8 + 20px*9);z-index:1}
.guide-10{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*9 + 20px*10);z-index:1}
.guide-11{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*10 + 20px*11);z-index:1}
.guide-12{width:calc((100% - 260px)/12);background-color:rgba(255, 0, 0, 0.2);position:fixed;height:100%;top:0;left:calc((100% - 260px)/12*11 + 20px*12);z-index:1}

::selection{color:#FFF;background:#0000dc}
::-webkit-selection{color:#FFF;background:#0000dc}
::-moz-selection{color:#FFF;background:#0000dc}
::-ms-selection{color:#FFF;background:#0000dc}

*{outline:none;margin:0;padding:0;font-family:'founders_grotesk','Arial';letter-spacing:0.5px;font-size:inherit}
body{font-weight:normal;text-rendering:geometricPrecision;-webkit-text-rendering:geometricPrecision;padding:20px 20px 0px}
body.scroll-disabled{overflow:hidden!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
body.hidden{opacity:0}
h1, h2, h3, h4{font-weight:normal;}
a{text-decoration:none;color:initial}
a.d-block{display:block}
a:hover{cursor:pointer}
a.hover-blue:hover{color:#0000dc}
a.selected{color:#0000dc}
.selected a{color:#0000dc}
ul{list-style:none}
.two-columns{-webkit-column-count:2;-webkit-column-gap:20px;-moz-column-count:2;-moz-column-gap:20px;column-count:2;column-gap:20px;}
.d-table{display:table;width:100%}
iframe{width:100%;height:36vw}

.fs-xl{font-size:7vw;line-height:6.2vw;overflow:visible}
.fs-l{font-size:4.5vw;line-height:4.5vw}
.fs-m{font-size:2.5vw;line-height:2.5vw}
.fs-s{font-size:1.5vw;line-height:1.8vw}
.fs-xs{font-size:1vw;line-height:1.2vw}
.uppercase{text-transform:uppercase}
.color-blue{color:#0000dc}
.arrow{position:absolute;right:0;top:-0.4vw;height:4.6vw;width:auto;cursor:pointer}

/* columns */
.c-1{width:calc((100% - 220px)/12)}
.c-2{width:calc((100% - 220px)/12*2 + 20px*1)}
.c-3{width:calc((100% - 220px)/12*3 + 20px*2)}
.c-4{width:calc((100% - 220px)/12*4 + 20px*3)}
.c-5{width:calc((100% - 220px)/12*5 + 20px*4)}
.c-6{width:calc((100% - 220px)/12*6 + 20px*5)}
.c-7{width:calc((100% - 220px)/12*7 + 20px*6)}
.c-8{width:calc((100% - 220px)/12*8 + 20px*7)}
.c-9{width:calc((100% - 220px)/12*9 + 20px*8)}
.c-10{width:calc((100% - 220px)/12*10 + 20px*9)}
.c-11{width:calc((100% - 220px)/12*11 + 20px*10)}

.p-centered{margin:0 auto}
.p-2{margin-left:calc((100% - 220px)/12*1 + 20px*1)}
.p-3{margin-left:calc((100% - 220px)/12*2 + 20px*2)}
.p-4{margin-left:calc((100% - 220px)/12*3 + 20px*3)}
.p-5{margin-left:calc((100% - 220px)/12*4 + 20px*4)}
.p-6{margin-left:calc((100% - 220px)/12*5 + 20px*5)}
.p-7{margin-left:calc((100% - 220px)/12*6 + 20px*6)}
.p-8{margin-left:calc((100% - 220px)/12*7 + 20px*7)}
.p-9{margin-left:calc((100% - 220px)/12*8 + 20px*8)}
.p-10{margin-left:calc((100% - 220px)/12*9 + 20px*9)}
.p-11{margin-left:calc((100% - 220px)/12*10 + 20px*10)}

.w-4-4 li{display:inline-table;width:calc((100% - 220px)/12*4 + 20px*3);margin-right:calc((100% - 220px)/12*2 + 20px*3)}
.w-4-4 li:nth-child(even){margin-right:calc((100% - 220px)/12*2 + 20px*2)}

.w-3-3-3 li{display:inline-table;width:calc((100% - 220px)/12*3 + 20px*2);margin-right:calc((100% - 220px)/12*1 + 20px*2)}
.w-3-3-3 li:nth-child(3n){margin-right:calc((100% - 220px)/12*1 + 20px)}

.logo{width:7.3vw;height:7.8vw;background-image:url('../imgs/logo.svg');background-position:center;background-repeat:no-repeat;background-size:100%;display:block}

.left{float:left}
.right{float:right}

.lazy{opacity:0;transform:translateY(20px);-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-ms-transform:translateY(20px);transition:transform .3s ease}
.lazy.visible{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}

.lazy-img-wrapper{position:relative;overflow:hidden;background-color:#f7f7f7}
.lazy-img-wrapper.loaded{background:transparent}
.lazy-img-wrapper img{position:absolute;top:0;left:0;width:100%;opacity:0;will-change:opacity;-webkit-will-change:opacity;-moz-will-change:opacity;transition:opacity .3s ease}
.lazy-img-wrapper.loaded img{opacity:1}
.lazy-img-wrapper .img-proportions{background-position:center top;background-repeat:no-repeat;background-size:100%;transition:opacity .3s ease;opacity:0}
.lazy-img-wrapper:not(.color):hover img{opacity:0}
.lazy-img-wrapper:not(.color):hover .img-proportions{opacity:1}
a:hover .lazy-img-wrapper img{opacity:0}
a:hover .lazy-img-wrapper .img-proportions{opacity:1}

.master-wrapper{display:inline-block;width:100%}

/* .video */
.video{position:relative;overflow:hidden;background-color:#f7f7f7;transition:background .2s ease}
.video video{position:absolute;top:0;left:0;bottom:0;width:100%;opacity:0;transition:opacity .2s ease, transform .3s ease;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1)}
a:hover .video video{transform:scale(1.02);-webkit-transform:scale(1.02);-moz-transform:scale(1.02);-ms-transform:scale(1.02)}
.video.loaded{background-color:transparent}
.video.loaded video{opacity:1}

.btn-back{position:fixed;top:25px;right:20px;z-index:10}

/* .btn-swipe */
.btn-swipe.open{position:fixed;bottom:-10px;right:20px;z-index:10}
.btn-swipe.close{position:absolute;bottom:-10px;right:20px}

.swipe{position:fixed;top:0;right:-100%;width:calc(100% - 40px);background-color:#FFF;bottom:0;padding:20px;z-index:11;will-change:scroll-position;-webkit-will-change:scroll-position;-moz-will-change:scroll-position;overflow:hidden;display:none}
.swipe .language{position:absolute;top:25px;right:20px}
.swipe .btn-contact{position:absolute;bottom:-10px;left:20px}
.swipe nav ul{list-style:none;margin-top:5px;}
.swipe-opened .swipe{right:0;display:block}

/* .modal */
.btn-modal.close{position:absolute;top:25px;right:20px;z-index:10}

.modal{position:fixed;top:0;right:-100%;width:calc(100% - 40px);background-color:#FFF;bottom:0;padding:20px;overflow:auto;z-index:11;will-change:scroll-position;-webkit-will-change:scroll-position;-moz-will-change:scroll-position;overflow:hidden}
.modal .slider{width:calc(100vw - 40px);margin:0 auto;height:calc(100vh - 180px);margin-top:97px;background-position:center;background-size:cover;background-repeat:no-repeat}
.modal .slider .slides img{max-width:calc(100% - 20px);max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}

.modal .vimeo{height:calc(100vh - 180px);margin-top:97px;overflow:hidden}
.modal .vimeo iframe{height:100%;width:100%}
.modal-opened .modal{right:0}

/* header.master */
header.master{position:fixed;top:20px;left:20px;z-index:10}
body.footer-visible header.master{display:none}

footer.master{display:block;width:100%;position:relative;bottom:0px;height:50vh;overflow-y:hidden}
footer.master .social{position:absolute;bottom:-17px}

main{width:100%;position:relative;display:table;margin-top:14vw}
main.vh{min-height:calc(100vh - 14vw)}
main .main-img{margin:85px 0 60px}
main.logo-off{margin-top:5px;min-height:calc(100vh - 40px)}
main h1.bottom-fixed{position:absolute;left:0;bottom:12px}

section{width:100%;z-index:1;position:relative}
section.first{margin-top:200px}
section ul li a p.float-absolute{position:absolute;top:120px;opacity:0;visibility:hidden;transition:opacity .3s ease;left:0}
section ul li a:hover p.float-absolute{opacity:1;visibility:visible}
section > ul li{position:relative;margin-bottom:200px}
section ul.services li{margin-bottom:100px}

section.projects ul{display:table;width:100%}
.page-index section.projects ul li{margin-bottom:280px}
.page-index section.projects ul li:last-child{margin-bottom:200px}

section.about .videos li:last-child{margin-bottom:280px}
section.about h2{margin-bottom:120px}
section.about .videos span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

section.project ul{display:table;width:100%}
section.project ul li{margin:40px 0}
section.project ul li.quote, section.project ul li.paragraph{margin:120px 0}
section.project ul .aside{margin:80px auto}
section.project ul li.vimeo p{margin-top:40px}

section.awards{margin-top:80px}
section.awards ul{margin-top:80px}
section.awards ul li a:hover{color:#0000dc}
section.awards img{height:15vw;width:auto;margin-bottom:60px}

section.catalogues{margin:80px 0 160px}
section.catalogues ul{margin-top:80px;display:grid;grid-template-columns:repeat(3, 1fr);column-gap:80px;row-gap:80px;width:calc(100% - 30px)}
section.catalogues ul li{margin-bottom:0}
section.catalogues ul li a{position:relative;display:block}
section.catalogues ul li a:after{content:"";width:calc(100% + 10px);height:4px;background:#000;position:absolute;bottom:-25px;left:15px}
section.catalogues ul li a:before{content:"";width:4px;height:calc(100% + 10px);background:#000;position:absolute;top:15px;right:-25px}
section.catalogues ul li a .lazy-img-wrapper{border:4px solid}
section.catalogues ul li a .lazy-img-wrapper img{opacity:0;z-index:1}
section.catalogues ul li a:hover .lazy-img-wrapper img{opacity:1}
section.catalogues ul li a h3{position:absolute;top:30px;left:24px;width:calc(100% - 48px)}
section.catalogues ul li a p{position:absolute;bottom:18px;left:24px;width:calc(100% - 48px)}

.page-contact footer.master{height:50vh}

.page-project footer.master{height:60vh}

/* --------------------------------------- media-queries */

@media (max-width: 840px){
	.logo{width:5vw;height:5.4vw}
	.arrow{position:absolute;right:0;top:0;height:4.6vw;width:auto;cursor:pointer}
	
	.fs-xl{font-size:5vw;line-height:5vw}
	.fs-l{font-size:26px;line-height:28px}
	.fs-m{font-size:20px;line-height:22px}
	.fs-s{font-size:16px;line-height:18px}
	.fs-xs{font-size:12px;line-height:14px}

	main{margin-top:60px}
	main.vh{min-height:0vh;margin-bottom:200px}
	main h1{width:calc(100% - 20px)}
	main h1.bottom-fixed{bottom:initial;position:static}
	main.logo-off{min-height:0}
	main.logo-off h1{width:calc(100% - 20vw)}
	
	.btn-swipe.open{bottom:0}
	.swipe .btn-contact{bottom:0}
	.btn-swipe.close{bottom:0}
	
	.modal .vimeo{margin-top:75px}
	
	.w-3-3-3 li{float:left;width:calc((100% - 220px)/12*5 + 20px*4);margin-right:calc((100% - 220px)/12*1 + 20px*2)}
	
	section.catalogues ul{grid-template-columns:repeat(2, 1fr)}

	.page-index section.projects ul li{margin-bottom:200px}
	
	footer.master{height:25vh}
	footer.master .social{bottom:-4px}
	.page-contact footer.master .social{position:fixed;bottom:5px}

	.page-contact footer.master{height:unset;min-height:unset}

	.page-project footer.master{height:25vh}
}

@media (max-width: 560px){
	.logo{width:28px;height:30px}
	
	.c-1{width:100%}
	.c-2{width:100%}
	.c-3{width:100%}
	.c-4{width:100%}
	.c-5{width:100%}
	.c-6{width:100%}
	.c-7{width:100%}
	.c-8{width:100%}
	.c-9{width:100%}
	.c-10{width:100%}
	.c-11{width:100%}
	
	.p-2{margin-left:0}
	.p-3{margin-left:0}
	.p-4{margin-left:0}
	.p-5{margin-left:0}
	.p-6{margin-left:0}
	.p-7{margin-left:0}
	.p-8{margin-left:0}
	.p-9{margin-left:0}
	.p-10{margin-left:0}
	.p-11{margin-left:0}
	
	.fs-s{font-size:14px;line-height:16px}
	.fs-m{font-size:16px;line-height:18px}
	.fs-l{font-size:16px;line-height:18px}
	.fs-xl{font-size:28px;line-height:28px}
	
	.lazy-img-wrapper:not(.color) img{opacity:1!important}
	.lazy-img-wrapper:not(.color) .img-proportions{opacity:0!important}
	
	.btn-swipe.open{bottom:5px}
	.swipe .btn-contact{bottom:5px}
	.btn-swipe.close{bottom:5px}

	main.vh{margin-bottom:60px}
	
	section.first{margin-top:80px}
	
	section > ul li{margin-bottom:60px}
	.page-index section.projects ul li{margin-bottom:60px}
	.page-index section.projects ul li:last-child{margin-bottom:40px}
	section ul li a p.float-absolute{position:static;opacity:1;visibility:visible;margin-top:10px}
	
	section.project ul li.quote, section.project ul li.paragraph{margin:40px 0}
	
	section ul.services li{margin:40px 0 60px}
	section ul.services li:first-child{margin-top:0}
	
	section.about .videos li:last-child{margin-bottom:100px}
	section.about h2{margin-bottom:80px}
	
	section.awards ul{margin-top:0}
	section.awards img{height:40vw;margin-bottom:20px}

	section.catalogues ul{grid-template-columns:repeat(1, 1fr)}
	
	.w-3-3-3 li{float:none;width:100%;margin-right:0;display:block}
	.w-4-4 li{float:none;width:100%;margin-right:0;display:block}
}

@media (max-width: 375px){
	.page-contact main.fs-xl{font-size:16px;line-height:18px}
}