*{
	margin:0;
	padding:0;
}

.image-overlay{
	margin: auto;
	position: relative;
	width: 641px;
	background-color: #2d2d2d;
	overflow: hidden;
	z-index: 20;
}


.image-effect-doors{
	width: 641px;
	height: 200px;
	position: relative;
	margin: 0 auto;
	background-color: #2d2d2d;
}


.image-effect-doors .image-left,
.image-effect-doors .image-right{
	display: inline-block;
	position: absolute;
	width: 321px;
	height: 200px;
	overflow: hidden;
	transition:  0.4s ease;
	z-index: 10;
}


.image-effect-doors .image-left{
	left: 0;
	top:0;
}

.image-effect-doors:hover .image-left{
	opacity: 0.4;
	transform: translateX(-250px);
	-webkit-transform: translateX(-250px);
}


.image-effect-doors .image-right{
	left:320px;
	top: 0;
}
.image-effect-doors:hover .image-right{
	opacity: 0.4;
	transform: translateX(250px);
	-webkit-transform: translateX(250px);
}

.image-effect-doors .image-right img{
	margin-left: -320px;
}

.share-button{
	position: absolute;
	text-decoration: none;
	color: #ffffff;
	padding: 20px;
	width: 300px;
	border-radius: 2px;
	margin:	20px 0 0 -150px;
	left: 50%;
	background-color:#2d2d2d;
	z-index:10;
}


*{
	margin:0;
	padding:0;
}

.image-effect-slide-pop-up{
	width: 641px;
	height: 200px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	background-color: #fff;
}
.image-effect-slide-pop-up .image-layer{
	position: absolute;
	top:0;
	left: 0;
	height: 200px;
	-webkit-transition: 0.4s 0.8s;
	transition: 0.4s 0.8s;
}
.image-effect-slide-pop-up:hover .image-layer{
	-webkit-transition: 0.4s 0s;
	transition: 0.4s 0s;
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
}
.image-effect-slide-pop-up .image-layer img{
	position: relative;
	z-index: 5;
}
.image-effect-slide-pop-up .mshtCatalog {
	position: absolute;
	display: block;
	text-decoration: none;
	color: #ffffff;
	padding: 0;
	width: 641px;
	height: 200px;
	border-radius: 2px;
	margin-left: -35px;
	line-height: 70px;
	font-size: 17px;
	text-align: center;
	opacity: 0;
	z-index: 2;
	background:url(../images/msht10yearsCatalog.jpg) center center no-repeat;
}
.image-effect-slide-pop-up .mshtCatalog:hover {
	background:url(../images/msht10yearsCatalogH.jpg) center center no-repeat;
}
.image-effect-slide-pop-up:hover .mshtCatalog {
	opacity: 1;	
	-webkit-transform: translateY(-220px);
	transform: translateY(-220px);
}
.image-effect-slide-pop-up .BL-55-80{
	left: 5.5%;
	-webkit-transition: 0.4s 0.6s;
	transition: 0.4s 0.6s;
	top: 20px;	
}
.image-effect-slide-pop-up:hover .BL-55-80 {
	-webkit-transition: 0.4s 0.2s;
	transition: 0.4s 0.2s;
}

.container{
	text-align: center;
	font: bold 14px sans-serif;
}

.dropdown{
	text-align: center;
	width: 200px;
	margin: 50px auto 160px;
	position: relative;
	color: gray;
}

.dropdown a{
	display: block;
	box-sizing: border-box;
	text-decoration: none;
	color: #FFF;
	text-align: center;
	background-color: #6BB9E1;
	font-size: 13px;
	width: 120px;
	padding: 9px 0;
	border-radius: 2px;
	margin: 4px auto 0;
	opacity: 0.8;

	-webkit-transition: 0.2s ease;
	transition: 0.2s ease;
}

.dropdown span {
	background-color: #EC7164;
	display: block;
	box-sizing: border-box;
	color: #FFF;
	text-align: left;
	font-size: 16px;
	width: 200px;
	padding: 11px 15px;
	line-height: 1;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dropdown span:after{
	content: '';
	position: absolute;
	right: 20px;
	top: 17px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #fff transparent transparent transparent;
	-webkit-transition: 0.2s ease-in;
	transition: 0.2s ease-in;
}

.dropdown ul li a.active{
	background-color: #687AD7;
	opacity: 0.8 !important;
}

.dropdown ul li a:hover {
	opacity: 1;
}

.dropdown ul{
	position: absolute;
	z-index: 200;
	left: 50%;
	margin: 10px 0 0 -250px;
	list-style: none;
	padding: 0;
	overflow: hidden;

	width: 500px;

	height: 0;
	-webkit-transition: 0.4s ease;
	transition: 0.4s ease;
}

.dropdown ul li{
	display: inline-block;
}

.dropdown:hover ul {
	height: 180px;
}

/* SLIDER */
#content-slider {
	width:641px;
	height:200px;
}
#slider {
	overflow:visible;
	position:relative;
}
#mask {
	overflow:hidden;
	height:200px;
}
#slider ul {
	margin:0;
	padding:0;
	position:relative;
}
#slider li {
	width:641px;
	height:200px;
	position:absolute;
	top:-200px;
	list-style:none;
}
#slider li.firstanimation {
	-moz-animation:cycle 20s linear infinite;	
	-webkit-animation:cycle 20s linear infinite;		
}
#slider li.secondanimation {
	-moz-animation:cycletwo 20s linear infinite;
	-webkit-animation:cycletwo 20s linear infinite;		
}
#slider li#firstPage:hover, 
#slider li#secondPage:hover, 
#slider:hover li, 
#slider:hover .progress-bar {
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar { 
	position:relative;
	top:-2px;
	width:641px; 
	height:2px;
	background:#ff7200;
	-moz-animation:fullexpand 50s ease-out infinite;
	-webkit-animation:fullexpand 50s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
	0%  { top:0px; }
	20%  { top:0px; } 
	40% { top:0px; opacity:1; z-index:0; } 
	50% { top:200px; opacity:0; z-index:0; } 
	60% { top:-200px; opacity:0; z-index:-1; }
	80% { top:-200px; opacity:0; z-index:0; }
	90% { top:-200px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-moz-keyframes cycletwo {
	0%  { top:-200px; opacity:0; }
	40% { top:-200px; opacity:0; }
	50% { top:0px; opacity:1; }
	70% { top:0px; opacity:1; }
	90% { top:0px; opacity:1; z-index:0; }
	100%{ top:200px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
	0%  { top:0px; }
	20%  { top:0px; } 
	40% { top:0px; opacity:1; z-index:0; } 
	50% { top:200px; opacity:0; z-index:0; } 
	60% { top:-200px; opacity:0; z-index:-1; }
	80% { top:-200px; opacity:0; z-index:0; }
	90% { top:-200px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-webkit-keyframes cycletwo {
	0%  { top:-200px; opacity:0; }
	40% { top:-200px; opacity:0; }
	50% { top:0px; opacity:1; }
	70% { top:0px; opacity:1; }
	90% { top:0px; opacity:1; z-index:0; }
	100%{ top:200px; 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; }	
}