/* ==========================================================================
                     RECURSOS TIPO DE LETRA
========================================================================== */

@font-face {
    font-family: 'code_bold';
    src: url('../fonts/segoeui.ttf') format("truetype");
}

@font-face {
    font-family: 'duepuntozero';
    src: url('../fonts/segoeuil.ttf') format("truetype");
}


@font-face {
    font-family: 'blackr';
    src: url('../fonts/blackr.ttf') format("truetype");
}

    .linea{
        width: 80%;
        height: 2px;
        margin-left: auto;
        margin-right: auto;
        background-color:#e1e1e1;
        border: 0 none;
        margin-top: 100px;
        margin-bottom:100px;
        
    }

    .lista{
         display: none;
    }

    .uk-offcanvas-bar{
        font-family:"duepuntozero";
        font-size: 20px;
    }



    .font-vimeo{
        font-family:"blackr";
        font-size: 30px;
    }
/* ==========================================================================
        			ESTRUCTURA GENERAL
========================================================================== */

.menuFoter a{
	color: #fff;
	text-decoration: none;
}

.menuFoter a:hover{
	color: #fff;
	text-decoration: none;
}

#centradoVerticalPadre {
	display: table;
	height:100%;
}
#centradoVerticalHijo {
	display: table-cell;
	vertical-align: middle;
}


#centradoVerticalPadre_boton {
	display: table;
	height:100;
}
#centradoVerticalHijo_boton {
	display: table-cell;
	vertical-align: middle;
    
}

.fasesDerecha{
	text-align: right !important;
}
.fasesIzquierda{
	text-align: left !important;
}

.fasesJustificado{
	text-align: justify !important;
}

.fasesCentrado{
	text-align: center !important;
}

.contenidoOpcion{
	background-color: #333131;
	color: #fff;
}
.contenidoOpcionNegro{
	background-color: #000;
	color: #fff;
    border:none;
}

.testimonioIcono{
	color: #009dd8;
}


.boton{
	background: #009dd8;
	color: #fff;
	border-style: none;
}


.AnchoComentario{
    width: 80%;
}
.verticalInferior{
    vertical-align: bottom!important;
}

.espacioIzquierdo{
    padding-left: 20px;
}
.espacioDerecho{
    padding-right: 20px;
}


.menulogo{
        width: 50px;
        height:60px;
        
    }

/* ==========================================================================
        			PRESENTACION POR RESULUCION
========================================================================== */

.menu li{
   font-family:"duepuntozero";
   font-size: 20px;
   padding-right: 20px;
   padding-left: 20px;
   padding-bottom: 1px;
   padding-top:1px;
   list-style-type: none;
   display: inline;
}

.menu li:hover{
	background-color: #fff;
	border-radius: 20px;
}

.panel-menu{
	background-color: rgba(255, 255, 255, 0.8);!important;
	padding: 0px!important;
}


.menuPrincipal a{
	color: #e1e1e1;
	text-decoration: none;
}

.menuPrincipal a:hover{
	color: #000;
	text-decoration: none;
}


#tituloEmpresa{
	font-family:"code_bold";	
	padding-left: 100px;
	padding-right: 200px;
}




h1{
	font-family:"duepuntozero"!important;
	text-align: center!important;
	outline-width:40px;
	line-height:30px;
}


h2{
   	font-family:"duepuntozero"!important;
   	text-align: center!important;
    color: #000!important;
}

h3{
   	font-family:"duepuntozero"!important;
   	text-align: center!important;
	color: #fff!important;
}


h5{
	font-family:"duepuntozero"!important;
	text-align: center!important;
	outline-width:40px;
	line-height:30px;
    color: #fff!important;
}

h6{
   	font-family:"duepuntozero"!important;
   	text-align: center!important;
    color: #fff!important;
}

hr{
   	margin-bottom: 10px;
    margin-top:0px;
}



.tituloFooter{
   	font-family:"duepuntozero"!important;
   	text-align: center!important;
    color: #fff!important;
    line-height:0px!important;
}

.contenidoPrivacidad{
    font-family:"duepuntozero"!important;
}

.contenidoPie{
    font-family:"duepuntozero"!important;
}

.contenidoCopiReader{
    font-family:"duepuntozero";
}

.contenido{
   font-family:"duepuntozero";
   text-align: center;
   width: 100%;
   line-height: 25px;
}


