*{
	margin: 0;
	padding: 0;
}

#marco{
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
	margin: 0 auto;
	max-width: 1440px;
	width: 100%;
}

section{
	
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	max-width: 1440px;
	overflow: hidden;
	padding: 0;
	position: 0;
	width: 100%;
	
}

#bloque1 {
	
	background-image: url("../img/fondointro.png");
	
	height: 100%;
	
}

#bloque2{
	height: auto;
	margin-bottom: 100px;
	
}

#bloque3{
	
	height: auto;
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url(../img/fondoservicios2.jpg);
}	

#bloque4{
	
	height: auto;
	color: black;
	font-family: "arial", serif;
	font-size: 12pt;
	padding: 2%;
}

#main-header {
	background: #333;
	color: white;
	width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
	left: 0; /* Posicionamos la cabecera al lado izquierdo */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
    z-index: 100;
}	
	#main-header a {
		color: white;
		
	}

#divlogo{
	position: absolute;
}



/* barra de navegacion */
	
	nav ul {
		margin: 0;
        padding: 0;
		display: flex;
		list-style: none;
		justify-content: flex-end;
		 
		
	}
	
			nav ul li a {
                display: block;
                padding: 14px 10px;
				text-decoration: none;
			}
			
				nav ul li:hover {
                
					background: #0b76a6;
					
				}

header label{
	display: none;
	
	width: 30px;
	height: 30px;
	padding: 6.5px;
	border-right: 1px solid #fff;
}

header label:hover{
	cursor: pointer;
	background: rgba(0,0,0,0.3);
}

/* fin barra de navegacion */
  
/*Logo*/
#logo-header {
	display: block;
	
}
#logo-header:hover {
	color: white;
}



/* efecto del logo */

.hover14 figure {
	display: block;
	position: relative;
}

.hover14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 60%;
	}
}
@keyframes shine {
	100% {
		left: 60%;
	}
}
/* fin logo */

/* tablas div */


/* posicion div quienes somos*/
.cont-q{
	
	width: 70%;
	height: 70%;
	text-align: justify;
	margin: 0 auto;
	padding: 2% 2%;
    box-sizing: border-box;
}

#div-nosotros{
	margin-top: 10%;
	margin-bottom: 2%;
	padding: 20px;
	background: rgba(28, 36, 42, 0.1);
	border-radius: 29px 29px 29px 29px;
	box-sizing: border-box;
	
}
#div-mision{
	float: left;
	width: 45%;
	padding: 20px;
	box-sizing: border-box;
	background: rgba(28, 36, 42, 0.1);
	border-radius: 29px 29px 29px 29px;
	margin: 1%;
}
#div-vision{
	float: right;
	width: 45%;
	padding: 20px;
	box-sizing: border-box;
	background: rgba(28, 36, 42, 0.1);
	border-radius: 29px 29px 29px 29px;
	margin: 1%;
}

/* formato letra general */

.fparrafo{
	color: black  ;
	font-family: "arial", serif;
	font-size: 13pt;
	text-align: justify;
	
}

.fparrafo2{
	color: white;
	font-family: "arial", serif;
	font-size: 14pt;
	text-align: justify;
	width: 90%;
}

.ftitulo{
	color: black;
	font-family: "arial", serif;
	font-size: 25pt;
	font-weight: bold;
}

.ftitulo2{
	color: white;
	font-family: "arial", serif;
	font-size: 25pt;
	font-weight: bold;
}

.fsubtitulo{
	color: black;
	font-family: "arial", serif;
	font-size: 17pt;
	font-weight: bold;
}

.tituloserv{
	color: white;
	font-family: "arial", serif;
	font-size: 14pt;
	font-weight: bold;
}

.ftextmenu{
	
	color: white;
	font-family: "arial", serif;
	font-size: 14pt;
	font-weight: bold;
}

.fletranav{
	color: white;
	font-family: "arial", serif;
	font-size: 10pt;
}

.ftextinfo{
	color: black;
	font-family: "arial", serif;
	font-size: 10pt;
}

#cajamenu a{
text-decoration: none;
}

#cajasoporte{
    transition-property: all;
    transition-duration: 0.5;
}

.hresp{ 
	margin-top: 3%;
   	border: 0; 
	height: 3px; 
	width: 80%;
	background-image: -webkit-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
	background-image: -moz-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
	background-image: -ms-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
	background-image: -o-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
 } 

.hresp2{ 
   	border: 0; 
	height: 3px; 
	width: 80%;
	background-image: -webkit-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
	background-image: -moz-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
	background-image: -ms-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
	background-image: -o-linear-gradient(left, CadetBlue, CadetBlue, rgba(0, 0, 0, 0.0));
 } 

.hrserv{
   	border: 0; 
	height: 5px; 
	width: 80%;
	background-image: -webkit-linear-gradient(left, white, white, rgba(0, 0, 0, 0.0));
	background-image: -moz-linear-gradient(left, white, white, rgba(0, 0, 0, 0.0));
	background-image: -ms-linear-gradient(left, white, white, rgba(0, 0, 0, 0.0));
	background-image: -o-linear-gradient(left, white, white, rgba(0, 0, 0, 0.0));
	
}

#divservicio{
	margin-top: 3%;
	margin-bottom: 2%;
}

#cajamenu{
    display: flex;
    justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}


