/**
@Author: Edinson Tique
@Name: QCSlider Pluggin
@Version: 1.4.3
@Year: 2018
@Contact: www.fb.com/QueCodigoPG
@Libraries: jQuery
**/
:root{
	--opacity-slide: 0.5;
	--height-slider: 500px;
	--color-slider: #005673;
	--height-responsive: 200px;
}

body{
	margin: 0;
	padding: 0;
}

section.slide{
	position: relative;
	float: left;
	display: block;
	width: 100%;
	height: var(--height-slider);

	@media only screen and (max-width: 766px){
		height: var(--height-responsive);
	}
	
	& .slider-container{
		width: 100%;
		height: 100%;
		float: left;
		display: block;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		background-color: #FFFFFF;
	
		& .slider-wrapper{
			margin: 0;
			padding: 0;
			width: 100%;
			z-index: 90;
			height: 100%;
			position: relative;

			& li{
				display: none;
			
				&.slide-current {
					display: block;
				}

				&.video{
					height: 100%;
					position: relative;
					background: #000000;

					 .include{
					 	top: 0;
					 	left: 0;
						width: 100%;
						height: 100%;
					 	margin: 0 auto;
						position: absolute;

						&::before{
							top: 0;
							left: 0;
							z-index: 4;
							content: "";
							width: 100%;
							height: 100%;
							position: absolute;
						}

						& iframe,
						& object,
						& embed,
						& video {
							top: 0;
							left: 0;
							z-index: 2;
							width: 100%;
							height: 100%;
							position: absolute;

						}
					}
				}

				& img{
					position: absolute;
					top: 0;
					left: 0;
					margin: 0 auto;
					width: 100%;
					height: 100%;
				}

				& .capa{
					top: 0;
					left: 0;
					width: 100%;
					z-index: 92;
					height: 100%;
					display: block;
					position: absolute;
					background: rgba(0,0,0, 0.1);
				}
			}
		}

		& .drt-control {
			top: 40%;
			z-index: 90;
			color: white;
			padding: 30px;
			cursor: pointer;
			font-size: 22px;
			position: absolute;
			-webkit-transition: all 0.5s;
			-o-transition: all 0.5s;
			transition: all 0.5s;
			background: rgba(0, 0, 0, var(--opacity-slide));
			
			@media only screen and (max-width: 766px) {
				padding: 20px;
				font-size: 20px;
			}
			
			&:hover {
				background: black;
			}
			
			&.control-left {
				left: -20px;
				border-radius: 0px 50px 50px 0px;
			}
			
			&.control-right {
				right: -20px;
				border-radius: 50px 0 0 50px;
			}
		}

		& .slider-controls {
			z-index: 90;
			width: 100%;
			bottom: 0px;
			padding: 5px;
			text-align: center;
			margin-bottom: 0px;
			position: absolute;
			padding-bottom: 15px;
			background: rgba(0,0,0,0.3);
			box-shadow: 3px 3px 3px 3px rgba(0,0,0, 0.2);

			@media only screen and (max-width: 766px){
				background: rgba(0,0,0,1);
			}
		
			& li{
				zoom: 1;
				width: 25px;
				height: 8px;
				margin: 0 6px;
				cursor: pointer;
				*display: inline;
				background: #DA4453;
				text-indent: -9999px;
				display: inline-block;
				background: rgba(59, 59, 59, 0.5);
				box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
				-o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
				-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
				-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);

				@media only screen and (max-width: 766px){
					width: calc(calc(100% / 4) - 40px);
				}
			
				&.active {
					background: var(--color-slider);	
				}
			}
		}

		& .tempo-bar {
			position: absolute;
			bottom: 0px;
			height: 5px;
			background: var(--color-slider);
			width: 0%;
			z-index: 91;
			display: block;
			float: left;
		}
	}
}