@import "share.css";
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
/*==========  Mobile First Method  ==========*/

body{
    font-family: "Montserrat", arial;
    font-size: 16px;
}

section {
    padding-top: 70px;
}

nav.navbar{
    background: #fff;
}
.navbar-brand{
    max-width: 160px;
}

.navbar-toggler{
    float: right !important;
}



.img-responsive{
    width: 100%;
}


/*********************************************/
/* ========== Carrusel Slider Banner ========== */
/*********************************************/


.link-mail,
.link-phone{
    color: #333;
    display: block;
    float: none;
    text-decoration: none;
}



.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    border-radius: 10px;
    margin: 5px 10px;

}
.carousel-indicators {
    margin-bottom: 5rem;
}

/* medium and up screens */


.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

#my-banner .carousel-caption {
    top: 40%;
}
#my-banner .carousel-caption h2{
    font-weight: bold;
    font-family: "Montserrat", arial;
    margin-bottom: 20px;
    text-transform: uppercase;
}
#my-banner .carousel-caption a.btn{
    background: #ea0a2a;
    color: #fff;
    font-weight: bold;
    padding-right: 50px;
    padding-left: 50px;
}


/*********************************************/
/* ========== Carrusel CLientes ========== */
/*********************************************/
#CarruselClientes,
#CarruselAlianzas{
    margin-top:0px;
    margin-bottom: 0px;
}
#CarruselClientes .card,
#CarruselAlianzas .card{
    border:none;
}
#CarruselClientes .card img,
#CarruselAlianzas .card img{
    opacity: 0.6;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
#CarruselClientes .card img:hover,
#CarruselAlianzas .card img:hover{
    opacity: 1;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}
#CarruselClientes .carousel-control-next,
#CarruselClientes .carousel-control-prev,
#CarruselAlianzas .carousel-control-next,
#CarruselAlianzas .carousel-control-prev{
    filter: invert(100%);
}

/*********************************************/
/* ========== Inicia  Formulario ========== */
/*********************************************/

#contacto{
    display: block;
    padding-top: 70px;
    padding-bottom: 70px;
}
#contacto h3{
    font-weight: bold;
    font-size: 44px;
    margin-bottom: 50px;
}
#contacto #side-bar .row{
    margin-bottom:50px;
}

#contacto strong{
    color: #ea0a2a;
    display: block;
    font-weight: bold;
    float: none;
    width: 100%;
}


#contact-form .form-control{
    border:none;
    border-bottom: 1px solid #333;
    border-radius: 0px;
    background: none;
}
#contact-form .form-group{
    margin-bottom: 40px;
}

#contact-form label{display: none;}



    #contact-form .form-control::placeholder{color: #8AA9A3;}

    #contact-form .help-block.with-errors ul{
        background: red;
        color: #fff;
        margin-top: 0px;
        padding: 5px 10px;
    }

    .parpadea {
      
      animation-name: parpadeo;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      -webkit-animation-name:parpadeo;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
    }

    @-moz-keyframes parpadeo{  
        0% { opacity: 1.0; }
        85% { opacity: 1.0; }
        100% { opacity: 0.3; }
    }

    @-webkit-keyframes parpadeo {  
        0% { opacity: 1.0; }
        85% { opacity: 1.0; }
        100% { opacity: 0.3; }

    }

    @keyframes parpadeo {  
        0% { opacity: 1.0; }
        85% { opacity: 1.0; }
        100% { opacity: 0.3; }

    }

    #contact-form > div.controls > div:nth-child(3) > div:nth-child(2) > button{
        background: #005cb9;
        border: none;
        color: #fff;
        display: block;
        font-weight: bold;
        padding: 20px;
        text-align: center;
        width: 100%;

    }


/*********************************************/
/* ========== Termina  Formulario ========== */
/*********************************************/

