.sequence-theme {   /* this container is just to ensure the background color stretches all the way across on bigger screens */  } .sequence-theme{ }  #sequence { max-width: 1200px;  margin-top:25px; display:block;  margin-right:auto; margin-left:auto;   position: relative;   overflow: hidden;   width: 100%;   float:none;    background-position: 50% 100%;   color: white;     position: relative;   height: 450px; } #sequence > .sequence-canvas {   height: 100%;      } #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 right and opacity properties to transition */   -webkit-transition-property: right, opacity;   -moz-transition-property: right, opacity;   -ms-transition-property: right, opacity;   -o-transition-property: right, opacity;   transition-property: right, opacity; }  .sequence-next, .sequence-prev {   color: white;   cursor: pointer;   display: none;   font-weight: bold;   position: absolute;   top: 50%;   z-index: 1000;   height: 51px;width:51px;   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 {    }  .sequence-pagination {   bottom: 5%;   right: 46%;   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 .paginationslider  { background: url(http://m1.sdimgs.com/sd_static/a/168410/dots.png?v=20141016093302) top left no-repeat; display:block; margin-left:7px; margin-right:5px; float:left; cursor:pointer;	 	width: 18px; 	height: 16px; 	transition: all .3s; -moz-transition: all .3s;  -webkit-transition:all .3s;  -o-transition: all .3s;    } .sequence-pagination .paginationslider:hover {   background: url(http://m1.sdimgs.com/sd_static/a/168410/dots.png?v=20141016093302) bottom left no-repeat; 	transition: all .3s; -moz-transition: all .3s;  -webkit-transition:all .3s;  -o-transition: all .3s;  } .sequence-pagination li.current img {   opacity: 1; }    .sequence-next, .sequence-prev { margin-top:-2%;   position: absolute;   opacity: 0.2;   -webkit-transition-duration: 1s;   -moz-transition-duration: 1s;   -ms-transition-duration: 1s;   -o-transition-duration: 1s;   transition-duration: 1s; }  .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; } .sequence-theme h2{ color:#242424; font-size:31px; text-transform:uppercase; font-family:Myriad Pro; }  .sequence-theme h3{ font-family:oswald, "bebas neue"; color:#eee1d1; font-size:24px; text-transform:uppercase; } .sequence-theme p{ color:#878787; font-size:14px; } .sequence-theme p span{ color:#f9c68a; }     .title {   right: 65%;   width: 42%;   opacity: 0;   bottom: 20%;   z-index: 50; }  .animate-in .title {   right: 53%;   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 {  right: 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; }  .subtitle {     right: 35%;   width: 35%;   opacity: 0;   top: 80%; }  .animate-in .subtitle {  right: 45%;   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 {   right: 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; }  .subtitle1 {    right: 35%;   width: 40%;   opacity: 0;   top: 93%; }  .animate-in .subtitle1 {  right: 55%;   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 .subtitle1 {   right: 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; }     .buttonslider {    right: 65%;   width: 55%;   opacity: 0;   top: 115%; }  .animate-in .buttonslider {  right: 43%;   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 .buttonslider {   right: 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 {   right: 30%;   bottom: -31%;   opacity: 0;   position: relative;   height: auto !important;   max-height: 365px;   width: auto;     /* prevents the model from shrinking when the browser is resized */ }  .animate-in .model {   right: 5%;   opacity: 1;   -webkit-transition-duration: 1s;   -moz-transition-duration: 1s;   -ms-transition-duration: 1s;   -o-transition-duration: 1s;   transition-duration: 1s; }  .animate-out .model {   right: 25%;   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: 1200px) {  .title {   right: 75%;   width: 42%;   opacity: 0;   bottom: 20%;   z-index: 50; } .animate-in .title {   right: 56%;   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;   text-align:left; }  .animate-out .title {  right: 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;   font-family:Myriad Pro;   text-align:left; }    .subtitle1 {    right: 35%;   width: 40%;   opacity: 0;   top: 83%; }  .animate-in .subtitle1 {  right: 58%;   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 .subtitle1 {   right: 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; }     .sequence-pagination {  right: 47%; }  }     @media only screen and (max-width: 838px) {   #sequence {     height: 550px;   }   #sequence .model {   width: auto;   }  .sequence-pagination { right: 45%; }   } @media only screen and (max-width: 768px) {   #sequence {     height: 500px;   }   #sequence .title {     font-size: 2.8em;   }   #sequence .subtitle {     font-size: 1.6em;   }   #sequence .sequence-next,   #sequence .sequence-prev {         margin-top: -40px;   }   #sequence .model {       width: auto;   } } @media only screen and (max-width: 700px) {   #sequence .model {     right: 50%;     min-width: 60%;     /*prevents the model from shrinking when the browser is resized*/     width: 90%;   }   #sequence .animate-in .model {     right: 15%;       }   #sequence .animate-out .model {     right: 50%;       }   #sequence .title {     background: #a1a1a1;     background: rgba(0, 0, 0, 0.3);         left: 0%;     padding: 4%;     bottom: -45%;     width: 100%;     z-index: 10;    }   #sequence .animate-in .title {     right: 0%;   }   #sequence .animate-out .title {     right: -100%;   }   #sequence .subtitle {     visibility: hidden;   }   #sequence .subtitle1 {     visibility: hidden;   }   #sequence .buttonslider {     visibility: hidden;   }    #sequence .sequence-pagination {     bottom: 2%; left:2%;   }      #sequence .sequence-pagination li img {   width:auto;   } }   @media only screen and (max-width: 518px) {   #sequence {     height: 450px;   } } @media only screen and (max-width: 468px) {   #sequence {     height: 415px;   }   #sequence .sequence-pagination {      } } @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;   } }