.sequence-theme { background-color: transparent; }

/* -------------------------------------------------- */
/*  Main Styles
/* -------------------------------------------------- */
.section {overflow:hidden;	 }
.sequence {margin: 0px auto; position: relative;float:left;	overflow: hidden;	width: 100%;  }
.sequence  .cover {position:absolute; left:0; top:0; width:100%; height:100%; background:url(/images/sub/pattern_cover2.png) repeat; z-index:0; display:none;}
.m-visual-h {height:750px;}

@media only screen and (max-width: 667px) {
.m-visual-h {height:300px;}
}
@media only screen and (max-width:460px) {
.m-visual-h {height:500px;}
}

#sequence {  }

  .sequence > .sequence-canvas {height: 100%;width: 100%;}
  .sequence > .sequence-canvas > li {
	  position: absolute;  width: 100%;  height: 100%;   z-index: 1;  display: block;  list-style: none;
	  opacity: 1 !important;
  }

  .sequence > .sequence-canvas > li img { height: 100%; }
		
  .sequence li > .sequence-entry { position: absolute; top: 0; left: 0; z-index: 11;
	padding:330px 80px 0;   width: 100%; height: 100%; 	}
	
/* -------------------------------------------------- */
/*  Next Prev Buttons
/* -------------------------------------------------- */	

.sequence-theme .sequence-prev,
.sequence-theme .sequence-next {
	position: absolute; top: 50%;	z-index: 5;	display: block;
	margin-top: 20px;	width: 30px;	height: 30px;	font-size: 0;	cursor: pointer;	text-align: center;

	-webkit-transition: all .30s ease-in-out;
			transition: all .30s ease-in-out;
}

.no-touch .sequence-theme .sequence-prev { left:  -60px; }
.no-touch .sequence-theme .sequence-next { right: -60px; }

.touch .sequence-theme .sequence-prev { left:  20px; }
.touch .sequence-theme .sequence-next { right: 20px; }

.sequence-theme:hover .sequence-prev { left:  20px; }
.sequence-theme:hover .sequence-next { right: 20px; }

.sequence-theme .sequence-prev:after,
.sequence-theme .sequence-next:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	font-size: 52px;
	font-family: 'fontello';
	line-height: 1em;
}

.sequence-theme .sequence-prev:after { content: "\ea03"; }
.sequence-theme .sequence-next:after { content: "\ea04"; }
	
.sequence-pause {
	bottom: 0;
	cursor: pointer;
	position: absolute;
	z-index: 1000; 
}

.sequence-paused    { opacity: 0.3; }
#sequence-preloader { background-color: #d9d9d9; }

/* -------------------------------------------------- */
/*  Pagination
/* -------------------------------------------------- */

.sequence-pagination {	position: absolute;	bottom: 10%;	z-index: 10;	display: none;    width: 100%;	text-align: center;	font-size: 0;
	-webkit-transition-duration: .5s;
			transition-duration: .5s; 
}
.sequence-pagination .page { display: inline-block;transform:rotate(45deg);}
.sequence-pagination .page span {	display: inline-block;margin: 2px 8px;	padding:6px;
	width:3px;	height:3px;	border-width: 1px;	border-style: solid;	border-color:#fff;
	background-color: transparent;	cursor: pointer;	vertical-align: middle;
	-webkit-transition: all .25s ease-in-out;
			transition: all .25s ease-in-out;
	-webkit-border-radius:0; 
			border-radius:0;
}

.sequence-pagination .page.current span,
.sequence-pagination .page:hover span {
	border-color: #fff;
	background-color:#fff;

	-webkit-transform: scale(1);
			transform: scale(1);
}

/* -------------------------------------------------- */
/*  Fullscreen Image
/* -------------------------------------------------- */

.sequence-canvas .parallax-overlay {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: url(overlay-pattern.png);
	background-repeat: repeat;
}

#sequence-fullscreen .animate-in .parallax-overlay {
	z-index: 1;
	background-color: rgba(0,0,0, .2);
}

.animated-element {
	position: relative;
	opacity: 0;
	
	-webkit-transition-duration: 1s;
			transition-duration: 1s;
}

.animate-out .animated-element { opacity: 0; }
.animate-in  .animated-element { opacity: 1; }

.full-bg-image.animated-element {
    
}

/* -------------------------------------------------- */
/*  Elements
/* -------------------------------------------------- */

