/*   
       Creditos Web
	   Diseño: Roy Enríquez
       Programación: Jorge Eduardo Enríquez González.
	   04 de Mayo de 2020
	   Copyright: RESISTENCIAS SAN MARINO S.A DE C.V 2020
*/

/*******************Parametros iniciales en cero *************************************/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video 
{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
} 

@font-face 
{
	 font-family: "Montserrat Regular";
     src: url("webfonts/Montserrat-Regular.ttf");
}

@font-face 
{
	 font-family: "Montserrat Bold";
     src: url("webfonts/Montserrat-Bold.ttf");
}

@font-face 
{
	 font-family: "Montserrat SemiBold";
     src: url("webfonts/Montserrat-SemiBold.ttf");
}

@font-face 
{
	 font-family: "Montserrat Medium";
     src: url("webfonts/Montserrat-Medium.ttf");
}

@font-face 
{
	 font-family: "Roboto Medium";
     src: url("webfonts/Roboto-Medium.ttf");
}

@font-face 
{
	 font-family: "Roboto";
     src: url("webfonts/Roboto-Regular.ttf");
}



/*****************************************Sección del panel de navegación************************************************************************************/ 

nav
{
	width:100%;
	height:13.5%;
	position:fixed;
	background-color:#FFFFFF;
	z-index:999;
}

nav img
{
	width:14.7%;	
	margin-left:9.7%;
	margin-bottom:0.5%;
	margin-top:0.6%;
	position:absolute;
}

#icono 
{
	display:none; 
}

.menu
{
	position:absolute;
	margin-top:2.2%;
	width:35%;
	text-align:center;
	margin-left:63%;
}

.menu li  
{
	padding-right:0%;
	display: inline-block;
	width:32%;
}

.menu a
{
	text-decoration: none;
	color:#4C535B;
	font-family:Montserrat SemiBold;
	font-size:0.87vw;
	
}

.sub-menu 
{
	float:left;
	display:none;
	margin-top:5%;
	padding-left:0%;
	background-color:#FFFFFF;
}

.sub-menu li 
{
	display:block;
	margin-top:5%;
	width:100%;
}

.menu li:hover > ul
{
	display: block;
	
}

.menu li a:hover, .menu li:hover > a
{
	text-align:center;
	color:#004BBE;
	font-weight:bold;
}

/*****************************************Primera sección Banner************************************************************************************/

#banner
{
	height:18%;	
}

.centrado img
{
	width:100%;
	margin-top:3.8%;
}

.centrado h1
{
	width:22.2%;
	position:absolute;
	margin-top:24%;
	margin-left:14.5%;
	color:#FFFFFF;
	font-size:1.95vw;
	font-family:Montserrat SemiBold;
}

.centrado2
{
	display:none;
}


/*************************************Segunda sección*************************************************************************************************/

#segunda
{
	width:100%;
}

#segunda #imagen1 img
{
	margin-top:7.8%;
	margin-left:14.5%;
	width:28.7%;
	height:17.4%;
	float:left;
}

#segunda #texto1
{
	width:21.6%;
	margin-top:7.8%;
	margin-left:7.2%;
	font-size:2vw;
	font-family:Montserrat Bold;
	color:#28B4A0;
	float:left;
}

#segunda #texto2
{
	width:35.9%;
	margin-top:1.8%;
	margin-left:7.2%;
	font-size:1.05vw;
	font-family:Roboto;
	color:#4C535B;
	float:left;
}

/*************************************************Tercera sección************************************************************************************/

#tercera
{
	width:100%;
}

#tercera #texto3
{
	width:12.6%;
	margin-top:38%;
	margin-left:43.6%;
	font-size:2.25vw;
	font-family:Montserrat Bold;
	color:#28B4A0;
}

#tercera #texto4
{
	width:38.6%;
	margin-top:1.2%;
	margin-left:30.6%;
	font-size:1vw;
	font-family:Roboto;
	color:#4C535B;
	text-align:center;
}

/**********************************************Cuarta sección*****************************************************************************************/

#cuarta
{
	width:100%;
}

#cuarta #imagen2 img
{
	width:20.7%;
	margin-top:6.7%;
	margin-left:14.5%;
	float:left;
}

#cuarta #imagen3 img
{
	width:20.7%;
	margin-top:6.7%;
	margin-left:4.5%;
	float:left;
}

#cuarta #imagen4 img
{
	width:20.7%;
	margin-top:6.7%;
	margin-left:4.5%;

}

/************************************Quinta y ultima seccion footer************************************************************************/

