body,
html,
.seq {
  /* Uncomment to make the theme full-screen */
  /* width: 100% !important; */
  /* max-width: 100% !important; */
  /* height: 100% !important; */
  /* max-height: 100% !important; */
}

.seq {
  position: relative;
  background-size: cover;
  /* Dimensions */
  height: 350px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.seq .seq-preloader {
  background:transparent;
}

.seq .seq-screen,
.seq .seq-canvas,
.seq .seq-canvas > * {
  /* Reset the canvas and steps for more browser consistency */
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  list-style: none;
}

.seq .seq-canvas > * {
  position: absolute;
}

.seq.seq-fallback {
  /* Fallback styles */
}

.seq.seq-fallback .seq-canvas {
  max-width: 1280px;
}

.seq.seq-fallback .seq-pagination li {
  position: relative;
}

.seq.seq-fallback .seq-pagination li img {
  border: none;
}

.seq.seq-fallback .seq-pagination li a {
  display: block;
  width: 100%;
  height: 100%;
}

.seq.seq-fallback .seq-next:focus,
.seq.seq-fallback .seq-next:hover,
.seq.seq-fallback .seq-prev:focus,
.seq.seq-fallback .seq-prev:hover,
.seq.seq-fallback .seq-pagination li:focus,
.seq.seq-fallback .seq-pagination li:hover {
  top: -4px;
}

.seq .seq-canvas {
  max-width: 1280px;
  position: relative;
  display: block;
  margin: 0 auto;
}

.seq .seq-nav,
.seq .seq-pagination {
  /* Hide navigation when JS is disabled */
  display: none;
}

.seq.seq-active .seq-nav {
  /* Show navigation and pagination if JS is enabled */
  display: block;
}

.seq .seq-nav {
  /* Styles for next/previous buttons and pagination */
  position: absolute;
  z-index: 9999;
  top: 50%;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  pointer-events: none;
  border: none;
}

.seq .seq-next,
.seq .seq-prev {
  position: absolute;
  top: 50%;
  margin-top: -33px;
  width: 35px;
  height: 66px;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Image replacement */
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
	opacity:0.3;
}

.seq .seq-next {
  right: 10px;
  background: url("../images/bt-next.png");
}

.seq .seq-next:focus,
.seq .seq-next:hover {
  -webkit-transform: translate3d(4px, 0, 0);
  -ms-transform: translate3d(4px, 0, 0);
  transform: translate3d(4px, 0, 0);
}

.seq .seq-prev {
  left: 10px;
  background: url("../images/bt-prev.png");
}

.seq .seq-prev:focus,
.seq .seq-prev:hover {
  -webkit-transform: translate3d(-4px, 0, 0);
  -ms-transform: translate3d(-4px, 0, 0);
  transform: translate3d(-4px, 0, 0);
}

.seq .seq-model,
.seq .seq-title {
  position: absolute;
}

.seq .seq-title {
  bottom: 8%;
  margin: 0 2.5%;
  width: 95%;
}

.seq .seq-model {
  top: 5%;
  height: 100%;
  width: 100%;
  /* Don't allow the image to exceed its original height */
  max-height: 220px;
}

.seq .seq-model img {
  /* Don't allow the image to exceed its original height */
  max-height:220px;
  display: block;
  height: 100%;
  width: auto;
  margin: 0 auto;
  opacity: 0;
  -webkit-transform: translate3d(-60px, 0, 0);
  -ms-transform: translate3d(-60px, 0, 0);
  transform: translate3d(-60px, 0, 0);
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-properties: transform, opacity;
  transition-properties: transform, opacity;
  -webkit-transition-timing-function: ease-out !important;
  transition-timing-function: ease-out !important;
}

.seq .seq-title br {
 /* display: none;*/
}

.seq .seq-title h2,
.seq .seq-title h3 {
  display: block;
  width: 100%;
  vertical-align: middle;
  text-align:center;
  margin: 0;
  opacity: 0;
  font-size: 28px;
  letter-spacing:-2px;
  font-weight:600;
  color:#fff;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-properties: opacity;
  transition-properties: opacity;
}

.seq .seq-title h2 {
  clear: left;  
}

.seq .seq-title h3 {
  float: left;
  font-size:20px;
  line-height:1.4em;
  font-weight:300;
}

.seq .seq-in {
  /* Animate in positions for content */
}

.seq .seq-in .seq-model img {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.seq .seq-in .seq-title h2,
.seq .seq-in .seq-title h3 {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.seq .seq-out {
  /* Animate out positions for content */
}

.seq .seq-out .seq-model img {
  -webkit-transform: translate3d(-60px, 0, 0);
  -ms-transform: translate3d(-60px, 0, 0);
  transform: translate3d(-60px, 0, 0);
  opacity: 0;
}

.seq .seq-out .seq-title h2,
.seq .seq-out .seq-title h3 {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media only screen and (min-width: 768px) {
  .seq {
    /* Make the container 16:9 but no bigger than 90% of the screen height */
    position: relative;
    height: auto;
    height: 100%;
    max-height: 280px;
    min-height: 280px;
    /* Move the background radial to the left */
    background-position: 50% 100%;
  }

  .seq:before {
    /* Make an element a certain aspect ratio */
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
  }

  .seq .seq-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .seq .seq-canvas > *:before {
    /* Vertically align the content using a :before element */
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  .seq .seq-model,
  .seq .seq-title {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2%;
  }

  .seq .seq-model {
  top:0;
    bottom:0;
    width: 40%;

  }

  .seq .seq-model img {
    margin-top:20px;
	height:260px;
    float: right;
    opacity: 0;
    -webkit-transform: translate3d(-60px, 0, 0);
    -ms-transform: translate3d(-60px, 0, 0);
    transform: translate3d(-60px, 0, 0);
    -webkit-transition-properties: transform, opacity;
    transition-properties: transform, opacity;
  }

  .seq .seq-title {
    bottom: 0;
    width: 50%;
  }

  .seq .seq-title h2,
  .seq .seq-title h3 {
    display: inline-block;
    width: auto;
    margin: 0;
    opacity: 0;
    text-align: left;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-properties: transform, opacity;
    transition-properties: transform, opacity;
  }

  .seq .seq-title h2 {
    -webkit-transform: translate3d(-120px, 0, 0);
    -ms-transform: translate3d(-120px, 0, 0);
    transform: translate3d(-120px, 0, 0);
  }

  .seq .seq-title h3 {
    display: block;
	font-size:24px;
    -webkit-transform: translate3d(120px, 0, 0);
    -ms-transform: translate3d(120px, 0, 0);
    transform: translate3d(120px, 0, 0);
  }

  .seq .seq-in {
    /* Animate in positions for content */
  }

  .seq .seq-in .seq-model img {
    -webkit-transform: translate3d(-60, 0, 0);
    -ms-transform: translate3d(-60, 0, 0);
    transform: translate3d(-60, 0, 0);
    opacity: 1;
  }

  .seq .seq-out {
    /* Animate out positions for content */
  }

  .seq .seq-out .seq-model img {
    -webkit-transform: translate3d(-120px, 0, 0);
    -ms-transform: translate3d(-120px, 0, 0);
    transform: translate3d(-120px, 0, 0);
  }
}


@media only screen and (min-width: 860px) {
  .seq .seq-model {
    margin-left: 10%;
    width:35%;
	max-height: 315px;
  }
  .seq .seq-model img {
	max-height:315px;
    margin-top:24px;
	height:315px;
  }
  .seq .seq-title {
    width: 48%;
    margin-right: 2%;
  }

  .seq .seq-title h2 { 
    font-size:42px;
  }
  .seq .seq-title h3 { 
    font-size:28px;
  }
  .seq .seq-title br {
    display: inline-block;
  }
}

@media only screen and (min-width: 1020px) {
  .seq .seq-model {
    margin-left: 5%;
    width: 32.5%;
  }

  .seq .seq-title {
    width: 49.5%;
    margin-right: 3%;
	letter-spacing:-3px;
  }
  .seq .seq-title h2 { 
    font-size:48px;
	letter-spacing:-3px;
  }
  .seq .seq-title h3 { 
    font-size:34px;
  }
}

@media only screen and (min-width: 1120px) {
  .seq .seq-model {
    margin-left: 0;
    width: 40%;
  }

  .seq .seq-title {
    width: 50%;
    margin-right: 0;
  }
  .seq .seq-title h2 { 
    font-size:54px;
  }
  .seq .seq-title h3 { 
    font-size:38px;
  }
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .seq {
    /* Apply Retina (@2x) Images */
  }

  .seq .seq-next {
    background: url("../images/bt-next@2x.png");
    background-size: 35px 66px;
  }

  .seq .seq-prev {
    background: url("../images/bt-prev@2x.png");
    background-size: 35px 66px;
  }
}