.sequence-extra,
.sequence-content {	display: table;	width: 100%;	height: 50%;	padding-top:1%;	vertical-align: middle;	text-align: center; border-top:0px solid #fff;}
.sequence-content { display: table-cell; }
.sequence-content .sequence-slogan,
.sequence-content .sequence-text {	margin-bottom: 10px;	opacity: 0;	color: #fff;	text-transform: uppercase;
	font-weight: 500;	font-family: 'NotoSanskr-Medium','NotoSanskr-Light';line-height: 1.3em;}
	
.sequence-content .sequence-slogan { font-size: 57px; }
.sequence-content .sequence-text   {  margin-top:30px; font-size: 22px; font-family: 'NotoSanskr-Medium'; line-height:32px; }
	
.sequence-content .sequence-slogan,
.sequence-content .sequence-text {
	-webkit-transform: translateY(50px);
			transform: translateY(50px);
			
	-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
	-webkit-transition-duration: .7s;
			transition-duration: .7s;
	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;
}

.sequence-content .sequence-button {opacity: 0;
	
	-webkit-transform: translateY(50px);
			transform: translateY(50px);
			
	-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
	-webkit-transition-duration: .7s;
			transition-duration: .7s;
	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;
}

.sequence-content .sequence-slogan > span { color: #f8b637; }

.button {margin-top:50px;display: inline-block;	margin-bottom: 15px; padding: 10px 15px; outline: none;
		border-width: 1px;	border-style: solid;border-color: transparent; 	background-color: transparent;
		color: #fff;	vertical-align: baseline;	text-align: center;	 text-decoration: none;		text-transform: uppercase;
		font-weight: 500;	font-size: 11px; font-family: 'Raleway', sans-serif; line-height: 1em; cursor: pointer;

		-webkit-border-radius: 3px;
				border-radius: 3px;
		-webkit-transition: all .25s ease;
				transition: all .25s ease;	}
				
.button.large {		padding: 15px 30px;		font-size: 19px;		
	-webkit-border-radius: 6px;				border-radius: 6px;	}

.button.default { border-color: #cfcfcf; color: #fff;}
.button.default:hover {  border-color: transparent;	 background-color: #d30d25; color: #fff; }	
   
/* -------------------------------------------------- */
/*  Animation
/* -------------------------------------------------- */

/* Sequence Fullscreen */
	.animate-out .sequence-slogan {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-slogan {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: .5s;
				transition-delay: .5s;
	}

	.animate-out .sequence-text {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-text {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 1.1s;
				transition-delay: 1.1s;
	}

	.animate-out .sequence-button {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-button {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 1.6s;
				transition-delay: 1.6s;
	}
	
	/* Sequence with Extra Radius */
	
	.sequence-canvas .extra-radius {
		opacity: 0;
		
		-webkit-transition: -webkit-transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
				transition: transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
		-webkit-transform: scale(0);
				transform: scale(0);
	}
	
	.animate-out .extra-radius {
		opacity: 0;
		
		-webkit-transform: scale(0);
				transform: scale(0);
	}	
	
	.animate-in .extra-radius {
		opacity: 1;
		
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	
		.sequence-canvas .inner-content h2 {
			opacity: 0;

			-webkit-transition-duration: 0;
					transition-duration: 0;
			-webkit-transition-property: opacity, transform;
					transition-property: opacity, transform;
			-webkit-transition-timing-function: ease;
					transition-timing-function: ease;
			-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
		}
		
		.sequence-canvas .inner-content > h2:nth-child(1) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(2) {
			-webkit-transform: translateX(15px);
					transform: translateX(15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(3) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(4) {
			-webkit-transform: translateX(15px);
					transform: translateX(15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(5) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.animate-in .inner-content > h2:nth-child(1) { 
			-webkit-transition-delay: 1.1s;
					transition-delay: 1.1s;
			-webkit-transition-duration: .6s;  
					transition-duration: .6s;  
		}

		.animate-in .inner-content > h2:nth-child(2) { 
			-webkit-transition-delay: 1.8s;
					transition-delay: 1.8s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(3) { 
			-webkit-transition-delay: 2.4s;
					transition-delay: 2.4s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(4) { 
			-webkit-transition-delay: 3s;
					transition-delay: 3s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(5) { 
			-webkit-transition-delay: 3.6s;
					transition-delay: 3.6s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}
		
		.sequence-canvas .animate-in .inner-content > h2 { 
			opacity: 1;

			-webkit-transform: translateX(0);
					transform: translateX(0);
		}	
	
/* -------------------------------------------------- */
/*  Responsive
/* -------------------------------------------------- */

@media only screen and (max-width: 767px) {
    .sequence { padding-top:30px; background:#000}
	.sequence-extra,
    .sequence-content {margin-top:8%;}

	

	.sequence li > .sequence-entry { padding: 60px 30px 10px; }	
	
		.touch .sequence-theme .sequence-prev { left:  10px; }
		.touch .sequence-theme .sequence-next { right: 10px; }

		.sequence-theme:hover .sequence-prev { left:  10px; }
		.sequence-theme:hover .sequence-next { right: 10px; }
		
	.button {margin-top:15px;margin-bottom: 15px; padding:8px 15px 10px; outline: none;}
    .button.large {		padding: 10px 20px 12px;		font-size: 16px; line-height:16px;	}
	
	.sequence-theme .sequence-prev,
    .sequence-theme .sequence-next {top: 45%;}
	
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	
	#sequence {
		min-height: 250px;
		height: 250px;
	}
	
		#sequence li > .sequence-entry { padding: 0; }	
	
	.sequence-content .sequence-slogan { font-size: 35px; }
	.sequence-content .sequence-text   { font-size: 18px; line-height:28px }
	
	.sequence-content .sequence-slogan,
	.sequence-content .sequence-text {
		margin-bottom: 10px;
		line-height: 24px;
	}
	
} 

@media only screen and (max-width: 767px) and (orientation: portrait) {
	
	#sequence {
		min-height: 350px;
		height: 350px;
	}
	
		#sequence li > .sequence-entry { padding: 25px; }	
	
	.sequence-content .sequence-slogan { font-size: 35px; }
	.sequence-content .sequence-text   { font-size: 16px; }
	
	.sequence-content .sequence-slogan,
	.sequence-content .sequence-text {
		margin-bottom: 20px;
		line-height: 24px;
	}
	
} 


@media only screen and (max-width: 460px) {
	.sequence { padding-top:0px; }	
	.sequence li > .sequence-entry { padding: 130px 30px 10px; }	
	
		.touch .sequence-theme .sequence-prev { left:  10px; }
		.touch .sequence-theme .sequence-next { right: 10px; }

		.sequence-theme:hover .sequence-prev { left:  10px; }
		.sequence-theme:hover .sequence-next { right: 10px; }
		
	
	
	.sequence-theme .sequence-prev,
    .sequence-theme .sequence-next {top: 36%;}
	
}