.sliderbox{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	display: none;
        z-index:80;
}  

.slidercontainer{
	position: absolute;
	margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    max-width: 1100px;
    height: 70%;
    background-color: green;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 3px 1px rgb(50, 50, 50);
}

.closeslider{
	position: absolute;
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: rgb(0,255,255);
	top: 0;
    right: 0; 
	cursor: pointer;
	z-index: 150;
}

.previous{
	width: 55px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.3);
	text-align: center;
	z-index: 10;
	cursor: pointer;
	font-size: 50px;
}

.previous:hover{
	background-color: rgba(255, 255, 255, 0.5);
}

.next{
	width: 55px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.3);
	text-align: center;
	z-index: 10;
	cursor: pointer;
	font-size: 50px;
}

.arrow{
	position: absolute;
	top: calc(50% - 25px);
	left: 15px;
        color: rgb(230, 230, 230);
}


.next:hover{
	background-color: rgba(255, 255, 255, 0.5);
}

.slidercontainer img{
 display: none;
}


@media(min-width: 600px) and (max-width: 750px){
	.slidercontainer {
		height: 60%; 
	}
}

@media(min-width: 450px) and (max-width: 599px){
	.slidercontainer {
		height: 50%; 
	}
}

@media(max-width: 449px){
	.slidercontainer {
		height: 40%; 
	}
}

@media screen and (max-width: 685px) {
  .slidercontainer {
        width: 100%;
    }
 
}