.fondoProyecto{
	background-color: rgba(0, 0, 0, 0.5);!important;
    color: #fff!important;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}
.fondoProyectoContenido{
	background-color: rgba(255, 255, 255, 0.5);!important;
    color: #000!important;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.fondoNegroDegradado{
	background-color: rgba(0, 0, 0, 0.5);!important;
    color: #fff!important;
}

.fondoNegro{
	background-color: #000!important;
    color: #fff!important;
}

.galeriaGrupo{
	width: 100%;
	height: 100%;
	vertical-align:middle;
	background-color: #000;
    color: #fff!important;
}


.galeriaOpcion{
	width: 100%;
	height: 100%;
	vertical-align:middle;
	background-color: #333131;
}
.galeriaOpcion:hover{
	background-color: #000;
}

.uk-button-accion {
  font-family:"duepuntozero";
  background-color: #009dd8;
  
  color: #ffffff;
  padding: 10px; 
  text-decoration: none;
  border-radius: 6px;
}

/* Hover */
.uk-button-accion:hover,
.uk-button-accion:focus {
  font-family:"duepuntozero";
  background-color: #fff;
  color:  #009dd8;	
  text-decoration: none;
}


.uk-accordion-title{
 color:#000!important;
 width: 300px!important;

}

.frasesBlanco{
    color: #fff !important;
    text-decoration: none;
}
.frasesNegro{
    color: #000 !important;
    text-decoration: none;
}

.contenidoGaleria{
    background-color: rgba(0, 0, 0, 0.8);!important;
    color: #fff!important;
    padding-bottom: 20px;
    padding-top: 20px;
	padding-right: 20px;
    padding-left: 50px;
}

.contenidoMarco{
    padding-bottom: 0px;
    padding-top: 0px;
	padding-right: 20px;
    padding-left: 50px;
}



.centradoObjetos{
    aling-items: center;
    justify-content: center;     
}






/* -----------------------   PANTALLA CELULAR ----------------------- */
@media (max-width: 480px) {	
    .anchoLinea{
        width: 1px;
    } 
    .menulogo{
        width: 50px;
        height:60px;
        
    }
	.menu ul{
	  padding-top: 8px;
	}
	
	.panel-menu{
		height: 40px;
	}
	#tituloEmpresa{
		font-size: 35px;
	}
	
    
	.h_icono{
        font-size: 52px !important;   
    }
    a.flechaRetornoImagen:link{
        text-align: right!important;
        font-size: 36px;
        text-decoration:none; 
    }
     .flechaRetorno{
        text-align: right!important;
        font-size: 36px;
        text-decoration:none; 
    }
    
	h1{
		font-size: 26px !important;
	}
	h2{
		font-size: 20px !important;
	}
	h3{
		font-size: 18px !important;
	}
    
	h5{
		font-size: 24px !important;
        font-weight: bold;
        line-height: 38px;
	}
    h6{
		font-size: 16px !important;
         line-height: 38px;
	}

    .tituloFooter{
		font-size: 16px !important;
	}
    
	.uk-ico-accion-t0{
	  font-size: 20px;
	}
	
	.uk-ico-accion-t1{
	  font-size: 10px;
	}

	
	.contenido{
	  font-size: 16px;
	}
    .contenidoPie{
	  font-size: 13px;
	}
    
    .contenidoPrivacidad{
	  font-size: 11px;
	}
    
    .uk-button-accion-t2{
	  font-size: 15px!important;
	}
    .uk-button-accion-menu{
	  font-size: 15px!important;
	}

	.galeriaOpcion{
		height: 200px!important;
	}
	
	
	.uk-button-accion-t0{
	  font-size: 80px;
	}
	
	.uk-button-accion-t1{
	  font-size: 25px;
	}
    
    #modal {
        top:70%!important;
    }
	
    .mapaSize{
        height:200px;
    }
    
    .forServicios{
        height: 400px;
    }
    
    .footerEspacioPymexis{
        padding-left: 42px;
        text-align: left;
    }
    
}

