/*
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 2013 unless otherwise stated.
*/


#sequence {
	overflow: hidden;
	width: 950px;
	position: relative;
	z-index:1;
	height: 375px;
	clear: both;
	margin: 110px auto 0 auto;
}

#sequence > .sequence-canvas {
	width: 950px;
	height: 375px;
}

#sequence > .sequence-canvas > li {
	position: absolute;
	width: 950px;
	height: 375px;
	z-index: 2;
	/* top: -50%;*/
     	top:0;
	left:0;
}

#sequence > .sequence-canvas > li img { /*height: 96%;*/
	
	height: 100%;
	max-height:100%;
	
}

#sequence > .sequence-canvas li > * {
	position: absolute;
	/* only cause the left and opacity properties to transition */
      	-webkit-transition-property: right, opacity;
	-moz-transition-property: right, opacity;
	-ms-transition-property: right, opacity;
	-o-transition-property: right, opacity;
	transition-property: right, opacity;
}

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

.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: #d9d9d9; }

.sequence-pagination {
	bottom: 30px;
	display: none;
	right: 30px;
	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: 68px;
	border: 3px solid #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	margin-left:10px;
	background-color:#fff;
}

.sequence-pagination li img {
	cursor: pointer;
	opacity: 1;
	-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: 0px;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	opacity: 0.5;
}

.sequence-pagination li.current img { opacity: 0.5; }
/*
h2 {
	color: white;
	font-weight: bold;text-transform: uppercase;
}
*/
.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;
}




/*
.container {
	position:absolute;
	z-index:5;
	bottom:0;
	left:35%;
	width:306px;
	height:266px;
	color:#fff;
	background-image:url(../images/descircle.png);
	background-repeat:no-repeat;
	opacity: 0;
	text-align:center;
	font-size:14px;
}
*/
.container {
	z-index: 25;
	position: absolute;
	right: 0;
	bottom: 50px;
	width: 350px;
	font-size: 42px;
	font-weight: lighter;
	text-align: center;
	line-height: 43px;
	color: #377a2d;
	opacity: 0;
}

.container span {display:block;}



.animate-in .container {
	right:100px;
	opacity: 1;
	filter:alpha(opacity=100);
	-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 .container, .container {
	right: 300px;
	opacity: 0;
	filter:alpha(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 img.pic {
	opacity: 1;
	filter:alpha(opacity=100);
	-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 img.pic, img.pic {
	opacity: 0;
	filter:alpha(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: 959px) {
 #sequence {
 height: 310px;
}
}
 @media only screen and (max-width: 768px) {
 #sequence {
 height: 500px;
}
 #sequence .sequence-next, #sequence .sequence-prev {
 height: 60px;
 margin-top: -40px;
}
}
 @media only screen and (max-width: 568px) {
 #sequence .sequence-pagination {
 bottom: 40px;
}
 #sequence .sequence-pagination li img {
 height: 100px;
}
}
 @media only screen and (max-width: 518px) {
 #sequence {
 height: 450px;
}
}
 @media only screen and (max-width: 468px) {
 #sequence {
 height: 415px;
}
 #sequence .sequence-pagination {
 opacity: 0;
 visibility: hidden;
}
}
 @media only screen and (max-width: 418px) {
 #sequence {
 height: 375px;
}
}
 @media only screen and (max-width: 368px) {
 #sequence {
 height: 325px;
}
}
 @media only screen and (max-width: 320px) and (orientation: portrait) {
	
  /*iphone portrait*/ /*
  #sequence {
 height: 320px;
}
}
 @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
 #sequence {
 height: 260px;
}
 #sequence .sequence-pagination {
 right: 17.5%;
}
}
*/