.sequence-theme {}


#sequence { margin: 0 auto; position: relative; overflow: hidden; width: 100%; max-width: 1280px;color: white; height: 600px; }

#sequence > .sequence-canvas {
	height: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#sequence > .sequence-canvas > li {

  position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: -50%;

}

#sequence > .sequence-canvas > li img {

  height: 96%;

}

#sequence > .sequence-canvas li > * {

  position: absolute;

  /* only cause the left and opacity properties to transition */

  -webkit-transition-property: left, opacity;

  -moz-transition-property: left, opacity;

  -ms-transition-property: left, opacity;

  -o-transition-property: left, opacity;

  transition-property: left, opacity;

}



.sequence-next,

.sequence-prev {

  color: white;

  cursor: pointer;

  display: none;

  font-weight: bold;

  padding: 10px 15px;

  position: absolute;

  top: 50%;

  z-index: 1000;

  height: 75px;

  margin-top: -47.5px;

}



.sequence-pause {

  bottom: 0;

  cursor: pointer;

  position: absolute;

  z-index: 1000;

}



.sequence-paused {

  opacity: 0.3;

}



.sequence-prev {

  left: 3%;

}



.sequence-next {

  right: 3%;

}



.sequence-prev img,

.sequence-next img {

  height: 100%;

  width: auto;

}



#sequence-preloader {

  background: #d9d9d9;

}



.sequence-pagination {

  bottom: 0%;

  display: none;

  right: 15%;

  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;

  /* Hack for IE7 and below as they don't support inline-block */

  height: 140px;

}

.sequence-pagination li img {

  cursor: pointer;

  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 img:hover {

  margin-bottom: 4px;

  -webkit-transition-duration: 0.3s;

  -moz-transition-duration: 0.3s;

  -ms-transition-duration: 0.3s;

  -o-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.sequence-pagination li.current img {

  opacity: 1;

}


p.seq-subtitle a:link, p.seq-subtitle a:visited{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 6px;
	padding-right: 0.3em;
	padding-left: 0.3em;
	background-color: #b1d474;
	padding-bottom: 0.1em;
	text-shadow: none;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	font-style: italic;
	font-size: 16px;
	color: #fff;
}



 

p.seq-subtitle a:hover, p.seq-subtitle a:focus, p.seq-subtitle a:active {
	color: #34495e;
	background-color: #EDEDED;
	text-decoration: none;
	padding-right: 0.3em;
	padding-left: 0.3em;
	padding-bottom: 0.1em;
	text-shadow: none;
}

h2.seq-title { left: 65%; width: 40%; opacity: 0; bottom: 1%; z-index: 50; color: #34495e;
	font-weight: 400;font-size: 3em;font-size: 4vw;}

.sequence-next,

.sequence-prev { position: absolute; opacity: 0.6; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; z-index: 900; 

}



.sequence-next:hover,

.sequence-prev:hover {

  opacity: 1;

  -webkit-transition-duration: 1s;

  -moz-transition-duration: 1s;

  -ms-transition-duration: 1s;

  -o-transition-duration: 1s;

  transition-duration: 1s;

}







.animate-in .seq-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 .seq-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;
}



p.seq-subtitle {
	color: #34495e;
	font-weight: 400;
	left: 35%;
	width: 35%;
	opacity: 0;
	top: 101%;
	z-index: 50;
	font-size: 18px;	
}



.animate-in .seq-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 .seq-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;

}



.model { left: 30%; bottom: -48%; opacity: 0; position: relative; height: auto !important;/* [disabled]max-height: 568px !important; */ width: 30%; min-width: 225px; /* prevents the model from shrinking when the browser is resized */ max-width: 300px; }



.animate-in .model {

  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 .model {

  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 .seq-title {

    width: 42%;
	 
  }

	.sequence-pagination {right:25%}
	

}
@media only screen and (min-width:839px and max-width:991 ) {

  

	.sequence-pagination {right:20%}
	

}



@media only screen and (max-width: 838px) {

  #sequence {

    height: 550px;

  }
	
	 


  #sequence .model {

    max-height: 530px !important;

    width: auto;

  }
	.sequence-pagination {right:12%}

}

@media only screen and (max-width: 768px) {

  #sequence {height: 500px;}

  #sequence .seq-title {  }

  #sequence .seq-subtitle { position: relative; }

  #sequence .sequence-next,

  #sequence .sequence-prev {

    height: 60px;

    margin-top: -40px;

  }

  #sequence .model {

    max-height: 480px !important;

    width: auto;}

	
 #sequence .sequence-pagination { opacity: 0; visibility: hidden;   }
	

 

}

@media only screen and (max-width: 568px) {

  #sequence .model {

    left: 50%;

    min-width: 40%;

    /*prevents the model from shrinking when the browser is resized*/

    width: 40%;

  }

  #sequence .animate-in .model {

    left: 40%;

    margin-left: -40%;

  }

  #sequence .animate-out .model {

    left: 40%;

    margin-left: -40%;

  }

  #sequence .seq-title {
	background: #a1a1a1;
	background: rgba(0, 0, 0, 0.2);
	bottom: 0;
	left: 50%;
	bottom: -50%;
	width: 91%;
	z-index: 10;
	padding: 4%;
	margin-left: 0.8em;
	margin-right: 0.8em;
	font-size:1.5em;
  }

  #sequence .animate-in .seq-title {

    left: -10px;

  }

  #sequence .animate-out .seq-title {

    left: -100%;

  }

  #sequence .seq-subtitle { visibility: hidden;   }

  #sequence .seq-subtitle a{ visibility: visible !important; position: absolute; top: 40px; right: 0px; }

  #sequence .sequence-pagination {

    bottom: 40px;

  }

  #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; }

  .seq-title {padding-top:100px; }

}

@media only screen and (max-width: 418px) {

  #sequence {

    height: 375px;

  }

}

@media only screen and (max-width: 368px) {

  #sequence {

    height: 325px;

  }

  #sequence .seq-title { font-size: 1.5em;  }

}

@media only screen and (max-width: 320px) and (orientation: portrait) {

  /*iphone portrait*/

  #sequence {

    height: 320px;

  }

  #sequence .model {

    min-width: 45%;

    width: 45%;

  }

  #sequence .animate-in .model {

    margin-left: -22.5%;

  }

  #sequence .animate-out .model {

    margin-left: -22.5%;

  }

}

@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {

  #sequence {

    height: 260px;

  }

  #sequence .model {

    min-width: 24%;

    width: 24%;

  }

  #sequence .animate-in .model {

    left: 0%;

    margin-left: 0;

  }

  #sequence .animate-out .model {

    left: 0%;

    margin-left: 0;

  }

  #sequence .sequence-pagination {

    right: 17.5%;

  }

}