/* -----------------------   PANTALLA SMARTPHONE ----------------------- */
@media (min-width: 481px) and (max-width: 767px) {	
    .anchoLinea{
        width: 280px;
    } 
    .menulogo{
        width: 50px;
        height:60px;
        
    }
    
	.menu ul{
	  padding-top: 8px;
	}
	
	.panel-menu{
		height: 40px;
	}
	#tituloEmpresa{
		font-size: 22px;
        font-weight: bold;
	}
	
	.h_icono{
        font-size: 56px !important;   
    }	
    a.flechaRetornoImagen:link{
        text-align: right!important;
        font-size: 38px;
        text-decoration:none; 
    }
     .flechaRetorno{
        text-align: right!important;
        font-size: 38px;
        text-decoration:none; 
    }
	h1{
		font-size: 22px !important;
        font-weight: bold;
	}
	h2{
		font-size: 22px !important;
	}
	h3{
		font-size: 20px !important;
	}
    
    h5{
		font-size: 20px !important;
        font-weight: bold;
        line-height: 38px;
	}
    h6{
		font-size: 18px !important;
         line-height: 38px;
	}
    
    .tituloFooter{
		font-size: 18px !important;
	}
    
	.uk-ico-accion-t0{
	  font-size: 22px;
	}
	.uk-ico-accion-t1{
	  font-size: 11px;
	}
	
	.contenido{
	  font-size: 18px;
	}
    
    .contenidoPie{
	  font-size: 16px;
	}
    
    .contenidoCopiReader{
	  font-size: 13px;
	}
    
    .contenidoPrivacidad{
	  font-size: 10px;
	}
    
	.uk-button-accion-t2{
	  font-size: 15px!important;
	}
    
    .uk-button-accion-menu{
	  font-size: 15px!important;
	}
    
    .galeriaOpcion{
		height: 200px!important;
	}
	
	.uk-button-accion-t1{
	  font-size: 25px;
	}
	
    #modal {
        top:70%!important;
    }

    .mapaSize{
        height:200px;
    }
    
    .forServicios{
        height: 450px;
    }
    
    .footerEspacioPymexis{
        padding-left: 18px;
        text-align: left;
    }
}


/* -----------------------   PANTALLA TABLET 1 ----------------------- */
@media (min-width: 768px) and (max-width: 800px) {	
    .anchoLinea{
        width: 300px;
    }
    .menulogo{
        width: 50px;
        height:60px;
        
    }
	.menu ul{
	  padding-top: 8px;
	}
	
	.panel-menu{
		height: 40px;
	}
	#tituloEmpresa{
		font-size: 22px;
        font-weight: bold;
	}
	
	.h_icono{
        font-size: 60px !important;   
    }	
    a.flechaRetornoImagen:link{
        text-align: right!important;
        font-size: 40px;
        text-decoration:none; 
    }
     .flechaRetorno{
        text-align: right!important;
        font-size: 40px;
        text-decoration:none; 
    }
	h1{
		font-size: 22px !important;
        font-weight: bold;
	}
	h2{
		font-size: 22px !important;
	}
	h3{
		font-size: 18px !important;
	}
	
    h5{
		font-size: 20px !important;
        font-weight: bold;
        line-height: 38px;
	}
    h6{
		font-size: 16px !important;
         line-height: 38px;
	}
    
    .tituloFooter{
		font-size: 16px !important;
	}
    
	.uk-ico-accion-t0{
	  font-size: 22px;
	}
	.uk-ico-accion-t1{
	  font-size: 11px;
	}
	
	.contenido{
	  font-size: 16px;
	}
    
    .contenidoPie{
	  font-size: 16px;
	}
    
    .contenidoCopiReader{
	  font-size: 13px;
	}
    
    .contenidoPrivacidad{
	  font-size: 11px;
	}
    
	.uk-button-accion-t2{
	  font-size: 19px!important;
	}
    
    .uk-button-accion-menu{
	  font-size: 19px!important;
	}

	.galeriaOpcion{
		height: 200px!important;
	}
    
    #modal {
        top:70%!important;
    }

    .mapaSize{
        height: 730px;
    }
    
    .forServicios{
        height: 400px;
    }
    
    .footerEspacioPymexis{
        padding-right: 120px;
        text-align: right;
        
    }
}

