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

Theme: Modern Slide In
Version: 1.3
Theme 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.
*/

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

#sequence {
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 width: 100%;
 max-width: 1280px;
 background-repeat: no-repeat;
 background-position: 50% 100%;
 color: white;
 font-size: 0.625em;
 margin: 0 auto;
 position: relative;
 height: 470px;
 top: 120px;
}
#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;
 /* 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;
 cursor: default;
}

#sequence > .sequence-canvas li span{
 cursor: default;
}

.sequence-next,
.sequence-prev {
 color: white;
 cursor: pointer;
 display: none;
 font-weight: bold;
 padding: 10px 15px;
 position: absolute;
 top: 20%;
 z-index: 1000;
 height: 75px;
}

.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 {
 background: #E9E9E9;
}

.sequence-pagination {
 bottom: 10%;
 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;
 /* Hack for IE7 and below as they don't support inline-block */
 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;
 margin-left: 10px;
}
.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;
}

h2 {
 color: white;
 font-family: "Sirin Stencil", serif;
 font-weight: bold;
 text-transform: uppercase;
}

h3 {
 font-family: "Ruluko", serif;
}

.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;
}

.title {
 font-size: 3.4em;
 left: 65%;
 width: 35%;
 opacity: 0;
 bottom: 1%;
 z-index: 50;
}

.animate-in .title {
 left: 50%;
 top: 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 .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 {
 font-size: 2em;
 left: 35%;
 width: 35%;
 opacity: 0;
 top: 70%;
 font-family: serif;
 letter-spacing: 0.2em;
	color: #2f1a04;
}

.animate-in .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 .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 {
 left: 20%;
 top: 235px;
 opacity: 0;
 position: relative;
 height: auto !important;
 width: 350px;
}

.animate-in .model {
 left: 10%;
 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 .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 only screen and (max-width: 979px) {
#sequence {
 top: 80px;
 height: 430px;
}
.model{
 top: 215px;
}
.animate-in .title{
 left: 50%;
 font-size: 2.5rem;
}
.animate-in .subtitle{
 font-size: 1.8rem;
 left: 50%;
}
.sequence-pagination{
 bottom: 10px;
}

}

@media only screen and (max-width: 899px) {
.sequence-pagination{
 visibility: hidden;
}

}

@media only screen and (max-width: 768px) {
#sequence {
 top: 55px;
 height: 380px;
}
#sequence .model {
 left: 0;
 top: 215px;
 max-height: 300px !important;
 width: 300px;
}
.animate-in .title{
 left: 42%;
 top: 60%;
 font-size: 2.5rem;
}
.animate-in .subtitle{
 left: 42%;
 top: 75%;
 width: 45%;
 font-size: 1.6rem;
}
.sequence-pagination{
 bottom: -90px;
}

}

@media only screen and (max-width: 767px) {
#sequence {
 top: 0;
 height: 175px;
}
#sequence .model {
 top: 65px;
 max-height: 200px !important;
 width: 200px;
}
.animate-in .title{
 left: 35%;
 top: 50%;
 font-size: 2rem;
}
.animate-in .subtitle{
 left: 35%;
 top: 75%;
 font-size: 1.4rem;
}
.sequence-pagination{
 visibility: hidden;
}

}

@media only screen and (max-width: 600px) {
.animate-in .title{
 top: 50%;
 left: 40%;
 font-size: 1.7rem;
}
.animate-in .subtitle{
 left: 40%;
 font-size: 1.3rem;
}

}

@media only screen and (max-width: 500px) {
.sequence-theme{
 position: relative;
 top: 0;
 background: #fff;
 border-bottom: 1px solid #eacb01;
 padding-bottom: 10px;
}
#sequence {
 height: 200px;
}
#sequence .model {
 min-width: 100%;
 width: 100%;
}
#sequence .title{
 display: inline-block;
 top: 115%;
 width: 100%;
 margin-left: -50%;
 font-size: 18px;
 font-size: 1.8rem;
}
#sequence .title span{
 background: #EACB01;
 padding: 1% 2% 3%;
 color: #fff;
}  
#sequence .subtitle{
 position: relative;
 top: 120%;
 z-index: 1000;
 width: 100%;
 height: 70px;
 background: #fff;
 margin-left: -50%;
 padding: 1% 2% 2% 2%;
 color: #555;
}
#sequence > .sequence-canvas{
 background: #fff;
}

}

@media only screen and (max-width: 500px) {
#sequence{
 height: 300px;
}
#sequence .title{
 top: 115%;
 margin-left: -40%;
}
#sequence .subtitle{
 top: 125%;
 margin-left: -40%;
 padding: 2%;
 font-size: 1.2rem;
}
#sequence .model{
 height: 300px;
 max-height: 300px !important;
}
#sequence .animate-in .model {
 margin-left: 0;
 left: 0;
 z-index: 0;
}
#sequence .animate-out .model {
 margin-left: 0;
 z-index: 0;
}
.box_menu_sp h2{
 padding-top: 0;
}

}