#Lang:hover{color:#D4A81E!important}
.wrapper{width:120%;height:100vh}
.wrapper .wrapper__video{object-fit:cover;width:100%;height:100%}
*{box-sizing:border-box}
.navbar{position:fixed;background-color:#fff;opacity:.9}
.navbar:hover{opacity:1}
body{padding:0;margin:0}
img{max-width:100%;height:auto}
.video-wrapper{height:100vh;position:relative}
.background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
.content{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.overlay{background-color:#002147;opacity:.8;position:absolute;bottom:0;right:0;left:0;width:100%;height:100%;margin:0;box-sizing:border-box;padding:15% 32px;line-height:1.5;text-align:center;:last-childmargin-bottom:0}
h1{font-size:32pt;font-weight:700;text-shadow:0 0 .3em #000;margin:0 0 1em}
p{font-size:11pt;margin:1em 0}
.grid{position:relative;margin:0 auto;padding:1em 0 4em;max-width:1000px;list-style:none;text-align:center}
.grid figure{position:relative;float:right;overflow:hidden;margin:10px 1%;min-width:320px;max-width:480px;max-height:440px;width:48%;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption > a{position:absolute;top:0;right:0;width:100%;height:100%}
.grid figure figcaption > a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-.15em;font-weight:300}
.grid figure h2 span{font-weight:800}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
.social-icons{padding:30px;background-color:#00506b;text-align:center}
.social-icons a{color:#fff;line-height:30px;font-size:30px;margin:0 5px;text-decoration:none}
.social-icons a i{line-height:30px;font-size:30px;-webkit-transition:all 200ms ease-in;-webkit-transform:scale(1);-ms-transition:all 200ms ease-in;-ms-transform:scale(1);-moz-transition:all 200ms ease-in;-moz-transform:scale(1);transition:all 200ms ease-in;transform:scale(1)}
.social-icons a:hover i{box-shadow:0 0 150px #000;z-index:2;-webkit-transition:all 200ms ease-in;-webkit-transform:scale(1.5);-ms-transition:all 200ms ease-in;-ms-transform:scale(1.5);-moz-transition:all 200ms ease-in;-moz-transform:scale(1.5);transition:all 200ms ease-in;transform:scale(1.5)}
figure.effect-sarah{background:#00506b}
figure.effect-sarah img{max-width:none;width:-webkit-calc(100% + 20px);width:calc(100% + 20px);-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-sarah:hover img{opacity:.4;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-sarah figcaption{text-align:right}
figure.effect-sarah h2{position:relative;overflow:hidden;padding:.5em 0}
figure.effect-sarah h2::after{position:absolute;bottom:0;right:0;width:100%;height:3px;background:#fff;content:'';-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
figure.effect-sarah:hover h2::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-sarah p{padding:1em 0;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
figure.effect-sarah:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
@media screen and (max-width: 50em) {
.content{padding:0 10px;text-align:center}
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}
}
*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}
.clearfix:before,.clearfix:after{display:table;content:''}
.clearfix:after{clear:both}
@media screen and (max-width: 25em) {
.codrops-header{font-size:75%}
.codrops-icon span{display:none}
}