body{
	background-image:url(../images/cartao_03.jpg);
	background-repeat:repeat-x;
	margin:0 0 0 0;
}
#box{
	justify-content: center;
	
	
}
#logo{
	margin-left: 5px;
	float:none;
	
}


@media only screen and (max-width: 768px) { 
	
	.direito{
		
		
		font-family: arial;
	font-size: clamp(0.5em, 0.5em + 0.8vw, 0.8em);
		text-align: center;
		
	}	
		.btn-hover{
		
    max-width: 120px;
    min-height: 170px;
    width: 100%;
    border-radius: 10%;
    border: 1px solid rgb(5, 5, 5);
    background-color: unset;
    margin: 15px;
	
	
}
	
	.title {
	margin-bottom: 0px;
  text-align: center;
	font-family: arial;
	font-size: 50px;
}

.subtitle {
	
	  text-align: center;
	font-family: arial;
	font-size: clamp(1em, 1em + 1vw, 2em);
	font-weight: 300;
}


.txt3 {

    margin-top: 0px;
	  font-weight: 700;
  text-align: center;
	font-family: arial;
	font-size: clamp(0.5em, 0.5em + 0.8vw, 0.8em);
}
.tabela{
	max-width: 100%;
	justify-content: center;
	float: inherit;
	
}
	
.txt {
    text-align: center;
		font-weight: 700;
	
    margin-top: 0px;
	font-family: arial;
	font-size: clamp(0.5em, 0.7em + 1vw, 1em);
	
	}
.img{
		max-width: 150px;
	margin: 5px;
}
		.btn-hover:hover {
		cursor: pointer;
		background: #e0e0e0

}
}

@media only screen and (max-width: 768px) and (orientation: landscape) { 
	
	.direito{
		
		
		font-family: arial;
	font-size: clamp(0.5em, 0.5em + 0.8vw, 0.8em);
		text-align: center;
		
	}	
		.btn-hover{
		
    max-width: 150px;
    min-height: 200px;
    width: 100%;
    border-radius: 10%;
    border: 1px solid rgb(5, 5, 5);
    background-color: unset;
    margin: 15px;
	
	
}
	
	.title {
	margin-bottom: 0px;
  text-align: center;
	font-family: arial;
	font-size: 50px;
}

.subtitle {
	
	  text-align: center;
	font-family: arial;
	font-size: clamp(1em, 1em + 1vw, 2em);
	font-weight: 300;
}


.txt3 {

    margin-top: 0px;
	  font-weight: 700;
  text-align: center;
	font-family: arial;
	font-size: clamp(0.5em, 0.5em + 0.8vw, 0.8em);
}
.tabela{
	max-width: 100%;
	justify-content: center;
	float: inherit;
	
}
	
.txt {
    text-align: center;
		font-weight: 700;
	
    margin-top: 0px;
	font-family: arial;
	font-size:  clamp(0.5em, 0.7em + 1vw, 1em);
	
	}
.img{
		max-width: 150px;
	margin: 10px;
}
		.btn-hover:hover {
		cursor: pointer;
		background: #e0e0e0

}
}

@media only screen and (min-width: 769px) and (max-width: 980px){
	.direito{
		
		
		font-family: arial;
	font-size: clamp(1em, 1em + 1vw, 2em);
		text-align: center;
		
	}	
		.btn-hover{
		
	max-width: 400px;
	min-height: 	380px; 

	width: 100%; 
	border-radius: 10%; 
	border: 1px solid rgb(5, 5, 5); 
	background-color: unset; 
    margin: 15px;
	
	
	
}
	
	.title {
	margin-bottom: 0px;
  text-align: center;
	font-family: arial;
	font-size: 60px;
}

.subtitle {
	
	  text-align: center;
	font-family: arial;
	font-size: clamp(1.5em, 1.5em + 1vw, 2em);
	font-weight: 300;
}


.txt3 {

    margin-top: 0px;
	  font-weight: 700;
  text-align: center;
	font-family: arial;
	font-size: clamp(2em, 2em + 2vw, 2em);
}
.tabela{
	max-width: 100%;
	justify-content: center;
	float: inherit;
	
}
	
.txt {
    text-align: center;
		font-weight: 700;
	
    margin-top: 0px;
	font-family: arial;
	font-size: clamp(2em, 2em + 2vw, 2em);
	
	}
.img{
	padding: 10px;
	max-width: 200px;
	margin: 10px;
}
		.btn-hover:hover {
		cursor: pointer;
		background: #e0e0e0

}
}

@media only screen and (min-width: 769px) and (max-width: 980px) and (orientation:landscape){
	.direito{
		
		
		font-family: arial;
	font-size: clamp(1em, 1em + 1vw, 2em);
		text-align: center;
		
	}	
		
		.btn-hover{
		
	max-width: 320px;
	min-height: 	280px; 

	width: 100%; 
	border-radius: 10%; 
	border: 1px solid rgb(5, 5, 5); 
	background-color: unset; 

	 margin: 15px;
	
	
	
}
	
	.title {
	margin-bottom: 0px;
  text-align: center;
	font-family: arial;
	font-size: 60px;
}

.subtitle {
	
	  text-align: center;
	font-family: arial;
	font-size: clamp(1.5em, 1em + 1vw, 2em);
	font-weight: 300;
}

.txt3 {

    margin-top: 0px;
	  font-weight: 700;
  text-align: center;
	font-family: arial;
	font-size: clamp(2em, 2em + 2vw, 2em);
}
.tabela{
	max-width: 100%;
	justify-content: center;
	float: inherit;
	
}
	
.txt {
    text-align: center;
		font-weight: 700;
	
    margin-top: 0px;
	font-family: arial;
	font-size: clamp(1em, 1em + 1vw, 2em);
	
	}
.img{
	padding: 10px;
	max-width: 150px;
	margin: 10px;
}
		.btn-hover:hover {
		cursor: pointer;
		background: #e0e0e0

}
}

@media only screen and (min-width: 981px){
	
	.direito{
		
		
		font-family: arial;
	font-size: clamp(0.5em, 0.5em + 1vw, 1em);
		text-align: center;
		
	}	
		
	.btn-hover{
		
	max-width: 200px;
	min-height: 	130px; 
	width: 100%; 
	border-radius: 10%; 
	border: 1px solid rgb(5, 5, 5); 
	background-color: unset; 
	margin: 15px;
	
	
	
}
	
	.title {
	margin-bottom: 0px;
    text-align: center;
	font-family: arial;
	font-size: 50px;
}

.subtitle {
	
	  text-align: center;
	font-family: arial;
	font-size: clamp(1em, 0.8em + 1vw, 1.2em);
	font-weight: 300;
}

.txt3 {

    margin-top: 0px;
	  font-weight: 700;
  text-align: center;
	font-family: arial;
	font-size: clamp(1em, 0.8em + 1vw, 1.2em);
}
	
	.txt3:hover {
 display: block;
  
}
	
.tabela{
	max-width: 100%;
	justify-content: center;
	float: inherit;
	
}
	
.txt {
    text-align: center;
		font-weight: 700;
	
    margin-top: 0px;
	font-family: arial;
	font-size: clamp(1em, 0.8em + 1vw, 1.2em);
	
	}
.img{
	padding: 10px;
	max-width: 150px;
	margin: 10px;
	
	}
	
	.btn-hover:hover {
		cursor: pointer;
		background: #e0e0e0
			

}
}