@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
/* amarillo : #EBC67B */
/* verde    : #4BA299 */
/* azul     : #126DA1 */
/* rojo     : #BF3158 */


body{
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    overflow-x: hidden;
    margin: 0; 
    padding : 0;
   
    
}

.footer-link{
   text-decoration: none;
      color: white;
        font-size: 16px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
}

.footer-link:hover{
   
     color:#53e4d5;
        font-size: 16px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
}



.footer-link:visited{
   
       color:white;
        font-size: 16px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
}


.main-content{
    display:none;
}

input[type="button"]{
    outline: none;
}

.hideHTMLElement{
    display: none;
}

.hideHTMLElement{
    display: block;
}

.footer{
        background-color: white;
        min-height: 400px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
        margin-top: -300px;
}

.arrowTop{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

/* .logo-hidden{
   
} */

.fade-in {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
    transition: 1s;
  
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

.fade-out {
    animation: fadeOut ease 1s;
    -webkit-animation: fadeOut ease 1s;
    -moz-animation: fadeOut ease 1s;
    -o-animation: fadeOut ease 1s;
    -ms-animation: fadeOut ease 1s;
    transition: 1s;
}
@keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@-moz-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@-webkit-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@-o-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@-ms-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

.flex-visit-office{
    display: flex;
    justify-content: center;
}

.text-addr{
    text-align: center;
    font-size: 14px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
     
}

.cardscontact{
    color: #3283C2;
    font-size: 24px;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
}



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


/* 
@media screen and (max-width: 411px){
    .img-diagram-xs-sm{
        height: 500px;
    }

    
    .img-diagram-lg-xl{
        display: none;
    }
} */


@media screen and (max-width: 799px){

    .flex-notes{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 100px;
        flex-wrap: wrap;
    }

    .flex-notes > div{
        text-decoration: none;
        width: 100%;
        margin-top: 15px;
        margin-bottom: 50px;
    }

    .notes{
        width: 100%;
        height: 80px;
        margin-top: 10px;
        
    }

    .text-notes{
        font-size: 24px;
        color: #D07732;
        margin-top: 25px;
        text-align: center;
    
    }

      .firstnote{
        animation: rotate  8s ease-in-out infinite;
       
       
    }

    @keyframes rotate {
       0%   {transform: rotateX(0deg)}
       100%   {transform: rotateX(2deg)}
    }


    .adventages-xs{
        width: 300px;
        height: 200px;
    }

    .whyUs-h1-xs{
        margin-top: 80px;
          font-size: 32px;
        color: white;
    }

  .xs-title-content{
      display: flex;
      justify-content: center;
      text-align: center;
  }

  .xs-title-content > div{
    text-decoration: none;
  }

 .title-top-bon{
     width: 100%;
     height: 200px;
     background-color: #e4b12f;
 }


 .original-logo-top{
        width: 100%;
        height: 70px;
        margin-top: 100px;
        
    }

    .img-left-top {
        margin-bottom: 200px;
        margin-top: 100px;
    }
   

/* ========================================== */
/*  sticky scroll button                     */
/* ========================================= */
    
    .scrollTopButton{
        width: 45px;
        height: 45px;
        top: 38%;
        border-radius: 100px;
        padding: 0;
        left: 90%;
        right: 0;
        z-index: 15;
        position: fixed;
      
        background-color: rgb(67, 138, 209, 0.6);
        transition: 0.5s;
        cursor: pointer;
       
        animation: inOut 0.5s ease-in-out;
    }

   .scrollTopButton:hover{
        transition: 0.5s;
         background-color: rgb(67, 138, 209, 1);
        transform: scale(1.2);
    }


     @keyframes inOut {
        0% {
            opacity: 0;
            transform: scale(0);
            
        }
       
        100% {
            opacity: 1;
              transform: scale(1);
            
        }

        
    }

/* ========================================== */
/*          navbar                            */
/* ========================================== */


.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all .1s ease-in-out;
    background-color: transparent !important;
}
.menu-btn__burger {
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  
  transition: all .1s ease-in-out;
}

.menu-btn__burger:hover{
    background-color: #e4b12f;
}

.menu-btn__burger:hover::before{
    background-color: #e4b12f;
}


.menu-btn__burger:hover::after{
    background-color: #e4b12f;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  transition: all .1s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-10px);
}
.menu-btn__burger::after {
  transform: translateY(10px);
}

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

    /* ================================================= */
    /*                      Navbar                       */
    /* ================================================= */

    .flex-navbar{
        width: 100%;
        min-height: 50px;
        display: flex;
        justify-content: space-around;
        transition: 0.8s;
    }

    .fadeinDown {
        -webkit-animation: fadeInDown 800ms ease-in-out; /* Chrome, Safari, Opera */
        animation: fadeInDown 800ms ease-in-out;

    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }
    
    /* Standard syntax */
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .flex-navbar > .sticky-header{  
        text-decoration: none;
    }

    .sticky-header{
        z-index: 10;
        width: 100%;
        height: 100px;
       
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        position:fixed;
        background-color: #fff;
    }

    .showNavbar{
         display:block; 
          transition: 0.8s;
    }

    .hideNavbar{
        display:none; 
         transition: 0.8s;
    }

    .sticky-header-scroll{
    
        width: 100%;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
      
        transition: 0.8s;
        z-index: 10;
        position:fixed;
    }


    /* onclick event open close hamburguer icon  */
    .sticky-header-event{
        transition: 1s;
        box-shadow: 0 6px 16px rgb(0 0 0 / 6%);
    }


    .flex-content-nav{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .flex-content-nav > div{
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 25px;
       
    }

    .original_logo{
        width:120px;
        height: 50px;
        margin-top: -13px;
       
    }

    .flex-media-content{
        display: flex;
        justify-content: space-between;
        width: 150px;
        display: none;
    }

    .flex-content-nav > div{
        text-decoration: none;
       
    }

    .media-icons{
        width: 19px;
        cursor: pointer;
        display: none;
    }

    .facebook-media{
        width: 10px;
        cursor: pointer;
        display: none;
    }
    

.flex-menu-xs{
    display: table;
}

.flex-menu-xs > li{
    display: table-row;
}

#menu{
    width: 100%;
    min-height: 270px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    border-radius: 5px;
     
}
   
.flex-menu-navbar{
    width: 100%;
    height: 15px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background-color: #fff;
    z-index: -1;
    font-family: 'Open Sans', sans-serif;
}

ul{
    display: table;
}

.flex-menu-navbar > li{
 display: table-row;
 margin-top: 25px;
 width:100%;
 justify-content: center;
}

li{ 
    display: table-row;
    list-style: none;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: -22px;
    font-family: 'Open Sans', sans-serif;
}


/* .menu-links{
  color: #BF3158;
   font-size: 22px;
     font-family: 'Open Sans', sans-serif;
     display: block;
     text-decoration: none;
} */

.home-link{
    margin-left: 5px;
   
      font-family: 'Open Sans', sans-serif;
}

/* .menu-links:hover{
    color: #EBC67B;
      font-family: 'Open Sans', sans-serif;
} */

.menu-links{
    font-size: 22px;
     font-family: 'Open Sans', sans-serif;
     display: block;
     text-decoration: none;
    color: #e4b12f;
}

.menu-links:hover{
 
     color: #D07732;
}

.menu-links2{
    font-size: 18px;
    color: #4BA299;
      font-family: 'Open Sans', sans-serif;
}

.menu-links2:hover{
    color: #D07732;
      font-family: 'Open Sans', sans-serif;
}


.subMenus{
    margin-top:10px;
    margin-bottom: 10px;
      font-family: 'Open Sans', sans-serif;
}

.subMenuServices{
    display:none;
}

.servicesLink:hover{
    cursor: pointer;
}

.flex-menu-navbar ul ul {

    position:absolute;
    top:100%;
    left:20%;
    background:white;
    padding:0;
    color: #00375A;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    z-index: 999;
    margin-top: -27px;
    transition: 2s;
    font-family: 'Open Sans', sans-serif;
}

.flex-menu-navbar ul ul li {
 float:none;
 
}

.flex-menu-navbar ul ul a {
 line-height:120%;
 padding:10px 15px;
}

.flex-menu-navbar ul li:hover > ul {
 
 float: none;
}

.flex-xs-sm-contentTop{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 200px;
    background-color: #BF3158;
    z-index: 3;
    margin-top: -8px;
    
}

.strech-xs-sm{
    display:flex;
    justify-content: stretch;
    flex-direction: column;
    background-color: #BF3158;
}

.strech-xs-sm > div{
    text-decoration: none;
}
      

    /* ========================================== */
    /*             content-top                    */
    /* ========================================== */
     .razones-img-top{
        margin-bottom:100px;
        margin-top: 100px;
    }

    .razones-img-bottom{
         margin-bottom:100px;
    } 

    

    /* ========================================== */
    /*  WhyUs                                     */
    /* ========================================== */

    .whyUs-title{
        margin-top: 150px;
        text-align: center;
        margin-bottom: 150px;
         color:#00375A;
    }

    .whyUs-title2{
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-title3{
      
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-title4{
       
          text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-h1{ 
        
        font-size: 38px;
        color:#00375A;
    }

    .whyUs-h2{ 
        
        font-size: 38px;
        color:#D07732;
    }

    #whyUs{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs5{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs2{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU3{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU4{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

     .flex-whyUs{  
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        
        width:100%;
     
    }

    .flex-whyUs > div{
       width: 75%;
        
    }

    .flex-whyUs2{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
        margin-top: 20px;
    }

    .flex-whyUs2 > div{
       width: 35%;
        
    }

    .left-why{
      text-decoration: none;
    }

    .right-why{
      text-decoration: none;
    }

    .separator{
        width: 260px;
    }


    h1{ 
        
        font-size: 45px;
        color:#BF3158;
    }

    .whyUs-img{
        width: 100%;
        height: 400px;
        margin-top: -100px;
        margin-left: -10px;
    }

    .why-text{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }


    .flex-why-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }   

    .flex-why-bottom > div{
        min-height: 300px;
    }

    .flex-why-bottom :first-child{
        justify-content: flex-start;
    }

    .flex-why-bottom :last-child{
        justify-content: flex-end;
    }


    .left-why-bottom{
        width: 300px;
        height: 458px;
    }

    .right-why-bottom{
        width: 317px;
        height: 564px;
        margin-top: 80px;
        margin-right: -20px;
    }

    .whyUs-img2{
       
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: -80px;
    }

    .razones-img-top-xs{
        width: 100%;
        height: 200px;
    }


    /* ========================================== */
    /*  Flex-adventages                           */
    /* ========================================== */

    .flex-adventages{
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 250px;
    }

    .flex-adventages > div{
        width: 450px;
        min-height: 500px;
        
        margin-left:80px;
        margin-right: 80px;
       
    }

    .why-text2{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
        color: #00375A;
    }
    



    /* ========================================== */
    /*  flex-cards-reasons                        */
    /* ========================================== */

    .background-cards{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/background-certf-cards.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center bottom;
       
    }

     .background-cards2{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/bakground-2-familias.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }
    
    .xs-show{
        display: block;
    }

    .xs-lg{
        display: none;
    }

    
    .flex-summary{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .flex-summary > div{
        text-decoration: none;
    }

    .sum2{
        color: #D07732
    }

    .flex-cards-reasons{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 100px;
        z-index: -1;
    }

    .flex-cards-reasons > div{
        text-decoration: none;
    }

    .reassonChoose {
        margin: -50px auto 40px;
        font-size: 38px;
        font-weight: 300;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5;
        color: #4ba299;
        font-family: 'Roboto', sans-serif;
    }

        .items{
        width: 26px;
        height: 23px;
        margin-right: 20px;
        animation: rotate  2s ease-out infinite;
    }

    @keyframes rotate {
        0%{
            transform: rotate(-15deg);
        }

        50%{
            transform: rotate(15deg);
        }

        100%{

            transform: rotate(-15deg);

        }

    

    }

    .flex-items{
        display: flex;
        justify-content: space-between;
    }

    .flex-items > div{
         text-decoration: none;
    }

    details {
        width: 92%;
        min-height: 5px;
        /* max-width: 700px; */
        padding: 45px 70px 45px 45px;
        margin: 0 auto;
        position: relative;
        font-size: 22px;
        /*   border: 2.5px solid #4ba299; */
        box-shadow: 2px 2px 5px rgba(0,0,0,.2);
        border-radius: 15px;
        box-sizing: border-box;
        transition: all .3s ease-in-out;
        background-color: white;
    }

    details + details {
        margin-top: 20px;
    }

    details[open] {
        min-height: 50px;
        background-color: white;
        box-shadow: 2px 2px 20px rgba(0,0,0,.2);
        outline: none;
        border:none;
        transition: all .3s ease-in-out;
    }

    details p {
        color: #96999d;
        font-weight: 300;
        font-family: "Open Sans", sans-serif;
    }

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        color: #4ba299;
    }

    summary:focus {
        outline: none;
    }

    

    summary:focus::after {
        content: "";
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    summary::-webkit-details-marker {
        display: none
    }

  
    details[open] .control-icon-close {
        display: initial;
        transition: all .8s ease-in-out;
        display:none;
    }

    details[open] .control-icon-expand {
        display: none;
    }



    /* ========================================== */
    /*         Footer                             */
    /* ========================================== */

    footer{
       
        width:100%;
        min-height: 500px;
        position:static;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-bottom: 0px;
         overflow-x: hidden;
    }
    

    .footer-img-xs-sm{
        width:100%;
        max-height: 200px;
     
    }

    .flex-footer-content{

        display: flex;
        flex-wrap:wrap;
        margin-top: -5px;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 500px;
        background-color: #00375A; 
    }

    .footer-img{
        width:100%;
        height: 460px;
        display:none;
    }

    .flex-footer-content > div{
        
       width: 80%;
       padding: 60px 10px 60px 10px;
    }

    .flex-footer-content:last-child{
        width: 100%;
    }

    .footer-text{
       color: white;
       font-size: 14px;
       margin-top: 50px;
       padding: 0px 0px 15px 0px;
       margin-top: 15px;
       line-height: 1.5em;
       font-family: 'Open Sans', sans-serif;
    }

    .flex-footer-media{
        display: flex;
        justify-content: stretch;
        margin-top: 50px;
    }

    .flex-footer-media > img{
        height: 15px;
        margin-right: 35px;
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

    .flex-email-footer{
        width: 80%;
        height: 76px;
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .flex-email-footer > div{
         text-decoration: none;
    }

    .footerEmail{
        width: 100%;
        height: 46px;
        background-color: #2D6DAF;
        
    }

    .button-class{
        max-width: 200px;
        max-height: 48px;
        margin-left: -2px;
        background-color: #2D6DAF;
    }

    button{
        outline: none;
        border:none;
        border-color: none;
    }

    .button-send{
        min-width:  87px;
        height: 36px;
        background-color: #BF3158;
        color: white;
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 10px;
        margin-right: 6px;
        text-align: center;
        cursor: pointer;
         transition: 0.6s;
         font-family: 'Open Sans', sans-serif;
    }

     .button-send:hover{
        background-color: #4BA299;
         transition: 0.6s;
    }

    input{
        background: transparent;
        color: white;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
       
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-color: none;
        outline: none;
        outline-color: none;
    }


    input::placeholder{
        color: white;
        font-size: 12px;
    }

    .separator-footer{
        height: 5px;
    }

    .h1footer{
        color: white;
        font-size: 28px;
        margin-top: 15px;
    }

    .logo-footer{
        height : 75px;
        margin-bottom: 35px;
    }

    .contact-text{
        color: white;
        font-size: 14px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }

   .contact-img{
        width: 15px;
        height: 29px;
        padding-top: 8px;
        padding-right: 15px;
    }

    .movil-img{
        height: 18px;
        width: 15px;
        padding-top: 30px;
        padding-right: 15px;
    }

    .email-img{
        height: 15px;
        width: 15px;
        margin-top: 10px;
        padding-right: 15px;
    }

    .phone-text{
      color: white;
      font-size: 16px;
      margin-right: 35px;
      line-height: 1.5em;
      font-family: 'Open Sans', sans-serif;
    }

    .flex-movil-info{
        display: flex;
        justify-content: stretch;
    }

    .flex-movil-info > div{
         text-decoration: none;
    }

    .flex-contact-info{
        width: 100%;
        display: flex;
        justify-content: stretch;
    }

    .flex-contact-info > div{
        text-decoration: none;
    }

     .flex-email-info{
        display: flex;
       
        justify-content: stretch;
    }

    .flex-email-info > div{
         text-decoration: none;
    }

    .flex-legal{
        background-color: #00375A;
        width: 100%;
        min-height: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -5px;
    }

    .flex-legal > div{
      padding:25px;
      cursor: pointer;
    }

    .flex-legal > div:hover{
      color:#53e4d5;
    }

 
    
}
 
@media (min-width: 799px) and (max-width: 998px){
    

      .flex-notes{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 100px;
        flex-wrap: wrap;
    }

    .flex-notes > div{
        text-decoration: none;
        width: 100%;
        margin-top: 15px;
        margin-bottom: 50px;
    }

    .notes{
        width: 100%;
        height: 80px;
        margin-top: 10px;
        
    }

    .text-notes{
        font-size: 24px;
        color: #D07732;
        margin-top: 25px;
        text-align: center;
    
    }

      .firstnote{
        animation: rotate  8s ease-in-out infinite;
       
       
    }

    @keyframes rotate {
       0%   {transform: rotateX(0deg)}
       100%   {transform: rotateX(2deg)}
    }

     .whyUs-h1-xs{
        margin-top: 100px;
        margin-bottom: 50px;
          font-size: 40px;
        color: white;
    }

  .xs-title-content{
      display: flex;
      justify-content: center;
      text-align: center;
  }

  .xs-title-content > div{
       text-decoration: none;
  }

 .title-top-bon{
     width: 100%;
     min-height: 200px;
     background-color: #e4b12f;
 }


     .original-logo-top{
        width: 100%;
        height: 100px;
        margin-top: 300px;
        margin-bottom: -150px;
    }

    .img-left-top {
        margin-bottom: 200px;
        margin-top: 100px;
    }

/* ========================================== */
/*  sticky scroll button                     */
/* ========================================= */
    
    .scrollTopButton{
        width: 45px;
        height: 45px;
        top: 38%;
        border-radius: 100px;
        padding: 0;
        left: 90%;
        right: 0;
        z-index: 15;
        position: fixed;
      
        background-color: rgb(67, 138, 209, 0.6);
        transition: 0.5s;
        cursor: pointer;
       
        animation: inOut 0.5s ease-in-out;
    }

   .scrollTopButton:hover{
        transition: 0.5s;
         background-color: rgb(67, 138, 209, 1);
        transform: scale(1.2);
    }


     @keyframes inOut {
        0% {
            opacity: 0;
            transform: scale(0);
            
        }
       
        100% {
            opacity: 1;
              transform: scale(1);
            
        }

        
    }

/* ========================================== */
/*          navbar                            */
/* ========================================== */


.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all .1s ease-in-out;
    background-color: transparent !important;
}
.menu-btn__burger {
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  
  transition: all .1s ease-in-out;
}

.menu-btn__burger:hover{
    background-color: #e4b12f;
}

.menu-btn__burger:hover::before{
    background-color: #e4b12f;
}


.menu-btn__burger:hover::after{
    background-color: #e4b12f;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  transition: all .1s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-10px);
}
.menu-btn__burger::after {
  transform: translateY(10px);
}

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}


    /* ================================================= */
    /*                      Navbar                       */
    /* ================================================= */

    .flex-navbar{
        width: 100%;
        min-height: 50px;
        display: flex;
        justify-content: space-around;
        transition: 0.8s;
    }

    .fadeinDown {
        -webkit-animation: fadeInDown 800ms ease-in-out; /* Chrome, Safari, Opera */
        animation: fadeInDown 800ms ease-in-out;

    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }
    
    /* Standard syntax */
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .flex-navbar > .sticky-header{ 
         text-decoration: none; 
    }

    .sticky-header{
        z-index: 10;
        width: 100%;
        height: 100px;
       
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        position:fixed;
        background-color: #fff;
    }

    .showNavbar{
         display:block; 
          transition: 0.8s;
    }

    .hideNavbar{
        display:none; 
         transition: 0.8s;
    }

    .sticky-header-scroll{
    
        width: 100%;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
      
         transition: 0.8s;
        z-index: 10;
        position:fixed;
    }


    /* onclick event open close hamburguer icon  */
    .sticky-header-event{
        transition: 1s;
        box-shadow: 0 6px 16px rgb(0 0 0 / 6%);
    }


    .flex-content-nav{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .flex-content-nav > div{
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 25px;
       
    }

    .original_logo{
        width:120px;
        height: 50px;
        margin-top: -13px;
       
    }

    .flex-media-content{
        display: flex;
        justify-content: space-between;
        width: 150px;
        display: none;
    }

    .flex-content-nav > div{
         text-decoration: none;
       
    }

    .media-icons{
        width: 19px;
        cursor: pointer;
        display: none;
    }

    .facebook-media{
        width: 10px;
        cursor: pointer;
        display: none;
    }
    

.flex-menu-xs{
    display: table;
}

.flex-menu-xs > li{
    display: table-row;
}

#menu{
    width: 100%;
    min-height: 270px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    border-radius: 5px;
     
}
   
.flex-menu-navbar{
    width: 100%;
    height: 15px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background-color: #fff;
    z-index: -1;
    font-family: 'Open Sans', sans-serif;
}

ul{
    display: table;
}

.flex-menu-navbar > li{
 display: table-row;
 margin-top: 25px;
 width:100%;
 justify-content: center;
}

li{ 
    display: table-row;
    list-style: none;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: -22px;
    font-family: 'Open Sans', sans-serif;
}


.menu-links{
  color: #e4b12f;
   font-size: 22px;
     font-family: 'Open Sans', sans-serif;
     display: block;
     text-decoration: none;
}

.home-link{
    margin-left: 5px;
   
      font-family: 'Open Sans', sans-serif;
}

.menu-links:hover{
    color: #D07732;
      font-family: 'Open Sans', sans-serif;
}

.menu-links2{
    font-size: 18px;
    color: #4BA299;
      font-family: 'Open Sans', sans-serif;
}

.menu-links2:hover{
    color: #D07732;
      font-family: 'Open Sans', sans-serif;
}


.subMenus{
    margin-top:10px;
    margin-bottom: 10px;
      font-family: 'Open Sans', sans-serif;
}

.subMenuServices{
    display:none;
}

.servicesLink:hover{
    cursor: pointer;
}

.flex-menu-navbar ul ul {

    position:absolute;
    top:100%;
    left:20%;
    background:white;
    padding:0;
    color: #00375A;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    z-index: 999;
    margin-top: -27px;
    transition: 2s;
    font-family: 'Open Sans', sans-serif;
}

.flex-menu-navbar ul ul li {
 float:none;
 
}

.flex-menu-navbar ul ul a {
 line-height:120%;
 padding:10px 15px;
}

.flex-menu-navbar ul li:hover > ul {
 
 float: none;
}



.strech-xs-sm{
    display:flex;
    justify-content: stretch;
    flex-direction: column;
    background-color: #BF3158;
}

.strech-xs-sm > div{
     text-decoration: none;
}
   
     /* ========================================== */
    /* top content                                */
    /* ========================================== */

     .xs-show{
      
        display: none;
    }

    .xs-lg{
          display: block;
    }

    .flex-top-content{
        display: flex;
        justify-content: center;
    }

    .top-h1{
        margin-top: 250px;
        color: #00375A;
    }

    .razones-img-top{
        margin-top: -400px;
        margin-bottom: 150px;
        width:1000px;
        height: 300px;
    }

    .razones-img-bottom{
        margin-top: 200px;
        margin-bottom: 250px;
        width: 100%;
        height: 300px;
    }

    /* ========================================== */
    /*  flex-cards-reasons                        */
    /* ========================================== */

    .background-cards{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/background-certf-cards.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

     .background-cards2{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/bakground-2-familias.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

    .flex-cards-reasons{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 150px;
    }

    .flex-cards-reasons > div{
        z-index: 10;
        margin-top: 150px;
       
    }

    .reassonChoose {
        margin: 50px auto 100px;
     
        font-size: 45px;
        font-weight: 300;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5;
        color: #4ba299;
    }

    .items{
        width: 39px;
        height: 33px;
        margin-right: 20px;
        animation: rotate  2s ease-out infinite;
    }

    @keyframes rotate {
        0%{
            transform: rotate(-15deg);
        }

        50%{
            transform: rotate(15deg);
        }

        100%{

            transform: rotate(-15deg);

        }

    

    }

    .flex-items{
        display: flex;
        justify-content: space-between;
    }

    .flex-items > div{
         text-decoration: none;
    }

    details {
        width: 75%;
        min-height: 5px;
        background-color: white;
        /* max-width: 700px; */
        padding: 45px 70px 45px 45px;
        margin: 0 auto;
        position: relative;
        font-size: 22px;
        /*   border: 2.5px solid #4ba299; */
        box-shadow: 2px 2px 5px rgba(0,0,0,.2);
        border-radius: 15px;
        box-sizing: border-box;
        transition: all .3s ease-in-out;
    }

    details + details {
        margin-top: 20px;
    }

    details[open] {
        min-height: 50px;
        background-color: white;
        box-shadow: 2px 2px 20px rgba(0,0,0,.2);
        outline: none;
        border:none;
        transition: all .3s ease-in-out;
    }

    details p {
        color: #96999d;
        font-weight: 300;
        font-family: "Open Sans", sans-serif;
    }

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        color: #4ba299;
    }

    summary:focus {
        outline: none;
    }

    summary:focus::after {
        content: "";
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    summary::-webkit-details-marker {
        display: none
    }

    .control-icon {
        fill: #4ba299;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

     .control-icon2 {
        fill: #e4b12f;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close2 {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

    details[open] .control-icon-close2 {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand2 {
        display: none;
    }


    /* ========================================== */
    /*  WhyUs                                     */
    /* ========================================== */

    .whyUs-title{
        text-align: center;
        margin-bottom: 150px;
         color:#00375A;
    }

    .whyUs-title2{
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-title3{
        
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    whyUs-title4{
        margin-top: 150px;
          text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-h1{ 
        
        font-size: 45px;
        color:#00375A;
    }

    .whyUs-h2{ 
        
        font-size: 45px;
        color:#D07732;
    }

    #whyUs{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs5{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs2{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU3{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU4{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

     .flex-whyUs{  
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
     
    }

    .flex-whyUs > div{
       width: 35%;
        
    }

    .flex-whyUs2{
          display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
        margin-top: 20px;
    }

    .flex-whyUs2 > div{
       width: 35%;
        
    }

    .left-why{
       text-decoration: none;
    }

    .right-why{
       text-decoration: none;
    }

    .separator{
        width: 260px;
    }


    h1{ 
        
        font-size: 45px;
        color:#BF3158;
    }

    .whyUs-img{
        width: 100%;
        height: 358px;
        margin-top: 20px;
        margin-left: 25px;
    }

    .why-text{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }


    .flex-why-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }   

    .flex-why-bottom > div{
        min-height: 300px;
    }

    .flex-why-bottom :first-child{
        justify-content: flex-start;
    }

    .flex-why-bottom :last-child{
        justify-content: flex-end;
    }


    .left-why-bottom{
        width: 300px;
        height: 458px;
    }

    .right-why-bottom{
        width: 317px;
        height: 564px;
        margin-top: 80px;
        margin-right: -20px;
    }

    .whyUs-img2{
       
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: -80px;
    }

    .razones-img-top-xs{
       
        height: 200px;
    }


    /* ========================================== */
    /*  Flex-adventages                           */
    /* ========================================== */

    .flex-adventages{
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 250px;
    }

    .flex-adventages > div{
        width: 450px;
        min-height: 500px;
        margin-top: 50px;
        margin-left:80px;
        margin-right: 80px;
       
    }

    .why-text2{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
        color: #00375A;
    }
    


    /* ========================================== */
    /*         Footer                             */
    /* ========================================== */

    footer{
       
        width:100%;
        min-height: 500px;
        position:static;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-bottom: 0px;
         overflow-x: hidden;
    }
    

    .footer-img-xs-sm{
        width:100%;
        max-height: 200px;
     
    }

    .flex-footer-content{

        display: flex;
        flex-wrap:wrap;
        margin-top: -5px;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 500px;
        background-color: #00375A; 
    }

    .footer-img{
        width:100%;
        height: 460px;
        display:none;
    }

    .flex-footer-content > div{
        
       width: 80%;
       padding: 60px 10px 60px 10px;
    }

    .flex-footer-content:last-child{
        width: 100%;
    }

    .footer-text{
       color: white;
       font-size: 14px;
       margin-top: 50px;
       padding: 0px 0px 15px 0px;
       margin-top: 15px;
       line-height: 1.5em;
       font-family: 'Open Sans', sans-serif;
    }

    .flex-footer-media{
        display: flex;
        justify-content: stretch;
        margin-top: 50px;
    }

    .flex-footer-media > img{
        height: 15px;
        margin-right: 35px;
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

    .flex-email-footer{
        width: 80%;
        height: 76px;
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .flex-email-footer > div{
         text-decoration: none;
    }

    .footerEmail{
        width: 100%;
        height: 46px;
        background-color: #2D6DAF;
        
    }

    .button-class{
        max-width: 200px;
        max-height: 48px;
        margin-left: -2px;
        background-color: #2D6DAF;
    }

    button{
        outline: none;
        border:none;
        border-color: none;
    }

    .button-send{
        min-width:  87px;
        height: 36px;
        background-color: #BF3158;
        color: white;
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 10px;
        margin-right: 6px;
        text-align: center;
        cursor: pointer;
         transition: 0.6s;
         font-family: 'Open Sans', sans-serif;
    }

     .button-send:hover{
        background-color: #4BA299;
         transition: 0.6s;
    }

    input{
        background: transparent;
        color: white;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
       
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-color: none;
        outline: none;
        outline-color: none;
    }


    input::placeholder{
        color: white;
        font-size: 12px;
    }

    .separator-footer{
        height: 5px;
    }

    .h1footer{
        color: white;
        font-size: 28px;
        margin-top: 15px;
    }

    .logo-footer{
        height : 75px;
        margin-bottom: 35px;
    }

    .contact-text{
        color: white;
        font-size: 14px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }

   .contact-img{
        width: 15px;
        height: 29px;
        padding-top: 8px;
        padding-right: 15px;
    }

    .movil-img{
        height: 18px;
        width: 15px;
        padding-top: 30px;
        padding-right: 15px;
    }

    .email-img{
        height: 15px;
        width: 15px;
        margin-top: 10px;
        padding-right: 15px;
    }

    .phone-text{
      color: white;
      font-size: 16px;
      margin-right: 35px;
      line-height: 1.5em;
      font-family: 'Open Sans', sans-serif;
    }

    .flex-movil-info{
        display: flex;
        justify-content: stretch;
    }

    .flex-movil-info > div{
         text-decoration: none;
    }

    .flex-contact-info{
        width: 100%;
        display: flex;
        justify-content: stretch;
    }

    .flex-contact-info > div{
        text-decoration: none;
    }

     .flex-email-info{
        display: flex;
       
        justify-content: stretch;
    }

    .flex-email-info > div{
        text-decoration: none;
    }

    .flex-legal{
        background-color: #00375A;
        width: 100%;
        min-height: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -5px;
    }

    .flex-legal > div{
      padding:25px;
      cursor: pointer;
    }

    .flex-legal > div:hover{
      color:#53e4d5;
    }

 
}


/* medium size device  */
@media (min-width:998px) and (max-width: 1149px){

   

      .whyUs-h1-xs{
        margin-top: 100px;
        margin-bottom: 100px;
          font-size: 40px;
        color: white;
    }

    .cards-familias{
        margin-top: 100px;
    }

     .seguridad{
       text-decoration: none;
    }

    .gestion{
        margin-right: 40px;
    }

    .firstnote{
        animation: rotate  8s ease-in-out infinite;
       
    }

    .firstnote2{
        animation: rotate  10s ease-in-out infinite;
       
    }

    .firstnote3{
        animation: rotate  13s ease-in-out infinite;
        
    }

    @keyframes rotate {
     
       0%   {transform: rotateX(0deg)}
       100%   {transform: rotateX(2deg)}
    }

 
    
    .text-notes{
        font-size: 28px;
        color: #D07732;
        font-weight: 600;
        font-family: "Open Sans", sans-serif;
        margin-left: 25px;
        margin-top: 10px;
    }

    .notes{
        width: 100%;
        height: 90px;
      
    }

    .notes-space{
        display: flex;
        justify-content: space-evenly;
        margin-left: -10px;
    }

    .notes-space > div{
        text-decoration: none;
    }

    .flex-notes{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;
        flex-wrap: wrap;
    }

    .flex-notes > div{
        text-decoration: none;
        width: 100%;
        margin-top: 15px;
       
    }

  .xs-title-content{
      display: flex;
      justify-content: center;
      text-align: center;
  }

  .xs-title-content > div{
      text-decoration: none;
  }

 .title-top-bon{
     width: 100%;
     height: 200px;
     background-color: #e4b12f;
 }
    .original-logo-top{
        width: 100%;
        height: 100px;
        margin-top: 300px;
        margin-bottom: -150px;
    }

    .img-left-top {
        margin-bottom: 200px;
        margin-top: 100px;
    }
    

  
/* ========================================== */
/*  sticky scroll button                     */
/* ========================================= */
    
    .scrollTopButton{
        width: 45px;
        height: 45px;
        top: 38%;
        border-radius: 100px;
        padding: 0;
        left: 90%;
        right: 0;
        z-index: 15;
        position: fixed;
      
        background-color: rgb(67, 138, 209, 0.6);
        transition: 0.5s;
        cursor: pointer;
       
        animation: inOut 0.5s ease-in-out;
    }

   .scrollTopButton:hover{
        transition: 0.5s;
         background-color: rgb(67, 138, 209, 1);
        transform: scale(1.2);
    }


     @keyframes inOut {
        0% {
            opacity: 0;
            transform: scale(0);
            
        }
       
        100% {
            opacity: 1;
              transform: scale(1);
            
        }

        
    }

/* ========================================== */
/*          navbar                            */
/* ========================================== */


.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all .1s ease-in-out;
    background-color: transparent !important;
}
.menu-btn__burger {
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  
  transition: all .1s ease-in-out;
}

.menu-btn__burger:hover{
    background-color: #e4b12f;
}

.menu-btn__burger:hover::before{
    background-color: #e4b12f;
}


.menu-btn__burger:hover::after{
    background-color: #e4b12f;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  transition: all .1s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-10px);
}
.menu-btn__burger::after {
  transform: translateY(10px);
}

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}


    /* ================================================= */
    /*                      Navbar                       */
    /* ================================================= */

    .flex-navbar{
        width: 100%;
        min-height: 50px;
        display: flex;
        justify-content: space-around;
        transition: 0.8s;
    }

    .fadeinDown {
        -webkit-animation: fadeInDown 800ms ease-in-out; /* Chrome, Safari, Opera */
        animation: fadeInDown 800ms ease-in-out;

    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }
    
    /* Standard syntax */
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .flex-navbar > .sticky-header{ 
        text-decoration: none; 
    }

    .sticky-header{
        z-index: 10;
        width: 100%;
        height: 100px;
       
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        position:fixed;
        background-color: #fff;
    }

    .showNavbar{
         display:block; 
          transition: 0.8s;
    }

    .hideNavbar{
        display:none; 
         transition: 0.8s;
    }

    .sticky-header-scroll{
    
        width: 100%;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
      
         transition: 0.8s;
        z-index: 10;
        position:fixed;
    }


    /* onclick event open close hamburguer icon  */
    .sticky-header-event{
        transition: 1s;
        box-shadow: 0 6px 16px rgb(0 0 0 / 6%);
    }


    .flex-content-nav{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .flex-content-nav > div{
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 25px;
       
    }

    .original_logo{
        width:120px;
        height: 50px;
        margin-top: -13px;
       
    }

    .flex-media-content{
        display: flex;
        justify-content: space-between;
        width: 150px;
        display: none;
    }

    .flex-content-nav > div{
  
       text-decoration: none;
    }

    .media-icons{
        width: 19px;
        cursor: pointer;
        display: none;
    }

    .facebook-media{
        width: 10px;
        cursor: pointer;
        display: none;
    }
    

.flex-menu-xs{
    display: table;
}

.flex-menu-xs > li{
    display: table-row;
}

#menu{
    width: 100%;
    min-height: 270px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    border-radius: 5px;
     
}
   
.flex-menu-navbar{
    width: 100%;
    height: 15px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background-color: #fff;
    z-index: -1;
    font-family: 'Open Sans', sans-serif;
}

ul{
    display: table;
}

.flex-menu-navbar > li{
 display: table-row;
 margin-top: 25px;
 width:100%;
 justify-content: center;
}

li{ 
    display: table-row;
    list-style: none;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: -22px;
    font-family: 'Open Sans', sans-serif;
}


/* .menu-links{
  color: #BF3158;
   font-size: 22px;
     font-family: 'Open Sans', sans-serif;
     display: block;
     text-decoration: none;
} */

.home-link{
    margin-left: 5px;
   
      font-family: 'Open Sans', sans-serif;
}
/* 
.menu-links:hover{
    color: #EBC67B;
      font-family: 'Open Sans', sans-serif;
} */

.menu-links{
     text-decoration: none;
    color: #e4b12f;
}

.menu-links:hover{
 
     color: #D07732;
}

.menu-links2{
    font-size: 18px;
    color: #4BA299;
      font-family: 'Open Sans', sans-serif;
}

.menu-links2:hover{
    color: #D07732;
      font-family: 'Open Sans', sans-serif;
}


.subMenus{
    margin-top:10px;
    margin-bottom: 10px;
      font-family: 'Open Sans', sans-serif;
}

.subMenuServices{
    display:none;
}

.servicesLink:hover{
    cursor: pointer;
}

.flex-menu-navbar ul ul {

    position:absolute;
    top:100%;
    left:20%;
    background:white;
    padding:0;
    color: #00375A;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    z-index: 999;
    margin-top: -27px;
    transition: 2s;
    font-family: 'Open Sans', sans-serif;
}

.flex-menu-navbar ul ul li {
 float:none;
 
}

.flex-menu-navbar ul ul a {
 line-height:120%;
 padding:10px 15px;
}

.flex-menu-navbar ul li:hover > ul {
 
 float: none;
}



.strech-xs-sm{
    display:flex;
    justify-content: stretch;
    flex-direction: column;
    background-color: #BF3158;
}

.strech-xs-sm > div{
    text-decoration: none;
}
   

    /* ========================================== */
    /* top content                                */
    /* ========================================== */

     .xs-show{
      
        display: none;
    }

    .xs-lg{
          display: block;
    }

    .flex-top-content{
        display: flex;
        justify-content: center;
    }

    .top-h1{
        margin-top: 250px;
        color: #00375A;
    }

    .razones-img-top{
        margin-top: -400px;
        margin-bottom: 150px;
        width:1000px;
        height: 300px;
    }

    .razones-img-bottom{
        margin-top: 200px;
        margin-bottom: 250px;
        width: 100%;
        height: 300px;
    }

    /* ========================================== */
    /*  flex-cards-reasons                        */
    /* ========================================== */

    .background-cards{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/background-certf-cards.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

    .background-cards2{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/bakground-2-familias.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

    .flex-cards-reasons{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 150px;
    }

    .flex-cards-reasons > div{
        z-index: 10;
        margin-top: 150px;
       
    }

    .reassonChoose {
         margin: 50px auto 100px;
     
        font-size: 45px;
        font-weight: 300;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5;
        color: #4ba299;
    }

    .items{
        width: 39px;
        height: 33px;
        margin-right: 20px;
        animation: rotate  2s ease-out infinite;
    }

    @keyframes rotate {
        0%{
            transform: rotate(-15deg);
        }

        50%{
            transform: rotate(15deg);
        }

        100%{

            transform: rotate(-15deg);

        }

    

    }

    .flex-items{
        display: flex;
        justify-content: space-between;
    }

    .flex-items > div{
        text-decoration: none;
    }

    details {
        width: 75%;
        min-height: 5px;
        background-color: white;
        /* max-width: 700px; */
        padding: 45px 70px 45px 45px;
        margin: 0 auto;
        position: relative;
        font-size: 22px;
        /*   border: 2.5px solid #4ba299; */
        box-shadow: 2px 2px 5px rgba(0,0,0,.2);
        border-radius: 15px;
        box-sizing: border-box;
        transition: all .3s ease-in-out;
    }

    details + details {
        margin-top: 20px;
    }

    details[open] {
        min-height: 50px;
        background-color: white;
        box-shadow: 2px 2px 20px rgba(0,0,0,.2);
        outline: none;
        border:none;
        transition: all .3s ease-in-out;
    }

    details p {
        color: #96999d;
        font-weight: 300;
        font-family: "Open Sans", sans-serif;
    }

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        color: #4ba299;
    }

    summary:focus {
        outline: none;
    }

    summary:focus::after {
        content: "";
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    summary::-webkit-details-marker {
        display: none
    }

    .control-icon {
        fill: #4ba299;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

       .control-icon2 {
        fill: #e4b12f;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close2 {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }


    details[open] .control-icon-close {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand {
        display: none;
    }

     details[open] .control-icon-close2 {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand2 {
        display: none;
    }

    /* ========================================== */
    /*  WhyUs                                     */
    /* ========================================== */

    .whyUs-title{
        text-align: center;
        margin-bottom: 150px;
         color:#00375A;
    }

    .whyUs-title2{
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-title3{
        
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    
    .whyUs-title4{
        margin-top: 150px;
          text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-h1{ 
        
        font-size: 45px;
        color:#00375A;
    }

    .whyUs-h2{ 
        
        font-size: 45px;
        color:#D07732;
    }

    #whyUs{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs5{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs2{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU3{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU4{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

     .flex-whyUs{  
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
     
    }

    .flex-whyUs > div{
       width: 35%;
        
    }

    .flex-whyUs2{
          display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
        margin-top: 20px;
    }

    .flex-whyUs2 > div{
       width: 35%;
        
    }

    .left-why{
      text-decoration: none;
    }

    .right-why{
      text-decoration: none;
    }

    .separator{
        width: 260px;
    }


    h1{ 
        
        font-size: 45px;
        color:#BF3158;
    }

    .whyUs-img{
        width: 100%;
        height: 358px;
        margin-top: 20px;
        margin-left: 25px;
    }

    .why-text{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }


    .flex-why-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }   

    .flex-why-bottom > div{
        min-height: 300px;
    }

    .flex-why-bottom :first-child{
        justify-content: flex-start;
    }

    .flex-why-bottom :last-child{
        justify-content: flex-end;
    }


    .left-why-bottom{
        width: 300px;
        height: 458px;
    }

    .right-why-bottom{
        width: 317px;
        height: 564px;
        margin-top: 80px;
        margin-right: -20px;
    }

    .whyUs-img2{
       
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: -80px;
    }


    /* ========================================== */
    /*  Flex-adventages                           */
    /* ========================================== */

    .flex-adventages{
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 250px;
    }

    .flex-adventages > div{
        width: 450px;
        min-height: 500px;
        margin-top: 50px;
        margin-left:80px;
        margin-right: 80px;
       
    }

    .why-text2{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
        color: #00375A;
    }
    


    /* ========================================== */
    /*         Footer                             */
    /* ========================================== */

    footer{
       
        width:100%;
        min-height: 500px;
        position:static;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-bottom: 0px;
         overflow-x: hidden;
    }
    

    .footer-img-xs-sm{
        width:100%;
        max-height: 200px;
     
    }

    .flex-footer-content{

        display: flex;
        flex-wrap:wrap;
        margin-top: -5px;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 500px;
        background-color: #00375A; 
    }

    .footer-img{
        width:100%;
        height: 460px;
        display:none;
    }

    .flex-footer-content > div{
        
       width: 80%;
       padding: 60px 10px 60px 10px;
    }

    .flex-footer-content:last-child{
        width: 100%;
    }

    .footer-text{
       color: white;
       font-size: 14px;
       margin-top: 50px;
       padding: 0px 0px 15px 0px;
       margin-top: 15px;
       line-height: 1.5em;
       font-family: 'Open Sans', sans-serif;
    }

    .flex-footer-media{
        display: flex;
        justify-content: stretch;
        margin-top: 50px;
    }

    .flex-footer-media > img{
        height: 15px;
        margin-right: 35px;
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

    .flex-email-footer{
        width: 80%;
        height: 76px;
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .flex-email-footer > div{
        text-decoration: none;
    }

    .footerEmail{
        width: 100%;
        height: 46px;
        background-color: #2D6DAF;
        
    }

    .button-class{
        max-width: 200px;
        max-height: 48px;
        margin-left: -2px;
        background-color: #2D6DAF;
    }

    button{
        outline: none;
        border:none;
        border-color: none;
    }

    .button-send{
        min-width:  87px;
        height: 36px;
        background-color: #BF3158;
        color: white;
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 10px;
        margin-right: 6px;
        text-align: center;
        cursor: pointer;
         transition: 0.6s;
         font-family: 'Open Sans', sans-serif;
    }

     .button-send:hover{
        background-color: #4BA299;
         transition: 0.6s;
    }

    input{
        background: transparent;
        color: white;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
       
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-color: none;
        outline: none;
        outline-color: none;
    }


    input::placeholder{
        color: white;
        font-size: 12px;
    }

    .separator-footer{
        height: 5px;
    }

    .h1footer{
        color: white;
        font-size: 28px;
        margin-top: 15px;
    }

    .logo-footer{
        height : 75px;
        margin-bottom: 35px;
    }

    .contact-text{
        color: white;
        font-size: 14px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }

   .contact-img{
        width: 15px;
        height: 29px;
        padding-top: 8px;
        padding-right: 15px;
    }

    .movil-img{
        height: 18px;
        width: 15px;
        padding-top: 30px;
        padding-right: 15px;
    }

    .email-img{
        height: 15px;
        width: 15px;
        margin-top: 10px;
        padding-right: 15px;
    }

    .phone-text{
      color: white;
      font-size: 16px;
      margin-right: 35px;
      line-height: 1.5em;
      font-family: 'Open Sans', sans-serif;
    }

    .flex-movil-info{
        display: flex;
        justify-content: stretch;
    }

    .flex-movil-info > div{
        text-decoration: none;
    }

    .flex-contact-info{
        width: 100%;
        display: flex;
        justify-content: stretch;
    }

    .flex-contact-info > div{
       text-decoration: none;
    }

     .flex-email-info{
        display: flex;
       
        justify-content: stretch;
    }

    .flex-email-info > div{
        text-decoration: none;
    }

    .flex-legal{
        background-color: #00375A;
        width: 100%;
        min-height: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -5px;
    }

    .flex-legal > div{
      padding:25px;
      cursor: pointer;
    }

    .flex-legal > div:hover{
      color:#53e4d5;
    }

 
}



@media (min-width: 1150px) and (max-width: 1800px){

    .background-cards2{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/bakground-2-familias.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

    .xs-title-content{
        display: none;
    }

    .seguridad{
        margin-right: 100px;
    }

    .gestion{
        margin-right: 40px;
    }

    .firstnote{
        animation: rotate  8s ease-in-out infinite;
      
       
    }

   

    @keyframes rotate {
       0%   {transform: rotateX(0deg)}
       100%   {transform: rotateX(2deg)}
    }

 
    
    .text-notes{
        font-size: 28px;
        color: #D07732;
        font-weight: 600;
        font-family: "Open Sans", sans-serif;
        margin-left: 25px;
        margin-top: 10px;
    }

    .notes{
        width: 100%;
        height: 90px;
      
    }

    .notes-space{
        display: flex;
        justify-content: space-evenly;
        margin-left: -10px;
    }

    .notes-space > div{
        text-decoration: none;
    }

    .flex-notes{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;
        flex-wrap: wrap;
    }

    .flex-notes > div{
        text-decoration: none;
        width: 100%;
        margin-top: 15px;
       
    }

    .cards-familias{
        margin-top: 100px;
    }

.original-logo-top{
        width: 100%;
        height: 100px;
        margin-top: 300px;
        margin-bottom: -150px;
    }

.img-left-top {
    margin-bottom: 200px;
    margin-top: 100px;
}

/* ========================================== */
/*          navbar                            */
/* ========================================== */
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
    margin-top: 12px;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  /* box-shadow: 0 2px 5px rgba(255,101,47,.2); */
  transition: all .3s ease-in-out;
  margin-top: -0.3px;
}

.menu-btn__burger:hover{
     background-color: #D07732;
}

.menu-btn__burger:hover{
     background-color: #D07732;
}

.menu-btn__burger:hover::before{
     background-color: #D07732;
}


.menu-btn__burger:hover::after{
    background-color: #D07732;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  transition: all .3s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-10px);
}
.menu-btn__burger::after {
  transform: translateY(10px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

a {
    text-decoration: none;
    font-size: 22px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    }

h1{
     font-size: 45px;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
     color: white;
}

.flex-menu-navbar{
    width: 50%;
    display: flex;
    justify-content: flex-start;
}



.flex-menu-navbar > li{
    /* margin-left: 7px;
    margin-right: 7px;
    margin-top: -3px; */
    text-decoration: none;
}

li{ 
    list-style: none;
     margin-left: 15px;
    margin-right: 15px;
    margin-top: -23px;
}

.home-link{
margin-left: -20px;
}

.menu-links{
     
    color: #e4b12f;
}

.menu-links:hover{
 
     color: #D07732;
}

.menu-links2{
    font-size: 18px;
    color: #4BA299;
}

.menu-links2:hover{
    color: #D07732;
}


.subMenus{
    margin-top:10px;
    margin-bottom: 10px;
    
}

.servicesLink:hover{
     cursor: pointer;
}

.flex-menu-navbar ul ul {
   
    display:none;
    position:absolute;
    top:100%;
    left:12%;
    background:white;
    padding:0;
    color: #00375A;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    z-index: 1;
    margin-top: -27px;
    transition: 2s;
}

.flex-menu-navbar ul ul li {
 float:none;
 
}

.flex-menu-navbar ul ul a {
 line-height:120%;
 padding:10px 15px;
}

.flex-menu-navbar ul li:hover > ul {
 display:block;
 float: none;
}


/* ========================================== */
/*  sticky scroll button                     */
/* ========================================= */
    
    .scrollTopButton{
        width: 50px;
        height: 50px;
        top: 85%;
        border-radius: 100px;
        padding: 0;
        left: 95%;
        right: 0;
        z-index: 15;
        position: fixed;
      
        background-color: rgb(67, 138, 209, 0.6);
        transition: 0.5s;
        cursor: pointer;
       
        animation: inOut 0.5s ease-in-out;
    }

   .scrollTopButton:hover{
        transition: 0.5s;
         background-color: rgb(67, 138, 209, 1);
        transform: scale(1.2);
    }


     @keyframes inOut {
        0% {
            opacity: 0;
            transform: scale(0);
            
        }
       
        100% {
            opacity: 1;
              transform: scale(1);
            
        }


    }



    /* ================================================= */
    /*                      Navbar                       */
    /* ================================================= */

    #hamburguer_open{
        cursor: pointer;
        margin-top: -5px;
    }

    .flex-navbar{
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .fadeinDown {
        -webkit-animation: fadeInDown 800ms ease-in-out; /* Chrome, Safari, Opera */
        animation: fadeInDown 800ms ease-in-out;

    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }
    
    /* Standard syntax */
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .flex-navbar > .sticky-header{  
        text-decoration: none;
    }

    .sticky-header{
        z-index: 10;
        width: 73%;
        height: 100px;
        transition: 0.3s;
        border-radius: 5px;
        margin-top: 280px;
        position:fixed;
        background-color: #fff;
    }

    .showNavbar{
        display:block; 
    }

    .hideNavbar{
        display:none; 
    }

    .sticky-header-scroll{
    
        width: 85%;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        margin-top: 20px;
        transition: 0.3s;
        z-index: 10;
        position:fixed;
        border-radius: 5px;
         transition: 1s;
    }



    /* onclick event open close hamburguer icon  */
    .sticky-header-event{
        transition: 1s;
        box-shadow: 0 6px 16px rgb(0 0 0 / 6%);
    }


    .flex-content-nav{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .flex-content-nav > div{
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 25px;
    }

    .original_logo{
        width: 175px;
        margin-top: -10px;
        margin-left: 180px;
    }

    .flex-media-content{
        display: flex;
        justify-content: space-between;
        width: 200px;
    }

    .flex-content-nav > div{
    text-decoration: none;
    }

    .media-icons{
        width: 19px;
        cursor: pointer;
    }

    .facebook-media{
        width: 10px;
        cursor: pointer;
    }

    /* ========================================== */
    /* top content                                */
    /* ========================================== */

     .xs-show{
      
        display: none;
    }

    .xs-lg{
          display: block;
    }

    .flex-top-content{
        display: flex;
        justify-content: center;
    }

    .top-h1{
        margin-top: 250px;
        color: #00375A;
    }

    .razones-img-top{
        margin-top: -400px;
        margin-bottom: 150px;
        width:1000px;
        height: 300px;
    }

    .razones-img-bottom{
        margin-top: 200px;
        margin-bottom: 250px;
        width: 100%;
        height: 300px;
    }

    /* ========================================== */
    /*  flex-cards-reasons                        */
    /* ========================================== */

    .background-cards{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/background-certf-cards.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

    .flex-cards-reasons{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 150px;
    }

    .flex-cards-reasons > div{
        z-index: 10;
        margin-top: 150px;
       
    }

    .reassonChoose {
         margin: 50px auto 100px;
     
        font-size: 45px;
        font-weight: 300;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5;
        color: #4ba299;
    }

    .items{
        width: 39px;
        height: 33px;
        margin-right: 20px;
        animation: rotate  2s ease-out infinite;
    }

    @keyframes rotate {
        0%{
            transform: rotate(-15deg);
        }

        50%{
            transform: rotate(15deg);
        }

        100%{

            transform: rotate(-15deg);

        }

    

    }

    .flex-items{
        display: flex;
        justify-content: space-between;
    }

    .flex-items > div{
        text-decoration: none;
    }

    details {
        width: 80%;
        min-height: 5px;
        background-color: white;
        /* max-width: 700px; */
        padding: 45px 70px 45px 45px;
        margin: 0 auto;
        position: relative;
        font-size: 22px;
        /*   border: 2.5px solid #4ba299; */
        box-shadow: 2px 2px 5px rgba(0,0,0,.2);
        border-radius: 15px;
        box-sizing: border-box;
        transition: all .3s ease-in-out;
    }

    details + details {
        margin-top: 20px;
    }

    details[open] {
        min-height: 50px;
        background-color: white;
        box-shadow: 2px 2px 20px rgba(0,0,0,.2);
        outline: none;
        border:none;
        transition: all .3s ease-in-out;
    }

    details p {
        color: #96999d;
        font-weight: 300;
        font-family: "Open Sans", sans-serif;
    }
    

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        color: #4ba299;
    }

    summary:focus {
        outline: none;
    }

    summary:focus::after {
        content: "";
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    summary::-webkit-details-marker {
        display: none
    }

    .control-icon {
        fill: #4ba299;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

    .control-icon2 {
        fill: #e4b12f;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close2 {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

    details[open] .control-icon-close {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand {
        display: none;
    }

    details[open] .control-icon-close2 {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand2 {
        display: none;
    }


    /* ========================================== */
    /*  WhyUs                                     */
    /* ========================================== */

    .whyUs-title{
        text-align: center;
        margin-bottom: 150px;
         color:#00375A;
    }

    .whyUs-title2{
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-title3{
        
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    
    .whyUs-title4{
        margin-top: 150px;
          text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-h1{ 
        
        font-size: 45px;
        color:#00375A;
    }

    .whyUs-h2{ 
        
        font-size: 45px;
        color:#D07732;
    }

    #whyUs{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs5{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs2{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU3{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU4{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

     .flex-whyUs{  
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
     
    }

    .flex-whyUs > div{
       width: 35%;
        
    }

    .flex-whyUs2{
          display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
        margin-top: 20px;
    }

    .flex-whyUs2 > div{
       width: 35%;
        
    }

    .left-why{
      text-decoration: none;
    }

    .right-why{
      text-decoration: none;
    }

    .separator{
        width: 260px;
    }


    h1{ 
        
        font-size: 45px;
        color:#BF3158;
    }

    .whyUs-img{
        width: 100%;
        height: 358px;
        margin-top: 20px;
        margin-left: 25px;
    }

    .why-text{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }


    .flex-why-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }   

    .flex-why-bottom > div{
        min-height: 300px;
    }

    .flex-why-bottom :first-child{
        justify-content: flex-start;
    }

    .flex-why-bottom :last-child{
        justify-content: flex-end;
    }


    .left-why-bottom{
        width: 300px;
        height: 458px;
    }

    .right-why-bottom{
        width: 317px;
        height: 564px;
        margin-top: 80px;
        margin-right: -20px;
    }

    .whyUs-img2{
       
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: -80px;
    }


    /* ========================================== */
    /*  Flex-adventages                           */
    /* ========================================== */

    .flex-adventages{
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 250px;
    }

    .flex-adventages > div{
        width: 450px;
        min-height: 500px;
        margin-top: 50px;
        margin-left:80px;
        margin-right: 80px;
       
    }

    .why-text2{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
        color: #00375A;
    }
    /* ========================================== */
    /*         Footer                             */
    /* ========================================== */

    footer{
        width:100%;
        min-height: 500px;
        position:static;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-bottom: 0px;
    }

     .footer-img-xs-sm{
        display: none;
    }
    
    .flex-footer-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        min-height: 250px;
        margin-top: -4px;
        background-color: #00375A; 
        
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

     .flex-footer-content:last-child{
         width: 100%;
    }

    .flex-footer-content > div{
        
       width: 23%;
       padding: 120px 50px 15px 50px;
    }

   

    .footer-text{
       color: white;
       font-size: 14px;
       margin-top: 50px;
       padding: 0px 0px 15px 0px;
       margin-top: 15px;
       line-height: 1.5em;
       font-family: 'Open Sans', sans-serif;
    }

    .flex-footer-media{
        display: flex;
        justify-content: stretch;
        margin-top: 50px;
    }

    .flex-footer-media > img{
        height: 15px;
        margin-right: 35px;
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

     .flex-email-footer{
        min-width: 80%;
        height: 76px;
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .flex-email-footer > div{
        text-decoration: none;
    }

    .footerEmail{
        width: 100%;
        height: 46px;
        background-color: #2D6DAF;
        
    }

    .button-class{
        max-width: 200px;
        max-height: 48px;
        margin-left: -2px;
        background-color: #2D6DAF;
    }

    button{
        outline: none;
        border:none;
        border-color: none;
    }

    .button-send{
        min-width:  87px;
        height: 36px;
        background-color: #BF3158;
        color: white;
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 10px;
        margin-right: 6px;
        text-align: center;
        cursor: pointer;
         transition: 0.6s;
         font-family: 'Open Sans', sans-serif;
    }

    .button-send:hover{
        background-color: #4BA299;
         transition: 0.6s;
    }

    input{
        background: transparent;
        color: white;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
          -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-color: none;
        outline: none;
        outline-color: none;
    }


    input::placeholder{
        color: white;
        font-size: 14px;
    }

    .separator-footer{
        height: 10px;
    }

    .h1footer{
        color: white;
        font-size: 28px;
        margin-top: 15px;
    }

    .logo-footer{
        height : 83px;
    }

    .contact-text{
        color: white;
        font-size: 16px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }

   .contact-img{
        width: 15px;
        height: 20px;
        padding-top: 15px;
        padding-right: 15px;
    }

    .movil-img{
        height: 22px;
        width: 15px;
        padding-top: 30px;
        padding-right: 15px;
    }

    .email-img{
        height: 22px;
        width: 15px;
       
        padding-right: 15px;
    }

    .phone-text{
      color: white;
      font-size: 16px;
      margin-right: 35px;
      line-height: 1.5em;
      font-family: 'Open Sans', sans-serif;
    }

    .flex-movil-info{
        display: flex;
        margin-top: 5px;
        justify-content: stretch;
    }

    .flex-movil-info > div{
        text-decoration: none;
    }

    .flex-email-info{
        display: flex;
        margin-top: 5px;
        justify-content: stretch;
    }

    .flex-email-info > div{
        text-decoration: none;
    }

    .flex-contact-info{
        width: 100%;
        display: flex;
        justify-content: stretch;
    }

    .flex-contact-info > div{
        margin-top: 5px;
    }

    .flex-legal{
        background-color: #00375A;
        width: 100%;
        min-height: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -5px;
    }

    .flex-legal > div{
      padding:25px;
      cursor: pointer;
    }

    .flex-legal > div:hover{
     color:#53e4d5;
    }

}


@media (min-width: 1800px){

    .xs-title-content{
        display: none;
    }

     .seguridad{
        margin-right: 270px;
    }

    .gestion{
        margin-right: 80px;
    }

    .firstnote{
        animation: rotate  13s ease-in-out infinite;
       
    }

    .firstnote2{
        animation: rotate  10s ease-in-out infinite;
      
    }

    .firstnote3{
        animation: rotate  13s ease-in-out infinite;
       
    }

    @keyframes rotate {
     
       0%   {transform: rotateX(0deg)}
       100%   {transform: rotateX(2deg)}
    }

 
    
    .text-notes{
        font-size: 28px;
        color: #D07732;
        font-weight: 600;
        font-family: "Open Sans", sans-serif;
        margin-left: 25px;
        margin-top: 10px;
    }

    .notes{
        width: 100%;
        height: 90px;
      
    }

    .notes-space{
        display: flex;
        justify-content: space-evenly;
        margin-left: -10px;
    }

    .notes-space > div{
        text-decoration: none;
    }

    .flex-notes{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;
        flex-wrap: wrap;
    }

    .flex-notes > div{
        text-decoration: none;
        width: 100%;
        margin-top: 15px;
       
    }

    .original-logo-top{
        width: 100%;
        height: 100px;
        margin-top: 300px;
        margin-bottom: -150px;
    }

.img-left-top {
    margin-bottom: 200px;
    margin-top: 100px;
}

  
/* ========================================== */
/*          navbar                            */
/* ========================================== */
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
    margin-top: 12px;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  /* box-shadow: 0 2px 5px rgba(255,101,47,.2); */
  transition: all .3s ease-in-out;
  margin-top: -0.3px;
}

.menu-btn__burger:hover{
     background-color: #D07732;
}

.menu-btn__burger:hover{
    background-color: #D07732;
}

.menu-btn__burger:hover::before{
    background-color: #D07732;
}


.menu-btn__burger:hover::after{
    background-color: #D07732;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 5px;
  background: #e4b12f;
  border-radius: 5px;
  transition: all .3s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-10px);
}
.menu-btn__burger::after {
  transform: translateY(10px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

a {
    text-decoration: none;
    font-size: 22px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    }

h1{
     font-size: 45px;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
     color: white;
}

.flex-menu-navbar{
    width: 50%;
    display: flex;
    justify-content: flex-start;
}



.flex-menu-navbar > li{
    /* margin-left: 7px;
    margin-right: 7px;
    margin-top: -3px; */
    text-decoration: none;
}

li{ 
    list-style: none;
     margin-left: 15px;
    margin-right: 15px;
    margin-top: -23px;
}

.home-link{
margin-left: -20px;
}

.menu-links{
     
   color: #e4b12f;
}

.menu-links:hover{
    color: #D07732;
}

.menu-links2{
    font-size: 18px;
    color: #4BA299;
}

.menu-links2:hover{
    color: #D07732;
}


.subMenus{
    margin-top:10px;
    margin-bottom: 10px;
    
}

.servicesLink:hover{
     cursor: pointer;
}

.flex-menu-navbar ul ul {
   
    display:none;
    position:absolute;
    top:100%;
    left:12%;
    background:white;
    padding:0;
    color: #00375A;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    z-index: 1;
    margin-top: -27px;
    transition: 2s;
}

.flex-menu-navbar ul ul li {
 float:none;
 
}

.flex-menu-navbar ul ul a {
 line-height:120%;
 padding:10px 15px;
}

.flex-menu-navbar ul li:hover > ul {
 display:block;
 float: none;
}


/* ========================================== */
/*  sticky scroll button                     */
/* ========================================= */
    
    .scrollTopButton{
        width: 50px;
        height: 50px;
        top: 85%;
        border-radius: 100px;
        padding: 0;
        left: 95%;
        right: 0;
        z-index: 15;
        position: fixed;
      
        background-color: rgb(67, 138, 209, 0.6);
        transition: 0.5s;
        cursor: pointer;
       
        animation: inOut 0.5s ease-in-out;
    }

   .scrollTopButton:hover{
        transition: 0.5s;
         background-color: rgb(67, 138, 209, 1);
        transform: scale(1.2);
    }


     @keyframes inOut {
        0% {
            opacity: 0;
            transform: scale(0);
            
        }
       
        100% {
            opacity: 1;
              transform: scale(1);
            
        }


    }



    /* ================================================= */
    /*                      Navbar                       */
    /* ================================================= */

    #hamburguer_open{
        cursor: pointer;
        margin-top: -5px;
    }

    .flex-navbar{
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .fadeinDown {
        -webkit-animation: fadeInDown 800ms ease-in-out; /* Chrome, Safari, Opera */
        animation: fadeInDown 800ms ease-in-out;

    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }
    
    /* Standard syntax */
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .flex-navbar > .sticky-header{  
         text-decoration: none;
    }

    .sticky-header{
        z-index: 10;
        width: 73%;
        height: 100px;
        transition: 0.3s;
        border-radius: 5px;
        margin-top: 350px;
        position:fixed;
        background-color: #fff;
    }

    .showNavbar{
        display:block; 
    }

    .hideNavbar{
        display:none; 
    }

    .sticky-header-scroll{
    
        width: 85%;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        margin-top: 20px;
        transition: 0.3s;
        z-index: 10;
        position:fixed;
        border-radius: 5px;
         transition: 1s;
    }



    /* onclick event open close hamburguer icon  */
    .sticky-header-event{
        transition: 1s;
        box-shadow: 0 6px 16px rgb(0 0 0 / 6%);
    }


    .flex-content-nav{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .flex-content-nav > div{
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 25px;
    }

    .original_logo{
        width: 175px;
        margin-top: -10px;
        margin-left: 180px;
    }

   

    .flex-media-content{
        display: flex;
        justify-content: space-between;
        width: 200px;
    }

    .flex-content-nav > div{
        text-decoration: none;
    }

    .media-icons{
        width: 19px;
        cursor: pointer;
    }

    .facebook-media{
        width: 10px;
        cursor: pointer;
    }

   
    /* ========================================== */
    /* top content                                */
    /* ========================================== */

    .flex-top-content{
        display: flex;
        justify-content: center;
    }

    .top-h1{
        margin-top: 250px;
        color: #00375A;
    }

    .razones-img-top{
        margin-top: -400px;
        margin-bottom: 250px;
        width:1300px;
        height: 300px;
    }

    .razones-img-bottom{
        margin-top: 200px;
        margin-bottom: 250px;
        width: 100%;
        height: 300px;
    }

    /* ========================================== */
    /*  flex-cards-reasons                        */
    /* ========================================== */

    .xs-show{
      
        display: none;
    }

    .xs-lg{
          display: block;
    }

    .background-cards{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/background-certf-cards.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center center;
        margin-top: -100px;
    }

    

     .background-cards2{
       
        width: 100%;
        min-height: 1100px;
        background-image: url("../assets/bakground-2-familias.svg");
        background-repeat: no-repeat;
        background-size: 1200px;
        background-position: center top;
    }

    .flex-cards-reasons{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
       
       
        margin-bottom: 150px;
    }

    .flex-cards-reasons > div{
        z-index: 10;
        margin-top: 300px;
       
    }

    .reassonChoose {
        margin: 200px auto 180px;
     
        font-size: 45px;
        font-weight: 300;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5;
        color: #4ba299;
    }

     .items{
        width: 39px;
        height: 33px;
        margin-right: 20px;
        animation: rotate  2s ease-out infinite;
    }

    @keyframes rotate {
        0%{
            transform: rotate(-15deg);
        }

        50%{
            transform: rotate(15deg);
        }

        100%{

            transform: rotate(-15deg);

        }

    

    }

    .flex-items{
        display: flex;
        justify-content: space-between;
    }

    .flex-items > div{
         text-decoration: none;
    }

    details {
        width: 75%;
        min-height: 5px;
        background-color: white;
        /* max-width: 700px; */
        padding: 45px 70px 45px 45px;
        margin: 0 auto;
        position: relative;
        font-size: 22px;
        /*   border: 2.5px solid #4ba299; */
        box-shadow: 2px 2px 5px rgba(0,0,0,.2);
        border-radius: 15px;
        box-sizing: border-box;
        transition: all .3s ease-in-out;
    }

    details + details {
        margin-top: 20px;
    }

    details[open] {
        min-height: 50px;
        background-color: white;
        box-shadow: 2px 2px 20px rgba(0,0,0,.2);
        outline: none;
        border:none;
        transition: all .3s ease-in-out;
    }

    details p {
        color: #96999d;
        font-weight: 300;
        font-family: "Open Sans", sans-serif;
    }

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        color: #4ba299;
    }

    summary:focus {
        outline: none;
    }

    summary:focus::after {
        content: "";
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    summary::-webkit-details-marker {
        display: none
    }

    .cards-familias{
        margin-top: 100px;
    }

    .control-icon {
        fill: #4ba299;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

     .control-icon2 {
        fill: #e4b12f;
        transition: all .3s ease-in-out;
        pointer-events: none;
        width:35px;
        height:35px;
    }

    .control-icon-close2 {
        display: none;
        transition: all .8s ease-in-out;
        width:35px;
        height:35px;
    }

    details[open] .control-icon-close {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand {
        display: none;
    }

     details[open] .control-icon-close2 {
        display: initial;
        transition: all .8s ease-in-out;
    }

    details[open] .control-icon-expand2 {
        display: none;
    }


    /* ========================================== */
    /*  WhyUs                                     */
    /* ========================================== */

    .whyUs-title{
        text-align: center;
        margin-bottom: 150px;
         color:#00375A;
    }

    .whyUs-title2{
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-title3{
        
        text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    
    .whyUs-title4{
        margin-top: 150px;
          text-align: center;
        margin-bottom: 150px;
         color:#D07732;
    }

    .whyUs-h1{ 
        
        font-size: 45px;
        color:#00375A;
    }

    .whyUs-h2{ 
        
        font-size: 45px;
        color:#D07732;
    }

    #whyUs{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs5{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyUs2{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU3{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

    #whyU4{
        background-color: white;
        min-height: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
    }

     .flex-whyUs{  
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
     
    }

    .flex-whyUs > div{
       width: 35%;
        
    }

    .flex-whyUs2{
          display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
        margin-top: 20px;
    }

    .flex-whyUs2 > div{
       width: 35%;
        
    }

    .left-why{
       text-decoration: none;
    }

    .right-why{
       text-decoration: none;
    }

    .separator{
        width: 260px;
    }


    h1{ 
        
        font-size: 45px;
        color:#BF3158;
    }

    .whyUs-img{
        width: 100%;
        height: 358px;
        margin-top: 20px;
        margin-left: 25px;
    }

    .why-text{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }


    .flex-why-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }   

    .flex-why-bottom > div{
        min-height: 300px;
    }

    .flex-why-bottom :first-child{
        justify-content: flex-start;
    }

    .flex-why-bottom :last-child{
        justify-content: flex-end;
    }


    .left-why-bottom{
        width: 300px;
        height: 458px;
    }

    .right-why-bottom{
        width: 317px;
        height: 564px;
        margin-top: 80px;
        margin-right: -20px;
    }

    .whyUs-img2{
       
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: -80px;
    }


    /* ========================================== */
    /*  Flex-adventages                           */
    /* ========================================== */

    .flex-adventages{
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 250px;
    }

    .flex-adventages > div{
        width: 450px;
        min-height: 500px;
        margin-top: 50px;
        margin-left:80px;
        margin-right: 80px;
       
    }

    .why-text2{
        font-size: 24px;
        padding: 0px 0px 75px 0px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
        color: #00375A;
    }

    /* ========================================== */
    /*         Footer                             */
    /* ========================================== */

    footer{
        width:100%;
        min-height: 500px;
        position:static;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-bottom: 0px;
    }

     .footer-img-xs-sm{
        display: none;
    }
    
    .flex-footer-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        min-height: 500px;
        margin-top: -4px;
        background-color: #00375A; 
        
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

    .flex-footer-content > div{
        
       width: 25.5%;
       padding: 120px 50px 15px 50px;
    }

    .flex-footer-content:last-child{
        width: 100%;
    }

    .footer-text{
       color: white;
       font-size: 14px;
       margin-top: 50px;
       padding: 0px 0px 15px 0px;
       margin-top: 15px;
       line-height: 1.5em;
       font-family: 'Open Sans', sans-serif;
    }

    .flex-footer-media{
        display: flex;
        justify-content: stretch;
        margin-top: 50px;
    }

    .flex-footer-media > img{
        height: 15px;
        margin-right: 35px;
    }

    .footer-img{
        min-width:360px;
        height: 360px;
    }

     .flex-email-footer{
        width: 80%;
        height: 76px;
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .flex-email-footer > div{
         text-decoration: none;
    }

    .footerEmail{
        width: 100%;
        height: 46px;
        background-color: #2D6DAF;
        
    }

    .button-class{
        max-width: 200px;
        max-height: 48px;
        margin-left: -2px;
        background-color: #2D6DAF;
    }

    button{
        outline: none;
        border:none;
        border-color: none;
    }

    .button-send{
        min-width:  87px;
        height: 36px;
        background-color: #BF3158;
        color: white;
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 10px;
        margin-right: 6px;
        text-align: center;
        cursor: pointer;
         transition: 0.6s;
         font-family: 'Open Sans', sans-serif;
    }

    .button-send:hover{
        background-color: #4BA299;
         transition: 0.6s;
    }

    input{
        background: transparent;
        color: white;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
          -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-color: none;
        outline: none;
        outline-color: none;
    }


    input::placeholder{
        color: white;
        font-size: 14px;
    }

    .separator-footer{
        height: 10px;
    }

    .h1footer{
        color: white;
        font-size: 28px;
        margin-top: 15px;
    }

    .logo-footer{
        height : 83px;
    }

    .contact-text{
        color: white;
        font-size: 16px;
        line-height: 1.5em;
        font-family: 'Open Sans', sans-serif;
    }

   .contact-img{
        width: 22px;
        height: 29px;
        padding-top: 15px;
        padding-right: 15px;
    }

    .movil-img{
        height: 28px;
        width: 19px;
        padding-top: 30px;
        padding-right: 15px;
    }

    .email-img{
        height: 28px;
        width: 19px;
       
        padding-right: 15px;
    }

    .phone-text{
      color: white;
      font-size: 16px;
      margin-right: 35px;
      line-height: 1.5em;
      font-family: 'Open Sans', sans-serif;
    }

    .flex-movil-info{
        display: flex;
        justify-content: stretch;
    }

    .flex-movil-info > div{
         text-decoration: none;
    }

    .flex-contact-info{
        width: 100%;
        display: flex;
        justify-content: stretch;
    }

    .flex-contact-info > div{
         text-decoration: none;
    }

     .flex-email-info{
        display: flex;
       
        justify-content: stretch;
    }

    .flex-email-info > div{
         text-decoration: none;
    }

    .flex-legal{
        background-color: #00375A;
        width: 100%;
        min-height: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -5px;
    }

    .flex-legal > div{
      padding:25px;
      cursor: pointer;
    }

    .flex-legal > div:hover{
      color:#53e4d5;
    }
}