.show {
  opacity: 1;
  transition: opacity 1000ms;
}

.hide {
  opacity: 0;
  transition: opacity 1000ms;
}
#modalBackdrop{
	display: none;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	/* margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
	height: 600px; */
	background-color: rgba(255, 255, 255, 0.500);
}
#modalHolder{
	display: none;
	pointer-events: none;
	position: fixed;
	width:100%;
	top:0;
	height:100%;
	top:50%; 
	left: 50%;
	transform: translate(-50%, -50%);
	/* background-color: aqua; */
}
#modal {
	display: none;
	pointer-events: initial;
	position: fixed;
	width: 100%;
	height:100%;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
/* Modal Content (image) */
.modal-content {
  position: relative;
  display: block;
  width:100%;
  height:100%;
  /*left: 50%;
  top:50%;
  transform: translate(-50%, -50%); */
  border:1px solid rgba(0,0,0,1);
  z-index: 2;
}

.icon *{
	width: 100%;
	height: 100%;
}


/*menu desktop + hi res tablets*/
@media screen and (min-aspect-ratio: 10/16) {
	
	.prev-icon{
    	left:-2vmax;
    	top: 50%;
    	transform: translate(0, -50%);
    	/* background-color: green; */
    }
    .next-icon{
    	right:-2vmax;
    	top: 50%;
    	transform: translate(0, -50%);
    	/* background-color: green; */
    }
    .close-icon{
    	left:-2vmax;
    	top: 0%;
    	/* background-color: green; */
    }
    .icon{
    	position: absolute;
    	pointer-events: initial;
    	width: 2vmax;
    	height: 2vmax;
    }
	
	@media screen and (min-aspect-ratio: 16/10){ /* landscape */
	
	    @media screen and (max-width: 980px){/* phones only */
	        .prev-icon{
            	left:-5vmax;
            	top: 50%;
            	transform: translate(0, -50%);
            	/* background-color: green; */
            }
            .next-icon{
            	right:-5vmax;
            	top: 50%;
            	transform: translate(0, -50%);
            	/* background-color: green; */
            }
            .close-icon{
            	left:-5vmax;
            	top: 0%;
            	/* background-color: green; */
            }
            .icon{
            	position: absolute;
            	pointer-events: initial;
            	width: 5vmax;
            	height: 5vmax;
            }
	    }
	    @media screen and (min-width: 981px){
	        
	    }
	  
	}
	@media screen and (max-aspect-ratio: 16/10){ /* other devices */
	
	    
	}
	
}

/*phones & tablets portrait*/
@media only screen and (max-aspect-ratio: 10/16){ 
	.prev-icon{
    	bottom: -6vmax;
    	/* background-color: green; */
    }
    .next-icon{
        right:0;
    	bottom: -6vmax;
    	/* background-color: green; */
    }
    .close-icon{
    	top:-6vmax;
    	/* background-color: green; */
    }
    .icon{
    	position: absolute;
    	pointer-events: initial;
    	width: 5vmax;
    	height: 5vmax;
    }
}