.stoper {overflow:hidden;}

header {position:absolute;z-index:5;left:5vw;top:4vh;right:5vw;display:flex;justify-content:space-between;align-items:center;}

.menu-button {cursor:pointer;}
.menu-button div {width:50px;height:3px;background:#fcb53e;margin:5px 0;transition:.4s;}
.menu-button div:first-child {width:35px;}

.change div {transform:rotate(45deg);}
.change div:first-child {transform:rotate(-45deg) translate(-6px,4px);width:unset;}

.firm-logo {}

.langs {position:relative;width:60px;height:25px;text-align:right;overflow:hidden;transition:.4s;}
.langs:before {position:absolute;left:5px;top:5px;content:url('../_img/icons/down-yellow.png');transition:.4s;}
.langs a {color:#fcb53e;padding:3px 5px;text-shadow:1px 1px 1px transparent;}
.langs:hover {height:50px;}
.langs a:hover {text-shadow:1px 1px 1px #3f4450;}

.socials {position:absolute;z-index:500;bottom:4vh;right:5vh;display:flex;transition:.4s;}
.socials a {min-width:32px;height:32px;border-radius:16px;display:flex;justify-content:center;align-items:center;border:1px solid #3f4450;margin:0 .25em;}
.socials img {height:20px;transition:.4s;}
.socials a:hover {background:#3f4450;}
.socials a:hover > img {filter:invert(1);}
#trailer {padding:0 1rem;color:#3f4450;}
#trailer:hover {color:white;}

.socials-on-dark {}
.socials-on-dark a {background:#3f4450;}
.socials-on-dark a:hover {background:none;}
.socials-on-dark img {filter:invert(1);}
.socials-on-dark #trailer {color:white;}

nav {position:fixed;z-index:4;left:-100vw;top:0;bottom:0;width:100vw;height:100vh;background:rgba(0,0,0,0.75);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.4s;}
nav a {position:relative;color:#fff;font-family: 'Cinzel', serif;font-size:1.75em;padding:.25em 0;letter-spacing:2px;}
nav a:after {position:absolute;content:'';left:0;bottom:0;width:0;height:1px;background:#fff;transition:.4s;}
nav a:hover:after {width:100%;}
.nav-opened {left:0;}

main {position:relative;top:0;left:0;right:0;bottom:0;width:100vw;height:calc(100vh - 40px);overflow:hidden;}
video {position:absolute;z-index:1;top:0;left:0;bottom:0;right:0;width:100vw;calc(100vh - 40px);object-fit:cover;}
#logo-mark {position:absolute;z-index:5;bottom:4vh;left:5vw;width:100px;}
#background {width:100vw;height:100vh;}
/* */
.banner {position:relative;height:400px;}
.banner > img {width:100vw;height:100%;object-fit:cover;}
.banner > span {position:absolute;bottom:0;left:50%;transform:translate(-50%,-80%);font-family: 'Cinzel', serif;font-size:2em;color:#fff;white-space:nowrap;}

.container {width:90%;max-width:1170px;margin:4em auto;color:#77787b;}

.about {}
.about article {}
.about p {text-align:center;letter-spacing:.5px;line-height:1.5em;width:80%;margin:auto;padding:.5em 0;}
.about img {margin:4em 0;}
.about p:first-child {width:100%;}

.timeline {display:flex;flex-direction:column;justify-content:center;align-items:center;}
#timeline-milestones {margin:4em 0;}
.timeline strong {font-size:2em;border-bottom:2px solid #000;color:#000;}
#timeline-map {margin:4em 0;}

.vision {}
.vision article {}
.vision p {text-align:center;letter-spacing:.5px;line-height:1.5em;width:80%;margin:auto;padding:.5em 0;}
.vision img {margin:4em 0;}
.vision p:first-child {width:100%;}

.message {display:flex;}
.message figure {width:35%;}
.message figure img {margin-bottom:2em;}
.message figure strong {display:block;font-size:18px;font-weight:400;}
.message figure small {font-size:12px;font-weight:300;}

.message article {width:65%;padding:0 2em;}
.message article p {font-weight:300;margin:0;padding-bottom:1em;letter-spacing:1px;-webkit-text-stroke:.45px;}

.production {}

.production-txt {}
.production-txt h2 {font-size:3rem;margin:4rem 0 -4rem 0;}
.production-txt figure {display:flex;justify-content:space-between;align-items:flex-end;}

.what-we-made {}
.what-we-made h2 {font-size:3rem;margin:4rem 0;text-align:center;}
.what-we-made-list {display:grid;grid-template-columns:repeat(5,1fr);grid-gap:1rem;align-items:flex-start;}
.what-we-made section {}
.what-we-made section > img {width:100%;height:100%;}
.what-we-made article {min-height:200px;padding:1rem;border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8;}
.what-we-made h3 {font-weight:300;margin:0 0 .5rem 0;text-align:center;}
.what-we-made span {font-size:12px;}
.what-we-made figure a {display:none;}
.what-we-made figure a:first-child {display:block;}
.what-we-made a {position:relative;}
.what-we-made a:before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);}
.what-we-made a:after {content:url("../_img/click.png");position:absolute;left:1rem;top:1rem;}
.what-we-made a img {width:100%;height:100%;min-height:416px;object-fit:cover;}

.from-what {}
.from-what h2 {font-size:3rem;margin:4rem 0;text-align:center;}
.from-what-list {display:grid;grid-template-columns:repeat(5,1fr);grid-gap:1rem;align-items:flex-start;}
.from-what section {}
.from-what img {width:100%;height:100%;}
.from-what article {min-height:200px;padding:1rem;border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;}
.from-what h3 {font-weight:300;margin:0 0 .5rem 0;text-align:center;}
.from-what span {font-size:12px;}

.certificates {}
.certificates figure {display:grid;grid-template-columns:repeat(9,1fr);grid-gap:1rem 2rem;align-items:center;}
.certificates img {object-fit:cover;}
.certificates article {padding:2rem 4rem;}
.certificates article p {padding:.5rem 0;}

.contact {display:flex;justify-content:space-between;}

.contact-form {width:550px;display:flex;flex-direction:column;justify-content:space-between;}
.contact form {display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
.contact input, .contact textarea {width:100%;background:#f1f2f2;outline:0;border:0;padding:1em;margin-bottom:1em;}
.contact textarea {min-height:150px;resize:none;font-size:11px;}
.contact article {margin:1em 0;}
.contact article span {display:block;padding:.5em 0;color:#727272;font-weight:300;}
.contact article span a {font-weight:bold;color:#727272;}
.contact article span b {font-weight:bold;}

.form-hide {opacity:0;height:0;overflow:hidden;margin:0;padding:0;}
.form-result {margin:auto;transition:.4s;width:100%;display:flex;justify-content:center;align-items:center;background:#ddd;padding:3rem 0;box-shadow:1px 1px 10px #ddd;}

.contact section {width:550px;}
.contact section iframe {width:100%;height:100%;}

footer {height:40px;padding:0 5vw;background:#3f4450;color:#eaeaea;display:flex;justify-content:space-between;align-items:center;}
footer span {display:flex;align-items:center;font-size:.75em;}
footer span a {padding-left:1em;margin-left:.5em;border-left:1px solid #eaeaea;display:flex;justify-content:center;align-items:center;}

@media screen and (max-width: 720px) {
    .firm-logo img {width:150px;}
    .langs {text-align:unset;display:flex;}
    .langs::before {content:'';}
    .langs:hover {height:unset;}

    .socials {flex-direction:column-reverse; align-items:flex-end;}
    .socials a {margin-top:1rem;}

    video {height:170vh;}



    .banner {height:30vh;}
    #background {height:100%;object-fit:cover;}

    .timeline strong {font-size:1.5em;}

    .message {flex-direction:column;}
    .message figure {width:unset;}
    .message article {width:unset;padding:1em 0;}


    .production-txt h2 {margin:4rem 0;text-align:center;}
    .production-txt figure {display:unset;}
    .what-we-made-list, .from-what-list {grid-template-columns:repeat(1,1fr);grid-gap:4rem 0;}
    .what-we-made section {margin:0 2rem;}
    .what-we-made article, .from-what article {min-height:unset;}
    .what-we-made h2 {font-size:2.75rem;text-align:center;}

    .certificates article {padding:2rem;}

    .contact {display:block;padding:1em;}
    .contact-form {width:unset;}
    .contact section {width:unset;height:300px;}
}