/*
Theme Name: Escaleras Modernas
Theme URI: https://escalerasmodernas.com.mx
Author: Carlos Sanchez by interweb gdl
Author URI: https://interwebgdl.com.mx/
Description: Escaleras modernas de acero inoxidable
Version: 1.0
*/

* {
	border:0;
    margin:0;
	padding:0;

	}

	/* Pasar los elementos a block*/


header, nav, section, aside, article, figure, figcaption, hgroup, footer, { display:block}

h1{
	font-size: 1.3em;
}
h2{font-size: 1.2em;}

body{
	/*background-image: url(images/body.png);*/
	background: #000;
}
.container{
	margin: 0 auto;
}
.row{
	margin: 0 auto
}

/***********          *****************/
/*******  H E A D E R  ********/

header{
	
	max-width: 100%;
	width: 100%;
	background: #F6F6F6;
	height: auto;
	
}
.social-top{
	max-width: 100%;
	background:#333;
	padding: 0.7em 0;
	color: #fff;
}
.social-top a{
	color: #fff;
	font-size: 1.2em;
}

/************************************************************** M E N U ******************************/

.menu{
	margin-top: 3em;
}

@media only screen and ( min-width: 768px ){
.menu-trigger{display:none}
}
#main-menu{display:table-cell;width:73%;text-align:right;vertical-align:middle;line-height:1.3em}
#main-menu ul,#main-menu li{margin:0;padding:0;list-style:none;background:0}
#main-menu ul li{display:inline-block}
#main-menu ul li a{padding:.5em 1.5em;background:transparent;
	-webkit-border-radius:10em;-moz-border-radius:10em;
	-ms-border-radius:10em;-o-border-radius:10em;border-radius:10em;color:#7e89a3;display:block;
	font-size: 1.5em;
}
#main-menu ul li a:hover{background:#f6f6f8;text-decoration:none}
#main-menu ul li.featured a{background:#50c5ab;color:#fff}
#main-menu ul li.featured a:hover{background:#329780}

@media only screen and (max-width: 53.125rem){

#main-menu{width:65%}#main-menu ul li a{padding:.5em 1em}
}

@media only screen and (max-width: 46.25rem){

.menu-trigger{display:block;float:right;padding:2.5em 1em 1em 1em;cursor:pointer;width:20%;text-align:right}
#main-menu{width:100%;clear:both;text-align:center;background:#f6f6f8;border:solid .0625rem #d9d9e2;padding:.5em;margin-bottom:2em}
#main-menu.open{display:block}
#main-menu.closed{display:none}
#main-menu ul li{display:block;width:100%}
#main-menu ul li a{padding:.5em 1em}
#main-menu ul li a:hover{background:#d9d9e2}
#main-menu ul li.featured a{background:0;color:#7e89a3}
#main-menu ul li.featured a:hover{background:#d9d9e2}
}

/************************************************************* S E C T I O N   M A I N *********************/

.main{
	max-width: 100%;
	width: 100%;
	background: #fff;
}

.display{
	max-width: 100%;
	width: 100%;
	z-index: 5;
}
.example-animation h3{
	font-family: 'Raleway',400,700 sans-serif;
	font-size: 2.5em;
	color: #fff;
}
.example-animation a{

	border: 1px solid#fff;
	width: auto;
	border-radius: 3px;
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-family: 'Raleway',400,700 sans-serif;
	font-size: 1em;
	padding: 0.3em;
}
.example-animation a:hover{
	border: 1px solid#424251;
}

@media only screen and ( max-width: 768px ){
	.example-animation h3{font-size: 1.2em;}
	.example-animation a{font-size: 1em; padding: 0.2em;}
}


/************************************************** P R O D U C T O S   I N I C I O**************/

.prod-inicio{
	display: inline-block;
	/*border: 1px solid#d9d9e2;*/
	padding: 1em auto;
	margin: 0.5em auto;	
	padding-top: 3em;
}
.prod-inicio:hover{
	border: 1px solid#228DCB;
	 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	
}
.prod-inicio img{
	width: 100%;
}


.prod-img{
	max-width: 100%;
	width:100%;
}
.prod-text{
	max-width: 90%;
	padding: 0.5em 1em;
	
}
.prod-text h2{
	text-align: center;
	color: #424251;
	font-family: 'Raleway',400,700 sans-serif;
}
.prod-text p{
	text-align: justify;
	color: #84939F;
	font-family: 'Raleway',400,700 sans-serif;
}

/******************************************************* B I E V E N I D A *********/

.bienvenida {
	background:#F4F4F4;
		padding-top: 2em;
	padding-bottom: 2em;
	border-bottom: 1px solid#ccc;
}
.bienvenida h1{
	font-family: 'Raleway',400,700 sans-serif;
	font-size: 2.2em;
	color: #333;
	text-align: left;
}
.bienvenida span{
	font-family: 'Raleway',400,700 sans-serif;
	font-size: 1.5em;
	color: #31A2E1;
	text-align: center;


}

