@import 'https://fonts.googleapis.com/css?family=Ropa+Sans';
@import url('https://fonts.googleapis.com/css?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:100,300,400,500,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;600;700;900&display=swap');
/*@import url(menu.css);*/
/*@import url(menu2.css);*/
@import url(temporadaimpuestos.css);
@import url(informacion.css);
@import url(destacados.css);
@import url(alianzas.css);
@import url(piedepagina.css);
@import url(contactenos.css);
@import url(aboutus.css);
@import url(servicios.css);
@import url(contactus.css);
@import url(portada.css);
@import url(anteportada.css);
@import url(partners.css);
@import url(locations.css);
@import url(services.css);
@import url(ppploan.css);
@import url(estilosmodal.css);





*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	
	font-family: 'Ropa Sans', sans-serif;
	background: #fff;
}
header{
	width: 100%;
	height: 105px; /* altura de la cabecera donde esta el LOGO */
	background: #ccc;
	color: #000;
	box-shadow: 2px 2px 5px #000;
	
	

	/* para que la cabecera se quede pegada enb la parte superior se agregan las sigueintes lineas en el header*/ 
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;	
}

a {
  color: #fff;
  text-decoration: none;
  background: transparent;  
}

.escondido{ display: none; }

.logomin{
	display: none;
}

.logo{
	display: table;
	top: 0px;
	margin-top: -8px;
	margin-left: 0px;
	position: absolute;	
}



.container{
	width: 100%;
	margin: auto;
}

.contenedor{
	width: 98%;
	margin: auto;
}
.contenedor2{
	width: 100%;
	margin: auto;
}
.contenedor3{
	width: 100%;
	margin: auto;
}

h1 {
	float:left; /* esto es para que los elementos que estan dentro de h1 queden flotando al costado izquierdo */
	padding: 5px;
}

header .contenedor {
	display: table;
}
/*estas 2 lineas de section es para que cada ves que agregue una nueva información en otra etiqueta de section me la ubique abajo*/
section {
	width: 100%;
	margin-bottom: 25px;
}

/*
#videos{
	background: #DCDCDC;
	padding: 20px;
	margin: 0;
	
}

#videos .video {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

*/
#promo{
width: 100%;
background: #fff;
padding: 0px;
margin: 0px;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.imgpromo{

padding: 0px;
margin: 0px;
background: #fff000;
}

#promo .imgpromo img{

padding: 0px;
margin-bottom: -4px;
}


.infopromo{
	width: 600px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
}
.infopromo h2{
	color: #000;
	font-size: 22px;
	text-align: center;
	
}
.infopromo li{
	color: #000;
	font-size: 20px;
}


@media (min-width: 1024px){
	.contenedor{
		width: 100%;
	}
	.contenedor3{
		width: 100%;	
	}


}

@media (max-width: 1400px){
	
	
		.infopromo h2{
	font-size: 20px;
}
.infopromo li{
	font-size: 17px;
}

#promo .imgpromo img{
width: 612px;
}
}

@media (max-width: 1130px){
	
	header{
		height: 70px;
	}
	
}


@media (max-width: 1920px){
	.logo img{
	width: 70%;
	}
}

	

@media (max-width: 1130px){
	.logo{
	display: none;
}

	.container .logomin{
	display: table;
	padding-top: 8px;
	padding-left: 15px;
	position: relative;
}
	.logomin img{
	width: 80%;
	}
header{
	background: #fff;
	}
}

@media (max-width: 612px){
	.infopromo{
		padding-bottom: 10px;
	}
	.infopromo h2{
	font-size: 20px;
}
.infopromo li{
	font-size: 17px;
}

#promo .imgpromo img{
width: 612px;
}
}

@media (max-width: 450px){
	.video iframe{
	height: 100%;
	width: 100%;
}
#promo .imgpromo img{
width: 450px;
}

	}