/* LAYOUT */

.container {
	margin-top: -953px;
	margin-left: 421px;
	position: relative;
	overflow: hidden;
	width: 543px;
	visibility: visible;
}

/* CONTENT SLIDER */

#content-slider {
	width:100%;
	height:364px;
	margin:10px auto 0;
}


/* SLIDER */

#slider {
	background:#000;
	border:5px solid #eaeaea;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height:320px;
	width:533px;
	margin:40px auto 0;
	overflow:visible;
	position:relative;
}


#mask {
	overflow:hidden;
	height:320px;
}


#slider ul {
	margin:0;
	padding:0;
	position:relative;
}

#slider li {
	width:546px;
	height:320px;
	position:absolute;
	top:-325px;
	list-style:none;
}



#slider li.firstanimation {
animation:cycle 80s linear infinite;
-ms-animation:cycle 80s linear infinite;	
-moz-animation:cycle 80s linear infinite;	
-webkit-animation:cycle 80s linear infinite;
}


#slider li.secondanimation {
animation:cycletwo 80s linear infinite;
-ms-animation:cycletwo 80s linear infinite;	
-moz-animation:cycletwo 80s linear infinite;
-webkit-animation:cycletwo 80s linear infinite;
}


#slider li.thirdanimation {
animation:cyclethree 80s linear infinite;
-ms-animation:cyclethree 80s linear infinite;	
-moz-animation:cyclethree 80s linear infinite;
-webkit-animation:cyclethree 80s linear infinite; 
}


#slider li.fourthanimation {
animation:cyclefour 80s linear infinite;
-ms-animation:cyclefour 80s linear infinite;
-moz-animation:cyclefour 80s linear infinite;
-webkit-animation:cyclefour 80s linear infinite;
 }


#slider li.fifthanimation {
animation:cyclefive 80s linear infinite;
-ms-animation:cyclefive 80s linear infinite;
-moz-animation:cyclefive 80s linear infinite;
-webkit-animation:cyclefive 80s linear infinite;
}

#slider li.sixthanimation {
animation:cyclesix 80s linear infinite;
-ms-animation:cyclesix 80s linear infinite;
-moz-animation:cyclesix 80s linear infinite;
-webkit-animation:cyclesix 80s linear infinite;
}

#slider li.seventhanimation {
animation:cycleseven 80s linear infinite;
-ms-animation:cycleseven 80s linear infinite;
-moz-animation:cycleseven 80s linear infinite;
-webkit-animation:cycleseven 80s linear infinite;
}

#slider li.eightanimation {
animation:cycleeight 80s linear infinite;
-ms-animation:cycleeight 80s linear infinite;
-moz-animation:cycleeight 80s linear infinite;
-webkit-animation:cycleeight 80s linear infinite;
}

#slider li.ninethanimation {
animation:cyclenine 80s linear infinite;
-ms-animation:cyclenine 80s linear infinite;
-moz-animation:cyclenine 80s linear infinite;
-webkit-animation:cyclenine 80s linear infinite;
}

#slider li.tenthanimation {
animation:cycleten 80s linear infinite;
-ms-animation:cycleten 80s linear infinite;
-moz-animation:cycleten 80s linear infinite;
-webkit-animation:cycleten 80s linear infinite;
}

#slider .tooltip {
background:rgba(0,0,0,0.7);
width:500px;
height:60px;
position:relative;
bottom:105px;
left:-520px;
transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
}



#slider .tooltip h1 {
color: white;
font-size:18px;
font-family: Tahoma, Arial, sans-serif;  
font-weight: bold;
line-height:60px;
padding:0 0 0 20px;
}

#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip,
#slider li#sixth:hover .tooltip,
#slider li#seventh:hover .tooltip,
#slider li#eight:hover .tooltip,
#slider li#nineth:hover .tooltip, 
#slider li#tenth:hover .tooltip{
	left:0px;
}

#slider:hover li, #slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;  
-ms-animation-play-state:paused; 
animation-play-state:paused;

}



/* PROGRESS BAR - в момента не се вижда*/