.bienvenida .accion1 a{
	display: block;
	border: 1px solid#666;
	width: 12em;
	padding: 0.6em;
	border-radius: 3px;
	text-decoration: none;
	color: #666;
	text-align: center;
	margin-top: 1em;
	font-size: 1.5em;
}
.bienvenida .accion1 a:hover{
	border: 1px solid#424251;
	background:#31A2E1;
	color: #fff;
}

/************************************************************ F O O T E R  ********************/

footer{
	max-width: 100%;
	width: 100%;
	background: #394650;
	color: #fff;
}
footer h2{
		font-family: 'Raleway',400,700 sans-serif;
	font-size: 1.5em;
	color: #fff;
	display: block;
	margin-bottom: 1em;
}
footer span{
	display: block;
	margin-bottom: 1em;
}
footer ul{
	outline: none;
	list-style: none;
}
.derechos{
	max-width: 100%;
	width: 100%;
	background: #2C3740;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
}
.derechos a{
	color: #fff;
	text-decoration: none;
}
.derechos a:hover{
	opacity: 0.8;
}


/*****************************************************************  G A L E R I A *********************/

#verticalTab{
	margin-top: 2em;
}
 
.resp-tabs-container ul{
	outline: none;
	list-style: none;
}
.resp-tabs-container li{
	display: inline-block;
	vertical-align: top;
}



.galeria ul{
	outline: none;
	list-style: none;
}
.galeria li{
	display: inline-block;
	margin: 1em;
}

/*********************************************************** F O R M A  d e  C O N T A C T O   I N I C I O *************/


.contacto{

	padding: 0.7em;
}

.contacto-enviado  img{

	width: 35%;
} 
.contacto-enviado {
	text-align: center;
	padding-left: 3em;
}
/**forma contacto**/
.forma-contacto{
	border-right: thin dashed gray;
}

.direccion{
	padding-left: 3em;
}
.direccion ul{
	outline: none;
	list-style: none;
}
/** ubicacion*/
.ubicacion{
	margin-top: 2em;
	margin-bottom: 2em;
}

.text-form-contact{
	max-width:100%;
	display:block;  font-family: 'Raleway', sans-serif; text-align:left; 
	color:#666; font-size:1em; }
	
.text-area{
	max-width:100%;
	width:90%; 
	font-family: 'Raleway', sans-serif;
	color:#fff; font-size:1.2em; height: 7em;
	border:0.15em solid#DBDBDB; background:#484545;
	margin:0.7em; border-radius: 5px; padding-left: 5px; padding-top: 1em; 
	}

.box-form-contact{
	max-width:100%;
    margin-left:0.5em;
	width:90%; height:auto; font-family: 'Raleway', sans-serif; color:#fff; font-size:1.1em;
	border:0.10em solid#DBDBDB; background:#484545; margin-top: 0.5em; margin-bottom: 0.5em;
	border-radius: 5px; padding-left: 5px; padding-top: 0.5em; padding-bottom: 0.5em;
	
	}
	
.buton-contact{
	max-width:100%;
	font-family: 'Raleway', sans-serif;font-size:1.3em; width:auto; height:auto;
	border-radius:0.2em; padding: 0.6em 1.5em;
	color:#FFF; margin:0 1em; background:#337ab7; border:thick; margin-right: 3em;
	}
.buton-contact:hover{ opacity: 0.9;}



.contacto-text h2{
	text-align: center;
	font-size: 1.4em;
}
.contacto-text ul{
	margin-top: 1em;
}
.contacto-text li{
	display: inline-block;
	margin: 0.4em;
}
.contacto-text li:hover{
	/*-moz-transform: rotate(2deg); -webkit-transform: rotate(2deg);*/
	transform:  rotate(0deg) scale(1.111) skew(0deg) translate(-2px);
	-webkit-transform:  rotate(0deg) scale(1.111) skew(0deg) translate(-0px);
	-moz-transform:  rotate(0deg) scale(1.111) skew(0deg) translate(-2px);
}


/*********************************************************** S E R V I C I O S *************************/

.servicios{
	background: none; 
	max-width: 100%;
	z-index: 99;
	
}

/************************************************************** E M P R E S A ********************/


.empresa h4{
	font-family: 'Raleway', sans-serif;
	 color:#333; font-size:1.5em;
	 margin-bottom: 1em;
}
.empresa p{
	font-family: 'Raleway', sans-serif;
	 color:#666;
	 font-size: 1em;
	 margin-top: 1em;
	 margin-bottom: 1em; 
}
.empresa ul{
	outline: none;
	list-style: none;
}
.empresa li{
	font-family: 'Raleway', sans-serif;
	 color:#666;
	 font-size: 1em;
}