@import url(../../../fonts);



.as_slider{

  width: 100%; /* when the slider is loading the width will be 100% */
  max-height:10%;
 /* height: 200px; /* and the height 200px */

  z-index: 300;

  display: block;

  padding: 0;

  margin: 0;



  position: relative;

  max-width: 100%;

  overflow: hidden;



  background: white;

  background-image: url('../img/loading.gif');

  background-repeat:no-repeat;

  background-position:center;       

}



.as_slider a{

  text-shadow: none;

  color: #98C8FC;

}



.as_slider_shadow{

/*   -webkit-box-shadow: 0px 7px 9px -8px #4a4a4a;

     -moz-box-shadow: 0px 7px 9px -8px #4a4a4a;

       -o-box-shadow: 0px 7px 9px -8px #4a4a4a;

      -ms-box-shadow: 0px 7px 9px -8px #4a4a4a;

          box-shadow: 0px 7px 9px -8px #4a4a4a;

/*

  -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;

     -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;

       -o-box-shadow: 0px 1px 5px 0px #4a4a4a;

      -ms-box-shadow: 0px 1px 5px 0px #4a4a4a;

          box-shadow: 0px 1px 5px 0px #4a4a4a;

*/

}



.as_slider img{

  position: absolute;

  padding: 0;

  margin: 0;

  display: inline-block;

  z-index: 50;

  opacity: 0;

}



.as_slider img:first-child{

  z-index: 100;

}



.as_slider:hover .as_prev, .as_slider:hover .as_next, .as_slider:hover .as_play, .as_slider:hover .as_navContainer, .as_slider:hover .as_captions{

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter: alpha(opacity=100);

}



.as_prev, .as_next, .as_play{

  display: inline-block;

  position: absolute;

  margin-top: -13px;

  z-index: 200;

  width: 25px;

  height: 35px;

  

  cursor: pointer; 



  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

}



.as_prev{

  background-position: -18px -124px;

  margin-left: 15px;

  top: 50%;

}



.as_prev:hover{

  background-position: 3px -124px;

}



.as_next{

  right: 0;

  background-position: -65px -124px;

  margin-right: 15px;

  top: 50%;

}



.as_next:hover{

  background-position: -43px -124px;

}



.as_boxesContainer{

  position: absolute;

  z-index: 101;

}



.as_box{

  float:left;

  display: block;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

}



.as_navContainer{

  display: inline-block;

  position: absolute;

  z-index: 200;

  bottom: 13px !important;

  right: 50%;

  

  -webkit-transition:all .3s;

     -moz-transition:all .3s;

       -o-transition:all .3s;

      -ms-transition:all .3s;

          transition:all .3s;



  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

}



.as_navBtn:first-child{

  margin-left: 0;

}



.as_navBtn{

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

  border-radius: 50%;



  width: 12px;

  height: 12px;

  background: white;

  

  opacity: .5;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  filter: alpha(opacity=50);



  display: inline-block;

  margin-left: 6px;

  cursor: pointer;



  -webkit-box-shadow: 1px 2px 12px -2px #4a4a4a;

     -moz-box-shadow: 1px 2px 12px -2px #4a4a4a;

       -o-box-shadow: 1px 2px 12px -2px #4a4a4a;

      -ms-box-shadow: 1px 2px 12px -2px #4a4a4a;

          box-shadow: 1px 2px 12px -2px #4a4a4a;

}



.as_navBtn:hover{

    opacity: .7;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    filter: alpha(opacity=70);

}



.as_navContainer .selected{

    opacity: 1;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

}



.as_timer{

  position: absolute;

  z-index: 200;

  bottom:0;

  left: 0;

  height: 2px;

  background-color: #fff;

  font-size: 0;

  font-family: sans-serif;

  line-height: normal;

}



.as_play{



  -webkit-transition:all .3s;

     -moz-transition:all .3s;

       -o-transition:all .3s;

      -ms-transition:all .3s;

          transition:all .3s;



  position: absolute;

  z-index: 200;

  right: 30px;

  top: 40px;

  width: 20px;

  height: 20px;

  display: inline-block;

  margin-left: 10px;

  cursor: pointer;



  -webkit-box-shadow: 1px 2px 12px -2px #4a4a4a;

     -moz-box-shadow: 1px 2px 12px -2px #4a4a4a;

       -o-box-shadow: 1px 2px 12px -2px #4a4a4a;

      -ms-box-shadow: 1px 2px 12px -2px #4a4a4a;

          box-shadow: 1px 2px 12px -2px #4a4a4a;

  



  background-position: -162px 4px;



}



