/* CSS */
/* PAGE: hyperstud.io */
/* AUTHOR: hyperstud.io */





html, body{
	margin:0;
	padding:0;
    font-family: "neuzeit-grotesk", Arial, Helvetica, sans-serif;
	color:#111;
	font-size:15px;
	width:100%;
	height:100%;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-touch-callout: none;
    font-weight:400;
    background:#fff;
}



a, a:focus, a:visited, img{
    outline:none;
    border:none;
}

a{
	position: relative;
	display:inline-block;
}

a, a:visited{
	text-decoration: none;
	color:#111;
}


a, h1, h2, h3, h4, h5, p, span{

}




.italic, em{
	font-style:italic;
}

strong{
	
}



input{
    outline:0;
    border-radius:0;
    -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    outline-width: 0;

}

.zfs{
    font-size:0px;
}

.left, .right, .half, .fourth{
    display:inline-block;
    vertical-align: top;
    width:50%;
    height:auto;
}

.third{
    display:inline-block;
    vertical-align: top;
    width:33.33%;
    height:auto;
}

.fourth{
    width:25%;
}


/* Table */

.table{
	display:table;
	width:100%;
	height:100%;
}

.table-row{
	display:table-row;
}

.table-cell{
	display:table-cell;
	width:100%;
	height:100%;	
	vertical-align: middle;
	text-align:center;
}

header,
main,
footer,
div{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}










/* Template */

#wrapper{
    position: relative;
    display:block;
    width:auto;
    height:100%;
    margin:0 auto;
}

.wrapper{
    position: relative;
    display: block;
    /*max-width:2880px;*/
    margin: 0 auto;
    padding: 0 1vw;
}

main{
    position: relative;
    display:block;
    padding:6vw 0 0 0;
}




header{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 4vw;
    padding:1vw 0 0 0;
    background: #fff;

    transform: translateY(0px);
    -webkit-transform: translateY(0px);

    transition: transform 400ms ease-in-out;
    -webkit-transition: transform 400ms ease-in-out;
}
/*
header.scroll{
 
}

header.out{
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}*/


.border-top{
    border-top:1px solid #e5e5e5;
}

.border-bottom{
    border-bottom:1px solid #e5e5e5;
    
}

.pb-top{
    padding-top:1vw;
}

.pb-bottom{
   padding-bottom:1vw; 
}


#filter{
    margin-bottom:5px;
}


#projects{
    margin-left:-1vw;
}

#projects .project{
    display:inline-block;
    vertical-align: top;
    width:33.33%;
    height:auto;
    padding-left:1vw;
    margin-bottom:3vw;  
}

#projects .project .inner{
    position: relative;
    border-radius:0.7vw;
    overflow:hidden;
    margin-bottom:0.5vw;
    padding-top:70%;
}

#projects .project .img{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow: hidden;
    /*background:#ccc;*/
}



#projects .project .img .background{
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:auto;
    object-fit: cover; 

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);    

    -webkit-transition: all 400ms ease;    
    -moz-transition: all 400ms ease;    
    transition: all 400ms ease;     
}

#projects .project a.img .logo{
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    margin:auto;
    width:calc(100% - 1vw);
    height:calc(100% - 1vw);
    max-width:44%;
    object-fit:contain;

    -webkit-transition: all 400ms ease;    
    -moz-transition: all 400ms ease;    
    transition: all 400ms ease;     
}



#projects .project .info{
  
}

#projects .project .label, #projects .project .txt{
    display:inline-block;
    vertical-align: top;
}

#projects .project .label{
    width:25%;

}

#projects .project .txt{
    width:75%;
}

#projects .project .info a,
#projects .project .info a:visited{
    color:#111;
}


#projects .project .description{
    /*height:15px;
    overflow: hidden;*/

    height:auto;
    max-height:5000px;
  
    -webkit-transition: height 400ms ease;    
    -moz-transition: height 400ms ease;    
    transition: height 400ms ease;  
}






.btn-more{
    display:block;
    width:auto;
    text-align: center;
    padding-bottom:20px;
    cursor: pointer;
}

#projects .project .description{
    cursor: pointer;
}

#projects .project .description .excerpt{
    position:relative;
}

#projects .project .description:not(.toggle) .fulltext,
#projects .project .description:not(.toggle) .show-less,
#projects .project .description.toggle .excerpt,
#projects .project .description.toggle .read-more{
    display: none;
}




#about, #contact{
    text-align:center;
}

#about p, #contact p, #imprint p{
    display:inline-block;
    vertical-align: top;
    width:100%;
    max-width:60vw;
}



footer{

}

footer .left{
}

footer .right{
    text-align:right;
}

footer span,
footer a,
footer a:visited{
    color:#555;
}