/* -----------------------   PANTALLA TABLET 2 ----------------------- */
@media (min-width: 801px) and (max-width: 980px) {	
    .anchoLinea{
        width: 800px;
    }
    .menulogo{
        width: 50px;
        height:60px;
        
    }
	.menu ul{
	  padding-top: 8px;
	}
	
	.panel-menu{
		height: 40px;
	}
    
	#tituloEmpresa{
		font-size: 22px;
        font-weight: bold;
	}
	
	
    .h_icono{
        font-size: 60px !important;   
    }	
    a.flechaRetornoImagen:link{
        text-align: right!important;
        font-size: 40px;
        text-decoration:none; 
    }
     .flechaRetorno{
        text-align: right!important;
        font-size: 40px;
        text-decoration:none; 
    }
	h1{
		font-size: 22px !important;
        font-weight: bold;
	}
	h2{
		font-size: 22px !important;
	}
	h3{
		font-size: 18px !important;
	}
	
    h5{
		font-size: 20px !important;
        font-weight: bold;
        line-height: 38px;
	}
    h6{
		font-size: 16px !important;
         line-height: 38px;
	}
    
    
    .tituloFooter{
		font-size: 16px !important;
	}
    
    .contenidoPrivacidad{
	  font-size: 12px;
	}
    
	.uk-ico-accion-t0{
	  font-size: 22px;
	}
	.uk-ico-accion-t1{
	  font-size: 11px; 
	}
	
	.contenido{
	  font-size: 16px;
	}
    
    .contenidoPie{
	  font-size: 16px;
	}
    
    .contenidoCopiReader{
	  font-size: 13px;
	}
    
    
    .contenidoPrivacidad{
	  font-size: 8px;
	}
    
    .uk-button-accion-t2{
	  font-size: 19px!important;
	}
    
    .uk-button-accion-menu{
	  font-size: 19px!important;
	}
	
    .centradoPresentacionProyectos{
        aling-items: center;
        justify-content: center;     
    }
	.mapaSize{
        height:730px;
    }
    
    .forServicios{
        height: 480px;
    }
    
    .footerEspacioPymexis{
        padding-right: 100px;
        text-align: right;
    }
}

/* -----------------------   PANTALLA LAPTOP ----------------------- */
@media (min-width: 981px) and (max-width: 1600px) {	
    .anchoLinea{
        width: 980px;
    }
    
    .menulogo{
        width: 50px;
        height:60px;
        
    }
	.menu ul{
	   padding-top: 5px;
	}
	
	.panel-menu{
		height: 90px;
    }
	#tituloEmpresa{
		font-size: 30px;
        font-weight: bold;
        line-height: 40px;
	}
	
	.h_icono{
        font-size: 80px !important;   
    }
    a.flechaRetornoImagen:link{
        text-align: right!important;
        font-size: 50px;
        text-decoration:none; 
    }
     .flechaRetorno{
        text-align: right!important;
        font-size: 50px;
        text-decoration:none; 
    }
	h1{
		font-size: 30px !important;
        font-weight: bold;
        line-height: 40px;
	}
	h2{
		font-size: 30px !important;
        line-height: 40px;
	}
	h3{
		font-size: 20px !important;
	}
	h4{
		font-size: 10px !important;
	}
    
    
    h5{
		font-size: 28px !important;
        font-weight: bold;
        line-height: 38px;
	}
    h6{
		font-size: 19px !important;
         line-height: 38px;
	}
    
    .tituloFooter{
		font-size: 19px !important;
	}
        
    .uk-ico-nuestrosClientes{
	  font-size: 100px;
	}
    .uk-font-nuestrosClientes{
	  font-size: 30px;
      padding-right: 20px;
      padding-left: 20px;
	}

	.uk-ico-accion-t0{
	  font-size: 30px;
	}
	.uk-ico-accion-t1{
	  font-size: 15px;
	}
	
	.contenido{
	  font-size: 18px;
      line-height: 28px;
	}
    
    .contenidoPie{
	  font-size: 15px;
      line-height: 28px;
	}
    
    .contenidoCopiReader{
	  font-size: 13px;
	}
    
    .contenidoPrivacidad{
	  font-size: 12px;
	}
    
    .uk-button-accion-t2{
	  font-size: 19px!important;
	}
    
    .uk-button-accion-menu{
	  font-size: 19px!important;
	}
    
	.centradoPresentacionProyectos{
        aling-items: center;
        justify-content: center; 
    }

    .mapaSize{
        height:800px;
    }
    
    .fasesSize{
        height:1100px;
    }
    
    .forServicios{
        height: 500px;
    }
    
    .footerEspacioPymexis{
        padding-right: 70px!important;
        text-align: right;
    }
}

