/*
 * jQuery FlexSlider v1.8
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 /*==================loading css ================*/
 
 .loader {
	 width:50px;
	 height:50px;
	 display:inline-block;
	 vertical-align:middle;
	 margin-right:20px;
	 position:absolute;
	 z-index:-1;
	 top:40%;
	 
 }
 
 .loader-quart {
	 border-radius:50px;
	
	 
	  border-top:3px solid #ccc;
	  border-right:3px solid transparent;
	 
	 animation:spin 2s linear 0s infinite;
	 -webkit-animation:spin 2s linear 0s infinite;
	 
 }
 .loader-quart::after {
	 content:"";
	 position:absolute;
	 top:-12px;
	 left:-12px;
	 bottom:-12px;
	 right:-12px;
	 border-radius:50px;
	 border-top:3px solid #eee;
	  border-right:3px solid transparent;
	 
	 
	 animation:spin 3s linear 0s infinite;
	 -webkit-animation:spin 3s linear 0s infinite;
	 
 }
  .loader-quart::before {
	 content:"";
	 position:absolute;
	 top:-18px;
	 left:-18px;
	 bottom:-18px;
	 right:-18px;
	 border-radius:50px;
	 border-top:3px solid #999;
	  border-right:3px solid transparent;
	 
	 
	 animation:spin 6s linear 0s infinite;
	 -webkit-animation:spin 6s linear 0s infinite;
	 
 }
 @keyframes spin {
	 0%{ transform:rotate(0deg); }
	 100% { transform:rotate(360deg); }
	 
 }
 @-webkit-keyframes spin {
	 0%{ -webkit-transform:rotate(0deg); }
	 100% { -webkit-transform:rotate(360deg); }
	 
 }
 
  /*==================loading css ================*/
 .section2 {
	 height:500px;
	 background-color:#34495e;
	 line-height:500px;
	 color:#fff;
	 text-align:center;
	 font-family:sans-serif;
	 font-size:40px;
	 margin:0;
	 padding:0;
 }
 
 .loader2 {
	 width:50px;
	 height:1px;
	 
	 display:inline-block;
	 vertical-align:middle;
	 margin-right:20px;
	 position:relative;
	border-top:6px dotted rgba(255,255,255,0.3);
	
 }
 
 .loader-point {
	 
	
	  
	  
	  
	 
	/* animation:spin 2s linear 0s infinite;
	 -webkit-animation:spin 2s linear 0s infinite;*/
	 
 }

 @keyframes spin {
	 0%{ transform:rotate(0deg); }
	 100% { transform:rotate(360deg); }
	 
 }
 @-webkit-keyframes spin {
	 0%{ -webkit-transform:rotate(0deg); }
	 100% { -webkit-transform:rotate(360deg); }
	 
 }
/* Browser Resets */
.flex-container {
	height:auto;
	z-index:0;
	
}
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {width: 100%; margin: 0 auto; padding: 0; }
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block; margin: 0 auto; padding:0px; }
.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;}


/* FlexSlider Default Theme
*********************************/
.flexslider { position: relative; 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;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; }
.flex-caption {text-align:center; position: absolute;left:20%; top:30%; color:#fff;width:60%; }
.h1_slide {
	 position:relative; 
	font-family: 'Playfair Display', serif;
text-transform:uppercase;
font-size: 4.2em;
margin-bottom:50px;
line-height:1em;
}
.com_slide {
	position: relative;
	margin: 0 auto;
	text-align: center;
	line-height:1em;
	width: 400px;
	color:#fff;
		font-family: 'Playfair Display', serif;

font-size: 1.2em;
}
.savoirplus {
	width:150px;
	margin:0 auto;
	padding: 10px;
	
	cursor:pointer;
	z-index:1000;
}
.com_slide a {
	color:#fff;
}
/* Direction Nav */
.flex-direction-nav {display:none;}
.flex-direction-nav li a {width: 52px; height: 122px; margin:0px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 45%;cursor: pointer; text-indent: -9999px; outline:none;}
.flex-direction-nav li .next {background-position: -52px 0; right: 20%;}
.flex-direction-nav li .prev {left:20%;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {display:none;width: 100%; position: absolute; top: 400px; text-align: center; }
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

.slideafter {
	background-color:rgba(50,49,54,1);
	width:100%;
	height:60px;
	margin-top:-20px;
}
.slideafter::after {
	content: "\f103";
	font-family: FontAwesome;
	font-size:2.5em;
	color:#fff;
    margin:0 auto;
	position:relative;
	bottom:-30px;
    
    border-radius:50%;
   background-color:rgba(50,49,54,1);
   padding:15px;
    
}

@media (min-width: 640px) and (max-width: 1024px) {
	.flex-caption { 
	}
	.h1_slide {
		font-size:2em;
	}
	.flex-container {}
}
@media (max-width: 639px) {
	.com_slide { 
	font-size:0.6em;
	}
	.h1_slide {
		font-size:2em;
	}
	.flex-container {
		
		
}