header{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 10;
	background-color: #FFF;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	}
		
		
	header > .logo{
	width: 30% !important;
	margin-left: -3%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
  	}
		
		
	header > button{
	position: absolute;
	width: auto;	
	height: auto;
	padding: 1% 3%;
	right:  2.5%;
	top: 10%;
	}


    @media only screen and (max-width: 1700px) {
	
	header > .logo{
	width: 15%;
	}
		
	header > button{
	padding: 1% 3%;
	right:  2.5%;
	top: 15%;
	font-size: 115%;
	}
		
    }
    @media only screen and (max-width: 1500px) {
	
	header > .logo{
	width: 15%;
	}
		
	header > button{
	padding: 1% 2%;
	right:  2.5%;
	top: 15%;
	font-size: 100%;
	}
		
    }
	
	@media only screen and (max-width: 1024px) {
	
	header > .logo{
	width: 15%;
	margin-left: 5%;
	}
		
    }	
	
    @media only screen and (max-width: 414px) {
	
	header{
	height: 60px;
	padding: 0%;
	}
		
	header > .logo{
	width: 45%;
	margin-top: 2.5%;
	margin-left: 2.5%;
	background-position: center top;
	}
		
	header > button{
	padding: 2% 3%;
	right:  2.5%;
	top: 10%;
	font-size: 90%;
	}
		
    }


    
    .mockup{
	width: 40%;
	margin: auto;
	margin-top: 5%;
	text-align: center;		
	}
		
	.mockup > img{
	width: 100%;		
	}
		
	.mockup > h1{
	color: #ed8100;
	font-weight: bold;
	font-size: 350%;		
	}
	
	.mockup > h2{
	font-weight: lighter;
	font-size: 200%;		
	}
	
		
	@media only screen and (max-width: 1700px) {
	
	.mockup > h1{
	font-size: 300%;		
	}
	
	.mockup > h2{
	font-size: 170%;		
	}
		
	}	
	@media only screen and (max-width: 1500px) {
	
	.mockup > h1{
	font-size: 250%;		
	}
	
	.mockup > h2{
	font-size: 150%;		
	}
		
	}	
		
		
	@media only screen and (max-width: 1024px) {
	
	.mockup{
	width: 80%;
	}
			
	.mockup > img{
	width: 50%;		
	}

	.mockup > h1{
	font-size: 3vh;			
	}
	
	.mockup > h2{
	font-size: 2.5vh;			
	}
		
	}	
	
	@media only screen and (max-width: 414px) {
	
			
	.mockup > img{
	width: 60%;		
	}

	.mockup > h1{
	font-size: 2.5vh;			
	}
	
	.mockup > h2{
	font-size: 2vh;			
	}
		
	}


    
    .politicas{
	width: 90%;
	margin: auto;
	margin-top: 5%;	
	}
		
	.politicas h1{
	color: #ed8100;
	font-weight: bold;
	font-size: 4vh;		
	}
	
	.politicas h2{
	font-weight: lighter;
	font-size: 2.5vh;		
	}
	
		
	
	@media only screen and (max-width: 1024px) {
	
	.politicas{
	width: 90%;
	margin: auto;
	margin-top: 10%;	
	}

	.politicas h1{
	font-size: 2.5vh;		
	}
		
	.politicas h2{
	font-size: 2vh;		
	}
				
	
		
	}
	
	@media only screen and (max-width: 414px) {
			
	.politicas h1{
	font-size: 2vh;		
	}
				
	.politicas h2{
	font-size: 1.8vh;		
	}
		
		
	
		
	}




   .download{
	padding-bottom: 5%;
	margin-top: 10%;	
	margin-left: 10%;			
	}
		
	.download h1{
	width: 35%;
	color: #ed8100;
	font-weight: bold;
	font-size: 250%;		
	}
		
	.download > .buttons{
	position: relative;
	width: 25%;
	margin-top: 2.5%;	
	display: flex;
	justify-content: space-around;
	}
		
		
	.download > .buttons > button{
	width: 45%;	
	height: auto;
	padding: 2% 0%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-transform: uppercase;	
	
	}
		
		
	.download > .buttons > button > ion-icon{
	font-size: 170%;		
	}
		
		
		
	@media only screen and (max-width: 1700px) {
		
	.download h1{
	width: 35%;
	font-size: 200%;		
	}
		
		
	.download > .buttons{
	width: 35%;
	}
		
	.download > .buttons > button{
	font-size: 100%;		
	}
		
	.download > .buttons > button > ion-icon{
	font-size: 160%;		
	}
		
	}
	@media only screen and (max-width: 1500px) {
		
	.download h1{
	width: 35%;
	font-size: 190%;		
	}
		
		
	.download > .buttons{
	width: 28%;
	}
		
	.download > .buttons > button{
	font-size: 95%;		
	}
		
	.download > .buttons > button > ion-icon{
	font-size: 150%;		
	}
		
	}	
		
	@media only screen and (max-width: 1024px) {
		
	.download h1{
	width: 40%;
	font-size: 180%;		
	}
				
	.download > .buttons{
	width: 50%;
	}
		
	.download > .buttons > button{
	font-size: 90%;		
	}
		
	.download > .buttons > button > ion-icon{
	font-size: 150%;		
	}
		
		
	}
    @media only screen and (max-width: 768px) {
		
	.download h1{
	width: 50%;
	font-size: 160%;		
	}
		
	.download > .buttons{
	width: 70%;
	}
		
	.download > .buttons > button{
	font-size: 90%;		
	}
		
	.download > .buttons > button > ion-icon{
	font-size: 140%;		
	}
		
		
	}
    @media only screen and (max-width: 414px) {
		
	.download{
	width: 95%;
	padding-bottom: 10%;
	margin: auto;
	margin-top: 10%;	
	}
		
	.download h1{
	width: 100%;
	font-size: 120%;
	text-align: center;
	}
		
	.download > .buttons{
	width: 100%;
	margin: auto;
	margin-top: 10%;
	}
		
	.download > .buttons > button{
	font-size: 65%;		
	}
		
	.download > .buttons > button > ion-icon{
	font-size: 150%;		
	}
		
		
	}