footer{
    background: #fe0000;
    color: #fff;
    margin:0px;
    padding: 30px 0px;
}
footer figure,
footer img{
    margin: 0 auto;
    width: 120px;
}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    .carousel-caption  {
        top:20%;
    }

    #wellcome{
        background: #005cb9;
        color: #fff;
        padding-top:50px;
        padding-bottom: 20px;
    }

    #wellcome strong{
        font-weight: bold;
        font-size: 32px;
        margin-top: 0px;
    }
    #wellcome img.img-title{
        max-width: 80%;
        margin-bottom: 20px;
    }

    #wellcome p{
        opacity: 0.6;
        font-size: 18px;

    }
    #mapa{
        background: url(../images/mapa-mexico.png) no-repeat center top;
        background-size: 90%;
        padding: 240px 0px 0px 0px;
    }

    #mapa p{
        margin: 0px 0px 40px 0px;
        text-align: left;
    }

    #accordionFlushExample > div{
        background: #005cb9;
        color: #fff;
    }
    .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(0,0,0,.125);
    }
    .accordion-button,
    .accordion-button:not(.collapsed){
        background: #005cb9;
        color: #fff;
        text-align: center !important; 
        border:none;
        text-transform: uppercase;
        max-width: 50%;
        margin:30px auto;
        box-shadow: none;
    }
    .accordion-button::after {
        background-image: url('../images/arrow-bottom.png');
        bottom: -5px;
        right: 50%;
        content: "";
        margin-left: auto;
        position: absolute;
        transition: var(--bs-accordion-btn-icon-transition);
    }

    .accordion-button:not(.collapsed)::after{
        background-image: url('../images/arrow-bottom.png');
    }

    #conoce-soluciones{
        background: #fe0000;
        color: #fff;
        margin:50px -15px;
        padding: 60px 0px;
        text-align: center;
    }

    #conoce-soluciones figure:nth-of-type(1){
        position: relative;
        float: left;
        margin: -90px 10% 50px;
        max-width: 80%;
    }
    #conoce-soluciones ul {
        display: block;
        float: left;
        width: 100%;
        margin:0px;
        padding: 0px;
    }
    #conoce-soluciones ul li {
        display: block;
        float: left;
        margin:20px 5% ;
        padding: 0px;
        text-align: center;
        width: 40%;
    }
    #conoce-soluciones ul li img {
        max-width: 30%;
        margin: 0 auto;
        margin:10px 0px;
    }
    #conoce-soluciones p{opacity: 1;}

    #divisiones p{
        margin:40px 0; 
        text-align: center; 
        opacity: 0.5;
    }
    #productos{
        background: url("../images/bg-productos.jpg") no-repeat center top;
        background-size: cover;
        color: #fff;
        padding: 0px 0px 0px 0px;
        margin: 120px 0px 160px 0px;
    }
    #productos h2.title{
        background: #fe0000;
        color: #fff;
        font-weight: bold;
        font-size: 40px;
        padding: 30px 30px 30px 20px;
        display: inline-flex;
        width: 90%;
        position: absolute;
    }
    #productos #CarruselProductos{
        height:930px;
    }

    #productos #CarruselProductos h2{
        margin-top: 150px;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    #productos #CarruselProductos p{
        margin:20px 0px;
    }
    #CarruselProductos > a.carousel-control-prev,
    #CarruselProductos > a.carousel-control-next{
        display: none;
    }
    #CarruselProductos a.carousel-control-prev span.carousel-control-prev-icon{
        color: #fff !important;
    }


    #servicios h2{
        font-weight: bold;
        font-size: 36px;
        margin: 50px 0px 30px 0px;
    }
    #carousel-serv-01{
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: center;
    }
    #carousel-serv-01 .item-serv{
        margin-bottom: 40px;
    }


    #carousel-serv-01 figure{
        border-radius: 50%;
        width: 50%;
        margin: 0 auto;
        -moz-box-shadow: 2px 4px 30px #eee;
        -webkit-box-shadow: 2px 4px 30px #eee;
        box-shadow: 2px 4px 30px #eee;
    }
    #carousel-serv-01 img{
        border-radius: 100%;
    }
    #carousel-serv-01 p{
        margin: 30px 15px;
        min-height: 100px;
    }


    #servicios a.more{
        color: #8d8d8d;
        display: block;
        float: none;
        font-weight: bold;
        font-size: 12px;
        margin: 20px 0px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 100%;
    }
    #servicios a.icon-share{
        display: block;
        float: left;
        text-align: center;
        width: 50%;
    }
    #servicios a img{
        max-width: 32px;
    }

    #carousel-serv-01 .item-serv a.link-to-serv figure{
        background-size: cover;
        padding: 25%;
        display: block;
        display: block;
        max-width: 100%;
    }
    #carousel-serv-01 .item-serv a.link-to-serv figure img{
        display: block;
        max-width: 100%;
    }

    #carousel-serv-01 .item-serv a.link-to-serv.serv01 figure{
        background: #fff url('../images/servicios-01-V2.png');
        background-size: cover;
    }


    #carousel-serv-01 .item-serv:hover a.link-to-serv.serv01 figure{
        background: #fe0000 url('../images/servicios-01-V2-hover.png');
        background-size: cover;
    }

    #carousel-serv-01 .item-serv a.link-to-serv.serv02 figure{
        background: #fff url('../images/servicios-02-V2.png');
        background-size: cover;
    }


    #carousel-serv-01 .item-serv:hover a.link-to-serv.serv02 figure{
        background: #fe0000 url('../images/servicios-02-V2-hover.png');
        background-size: cover;
    }

    #carousel-serv-01 .item-serv a.link-to-serv.serv03 figure{
        background: #fff url('../images/servicios-03-V2.png');
        background-size: cover;
    }


    #carousel-serv-01 .item-serv:hover a.link-to-serv.serv03 figure{
        background: #fe0000 url('../images/servicios-03-V2-hover.png');
        background-size: cover;
    }

    #carousel-serv-01 .item-serv a.link-to-serv.serv04 figure{
        background: #fff url('../images/servicios-04-V2.png');
        background-size: cover;
    }


    #carousel-serv-01 .item-serv:hover a.link-to-serv.serv04 figure{
        background: #fe0000 url('../images/servicios-04-V2-hover.png');
        background-size: cover;
    }



    .modal-header{
        border: none;
        padding: 0px 12px;
    }
    .modal-footer button.btn-secondary{
        background: #005cb9;
        color: #fff;
    }
    .title-ser-modal{
        background: url('../images/Bg-title-modal.png') repeat-y center top;
        background-size: 100%;
        color: #fff;
        font-weight: 900;
        padding: 50px 0px;
        text-transform: uppercase;
    }
    .title-ser-modal h3{
        font-weight: bold;
        font-size: 28px;
        margin-left: 9%;
    }

    .text-modal > p::before {
        content: "\002B";
        color: #e21f2f;
        width: 20px;
        font-size: 21px;
        font-weight: bold;
        position: absolute;
        margin: -3px 0px 0px -20px;
    }
    .text-modal h4{
        color: #313131;
        font-weight: bold;
        font-size: 21px;
        margin: 0 0 30px 0px;
    }

    .text-modal span{
        font-weight: bold;
        text-transform: uppercase;
        color: #313131;
        margin-right: 10px;
    }
    .text-modal ul li{
        list-style: url('../images/bullets-modal.jpg');
        margin: 0px;
        padding: 0px 0px 10px 10px;
    }


    button.close-cotizar{
        background: #e21f2f;
        border-radius: 0;
        color: #fff;
        font-weight: lighter;
        width: 160px;
        text-align: center;
        border: none;
        text-transform:  uppercase;
    }

    button.close-cotizar:hover{
        background: #b71825 !important;
        font-weight: bold;
        color: #fff !important;
        border: none;
    }

    .modal-header.row figure{
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .modal-footer {
        padding:  0;
        border: 0px;
    }
    .modal-footer figure{
        margin: 0px;
    }
    #productos a.prod-contact{
        background: #fe0000;
        color: #fff;
        margin: 30px 0;
    }
    #CarruselProductos > a.carousel-control-prev,
    #CarruselClientes > a.carousel-control-prev,
    #CarruselAlianzas > a.carousel-control-prev{
        color: #fff;
        left: -20px;
        display: flex;
    }
    #CarruselProductos > a.carousel-control-next,
    #CarruselClientes > a.carousel-control-next,
    #CarruselAlianzas > a.carousel-control-next{
        color: #fff;
        right: -20px;
        display: flex;
    }

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    .carousel-caption  {
        top:30%;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .carousel-caption  {
        top:40%;
    }
    #conoce-soluciones figure:nth-of-type(1){
        position: absolute;
        float: left;
        margin: -90px 4% ;
        max-width: 30%;
    }

    .accordion-button,
    .accordion-button:not(.collapsed){
        text-align: center !important;
        max-width: 180px;
        margin:30px auto;
    }

    #carousel-serv-01{
        margin-top: -80px;
        margin-bottom: 0px;
        text-align: center;
    }
    #carousel-serv-01 figure{
        border-radius: 50%;
        width: 50%;
        margin: 0 auto;
        -moz-box-shadow: 10px 16px 85px #ccc;
        -webkit-box-shadow: 10px 16px 85px #ccc;
        box-shadow: 10px 16px 85px #ccc;
    }
    #carousel-serv-01 p{
        margin: 50px 30px 30px 30px;
        font-size: 16px;
    }
    #productos{
        background: url("../images/bg-productos.jpg") no-repeat center top;
        background-size: 100%;
        color: #fff;
        padding: 0px 0px 0px 0px;
        margin: 120px 0px 160px 0px;
    }
   #productos #CarruselProductos{
        height:630px;
    }
    #productos h2.title{
        font-size: 60px;
        padding: 30px 30px 30px 12%;
        width: 40%;
    }
    #productos #CarruselProductos h2{
        margin-top: 200px;
        margin-bottom: 40px;
    }
    #CarruselProductos > a.carousel-control-prev,
    #CarruselClientes > a.carousel-control-prev,
    #CarruselAlianzas > a.carousel-control-prev{
        color: #fff;
        left: -150px;
        display: flex;
    }
    #CarruselProductos > a.carousel-control-next,
    #CarruselClientes > a.carousel-control-next,
    #CarruselAlianzas > a.carousel-control-next{
        color: #fff;
        right: -150px;
        display: flex;
    }

     #productos a.prod-contact:hover{
        color: #fff;
        margin: 30px 0;
        background: #b71825 !important;
        font-weight: bold;
    }


    
    #mapa{
        background: url("../images/mapa-mexico.png") no-repeat 12% 1%;
        background-size: 68%;
        padding: 80px 0px 290px 0px;
    }

    #mapa p{
        font-size: 21px;
        line-height: 1.8;
        margin: 0px 0px 40px 0px;
        text-align: right;
    }
    #my-banner .carousel-caption {
        top: 15%;
    }
    
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #conoce-soluciones{
        text-align: left;
    }
    
    #conoce-soluciones ul {
        display: block;
        float: left;
        width: 100%;
        margin:0px;
        padding: 0px;
    }
    #conoce-soluciones ul li {
        display: block;
        float: left;
        height: 100px;
        margin:20px 4% ;
        padding: 0px;
        text-align: center;
        width: 24%;
    }
    #conoce-soluciones ul li img {
        max-width: 30%;
        margin: 10px auto;
    }

    #wellcome img.img-title{
        max-width: 50%;
    }

    #my-banner .carousel-caption{
        top: 20%;
        text-align: left;
        max-width: 60%;
    }

    #my-banner .carousel-caption h2{
        font-size:42px;
    }
    #my-banner .carousel-caption p{
        font-size:19px;
    }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    #conoce-soluciones figure:nth-of-type(1){
        position: absolute;
        float: left;
        margin: -90px 4% ;
        max-width: 30%;
    }
    #my-banner .carousel-caption{
        top: 25%;
        max-width: 50%;
    }
}

