/***********************************/
/*     GENERAL REUSABLE PORPOSE    */ 
/***********************************/
@media (max-width: 84em){
	.hero{
		max-width: 120rem;
	}

	.heading-primary{
		font-size: 4.4rem;
	}
}

/***********************************/
/*       Landscape Tablets         */
/***********************************/ 
@media (max-width: 75em){
	html{
		font-size: 56%;
	}

	.heading-secondary,
	.heading-secundary{
		font-size: 3.6rem;
	}
}


/***********************************/
/*        944px Tablets            */ 
/***********************************/
@media (max-width: 59em){
	html{
		font-size: 50%;
	}

	.hero,
	.table{
		grid-template-columns: 1fr;
	}

	.hero-img-box,
	.hero-content-box,
	.table-content-box,
	.table-box{
		text-align: center;
	}
	
	.hero-img{
		width: 60%;
	}
	
	.main-nav{
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		transform: translateX(100%);
		
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.5s ease-out;
		
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}	
	
	.nav-open .main-nav{
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transform: translateX(0);
	}

	.nav-open .icon-mobile-nav[name="close-outline"]{
		display: block;
	}

	.nav-open .icon-mobile-nav[name="menu-outline"]{
		display: none;
	}

	.main-nav-list{
		flex-direction: column;
		gab: 4.8rem;
	}
	
	.main-nav-link:link,
	.main-nav-visited{
		font-size: 3rem;
	}
	
	.btn-mobile-nav{
		display: block;
	}
}

/***********************************/
/*        704px Tablets    */ 
/***********************************/
@media (max-width: 44em){
		html{
		font-size: 45%;
	}
	
}

/***********************************/
/*     Bellow  544px Tablets       */  
/*      550/16=34  36*16           */ 
/***********************************/
@media (max-width: 34em){
	
	.section-hero {
		padding: 2.4rem 0 6.4rem 0;
	}

	.sbp-logo{
		width: 80%;
	}
		
	.contenedor {
		.nav-col: none;
	}

	.section-table-of-contents {
	  a {
		  font-size: 1.4rem;}
	}
}