/********************************First Slider ***************************************************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	
/*h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}*/

#slider {
  /*background-image:url(../img/sliderimg.png);
  background-repeat:no-repeat;
  background-size:contain;*/
  
  padding:5px 1px;
  text-align:center;  
  position: relative;
  overflow: hidden;
  margin: auto;
  border-radius: 0px;
  background-color:#000;
  height:350px;
  width:100%;
  min-width:1024px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 1;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}
/********************************Second Slider ***************************************************/
/*RESET*/
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/



/*GENERAL*/	
a {text-decoration: none;}

.wrapperAll 
{
	width: 100%; 
	overflow: hidden; 
	text-align: right; 
	padding-top:0px; 
	font-family: Verdana;
	height:100%;
}
.wrapper 
{
	display: block;
    max-width: 520px;
    padding: 0;
    width: 100%;
	margin: 0.5em auto;
}

.wrapper:after 
{
	content: ' '; 
	display: block; 
	clear: both;
} 


/*TITLE
h1 
{
	float: left; 
	padding-bottom: 1em; 
	font-size: 140%; 
	font-family: Arial; 
	color: #4527a0;
}*/
.buttonLine 
{
	float: right; 
	color: #ff8f00; 
	padding: .5em 1.2em; 
	border: solid 1px #ff8f00; 
	border-radius: 20px;
}
.buttonLine:hover 
{
	background: #ff8f00; 
	color: #f7f7f7; 
	transition: all ease-in-out .3s;
}

/*SLIDER - COMPLETE*/
.sliderComplete {position: relative;}

/*Slider*/
.slider 
{
	box-sizing: border-box;
    line-height: 1px;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all 0.5s ease 0s;
    width: 300%;
}
.slider li 
{
	display: inline-block; 
	width: 200px; 
	margin-left:13px; 
	padding-bottom: 1em;
}
.slider li:first-child {margin-right: 0;}

/*Content*/
.slider li > * {max-width: 100%;}

/*Cover*/
.slider li .cover 
{
	position: relative; 
	display: inline-block; 
	border-radius: 6px; 
	box-sizing:border-box; 
	overflow: hidden; 
	margin-bottom: 1em;
}
.slider li .cover img {display: block; width: 100%;}
.slider li .cover:before 
{
	display: block; 
	content: ' '; 
	background: rgba(247,247,247,0); 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}
.slider li .cover:hover:before 
{
	background: rgba(247,247,247,.5);
	transition: all .2s;
}

/*Informations*/
.slider li p {line-height: 1.3; color: #38373a;margin:0;padding:0 6px;font-size:12px;font-family:tahoma;}
.slider li p a {color: #ff8f00;}

/*Buttons*/
/*
The transition, added in CSS, will do the 'fadeIn' and the 'fadeOut' we can do in jQuery.
*/
.sliderComplete button 
{
	position: absolute; 
	border: none;		
	transition: all ease-in-out .5s;
	background: none;
}
.sliderComplete button[title="before"] {right: 58%;bottom:-26px;}
.sliderComplete button[title="after"] {right: 48%;bottom:-26px;}
.sliderComplete button.close {opacity: 0;}
.sliderComplete button.open {opacity: 1;}

/*Onclick*/
/*The transition will allow the smooth animation of the slider.*/
.turn 
{
	margin-right: -100%; 
	transition: all .5s;
}

@media screen and (max-width:800px) {
	/*
	This prevents a potential overflow on the height and overflow allows the width for responsive. The scroll bar is not visible in any way on mobile.
	*/
	.sliderComplete .wrapper {overflow-x: scroll; overflow-y: hidden;}
	.slider {width: 200%;}
	.slider li {width: 14%;}
	.slider li .cover {width: 100%;}
}

@media screen and (orientation:portrait) {
	.sliderComplete .wrapper {overflow-x: scroll; overflow-y: hidden;}
	.slider {width: 200%;}
	.slider li {width: 14%;}
	.slider li .cover {width: 100%;}
	.sliderComplete button, .sliderComplete button.close, .sliderComplete button.open {display: none; opacity: 0;}
}