#sequence {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1280px;
  height: 600px;
}
#sequence > .sequence-canvas {height: 100%;width: 100%}
#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: -50%;
}
#sequence > .sequence-canvas > li img {top:58%;margin-left: -30px}
#sequence > .sequence-canvas li > * {
  position: absolute;
  -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}
.title{left:65%;width:35%;opacity:0;bottom:25%;z-index:50}
.subtitle{color: black;left: 35%;width: 35%;opacity:0;top:86%}

		.sequence-pagination {
		  bottom: 1%;
		  display: none;
		  right: 1px;
		  position: absolute;
		  z-index: 10;
		  -webkit-transition-duration: 0.5s;
		  -moz-transition-duration: 0.5s;
		  -ms-transition-duration: 0.5s;
		  -o-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}
		.sequence-pagination li {
		  display: inline-block;*display: inline;
		  height: 95px;
		  border-right: dotted 1px #ededed;
		  padding-right: 10px
		}
		.sequence-pagination li img {
		  cursor: pointer;
		  max-height:70px;
		  opacity: 0.5;
		  -webkit-transition-duration: 1s;
		  -moz-transition-duration: 1s;
		  -ms-transition-duration: 1s;
		  -o-transition-duration: 1s;
		  transition-duration: 1s;
		  -webkit-transition-property: margin-bottom, opacity;
		  -moz-transition-property: margin-bottom, opacity;
		  -ms-transition-property: margin-bottom, opacity;
		  -o-transition-property: margin-bottom, opacity;
		  transition-property: margin-bottom, opacity;
		}
		
.sequence-pagination li.current img {opacity: 1}
		
		.animate-in .title {
		  left: 50%;
		  opacity: 1;
		  -webkit-transition-duration: 0.5s;
		  -moz-transition-duration: 0.5s;
		  -ms-transition-duration: 0.5s;
		  -o-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}
		
		.animate-out .title {
		  left: 35%;
		  opacity: 0;
		  -webkit-transition-duration: 0.5s;
		  -moz-transition-duration: 0.5s;
		  -ms-transition-duration: 0.5s;
		  -o-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}
		
		.animate-in .subtitle {
		  left: 50%;
		  opacity: 1;
		  -webkit-transition-duration: 0.5s;
		  -moz-transition-duration: 0.5s;
		  -ms-transition-duration: 0.5s;
		  -o-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}
		
		.animate-out .subtitle {
		  left: 65%;
		  opacity: 0;
		  -webkit-transition-duration: 0.5s;
		  -moz-transition-duration: 0.5s;
		  -ms-transition-duration: 0.5s;
		  -o-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}
		
		.img-xl {
		  left: 5%!important;
		  bottom: -48%;
		  opacity: 0;
		  position: relative;
		  height: auto !important;
		  width: 45%;
		}
		
		.animate-in .img-xl {
		  left: 15%;
		  opacity: 1;
		  -webkit-transition-duration: 1s;
		  -moz-transition-duration: 1s;
		  -ms-transition-duration: 1s;
		  -o-transition-duration: 1s;
		  transition-duration: 1s;
		}
		
		.animate-out .img-xl {
		  left: 15%;
		  opacity: 0;
		  -webkit-transition-duration: 0.5s;
		  -moz-transition-duration: 0.5s;
		  -ms-transition-duration: 0.5s;
		  -o-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}
		
@media only screen and (min-width: 992px) {
  #sequence .title {
	width: 42%;
  }
}
@media only screen and (max-width: 838px) {
  #sequence {
	height: 550px;
  }
  #sequence .img-xl {
	top: 340px;
	margin-left: -65px;
	width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  #sequence {
	height: 500px;
  }
  #sequence .img-xl {
	top: 280px;
	margin-left: -65px;
	width: 50%;
  }
  .title{text-align:center;margin-left:25px}
  .subtitle{font-size:15px;margin-left:25px}
}
@media only screen and (max-width: 568px) {
  #sequence .img-xl {
	top:60%!important;
	margin-left: -10px!important;
	width: 72%;
  }
  #sequence .animate-in .img-xl{left: 50%}
  #sequence .animate-out .img-xl {
	left: 50%;
	margin-left: -20%;
  }
  #sequence .title {
	font-family:'robotolight';
	text-align:left;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
	background: #a1a1a1;
	background: rgba(0, 0, 0, 0.3);
	bottom: 0;
	left: 100%;
	padding: 4%;
	bottom: -50%;
	width: 100%;
	z-index: 10;
  }
  #sequence .animate-in .title {
	left: 0%;
  }
  #sequence .animate-out .title {
	left: -100%;
  }
  #sequence .subtitle {
	visibility: hidden;
  }
  #sequence .sequence-pagination {display:none!important}
  #sequence .sequence-pagination li img {
	height: 100px;
  }
}
@media only screen and (max-width: 518px) {
  #sequence {
	height: 450px;
  }
}
@media only screen and (max-width: 468px) {
  #sequence {
	height: 415px;
  }
  #sequence .sequence-pagination {
	opacity: 0;
	visibility: hidden;
  }
}
@media only screen and (max-width: 418px) {
  #sequence {
	height: 375px;
  }
}
@media only screen and (max-width: 368px) {
  #sequence {
	height: 325px;
  }
  #sequence .title {
	font-size: 2.2em;
  }
}
@media only screen and (max-width: 320px) and (orientation: portrait) {
  #sequence {
	height: 320px;
  }
  #sequence .img-xl {
	min-width: 45%;
	width: 45%;
  }
  #sequence .animate-in .img-xl {
	margin-left: -22.5%;
  }
  #sequence .animate-out .img-xl {
	margin-left: -22.5%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
  #sequence {
	height: 260px;
  }
  #sequence .img-xl {
	min-width: 24%;
	width: 24%;
  }
  #sequence .animate-in .img-xl {
	left: 17.5%;
	margin-left: 0;
  }
  #sequence .animate-out .img-xl {
	left: 17.5%;
	margin-left: 0;
  }
  #sequence .sequence-pagination {
	right: 17.5%;
  }
}