/* Reset */
html{line-height:1.15;-webkit-text-size-adjust:100%}
body,html,h1,h2,h3,h4,h5,h6,figure,video{margin:0;padding:0;}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}
::-webkit-input-placeholder{color:#000;}:-moz-placeholder{color:#000;}::-moz-placeholder{color:#000;}:-ms-input-placeholder{color:#000;}
*{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;outline:none !important;box-sizing:border-box;-webkit-box-sizing:border-box;}
a{transition:color .25s cubic-bezier(0.47,0,0,1);text-decoration:none;}
a,input[type="submit"]{transition:0.4s color cubic-bezier(0.47,0,0,1);}
input,textarea,select,button,a{padding:0;color:inherit;font:inherit;letter-spacing:inherit;background:transparent;border-radius:0;-webkit-border-radius:0;}
img,button,input,.btn{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
figure img,figure video,figure iframe{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
figure{position:relative;}
img{border-style:none;vertical-align:top;max-width:100%;pointer-events:none;}
svg{vertical-align:top;}
p{margin:0;}
p:empty{display:none;}
::selection{background:#ddd;}
::-moz-selection{background:#ddd;}


/* Global */
body{background:#000;color:#fff;font-size: 16px;font-family:'Poppins',Helvetica,Arial,sans-serif;overflow-x:hidden;}
#content{min-height:100vh;display:flex;flex-direction:column;padding: 30px;}
#main{flex:1;}
a{color: #fff;text-decoration:none;}
p,span{font-size: 18px;}
h1{font-size:60px;font-weight:800;}
h2{font-size: 40px;font-weight:800;}
h3{font-size:32px;}
h4{font-size:24px;}
.clear{clear:both;}
.modal{overflow:hidden;}
.no-scroll{height:100vh;overflow:hidden;}
.center{text-align:center;}
.lightbox iframe{position:absolute;top:0;width:100%;height:100%;padding:60px;object-fit:cover;}
.mobile{display:none;}
.container{padding:0 30px;}


/* Hovers */
@media (hover: hover) {
    .video:hover .play,.play:hover{opacity:1;}
    a,input[type="submit"]{
        transition:opacity 0.25s cubic-bezier(0.47,0,0,1);
    }
}

/*
.frame{position:absolute;width:100%;height:100%;top:0;left:0;}
.frame span{position:absolute;}
.frame span:nth-child(1){top:0;width:100%;height:8px;background: url(../img/losange.svg);background-repeat:repeat-x;}
.frame span:nth-child(2){left:0;width:8px;height:100%;background: url(../img/losange.svg);background-repeat:repeat-y;}
.frame span:nth-child(3){bottom:0;width:100%;height:8px;background: url(../img/losange.svg);background-repeat:repeat-x;}
.frame span:nth-child(4){right:0;width:8px;height:100%;background: url(../img/losange.svg);background-repeat:repeat-y;}
*/

/* Header */
header{
    height:86px;
    z-index:2;
    position:relative;
    width:100%;
    background: url(../img/losange.svg);
    background-size: 8px;
    background-repeat: round;
    overflow: hidden;
}
header:before {
    content:'';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: black;
}
header .container{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items: center;
    padding: 16px 34px;
}
header .menu{
    display:flex;
    margin-right: -15px;
    padding: 0;
}
#menu{position: relative;top: 2px;z-index: 2;}
#menu a{
    text-transform:uppercase;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
#menu a:hover{color:red;}
#menu li{
    list-style:none;
    white-space: nowrap;
}
header .menu li{
    margin: 0 15px;
}
header nav a{
    letter-spacing: 0.04em;
    pointer-events:auto;
    color:white;
    text-transform:uppercase;
    padding-bottom:6px;
    border-bottom: 2px solid transparent;
    transition:all 0.3s ease-out;
}
header .logo{
    position: relative;
    top: 2px;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.04em;
    z-index: 2;
    line-height: 1;
}

.page-content{
    z-index:2;
    position:relative;
    width:100%;
    background: url(../img/losange.svg);
    background-size: 8px;
    background-repeat: round;
    overflow: hidden;
    margin-top: 30px;
    padding: 35px;
    min-height: calc(100vh - 180px);
}
.page-content:before {
    content:'';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: black;
}

.content{position:relative;z-index: 3;line-height:1.25;min-height: calc(100vh - 280px);}
.content li{position:relative;margin:1em 0;list-style:none;}
.content li:before {
    position: absolute;
    background: url(../img/losange.svg);
    top: 2px;
    left: -34px;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-size:16px;
}
.bg{position: absolute;width:45%;height: calc(100% - 16px);z-index: 2;right: 8px;top: 8px;background-repeat:no-repeat;background-size:cover;}

.home .content{width:55%;}
.home .bg{width:45%;}
.bg:before{content:'';display:block;position:absolute;top:0;left:0;width:40%;height:100%;background: linear-gradient(90deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);}

.projects h1{position:relative;z-index:2;background:white;color:#000;text-align:center;text-transform:uppercase;font-size:40px;padding:20px;margin: 0 -30px;}
.projects_container{padding: 30px 0;margin: 0 -15px;max-width: 1024px;display:flex;flex-wrap: wrap;}
.project{width:33.333%;text-align: center;padding: 20px;}
.project figure{position:relative;width:100%;padding-bottom:60%;margin-bottom: 15px;border: 1px solid white;}
.project-bg{width:100%;}
.project-title{font-size:24px;font-weight:500;text-transform:uppercase;}
.projects .content{display: flex;justify-content: center;}

.contact-outer{position:absolute;top:50%;left: 25%;transform: translate(-50%,-50%);}
.contact-box{
    position: relative;
    z-index:2;
    background: url(../img/losange.svg);
    background-size: 8px;
    background-repeat: round;
    overflow: hidden;
    padding: 30px 30px 40px;
    width: 450px;
    text-align:center;
}
.contact-box:before {
    content:'';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: black;
}
.contact-text{position: relative;z-index:2;font-weight:600;}
.contact-text *{font-size: 26px;}
.contact-text h2{background:white;color:#000;margin: 0 -25px;margin-bottom:30px;font-size: 45px;padding: 4px 10px 1px;}

@media all and (max-width:1024px){
    #content{padding:12px;}
    .page-content{margin-top:15px;padding: 20px;}
    .home .content{width:100%;}
    .bg{width: calc(100% - 16px) !important;opacity: 0.5;}
    header .logo{font-size:20px;}
    header .container{flex-direction:column;padding: 15px 10px 4px;}
    #menu a{font-size:16px;}
    header .menu li{margin:0 6px;display: inline-block;}
    header .menu{margin-right: -6px;}
    .contact-outer{left:50%;}
    .contact-box{width:100%;min-width:280px;}
    .contact-text h2{font-size:28px;}
    .contact-text *,.project-title{font-size:16px;}
    .projects h1{font-size:24px;padding: 12px;margin: 0 -15px;}
    .projects_container{max-width:100%;flex-direction:column;}
    .project{width:100%;}
}

@media all and (max-width:360px){
    #menu a{font-size:13px;}
}