/*
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.
*/

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content: '';content: none;}
table{border-collapse:collapse; border-spacing:0;}

#sequence {margin-top:10px; float:left; position:relative; overflow:hidden; width:100%; height:600px;}
.model{left:20%; bottom:-50%; opacity:0; position:relative; width:20%; height:auto; margin-bottom:50px; border:#999 ridge 4px;}
#sequence li{top:-50%;}                         /*---adjust main image position---*/
#sequence li img{height:85%; width:auto;}       /*--adjust height of large thumbnail--*/
.sequence-pagination li{display:inline-block; *display:inline; height:150px;}  /*---adjust small thumbnail height---*/  
.sequence-pagination{bottom:5%;  right:15%; position:absolute; z-index:10;      /*---adjust thumbnail position---*/
  -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 > .sequence-canvas {height:100%; width:100%;}
#sequence > .sequence-canvas > li{position:absolute; width:100%; height:100%; z-index:1;}
#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-theme{background-color:rgba(0,0,0,0.2);}

/*---NAVIGATION---*/
.sequence-next, .sequence-prev{cursor:pointer; display:none; font-weight:bold; padding:10px 15px; position:absolute; top:50%; z-index:1000; height:75px; margin-top:-47.5px;}
.sequence-prev{left:3%;}
.sequence-next{right:3%;}
.sequence-prev img, .sequence-next img{height:100%; width:auto;}
#sequence-preloader {background:#d9d9d9;}
.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;}
/*---NAVIGATION---*/

/*----SEQUENCE PAGINATION---*/ 
.sequence-pagination li img{cursor:pointer; opacity:0.4; border:#000 ridge 2px;
  -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 PAGINATION---*/

/*---TITLE---*/
.title{font-size:2.3em; color:#3D4F53; left:65%; width:40%; opacity:0; bottom:8%; z-index:50; margin-left:0%;}
.animate-in .title{left:50%; opacity:1; -webkit-transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s;}
.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;}
/*---TITLE---*/

/*---SUBTITLE---*/
.subtitle{font-size:1.5em; color:#3D4F53; left:35%; width:35%; opacity:0; top:94%; margin-left:0%;}
.subtitle2{font-size:1.5em; color:#3D4F53; left:35%; width:35%; opacity:0; top:98%; margin-left:0%;}
.subtitle3{font-size:1em; color:#3D4F53; left:20%; width:10%; opacity:1; top:143%;}
.animate-in .subtitle{left:50%; opacity:1; -webkit-transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s;}
.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;}
.animate-in .subtitle2{left:50%; opacity:1; -webkit-transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s;}
.animate-out .subtitle2{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;}
/*---SUBTITLE---*/

/*---ME - MAIN---*/                                                                
.animate-in .model{left:15%; opacity:1; -webkit-transition-duration:0.8s; -moz-transition-duration:0.8s; -ms-transition-duration:0.8s; -o-transition-duration:0.8s; transition-duration:0.8s;}
.animate-out .model{left:15%; 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;}
/*---ME- MAIN---*/

@media only screen and (min-width:1160px) and (max-width:1635px) {
#sequence{ height:500px;}	                         /*--adjust height of section--*/
#sequence li img{height:78%;}                      /*--adjust height of large thumbnail--*/	
.sequence-pagination li{height:120px;}             /*--adjust small thumbnail height--*/  
.sequence-pagination{width:45%; left:50%;}         /*--adjust small thumbnail position--*/
.title{font-size:1.5em;}                           /*--adjust main title--*/
.subtitle{font-size:1.2em;}                        /*--adjust first subtitle--*/
.subtitle2{font-size:1.2em;}                       /*--adjust second subtitle--*/
.subtitle3{width:15%; left:18%; top:140%;}	       /*--adjust view title--*/         
}

@media only screen and (min-width:1000px) and (max-width:1159px) {
#sequence{ height:400px;}	                              /*--adjust height of section--*/
#sequence li img{height:80%;}                           /*--adjust height of large thumbnail--*/	
.sequence-pagination li{height:100px;}                  /*--adjust small thumbnail height--*/  
.sequence-pagination{width:45%; left:50%; bottom:8%;}   /*--adjust small thumbnail position--*/
.title{font-size:1.2em;}                                /*--adjust main title--*/
.subtitle{font-size:1.0em; top:90%;}                    /*--adjust first subtitle--*/
.subtitle2{font-size:1.0em; top:95%;}                   /*--adjust second subtitle--*/
.subtitle3{width:15%; left:18%; top:138%;}	            /*--adjust view title--*/         
}
	
@media only screen and (min-width:800px) and (max-width:999px) {
#sequence{ height:350px;}	                                   /*--adjust height of section--*/
#sequence li{top:-47%;}                                      /*--position main image--*/
#sequence li img{height:80%;}                                /*--adjust height of large thumbnail--*/	
.sequence-pagination li{height:80px;}                        /*--adjust small thumbnail height--*/  
.sequence-pagination{width:50%; left:50%; bottom:8%;}        /*--adjust small thumbnail position--*/
.title{font-size:1.0em;}                                     /*--adjust main title--*/
.subtitle{font-size:0.9em; top:90%;}                         /*--adjust first subtitle--*/
.subtitle2{font-size:0.9em; top:95%;}                        /*--adjust second subtitle--*/
.subtitle3{width:15%; left:19%; top:136%; font-size:0.9em;}	 /*--adjust view title--*/
.subtitle3 a{font-size:0.9em;}
.sequence-prev{left:-2%;}
.sequence-next{right:-2%;}       	
}

@media only screen and (min-width:599px) and (max-width:799px) {
#sequence{ height:300px;}	                                        /*--adjust height of section--*/
#sequence li{top:-65%;}                                           /*--position main image--*/
#sequence li img{height:65%;}                                     /*--adjust height of large thumbnail--*/	
.sequence-pagination li{height:80px;}                             /*--adjust small thumbnail height--*/  
.sequence-pagination{width:60%; left:35%; bottom:-5%;}            /*--adjust small thumbnail position--*/
.title{font-size:1.0em;}                                          /*--adjust main title--*/
.subtitle{font-size:0.9em; top:90%;}                              /*--adjust first subtitle--*/
.subtitle2{font-size:0.9em; top:95%;}                             /*--adjust second subtitle--*/
.subtitle3{width:15%; left:17%; top:132%; font-size:0.9em;}	      /*--adjust view title--*/
.subtitle3 a{font-size:0.9em;}
.sequence-prev{left:-2%;}
.sequence-next{right:-2%;}       	
}

@media only screen and (min-width:481px) and (max-width:600px) {
#sequence{ height:300px;}	                                        /*--adjust height of section--*/
#sequence li{top:-65%;}                                           /*--position main image--*/
#sequence li img{height:55%;}                                     /*--adjust height of large thumbnail--*/	
.sequence-pagination li{height:80px;}                             /*--adjust small thumbnail height--*/  
.sequence-pagination{width:60%; left:35%; bottom:-5%;}            /*--adjust small thumbnail position--*/
.title{font-size:1.0em; margin-left:-5%; width:60%;}                                                                  /*--adjust main title--*/
.subtitle{font-size:0.9em; top:90%; margin-left:-5%; width:auto; opacity:0; top:94%;}                /*--adjust first subtitle--*/
.subtitle2{font-size:0.9em; top:95%; margin-left:-5%; width:auto; opacity:0; top:100%;}              /*--adjust second subtitle--*/
.subtitle3{width:15%; left:17%; top:132%; font-size:0.9em;}	      /*--adjust view title--*/
.subtitle3 a{font-size:0.9em;}
.sequence-next, .sequence-prev{ padding:10px 15px; height:50px;}
.sequence-prev{left:-2%;}
.sequence-next{right:-2%;}       	
}

@media only screen and (max-width:480px) {
#sequence{ height:250px;}	                                        /*--adjust height of section--*/
#sequence li{top:-65%;}                                           /*--adjust large thumnail position--*/
#sequence li img{height:55%; margin-left:-5%;}                    /*--adjust large thumbnail--*/	
.sequence-pagination li{height:80px; margin-right:3%;}                             /*--adjust small thumbnail height--*/  
.sequence-pagination{width:80%; left:15%; bottom:-10%;}           /*--adjust small thumbnail position--*/
.title{font-size:0.9em; margin-left:-9%; width:60%; z-index:-1000;}              /*--adjust main title--*/
.subtitle{font-size:0.8em; top:90%; margin-left:-9%; width:auto; opacity:0; top:94%; z-index:-1000;}             /*--adjust first subtitle--*/
.subtitle2{font-size:0.8em; top:95%; margin-left:-9%; width:auto; opacity:0; top:100%; z-index:-1000;}           /*--adjust second subtitle--*/
.subtitle3{width:15%; left:12%; top:128%;}	                                                      /*--adjust view title--*/
.subtitle3 a{font-size:0.7em;}
.sequence-next, .sequence-prev{padding:10px 15px; height:30px;}
.sequence-prev{left:-3%;}
.sequence-next{right:-3%;}       	
}