footer #imagen7 img
{
	width:100%;
	float:left;
	padding-top:6%;
}

footer #imagen7-movil
{
	display:none;
}

footer #texto5
{
	width:5.5%;
	margin-top:26%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto Medium;
	font-size:1.06vw;
	color:#FFFFFF;
}

footer #texto6 
{
	width:16.4%;
	margin-top:29%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto7 
{
	width:16.4%;
	margin-top:31%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto8 
{
	width:16.4%;
	margin-top:33%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto9 
{
	width:16.4%;
	margin-top:35%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto10 
{
	width:16.4%;
	margin-top:37%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto6, #texto7, #texto8, #texto9, #texto10, a
{
	color:#FFFFFF;
	text-decoration: none;
}

footer hr
{
	width:78.2%;
	margin-left:14.4%;
	margin-top:42%;
	border-bottom: 1px solid #FFFFFF;
	position:absolute;
}

footer #texto11 
{
	width:20%;
	margin-top:44%;
	margin-left:14.4%;
	position:absolute;
	font-family:Roboto Medium;
	font-size:0.81vw;
	color:#FFFFFF;
	text-decoration: none;
}

footer #texto12
{
	width:10%;
	margin-top:26%;
	margin-left:42%;
	position:absolute;
	font-family:Roboto Medium;
	font-size:1.06vw;
	color:#FFFFFF;
}

footer #texto13 
{
	width:16.4%;
	margin-top:29%;
	margin-left:42%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto14 
{
	width:16.4%;
	margin-top:31%;
	margin-left:42%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto15 
{
	width:16.4%;
	margin-top:33%;
	margin-left:42%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto16 
{
	width:25%;
	margin-top:21%;
	margin-left:64%;
	position:absolute;
	font-family:Montserrat SemiBold;
	font-size:1.2vw;
	color:#FFFFFF;
}

footer form
{
	width:100%;
}

footer form #texto17
{ 
	width:14%;
	margin-top:27%;
	margin-left:64%;
	position:absolute;
	border: 0px solid white;
	opacity:0.7;
}

::-webkit-input-placeholder { color: white; } 

:-moz-placeholder { /* Firefox 18- */ color: white; } 

::-moz-placeholder { /* Firefox 19+ */ color: white; } 

:-ms-input-placeholder { color: white; }

:focus::-webkit-input-placeholder{/* Para iOS */color:transparent;}

footer form #forma1
{
	font-size:1.06vw;	
	padding:7.5%;
	border: 1px solid white;
	color:#FFFFFF;
	background:#004BBE;
	font-family:Roboto Medium;
}

footer form #texto18
{
	width:14%; 
	margin-top:27%;
	margin-left:78.2%;
	position:absolute;
}

footer form #forma2
{
	border: 0px solid white;
	color:#004BBE;
	background:#FFFFFF;
	text-align:center;
	padding-top:9%;
	padding-bottom:8%;
	padding-left:25%;
	padding-right:28%;
	font-family:Roboto Medium;
	font-size:1.06vw;	
}

footer #texto19 
{
	width:28%;
	margin-top:33%;
	margin-left:64%;
	position:absolute;
	font-family:Roboto;
	font-size:0.96vw;
	color:#FFFFFF;
}

footer #texto20 
{
	width:10%;
	margin-top:44%;
	margin-left:66%;
	position:absolute;
	font-family:Roboto Medium;
	font-size:0.81vw;
	color:#FFFFFF;
}

footer #texto21 
{
	width:12%;
	margin-top:44%;
	margin-left:80.9%;
	position:absolute;
	font-family:Roboto Medium;
	font-size:0.81vw;
	color:#FFFFFF;
}


/**********************************************************************************************************************************************/
/*********************************Area de Media Queries****************************************************************************************/
/**********************************************************************************************************************************************/

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


/**************Sección del panel de navegación********************************/ 

nav
{
	height:18.5%;
}

nav img
{
	width:38.7%;	
	margin-left:9.6%;
	margin-bottom:4.5%;
	margin-top:4.6%;
	position:absolute;
}

#icono
{
	display:block;
}   

#icono img
{
	width:8.2%;
	margin-left:80%;
	margin-top:6%;
} 

.menu
{
	display:none;
}

/***************************Primera sección Banner*********************/

#banner
{
	height:18%;	
}

.centrado
{
	display:none;
}

.centrado2
{
	display:block;
}

.centrado2 img
{
	width:100%;
	margin-top:3.8%;
}

.centrado2 h1
{
	width:63.4%;
	position:absolute;
	margin-top:115%;
	margin-left:18.4%;
	color:#FFFFFF;
	font-size:5.5vw;
	font-family:Montserrat SemiBold;
	text-align:center;
}

/*****************************Segunda sección********************/

#segunda
{
	width:100%;
	font-size:1.2vw;
}

#segunda #imagen1 img
{
	width:80.5%;
	margin-left:9.6%;
	padding-top:6%;
    float:none;
}

#segunda #texto1
{
	width:67.7%;
	margin-left:9.6%;
	padding-top:1%;
	position:static;
	font-size:4.5vw;
	text-align:left;
	font-family:Montserrat Bold;
	color:#28B4A0;
}

#segunda #texto2
{
	width:79.7%;
	margin-left:9.6%;
	padding-top:4%;
	position:static;
	font-size:4vw;
	text-align:left;
	font-family:Roboto;
	color:#4C535B;
}

/**********************Tercera sección****************************/

#tercera #texto3
{
	width:32.5%;
	margin-top:128%;
	margin-left:33.8%;
	font-size:4vw;
}

#tercera #texto4
{
	width:80.5%;
	margin-top:8%;
	margin-left:9.6%;
	font-size:4vw;
}

/*************************Cuarta sección**************************/

#cuarta #imagen2 img
{
	width:80.5%;
	margin-top:12%;
	margin-left:9.6%;
	float:none;
}

#cuarta #imagen3 img
{
	width:80.5%;
	margin-top:6.7%;
	margin-left:9.6%;
	float:none;
}

#cuarta #imagen4 img
{
	width:80.5%;
	margin-top:6.7%;
	margin-left:9.6%;

}

/******************Quinta y ultima seccion footer*********************/

footer #imagen7 
{
	display:none;
}

footer #imagen7-movil 
{
	display:block;
}

footer #imagen7-movil img
{
	width:100%;
	float:none;
	padding-top:16%;
	position:absolute;
}

footer #texto5
{
	width:24.8%;
	margin-top:46%;
	margin-left:9.6%;
	font-size:4vw;
}

footer #texto6 
{
	width:64.2%;
	margin-top:56%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto7 
{
	width:64.2%;
	margin-top:64%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto8 
{
	width:64.2%;
	margin-top:72%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto9 
{
	width:64.2;
	margin-top:80%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto10 
{
	width:64.2%;
	margin-top:88%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer hr
{
	width:80%;
	margin-left:9.6%;
	margin-top:245%;
}

footer #texto11 
{
	width:90%;
	margin-top:276%;
	margin-left:5%;
	font-size:3.5vw;
	text-align:center;
}

footer #texto12
{
	width:64.2%;
	margin-top:105%;
	margin-left:9.6%;
	font-size:4vw;
}

footer #texto13 
{
	width:64.2%;
	margin-top:118%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto14 
{
	width:64.2%;
	margin-top:126%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto15 
{
	width:64.2%;
	margin-top:134%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto16 
{
	width:70%;
	margin-top:150%;
	margin-left:9.6%;
	font-size:4vw;
}

footer form #texto17
{	 
	width:90.5%;
	margin-top:169%;
	margin-left:9.6%;
	text-align:left;
	
}

footer form #forma1
{
	
	font-size:3vw;	
	padding-left:4%;
	padding-right:44%;
	padding-top:5%;
	padding-bottom:5%;
	border: 1px solid white;
	
}

footer form #texto18
{
	width:45.5%; 
	margin-top:190%;
	margin-left:9.6%;
	position:absolute;
}

footer form #forma2
{
	padding-top:9%;
	padding-bottom:8%;
	padding-left:25%;
	padding-right:28%;
	font-size:2.5vw;	
}

footer #texto19 
{
	width:80%;
	margin-top:213%;
	margin-left:9.6%;
	font-size:3.5vw;
}

footer #texto20 
{
	width:64.2%;
	margin-top:260%;
	margin-left:32.2%;
	position:absolute;
	font-size:3.5vw;
}

footer #texto21 
{
	width:64.2%;
	margin-top:268%;
	margin-left:28.2%;
	font-size:3.5vw;
}


}

@media screen and (max-width: 450px)
{
nav
{
	height:15%;
}

@media screen and (max-width: 350px)
{
nav
{
	height:12%;
}
}

@media screen and (max-width: 300px)
{
nav
{
	height:10%;
}
}

@media screen and (max-width: 250px)
{
nav
{
	height:8%;
}
}