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

body{
   overflow-x: hidden;
}

#hero{
	
	background-image: url("images/img-1.jpg");
	background-size: cover;
	background-position: center;
	height: 920px;
}

h1 img{
	
	margin-top: 150px;
}

#txt1{
	
	position: absolute;
	float: right;
	margin-top: -600px;
	margin-left: 1000px;
	
}


#modulo2{
	
	background-image: url("images/img-3.jpg");
	background-size: cover;
	background-position: center;
	height: 934px;
}

#txt2 img{
	
	margin-left: 940px;
	margin-top: 200px;
	
}

#txt3  {
	
	position: absolute;
	float: left;
	margin-top: 250px;
		
}

#img2 img {
	 
	position: absolute;
	float: right;
	margin-left: 670px; 
	margin-top: -1px;
	
}
#modulo4{
	
	background-image: url("images/img-5.jpg");
	background-size: cover;
	background-position: center;
	height: 941px;
	margin-top: 925px;
	}

#txt4 img{
	
	margin-top: 300px;
}

#pay2 img{
	
	position: absolute;
	float: right;
	margin-left: 650px;
	margin-top: -700px;
}

#pay3{
	position: absolute;
	float: right;
	margin-left: 1150px;
	margin-top: -670px;
	
}

#pay-txt{
	
	background-image: url("images/txt-pay.png");
	background-size: cover;
	width: 1032px;
	height: 211px;
	margin-left: 270px;
	margin-top: -90px;
	
}

#logo{
	
	width: 430px;
}
#brand {
	position: absolute;
	float: left;
	margin-left: 980px;
	margin-top: -90px;
	
}

/*Responsive*/

@media screen and (max-width: 1440px){
	
	#img1 img{
		width: 55%;
		
	}
	
	#txt1 img{
		width: 550px;
		margin-left: -250px;
		margin-top: 50px;
	}
	
	#txt2 img{
		
		width: 500px;
		margin-left: 800px;
	}
	
	#pay1 img{
		
		width: 400px;
	}
	
	#pay2 img{
		
		width: 300px;
		margin-left: 550px;
		margin-top: -520px;
	}
	
	#pay3 img{
		
		width: 400px;
		margin-left: -200px;
		margin-top: 170px;
	}
	
	#pay-txt{
	
	margin-left: 130px;
	margin-top: -30px;
	
}
	
	#brand {
	
	
	
		
	
}
	
	#brand img{
		
		margin-left: -320px;
		width: 500px;
	}

}

@media screen and (max-width: 1020px){
	
	#hero{
		width: 1024px;
		height: 750px;
	}
	
	h1 img{
		
		width: 600px;
	}
	
	#txt1 img{
		
		width: 455px;
		margin-left: -455px;
		margin-top: 200px;
	}
	
	#modulo2{
		
		width: 1024px;
		height: 750px;
	}
	
	#txt2 img{
		
		margin-left: 520px;
	}
	
	#txt3 img{
		margin-top: -120px;
		width: 450px;
	}
	#img2 img{
		
		width: 500px;
		margin-left: 500px;
	}
	
	#modulo4{
		
		margin-top: 486px;
	}
	
	#pay1 img{
		
		width: 300px;
	}
	
	#pay2 img{
		
		width: 220px;
		margin-left: 400px;
		margin-top: -380px;
	}
	
	#pay3 img{
		
		width: 300px;
		margin-left: -450px;
		margin-top: 295px;
	}
	
	#pay-txt{
		
		margin-left: -20px;
	}
	#logo{
		margin-top: -50px; 
	}

#logo img{
	margin-top: 20px;
	width: 360px;
}
	
	#brand img{
		
		width: 570px;
		margin-left: -550px;
	}
	
	#brand{
		
		margin-top: -55px;
	}
	
}

