.hp-slider{
	margin:10px;
	width: calc(100% - 20px);
    height: 55vw;
}

.hp-slider .slider{
	height: 100%;
}

@media screen and (min-width: 576px) {

	.hp-slider .slick-list{
		width:90%;
		margin-left: auto;
		margin-right: auto;
	}

	.hp-slider{
		width:500px;
		margin-left:auto;
		margin-right:auto;
		height:286px;
	}

}

@media screen and (min-width: 768px) {

	.hp-slider{
		width:700px;
		height:396px;
	}

	.hp-slider .header-slider-arrow{
		font-size: 2rem;
        height: 70px;
        top: calc(50% - 35px);
		width:45px;
	}

	.hp-slider .header-slider-next {
    	right: 12px;
	}

	.hp-slider .header-slider-prev {
    	left: 12px;
	}

}

@media screen and (min-width: 992px) {

	.hp-slider .front-control{
		position: absolute;
	}

}