.progress-bar { 	
	position:relative;
	top:0px;
	width:546px; 
	height:4px;
	background: red;
	-moz-animation:fullexpand 40s ease-out infinite;
	-webkit-animation:fullexpand 40s ease-out infinite;
	animation:fullexpand 40s ease-out infinite;
}





/* ANIMATION */

@-moz-keyframes cycle {
	0%  { top:0px; }
	2%  { top:0px; } 
	8% { top:0px; opacity:1; z-index:0; } 
	10% { top:325px; opacity:0; z-index:0; } 
	11% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
}

@-moz-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	8% { top:-325px; opacity:0; }
	10% { top:0px; opacity:1; }
	12% { top:0px; opacity:1; } 
	18% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	18% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	22% { top:0px; opacity:1; } 
	28% { top:0px; opacity:1; } 
	30% { top:325px; opacity:0; z-index:0; }
	31% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	28% { top:-325px; opacity:0; }
	30% { top:0px; opacity:1; }
	32% { top:0px; opacity:1; }
	38% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	38% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	42% { top:0px; opacity:1; }
	48% { top:0px; opacity:1; z-index:0; }
	50% { top:325px; opacity:0; z-index:0; }
	51% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	48% { top:-325px; opacity:0; }
	50% { top:0px; opacity:1; }
	52% { top:0px; opacity:1; }
	58% { top:0px; opacity:1; z-index:0; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cycleseven {
	0%  { top:-325px; opacity:0; }
	58% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	62% { top:0px; opacity:1; }
	68% { top:0px; opacity:1; z-index:0; }
	70% { top:325px; opacity:0; z-index:0; }
	71% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cycleeight {
	0%  { top:-325px; opacity:0; }
	68% { top:-325px; opacity:0; }
	70% { top:0px; opacity:1; }
	72% { top:0px; opacity:1; }
	78% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cyclenine {
	0%  { top:-325px; opacity:0; }
	78% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	82% { top:0px; opacity:1; }
	88% { top:0px; opacity:1; z-index:0; }
	90% { top:325px; opacity:0; z-index:0; }
	91% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-moz-keyframes cycleten {
	0%  { top:-325px; opacity:0; }
	88% { top:-325px; opacity:0; }
	90% { top:0px; opacity:1; }
	92% { top:0px; opacity:1; }
	98% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}


@-webkit-keyframes cycle {
	0%  { top:0px; }
	2%  { top:0px; } 
	8% { top:0px; opacity:1; z-index:0; } 
	10% { top:325px; opacity:0; z-index:0; } 
	11% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
}

@-webkit-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	8% { top:-325px; opacity:0; }
	10% { top:0px; opacity:1; }
	12% { top:0px; opacity:1; } 
	18% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	18% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	22% { top:0px; opacity:1; } 
	28% { top:0px; opacity:1; } 
	30% { top:325px; opacity:0; z-index:0; }
	31% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	28% { top:-325px; opacity:0; }
	30% { top:0px; opacity:1; }
	32% { top:0px; opacity:1; }
	38% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	38% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	42% { top:0px; opacity:1; }
	48% { top:0px; opacity:1; z-index:0; }
	50% { top:325px; opacity:0; z-index:0; }
	51% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	48% { top:-325px; opacity:0; }
	50% { top:0px; opacity:1; }
	52% { top:0px; opacity:1; }
	58% { top:0px; opacity:1; z-index:0; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cycleseven {
	0%  { top:-325px; opacity:0; }
	58% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	62% { top:0px; opacity:1; }
	68% { top:0px; opacity:1; z-index:0; }
	70% { top:325px; opacity:0; z-index:0; }
	71% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cycleeight {
	0%  { top:-325px; opacity:0; }
	68% { top:-325px; opacity:0; }
	70% { top:0px; opacity:1; }
	72% { top:0px; opacity:1; }
	78% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cyclenine {
	0%  { top:-325px; opacity:0; }
	78% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	82% { top:0px; opacity:1; }
	88% { top:0px; opacity:1; z-index:0; }
	90% { top:325px; opacity:0; z-index:0; }
	91% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cycleten {
	0%  { top:-325px; opacity:0; }
	88% { top:-325px; opacity:0; }
	90% { top:0px; opacity:1; }
	92% { top:0px; opacity:1; }
	98% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}


@-ms-keyframes cycle {
	0%  { top:0px; }
	2%  { top:0px; } 
	8% { top:0px; opacity:1; z-index:0; } 
	10% { top:325px; opacity:0; z-index:0; } 
	11% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
}

@-ms-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	8% { top:-325px; opacity:0; }
	10% { top:0px; opacity:1; }
	12% { top:0px; opacity:1; } 
	18% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	18% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	22% { top:0px; opacity:1; } 
	28% { top:0px; opacity:1; } 
	30% { top:325px; opacity:0; z-index:0; }
	31% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	28% { top:-325px; opacity:0; }
	30% { top:0px; opacity:1; }
	32% { top:0px; opacity:1; }
	38% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	38% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	42% { top:0px; opacity:1; }
	48% { top:0px; opacity:1; z-index:0; }
	50% { top:325px; opacity:0; z-index:0; }
	51% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	48% { top:-325px; opacity:0; }
	50% { top:0px; opacity:1; }
	52% { top:0px; opacity:1; }
	58% { top:0px; opacity:1; z-index:0; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cycleseven {
	0%  { top:-325px; opacity:0; }
	58% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	62% { top:0px; opacity:1; }
	68% { top:0px; opacity:1; z-index:0; }
	70% { top:325px; opacity:0; z-index:0; }
	71% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cycleeight {
	0%  { top:-325px; opacity:0; }
	68% { top:-325px; opacity:0; }
	70% { top:0px; opacity:1; }
	72% { top:0px; opacity:1; }
	78% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cyclenine {
	0%  { top:-325px; opacity:0; }
	78% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	82% { top:0px; opacity:1; }
	88% { top:0px; opacity:1; z-index:0; }
	90% { top:325px; opacity:0; z-index:0; }
	91% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@-ms-keyframes cycleten {
	0%  { top:-325px; opacity:0; }
	88% { top:-325px; opacity:0; }
	90% { top:0px; opacity:1; }
	92% { top:0px; opacity:1; }
	98% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}



@keyframes cycle {
	0%  { top:0px; }
	2%  { top:0px; } 
	8% { top:0px; opacity:1; z-index:0; } 
	10% { top:325px; opacity:0; z-index:0; } 
	11% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
}
@keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	8% { top:-325px; opacity:0; }
	10% { top:0px; opacity:1; }
	12% { top:0px; opacity:1; } 
	18% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	18% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	22% { top:0px; opacity:1; } 
	28% { top:0px; opacity:1; } 
	30% { top:325px; opacity:0; z-index:0; }
	31% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	28% { top:-325px; opacity:0; }
	30% { top:0px; opacity:1; }
	32% { top:0px; opacity:1; }
	38% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	38% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	42% { top:0px; opacity:1; }
	48% { top:0px; opacity:1; z-index:0; }
	50% { top:325px; opacity:0; z-index:0; }
	51% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	48% { top:-325px; opacity:0; }
	50% { top:0px; opacity:1; }
	52% { top:0px; opacity:1; }
	58% { top:0px; opacity:1; z-index:0; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cycleseven {
	0%  { top:-325px; opacity:0; }
	58% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	62% { top:0px; opacity:1; }
	68% { top:0px; opacity:1; z-index:0; }
	70% { top:325px; opacity:0; z-index:0; }
	71% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cycleeight {
	0%  { top:-325px; opacity:0; }
	68% { top:-325px; opacity:0; }
	70% { top:0px; opacity:1; }
	72% { top:0px; opacity:1; }
	78% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cyclenine {
	0%  { top:-325px; opacity:0; }
	78% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	82% { top:0px; opacity:1; }
	88% { top:0px; opacity:1; z-index:0; }
	90% { top:325px; opacity:0; z-index:0; }
	91% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}

@keyframes cycleten {
	0%  { top:-325px; opacity:0; }
	88% { top:-325px; opacity:0; }
	90% { top:0px; opacity:1; }
	92% { top:0px; opacity:1; }
	98% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}



/* ANIMATION BAR */

@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}

@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@-ms-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}