@charset "UTF-8";


/*---------------------------------- iPad ------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1024px)  {
  
	

h1 {  font-size: 1.4em; }	
	
h2 {  font-size: 1.2em; line-height: 1.2em }
	
h3 {  font-size: 1.0em;  line-height: 1.2em  }	
	
	
footer section { grid-template-columns: auto auto; align-items: start; font-size: 0.65em }	

footer section .logo img { width: 160px; height: auto; }
	
	
	
	
.big {  width: calc(100% - 60px);  padding: 60px 30px;  min-height: auto; height: inherit;; }
	
.carousel img { height: 100vh;  }
	
.carousel .mastercard h2 { font-size: 1.2em }	
	
.carousel .mastercard .carousel-arrow img {position: relative;width: 400px;height: auto;}

	
	
.features-grid { grid-template-columns: auto; gap: 30px;}
	
.features-grid h2:last-of-type {  position: relative;  grid-column: span 1; }	
	

.goog { grid-template-columns: auto; }	
	
	
.hero .headers { display: grid; justify-content: center; grid-template-columns: auto auto auto; justify-items: center; }	
	
.hero .fliphoto {   max-width: calc(100vw - 60px);  overflow: hidden; }	
	
	
	
.main { flex-direction: column; }	
	
.main.right {   flex-direction: column; }	
	
.main .image img { width: calc(100% - 0px); min-height: auto; object-fit: cover; }
	
.main .details {   width: auto;  padding: 0; padding-top: 30px; }
	
.main .details .button {  display: flex; }	
	
.main .details .button a { font-size: 0.65em; }	
	
	
	
	
	
}