#imagepage h2:first-of-type {
    margin:1em 0 1em 0;
}

#imagepage {
    padding-bottom:4em;
    overflow:hidden;
}


#imageboxes a:nth-of-type(3n+1) {
    display:block;
    width:33.3%;
    height:220px;
    background-size:cover;
    background-position:center center;
}

#imageboxes {
    overflow:hidden;
}

#imageboxes a {
    display:block;
    background-position:center center;
    width:16.6%;
    height:220px;
    background-size:cover;
    float:left;
}


#imagepopoverblack {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.8);
    z-index:2000;
    display:none;
}

#imagepopover {
    position:fixed;
     max-width:900px;
     width:95%;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
    z-index:2002;
    display:none;
}

.imagepop #imagepopover,
.imagepop #imagepopoverblack{
    display:block;
}

#imagepopoverimage {
    text-align:center;
     max-width:900px;
     width:100%;
}

#imagepopoverimage img{
   
    max-width:100%;
    max-height:50%;
}


.imagepop {
    height:100%;
    overflow:hidden;
}

#imagepopoverhead a,
#imagepopoverheadmob a{
    display:block;
    float:right;
    background:url(../images/close.svg) center center no-repeat;
    background-size:20px auto;
    width:20px;
    height:20px;
    text-indent:-10000px;
}

#imagepopoverheadmob a{
     background-size:15px auto;
    width:15px;
    height:15px;
}

#imagepopoverhead {
    overflow:hidden;
    padding-bottom:20px;
}

#imagepopovertitle {
    font-size:18px;
    padding:1em 0;
    text-align:center;
    width:95%;
    margin:auto;
}

#imagepopovernav,#imagepopovernavmob {
    text-align:center;
}



#popback {
    background:url(../images/back.svg) center center no-repeat;
    width:20px;
    height:32px;
    display:inline-block;
    background-size:20px auto;
    font-size:0;
    margin:0 30px;
}

#popnext {
    margin:0 30px;
    font-size:0;
    background:url(../images/next.svg) center center no-repeat;
    width:20px;
    height:32px;
    display:inline-block;
    background-size:20px auto;
}

#imagepopoverheadmob {
    position:fixed;
    top:10px;
    left:0;
    right:10px;
    z-index:3000;
    display:none;
}

#imagepopovernavmob  {
     position:fixed;
    bottom:10px;
    left:0;
    right:0px;
    z-index:3000;
    display:none;
}

@media screen and (max-width: 1000px) {
    #imageboxes a:nth-of-type(3n+1) {
        width:50%;
        height:200px;

    }
    
    
    #imageboxes a {

        width:25%;
        height:200px;
 
    }
}


@media screen and (max-width: 600px) {
    #imageboxes a:nth-of-type(3n+1) {
        width:100%;
        height:180px;

    }
    
    
    #imageboxes a {

        width:50%;
        height:180px;
 
    }
}



@media screen and (max-height: 800px) {
    #imagepopoverhead,#imagepopovernav {
       display:none;
    }
    
    .imagepop #imagepopoverheadmob,.imagepop #imagepopovernavmob {
        display:block;
    }
    
    #popback, #popnext {
        width:15px;
        height:25px;
        background-size:15px auto;
        margin:0 30px;
    }
    
    #imagepopovertitle {
        text-align:left;
        font-size:15px;
    }

    
}


@media screen and (max-width: 400px) {
    #imagepage {
        padding-bottom:3em;
    }
}