/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/modern-slide-in/

This is a FREE theme and is available under a MIT License:
http://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 - 2013 unless otherwise stated.
*/

/****** Edited by: DamterThemes ******/
/*
* Codelander - One Page Template
* Version: 1.3.3
* Copyright 2015
* Created by: damterthemes
* Website: http://www.damterthemes.com
* @damterthemes: https://wrapbootstrap.com/user/damterthemes
* Designed and built based on Twitter Bootstrap. 
*/

/* THEME STYLES */
@font-face { font-family: 'Lato'; src: url('../fonts/lato/lato-light-webfont.eot'); src: url('../fonts/lato/lato-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-light-webfont.woff') format('woff'), url('../fonts/lato/lato-light-webfont.ttf') format('truetype'), url('../fonts/lato/lato-light-webfont.svg#latolight') format('svg'); font-weight: normal; font-style: normal; }
.sequence-theme { /* this container is just to ensure the background color stretches all the way across on bigger screens */
background: #7392ae; }

/* #sequence */
#sequence { overflow: hidden; max-width: 2560px; background-color: #758595; background-image: url("../img/slides/home-slides/bg-slides-1920px.jpg"); background-repeat: no-repeat; background-position: center 100%; color: white; font-size: 0.625em; position: relative; width: 100%; height: 600px; }

/* .sequence-pagination, .controls */
#sequence .sequence-pagination,  #sequence .controls { position: absolute; bottom: 30px; z-index: 10; color: white; text-align: center; left: 0; width: 100%; }
#sequence .controls { bottom: 23px; width: auto; right: 30px; }
#sequence .sequence-pagination li,  #sequence .controls li { background-image: url("../img/slides/home-slides/rounded-pagination.png"); background-repeat: no-repeat; cursor: pointer; display: inline-block;  *display: inline;
text-indent: -99999px; opacity: 0.8; }
#sequence .sequence-pagination li:hover,  #sequence .controls li:hover { opacity: 1; }
#sequence .sequence-pagination li { background-position: 0 -8px; padding-right: 4px; height: 19px; width: 19px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); }
#sequence .sequence-pagination li.current { background-image: url("../img/slides/home-slides/rounded-pagination.png"); background-repeat: no-repeat; background-position: -22px -8px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
#sequence .controls li { height: 34px; width: 34px; padding-left: 5px; }
#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 { height: 96%; }
#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; }
.sequence-next, .sequence-prev { color: white; cursor: pointer; display: none; font-weight: bold; padding: 10px 0; position: absolute; top: 50%; z-index: 1000; margin-top: -47.5px; }
.sequence-pause { bottom: 0; cursor: pointer; position: absolute; z-index: 1000; }
.sequence-paused { opacity: 0.3; }
.sequence-prev { left: 0; }
.sequence-next { right: 0; }
.sequence-prev img, .sequence-next img { height: 100%; width: auto; }
#sequence-preloader { background: #d9d9d9; }
.sequence-pagination { bottom: 1%; display: none; right: 6%; 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: 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; }

