/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : March 2, 2017, 12:05:33 PM
    Author     : Vdhond
	Notes	   : Css scalable Teaser slider which determins visible slides by scaling the width of 
				 .slider-wrapper in percentage followed by changes in equal percentage to selected class's 
				 please following the example provided below to overwrite no of slide visible behaviour.

				[.custom_class || #teaser_id || .carousel_teaser] .slide-wrapper {width: 25% !important;	}
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner .active.left { left: -25% !important; }
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner .next        { left:  25% !important; }
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner .prev		 { left: -25% !important; }
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner .active.right{ left: 25% !important; }
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner>.next.left,
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner>.prev.right,
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner>.active{left:0 !important;}
				[.custom_class || #teaser_id || .carousel_teaser] .carousel-inner .active.left .slide-wrapper:last-child {display: none;}

				 
				[.custom_class || #teaser_id ] 	: Denotes custom class assigned in teaser widget.
												 or ID dynamicaly generated for teaser.
				[.carousel_teaser] 				: This is standard class that is available on all teaser carousel.
*/
/*** teaser widget **/
.carousel_teaser{position: relative; clear:both;}
.carousel_teaser .carousel-control {
    top: 50%;
    transform: translateY(-50%);
}

.carousel_teaser .slide-wrapper {
    width: 20%;
    float: left;
    position: relative;
}
.carousel_teaser .item{ float: left; width:100%; }
.carousel_teaser .carousel-inner .active.left { left: -20%; }
.carousel_teaser .carousel-inner .next        { left:  20%; }
.carousel_teaser .carousel-inner .prev		 { left: -20%; }
.carousel_teaser .carousel-inner .active.right{ left: 20%; }
.carousel_teaser .carousel-inner>.next.left,
.carousel_teaser .carousel-inner>.prev.right,
.carousel_teaser .carousel-inner>.active{left:0;}
.my-modal-teaser{
	background-color: #fff;
    border: 1px solid #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    top: 10%;
    position: fixed;
    z-index: 2050;
    max-width: 560px;
    width: 100%;
    left: 50%;
    right: 0;
    margin-left: -280px;
	}
	
.my-modal-teaser .close {
    padding: 10px;
    position: relative;
    z-index: 2060;
}
@media (max-width:767px){
  .carousel_teaser .slide-wrapper {width: 100%;}
  .carousel_teaser .carousel-inner .active.left { left: -100%; }
  .carousel_teaser .carousel-inner .next      { left:  100%; }
  .carousel_teaser .carousel-inner .prev		{ left: -100%; }
  .carousel_teaser .carousel-inner .active.right{ left: 100%; }
  
  .my-modal-teaser {
  position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0;
	max-width: initial;
  }
	  

}
@media (max-width:480px){
	.my-modal-teaser {
	left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
	}
}