*{
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Oswald', sans-serif;
}
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#header{
    height: 50px;
    width: 100%;
    position: fixed;
    z-index: 1009;
}

#header .menu{
    position: absolute;
    background-color: #222222;
    display: flex;
    height: 65px;
    top: 0;
    width: 100%;
    box-shadow: 0px 0px 1px 1px rgba(75, 160, 181, 0.29);
}
#header .logo-Menu{
     display: none;
}
#header .menu-bars{
     display: none;
}
.menu #posicionMenu{
     display: flex;
     margin: auto;
}
#posicionMenu #mLogo{
     height: 200px;
     width: 200px;
}
#posicionMenu #mDerecho{
     height: 50px;
     width: 500px;
}
#posicionMenu #mIzquierdo{
     height: 50px;
     width: 500px;
}
.contMenu{
     display: flex;
     list-style: none;
}
.contMenu #descMenu{
     cursor: pointer;
     display: flex;
     height: 50px;
     justify-content: center;
     padding: 20px;
     width: 300px;
}
#descMenu a{
     color: #f5f5f5;
     font-size: 16px;
    text-decoration: none;
}
#descMenu #iconDescMenu{
     display: none;
}
#descMenu #iconDescMenua{
     display: none;
}
#descMenu #iconDescMenub{
     display: none;
}
#descMenu #iconDescMenuc{
     display: none;
}
#portada{
    background-image: url(../img/inicio.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 800px;
    width: 100%;
}
#quieneSomos{
    background: rgba(0,0,0,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,20,39,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#001427', GradientType=1 );
    height: auto;
    padding: 50px 20px;
    width: 100%;
    z-index: 1000;
}
#quieneSomos .titleWeb{
    display: flex;
    height: auto;
    justify-content: center;
    padding: 10px;
    width: 100%;
}
.titleWeb #tBlanco{
    color: #f5f5f5;
    font-size: 26px;
    font-weight: 400;
}
.titleWeb #tAzul{
    color: #4ba0b5;
    font-size: 26px;
    font-weight: 400;
    margin: 0 5px 0 0;
}
#quieneSomos .concQuienesSomos{
    height: auto;
    justify-content: center;
    margin: auto;
    max-width: 768px;
    min-width: 300px;
    padding: 20px;
}
.concQuienesSomos #parrafo{
    height: auto;
    margin-top: 20px;
    text-align: justify;
    text-align-last: center;
    width: 100%;
}
#parrafo a{
    color: #f5f5f5;
    font-weight: 300;
    letter-spacing: 1px;
}
#tQueHacemos{
    background-color: #222222;
    display: flex;
    width: 100%;
}
#tQueHacemos #titleQueHacemos{
    height: auto;
    padding: 20px;
    text-align: center;
    width: 30%;
}
#titleQueHacemos a{
    color: #f5f5f5;
    font-size: 26px;
    font-weight: 400;
}
#tQueHacemos #menuQueHacemos{
    height: auto;
    width: 70%;
}
#menuQueHacemos .mQHacemos{
    cursor: pointer;
    display:flex;
    list-style: none;
    padding: 23px;
    text-align: center;
}
.mQHacemos a{
    font-size: 18px;
    font-weight: 400;
}
.mQHacemos #conceptoMQH{
    width: 100%;
}
#sliderFQueHacemos{
    height: auto;
    width: 100%;
}
#sliderFQueHacemos .sliderContenedor{
    display: flex;
    height: auto;
    list-style: none;
    padding: 20px;
    width: 100%;
}
.sliderContenedor #sCConceptoUno{
    height: 100%;
    position: relative;
    width: 100%;
}
.sliderContenedor #sCConceptoDos{
    height: 100%;
    position: relative;
    width: 100%;
}
.sliderContenedor #sCConceptoTres{
    height: 100%;
    position: relative;
    width: 100%;
}
.sliderContenedor #sCConceptoCuatro{
    height: 100%;
    position: relative;
    width: 100%;
}
#sCTitulo{
    height: 60px;
    margin-bottom: 30px;
    padding: 20px;
    text-align: center;
    width: 100%;
}
#sCTitulo #sCTitleNegro{
    color: #222222;
    font-weight: 600;
    font-size: 22px;
}
#sCTitulo #sCTitleAzul{
    color: #4ba0b5;
    font-weight: 600;
    font-size: 22px;
}
.parrafoConceptoT{
    height: auto;
    margin: auto;
    max-width: 80%;
    min-width: 300px;
    padding: 20px;
    text-align: justify;
    text-align-last: center;
}
.parrafoConceptoT a{
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}
#tCasosExito{
    height: 80px;
    width: 100%;
}
#tCasosExito #titleCasos{
    background-color: #222222;
    border-radius: 0 50px 0 0;
    height: 100%;
    padding: 30px;
    text-align: center;
    width: 300px;
}
#titleCasos a{
    color: #f5f5f5;
    font-size: 25px;
    font-weight: 400;
}
ol,ul{
     list-style: none;
}
#cExitoCarrusel{
    background: rgba(0,0,0,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,20,39,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#001427', GradientType=1 );
    height: auto;
    width: 100%;
}
.article-slider{
     height: inherit;
     position: relative;
     width: 100%;
}
.slideshow{
    display: flex;
    height: auto;
    margin: auto;
    position: relative;
    width: 80%;
}
.slideshow li, .slider{
     width: 100%;
}
.slider #conjuntoCasosExito{
     display: flex;
     padding: 20px 0;
     width: 100%;
}
#conjuntoCasosExito #logoCasosE{
    height: 200px;
    margin: auto;
    width: 270px;
}
#conjuntoCasosExito #textoCasosE{
    align-self: center;
    height: auto;
    margin-top: 20px;
    text-align: justify;
    text-align-last: center;
    width: 50%;
}
#textoCasosE a{
    font-size: 18px;
    font-weight: 100;
    color: #f5f5f5;
}
.cEUno{
    background-image: url(../img/casosExito/AICM.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cEDos{
    background-image: url(../img/casosExito/BOOK.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;    
    height: 200px;
    width: 300px;
}
.cETres{
    background-image: url(../img/casosExito/CAMION.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cECuatro{
    background-image: url(../img/casosExito/CAR.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cECinco{    
    background-image: url(../img/casosExito/COSTCO.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;   
    height: 200px;
    width: 300px;
}
.cESeis{
    background-image: url(../img/casosExito/EB.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cESiete{
    background-image: url(../img/casosExito/ESCUDO.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cEOcho{
    background-image: url(../img/casosExito/GRAFICOS.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cENueve{
    background-image: url(../img/casosExito/LIVERPOOL.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cEDiez{
    background-image: url(../img/casosExito/ODM.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cEOnce{
    background-image: url(../img/casosExito/PHD.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cEDoce{
    background-image: url(../img/casosExito//PLAY.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.cETrece{
    background-image: url(../img/casosExito//LaLinea.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 200px;
    width: 300px;
}
.slider li img{
     width: 100%;
}
.pagination{
     justify-content: center;
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flex;
     display: -o-flex;
     display: flex;
     padding: 20px;
     position: relative;
     width: 100%;
}
.pagination li{
     color: #212d3c;
     cursor: pointer;    
     display: flex;
     font-size: 20px;
     margin: 2px;
}
.left, .right{
    display: block;
    align-self: center;
    width: 10%;
}
.left #iconLeft{
    float: left;
    height: 60px;
    width: 60px;
}
.right #iconRight{
    float: right;
    height: 60px;
    width: 60px;
}
#iconRight #iconSpan{
    color: rgba(75, 160, 181, 0.5);
    height: 60px;
    width: 60px;
}
#iconLeft #iconSpan{
    height: 60px;
    color: rgba(75, 160, 181, 0.5);
    width: 60px;
}
#multiEmpresas{
    display: flex;    
    height: auto;
    width: 100%;
}
#multiEmpresas #meIzquierdo{
    height: auto;
    margin: auto;
    width: 30%;
}
#multiEmpresas #meCentro{
    height: auto;
    margin: auto;
    width: 30%;
}
#multiEmpresas #meDerecho{
    height: auto;
    margin: auto;
    width: 30%;
}
#multiEmpresas #meLogos{
    height: 106px;
    margin: 60px auto;
    width: 100%;
}
#multiEmpresas #meLogosC{
    height: 239px;
    margin: 60px auto;
    width: 300px;
}
.lUno{
    background-image: url(../img/multiEmpresas/itelect.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.lDos{
    background-image: url(../img/multiEmpresas/Max.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.lTres{    
    background-image: url(../img/multiEmpresas/omx.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.lCuatro{    
    background-image: url(../img/multiEmpresas/oryco.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.lCinco{    
    background-image: url(../img/multiEmpresas/Xserv.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
#nuestroSistema{
    background: rgba(0,0,0,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,20,39,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#001427', GradientType=1 );
    height: auto;
    padding: 50px 20px;
    width: 100%;
}
#nuestroSistema #textNuestroSistema{
    display: flex;
    height: auto;
    padding: 20px;
    width: 100%;
}
#textNuestroSistema #txtNS{
    margin: auto;
    text-align: center;
    width: 80%;
}
#txtNS a{
    color: #f5f5f5;
    font-size: 26px;
    font-weight: 600;
}
.bondadesSistema{
    display: flex;
    flex-wrap: wrap;
    height: auto;
    list-style: none;
    max-width: 1024px;
    margin: auto;
    min-width: 300px;
    padding: 20px;
}
.bondadesSistema #contenedorCBondades{
    align-content: center;
    height: 250px;
    margin: 50px auto 50px;
    width: 250px;
}
#contenedorCBondades #circuloIcon{
    align-content: center;
    background-color: #1c1c1c;
    border: 3px solid #4ba0b5;
    border-radius: 50%;
    height: 250px;
    padding: 80px; 
    width: 250px;
}
#circuloIcon #iconFABIconUno{
    color: #f5f5f5;
    font-size: 80px;
}
#circuloIcon #iconFABIconDos{
    color: #f5f5f5;
    font-size: 80px;
    margin: auto 15px;
}
#circuloIcon #iconFABIconTres{
    color: #f5f5f5;
    font-size: 80px;
    margin-left: -10px;
}
#contenedorCBondades #txtCirculoIcon{
    height: auto;
    margin: 20px auto 0px;
    padding: 20px auto;
    text-align: center;
    width: 100%;
}
#txtCirculoIcon a{
    color: #f5f5f5;
    line-height: 25px;
}
#contacto{
    background-image: url(../img/contacto.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    height:auto;
    justify-content: center;
    padding: 50px 20px;
    width: 100%;
}
#contacto #info{
    align-self: center;
    height: auto;
    margin: 50px  auto;
    width: 100%;
}
#info #textContacto{
    height: auto;
    padding: 30px;
    text-align: center;
    width: 100%;
}
#textContacto a{
    color: #f5f5f5;
    font-size: 60px;
    font-weight: 400;
}
#info #textDireccion{
    height: auto;
    margin: auto;
    max-width: 500px;
    text-align: center;
    padding: 20px;
}
#textDireccion a{
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 400;
}
#info #textTelefonos{
    display: block; 
    height: auto;
    margin: auto;
    max-width: 500px;
    padding: 20px;
}
#textTelefonos #tTelefono{
    margin: 20px auto;
    text-align: center;
}
#tTelefono a{
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}
#contacto #mapa{
    align-self: center;
    height: 334px;
    margin: auto 20px ;
    width: 100%;
}
#resumeOle{
    display: flex;
    height: auto;
    background: rgba(0,0,0,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,20,39,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,20,39,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#001427', GradientType=1 );
    padding: 50px 20px;
    width: 100%;
}
#resumeOle .logoFooter{
    background-image: url(../img/OLE.png);
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    margin: auto;
    width: 200px;
}
#resumeOle .mapaSitio{
    height: auto;
    margin: auto;
    width: 300px;
}
.mapaSitio .mapa{
    list-style: none;
    padding: 20px;
}
.mapa .tiulo{
    padding: 20px;
    text-align: center;
}
.mapa .concpto{
    padding: 5px 20px;
    text-align: center;
}
.concpto a{
    color: #f5f5f5;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}
.tiulo a{
    font-weight: 600;
    color: #f5f5f5;
    font-size: 18px;
}
#resumeOle .avisoPrivacidad{
    height: auto;
    margin: auto;
    min-width: 300px;
    max-width: 310px;
    padding: 5px 20px;
    width: auto;
}
.avisoPrivacidad .aviso{
    list-style: none;
}
.aviso #avisoTitulo{
    padding: 20px;
    text-align: center;
}
#avisoTitulo a{
    color: #f5f5f5;
    font-weight: 600;
    text-decoration: none;
}
.aviso #concepto{
    padding: 10px 0px;
    text-align: justify;
    text-align-last: center;
}
#concepto a{
    color: #f5f5f5;
    font-weight: 400px;
}
#Derechos{
    background-color: #222222;
    height: auto;
    padding: 20px;
    text-align: center;
    width: 100%;
}
#Derechos p{
    color: #f5f5f5;
    font-size: 16px;
    font-weight: 400;
    padding: 5px;
}
@media screen and (max-width: 1024px){
    .headroom {
        transition: transform .3s ease;
    }
    .headroom--pinned {
         transform: translateY(0%);
    }
    .headroom--unpinned {
         transform: translateY(-400%);
    }
    #header .menu-bars{
          display: block;
          height: 60px;
          left: 10px;
          padding: 10px;
          position: absolute;
          width: 60px;
          z-index: 1001;
     }
     #header .logo-Menu{
          background-image: url(../img/logo.png);
          background-position: center;
          background-repeat: no-repeat;
          display: block;
          height: 200px;
          position: absolute;
          right: calc(60% - 180px);
          width: 200px;
          z-index: 1001;
     }
     .menu-bars #iconMenu{
          color: #f5f5f5;
          cursor: pointer;
          font-size: 35px;
     }
     .menu #posicionMenu{
          background-color: rgba(39, 39, 39, 0.9);
          height: 100vh;
          left: -100%;
          margin: auto;
          position: absolute;
          top: 50px;
          width: 100%;
     }
     .contMenu{
          display: block;
          list-style: none;
     }
     #posicionMenu #mDerecho{
          height: auto;
          position: absolute;
          top: 160px;
          width: 400px;
     }
     #posicionMenu #mIzquierdo{
          height: auto;
          position: absolute;
          top: 260px;
          width: 400px;
     }
     #posicionMenu #mLogo{
          display: none;
     }
     .contMenu #descMenu{
        justify-content: flex-start;
        width: 300px; 
     }
     #descMenu #iconDescMenu{
          color: #f5f5f5;
          display: block;
          font-size: 30px;
          margin-right: 20px;
     }
     #descMenu a{
      color: #f5f5f5;
      font-size: 16px;
      padding: 5px 0px;
     }
     #descMenu #iconDescMenua{
          color: #f5f5f5;
          display: block;
          font-size: 30px;
          margin-left: 15px;
          margin-right: 31px;
     }
     #descMenu #iconDescMenub{
          color: #f5f5f5;
          display: block;
          font-size: 30px;
          margin-left: 0px;
          margin-right: 24px;
     }
     #descMenu #iconDescMenuc{
          color: #f5f5f5;
          display: block;
          font-size: 30px;
          margin-left: 7px;
          margin-right: 24px;
     }
     #tQueHacemos{
        display: block;
    }
     #tQueHacemos #titleQueHacemos{
         width: 100%;
     }
     #tQueHacemos #menuQueHacemos{
        width: 100%;
    }
     #menuQueHacemos .mQHacemos{
         display:block;
     }
    .mQHacemos #conceptoMQH{
        height: 60px;
        margin: auto;
        padding: 20px;
        width: 100%;
    }
    .slider #conjuntoCasosExito{
         display: block;
         width: 100%;
    }
    #conjuntoCasosExito #textoCasosE{
        width: 100%;
    }
    .left, .right{
        display: none;
    }
    #multiEmpresas{
        display: block;
    }
    #multiEmpresas #meDerecho{
        margin: 0;
        width: 100%;
    }
    #multiEmpresas #meCentro{
        margin: 0;
        width: 100%;
    }
    #multiEmpresas #meIzquierdo{
        margin: 0;
        width: 100%;
    }
    #contacto{
        display: block;
        padding: 20px;
        justify-content: center;
    }
    #contacto #mapa{
        margin: 0 ;
    }
}
@media screen and (max-width: 768px){
    #resumeOle{
        display: block;
    }
    #resumeOle .avisoPrivacidad{
        max-width: 100%;
        min-width: 280px;
    }
    #resumeOle .mapaSitio{
        max-width: 100%;
        min-width: 280px;
    }

}