/* ........................RESET DEFAULTS...................... */

/** { box-sizing: border-box; }*/

html { font-size: 16px; }
body { font-size: 62.5%;  /* 1em = 10px  */ }

html, body, h1, h2 ,h3,
p, ol, ul, li , a {

	padding: 0;
	border: 0;
	margin: 0;
	font:herit;
	font-family: 'Montserrat', 'arial', cursive;
	box-sizing: border-box;
}

p { 
	font-family: 'raleway', 'arial', sans-serif;
	font-size: 1.5em;
	line-height: 1.45em;
	letter-spacing: 0.0em;
	color: #ffffff;
	text-align: left;
	font-weight: 400;
}


p.dark {color: #23324f;}

a 	{
	text-decoration: none;
	font-family: 'Montserrat', 'arial', sans-serif;
}

a:link, a:hover, a:visited, a:active {

	color: #ffffff;
	letter-spacing: 0.1em;
}

li 	{ list-style: none; }


			/* .......TITULOS......... */

h1 { 
	font-size: 3.6em;
	/*letter-spacing: 0vw;*/
	font-weight: 800;

	text-align: center;
	color: #ffffff;
	/*padding-top: 1em;*/

	font-family: 'raleway';

	}

h2 {
	font-size: 1.6em;
	/*letter-spacing: 0vw;*/
	font-weight: 300;

	text-align: left;
	color: #ffffff;

	font-family: 'raleway';

}


			/* .......IMAGENES......... */

img {
	box-sizing: border-box;	
	width: 100%; margin: 0; padding: 0;
	display:block;
}





			/* .......INDEX......... */											 .INDEX-------------------------------------------------------------{}

			/* .......NAVEGADOR......... */													.MENU-----------MENU----------------------------------- {}

.menu {
	background-color: rgb(14, 82, 207);
	width: 100%;
/* 	height: 9vw; */

	position: static; /* fixed; */
	top: 0vw;
	z-index: 560;

	display: flex;
	justify-content: center;
	align-items: center;

			border: 0px solid yellow;
			box-sizing: border-box;
}

.menu img {	width: 150px; margin: 10px 0 10px auto;}

.menu .logo {width: 30% }

.menu .marca { 
	display: flex; align-items: center;
	border: 0px solid green; 
	width: 70%;
	height: 4vw; }


.menu .marca p {
	font-size: 60px;
	padding-left: 30px;
} 






/* .contenido {display: flex; align-items:center;} */
.contenido .m1 {width: 100%; border: 0px solid green; margin: 0 auto;} 
.contenido .m1 img {width: 300px; margin: 40px auto 10px auto;}

.contenido .m2 {padding-bottom: 50px;}
.contenido .m2 p {margin: 0 auto; text-align: center; font-size: 30px;} 
.contenido .m2 p.t1 {color: rgb(6, 145, 6); font-weight: 800; letter-spacing: 1.5px;} 
.contenido .m2 p.t2 {color: rgb(109, 129, 167); font-weight: 500; font-family: arial; letter-spacing: 0.08em;} 

.contenido .m3 img {width: 350px; margin: 0px auto 10px auto;}

.contenido .m4 {border: 0px solid rebeccapurple; margin: 40px 0 50px 0;}
.contenido .m4 .pack {
	width: auto; 
	border: 0px solid rgb(255, 80, 168);
	display: flex; align-items: center; 
	justify-content: center;}
.contenido .m4 img {width: 200px; border: 0px solid coral;}
.contenido .m4 #last {width: 140px; margin-left:30px; }

			/* .......FOOTER......... */											 .FOOTER-------------------------------------------------------------{}



.main-footer {
	padding-top: 3vw;
	padding-bottom: 3vw;
	background-color: rgb(14, 82, 207);

	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.main-footer img { width:8vw; margin-bottom: 10px;}

.main-footer p { font-size: 0.8vw; text-align: center;}


  										/* .......................RESPONSIVE...................... */    .RESPONSIVE-------------------------------------------------------------{}
  										/* .......................RESPONSIVE...................... */    .RESPONSIVE-------------------------------------------------------------{}
  										/* .......................RESPONSIVE...................... */    .RESPONSIVE-------------------------------------------------------------{}



@media screen and (max-width: 2000px) {



		/* .......STANDARS EN PX......... */


		.main-footer {padding-top: 35px; padding-bottom: 35px;}
		.main-footer img { width:110px; margin-bottom: 10px;}
		.main-footer p { font-size: 1.2em;}



}

@media screen and (max-width: 1500px) {


}


@media screen and (max-width: 1380px) {

}

@media screen and (max-width: 1280px) {

}

  										/* .......................1280 ....................... */   

@media screen and (max-width: 1280px) {

}


@media screen and (max-width: 1100px) {


}

  										/* .......................1024 Tablet wide....................... */   


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



.menu .marca p {
	font-size: 40px;
} 




}

@media screen and (max-width: 900px) {

.menu .marca p {
	font-size: 30px;
} 

}

@media screen and (max-width: 800px) {


.contenido .m4 .pack {	
	flex-direction: column;
	/* flex-wrap: wrap;  */} 
.contenido .m4 #last {margin-left:0px; margin-top: 25px; }

}

  										/* .......................768 Tablet vertical....................... */   


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


}

  										/* .......................720 Smart wide....................... */   


@media screen and (max-width: 720px) {

}
  										/* .......................600 Smart wide....................... */   


@media screen and (max-width: 600px) {

		




  										/* .......................480 Smart wide....................... */   


@media screen and (max-width: 480px) {

.menu .marca p {font-size: 35px;} 

.menu .marca { 
	display: flex; align-items: center;
	border: 0px solid red; }
.menu {	flex-direction: column;}


.menu .logo {width: 100%}
.menu .logo img {margin: 20px auto 30px auto;}

.menu .marca { 

	width: 100%;
	height: 4vw; }

.menu .marca p {font-size: 20px; display: block;  text-align: center;  padding: 0; margin: 0 auto; margin-bottom: 30px;
border: 0px solid red;} 

.m2 {padding: 0 10px;}

}

}


@media screen and (max-width: 430px) {



}

@media screen and (max-width: 376px) {
.contenido .m1 img {width: 80vw; margin: 40px auto 10px auto;}
.contenido .m3 img {width: 80vw; margin: 0px auto 10px auto;}

}

  										/* .......................320 Smart vertical....................... */   

@media screen and (max-width: 325px) {

}

@media screen and (max-width: 320px) {


}