@charset "utf-8";


/* CSS Document */





/* FlexSlider Necessary Styles


*********************************/





.flex-container a,


.flexslider a,


.flex-container a:active,


.flexslider a:active,


.flex-container a:focus,


.flexslider a:focus  {outline: none;}


.slides,


.flex-control-nav,


.flex-direction-nav {margin: 0; padding: 0; list-style: none;}





.flex-direction-nav {z-index:8;position:relative}





/* FlexSlider Necessary Styles


*********************************/


.flexslider {margin: 40px 0 55px; padding: 0;background:#000;}


.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */


.flexslider .slides img {max-width: 100%; display: block;}


.flex-pauseplay span {text-transform: capitalize;}





/* Clearfix for the .slides element */


.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}


html[xmlns] .slides {display: block;}


* html .slides {height: 1%;}





/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you


 * include js that eliminates this class on page load */


.no-js .slides > li:first-child {display: block;}


/* Clearfix for the .slides element */


.slides:after {


	content: ".";


	display: block;


	clear: both;


	visibility: hidden;


	line-height: 0;


	height: 0;


}


html[xmlns] .slides {


	display: block;


}


* html .slides {


	height: 1%;


}


/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you


 * include js that eliminates this class on page load */


.no-js .slides > li:first-child {


	display: block;


}


.flexslider, .flex-container {


	position: relative;	





}





.flexslider { zoom: 1;}


.flexslider .slides {zoom: 1;}


.flexslider .slides > li {position: relative;}


/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */


.flex-container {zoom: 1; position: relative;}





.flexslider .slides > li {	


	width:20%;


	overflow:hidden;


	position:relative;


	


}


.flexslider .slides > li .flex-caption {


	font-family: 'Dorsa', sans-serif;


	color:#fff;


	font-size:100px;


	line-height:104px;


	position:absolute;


	top:50%;


	left:50%;


	margin:-50px 0 0 -10px;


	opacity:1;


	-webkit-transition: all 0.3s ease;


	-moz-transition: all 0.3s ease;


	-o-transition: all 0.3s ease;


	transition: all 0.3s ease;


}


.flexslider .slides > li.active .flex-caption {


	opacity:0


}


.flexslider .slides {


	margin:0;


	list-style: none outside none;


}


.flexslider .slides > li{


	opacity:0.6


}


.flexslider .slides > li.active {


	opacity:1


}


.flexslider .slides img {


	display: block;


	max-width: 770px;


}


.flexslider .hover-img {


	position:absolute;


	top:0;


	left:0;


	opacity:0;


}


/* Caption style */


	.flex-caption {


}


#responsiveFlag {


	display:block;


}








@media handheld, only screen and (min-width:1300px) {


	.flexslider .slides > li {


		display:block;	


	}	


	#responsiveFlag{display:block;}


}





 @media only screen and (max-width: 1299px) {


.flexslider .slides > li {


	opacity:1


}	 


 .flexslider .slides img {


max-width: 100%;width:100%


}


 .flex-control-nav {


display:none;


}


 .flex-direction-nav {


position: absolute;


left: 0;


top: 50%;


width:100%;


overflow:hidden;


margin:-27px 0 0 0;


list-style: none outside none;


}


 .flex-direction-nav li {


float:left;


width:50%;


height:100%;


text-align:right;font-size:0;


line-height:0;overflow:hidden


}


 .flex-direction-nav li:first-child {


text-align:left


}


 .flex-direction-nav a {


display:inline-block;


font-size:0;


line-height:0;


text-indent:-1000px;


overflow:hidden;


width:55px;


height:55px;


vertical-align:middle;


}


 .flex-direction-nav a:hover {


text-decoration:none;


}


 .flex-direction-nav a.flex-next {


text-align:right;


background:url(../img/next.png) no-repeat 50% 50% #181818


}


 .flex-direction-nav a.flex-prev {


text-align:left;


background:url(../img/prev.png) no-repeat 50% 50% #181818


}


.flex-direction-nav a:hover{background-color:#e85356}








 #responsiveFlag {


font-size:0;


line-height:0;


display:inline;


}


}





@media only screen and (max-width: 420px) {


 .flex-direction-nav {


margin-top:-20px


}


 .flex-direction-nav a {


width:40px;


height:40px


}


}


 @media (max-width: 320px) {


 .flex-direction-nav {


margin-top:-15px


}


 .flex-direction-nav a {


width:30px;


height:30px


}


}