/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	line-height: 1.4;
	font-family: 'Roboto', sans-serif;
    color: #67696c;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    overflow-x: hidden;
}

/*Reset CSS*/
/****Estilos del Navbar*****/

.navbar-inverse{
    background-color: rgba(38, 36, 36, 0.03) ;
    border:0px;
    padding: 10px;
    transition: all 0.3s;
   
    
}

#bs-example-navbar-collapse-1{
 width: 50%;
 margin: 0 auto;
    
    
}
.navbar-brand{
    margin-top: -12%;  
 
    
}






/****Primera imagen del cuerpo*****/

.primera_imagen{
    background: #FFFFFF;
    height:415px;
    background: url(../img/TecnologicaOK2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0 auto;
}


/*******************************/

/*Seccion de Quienes somos*/




.quienes{
    background: #FFFFFF;
    color: #000;
  
   
   
}
.quienes p{
 
    margin: 0 auto;
    text-align: center;
    border-style: 1px solid #fff;
    font-size: 1.5em;
     width: 90%; 
    
}

.cont-tres-col{
    width: 1160px;
    height: 150px;
    margin: 0 auto;
    
}
.tres-cols{
    margin: 0 auto;
    width: 380px;
    float: left;

    height: 110px;
    margin-top: 25px

  
    
}
.tres-cols p{
margin-top: -35px;
font-size: 0.9em;
font-weight: normal;
text-align: left;
width: 95%;
    

    
}
.destacado{
    float: left;
    margin: 10px 10px;
 
}

.tres-cols h3{
    width: 300px;
    text-align: left;
    
}


.productos, .servicios, .contenedor-cursos{
  
    color: #000;
    


}
/*Todos los titulos de la web*/
.title{
    font:50px 'Stint+Ultra+Condensed';
    text-transform: capitalize;
    margin-bottom: 40px;
    margin-top: 30px;
    text-align: center;
}

/*Todos los content de la web*/
.content{
    padding: 60px;
    border: 1px dashed #F6F5EF;
    
}

.content p{
    margin-bottom: 40px;
    padding: 30px;
  
}



/**************************/


/***Seccion de Partners ****/

.listado figure{
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 200px;
    height: 200px;
   
   
}
#Productos .listado figure:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    z-index: 0;
    box-shadow: 4px 2px 4px 2px #030E12;
    
}

.listado{
    display: flex;
    align-items: center;
    justify-content: center;
    
}



.listado img{
    position: relative;
    z-index: 1;
    
    
}

.listado li{
    padding: 0 30px;
}

.listado figcaption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    text-align: center;
    font-size: 20px;
    
}


/*******Pie de Pagina*****///
#copyright{
    margin: 0 auto;
    clear: both;
    
}




#Items{
    width: 100%;
    margin: 0 auto;

    
}

#distribucion{
    margin: 50px;
}




/************************/

/*.btn-submit, .btn-submit:hover, .btn-submit:focus
{
    background-color: transparent;
    border-radius: 60px;
    color: #52504b;
    font-weight: 400;
    border: 1px solid #0b0b0b;
    font-size: 14px;
    padding: 6px 20px;
    width: 100%;
}

*/


/*Estilos de seccion de contacto*/
.service-title{
    margin-top: 5%;
    
}

.btn-submit{
    width: 100%;
    background-color: #575555;
    color: white;
    height: 3em;
    
}

.col-frame{
    text-align: left;
    font-size: 30px;
 
}

col-frame p{
     line-height: 25px;
    font-size: 20px;
    text-align: left;
    padding: 1px;
    
}

.col-form{
    margin-left: 20%;
    
}

.fila-info{
    
   margin: 0 auto;
     
}
.col-form h2{
    
    font-size: 35px
    
}
.col-form p{
    line-height: 25px;
    font-size: 20px;
    text-align: left;
    padding: 1px;

    
}


.col-form h3{
    text-align: left;
    font-size: 30px;
    font-weight: bold;
}
.col-form h4{
    font-size: 20px;
    font-weight: bold;
}

