@import "vars/_theme_variables";
@import "bootstrap/mixins";
@import "template/fonts";

@mixin size($width, $height) {
  	width: $width;
  	height: $height;
}

@mixin rotate($degrees) {
  	-webkit-transform: rotate($degrees);
		-ms-transform: rotate($degrees); // IE9 only
		 -o-transform: rotate($degrees);
			 transform: rotate($degrees);
}

.gavias_sliderlayer{
	background: #fff;
}

.tp-parallax-wrap{
  	@include clearfix();
  	visibility: visible!important;
  	transform-style: unset!important;
}

.slotholder{
  	filter: unset!important;
}

.layer-style-image{
  	display: inline-block; 
  	text-align: center;
  	img{
	 	max-width: 100%!important;
	 	height: auto!important;
  	} 
}
.gavias_sliderlayer, #gavias_slider_single{
  	.tp-bullets{
	 	opacity: 1!important;
	 	visibility: visible!important; 
	 	margin-left: -40px;   
	 	.tp-bullet{
			@include size(20px, 5px); 
			background: rgba(255, 255, 255, 0.4);
			&.selected{
		  		background: $white;
			}
	 	}
  	}
  	.tparrows{
	 	@include size(36px, 36px);
	 	background: $white!important;
	 	line-height: 36px;
	 	color: $black;
	 	font-size: 18px;
	 	@include box-shadow(0px 2px 3px 0px rgba(0, 0, 0, 0.05));
	 	@include media-breakpoint-down(sm){
			@include size(35px, 35px);
			line-height: 35px;
	 	}
	 	&:hover, &:focus{
			background: $theme-color;
			color: $white;
	 	}
	 	&:before{
			color: $black!important;
			line-height: 36px!important;
	 	}
  	}
  
  	.tp-caption{
		z-index: 99;
		line-height: 28px;
		color: $black;
	 	img{
			max-width: 100%!important;
			height: auto!important;   
	 	}
  	}

  	.slide-style-1{
	 	font-family: $headings-font-family;
	 	font-weight: 700;
	 	letter-spacing: -0.5px;
  	}  

  	.slide-style-2{ 
	 	font-family: $headings-font-family;
	 	font-weight: 400;
 	}
  	.slide-style-3{
	 	font-weight: 500; 
	 	letter-spacing: 3px;
	 	font-family: $headings-font-family;
	 	border-bottom: 2px solid $theme-color;
  	}

  .sub-title{
	 	text-transform: uppercase;
	 	font-size: 18px;
	 	line-height: 1.2;
	 	font-weight: 700;
	 	position: relative;
	 	padding-left: 20px;
	 	margin-bottom: 10px;
	 	color: $white;
	 	&:after{
			content: "";
			@include size(5px, 100%);
			background: $theme-color;
			position: absolute;
			top: -2px;
			left: 0;
			z-index: 99;
	 	}
  	}
	
  	.text-large{
	 	color: $black;
	 	font-size: 36px;
	 	line-height: 48px;
	 	letter-spacing: 1px;
	 	font-weight: 700;
	 	text-transform: none;
  	}

  	.text-big{
	 	color: $black;
	 	font-size: 48px;
	 	line-height: 60px;
	 	letter-spacing: 1px;
	 	font-weight: 700;
	 	text-transform: uppercase;
  	} 

  	.text-medium{
	 	color: rgba(0, 0, 0, 0.6); 
	 	font-size: 20px;
	 	line-height: 22px;
	 	letter-spacing: 2px;
	 	font-weight: 700;
	 	text-transform: uppercase;
  	}

  	.small-text{
	 	color: rgba(255, 255, 255, 0.8); 
	 	font-size: 16px;
	 	color: $white;
	 	line-height: 18px;
  	}

  	.text-black{
	 	color: $black!important;
  	}

  	.text-theme{
	 	color: $theme-color!important;
  	}
  	.text-theme-second{
	 	color: $theme-color-second!important; 
  	}
  	.text-white{
	 	color: $white!important;
  	}

  	.text-center{ 
	 	text-align: center;
  	}

  	.text-left{
	 	text-align: left;
  	}

  .inner.btn-slide, .btn-slide a{
	 font-size: 18px;
	 background: $theme-color;
	 color: $white;
	 font-weight: 700;
	 padding: 24px 45px 24px 45px;
	 line-height: 20px;
	 position: relative;
	 z-index: 9;
	 display: inline-block; 
	 @include transition(all 0.35s);
	 border: none;
	 font-family: $headings-font-family;
	 text-transform: none;
	 @include media-breakpoint-down(lg){
		padding: 20px 25px;
	 }
	 @include media-breakpoint-down(md){
		padding: 18px 20px;
	 }
	 span{
		position: relative;
		z-index: 9;
		padding-left: 25px;
		display: inline-block;
		&:after{ 
		  content: '';
		  @include size(15px, 2px);
		  background: $white;
		  position: absolute;
		  top: 50%;
		  margin-top: -1px;
		  left: 0;
		  z-index: 1;
		  transition: all 0.35s;
		}
	 }
	 &:hover{
		cursor: pointer;
		box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
		color: $white;
		opacity: 0.9;
		span{
		  &:after{
			 @include rotate(90deg);
		  }
		}
	 }
  }

  .btn-slide-white.inner, .btn-slide-white a{
	 background: $white;
	 color: $theme-color;
	 overflow: hidden;
	 @include transition(all 0.3s);
	 font-size: 18px;
	 font-weight: 700;
	 padding: 10px 28px;
	 position: relative;
	 display: inline-block;
	 line-height: 38px;
	 z-index: 1;
	 letter-spacing: 0.5px;
	 text-transform: uppercase;
	 font-family: $headings-font-family;
	 border: none;
	 @include media-breakpoint-down(lg){
		padding: 20px 25px;
	 }
	 @include media-breakpoint-down(md){
		padding: 18px 20px;
	 }
	 &:hover, &:focus, &:active, &.active{
		color: $theme-color;
		opacity: 0.9;
	 }
  }

  .gavias-overlay{
	 &:after{
		content: "";
		background: url(#{$base-theme-image-path}/grid-slide.png) repeat rgba(0, 0, 0, 0.3);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	 }
  }
}

.rs-background-video-layer{
  position: relative;
	 &:after{
		content: "";
		background: url(#{$base-theme-image-path}/grid-slide.png) repeat rgba(0, 0, 0, 0.39);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	 }
}