/* -----------------------   PANTALLA TELEVISOR ----------------------- */
@media (min-width: 1600px) {	
	 .anchoLinea{
        width: 1599px;
    }

    .menulogo{
        width: 80px;
        height:85px;
        
    }
    .menu ul{
	  padding-top: 10px;
	}
	
	.panel-menu{
		height: 100px;
	}
	#tituloEmpresa{
		font-size: 45px;
        font-weight: bold;
        line-height: 55px;
	}

	.h_icono{
        font-size: 90px !important;   
    }
    a.flechaRetornoImagen:link{
        text-align: right!important;
        font-size: 55px;
        text-decoration:none; 
    }
     .flechaRetorno{
        text-align: right!important;
        font-size: 55px;
        text-decoration:none; 
    }
	h1{
		font-size: 38px !important;
        line-height: 55px;
        font-weight: bold;
	}
	h2{
		font-size: 35px !important;
        line-height: 60px;
	}
	h3{
		font-size: 35px !important;
	}
    h4{
		font-size: 17px !important;
	}
	
    h5{
		font-size: 43px !important;
        font-weight: bold;
        line-height: 38px;
	}
    h6{
		font-size: 28px !important;
         line-height: 38px;
	}
    
    .tituloFooter{
		font-size: 26px !important;
	}
    
    
	.uk-ico-accion-t0{
	  font-size: 40px;
	}
	.uk-ico-accion-t1{
	  font-size: 27px;
	}
	
	.contenido{
	  font-size: 22px;
      line-height: 37px;  
	}
    
    .contenidoPie{
	  font-size: 17px;
      line-height: 32px;
	}
    
    .contenidoCopiReader{
	  font-size: 13px;
	}
    
    
    .contenidoPrivacidad{
	  font-size: 17px;
	}
    
    
    .uk-button-accion-t2{
	  font-size: 19px!important;
	}
    .uk-button-accion-menu{
	  font-size: 23px!important;
	}
    
    .centradoPresentacionProyectos{
        aling-items: center;
        justify-content: center;     
    }
    

    .mapaSize{
        height:850px;
    }
    
    .fasesSize{
        height:700px;
    }
    
    .forServicios{
        height: 550px;
    }
    
    .footerEspacioPymexis{
        padding-right: 60px;
        text-align: right;
    }
    
    .mensajeMoveTamanio{
        padding-right: 150px!important;
        padding-left: 150px!important;
        padding-bottom: 150px!important;
    }
    
    .interalineadoTituloDivas{
        line-height: 35px!important;
    }
}

.footerEspacioMc{
        padding-left: 18px;
    }

.footerEspacioProyectos{
        padding-left: 18px;
}

.testimonioContenido{
    padding-left: 30px;
	text-align: justify;
	font-size: 15px;
}


.testimonioEmisor{
	width: 100%;
	text-align: right!important;
	font-size: 14px;
	font-weight: bolder;
}
.testimonioLugar{
	width: 100%;
	text-align: right;
	font-size: 10px;
	color: #009dd8;
}

.ContenidoNegro{
	color: #000;
	font-size: 20px;
}


.ContenidoNegroPequenio{
	color: #000;
	font-size: 12px;
}

.contenidoGris{
    color: rgba(255, 255, 255, 0.3);!important;
}

            #modal {
                left:43%;
                margin:-250px 0 0 -40%;
                opacity: 0;
                position:absolute;
                top:-50%;
                visibility: hidden;
                width:95%;
                box-shadow:0 3px 7px rgba(0,0,0,.25);
                box-sizing:border-box;
                transition: all 0.4s ease-in-out;
                -moz-transition: all 0.4s ease-in-out;
                -webkit-transition: all 0.4s ease-in-out;
            }
            /* Make the modal appear when targeted */
            #modal:target {
                opacity: 1;
                top:50%;
                visibility: visible;             
            }
            
            #modal h2 {
                margin:0;
            }
            #modal .btn {
                float:right;
            }
            
            .modal-content {
                background: #000;
                position: relative;
                z-index: 20;
                border-radius:5px;
                color: #fff;
            }


            #modal .copy {
                background: #fff;
            }

            #modal .overlay {
                background-color: #000;
                background: rgba(0,0,0,1);
                height: 100%;
                left: 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 10;
            }