label{
    display: block;
    margin-top: 20px;
    letter-spacing: 1px;
    font-size: 20px;
    text-align: left;
    
}




.container-contact{
	margin:0 auto;

	
}


.form-control
{
    background-color: transparent;
    border-radius: 0px;
    color: #0b0b0a !important;
    border-color: #0b0b0a;
   
  
}
.form-control:focus {
    border-color: #be9e21;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.contact-form input.form-control{
    color: #fff;
  
}

.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;
}

#sendmessage {
    color: green;
    border:1px solid green;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
    display:block;
}

.loction-info p
{
    margin-bottom: 25px;
}
.loction-info p i
{
    color: #151414;
}



.pad-bt15 {
    padding-bottom: 15px;
}

.bottom-line{
    margin-top: 30px;
    margin-bottom: 40px;
    border: 0;
    border-top: 0px;
    height: 3px;
    width: 40px;
    background-color: #BE9E21;
    margin: 0 auto;

}

.sub-title
{
    font-size: 20px;
}

.title, .service-title
{
    font-family: 'Fira Sans', sans-serif;
    font-size: 35px;
    text-transform: uppercase;
   
}

.line-form{
   margin-bottom: 30px; 
    
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}

/******************************/


#copyright{
    margin: 0 auto;
    clear: both;
    padding: 10px 15px;
    color: #FFF;
    font-size: 15px;
    background:  #030E12;
    text-align: center;
    margin-top: 15px;
}




/****Iconos Sociales****/
/****Sprite de CSS iconos sociales****/




.iconos-sociales{
    list-style: none;
  	 width: 240px;
    
	
    
    
    
}

.iconos-sociales a{
    display: block;
    background: url(../img/Iconos_sociales.png);
    height: 60px;
}

.iconos-sociales li{
    float: left;
    
}

.facebook a{
    width: 60px;
    background-position: 0 0px;
    
    
}

.twitter a{
    width: 60px;
    background-position: -60px 0;
}

.instagram a{
    width: 60px;
    background-position: -122px 0;
    
}

.linked a{
    width: 60px;
    background-position: -179px 0;
    
}


.facebook a:hover{
    width: 60px;
    background-position: 0 -62px;
    
    
}

.twitter a:hover{
    width: 60px;
    background-position: -60px -61px;
}

.instagram a:hover{
    width: 60px;
    background-position: -122px -60px;
    
}

.linked a:hover{
    width: 60px;
    background-position: -179px -62px;
    
}

.white
{
    color: #212020 !important;
}

.white-bg
{
    background-color: #212020 ;
}
/****Sprite de CSS iconos sociales****/


/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*****Pagina de Soporte Tecnico*******/


