/*
Some Basic Settings
*/

 :root {
  --background: #5a646cff;
  --foreground: #c4a289ff;
  --contre: #870000ff;
}


@font-face {
    font-family: nexa;
    src: url('fonz/nexalight.otf');
    src: local('nexa'), url('fonz/nexalight.otf') format('opentype');
}



body{
/*    background: url("bg.png") 1% 97% no-repeat ;*/
    position: absolute;
    font-family:nexa;
    font-size:1.2em;
    color: antiquewhite;
    font-weight:normal;
    z-index:1;
    overflow-x:hidden;
    overflow-y:hidden;
    background-color: var(--background);
    top: 0em;
    left: 0em;
/*    border: 5px blue solid;*/
    
    /*background-image: url(pics/back.jpg);*/
   }
body {
       min-height: 100%;
       max-height: 100%;
       min-width: 100%;
       max-width: 100%;
       padding: 0px;
       margin: 0px;
   }


.clear{
    clear: both;
}

.visible{
    display: block;
    z-index:105;
}

.invisible{
    height:0px;
    display:none;
}
.left{
    float:left;
}
.right{
    float:left;
}
.header{
    display: block;
    width: 100%;
    height: 15vh;
}
/*#intro a:link,a:visited,a:hover,a:active{
    color:white;
    text-decoration: underline;

}
*/
.two-col-layout{
   -webkit-column-count: 2;
      -moz-column-count: 2;
           column-count: 2;

   -webkit-column-gap: 20px;
      -moz-column-gap: 20px;
           column-gap: 20px;
}
.wrapper{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    top:9vh;
    left:0vw;
    width: 100vw;
    max-width: 100vw;
    max-height: 94vh;
    min-height: 94vh;
    margin:0px;
    overflow-y:hidden;
    overflow-x:hidden;
/*    border: 2px solid red;*/
}

.wrapperland{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    top:2vh;
    left:0vw;
    width: 100vw;
    max-width: 100vw;
    min-height: 97vh;
    margin:0px;
    overflow-y:hidden;
    overflow-x:hidden;
/*    border: 2px solid red;*/
}


.leftpane{
    position: relative;
    top:0vh;
    left: 0vw;
    width: 17vw;
    min-height: 80vh;

    
/*    border: 2px solid red;*/
}

.midpane{
    position: relative;
    top:0vh;
    width: 65vw;

/*    height: 80vh;*/
    min-height: 80vh;


/*    border: 2px solid red;*/
}

.rightpane{
    position: relative;
    top:0vh;
    width: 17vw;
    min-height: 80vh;

}
@media screen and (max-width: 1024px){

    .rightpane, .leftpane{
        display: none;
    }
    .midpane{
        width: 100vw;
    }
}

/*
.rightpane, .midpane, .leftpane{
    border: 2px solid magenta;
}
*/

/*#################################
NAVI
#################################*/
nav{
    display: flex;
    justify-content: flex-end;
    flex-flow: row wrap;
    margin:auto;
    position: fixed;
    top:2vh;
    left: 17vw;
    z-index: 5;
    height: 2.4vh;
    max-height: 2.4vh;
    width: 65vw;
/*    width: 100vw;*/
    vertical-align: middle;
/*    background-color:var(--background);*/

    margin: 10px;
    text-align: right;
    
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
    float: left;
/*    display: block;*/
    
    height: auto;
/*    width: 8vw;*/
    min-width:10vw;
/*    max-width: 10vw;*/
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    padding-bottom: 0.5vw;
    padding-right: 0.5vw;
    padding-left: 0.5vw;
    border-right:2px solid var(--foreground);
/*    border-bottom: 2px solid var(--foreground);*/
    vertical-align: middle;
    text-align: left;
    cursor: pointer;
/*    margin: auto;*/
}

nav a{
    display: block;
    margin-top: 0.5vw;
    color: antiquewhite;
    text-decoration: none;
/*    font-weight: 300;*/
    font-weight: bolder;
    font-size: 1.2em;
}

