@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
	
	*{
		margin: 0;
		padding: 0;
	}
	
	html, body{
		width: 100%;
		height: 100%;
	}
	
	p{
		font-family: 'Open Sans', sans-serif;
		font-size: 16px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

h2{font-family: 'Open Sans', sans-serif;}
a {color:#054B98; text-decoration:none;}
	
	.contenedor{
		width:100%;
		height: 100%;
		position: relative;
	}
	
	.fondo{
		width: 100%;
		height: 100%;
		background: url(img/provisional-diecaros-v05.gif) no-repeat center center;
		background-size: cover;
		z-index: 1;
		
	}
	
	

	
	.tarjeta{
		width: 20%;
		height: 100%;
		background-color: white;
		position: absolute;
		top:0;
		left:0;
		/*transform: skewX(-10deg);
		transform-origin: top left;
	
		 -webkit-clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
		-o-clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
		-ms-clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); */
		z-index: 3;
	}

	.tarjeta::before{
		content: '';
		display: block;
		width: 250px;
		height: 100%;
		transform: skewX(-11deg);
		transform-origin: top left;
		position: absolute;
		top: 0;
		right: -190px;
		background-color: white;
		
		
	}
.texto{
	position: absolute;
	z-index: 2;
}


	
	header.logo img{
		width:500px;
		padding-left: 20px;
		padding-top: 50px;
	}
	
	.texto1{
		padding-left: 80px;
		margin-bottom: 140px;
		padding-top: 50px;
		width: 65%;
		color:#054B98;
	}
	.texto1 p{
		font-size: 20px;
	}
	
	
	.texto2{
		width: 55%;
		padding-left: 80px;
		padding-right: 200px;
		
	}
	
	footer.texto3{
		padding-left: 80px;
		padding-right: 200px;
		padding-top: 120px;
		width: 55%;
	}
	
	.hr{
		width: 100px;
		height: 5px;
		background-color: #054B98;
		margin-top: 12px;
    	margin-bottom: 13px;
	}
	.marcas{
		/*
		width: 100%;
		height: auto;
		position: absolute;
		display: flex;
		justify-content: flex-end;
		bottom: 0; 
		z-index: 2;
		
		background: rgba(255,255,255,0.5);
		background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 30%, rgba(237,237,237,0) 80%);
		background: -webkit-gradient(bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(30%, rgba(246,246,246,1)), color-stop(80%, rgba(237,237,237,0)));
		background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 30%, rgba(237,237,237,0) 80%);
		background: -o-linear-gradient(bottom , rgba(255,255,255,1) 0%, rgba(246,246,246,1) 30%, rgba(237,237,237,0) 80%);
		background: -ms-linear-gradient(bottom , rgba(255,255,255,1) 0%, rgba(246,246,246,1) 30%, rgba(237,237,237,0) 80%);
		background: linear-gradient(to top, rgba(255,255,255,1)0%, rgba(246,246,246,1) 30%, rgba(237,237,237,0)80%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
		*/
		

		width: 100%;
		height: auto;
		position: absolute;
		display: flex;
		bottom: 0;
		right: 0;
		
		z-index: 3;
		}

		.logos{
			width:80%;
			display: flex;
			position: absolute;
			bottom: 0;
			right: 0;
			justify-content: space-around;
			background: rgba(255,255,255,0.5);
			
		}
	
		.logos > a img{
			width: auto;
			height: 60px;
			padding: 10px 20px;
		}

	

	
	
	/*================================================
	MEDIA QUERIES
	==================================================*/


	@media only screen and (max-width: 1600px) {
		.texto1 {
			padding-left: 60px;
			margin-bottom: 120px;
		}
		.texto2, footer.texto3 {
			padding-left: 60px;
		}
		
		header.logo img{
			padding-left: 0;
			width: 450px;
		}
		
		/*.marcas > a img{
			width: auto;
			height: 60px;
			padding: 10px 20px;
		}
		*/
		
		
	}
	
	@media only screen and (max-width: 1400px) {

		.logos > a img{
			height: 50px;
			padding: 10px 15px;
		}
		header.logo img{
			width: 400px;
		}
		.tarjeta {
			width: 281px ;
		}
		.texto1{
			margin-bottom: 100px;
		}
		.texto3{
			padding-top: 100px;
		}
		
	}


	@media only screen and (max-width: 950px) {
		.logos{
			width: 100%;
		}
		.logos > a img{
			height: 48px;
			padding: 10px 10px;
	}
	
	@media only screen and (max-width: 650px) {

		.tarjeta {
			min-width: 100% !important;
			position: inherit;
			padding-bottom: 80px;
			margin-bottom:15px;
			
			
			/*-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
			
		}
		
		.texto1{
			width: 80%;
			margin: 0;
			padding: 50px 20px;	
		}
		.texto2{
			padding-left: 20px;
		}
		
		footer.texto3{
			padding-left: 20px;
			padding-top: 80px;	
		}

		.fondo{
			height: 250px;
		}
		
		.contenedor{
			height: 650px;
		}
		.marcas{
			position: inherit;
    		display: block;
		}
		
		.logos{
			width: 100%;
			position: relative;
			display: inherit;
		}

		
	}
	@media only screen and (max-width: 430px) {
		.tarjeta{
			width: 100%;
		}
		
		.texto1 > p {
			width: 80%;
		}

		.texto2 > p, footer.texto3 > p {
			font-size: 15px;
		
		}
		
		header.logo img{
			padding-left: 0;
			width: 350px;
		}
		.logos > a img{
			width: 45%;
			height: auto;
			padding: 10px 5px;
			
		}
		.texto3{padding:40px 0px;}
		.tarjeta::before{right: 10px;}
		.logos{padding-left:10px;}
		.logos > a img{width:33%;height:auto;padding:10px 25px;}
}

	}