.header-soporte{
    background: #FFFFFF;
    height:490px;
    background: url(../img/Banner-soporte-pagina.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0 auto;
    margin-top: 2px;
    
}




/***Seccion de imagenes de soporte tecnico*****/

.titulos-servicios{
    text-align: center;
    margin: 0 auto;
    font-size: 3em;
    margin: 40px;
    margin: 40px;
    
}

.titulos-soporte{
    
    color: #2323f2;
    font-size: 2.3em;
    
    
}
.parrafos-soporte{
    font-size: 1.2em;
    text-align: justify;
    letter-spacing: 0.1px;
    padding: 2px;
}


.tipos-soporte{
    padding: 20px;
    color: #2323f2;
}

.texto-soporte{
    margin-top: 5%;
    
}
.img-soporte-solo{
       margin-top: 5%; 
    
}
     *{
            margin: 0;
            padding:0;
            box-sizing: border-box;
            
            
        }
        
        .soporte-img{
            width: 100%;
            
        }
        .soporte{
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            
        }
        
        .soporte h1{
            text-align: center;
            font-size: 38px;
            margin: 15px 0px 40px;
        }
        
        .soporte-container{
            
            display: flex;
            justify-content: space-between;
        }
        .soporte-item{
            width: 100%;
            position: relative;
            overflow: hidden;
            
        }
        
        .soporte-text{
            position: absolute;
            bottom: 0;   
            padding: 20px;
            background: rgba(0,0,0,0.7); 
            color: white;
            transform: translateY(100%);
            transition: all 0.5s ease-out;
        }
        
        .soporte-text{
            text-align: justify;
        }
    
        .soporte-item:hover .soporte-text{
              transform: translateY(0%);
            
        }
         .soporte-item:hover .soporte-img{
          transform: scale(1.15);
          transform: scale(1.15);
             transform: scale(1.15);
            
        }
        
        .soporte-img{
         
          transition: all 0.5s;
          transition: all 0.5s;
        transition: all 0.5s;
            
        }
        

/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*** Fin Pagina de Soporte Tecnico***/
/************************************


/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*****Pagina de Desarrollo Web*******/
.header-desarrollo{
    background: #FFFFFF;
    height:580px;
    background: url(../img/Banner-desarrollo-web.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0 auto;
    margin-top: 60px;
    
}




/***Seccion de imagenes de Desarrollo Web*****/

.titulos-servicios{
    text-align: center;
    margin: 0 auto;
    font-size: 3em;
    margin: 40px;
    margin: 40px;
    
}

.titulos-desarrollo{
    
    color: #2323f2;
    font-size: 2.3em;
    
    
}
.parrafos-desarrollo{
    font-size: 1.2em;
    text-align: justify;
    letter-spacing: 0.1px;
    padding: 2px;
}


.tipos-desarrollo{
    padding: 15px;
    color: #2323f2;
    font-size: 20px;
}

.texto-desarrollo{
    margin-top: 5%;
    
}
.img-desarrollo-solo{
       margin-top: 1%; 
    
}

.img-desarrollo-solo img{
    
    width: 90%;
}
     *{
            margin: 0;
            padding:0;
            box-sizing: border-box;
            
            
        }
        
        .desarrollo-img{
            width: 100%;
            
        }
        .desarrollo{
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            
        }
        
        .desarrollo h1{
            text-align: center;
            font-size: 38px;
            margin: 15px 0px 40px;
        }
        
        .desarrollo-container{
            
            display: flex;
            justify-content: space-between;
        }
        .desarrollo-item{
            width: 100%;
            position: relative;
            overflow: hidden;
            
        }
        
        .desarrollo-text{
            position: absolute;
            bottom: 0;   
            padding: 20px;
            background: rgba(0,0,0,0.7); 
            color: white;
            transform: translateY(100%);
            transition: all 0.5s ease-out;
        }
        
        .desarrollo-text{
            text-align: justify;
        }
    
        .desarrollo-item:hover .desarrollo-text{
              transform: translateY(0%);
            
        }
         .desarrollo-item:hover .desarrollo-img{
            transform: scale(1.15);
            transform: scale(1.15);
             transform: scale(1.15);
            
        }
        
        .desarrollo-img{
         
           transition: all 0.5s;
           transition: all 0.5s;
            transition: all 0.5s;
            
        }

/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*** Fin Pagina de Desarrollo Web*****/
/*************************************/


/******************************************/
/******************************************/
/******************************************/
/******************************************/
/*****Pagina de Desarrollo de Software*****/


.header-Desarrollo-Software{
    background: #FFFFFF;
    height:520px;
    background: url(../img/Banner-desarrollo-software.png);
    background-size: 100%;
    background-repeat: no-repeat;
   background-attachment: fixed;
    margin: 0 auto;
    margin-top: 60px;
    
}

/***Seccion de imagenes de Desarrollo Web*****/

.titulos-servicios{
    text-align: center;
    margin: 0 auto;
    font-size: 3em;
    margin: 40px;
    margin: 40px;
    
}

.titulos-desarrollo-software{
    
    color: #2323f2;
    font-size: 2.3em;
    
    
}
.parrafos-desarrollo-software{
    font-size: 1.2em;
    text-align: justify;
    letter-spacing: 0.1px;
    padding: 2px;
}


.tipos-desarrollo-software{
    padding: 15px;
    color: #2323f2;
    font-size: 20px;
}

.texto-desarrollo-software{
    margin-top: 5%;
    
}
.img-desarrollo-software-solo{
       margin-top: 1%; 
    
}

.img-desarrollo-software-solo img{
    
    width: 90%;
}
     *{
            margin: 0;
            padding:0;
            box-sizing: border-box;
            
            
        }
        
        .desarrollo-software-img{
            width: 100%;
            
        }
        .desarrollo-software{
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            
        }
        
        .desarrollo-software h1{
            text-align: center;
            font-size: 38px;
            margin: 15px 0px 40px;
        }
        
        .desarrollo-software-container{
            
            display: flex;
            justify-content: space-between;
        }
        .desarrollo-software-item{
            width: 100%;
            position: relative;
            overflow: hidden;
            
        }
        
        .desarrollo-software-text{
            position: absolute;
            bottom: 0;   
            padding: 20px;
            background: rgba(0,0,0,0.7); 
            color: white;
            transform: translateY(100%);
            transition: all 0.5s ease-out;
        }
        
        .desarrollo-software-text{
            text-align: justify;
        }
    
        .desarrollo-software-item:hover .desarrollo-software-text{
              transform: translateY(0%);
            
        }
         .desarrollo-software-item:hover .desarrollo-software-img{
         transform: scale(1.15);
            transform: scale(1.15);
             transform: scale(1.15);
            
        }
        
        .desarrollo-software-img{
         
           transition: all 0.5s;
            transition: all 0.5s;
            transition: all 0.5s;
            
        }


/*************************************/
/*************************************/
/*************************************/
/*************************************/
/***Fin Pagina de Desarrollo de Software***/
/*************************************/


/******************************************/
/******************************************/
/******************************************/
/******************************************/
/*****Pagina de Cursos*****/


.header-Cursos{
    background: #FFFFFF;
    height:520px;
    background: url(../img/Banner-cursos.png);
    background-size: 100%;
    background-repeat: no-repeat;
   background-attachment: fixed;
    margin: 0 auto;
    margin-top: 60px;
    
}

/***Seccion de imagenes de Desarrollo Web*****/

.titulos-servicios{
    text-align: center;
    margin: 0 auto;
    font-size: 3em;
    margin: 40px;
    margin: 40px;
    
}

.titulos-cursos{
    
    color: #2323f2;
    font-size: 2.3em;
    
    
}
.parrafos-cursos{
    font-size: 1.2em;
    text-align: justify;
    letter-spacing: 0.1px;
    padding: 2px;
}


.tipos-cursos{
    padding: 15px;
    color: #2323f2;
    font-size: 20px;
}

.texto-cursos{
    margin-top: 5%;
    
}
.img-cursos-solo{
       margin-top: 1%; 
    
}

.img-cursos-solo img{
    
    width: 90%;
}
     *{
            margin: 0;
            padding:0;
            box-sizing: border-box;
            
            
        }
        
        .cursos-img{
            width: 100%;
            
        }
        .cursos{
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            
        }
        
        .cursos h1{
            text-align: center;
            font-size: 38px;
            margin: 15px 0px 40px;
        }
        
        .cursos-container{
            
            display: flex;
            justify-content: space-between;
        }
        .cursos-item{
            width: 100%;
            position: relative;
            overflow: hidden;
            
        }
        
        .cursos-text{
            position: absolute;
            bottom: 0;   
            padding: 20px;
            background: rgba(0,0,0,0.7); 
            color: white;
            transform: translateY(100%);
            transition: all 0.5s ease-out;
        }
        
        .cursos-text{
            text-align: justify;
        }
    
        .cursos-item:hover .cursos-text{
              transform: translateY(0%);
            
        }
         .cursos-item:hover .cursos-img{
          transform: scale(1.15);
          transform: scale(1.15);
             transform: scale(1.15);
            
        }
        
        .cursos-img{
         
          transition: all 0.5s;
         transition: all 0.5s;
            transition: all 0.5s;
            
        }

/*************************************/
/*************************************/
/*************************************/
/*************************************/
/***Fin Pagina de Cursos***/
/*************************************/