/*
    slide.css
    web-communication.eu | 21/06/2016
    Copyright 2016 web-communication.eu
*/


.swiper-container {
	width: 					100%;
	height: 				100%;
	margin: 				0 auto;
	cursor: 				pointer;
	background-color: #000;
}


 .swiper-slide {
	background-position: 		center;
	-webkit-background-size:	cover;
	-moz-background-size: 		cover;
	-o-background-size: 		cover;
	background-size: 			cover;
}
	
	
	
.slide-1 {
	background-image: url('../images/slide_01.jpg');
}

.slide-2 {
	background-image: url('../images/slide_02.jpg');
}

.slide-3 {
	background-image: url('../images/slide_04.jpg'); 
}

.slide-4 {
	background-image: url('../images/slide_06.jpg'); 
}




/* slide */

.fading {
	position:						absolute;
	bottom:							0;
	left:							0;
	width:							100%;
	height:							150px;
	
	/* webkit example */
	background-image: -webkit-gradient(
	linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8))
	);

	/* mozilla example - FF3.6+ */
	background-image: -moz-linear-gradient(
	  rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 95%
	);
}


 
#slide  .content-top  {
	position:						absolute;
	bottom: 						35%;
	left:							2%;
	display:						block; 
}


#slide  .content-bottom  {
	position:						absolute;
	bottom: 						15%;
	left:							2%;
	display:						block; 
}




#slide .style {
	font-family: 					'Michroma', sans-serif;
	font-weight: 					normal;
	font-size: 						34px;
	color:							#FFFFFF;
}	

#slide .style-1 {
	font-weight: 					normal;
	font-size: 						22px;
	color:							#FFFFFF;
}	

#slide .style-2 {
	font-weight: 					normal;
	font-size: 						20px;
	color:							#000;
}	

	
		
		
		
		
#slide sup {font-size: 12px;}		
		
		
#slide .content-mid { 
    position:						absolute;
    bottom: 						100px;
	left:							655px;
	width: 							12px;
	height: 						50px;
	background: 					#ff0000;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
}

#slide .content-mid-over-1,
#slide .content-mid-over-2,
#slide .content-mid-over-3,
#slide .content-mid-over-4 { 
    position:						absolute;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	padding: 						7px 30px;
	border-right: 					12px solid #ccc;
	border-top: 					2px solid #ccc;
	background: 					rgba(0, 0, 0, 0.7) url('images/arrow.png') no-repeat 470px 10px;
	background-size: 				55px;
}

#slide .content-mid-under-1,
#slide .content-mid-under-2,
#slide .content-mid-under-3,
#slide .content-mid-under-4 { 
    position:						absolute;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	background:						rgba(0, 0, 0, 0.7);
	border-right: 					12px solid #ccc;
	border-top: 					2px solid #ccc;
	padding: 						3px 30px;
}



/*#1*/
#slide .content-mid-over-1 { 
    bottom: 						110px;
	left:							30px;
	width: 							650px;
	height: 						70px;
}

#slide .content-mid-under-1 { 
    bottom: 						70px;
	left:							245px;
	width: 							320px;
	height: 						40px;
}




/*#2*/
#slide .content-mid-over-2 { 
    bottom: 						110px;
	left:							30px;
	width: 							650px;
	height: 						70px;
}

#slide .content-mid-under-2 { 
    bottom: 						70px;
	left:							225px;
	width: 							385px;
	height: 						40px;
}




/*#3*/
#slide .content-mid-over-3 { 
    bottom: 						110px;
	left:							30px;
	width: 							700px;
	height: 						70px;
}

#slide .content-mid-under-3 { 
    bottom: 						70px;
	left:							345px;
	width: 							280px;
	height: 						40px;
}


/*#4*/
#slide .content-mid-over-4 { 
    bottom: 						110px;
	left:							80px;
	width: 							550px;
	height: 						70px;
}

#slide .content-mid-under-4 { 
    bottom: 						70px;
	left:							200px;
	width: 							460px;
	height: 						40px;
}



#slide .content-middle { 
    position:						absolute;
    bottom: 						105px;
	right:							26px;
	width: 							12px;
	height: 						75px;
	background: 					#ccc;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
}

#slide .content-middle-over { 
    position:						absolute;
    bottom: 						70px;
	right:							50px;
	width: 							620px;
	height: 						70px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	padding: 						7px 30px;
	border-left: 					12px solid #ff0000;
	border-bottom: 					2px solid #ff0000;
	background: 					rgba(0, 0, 0, 0.9) url('images/arrow.png') no-repeat 520px 10px;
	background-size: 				55px;
}

#slide .content-middle-under { 
    position:						absolute;
    bottom: 						140px;
	right:							30px;
	width: 							430px;
	height: 						40px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	background:						#ccc;
	padding: 						5px 30px;
}




#slide .content-post { 
    position:						absolute;
    bottom: 						105px;
	right:							26px;
	width: 							12px;
	height: 						75px;
	background: 					#ccc;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
}

#slide .content-post-over { 
    position:						absolute;
    bottom: 						70px;
	right:							50px;
	width: 							620px;
	height: 						70px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	padding: 						7px 30px;
	border-left: 					12px solid #ff0000;
	border-bottom: 					2px solid #ff0000;
	background: 					rgba(0, 0, 0, 0.9) url('images/arrow.png') no-repeat 400px 10px;
	background-size: 				55px;
}

#slide .content-post-under { 
    position:						absolute;
    bottom: 						140px;
	right:							30px;
	width: 							430px;
	height: 						40px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	background:						#ccc;
	padding: 						5px 30px;
}
	


		
		
		
		
/* responsive */		

@media only screen and (max-width: 1135px) {
	
	.swiper-container {
	    width: 						1135px;
	}		


}


@media only screen and (min-width: 1921px) {
	
	.swiper-container {
	    width: 						1920px;
	}
	
}