.as_pause{

  background-position: -179px 4px;

}



/* Baneer Message Text (A) */

.as_captions{

  z-index: 199;

  position: absolute;

  width:100%;

  bottom: 50px; /* Important to use only bottom position, dont use top (for js coding) */

  color: #fff;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

  display: none;

  font-family:A;

  font-size:25px;

  font-weight:normal;

  text-align:center;

  text-transform:uppercase;

  background-color: rgba(39,39,39,0.8);

  padding:5px 10px;

  border:none;

}



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

    

    .as_captions{

      padding: 5px;

    }



    .as_captions h4{

      font-size: 12px;

    }



 }





.as_tip{

  border: 2px solid white;

  position: absolute;

  z-index: 300;

}



.as_tip img{

  max-width: 100%;

}



.as_arrow{

  position: absolute;

  z-index: 400;

  bottom: -10px;



  width: 0;

  height: 0;

  border-left: 8px solid transparent;

  border-right: 8px solid transparent;

  border-top: 8px solid white;

}



.numeric .as_navBtn{

  border-radius: 2px;

  width: 20px;

  height: 20px;

  text-align: center;

  font-family: sans-serif;

}



.numeric .as_navContainer{

  bottom: 15px !important;

}



/* Theme 1 */



.theme1 .as_prev{

    top: auto;

    left: auto;

    bottom: 7px;

    right: 70px;

    margin: 0;

}



.theme1 .as_next{

    top: auto;

    right: 10px;

    bottom: 7px;

    margin: 0;

}



.theme1 .as_navContainer{

    right: 110px;

} 



.theme1 .as_play{

    top: auto;

    bottom: 14px;

    right: 41px;

    margin: 0;

}



/* Theme 2 */



.theme2 .as_prev{

    background-color: black;

    border-radius: 0 3px 3px 0;

    left: 0;

    margin-right: 0;

    margin-left: 0;

}



.theme2 .as_next{

    background-color: black;

    border-radius: 0 3px 3px 0;

    right: 0;

    margin-right: 0;

    margin-left: 0;

}



.theme2 .as_play{

    top: 50%;

    margin-top: -7px;

    left: 50%;

    margin-left: -7px;   

}



/* Theme 3 */



.theme3 .as_prev{

    top: 7px;

    left: auto;

    bottom: auto;

    right: 70px;

    margin: 0;

}



.theme3 .as_next{

    top: 7px;

    right: 10px;

    bottom: auto;

    margin: 0;

}



.theme3 .as_navContainer{

    right: 110px;

    top: 15px;

} 



.theme3 .as_play{

    top: 14px;

    bottom: auto;

    right: 41px;

    margin: 0;

}



.theme3 .as_captions{

    width: 100%;

    height: 100%;

    bottom: 0;

    background-color: transparent;

    background: rgba(0,0,0,.5);

    overflow: hidden;

}



/* ===CIRUCLAR TIMER== */





.as_circularTimer {

  position:absolute;

  z-index: 200;

  top: 10px;

  left: 10px;

  font-size: 200px;

  width:0.1em;

  height:0.1em;

}

.as_circularTimer > .as_percent {

  position: absolute;

  top: 1.05em;

  left: 0;

  width: 3.33em;

  font-size: 0.3em;

  text-align:center;

}

.as_circularTimer > #as_peace {

  position:absolute;

  width:0.1em;

  height:0.1em;

  clip:rect(0px,0.1em,0.1em,0.05em);

}

.as_circularTimer > #as_peace.gt50 {

  clip:rect(auto, auto, auto, auto);

}

.as_circularTimer > #as_peace > .as_pie {

  /*border: 0.0.1em solid #c0c0c0;*/

  position:absolute;

  width:0.0em; 

  height:0.0em; 

  clip:rect(0em,0.05em,0.1em,0em);

  -moz-border-radius:0.05em;

  -webkit-border-radius:0.05em; 

  border-radius:0.05em; 

}

.as_circularTimer > #as_peace > .as_pie.as_fill {

  -moz-transform:rotate(180deg) !important;

  -webkit-transform:rotate(180deg) !important;

  -o-transform:rotate(180deg) !important;

  transform:rotate(180deg) !important;

}

.as_circularTimer.as_fill > .as_percent {

  display: none;

}

.as_circularTimer.as_fill > #as_peace > .as_pie {

  border: transparent;

  background-color: white;

  width:0.1em;

  height:0.1em;

}