.divtabla{
	display: table;
	box-sizing: border-box;
}

.divfila{
	display: table-row;
	box-sizing: border-box;
}

.divfilacontacto{
	display: table-row;
	box-sizing: border-box;
}

.divcelda{
	display: table-cell;
	box-sizing: border-box;
}

.divcelda2{
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
}

.divcolum{
	display: table-column-group;
}

.divflex{
	display: inline-block;
}



.divcontacto{
	width: 50%;
	display: table-cell;
	box-sizing: border-box;
}

.divform{
	width: 50%;
	padding: 0%;
	display: table-cell;
	box-sizing: border-box;
}


/* ELEMENTOS BLOQUE SERVICIOS */

    /* Elementos caja soporte */
.objmenu{
	width: 45%;
	margin-top: 5%;
	margin-bottom: 10%;
	box-sizing: border-box;
    background: rgba(0,0,0,0.5);
    margin-left: 2px;
    margin-right: 2px;
    padding: 10px;
}

.imgservicios{
	width: 100%;
}

#imgsoporte{
    float: right;
    width:40%;
    box-sizing: border-box;
}

#textsoporte{
	float: left;
	width: 60%;
	box-sizing: border-box;
}


    /* Elementos caja web */

#textweb{
    float: left; 
    width: 60%; 
    box-sizing: border-box;
}

#imgweb{
    float: right;
    width:40%;
    box-sizing: border-box;
}

    /* Elementos caja redes */

#textredes{
    float: left;
    width: 60%;
    box-sizing: border-box;
}

#imgredes{
    float: right;
    width:40%;
    box-sizing: border-box;
}

    /* Elementos caja auto */

#textauto{
    float: left;
    width: 60%;
    box-sizing: border-box;
}

#imgauto{
    float: right;
    width:40%;
    box-sizing: border-box;
}



/* ESTILO BOTONES */

#btnsoporte:hover{
	background-image: url(../img/icosoporte2.png);
	border-radius: 10px 10px 10px 10px;
}

#btndisenoweb:hover{
	background-image: url(../img/icodisenoweb2.png);
	border-radius: 10px 10px 10px 10px;
}

#btnredes:hover{
	background-image: url(../img/icoredes2.png);
	border-radius: 10px 10px 10px 10px;
}

#btnauto:hover{
	background-image: url(../img/icoauto2.png);
	border-radius: 10px 10px 10px 10px;
}

.btnregresar:hover{
	background-image: url(../img/icoregresar2.png);
	border-radius: 10px 10px 10px 10px;
}

#btnmenu{
	display:none;
}

.imgico{
	width: 30px;
	height: 30px;
}

#btnabajo{
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, -50%);
}

#btnabajo:hover{
background-image: url(../img/icoabajo2.png);
	border-radius: 10px 10px 10px 10px;
}

.btnscroll{
text-decoration: none;
}

.items{

}


/* ---------------AJUSTES RESPONSIVE DESING--------------- */

@media (max-width: 700px){
	
	#labelico {
		display: block;
		float: right;
	}
    
    .menu{
    margin-left: -50%;
    position: fixed;
    width: 50%;
    background: #333;
    transition: all 0.5s;
    top: 43px;  
    }
	
	nav ul{ 
		flex-direction: column;
	}
	
	nav ul li{
		border-top: 1px solid #fff;
	}
	
	#btnmenu:checked ~ .menu{
    margin-left: 0;   
    top: 43px;    
		
	}
	
	
	.cont-q{
		width: 100%;
	}
	
	#div-mision{
		clear: both;
		width: 100%;
	}
	
	#div-vision{
		clear: both;
		width: 100%;
	}
	
	#cajamenu{
		width: 100%;
		display: flex;
        flex-direction: column;
		
	}
    
    .hrserv{
        margin-bottom: 35px;
    }
	
	.objmenu{
        display: block;
       
		float: none;
		align-self: center;
        margin-top: 2%;
        margin-bottom: 2%;
       
	}
	
	.filacontacto{
		display: table-row;
	}
	

	
	.divfilacontacto{
	display: flex;
	flex-direction: column;
	}	
	
	
	.divform{
		margin-top: 30px;
		
	}
    
	
    /* RESPONSIVE CAJA SOPORTE */

    
	#imgsoporte{
		
		float: none;
		clear: both;
		width: 100%;
		
	}
    
    .imgservicios{
        width: 100%
    }
	
	
	#textsoporte{
		float: none;
		width: 100%;
	}
	
	.fparrafo2{
		width: 100%;
	}
    
    /* RESPONSIVE CAJA WEB */
    
    #textweb{
		float: none;
		width: 100%;
	}
    
    #imgweb{
		
		float: none;
		clear: both;
		width: 100%;
		
	}
    
    /* RESPONSIVE CAJA REDES */ 
    
    #textredes{
		float: none;
		width: 100%;
	}
    
    #imgredes{
		
		float: none;
		clear: both;
		width: 100%;
		
	}
    
    
    /* RESPONSIVE CAJA AUTO */
    
    #textauto{
		float: none;
		width: 100%;
	}
    
    #imgauto{
		
		float: none;
		clear: both;
		width: 100%;
		
	}
	
   #div-mision{
	float: right;
}


@media (max-width: 415px){

    .objmenu{
        width: 100%;
		
	}

}