/* !CSS RESET */
/* prefix declarations */
/* THEME STYLES */


/* this container is just to ensure the background color stretches all the way across on bigger screens */
.sequence-theme { 
width: 100%;
height: auto;
border-bottom: 1px solid rgba(191,191,191,1);
background: url(images/slider-bg.jpg) no-repeat center;
background-size: cover; }

#sequence {
position: relative;
width: 100%;
max-width: 1220px;
height: 250px;
margin: 0 auto;
overflow: hidden;

/*background: #33CC66;*/ }

#sequence > .sequence-canvas {
height: 100%;
width: 100%; }

#sequence > .sequence-canvas > li {
position: absolute;
top: -60%;
width: 100%;
height: 100%;
z-index: 1; }

#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 {
display: none;
position: absolute;
top: 40%;
width: 25px;
height: 50px;
z-index: 1000;
cursor: pointer;

/*background: #FFCC00;*/ }

.sequence-prev {
left: 0; }

.sequence-next {
right: 0; }

.sequence-prev img, .sequence-next img {
width: auto;
height: 100%; }

.sequence-next, .sequence-prev {
position: absolute;
opacity: 0.8;
-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; }

.title {
left: 65%;
width: 35%;
padding: 10px 20px 12px;
opacity: 0;
bottom: -10%;
z-index: 50;
border-radius: 4px;
background: rgba(255,255,255,1);
color: rgba(95,105,160,1);
font: 400 2em/1em "Russo One", Play, Arial, Helvetica, sans-serif; }

.title-2 {
    bottom: -20%;
}

.title span {
    display: block;
    margin-bottom: 15px;
    color: rgba(254,0,2,1);
    font: 700 1.500rem/1 Play, Arial, Helvetica, sans-serif;
}

.animate-in .title {
left: 48%;
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 {
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; }

.subtitle {
position: relative;
left: 35%;
top: 120%;
width: auto;
padding: 5px 10px 5px 60px;
opacity: 0;
border-radius: 5px;
background: rgba(255,255,255,1);
color: rgba(254,0,2,1);
font-weight: 700;
font-size: 1.4em;

/*background: #FF9999;*/ }

.subtitle-2 {
    top: 130%;
}

.subtitle span {
position: absolute;
top: -8px;
left: -8px;
width: 50px;
height: 50px;
background: url(images/ico-rubl.png) no-repeat center;
}

.animate-in .subtitle {
left: 48%;
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 {
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 {
position: relative;
left: 30%;
bottom: -70%;
opacity: 0;
width: 30%;
min-width: 225px;
/* prevents the model from shrinking when the browser is resized */
/*max-width: 266px;*/
height: auto !important;
max-height: 300px !important;

/*background: #FF9999;*/ }

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


@media all and (min-width: 768px) and (max-width: 1024px) {
#sequence .model {
left: 50%;
bottom: -35%;
width: 40%; }

#sequence .animate-in .model {
left: 25%;
margin-left: -20%; }

#sequence .animate-out .model {
left: 25%;
margin-left: -20%; }

#sequence .title {
font-size: 1.8em }
}


@media all and (min-width: 480px) and (max-width: 768px) {
#sequence .model {
left: 50%;
bottom: -35%;
width: 40%; }

#sequence .animate-in .model {
left: 25%;
margin-left: -20%; }

#sequence .animate-out .model {
left: 25%;
margin-left: -20%; }

#sequence .title {
font-size: 1.8em }
}


@media all and (max-width: 480px) {
#sequence .model {
left: 50%;
bottom: -23%;
width: 80%; }

#sequence .animate-in .model {
left: 20%;
margin-left: -20%; }

#sequence .animate-out .model {
left: 20%;
margin-left: -20%; }

#sequence .title {
left: 100%;
bottom: -51%;
width: 100%;
padding: 4%;
z-index: 10;
font-size: 1.6em }

#sequence .animate-in .title {
left: -12%; }

#sequence .animate-out .title {
left: -100%; }

#sequence .subtitle {
visibility: hidden; }
}