/**
 *  SASS FILE FOR PUBLIC CSS
 */
/* MIXINS */
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
 
  // Output standard non-prefixed declaration
  #{$property}: $value;
}

/* TRANSITIONS */
$transition-15: all .15s ease-in-out;
$transition-1: all .1s ease-in-out;

.italic {
	font-style: italic;
}

/* SLIDER ELEMENTS */
div#wonka-slider-main {
	position: relative;
	width: 100%;
	min-height: 160px;
	max-height: 600px;
	overflow: hidden;
	@include prefix( transition, $transition-15, webkit moz o );
	.content-box {
		position: relative;
		height: 100%;
	}
	/* SLIDER INDICATORS LIST */
	div.wonka-slide-indicators-wrap {
		position: absolute;
		text-align: center;
		display: block;
		height: 35px;
		width: 100%;
		bottom: 5px;
		z-index: 500;
		ul.wonka-slide-indicators-list {
			position: relative;
			list-style: none;
			padding: 0;
			margin: 0;
			height: 100%;
			li.wonka-slide-indicators-item {
				position: relative;
				display: inline-block;
				width: 35px;
				height: 100%;
				text-align: center;
				vertical-align: middle;
				@include prefix( transition, $transition-1, webkit moz o );
				div.background-img{
					position: relative;
					top: 50%;
					width: 15px;
					height: 15px;
					margin: auto;
					border-radius: 50%;
					border: 2px solid #fff;
					@include prefix( transform, translateY(-50%), webkit moz o );
					@include prefix( transition, $transition-1, webkit moz o );
				}
				&:hover {
					div.background-img {
						width: 35px;
						height: 35px;
					}
				}
				&.active-indicator {
					div.background-img {
						width: 35px;
						height: 35px;
						border: 2px solid #1dcffc;
					}
				}
			}
		}
	}
	/* START SLIDE LIST */
	div.list-wrap {
		position: relative;
		height: 100%;
		ul.wonka-slide-list {
	    position: relative;
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    height: 100%;
			@include prefix( transition, $transition-1, webkit moz o );
	    li {
		    &.wonka-slider-item {
		    	position: relative;
		    	display: none;
		    	float: left;
	    		width: 100%;
	    		height: 100%;
					@include prefix( transition, $transition-1, webkit moz o );
			    &.active {
			    	display: inline-block;
			    }
			    &.left-slide-in {
			    	display: inline-block;
			    	right: 105%;
						@include prefix( transition, $transition-1, webkit moz o );
			    }
			    &.right-slide-in {
			    	display: inline-block;
			    	left: 105%;
						@include prefix( transition, $transition-1, webkit moz o );
			    }
			    &.left-slide-out {
			    	display: inline-block;
			    	right: 0;
						@include prefix( transition, $transition-1, webkit moz o );
			    }
			    &.right-slide-out {
			    	display: inline-block;
			    	left: 0;
						@include prefix( transition, $transition-1, webkit moz o );
			    }
			    div#wonka-slide-title-wrap {
						position: absolute;
						top: 15px;
						left: 50%;
						z-index: 9999;
						@include prefix( transform, translateX(-50%), webkit moz o );
						@include prefix( transition, $transition-15, webkit moz o );
						span.slide-post-title {
							position: relative;
							display: inline-block;
							font-size: 20px;
							line-height: 1.2;
							padding: 3px 15px;
							height: 100%;
							min-width: 300px;
							color: #fff;
							text-align: center;
							white-space: nowrap;
							background: rgba(0,0,0,0.7);
							border: 1px solid rgba(#fff, 0);
							@include prefix( box-sizing, border-box, webkit moz );
							@include prefix( transition, $transition-15, webkit moz o );
						}
						@media screen and ( min-width: 768px ) {
							top: 25px;
							span.slide-post-title {
								font-size: 46px;
								padding: 15px 25px;
								min-width: 600px;
								&:hover {
									border: 1px solid rgba(#fff, 1);
								}
							}
						}
			    }
			    img.wonka-slide-img {
			    	position: absolute;
		    		width: 100%;
		    		height: auto;
		    		top: 50%;
		    		@include prefix( transform, translateY(-50%), webkit moz o );
		    	}
		    	div.wonka-slide-excerpt-wrap {
	    	    position: absolute;
	    	    top: 55%;
	    	    width: 95%;
  	   			color: #fff;
	    	    font-size: 10px;
	    	    left: 8px;
	    	    z-index: 8888;
    	   		padding: 15px;
    	   		line-height: 1.2;
    	   		background: rgba(0,0,0,0.7);
    	   		@include prefix( transform, translateY(-50%), webkit moz o );
    	   		@media screen and ( min-width: 768px ) {
	    	    	top: 70%;
    	   			width: 45%;
	    	    	left: 25px;
  	   				font-size: 21px;
    	   		}
		    	}
		    }
	    }
		}
	}
	a.slide-control {
		position: absolute;
		display: inline-block;
		width: 8%;
		height: 100%;
		top: 50%;
		font-size: 38px;
		border: none;
		background: #000;
		opacity: 0.4;
		@include prefix( transition, $transition-15, webkit moz o );
		@include prefix( transform, translateY(-50%), webkit moz o );
		&.slide-control-left {
			left: 0;
			background: -webkit-linear-gradient(-90deg, rgba(#000,0) 0%, rgba(#000,0.4) 100%);
			background: -moz-linear-gradient(-90deg, rgba(#000,0) 0%, rgba(#000,0.4) 100%);
			background: linear-gradient(-90deg, rgba(#000,0) 0%, rgba(#000,0.4) 100%);
			&:after {
				content: "\276E";
				position: absolute;
				display: inline-block;
				top: 50%;
				left: 50%;
				@include prefix( transform, translate(-50%, -50%), webkit moz o );
			}
		}
		&.slide-control-right {
			right: 0;
			background: -webkit-linear-gradient(90deg, rgba(#000,0) 0%, rgba(#000,0.4) 100%);
			background: -moz-linear-gradient(90deg, rgba(#000,0) 0%, rgba(#000,0.4) 100%);
			background: linear-gradient(90deg, rgba(#000,0) 0%, rgba(#000,0.4) 100%);
			&:after {
				content: "\276F";
				position: absolute;
				display: inline-block;
				top: 50%;
				left: 50%;
				@include prefix( transform, translate(-50%, -50%), webkit moz o );
			}
		}
		&:after {
			color: #fff;
			@include prefix( transition, $transition-15, webkit moz o );
		}
		&:hover {
			opacity: 1;
			&:after {
				color: #1dcffc;
			}
		}
	}
}