@import url("custom-font.css");
@import url("carousel.css");
@import url("banners.css");

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Generales  ==========*/
    body{
        /*background: url("../images/fonto-site.jpg") center top;*/
        background-size: cover;
        font-family: 'camingodos_pro_regular';
        font-weight: normal;
    }
    body.bg-body,#subsidiarias{
        background: url("../images/fonto-site.jpg") center top;
        background-size: cover;
    }
    h1{
        color: #E97200;
        font-size: 32px;
        font-weight: bold;
    }
    .scrollup {
        width: 60px;
        height: 60px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
        text-indent: -9999px;
        background: url(../images/Scroll-to-top-button.png) no-repeat;
        background-size: cover;
    }

    .is-sticky{
        background: #333;
        z-index: 999;
    }
    .map {
        width:100%;
        height:300px;   
    }


    .map-wrap {
        position:relative; 
    }
        
    .overlay {
        width:100%;
        min-height:300px; 
        position:absolute; 
        top:0;
    }

    .with-errors ul.list-unstyled li{
        background: yellow;
        color: red;
        margin: 0px 0px 10px 0px;
        padding: 10px;
    }
    .help-block{
        margin-top: 0px;
    }
    /*==========  Mobile First Method  ==========*/
    


    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        body{
            padding-top: 70px;
        }
        h1.title-section{
            text-align: center;
        }
        #redes{display: none;}
        #logo-mobile{
            max-width: 130px;
        }
        #logo{display: none;}
        #nosotros h1{
            text-align: center;
        }

        .navbar{
            height: 70px !important;
            margin: 0px;
            border-radius: 0px;
        }
        .navbar-inverse .navbar-collapse{
            background: #333;
            border: 1px solid #000;
            margin-top: 15px;
            margin-right: -16px;
            margin-left: -16px;
        }
        #redes ul {
            margin: 0px;
            padding: 0px;
        }
        #redes ul li{
            display: block;
            float: left;
            margin: 0px;
            padding: 0px;
        }
        #redes ul li a{
            display: block;
            margin: 5px;
            padding: 5px;
        }
        #redes ul li a img{
            margin: 0px;
            padding: 0px;
        }
        #nosotros h1{
            max-width: 100%;
            margin: 50px auto 20px;
            font-size: 21px;
        }
        #nosotros p{
            font-size: 18px;
            margin: 10px 0px;
        }


        #nosotros p::before{
            content: url("../images/linea01.jpg");
            display: block;
        }

        #ventajas{
            background: #333;
            color: #fff;
            padding-top: 40px;
            padding-bottom: 40px;
            display: block;
        }
        #ventajas h2{
            background: url("../images/linea02.jpg") no-repeat right bottom;
            margin: 50px 40px 0px 0px;
            padding-bottom: 15px;
            font-size: 28px;
            text-align: right;
        }
        #ventajas ul{margin: 50px 0px 0px 40px; padding: 0px;}
        #ventajas ul li{font-size: 18px;}
        #myv h1{margin-top: 25%;}
        #myv img{margin-top: 15%;}

        #myv h1::after{
            content: url("../images/linea02.jpg");
            display: block;
            margin-top: -10px;
        }
        #myv p{max-width: 70%; font-size: 20px;}

        #vision{
            text-align: right;
        }
        #vision p{float: right;}

        #history{
            background:#333;
            color: #fff;
            margin-top: 60px;
            padding: 0px 0px;
        }
        #history img.imgFondo{
            width: 100%;
        }
        #history .myContent {
            z-index: 2;
            position: absolute;
            top: 18%;
            width: 100%;
        }
        #history h3{
            text-align: center;
            background: url("../images/linea03.jpg") center bottom no-repeat;
            padding-bottom: 10px;
        }
        #history p{
            font-size: 16px;
            margin: 10px 0px;
        }
        #subsidiarias{
            padding-top: 60px;
        }
        
        #subsidiarias ul.nav-tabs {
            border: none;
            margin:0px ;
            padding:0px;
        }
        #subsidiarias ul.nav-tabs li {
            margin:10px 0px;
            width:33%;
            padding:0px;
            text-align: center;
        }
        #subsidiarias ul.nav-tabs li:last-child{margin:10px 0px;}
        #subsidiarias ul.nav-tabs li a {
            background: none;
            border: 0px;
            margin:0px;
            padding:0px;
            width: 100%;
            display: block;
        }
        #subsidiarias ul.nav-tabs li a:hover{
            border:1px solid #e1e1e1;
        }
        #subsidiarias ul.nav-tabs li.active a:hover{
            background: none;
        }
        #subsidiarias ul.nav-tabs li a img{
            margin:0px;
            padding:0px;
            width: 100%;
        }
        #subsidiarias .border{
            border: 1px solid #E0E0E0;
            margin: 10px 0;
            display: block;
            float: left;
        }
        #subsidiarias img.logo-empresa{
            display: block;
            margin: 0 auto;
        }
        #subsidiarias .empresa h2{
            border-bottom: #E0E0E0 1px solid;
            color: #E97200;
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 40px;
            padding: 20px 0px;
            text-align: center;
        }
        #subsidiarias .icon-center img{
            margin: 0 auto;
            display: block;
        }
        #subsidiarias p{
            font-size: 18px;
            margin: 25px 0px;
        }

        #subsidiarias p::before{
            content: url(../images/linea02.jpg);
            display: block;
            margin-bottom: 10px;
        }
        #grupo-even img{
            margin: 40px 0px;
            display: block;
            float: left;
        }
        #grupo-even ul{
            font-size: 18px;
            margin: 50px 0px 0px 20px;
            padding: 0px;
        }
        #grupo-even ul li{
            margin: 20px 0px;
            /*display: block;*/
        }
        #unete{
            background: #E97200;
            color: #fff;
            padding:50px 0px; 
        }
        #unete h2{
            font-size: 26px;
            text-align: center;
        }
        #unete img{
            display: block;
            margin: 50px auto;
        }
        #unete ul{
            margin: 0px;
            padding: 0px;
        }
        #unete ul li{
            background:url("../images/bullet-unete.png") left 5px no-repeat;
            list-style:none ;
            line-height: 1.5;
            margin: 15px 0px;
            padding-left: 25px;
            display: block;
        }
        #contacto-home{
            background:#333333 url("../images/bg-footer.jpg");
            background-size: 100%;
            color: #fff;
            font-size: 16px;
            font-weight: 100;
            padding-top: 50px;
            padding-bottom: 50px;
            text-align: center;
        }
        #contacto-home h1{
            color: #fff;
            margin-bottom: 40px;
        }
        #contacto-home h1::after,
        #contacto-home p.correo::after{
            content: url("../images/linea04.png");
            display: block;
        }
        #contacto-home p.tel,
        #contacto-home p.correo{
            margin: 20px 0px;
        }
        footer{
            border-top: 1px solid #444;
            background: #333;
            color: #999;
            text-align: center;
            padding: 20px 0px;
        }
        footer a{
            color: #999;
            text-align: center;
        }
        footer a:hover{
            text-decoration: underline;
            color: #fff;
        }
        footer img{
            display: block;
            margin: 20px auto;
            max-width: 80px !important;

        }

        #clientes{
            margin-top: 50px;
            margin-bottom: 50px;
        }
        #clientes h1::after{
            content: url("../images/linea05.png");
            display: block;
        }
        #clientes img{
            margin:15px 10%;
            max-width: 80%;
        }
        #banner-section img{width: 100%;}
        #banner-section .caption{
            color: #fff;
            text-align: center;
            position: absolute;
            z-index: 2;
            top: 15%;
            width: 80%;
            margin-left: 10%;
        }
        #banner-section .caption h2{
            font-size: 18px;
            font-weight: bold;
        }
        #servicios-infra{
            background-color: #ECECEC;
        }
        #servicios-infra h1{
            max-width: 94%;
            font-size: 16px;
            font-weight: bold;
            margin-left: 3%;
        }
        #bg-iconos{
            background: rgba(256,256,256,1);
            margin-top: 40px;
            margin-bottom: 40px;
            text-align: center;
        }
        #bg-iconos img.icon-service{
            display: block;
            margin: 0 auto;
        }

        #servicios h1.title-section{
            margin: 20px 0px 40px 0px;
            display: block;

        }
        
        #servicios h2{
            color: #E97200;
            margin:0px 0px  20px 0px;
            font-size: 24px;
        }
        #servicios ul{
            margin: 0px;
            padding-left: 20px;
        }
        hr.separador{
            display: block;
            float: left;
            margin: 30px 0px;
            width: 100%;
        }
        #activos{
            margin-top: 50px;
            margin-bottom: 50px;
        }
        #activos img.img-activo{margin: 0 auto 30px auto; display: block;}
        #activos h1{
            margin: 40px 0px;
        }
        #activos img.icon-activo{
            float: left;
            display: block;
            max-width: 32px;
        }
        #activos h2{
            display: block;
            float: right;
            font-size: 21px;
            font-weight: bold;
            margin: 5px 0px 0px 5px;
            width: 83%;
        }
        #activos ul {
            float: left;
            margin: 10px;
            padding: 0px;
            display: block;
            width: 100%;
        }
        #activos ul li{}

        /* Section proyectos */
        #projectsName{
            background: #333;
            color: #fff;
        }
        #projectsName ul{
            border-bottom: none;
            display: block;
            float: left;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }
        #projectsName ul li,
        #proyectos .nav-tabs>li.active {
            border-right: 1px solid #111;
            display: block;
            float: left;
            margin: 0px 0% 0px 0px;
            padding: 0px;
            vertical-align: middle;
            width: 32%;
        }
        #projectsName ul li:last-child{margin:0px;border-right:none;}
        #proyectos .nav-tabs>li.active>a,
        #proyectos .nav-tabs>li.active>a:hover {
            background-color: transparent !important;
            border: none;
            border-bottom-color: 0 !important;
            color: #fff;
        }
        #projectsName .nav>li>a{border: none;}
        #projectsName .nav>li>a:hover{
            background: transparent;
            color: #fff;
            border: none; 
        }
        #projectsName ul li a{
            color: #ccc;
            display: block;
            margin: 0px;
            min-height: 130px;
            padding: 25px 5px;
            text-align: center;
        }

        #proyectos h1.titleProject{
            display: block;
            font-size: 28px;
            margin: 10px 0px;
            padding: 10px 0px;
            width: 100%;
        }
        #proyectos h2.descProject{
            font-size: 16px;
        }
        #borderOut{
            border: 1px solid #f2f2f2;
            margin-top:40px;
            margin-bottom: 40px;
            padding-top: 20px;
            padding-bottom: 20px; 
            -webkit-box-shadow: 4px 4px 1px 0px rgba(204,204,204,0.3);
            -moz-box-shadow: 4px 4px 1px 0px rgba(204,204,204,0.3);
            box-shadow: 4px 4px 1px 0px rgba(204,204,204,0.3);
        }
        #borderOut img{
            margin: 0px auto;
        }
        #borderOut h4.servicio{
            font-weight: 18px;
        }

        #registro h1.title-section{
            font-size: 24px;
            margin: 30px 0%;
            width: 100%;
        }
        #beneficios{
            background: #ECECEC;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        #beneficios h2{
            color: #E97200;
            margin-top: 30px;
            margin-bottom: 30px;
            text-align: left;
            font-size: 21px;
        }
        #beneficios p{
            margin: 30px 0px;
        }

        #formulario .form-control{
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -webkit-box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            background: none;
            border: none;
            border-bottom: 1px solid #222;
            border-radius: 0;
            box-shadow: none;
            color: #333;
            display: block;
            font-size: 14px;
            height: 34px;
            line-height: 1.42857143;
            margin-bottom: 0px;
            padding: 6px 0 0 0;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            width: 100%;
        }
        #formulario select.form-control{
            background: url("../images/select.png") 90% center no-repeat;
            background-size: 20px;
            border: 1px solid #222;
            border-radius: 0px;
            -webkit-appearance: none;
            color: #333;
            padding: 0px 10px;
        }
        #formulario span{
            display: block;
            width: 100%;
            float: left;
        }
        #formulario .btn{
            background: none;
            border: 1px solid #222;
            color: #000;
            font-size: 18px;
            font-weight: bold;
            border-radius: 0px;
            margin: 20px 0px;
        }
        h2.fase1, h2.fase2{
            color: #fff;
            display: block;
            margin: 30px 0px;
            padding: 3px 10px;
            text-align: center;
        }
        h2.fase1{
            background:url("../images/bg-fase-1.png" ) center top no-repeat !important;
        }
        h2.fase2{
            background:url("../images/bg-fase-2.png" ) center top no-repeat !important;
        }
        .bg-gray{
            background: #ECECEC;
            display: block;
            float: left;
            margin: 0px 0px 30px 0px;
            padding:0px 0px 57%;
            width: 100%;
        }
        .bg-gray h3{
            color: #E97200;
            text-align: center;
            background: url("../images/linea02.jpg") center bottom no-repeat;
            padding: 10px 0px;
            margin: 30px 0px;
        }
        .bg-gray ul{
            margin: 30px 15px;
            min-height: 165px;
        }
        .bg-gray ul li{
            font-size: 18px;
            margin-bottom: 10px;
        }
        .bg-gray a{
            color: #E97200;
            display: block;
            font-size: 18px;
            font-style: italic;
            margin-left: 40px;
        }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

        body{
            padding-top: 100px;
        }
        .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
            background: none;
        }
        .navbar-inverse .navbar-collapse{
            background: none;
            border: none;
            margin: 0px -15px;
            padding: 0px;
            width: 100% !important;
        }
        .navbar{
            background: #333 url("../images/logo.png") center center no-repeat;
            height: 100px !important;
            margin: 0px;
        }
        .nav>li>a {
            border-right: 1px solid #e1e1e1;
            position: relative;
            display: block;
            padding: 0px 10px ;
            font-size: 12px;
            line-height: 1;
            margin-top: 10px;
        }
        .nav>li:last-child>a{border-right: none;}
        /*.navbar-brand {
            padding: 5px 15px;
            text-align: center;
        }*/
        #redes{display: block;}
        #logo-mobile{display: none;}
        #logo{
            display: block;
            max-width: 15%;
            margin: 0px auto;
        }
        #logo a{
            width: 100%;
            display: block;
        }
        #nosotros{
            margin-top: 60px;
        }
        #nosotros h1{
            max-width: 60%;
            margin: 50px auto;
            font-size: 28px;
        }
        #nosotros p{
            font-size: 24px;
            margin: 15px 40px;
        }
        #ventajas{
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+50,4d4d4d+50 */
            background: #333333; /* Old browsers */
            background: -moz-linear-gradient(left,  #333333 50%, #4d4d4d 50%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #333333 50%,#4d4d4d 50%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #333333 50%,#4d4d4d 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#4d4d4d',GradientType=1 ); /* IE6-9 */
            padding-top: 40px;
            padding-bottom: 40px;
        }
        #subsidiarias{
            padding-top: 60px;
            display: block;
        }
        
        #subsidiarias ul.nav-tabs {
            border: none;
            margin:0px auto;
            padding:0px;
            width: 80%;
        }
        #subsidiarias ul.nav-tabs li {
            margin:10px 0px;
            width:33%;
            padding:0px;
            text-align: center;
        }
        #subsidiarias ul.nav-tabs li:last-child{margin:10px 0px;}
        #subsidiarias ul.nav-tabs li a {
            border: 0px;
            margin:0px;
            padding:20px 0px;
            width: 100%;
            display: block;
        }

        #subsidiarias ul.nav-tabs li a img{
            display: block;
            margin:0px auto;
            padding:0px;
            max-width: 140px;
        }
        #subsidiarias .border{
            border: 1px solid #E0E0E0;
            margin: 0px  0px 60px 0px;
            display: block;
            float: left;
        }
        #subsidiarias img.logo-empresa{
            display: block;
            margin: 30px 0px;
        }
        #subsidiarias .empresa h2{
            font-size: 32px;
            text-align: left;
        }
        #contacto-home{
            background:#333333 url("../images/bg-footer.jpg");
            background-size: 100%;
            color: #fff;
            padding-top: 50px;
            padding-bottom: 50px;
            text-align: left;
        }
        #contacto-home h1{
            color: #fff;
            margin-bottom: 40px;
        }

        footer img{
            display: block;
            margin: 0px auto;
            max-width: 80px !important;
        }

        #banner-section .caption{
            color: #fff;
            text-align: center;
            position: absolute;
            z-index: 2;
            top: 35%;
            width: 60%;
            margin-left: 20%;
        }
        #banner-section .caption h2{
            font-size: 36px;
            font-weight: bold;
        }
        #servicios-infra h1{
            max-width: 80%;
            font-size: 26px;
            font-weight: bold;
            margin: 5% 10%;
        }

        #bg-iconos{
            background: rgba(236,236,236,1);
            background: -moz-linear-gradient(top, rgba(236,236,236,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 26%);
            background: -webkit-gradient(left top, left bottom, color-stop(25%, rgba(236,236,236,1)), color-stop(25%, rgba(255,255,255,1)), color-stop(26%, rgba(255,255,255,0)));
            background: -webkit-linear-gradient(top, rgba(236,236,236,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 26%);
            background: -o-linear-gradient(top, rgba(236,236,236,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 26%);
            background: -ms-linear-gradient(top, rgba(236,236,236,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 26%);
            background: linear-gradient(to bottom, rgba(236,236,236,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 26%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff', GradientType=0 );
            text-align: center;
            margin-top: 0px;
        }

        #activos{
            margin-top: 50px;
            margin-bottom: 150px;
        }
        #activos h1{
            margin: 50px 0px;
        }
        #activos img.icon-activo{
            float: left;
            display: block;
            margin-top: 60px;
            width: 50px;
        }
        #activos h2{
            display: block;
            float: left;
            font-size: 28px;
            font-weight: bold;
            margin: 60px 0px 0px 10px;
            width: 80%;
        }
        #activos ul {
            float: left;
            margin: 50px 10px;
            padding: 0px;
            display: block;
            width: 100%;
        }
        #activos ul li{
            font-size: 18px;
        }
        #activos img.img-activo{max-width: 420px; margin: 0 auto; display: block;}

        #proyectos h1.titleProject{
            display: block;
            font-size: 36px;
            margin: 15px 0px;
            padding: 15px 0px;
            width: 100%;
        }
        #proyectos h2.descProject{
            font-size: 24px;
            margin: 25px 0px 40px 0px;
        }
        #borderOut{
            border: 1px solid #f2f2f2;
            margin-top:50px;
            margin-bottom: 50px;
            padding-top: 10px;
            padding-bottom: 30px; 
            -webkit-box-shadow: 4px 4px 1px 0px rgba(204,204,204,0.3);
            -moz-box-shadow: 4px 4px 1px 0px rgba(204,204,204,0.3);
            box-shadow: 4px 4px 1px 0px rgba(204,204,204,0.3);
        }
        #borderOut img{
            margin: 20px auto;
        }
        #borderOut h4.servicio{
            font-weight: 21px;
            font-weight: bold;
            min-height: 40px;
        }
        #projectsName ul li a{
            color: #ccc;
            display: block;
            margin: 0px;
            min-height: 50px;
            padding: 25px 5px;
            text-align: center;
        }
        .jplist-google-maps-row .stores-box,.jplist-google-maps-row .jplist-map-panel{
            height: 550px !important;
        }
        #registro h1.title-section{
            font-size: 28px;
            margin: 60px 10%;
            width: 80%;
            display: block;
        }
        #beneficios{
            background: #ECECEC;
            margin-top: 0px;
            margin-bottom: 30px;
            padding-bottom: 400px;
        }
        #beneficios h2{
            color: #E97200;
            margin-top: 60px;
            margin-bottom: 60px;
            text-align: left;
            font-size: 21px;
        }
        #beneficios p{
            margin: 60px 0px;
        }
        h2.fase1, h2.fase2{
            margin-top: 0px;
        }
        #fases{margin-top: 50px;margin-bottom: 50px;}
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .nav>li>a{
            font-size: 14px;
        }
        #banner-section .caption{
            top: 20%;
            width: 70%;
            margin-left: 15%;
        }
        #banner-section .caption h2{
            font-size: 52px;
            font-weight: bold;
        }
        #servicios-infra h1{
            max-width: 80%;
            font-size: 32px;
            font-weight: bold;
            margin: 5% 10%;
        }

        /**** Estilos para la seccion de sitio ****/
        #mySites{
            background:#555; 
        }
        .jplist-google-maps-row .stores-box,.jplist-google-maps-row .jplist-map-panel{
            height: 440px !important;
        }
        #registro h1.title-section{
            font-size: 28px;
            margin: 60px 10% !important;
            width: 80%;
            display: block;
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1280px) {
        .nav>li>a{
            font-size: 18px;
        }
        #banner-section .caption{
            top: 40%;
            width: 56%;
            margin-left: 22%;
        }
        #banner-section .caption h2{
            font-size: 42px;
            font-weight: bold;
        }
        #servicios-infra h1{
            max-width: 80%;
            font-size: 32px;
            font-weight: bold;
            margin: 5% 10%;
        }

        .jplist-google-maps-row .stores-box,.jplist-google-maps-row .jplist-map-panel{
            height: 740px !important;
        }
        #registro h1.title-section{
            font-size: 28px;
            margin: 30px 15%;
            width: 70%;
        }
        .bg-gray ul{
            margin: 30px 15px;
            min-height: 245px;
        }
        .bg-gray ul li{
            font-size: 21px;
            margin-bottom: 30px;
        }
        .bg-gray a{
            color: #E97200;
            display: block;
            font-size: 18px;
            font-style: italic;
            margin-left: 40px;
        }
    }