#dark{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.75);
    z-index: 50;
    
    transform-origin: center;
    -webkit-transform: scaleX(0); 
    -ms-transform: scaleX(0); 
    transform: scaleX(0);
    
    
    -webkit-transition: all .25s ease .1s;
	-moz-transition: all .25s ease .1s;
	-ms-transition: all .25s ease .1s;
	-o-transition: all .25s ease .1s;
	transition: all .25s ease .1s;
}

#thea{
    background-color: black;
    width: 60vw;
    height: 65vh;
    margin: 17.5vh 20vw;

    display: block;
    
    position: fixed;
    
    z-index: 60;
    
    
    -webkit-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0);
    
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    
    -webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;

}

#left, #right{
    cursor: pointer;
    
    height: 100%;
    width: 5%;
    
    float: left; 
    
    background-color: rgba(0,0,0,0);
    
     -webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

#right{
    float: right;
}

#left:hover, #right:hover{
    background-color: rgba(255,255,255,.25);
}

#left:hover .imgs, #right:hover .imgs{
    -webkit-transform: scale(.75); 
    -ms-transform: scale(.75); 
    transform: scale(.75);
}

.imgs{
    height: 100%;
    width: 60%;
    display: block;
    margin: 0 20%;
    

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    -webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

#loading{
    float: left;
    height: 100%;
    
    width: 15%;
    margin: 0 37.5%;
    
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*media options*/
@media only screen and (min-width: 1000px) and (max-width: 1500px) {
    
#thea{
    width: 90vw;
    height: 70vh;
    margin: 15vh 5vw;

}

#left, #right{
    width: 10%;
}


.imgs{
    width: 50%;
    margin: 0 25%;
}

#loading{
    width: 20%;
    margin: 0 30%;
}

}

@media only screen and (min-width: 150px) and (max-width: 1000px) {
    #thea{
    width: 100vw;
    height: 70vh;
    margin: 15vh 0;

}

#left, #right{
    width: 20%;
}


.imgs{
    width: 50%;
    margin: 0 25%;
}

#loading{
    width: 20%;
    margin: 0 15%;
}
}