@media screen and (max-width: 720px){
	
	#hero{
		margin-top: -40px;
		width: 720px;
		height: 600px;
	}
	
	h1 img{
		
		width: 400px;
	}
	
	#txt1 img{
		width: 350px;
		
		}
	
	#txt1{
		margin-top: -480px;
		margin-left: 820px;
	}
	
	#modulo2{
		
		width: 750px;
		height: 600px;
		
	}
	
	#txt2 img{
		
		width: 300px;
	
	}
	
	#txt2{
		margin-left: -150px;
	}
	
	#txt3 img{
		
		width: 330px;
	}
	
	#txt3{
		
		margin-top: 200px;
	}
	
	#img2 img{
		
		width: 330px;
	}
	
	#modulo4{
		
		width: 730px;
		height: 600px;
		margin-top: 320px;
	}
	#img2{
		
		margin-left: -130px;
	}
	
	#txt4 img{
		margin-top: 200px;
		width: 350px;
	}
	
	#pay1 img{
		
		width: 200px;
	}
	
	#pay2 img{
		margin-top: -260px;
		margin-left: 300px;
		width: 150px;
	}
	
	#pay3 img{
		width: 200px;
		margin-left: -650px;
		margin-top: 420px;
	}
	
	#pay-txt {
		
		width: 99%;
		background-repeat: no-repeat;
		background-size: contain;
		margin-left: 10px;
		margin-top: 50px;
	}
	
	#logo img{
		
		width: 250px;
	}
	#brand img{
		
		width: 300px;
		
		}
	
	#brand{
		margin-left: 930px;
		margin-top: -40px;
	}
	
	
}

@media screen and (max-width: 470px){
	
	#hero{
		
		width: 475px;
		height: 400px;
	}
	
	h1 img{
		width: 300px;
	}
	#modulo1{
		
		padding-bottom: 300px;
	}
	#img1 img{
		
		width: 470px;
	}
	
	#txt1 img{
		
		margin-top: 500px;
		margin-left: -820px;
		width: 450px;
	}
	
	#modulo2{
		
		width: 440px;
	    height: 320px;
		
	}
	
	#txt2 img{
		
		margin-top: 370px;
		margin-left: 180px;
		width: 400px;
	}
	
	#modulo3{
		
		margin-top: 400px;
		
	}
	
	#img2 img{
		
		margin-left: 122px;
		width: 455px;
	}
	
	#txt3 img{
		
		margin-top: 280px;
		width: 400px;
		margin-left: 30px;
	}
	
	#modulo4{
		width: 450px;
		height: 400px;
		margin-top: 1150px;
	}
	
	#txt4 img{
		
		width: 300px;
		margin-top: 100px;
	}
	
	#pay1 img{
		
		width: 150px;
	}
	
	#pay2 img{
		
		width: 120px;
		margin-left: 160px;
		margin-top: -195px;
	}
	
	#pay3 img{
		margin-top: 480px;
		margin-left: -850px;
		width: 150px;
	}
	
	footer img{
		display: inline-block;
	}

	
	#logo{
		
		margin-top: -100px;
	}
	#logo img{
		
		width: 150px;
	}
	
	#brand img{
		
		width: 230px;
		margin-left: -720px;
		margin-top: 15px;
	}
}

@media screen and (max-width: 414px){
	
	#hero{
		
		width: 375px;
	}
	
	#img1 img{
		
		width: 375px;
	}

	#txt1 img{
		
		width: 375px;
	}
	#txt1{
		
		margin-left: 820px;
	}
	
	#txt2 img{
		
		width: 370px;
		margin-left: 160px;
	}
	
	#txt3 img{
		
		width: 370px;
		margin-left: 5px;
	}
	
	#pay1 img{
		
		width: 100px;
	}
	
	#pay2 img{
		
		width: 80px;
		margin-left: 125px;
		margin-top: -130px;
	}
	
	#pay3 img{
		
		width: 100px;
		margin-left: -900px;
		margin-top: 540px;
	}
	
	#brand img{
		
		margin-left: -790px;
		
	}
}