/*
    video.css
    m.dinamico.bike | 04/02/2018 | CSS
    (c) Copyright 2020 web-communication.eu
*/


.video {
	position:					relative;
	margin:						0 auto;
	width:						100%;
	text-align: 				center;
	margin-top:					100px;
}

.video .container {
	position:					relative;
	margin:						0 auto;
	width:						100%;
	max-width: 					1920px;
	padding:					60px 0;
	
	height: 						800px;
	background: #eee url('../images/helpme.jpg') no-repeat center center;
	-webkit-background-size: 		cover;
    -moz-background-size: 			cover;
    -o-background-size: 			cover;
    background-size: 				cover;	
}

.video img {
	width: 						100%;
	display: 					block;
}


.video .spot {
	position:					absolute;
	margin: 					0;
	top: 						25%;
	width: 						100%;
	text-align: 				center;
	/*background: 				rgba(255,255,255,.7);*/
}

.video .topic {
	margin: 					0;
	position:					absolute;
	bottom: 						50%;
	width: 						100%;
	right: 						0;
	text-align: 				center;
	-webkit-transform: 			translate(0, 50%);
	transform: 					translate(0, 50%);
	/*background: 				rgba(255,255,255,.7);*/
}



.video .topic img {
	max-width: 					240px;
	width: 						12%;
	display: 					block;
	margin: 					auto auto;
	opacity: 					0.5;
    filter: 					alpha(opacity=100); /* For IE8 and earlier alpha(opacity=50)*/
	cursor: 					pointer;
}

.video .topic img:hover {
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.video .spot h1 {
	font-family: 				'Open Sans', sans-serif;
	color:              		#FFF; 
	font-size:		            22px; 
	letter-spacing: 			0.8em;
	text-indent: 				0.8em;
}



/* responsive */	

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

	.video .container {
		width:						96%;
		padding:					10px 0;
	}
	
	.video .spot {
		top: 						20%;
	}
	
	.video .topic img {
		opacity: 					0.7;
		filter: 					alpha(opacity=70); /* For IE8 and earlier */
	}

	.video .spot h1 {
		font-size:		            12px; 
		letter-spacing: 			0.4em;
		text-indent: 				0.4em;
	}
	
	.video .container {
		
		width:						100%;
		height: 						300px;
		
	}
	
}

@media only screen and (min-width: 481px) and (max-width: 640px){
	
	.video .container {
		width:						96%;
		padding:					10px 0;
	}
	
	.video .spot {
		top: 						20%;
	}
	
	.video .topic img {
		opacity: 					0.7;
		filter: 					alpha(opacity=70); /* For IE8 and earlier */
	}

	.video .spot h1 {
		font-size:		            14px; 
		letter-spacing: 			0.5em;
		text-indent: 				0.5em;
	}
	
}

@media only screen and (min-width: 641px) and (max-width: 960px){
	
	.video .container {
		width:						96%;
		padding:					20px 0;
	}
	
	.video .spot {
		top: 						20%;
	}
	
	.video .topic img {
		opacity: 					0.7;
		filter: 					alpha(opacity=70); /* For IE8 and earlier */
	}

	.video .spot h1 {
		font-size:		            16px; 
		letter-spacing: 			0.5em;
		text-indent: 				0.5em;
	}
}

@media only screen and (min-width: 961px) and (max-width: 1136px){
	
	.video .container {
		width:						96%;
		padding:					25px 0;
	}
	
	.video .spot {
		top: 						20%;
	}
	
	.video .topic img {
		opacity: 					0.7;
		filter: 					alpha(opacity=70); /* For IE8 and earlier */
	}

	.video .spot h1 {
		font-size:		            18px; 
		letter-spacing: 			0.6em;
		text-indent: 				0.6em;
	}
}	

@media only screen and (min-width: 1136px) and (max-width: 1280px){
	
	.video .container {
		width:						96%;
		padding:					30px 0;
	}
	
	.video .spot {
		top: 						20%;
	}
	
	.video .topic img {
		opacity: 					0.7;
		filter: 					alpha(opacity=70); /* For IE8 and earlier */
	}

	.video .spot h1 {
		font-size:		            20px; 
		letter-spacing: 			0.7em;
		text-indent: 				0.7em;
	}	

}	

@media only screen and (min-width: 1281px) and (max-width: 1440px){
	
	
}