nav li:hover{
    background-color: var(--foreground);
}


@keyframes actifnav {
  from {background-color: #4D555C00;}
  to {background-color: #4D555C88;}
}
.navactif{
/*        border-left: 2px solid var(--foreground);*/
        border-top: none;
        background-color: #4D555C88;
        animation-name: actifnav;
        animation-duration: 0.5s;
}


@media screen and (max-width: 1024px){
    .nav{
        position: absolute;
        top:2vh;
        right: 0vw;
        width: 100vw;
    }
    nav li{
/*        float: none;*/
        border-right:2px solid var(--foreground);
        border-bottom:none;
        border-left:none;
    }
    
    nav a{
        font-size: 0.9em; 
    }

    .navactif{
/*        border-left: 2px solid var(--foreground);*/
        border-top: none;
/*        background-color: #4D555C66;*/
    }


}
@media screen and (max-width: 768px){
    .nav{
        position: absolute;
        top:2vh;
        right: 0vw;
        width: 100vw;
    }    
    nav li{
        vertical-align: middle;
        min-width:16vw;
/*        min-width:20vw;*/
/*        max-width: 10vw;*/
    }

}

/*#################################
WORK
#################################*/

.grid{
    position: relative;
    top:2vh;
    display: flex;
    flex-flow: column wrap;
/*    flex-flow: row wrap;*/
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: auto;
/*    overflow-y: scroll;*/
}

.previs{
    position: relative;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    align-content: center;
    transform-origin: center center;
/*    background-color: var(--background);*/
/*    */
    
/*    var(--foreground);*/
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 15px;
    width: 65vw;
}
.previs > img{
    object-fit: cover;
/*    border: 4px solid #4D555C88; */
    border-radius: 15px;
    width: auto;
    height: auto;
    max-width: 25vw;
    max-height: 25vw;
    border: 2px solid #c4a289;
    box-shadow: 10px 10px 18px #00000066;
    /*
    min-width: 2vw;
    max-height: 25vh;
*/
/*    min-height: 22vh;*/
}
.caption{
    position: relative;
    display:inline-block;
/*    transform-origin: center center;*/
    left:0px;
/*    top:20vh;*/
    bottom: 5vh;
    width:auto;
    height:3vh;
    padding-top: 0.5vh;
    padding-left: 0.5vw;
    overflow: hidden;
    background-color: #4D555Caa;
    z-index:100;
    opacity: 0;
    font-size: 1.2em;
    font-weight: bolder;
}
/*
@media screen and (max-width: 1280px){

    .previs > img{
        object-fit: cover;
        width: auto;
        height: auto;
        max-height: 50vh;
        min-height: 50vh;
        max-width: 50vw;

}
*/
@media screen and (max-width: 1024px){
    .grid{
        min-width: 100%;
    }
    .previs{
        width: 100%;
    }
    .previs > img{
        object-fit: cover;
/*        width: auto;*/
        height: auto;
        max-height: 60vh;
        max-width: 70vw;
    }
    .caption{
        bottom: 5vh;
        width:auto;
        height:3vh;
        opacity: 1.0;
        font-size: 0.8em;   
    }
}
@media screen and (max-width: 366px){
        .previs > img{
        object-fit: cover;
/*        width: auto;*/
/*        height: auto;*/
/*        height: 1vh;*/
        width: 50vw;
    }
}
/*#################################
PROJECTS
#################################*/
.backdrop{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.0;
    width: 100vw;
    max-width: 100vw;
    min-height:130vh;
    max-height:150vh;
    overflow-x: hidden;
    background-color:#000000;
    z-index: 0;
    margin: 0px;
    
}
.motion{
    display: none;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}
.motion>video{
    min-height: 50vh;
    max-height: 60vh;
    
}

.project_{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-content: center;
    opacity: 1.0;
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    max-height:100vh;
    padding-left: 5vw;
    overflow-x: hidden;
}


.project_display{
    position: relative;
    top:50%;
    display: flex;
    flex-flow:  row wrap;
    align-content: center;
    justify-content: center;
    z-index: 13;
    opacity:0.0;
/*    width:80vw;*/
/*    min-height: 100%;*/
/*    max-height: 60vh;*/
    min-height: 80vh;
    max-height: 80vh;
    opacity: 1.0;

/*    min-height: 80vh;*/
}
.project_display>img{
   
/*    bottom:3vh;*/
    object-fit: cover;
    position: relative;
/*    border: 4px solid #4D555C88; */
    border-radius: 15px;
/*    max-width:65vw;*/
/*    min-height: 100%;*/
    max-height: 80vh;
    max-width 80vw;
    opacity: 1.0;
    box-shadow: -5px -5px 20px #44444466;

}
.project_description{
    position: absolute;
    top:20%;
    left: 0VW;
    width:20vw;
    min-height: 15vh;
    max-height: 40vh;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 2px solid var(--foreground);
    cursor: crosshair;
/*    background-color: #11111188;*/
/*    background-image: linear-gradient(#5a646c02,#4D555C55,#5a646c02);*/

/*    border: 2px dashed #111111;*/
    border-radius: 2%;   
    z-index: 30;
    
}

.project_description>h2{
    text-indent: 20px;
}

.descr_txt{
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
/*    text-overflow: ellipsis;*/
    text-indent: 40px;
    line-height: 1.3em;
    line-break: loose;
    word-break: keep-all;
    word-wrap: normal;
    white-space: pre-wrap;
}


.project_close{
    display: inline-block;
    background-image: url("../svg/close.svg");
    background-origin: padding-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    background-color: black;
    border: 1px solid white;
    border-radius: 100px;
    opacity: 1.0;
    z-index: 24;
    overflow: hidden;
    margin: 0.5%;
}
.project_close>img{
    object-fit: cover;
    width: 30px;
    height: 30px;

}



.carousel{
    position: relative;
    top:2vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content:center;
    max-height: 8vh;
    min-width: 73vw;
    max-width: 100vw;
    opacity: 0.0;
    z-index: 30;
    
}
.divimg{
    display: inline-block;
    width: 30px;
    height:30px;
    background-color:black;
    border-width: 3px ;
    border-style: solid;
    border-color: black;
    border-radius: 100%;
/*    max-width: 13vw;*/
    max-height: 13vh;
    margin: 0.5%;
/*
    background-origin: padding-box;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
*/
}
.divimg:hover{
     border-color: rgba(196,162,137,255);
}


@media screen and (max-width: 1280px){

    .project_description{
        position: relative;
        width:100vw;
        top:0%;
        min-height: 8vh;
    }
    .motion>video{
        max-width:100vw;    
    }
    
}

@media screen and (max-width: 1024px){
    .backdrop{
        min-height:200%;
    }
    .project_{
        flex-flow: column;
        padding: 0%;
        min-height: 150vh;
        max-height: 200vh;
        overflow-y: scroll;
    }
    .divimg{
        width: 15px;
        height:15px;
    }

    .project_close{
        width: 20px;
        height: 20px;

    } 
    .project_description{
        position: relative;
        width:100vw;
        min-height: 20vh;
        top:2vh;
        align-items: flex-end;
    }

    .project_display>img{
        object-fit: contain;
        max-width:98vw;
        max-height: 60vh;
/*        max-height: 60vh;*/
/*        max-height: 60vh;*/
        border-radius: 8px;

    }
    .project_display{
        width:98vw;
        min-height: 60vh;
        max-height: 60vh;

    }

     .project_close>img{
        width: 30px;
        height: 30px;

    }  
/*
    .project_description{
        position: relative;
        width:100vw;
        top:0%;
        max-height: 20vh;
    }
*/
/*
    .project_carousel{
        max-height: 60vh;
        min-height: 60vh;
        
        min-width: 100vw;
        z-index: 13;
        }
    
*/
}
/*#################################
SERVICES
#################################*/


.serviceholder{
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}

.service_icons{
    position: relative;
    top:4vh;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-content: space-between;
/*    align-items: center;*/
    z-index: 5;

}

.service_icons>img{
    display: inline-block;
    position: relative;
    margin-right: 2vw;
    min-width: 4vw;
    max-width: 4vw;
/*    box-shadow: 8px 8px 15px #00000066;*/
}
.sclick{
    min-width: 4vw;
    max-width: 4vw;
    z-index: 6;
}
.service_icons>img:hover{
    transform: scale(1.1,1.2)
}

.service{
    position: relative;
    top:5vh;
    display: flex;
    flex-flow: column;
    width: 40vw;
/*    height: 0vh;*/
    min-height: 0vh; 
    max-height:0vh; 
    font-size: 1.2em;
    margin-bottom: 5vh;
    z-index: 1;
/*    transform: scaleY(0.1);*/
    opacity: 1.0;
    overflow-y: hidden;
    cursor: crosshair;
    box-shadow: 10px 10px 18px #00000066;
    background-image: linear-gradient(#5a646cdd,#4D555Cdd,#5a646cdd);
    
/*    background-image: linear-gradient(red,black);*/
    
    
}

.service p{
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
/*    text-overflow: ellipsis;*/
    text-indent: 40px;
    line-height: auto;
    line-break: loose;
    word-break: keep-all;
    word-wrap: normal;
    white-space: pre-wrap;

}
.service>h2{
    text-indent: 20px;
}


@media screen and (max-width: 1024px){
    .serviceholder{
        flex-flow: column;
        justify-content: center;
        align-content: center;
        align-items: center;

/*        width: 100vw;*/
    } 
    .service_icons{
        justify-content: center;
        align-content: center;
        width:100vw;
    }  
    .service_icons>img{
        min-width: 20vw;
    }
    .service{
        width:100vw;
        background-image: linear-gradient(#5a646cdd,#4D555Cdd,#5a646c11);
    }

}


#tentacles{
    position: fixed;
    top: 1vh;
    left: -6vw;
    opacity: 1.0;
    margin: 0px;
    z-index: 1;
    min-width: 810px;
}


/*#################################
LANDING
#################################*/
.landing{
    position: relative;
    display: flex;
/*    top:-5vh;*/
    flex-flow: column wrap;
    align-content: center;
    justify-content:flex-start;
    min-height: 100%;
    width: 100vw;
}


#nameupper{
    top:150px;
    
}
#nameunder{
    top:200px;
}
.landing .name{
    position: relative;
    display: flex;
    flex-flow: column wrap;
    min-height: 100%;    
} 




.name .letter{
    color: white;
    font-size: 50px;
    text-align: center;
    opacity: 0.0;
    margin: 20px;
}

#tako, #tako2{
    position: static;  
    transform-origin: center center;
    opacity: 0.0;
}
/*
#tako{
    top:10px;

}
*/
#tako2{
    margin-top:25px;
}
#tako2 path{
    fill: antiquewhite;
    stroke-width:7px;
}

/*#################################
HELPERS
#################################*/



.floatclear{
  float:none;
  display:block;
}
div.left{

}

div.right{
    float:right ;
    margin-left: 10px;
}



.wraper h2 {
    font-family:helvetica,sans-serif;
    display: block;
    position: absolute;
    bottom: 1%;
    left: 1%;


}


img.wrapl, img.wrapr {
    position: relative;
    width: 250px;
    /*max-height: 30px;*/
    margin-top: 5px;
    margin-bottom: 3px;
    border-radius: 8px;

}

 img.wrapr{
    float: right;
    margin-left: 10px;
}
img.wrapl {
    float: left;
    margin-right: 10px;
}




.blur{
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}




/*
SINGLE PAGES START HERE
*/

/*MAIN DEFS*/

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: black var(--background);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--background);
}

*::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 20px;
}