@media only screen and (min-width : 1340px) {
    #conoce-soluciones figure:nth-of-type(1){
        position: absolute;
        float: left;
        margin: -80px 2% ;
        max-width: 27%;
    }
    #my-banner .carousel-caption{
        top: 25%;
        max-width: 50%;
    }

    #my-banner .carousel-caption h2{
        font-size:42px;
    }
    #my-banner .carousel-caption p{
        font-size:19px;
    }
}

@media only screen and (min-width : 1400px) {
    #conoce-soluciones{
        margin:80px -15px;
        padding: 80px 0px;
    }
    #conoce-soluciones figure:nth-of-type(1){
        position: absolute;
        float: left;
        margin: -120px 2% ;
        max-width: 30%;
    }
    #my-banner .carousel-caption{
        top: 27%;
        max-width: 47%;
    }

    #my-banner .carousel-caption h2{
        font-size:48px;
    }
    #my-banner .carousel-caption p{
        font-size:21px;
    }
}

@media only screen and (min-width : 1580px) {
    #conoce-soluciones{
        margin:80px -15px;
        padding: 80px 0px;
    }
    #conoce-soluciones figure:nth-of-type(1){
        position: absolute;
        float: left;
        margin: -140px 2% ;
        max-width: 27%;
    }
    #my-banner .carousel-caption{
        top: 30%;
        max-width: 40%;
    }

    #my-banner .carousel-caption h2{
        font-size:52px;
    }
    #my-banner .carousel-caption p{
        font-size:24px;
    }
}

@media only screen and (min-width : 2000px) {

    #conoce-soluciones figure:nth-of-type(1){
        position: absolute;
        float: left;
        margin: -140px 2% ;
        max-width: 23%;
    }

}