/* CSS3 */
/* Developed by: MrCh0n <mrchon@gmail.com> */  
/* fecha de creacion: 11/02/2013 */  
/* fecha de modificacion: 11/02/2013 */
/*@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,300,200,100,600,700,800,900);*/
/* =================================================================== 
 * OBJETOS DEL HEADER
 * ===================================================================*/
 @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,700,600);

html , body {
	font-family: 'Raleway', cursive;
	font-weight: normal;
	font-size: 14px;
	color:#000; 
 }

A,A:link,A:visited,A:active{
	line-height: normal;
	text-decoration: none;
}
A:hover{
	line-height: normal;
	text-decoration: none;
	cursor:pointer;
}

BODY{
	height:100%;
	background-color: #fff;
}
#main{
	width:100%;
	overflow:hidden;
	position:relative;
	height:100%;
}
/* =================================================================== 
 * OBJETOS DEL HEADER
 * ===================================================================*/
header{
	border:0px solid #fff;
	background-color:#99343c;
	width:100%;
	height:80px;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
}
header>ul{
	border:0px solid #fff;
	margin:auto;
	text-align:center;
	width:100%;
	list-style-type: none;
	list-style: none;
	list-style-position: inside;
	padding:0;
}

header>ul>li{
	border:0px solid #fff;
	display:inline-block;
	float:left;
	overflow:hidden;
	text-align:center;
	width:20%;
	color:#fff;
}
header>ul>li:hover{
	color:#fff;
	text-decoration:none;
	cursor:pointer;
}

.menuclick1{
	height:80px;
}
.menuclick1:hover{
	background-image: url('../imagenes/sombraempresa.png');
	background-repeat:no-repeat;
	background-position: left top;
	background-size: 100% 100%;
	background-position:center;
}
.menuclick2:hover{
	background-image: url('../imagenes/sombraventaja.png');
	background-repeat:no-repeat;
	background-position: left top;
	background-size: 100% 100%;
	background-position:center;
}
.menuclick2{
	height:80px;
}
.menuclick3:hover{
	background-image: url('../imagenes/sombraservicios.png');
	background-repeat:no-repeat;
	background-position: left top;
	background-size: 100% 100%;
	background-position:center;
}
.menuclick3{
	height:80px;
}
.menuclick4:hover{
	background-image: url('../imagenes/sombracontacto.png');
	background-repeat:no-repeat;
	background-position: left top;
	background-size: 100% 100%;
	background-position:center;
}
.menuclick4{
	height:80px;
}

.divlogo{
	padding:0;
}
.logo{
	border:0px solid #fff;
	
}

.mapa:hover, .link:hover{
	cursor:pointer;
}
/* =================================================================== 
 * para centrar objetos de todos los lados
 * ===================================================================*/
.centerbox{
	
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;


	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;


	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;


	display:box;
	box-pack:center;
	box-align:center;
	
}

.txtaligleft{
	text-align:left;
}
.txtaligcenter{
	text-align:center;
}
.txtaligright{
	text-align:right;
}

.ofline{
	display:none;
}
.online{
	display:block;
}

/* == Window modal == */
.alert_block {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.alert_block_show {
    visibility: visible;
    opacity: 1;
    z-index: 10000;
}

.alert_window {
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    padding:0;
    position: fixed;
    text-align: justify;
    background-color: #fff;
    
    border: 0px solid #e1e1e1;
	top:0;
	width:100%;
	height:90%;
	
    /*-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/



    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.alert_window_show {
    top: 5%;
    opacity: 1;
    visibility: visible;
    z-index: 10001;
}
.alert_closeImg {
    margin-right: 0px;
    opacity: 0.7;
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}

.alert_content{
	border:0px solid #000;
	display:block;
	margin: 0;
	position: relative;
	/*height: calc(50% - 400px);
  	height: -moz-calc(50% - 400px);
  	height: -webkit-calc(50% - 400px);
 	height: -o-calc(50% - 400px);
  	height: -ms-calc(50% - 400px);*/
  	height:80%;
  	padding-bottom:10px;
  	margin-top:50px;
	
}

.alert_interno{
	border-bottom:0px solid #fff;
	overflow-x:hidden;
  	overflow-y:auto;
  	padding: 5px 5px  5px 15px;
	text-align:left;
	position:relative;
	color:#fff;
	font-size:1.3em;
	height:90%;
}


.alert_botones{
	border:0px solid #f00;
	text-align:right;
	height:20%;
	color:#fff;
	font-size:1.3em;
	padding-right:50px;
}

/*####################### RESPONSIVE ######################*/

/* hasta celulares iphones  6 plus*/
@media only screen and (max-width : 570px) {
	header{
		height:auto;

	}	
	header>ul>li{
		width:100%;
		padding:5px;
	}
	.divlogo{
		display:none;
	}
	#body_triangulo{
		width:100%;
	}
	.logo{
	/*	max-width:100%; */
		height:auto;
		display:block;
		margin-left:auto;
		margin-right:auto;
		width:100%;
	}
}
/* tabletas verticales*/
@media only screen and (min-width: 600px) and (max-width : 960px) {
	.logo{
	/*	max-width:100%; */
		height:auto;
		display:block;
		margin-left:auto;
		margin-right:auto;
		width:100%;
	}
}
/* tabletas horizontales, viejas laptop */
@media only screen and (min-width: 960px) and (max-width : 1024px) {
	.body_centertxt{
		margin-top:50%;
	}
	header>ul>li{
		
	}
}
/* demas */
@media only screen and (min-width : 1025px) {
	
}