html, body {
    overflow-x: hidden;
}

#resize_container {
    position: absolute;
    
    width: 100%;
/*    min-height: 100vh;*/
    
    top: 65px;
    right: 0;
}

/*
.content {
    min-height: calc(100vh - 65px);
}
*/



#resize_container .content img {
    width: 100%;
    height: auto;
}
#resize_container .content img.small,
#resize_container .content span.small,
#resize_container .content video.small {
    width: 940px;
    height: auto;
    margin-left: calc((100% - 940px) / 2);
}

#resize_container .content video {
    width: 100%;
    height: auto;
    outline :none;
}
video::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, transparent) !important;
}


#resize_container .content img.small_max {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
#resize_container .content img.poster,
#resize_container .content video.poster {
    display: block;
    max-height: calc(100vh - 100px);
    max-width: calc(100% - 40px);
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

#resize_container .content * {
    margin-bottom: 80px;
}
#resize_container .content p {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}


#resize_container .content *:last-child {
    margin-bottom: 0px !important;
}



body.work .rightSecundary,
body.work .rightPremiere{
    position: fixed;
    z-index: 1;
}


body #clr_container.work #clr_work_background {
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    background-position: top left;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
}








body #close-project {
    display: none;
}
body.work #close-project {
    display: block;
}
body.work #close-work {
    display: none;
}








.content.w2 {
    background-color: rgba(20,20,20,1);
}
.content.w6 {
    background-color: black;
}
.content.w7 {
    background-color: black;
}
.content.w8 {
    background-color: rgba(130,135,145,1);
}
.content.w9 {
    background-color: black;
}
.content.w10 {
    background-color: black;
}
.content.w11 {
    background-image: url(img/work_110/haftbefehl_110_gradient.jpg);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center;
}
.content.schwabacher {
    background-color: rgba(31,31,31,1);
}

.content.domino {
    background-color: black;
}
.content.w14 {
    background-color: #eee;
}
.content.w16 {
    background-color: #000000;
}
.content.w17 {
    background-color: #e8e8e8;
}
.content.gintogx {
    background-color: rgba(231,231,231,1);
}
.content.puzzles {
    background-color: rgba(0,0,0,1);
}
.content.w2017 {
    background-color: rgba(220,220,220,1);
}
.content.atd {
    background-color: #000000;
}
.content.aitype {
    background-color: white;
}
.content.ws {
    background-color: white;
}
.content.ap {
    background-color: #000000;
}
.content.nyt {
    background-color: rgba(231,231,231,1);
}
.content.animart {
    background-color: rgba(231,231,231,1);
}

.content.dark p,
.content.dark a {
    color: white!important;
}
.content.bright p,
.content.bright a {
    color: black!important;
}



.content.w6 img {
    width: calc(100% - 30px) !important;
    height: auto;
    margin-left: 15px;
}
.content.w6 img:first-child{
    margin-top: 15px;
}


.content.w16 * {
     margin-bottom: 0 !important; 
}
.content.w16 img {
    display: block;
}




.grid6 {
    width: 100%;
}
.grid6 img,
.grid6 video {
    width: calc(33.3333% - 2px) !important;
    margin: 0px !important;
    margin-top: 3px !important;
    margin-right: 3px !important;
    padding: 0 !important;
    display: inline;
    float: left;
}
.grid6 img:nth-child(3n),
.grid6 video:nth-child(3n) {
    margin-right: 0px !important;
}
.grid6::after {
    clear: both;
    content: "";
    display: block;
    margin-bottom: 80px;
}



.grid2 {
/*    width: 100%;*/
    width: 940px;
    height: auto;
    margin: 0;
    margin-left: calc((100% - 940px) / 2);
    display: block;
}
.grid2 img,
.grid2 video {
    width: calc(50% - 2px) !important;
    margin: 0px !important;
    margin-top: 3px !important;
    margin-right: 3px !important;
    padding: 0 !important;
    display: inline;
    float: left;
}
.grid2 img:nth-child(2),
.grid2 video:nth-child(2),
.grid2 img:nth-child(4),
.grid2 video:nth-child(4) {
    margin-right: 0px !important;
}
.grid2::after {
    clear: both;
    content: "";
    display: block;
    margin-bottom: 0px;
}











.website {
    color: blue;
    text-decoration: underline;
}


.project_footer {
    display: block;
    position: relative;
    height: 200px;
    width: 100%;
    background-color: white;
}










@media screen and (max-width: 1100px){
    #resize_container {
        top: 55px;
    }
    #resize_container .content p {
        padding-left: 15px;
        padding-right: 15px;
    }
}


@media screen and (max-width: 980px){
    #resize_container .content img.small,
    #resize_container .content span.small,
    #resize_container .content video.small {
        width: calc(100% - 40px);
        height: auto;
        margin-left: 20px;
    }
    
    .grid2 {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    
    #resize_container .content * {
        margin-bottom: 40px;
    }

    .grid6 img {
        width: calc(50% - 2px) !important;
    }
    .grid6 img:nth-child(n) {
        margin-right: 3px !important;
    }
    .grid6 img:nth-child(2n) {
        margin-right: 0px !important;
    }
    
}