/**
 * ST Slider
 * 
 * 
 * @package WordPress
 * @subpackage st-slider
 * @author Sumit Tiwari
 */

@charset "utf-8";

.st-slider {
	margin: 0;
	padding: 0;
}

.st-slider li { 
	min-height: 350px;
	display: none;
	position: relative;
}
.st-slider li:nth-of-type(1) { display: block; }

.st-slider li .img-box { 
	width: 100%; 
	max-height: 450px;
	overflow: hidden;
}

.st-slider li .img-box img { width: 100%; }

.st-content {
	padding: 20px 10px;
}

.st-slider .slider-content {
	width: 70%;
	padding: 28px 28px 10px;
	position: absolute;
	top: 8%;
	left: 15%;
	background: rgba(37, 33, 33, 0.35);
}

.st-slider .slider-content .st-head {
	margin-bottom: 0;
	font: 700 30px/36px Arial;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}

.st-slider { position: relative; }

.st-slider .slider-content p {
	font: 500 16px/24px Arial;
	color: #fff;
}

.open {
	animation: slide 1s linear;
	-webkit-animation: slide 1s linear;
	-moz-animation: slide 1s linear;
}

@keyframes slide {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

@-webkit-keyframes slide {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

@-moz-keyframes slide {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

/*==========================================
Next and previous button
=============================================*/
.button {
	width: 90%;
    position: absolute;
    top: calc( 50% - 30px);
    left: 2%;
}

.next { 
	float: right;
	position: relative; 
	opacity: 0.5;
}

.next:after {
	content: ' ';
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/next.png);
	background-size: 100%;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  cursor: pointer;
}

.previuos { 
	float: left;
	position: relative; 
	opacity: 0.5;
}

.previuos:after {
	content: ' ';
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/back.png);
	background-size: 100%;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  cursor: pointer;
}

.button:after {
	content: ' ';
	display: table;
}

.button:before {
	content: ' ';
	display: table;
}

/*============================================================
responsive styling
==============================================================*/
@media screen and (max-width: 768px) {
  .next:after,
  .previuos:after {
  	width: 40px;
	height: 40px;
  }	

  .st-slider .slider-content p { margin: 0; }

  .st-slider .slider-content { padding: 18px 10px 0px; }

 .st-slider .slider-content { 
 	width: 90%;
 	left: 5%;
 }
}

@media screen and (max-width: 480px) {

 .st-slider .slider-content {
 	width: 100%;
 	margin-top: -12px;
 	position: static;
 }

  .next:after,
  .previuos:after { display: none; }

  .st-slider .slider-content .st-head { 
  	font-size: 6vw;
  	line-height: 7.5vw; 
  }	

  .st-slider .slider-content p {
  	font-size: 4.5vw;
  	line-height: 6vw; 
  }

  .st-content { padding: 10px; }

  .st-slider .slider-content {
  	padding: 18px 10px 0px;
  }

}