.mainteaser {
  max-width: 100%;
  imax-height:600px;
  margin: auto;
  ibackground-color: #000;
  overflow: hidden;
  position:relative;
}
.slide img {
	width: 16.666%;
	height: auto;
	float: left;
}
.slide img.bottom {
	margin: 0;
}	
.slide img.top {
	margin: 0;
	margin-left:-16.666%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d; 	
	-o-transform-style: preserve-3d;
  -webkit-animation-name: cf2FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: alternate;

  -moz-animation-name: cf2FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 5s;
  -moz-animation-direction: alternate;

  -o-animation-name: cf2FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 5s;
  -o-animation-direction: alternate;
  
  -ms-animation-name: cf2FadeInOut;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 5s;
  -ms-animation-direction: alternate;

  animation-name: cf2FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@-keyframes cf2FadeInOut {
 0% {opacity:1;}
 25% {opacity:1;}
 100% {opacity:0;}
}
@-webkit-keyframes cf2FadeInOut {
 0% {opacity:1;}
 25% {opacity:1;}
 100% {opacity:0;}
}
@-moz-keyframes cf2FadeInOut {
 0% {opacity:1;}
 25% {opacity:1;}
 100% {opacity:0;}
}
@-ms-keyframes cf2FadeInOut {
 0% {opacity:1;}
 25% {opacity:1;}
 100% {opacity:0;}
}
@-o-keyframes cf2FadeInOut {
 0% {opacity:1;}
 25% {opacity:1;}
 100% {opacity:0;}
}


/* slide mainteaser */
.slide {
	width:600%;
	height:auto;
	margin:auto;
	ibackground-color:red;
	position:relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d; 	
	-o-transform-style: preserve-3d;
	transition: width 1s ease;
  -webkit-animation-name: slide;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 40s;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode:none;

  -moz-animation-name: slide;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 40s;
  -moz-animation-delay: 0s;
  -moz-animation-direction: normal;
  -moz-animation-fill-mode:none;

  -o-animation-name: slide;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 40s;
  -o-animation-delay: 0s;
  -o-animation-direction: normal;
  -o-animation-fill-mode:none;
  
  -ms-animation-name: slide;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 40s;
  -ms-animation-delay: 0s;
  -ms-animation-direction: normal;
  -ms-animation-fill-mode:none;
  
  animation-name: slide;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode:none;
}

@-keyframes slide {
 0%,10%    {left:0;}
 20%,30%   {left:-100%;}
 40%,50%   {left:-200%;}
 60%,70%   {left:-300%;}
 80%,90%   {left:-400%;}
 100% 	   {left:-500%;}
}
@-webkit-keyframes slide {
 0%,10%    {left:0;}
 20%,30%   {left:-100%;}
 40%,50%   {left:-200%;}
 60%,70%   {left:-300%;}
 80%,90%   {left:-400%;}
 100% 	   {left:-500%;}
}
@-moz-keyframes slide {
 0%,10%   {left:0;}
 20%,30%   {left:-100%;}
 40%,50%   {left:-200%;}
 60%,70%   {left:-300%;}
 80%,90%   {left:-400%;}
 100% {left:-500%;}
}
@-ms-keyframes slide {
 0%,10%   {left:0;}
 20%,30%   {left:-100%;}
 40%,50%   {left:-200%;}
 60%,70%   {left:-300%;}
 80%,90%   {left:-400%;}
 100% {left:-500%;}
}
@-o-keyframes slide {
 0%,10%    {left:0;}
 20%,30%   {left:-100%;}
 40%,50%   {left:-200%;}
 60%,70%   {left:-300%;}
 80%,90%   {left:-400%;}
 100% 	   {left:-500%;}
}

.slide:hover {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -ms-animation-play-state: paused;
   -o-animation-play-state: paused;
   animation-play-state: paused;
}
.slide:hover ~ .progress-bar {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -ms-animation-play-state: paused;
   -o-animation-play-state: paused;
   animation-play-state: paused;
}
.slide:hover ~ .pausebtn {
   opacity:0.5;
   -webkit-animation-play-state: running;
   -moz-animation-play-state: running;
   -ms-animation-play-state: running;
   -o-animation-play-state: running;
   animation-play-state: running;
}
.pausebtn:hover{
   opacity:0;
}

.mainteaser:hover .pop1 {
   opacity:1;
   bottom:0;
   height:auto;
}
.mainteaser:hover .note {
   opacity:1;
   bottom:0;
   height:54px;
   padding-top:15px;
   -webkit-animation-play-state: running;
   -moz-animation-play-state: running;
   -ms-animation-play-state: running;
   -o-animation-play-state: running;
   animation-play-state: running;
}
.pop1:hover{
   opacity:0;
}
.progress-bar {
   top: 0;
   width: 100%;
   height: 5px;
   background-color: #000;
   iborder:5px #000 solid;
   position: absolute;
   z-index:2;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d; 	
   -o-transform-style: preserve-3d;
  -webkit-animation-name: fullexpand;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
  -webkit-animation-direction: normal;

  -moz-animation-name: fullexpand;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;
  -moz-animation-direction: normal;
  
  -ms-animation-name: fullexpand;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 8s;
  -ms-animation-direction: normal;

  -o-animation-name: fullexpand;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;
  -o-animation-direction: normal;

  animation-name: fullexpand;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  animation-direction: normal;
}
   
@-keyframes fullexpand {
0%{ background-color: #b2e5e5; width: 0%; opacity: 0;}
10% { background-color: #b2e5e5 width: 100%; opacity: 1;}
20% { background-color: #cccce5; width: 100%; opacity: 1;}
30% { background-color: #ffcccc; width: 100%; opacity: 1;}
40% { background-color: #ffcc99; width: 100%; opacity: 1;}
50% { background-color: #e5e5b2; width: 100%; opacity: 0;}
100% { background-color: #e5e5b2; width: 100%; opacity: 0;}
}

@-webkit-keyframes fullexpand {
0%{ background-color: #b2e5e5; width: 0%; opacity: 0;}
10% { background-color: #b2e5e5 width: 100%; opacity: 1;}
20% { background-color: #cccce5; width: 100%; opacity: 1;}
30% { background-color: #ffcccc; width: 100%; opacity: 1;}
40% { background-color: #ffcc99; width: 100%; opacity: 1;}
50% { background-color: #e5e5b2; width: 100%; opacity: 0;}
100% { background-color: #e5e5b2; width: 100%; opacity: 0;}
}

@-moz-keyframes fullexpand {
0%{ background-color: #b2e5e5; width: 0%; opacity: 0;}
10% { background-color: #b2e5e5 width: 100%; opacity: 1;}
20% { background-color: #cccce5; width: 100%; opacity: 1;}
30% { background-color: #ffcccc; width: 100%; opacity: 1;}
40% { background-color: #ffcc99; width: 100%; opacity: 1;}
50% { background-color: #e5e5b2; width: 100%; opacity: 0;}
100% { background-color: #e5e5b2; width: 100%; opacity: 0;}
}

@-ms-keyframes fullexpand {
0%{ background-color: #b2e5e5; width: 0%; opacity: 0;}
10% { background-color: #b2e5e5 width: 100%; opacity: 1;}
20% { background-color: #cccce5; width: 100%; opacity: 1;}
30% { background-color: #ffcccc; width: 100%; opacity: 1;}
40% { background-color: #ffcc99; width: 100%; opacity: 1;}
50% { background-color: #e5e5b2; width: 100%; opacity: 0;}
100% { background-color: #e5e5b2; width: 100%; opacity: 0;}
}

@-o-keyframes fullexpand {
0%{ background-color: #b2e5e5; width: 0%; opacity: 0;}
10% { background-color: #b2e5e5 width: 100%; opacity: 1;}
20% { background-color: #cccce5; width: 100%; opacity: 1;}
30% { background-color: #ffcccc; width: 100%; opacity: 1;}
40% { background-color: #ffcc99; width: 100%; opacity: 1;}
50% { background-color: #e5e5b2; width: 100%; opacity: 0;}
100% { background-color: #e5e5b2; width: 100%; opacity: 0;}
}

.pausebtn {
  width:100px;
  height:100px;
  top: 50%;
  left:50%;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  z-index:1;
  overflow:hidden;
  opacity: 0;
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-animation-name: showpause;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 40s;
  -webkit-animation-direction: alternate;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-play-state: paused;

  -moz-animation-name: showpause;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 40s;
  -moz-animation-direction: alternate;
  -moz-transform-style: preserve-3d;
  -moz-animation-play-state: paused;
  
  -ms-animation-name: showpause;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 40s;
  -ms-animation-direction: alternate;
  -ms-transform-style: preserve-3d;
  -ms-animation-play-state: paused;

  -o-animation-name: showpause;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 40s;
  -o-animation-direction: alternate;
  -o-transform-style: preserve-3d;
  -o-animation-play-state: paused;

  animation-name: showpause;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  animation-direction: alternate;
  transform-style: preserve-3d;
  animation-play-state: paused;
 } 
 
 .pausebtn img{
  width:145px;
  height:auto;
  margin: -22px;
  iopacity:1;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
} 
 .pop1{
  width:100%;
  bottom:0px;
  height:0px;
  position: fixed;
  opacity: 0;
  z-index:2;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
 }
.note{
  min-width:300px;
  bottom:-100px;
  padding-right:150px;
  height:0px;
  margin: auto;
  position: relative;
  font-family: 'Merriweather Sans', sans-serif;
  color: #fff;
  font-size: 14px;
  line-height:14px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: all 1s ease 10s;
  -moz-transition: all 1s ease 10s;
  -o-transition: all 1s ease 10s;
  -ms-transition: all 1s ease 10s;
  transition: all 1s ease 10s;
  -webkit-animation-name: showpause;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 40s;
  -webkit-animation-direction: alternate;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-play-state: paused;

  -moz-animation-name: showpause;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 40s;
  -moz-animation-direction: alternate;
  -moz-transform-style: preserve-3d;
  -moz-animation-play-state: paused;
  
  -ms-animation-name: showpause;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 40s;
  -ms-animation-direction: alternate;
  -ms-transform-style: preserve-3d;
  -ms-animation-play-state: paused;

  -o-animation-name: showpause;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 40s;
  -o-animation-direction: alternate;
  -o-transform-style: preserve-3d;
  -o-animation-play-state: paused;

  animation-name: showpause;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  animation-direction: alternate;
  transform-style: preserve-3d;
  animation-play-state: paused;
 } 
  
@-keyframes showpause {
0%{ background-color: #66cccc;}
20% { background-color: #66cccc;}
40% { background-color: #9999cc;}
60% { background-color: #f99999;}
80% { background-color: #ff9933;}
100% { background-color: #cccc66;}
}
@-webkit-keyframes showpause {
0%{ background-color: #66cccc;}
20% { background-color: #66cccc;}
40% { background-color: #9999cc;}
60% { background-color: #f99999;}
80% { background-color: #ff9933;}
100% { background-color: #cccc66;}
}
@-moz-keyframes showpause {
0%{ background-color: #66cccc;}
20% { background-color: #66cccc;}
40% { background-color: #9999cc;}
60% { background-color: #f99999;}
80% { background-color: #ff9933;}
100% { background-color: #cccc66;}
}
@-ms-keyframes showpause {
0%{ background-color: #66cccc;}
20% { background-color: #66cccc;}
40% { background-color: #9999cc;}
60% { background-color: #f99999;}
80% { background-color: #ff9933;}
100% { background-color: #cccc66;}
}
@-o-keyframes showpause {
0%{ background-color: #66cccc;}
20% { background-color: #66cccc;}
40% { background-color: #9999cc;}
60% { background-color: #f99999;}
80% { background-color: #ff9933;}
100% { background-color: #cccc66;}
}