.tag{
    position: relative;
    display: inline-block;
    vertical-align: top;    
    top:0.05vw;
    background: #111;
    padding: 0.2vw 0.4vw 0.12vw 0.4vw;
    border-radius: 0.5vw;
    margin:0 0.2vw 0.3vw 0;
    color:#fff !important;
}

#filter .tag:before{
    content:"";
    position: relative;
    display: inline-block;
    vertical-align: top;
    width:1vw;
    height:1vw;
    background:url(../img/close-white.png);
    background-size:100% auto;
    top: 0.15vw;
    margin-right: 0.15vw;
}

/*
.tag:hover{
    background:#fff;
    color:#000 !important;
    border:0.02vw solid #000;
}*/




#imprint{
    height:100%;
    min-height:5vw;
    margin:0 1vw 0 1vw;
    text-align: center;
}

#imprint .content{
    display:inline-block;
    padding-bottom:1vw;
}

#imprint .content p{
    line-height:1.3em;
    margin-bottom: 1vw;
}

#imprint h2{
    margin-bottom:1vw;
}




/* Fonts */

.p1{
    font-size:1vw;
    color:#111; 
    letter-spacing:0.03em;   
    line-height:1.3em;
}



h1, .h1{
    font-size:1vw;
    color:#111;
    line-height:1em;
    letter-spacing: 0.03em;
}



.light{
    font-weight:200;
}

strong, .bold{
    font-weight:700;
    letter-spacing:0.04em;
}

.yellow,
.tag.yellow:before{
    color:#daaf6c !important;
}



.uppercase{
    text-transform: uppercase;
}

.capitalize{
    text-transform: capitalize;
}



/* General */

.hidden{
    display:none !important;
}

.selected{
    
}

.overflowhidden, .overflow{
    overflow: hidden !important;
}




#mobile{
    position:fixed;
    top:20px;
    right:20px;
    width:30px;
    height:30px;
    cursor:pointer;
    display: none;

}

#mobile:before{
    font-family: "default" !important;
    content: "\68";
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#fff;
    font-size:30px;
}



/* flicker-fixing */

/*
#backgrounds{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility:hidden;    

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);    

    -webkit-transform-style: preserve-3d;
}*/



.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.mobile-only{
    display:none !important;
}    


/* RESPONSIVE */



@media (max-width:1281px) { /* hi-res laptops and desktops */

    .desktop-only{
        display:none;
    }

    .btnscrolltop{
        display:block;
        text-align:center;
    }

}


@media (max-width:961px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones 681px */

    .mobile-only{
        display:block !important;
    }

}


/* > iPhone */

@media (min-width:761px){

    #projects .project a.img:hover .background,
    #projects .project.logo-only a.img:hover .logo{
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        transform: scale(1.05);    
    }

    .yellow-hover:hover,
    .tag.yellow-hover:hover:before,
    .design a:hover{
        color:#daaf6c !important;
    }
    
}

/* iPhone */

@media (max-width:761px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. 481px */

    .wrapper{
        padding:0 10px;
    }

    main{
        padding-top:50px;
    }

    header{
        padding-top:10px;
        height:50px;
    }

    header #search{
        display:none;
    }



    #projects{
        margin-left:0px;
    }

    #projects .project{
        display:block;
        width:auto;
        padding-left:0px;
        margin-bottom:40px;
    }

    #projects .project .inner{
        border-radius:10px;
        margin-bottom:10px;
    }


    /*
    .more:after{
        margin-left:7px;
        width:15px;
        height:15px;
        top:2px;
    }

    .close:after{
        margin-left:7px;    
        width:15px;
        height:15px;
        top:2px;
    }*/



    footer .left{
        width:25%;
    }

    footer .right{
        width:75%;
    }

    .tag:before{
        font-size:15px;
        top:-1px;
        margin-right:4px;
    }



    #imprint{
        min-height:5vw;
        margin:0 1vw 0 1vw;
    }

    #imprint h2{
        margin-bottom:20px;
    }

    #imprint .content{
        display:block;
        padding-bottom:20px;
    }

    #imprint .content p{
        margin-bottom: 20px;
    }


    #about p, #contact p, #imprint p{
        max-width:100%;
    }


    .pb-top{
        padding-top:20px;
    }

    .pb-bottom{
        padding-bottom:20px;
    }


    .tag {
      top: 0px;
      padding: 5px 7px 4px 7px;
      border-radius: 8px;
      margin:0 3px 5px 0;
    }

    #filter .tag:before{
        width: 15px;
        height: 15px;
        top: 2px;
        margin-right: 3px;
    }




    .p1{
        font-size: 15px;
    }

    h1, .h1{
        font-size: 15px;
    }

}