/*
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.1
* Copyright 2014
* URL: https://wrapbootstrap.com/user/damterthemes
* Designed and built based on Twitter Bootstrap 3. 
*/

/* THEME STYLES */
.sequence-theme { /* this container is just to ensure the background color stretches all the way across on bigger screens */
    background:#ffea00; }

/* #sequence */
#sequence { background-image:url(/images/bg.png); overflow: hidden; max-width: 2560px; background-repeat: repeat-x; background-position: center 100%; color: white; font-size: 0.625em; position: relative; width: 100%; height: 475px; }

/* .sequence-pagination, .controls */
#sequence .sequence-pagination,  #sequence .controls { position: absolute; bottom: 20px; z-index: 10; color: white; width: 100%;     left: 50%;
    margin-left: -50px;}
#sequence .controls { bottom: 23px; width: auto; right: 30px; }
#sequence .sequence-pagination li,  #sequence .controls li { background-image: url("/images/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: 0 1px; 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("/images/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: 86%; border: 10px solid #fff; border-radius:10px;}
#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: -96px; }
.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: 0.6; -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 {text-shadow: 1px 1px 2px #342719; letter-spacing: 1px; margin-left:30px; top: 270px; font-family:'HelveticaNeueCyr', 'Open Sans', sans-serif; font-weight: bold; font-size:6em; left: 65%; width: 450px; opacity: 0; bottom: 1%; z-index: 50; padding-right: 5%; color:#c32628}
.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 {   line-height: 1.3; margin-left:30px; font-family:'HelveticaNeueCyr', 'Open Sans', sans-serif; font-weight: 300; color: #3e3e3e; font-size: 2.5em; left: 35%; width: 385px; opacity: 0; top: 100%; 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 { margin-top: 70px; font-family: 'Open Sans', 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: -34%; opacity: 0; position: relative; height: auto !important; max-height: 568px !important; width: 100%; min-width: 384px;
               max-width: 460px; }
.animate-in .web-browser { left: 50%; margin-left:-565px; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; 
border: 5px solid #8aabce;}
@media only screen and (max-width: 1024px){
	.animate-in .web-browser {
	    margin-left: -485px;
	}
	.sequence-title{
	    margin-left: 10px;
	    font-size:5.5em;
	}
	.sequence-subtitle {
	    margin-left: 10px;
	}
	.web-browser{
	    max-width: 440px;
	}
}
.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: 1024px) {
    #sequence .sequence-title { width: 42%;}
    .web-browser { left: 20%; /*bottom: -18%;*/ opacity: 0; position: relative; height: auto !important; max-height: 400px !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 (min-width: 1920px) and (max-width: 2560px) {
    #sequence {  background-position: center 100%; color: white; position: relative; width: 100%;  }
}