/* .sequence-next, .sequence-prev */
.sequence-next, .sequence-prev { position: absolute; opacity: 1; -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-title */
.sequence-title { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 5em; text-transform: uppercase; left: 65%; width: 40%; opacity: 0; bottom: 1%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-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 .sequence-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; }

/* .sequence-subtitle */
.sequence-subtitle { font-family: 'Lato', sans-serif; font-weight: 300; color: #ffffff; font-size: 2em; left: 35%; width: 40%; opacity: 0; top: 97%; padding-right: 5%; }
.animate-in .sequence-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 .sequence-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; }

/* .sequence-p */
.sequence-p { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1em; text-transform: uppercase; left: 65%; width: 40%; opacity: 0; top: 110%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { 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 .sequence-p { 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; }
.sequence-btn { margin-left:10px; }

/* .web-browser */
.web-browser { left: 20%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 384px;
max-width: 384px; }
.animate-in .web-browser { left: 10%; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; }
.animate-out .web-browser { left: 10%; 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; }

/* .screens */
.screens { left: 20%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 378px;
max-width: 378px; }
.animate-in .screens { left: 10%; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; }
.animate-out .screens { left: 10%; 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; }

/* .tablet-iphone */
.tablet-iphone { left: 20%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 384px;
max-width: 384px; }
.animate-in .tablet-iphone { left: 10%; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; }
.animate-out .tablet-iphone { left: 10%; 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; }

/* Responsive */
@media screen and (max-width: 1110px) {
#sequence .sequence-title { width: 42%; font-size: 2.8em; }
.web-browser { left: 20%; bottom: -18%; opacity: 0; position: relative; height: auto !important; max-height: 530px !important; width: 100%; min-width: 284px;
max-width: 284px; }
.screens { left: 20%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 348px;
max-width: 348px; }
.tablet-iphone { left: 20%; bottom: -18%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 324px;
max-width: 324px; }
}

@media screen and (max-width: 979px) {
#sequence { height: 550px; }
#sequence .sequence-title { width: 42%; font-size: 2.5em; }
#sequence .btn { font-size: 1.5em; padding: 5px; }
.web-browser { left: 20%; bottom: -18%; opacity: 0; position: relative; height: auto !important; max-height: 530px !important; width: 100%; min-width: 254px;
max-width: 254px; }
.screens { left: 20%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 318px;
max-width: 318px; }
.tablet-iphone { left: 20%; bottom: -18%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 304px;
max-width: 304px; }
}

@media screen and (max-width: 874px) {
#sequence { height: 550px; }
#sequence .sequence-title { width: 42%; font-size: 2.5em; }
#sequence .btn { font-size: 1.2em; padding: 5px; }
.web-browser { left: 20%; bottom: -14%; opacity: 0; position: relative; height: auto !important; max-height: 530px !important; width: 100%; min-width: 214px;
max-width: 214px; }
.screens { left: 20%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 268px;
max-width: 268px; }
.tablet-iphone { left: 20%; bottom: -18%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 264px;
max-width: 264px; }
}

@media screen and (max-width: 769px) {
#sequence { height: 400px; }
#sequence .sequence-title { width: 35%; bottom: -2%; font-size: 2.5em; }
#sequence .sequence-subtitle { width: 35%; font-size: 1.6em; }
#sequence .sequence-next,  #sequence .sequence-prev { height: 60px; margin-top: -40px; }
#sequence .btn { font-size: 1.2em; padding: 5px; }
.web-browser { left: 10%; bottom: -15%; opacity: 0; position: relative; height: auto !important; max-height: 530px !important; width: 100%; min-width: 184px;
max-width: 184px; }
.animate-in .web-browser { left: 30%; margin-left: -20%; }
.animate-out .web-browser { left: 30%; margin-left: -20%; }
.screens { left: 10%; bottom: -20%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 238px;
max-width: 238px; }
.animate-in .screens { left: 30%; margin-left: -20%; }
.animate-out .screens { left: 30%; margin-left: -20%; }
.tablet-iphone { left: 10%; bottom: -15%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 224px;
max-width: 224px; }
.animate-in .tablet-iphone { left: 30%; margin-left: -20%; }
.animate-out .tablet-iphone { left: 30%; margin-left: -20%; }
}

@media screen and (max-width: 655px) {
#sequence { height: 340px; }
#sequence .sequence-title { width: 35%; bottom: -2%; font-size: 2.5em; }
#sequence .sequence-subtitle { width: 35%; font-size: 1.6em; }
#sequence .sequence-next,  #sequence .sequence-prev { height: 60px; margin-top: -40px; }
#sequence .btn { font-size: 1em; padding: 5px; }
.web-browser { left: 10%; bottom: -10%; opacity: 0; position: relative; height: auto !important; max-height: 530px !important; width: 100%; min-width: 184px;
max-width: 184px; }
.animate-in .web-browser { left: 28%; margin-left: -20%; }
.animate-out .web-browser { left: 28%; margin-left: -20%; }
.screens { left: 10%; bottom: -14%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 238px;
max-width: 238px; }
.animate-in .screens { left: 28%; margin-left: -20%; }
.animate-out .screens { left: 28%; margin-left: -20%; }
.tablet-iphone { left: 10%; bottom: -15%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 224px;
max-width: 224px; }
.animate-in .tablet-iphone { left: 28%; margin-left: -20%; }
.animate-out .tablet-iphone { left: 28%; margin-left: -20%; }
}
@media screen and (max-width: 650px) {
.sequence-p { text-transform: uppercase; left: 65%; width: 35%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 50%; }
.animate-out .sequence-p { left: 35%; }
}
@media only screen and (max-width: 568px) {
#sequence { height: 500px; }
.sequence-p { text-transform: uppercase; left: 28%; width: 60%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 28%; }
.animate-out .sequence-p { left: 28%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 39%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 39%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 39%; margin-left: -20%; }
#sequence .screens { left: 39%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 39%; margin-left: -20%; }
#sequence .animate-out .screens { left: 39%; margin-left: -20%; }
#sequence .tablet-iphone { left: 39%; min-width: 50%; width: 50%; bottom: -10%; }
#sequence .animate-in .tablet-iphone { left: 39%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 39%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 2em; text-align: center; }
#sequence .animate-in .sequence-title { left: 0%; }
#sequence .animate-out .sequence-title { left: -100%; }
#sequence .sequence-subtitle { visibility: hidden; }
#sequence .sequence-pagination { opacity: 0; visibility: hidden; }
#sequence .sequence-pagination li img { height: 100px; }
}
@media screen and (max-width: 550px) {
#sequence { height: 500px; }
.sequence-p { text-transform: uppercase; left: 28%; width: 60%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 28%; }
.animate-out .sequence-p { left: 28%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 37%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 37%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 37%; margin-left: -20%; }
#sequence .animate-out .screens { left: 37%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; bottom: -10%; }
#sequence .animate-in .tablet-iphone { left: 37%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 37%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -1%; }
#sequence .animate-out .sequence-title { left: -100%; }
}
@media screen and (max-width: 539px) {
#sequence { height: 500px; }
.sequence-p { text-transform: uppercase; left: 28%; width: 60%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 28%; }
.animate-out .sequence-p { left: 28%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 37%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 37%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 37%; margin-left: -20%; }
#sequence .animate-out .screens { left: 37%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 37%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 37%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -2%; }
#sequence .animate-out .sequence-title { left: -100%; }
}
@media screen and (max-width: 525px) {
#sequence { height: 500px; }
.sequence-p { text-transform: uppercase; left: 28%; width: 60%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 28%; }
.animate-out .sequence-p { left: 28%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 37%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 37%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 37%; margin-left: -20%; }
#sequence .animate-out .screens { left: 37%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 37%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 37%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -2%; }
#sequence .animate-out .sequence-title { left: -100%; }
}
@media screen and (max-width: 430px) {
#sequence { height: 400px; }
.sequence-p { text-transform: uppercase; left: 20%; width: 80%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 20%; }
.animate-out .sequence-p { left: 20%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 34%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 34%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 34%; margin-left: -20%; }
#sequence .animate-out .screens { left: 34%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -2.5%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 390px) {
#sequence { height: 400px; }
.sequence-p { text-transform: uppercase; left: 20%; width: 80%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 20%; }
.animate-out .sequence-p { left: 20%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 34%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 34%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 34%; margin-left: -20%; }
#sequence .animate-out .screens { left: 34%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.5em; text-align: center; }
#sequence .animate-in .sequence-title { left: -3.3%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 370px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 20%; width: 80%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 20%; }
.animate-out .sequence-p { left: 20%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 34%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 34%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 34%; margin-left: -20%; }
#sequence .animate-out .screens { left: 34%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -3.8%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 355px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 10%; width: 90%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 10%; }
.animate-out .sequence-p { left: 10%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 34%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 34%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 34%; margin-left: -20%; }
#sequence .animate-out .screens { left: 34%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -4.1%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 340px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 15%; width: 100%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 15%; }
.animate-out .sequence-p { left: 15%; }
.sequence-btn { margin-left:0; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 34%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 34%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 34%; margin-left: -20%; }
#sequence .animate-out .screens { left: 34%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -4.3%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 333px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 27%; width: 50%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 27%; }
.animate-out .sequence-p { left: 27%; }
.sequence-btn { margin-left:0; }
#sequence .btn { margin-top:5px; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 34%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 34%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 34%; margin-left: -20%; }
#sequence .animate-out .screens { left: 34%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 34%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -5.5%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 320px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 27%; width: 50%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 22%; }
.animate-out .sequence-p { left: 22%; }
.sequence-btn { margin-left:0; }
#sequence .btn { margin-top:5px; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 31%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 31%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 31%; margin-left: -20%; }
#sequence .animate-out .screens { left: 31%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 31%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 31%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -6.8%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 255px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 27%; width: 50%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 20%; }
.animate-out .sequence-p { left: 20%; }
.sequence-btn { margin-left:0; }
#sequence .btn { margin-top:5px; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 31%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 31%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 31%; margin-left: -20%; }
#sequence .animate-out .screens { left: 31%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 31%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 31%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -7.8%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media screen and (max-width: 239px) {
#sequence { height: 350px; }
.sequence-p { text-transform: uppercase; left: 27%; width: 50%; opacity: 0; top: 115%; z-index: 50; padding-right: 5%; }
.animate-in .sequence-p { left: 18%; }
.animate-out .sequence-p { left: 18%; }
.sequence-btn { margin-left:0; }
#sequence .btn { margin-top:5px; }
#sequence .web-browser { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .web-browser { left: 29%; margin-left: -20%; }
#sequence .animate-out .web-browser { left: 29%; margin-left: -20%; }
#sequence .screens { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .screens { left: 29%; margin-left: -20%; }
#sequence .animate-out .screens { left: 29%; margin-left: -20%; }
#sequence .tablet-iphone { left: 10%; min-width: 50%; width: 50%; }
#sequence .animate-in .tablet-iphone { left: 29%; margin-left: -20%; }
#sequence .animate-out .tablet-iphone { left: 29%; margin-left: -20%; }
#sequence .sequence-title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; margin-left: -7%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; font-size: 1.2em; text-align: center; }
#sequence .animate-in .sequence-title { left: -10%; }
#sequence .animate-out .sequence-title { left: -100%; }
}

@media (min-width: 1920px) and (max-width: 2560px) {
#sequence { background-image: url("../img/slides/home-slides/bg-slides-2560px.jpg"); background-repeat: no-repeat; background-position: center 100%; color: white; position: relative; width: 100%; height: 600px; }