/* - - - - - - - - - - - - - - - 
CSS principal
Desarrollado por: Upgrade Diseño Interactivo
Para: 
Fecha: 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */

/* ====== F O N T S ====== */
@font-face {
    font-family: 'AvenirNextBold';
    src: url('../../_fonts/AvenirNext-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextRegular';
    src: url('../../_fonts/AvenirNext-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ====== F O N T S (end) ====== */

/*Eliminamos márgenes del "body" */
html, body{ margin: 0px; padding: 0px; height: 100%; background-color: rgba(249, 249, 249, 1);
}

#big-container /* Div que va a manterner el "footer" siempre al fondo */
{
    min-height: 100% !important;
    box-sizing: border-box;
    width: 90%;
    margin: 0px auto;
}

/* GENERAL */

a { text-decoration: none; }

*{
    font-family: 'AvenirNextRegular';
}

/* HEADER */

.nav{
    display: flex;
    height: 100%;
    background-color: rgba(249, 249, 249, 1);
    justify-content: space-between;
    align-items: center;
    padding: 50px 30px 30px;
}

.nav ul{
    list-style-type: none;
    padding: 0; 
    margin: 0; 
}

.menu > li{
	position: relative;
	display: inline-block;
}

#logo {
 	width: 150px;
	height: auto;
}

.menu > li > a, .menu > li > span{
	display: block;
    margin-left: 120px;
    color: rgba(85, 186, 94, 1);
    font-size: 1.15em;
    font-family: 'AvenirNextRegular';
    text-decoration: none;
    padding: 10px 0px;;
}

.submenu{
	position: absolute;
    z-index: 2; 
    background: #55BA5E;
    width: 225px;
    border-radius: 9px 0px 9px 9px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s;
    row-gap: -150px;
    top: 45px;
}

.submenu li a{
	display: block;
    padding: 10px;
    color: #ffff;
    font-family: 'AvenirNextRegular';
    font-size: 1.15em;
    text-decoration: none;
}

.submenu li a:hover{
	color: white;
	transition: all .3s;
    font-weight:bold;
}

.menu li:hover .submenu{
	visibility: visible;
	opacity: 1;
}

/* FOOTER */

#footer_cut { padding-top:0px; clear:both; }

.foot{
	display: flex;
    background-color: rgba(45, 45, 45, 1);
    border-radius: 9px;
    justify-content: space-evenly;
    align-items: center;
    height: 350px;
}

#logo_foot {
	width: 119px;
	height: auto;
}

.box1{
    font-family: 'AvenirNextRegular';
    font-size: 1.15em;
    line-height: 35px;
}

.box1 ul{
    list-style-type: none;
    padding: 0;
}

.box1 a {
    color: white;
    position: relative; /* Añade posición relativa para el enlace */
    text-decoration: none; /* Elimina el subrayado predeterminado del enlace */
}

.box1 a:before {
    content: ""; /* Añade contenido vacío al pseudo-elemento */
    position: absolute; /* Posición absoluta con respecto al enlace */
    width: 0;
    height: 2px; /* Define el alto del subrayado */
    background-color: #55BA5E;
    bottom: -2px; /* Coloca el subrayado en la parte inferior del enlace */
    left: 0; /* Alinea el subrayado con el enlace */
    transition: all 1s ease;
    opacity: 0; /* Inicialmente oculta el subrayado */
}

.box1 a:hover:before {
    width: 100%;
    opacity: 1; /* Muestra el subrayado al hacer hover */
}


.media{
    display: flex;
}

.icons{
	margin: -2px 15px;
}

.foot2{
    color: rgba(85, 186, 94, 1);
    font-family: 'AvenirNextRegular';
    font-size: 1.15em;
    margin: 0px 70px;
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
}

.box3{
    display: flex;
}

.alingf{
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.foot2 a{ color: #55ba5e; }

.foot .box2{
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* INDEX */

.banner{
    display: flex;
    border-radius: 9px;
    width: 100%;
    align-items: center;
    background: linear-gradient(336deg, rgba(23,111,31,1) 4%, rgba(216,255,140,1) 100%);
    position: relative;
}

.text-banner{
    text-align: right;
    width: 40%;
    position: absolute;
    right: 15%;
    margin: 0px;
}

.text-banner h1{
    color: white;
    font-family: AvenirNextBold;
    font-size: 2.5em;
}

.text-banner h2{
    color: white;
    font-family: AvenirNextRegular;
    font-size: 1.25em;
    font-weight: normal;
    margin: 30px 0px;
}

.ima-sr{
    width: 60%;
    margin-bottom: -4px;
}

.img-banner{
    width: 50%;
    margin-left: 10%;
    overflow: hidden;
}

.button-call{
    padding: 10px 20px;
    background-color: white;
    color: #55BA5E;
    font-family: 'AvenirNextRegular';
    font-size: 1.1em;
    border-radius: 9px;
    border: none;
    transition: .7s;
}

.button-call3{
    padding: 10px 20px;
    background-color: #55BA5E;
    color: white;
    font-family: 'AvenirNextRegular';
    font-size: 1.1em;
    border-radius: 9px;
    border: none;
    transition: .7s;
    margin: 0px auto;
    display: flex;
    text-align: center;
    width: 10%;
    align-items: center;
    align-content: center;
    justify-content: center;

}


    .button-call:hover, button:hover, .button-call2:hover, .button-call3:hover{
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        cursor: pointer;
    }

.block1{
    display: flex;
    justify-content: space-between;
    margin: -5% auto;
    width: 70%;
    position: relative;
}

.block{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 158px;
    width: 18%;
    background-color: white;
    border-radius: 9px;
    border: 1px solid #55BA5E;
    margin: 0 10px;
    transition: .7s;
    color: black;
}

    .block:hover{
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    }

.icon{
    margin: -2px 15px;
}

.text{
    width: 70%;
    text-align: center;
    font-family: 'AvenirNextRegular';
    font-size: 1.1em;
}

.block2{
    display: block;
    border-radius: 9px;
    text-align: center;
    background-color: #FFFFFF;
    box-sizing: border-box;
}
	
.titl1{
    color: #55BA5E;
    font-family: 'AvenirNextBold';
    font-size: 2.5em;
    margin: 165px 0px 30px;
    padding-top: 120px;
}

.titl2{
    font-family: 'AvenirNextRegular';
    font-size: 1.3em;
    font-weight: normal;
}

.sub{
    display: flex;
    justify-content: space-evenly;
    margin: 97px 81px 0px;
    padding-bottom: 80px;
}

.sub p{
    font-family: 'AvenirNextRegular';
    font-size: 1.55em;
    width: 70%;
    text-align: center;
    cursor: pointer;
}

.sub a{
    font-family: 'AvenirNextRegular';
    font-size: 1.55em;
    width: 70%;
    text-align: center;
    color: black;
    margin: 20px 0px;
}


.sub1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sub a:hover span {
    color: #55BA5E; /* Cambia el color del texto del enlace cuando se pasa el cursor por encima */
    text-decoration: underline; /* Agrega un subrayado al enlace en el hover */
  }

.sub p:hover span {
    color: #55BA5E; /* Cambia el color del texto del enlace cuando se pasa el cursor por encima */
    text-decoration: underline; /* Agrega un subrayado al enlace en el hover */
  }

.block3 {
    /* display: flex; */
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 80px 0px;
}

.block3 p{
    text-align: center;
    font-family: AvenirNextRegular;
    font-size: 1.2em;
}

.block3 h1{
    text-align: center;
    font-family: AvenirNextBold;
    font-size: 2em;
    color: #55BA5E;
    margin-bottom: -10px;
}

.block3 p{
    text-align: justify;
    font-family: AvenirNextRegular;
    font-size: 1.2em;
    text-align: center;
}

.block3 video{
    width: 85%;
    margin: 0px auto;
    display: flex;
}

 /*FORMULARIO*/
 
.block4{
    display: flex;
    background-color: #FFFFFF;
    padding: 50px 100px;
    border-radius: 9px;
    align-items: center;
    margin: 70px auto 70px;
}

.block4 h1{
    text-align: start;
    font-family: AvenirNextBold;
    font-size: 2.6em;
    width: 70%;
    color: #55BA5E;
    margin-bottom: -10px;
}

.block-text{
    display: block;
    width: 100%;
    margin-right: 40px;
}

.block4 p{
    font-family: AvenirNextRegular;
    font-size: 1.2em;
}

.form{
    display: block;
    width: 100%;
    text-align: right;
}

input { width: 49% !important; }

input,
textarea{
    border-radius: 9px;
    border-color: #55BA5E;
    border-width: 1px;
    border-style: solid;
    font-family: AvenirNextRegular;
    font-size: 1.1em;
    margin: 10px 0px;
    padding: 8px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: none;
}

.input-75 {
    width: 57% !important;
    margin-right: 10px; /* Agrega la separación entre los elementos */
  }
  
.input-25 {
    width: 43% !important;
}

button{
    width: 92px;
    height: 35px;
    background-color: #55BA5E;
    color: white;
    font-family: AvenirNextRegular;
    font-size: 18px;
    border-radius: 9px;
    border: none;
    transition: .7s;
}

::placeholder{
    color: #55BA5E;
    font-family: AvenirNextRegular;
    font-size: 1em;
    padding: 10px;
}

.name{
    width: 60%;
    height: auto;
}

.service{
    width: 40%;
    height: auto;
}

.phone{
    width: 50%;
    height: auto;
}

.mail{
    width: 50%;
    height: auto;
}

.messege{
    width: 100%;
    height: auto;
    resize: none;
    box-sizing: border-box;
    margin: 10px 0px;
}

select{
    border-radius: 9px;
    border-color: #55BA5E;
    border-width: 1px;
    border-style: solid;
    font-family: AvenirNextRegular;
    font-size: 1.1em;
    color: #55BA5E;
    margin: 10px 0px;
    padding: 8px 23px;
    appearance: none;
    background-image: url('../../_images/_icons/arrow.svg');
    background-position: right;
    background-position-x: 92%;
    background-repeat: no-repeat;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
}

.line1{
    width: 100%;
    display: flex;
}

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

/*POPUP*/

.popup{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    text-align: -webkit-center;
    margin: 0 auto;
    backdrop-filter: blur(10px);
    display: inline-block;
    z-index: 1;
}

.popup-content{
    width: 45%;
    height: auto;
    background-color: white;
    padding: 20px;
    border-radius: 9px;
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.popup-text{
    width: 100%;
}

.popup-text h1{
    font-family: AvenirNextBold;
    font-size: 2.3em;
    color: #55BA5E;
    margin: 50px 0px -5px 0px;
    width: 100%;
}

.popup-text p {
    font-family: AvenirNextRegular;
    font-size: 1.2em;
    width: 60%;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 10px auto;
  }

.form-popup{
    display: inline-grid;
    width: 60%;
    justify-items: center;
}
    
    .form-popup input, .form-popup textarea{ width: 100% !important; }

.form-popup .name{
    width: 60% !important;
    height: auto;
    margin: 8px;
}

.form-popup .phone{
    width: 60% !important;
    height: auto;
    margin: 8px;
}

.form-popup .mail{
    width: 60% !important;
    height: auto;
    margin: 8px;
}

.form-popup textarea{
    height: 160%;
    resize: none;
    margin: 8px;
}

.form-popup button{
    height: 35px;
    font-size: 1em;
    margin-top: 50px
}

#close{
    position: absolute;
    right: 3%;
    /* top: 7%; */
}

/*ABOUTUS*/

.block5::before{
    content: "";
    width: 100%;
    height: 90%;
    border-radius: 9px;
    position: absolute;
    background: linear-gradient(360deg, #2D2D2D 9.57%, rgba(45, 45, 45, 0.441398) 57.51%, rgba(45, 45, 45, 0) 92.23%);
    bottom: 0;
}

.block5{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    position: relative;
}

.ima-work{
    width: 100%;
    height: auto;
    border-radius: 9px;
}

.block5_1{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0px 0px 80px;
}

.block5_1 h1{
    font-family: AvenirNextBold;
    font-size: 3em;
    color: #FFFFFF;
    font-weight: lighter;
    margin: -221px;
    position: absolute;
    width: 70%;
    text-align: center;
    line-height: 1.1;
}

.block6{
    display: flex;
    align-items: center;
    width: 100%;
}

.ima-workers{
    width: 50%;
    height: auto;
}

.block6 h1{
    font-family: AvenirNextBold;
    margin: 0px 0px 0px 145px;
    font-size: 3em;
    color: #55BA5E;
}

.block6 p{
    font-family: AvenirNextRegular;
    margin: 55px 250px 100px 145px;
    font-size: 1.5em;
    height: auto;
}

.box-text {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 140px;
    width: 50%;
}

.button-call2{
    background-color: #55BA5E;
    border-radius: 9px;
    text-align: center;
    align-self: baseline;
    color: white;
    font-family: AvenirNextRegular;
    font-size: 1.3em;
    margin: 0px 145px;
    padding: 10px 30px;
    border: none;
}

.block7{
    display: flex;
    width: 100%;
    margin: 90px 0px;
    justify-content: space-between;
}

.box-info{
    width: 48%;
    height: 310px;
    border-radius: 9px;
    background-color: white;
    text-align: center;
}

.box-info h2{
    font-family: AvenirNextBold;
    font-size: 2.5em;
    font-weight: 400;
    color:#55BA5E;
    letter-spacing: 0em;
    text-align: center;
}

.box-info p{
    font-family: AvenirNextRegular;
    font-size: 1.4em;
    letter-spacing: 0em;
    margin: 65px 130px;
}

/*SERVICES*/

.block8{
    display: flex;
    width: 100%;
    margin: 0px 0px 0px 0px;
    flex-direction: column;
}

.ima-signature{
    width: 100%;
    height: 500px;
    background-image: url('../../_images/signature.png');
    border-radius: 9px;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.service-info{
    display: flex;
    width: 80%;
    box-sizing: border-box;
    padding: 0px 60px 0px 60px;
    flex-direction: column;
    margin-top: 50px;
    margin: 50px auto;
    justify-content: center;
    text-align: center;
}

.block8 h3{
    font-family: AvenirNextBold;
    font-size: 1.3em;
    font-weight: 500;
    margin: 0px;
}

.block8 h1{
    font-family: AvenirNextBold;
    font-size: 3.2em;
    color: #55BA5E;
    margin: 10px 0px 45px 0px;
}

.block8 p{
    font-family: AvenirNextRegular;
    font-size: 1.5em;
    font-weight: 500;
}

.block9{
    display: flex;
    width: 100%;
    border-radius: 9px;
    text-align: center;
}

.list{
    display: inline-flex;
    width: 30%;
    background-color: #55BA5E;
    border-radius: 9px 0px 0px 9px;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

.list h1{
    font-family: AvenirNextBold;
    font-size: 2.5em;
    color: white;
    font-weight: 300;
    margin-top: 40px;
}

.list ul{
    width: 100%;
    padding: 0px 20px 0px 70px;
    line-height: 40px;
}

.list ul li{
    font-family: AvenirNextRegular;
    font-size: 1.3em;
    color: #FFFFFF;
    text-align: start;
}

.points{
    width: 50%;
}

.ima-cashbook{
    width: 70%;
}

/*CONTACT*/

.contact-info {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.contact-info h1{
    font-family: AvenirNextBold;
    font-size: 3.2em;
    color: #55BA5E;
    margin: 10px 0px 0px 0px;
    margin-top: 40px;
}

.contact-info p{
    font-family: AvenirNextRegular;
    text-align: justify;
    font-size: 1.5em;
    margin-bottom: 50px;
}

.map{
    width: 100%;
    height: auto;
    transition: opacity 0.5s;
}

iframe{
    width:100%; 
    height:600px;
}

/* .btn-form, .btn-form2{
    background-color: #55BA5E;
    color: white;
    font-family: Avenir Next;
    font-size: 1em;
    border-radius: 9px;
    border: none;
    padding: 10px;
    cursor: pointer;
} */

textarea{
    overflow: hidden;
}

.block10{
    background-color:white;
    border: 1px solid #55BA5E;
    border-radius: 10px;
    text-align: center;
    padding: 30px 0px;
    margin: 70px 0px;
}

    .block10 p{
        font-size: 1.2em;
    }


  .animatable {
    
    /* initially hide animatable objects */
    visibility: hidden;
    
    /* initially pause animatable objects their animations */
    -webkit-animation-play-state: paused;   
    -moz-animation-play-state: paused;     
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;   
    animation-play-state: paused; 
  }
  
  /* show objects being animated */
  .animate-in {
    visibility: visible;
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
  
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
  }
  
  .animate-out {
    visibility: visible;
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
  
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
  
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    -ms-animation-direction: reverse;
    -o-animation-direction: reverse;
    animation-direction: reverse;
  }
  
  .animate-out:after {
    content ''
    letter-spacing: inherit;
  }
  
  /* CSS Animations (extracted from http://glifo.uiparade.com/) */
  @-webkit-keyframes fadeInDown {
      0% {
          opacity: 0;
          -webkit-transform: translateY(-20px);
      }	100% {
          opacity: 1;
          -webkit-transform: translateY(0);
      }
  }
  
  @-moz-keyframes fadeInDown {
      0% {
          opacity: 0;
          -moz-transform: translateY(-20px);
      }
  
      100% {
          opacity: 1;
          -moz-transform: translateY(0);
      }
  }
  
  @-o-keyframes fadeInDown {
      0% {
          opacity: 0;
          -o-transform: translateY(-20px);
      }
  
      100% {
          opacity: 1;
          -o-transform: translateY(0);
      }
  }
  
  @keyframes fadeInDown {
      0% {
          opacity: 0;
          transform: translateY(-20px);
      }
      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  
  
  @-webkit-keyframes fadeIn {
      0% {
          opacity: 0;
      }
      20% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  
  @-moz-keyframes fadeIn {
      0% {
          opacity: 0;
      }
      20% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  
  @-o-keyframes fadeIn {
      0% {
          opacity: 0;
      }
      20% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  
  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      60% {
          opacity: 0;
      }
      20% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  @-webkit-keyframes bounceInLeft {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-2000px);
      }
      60% {
          -webkit-transform: translateX(20px);
      }
  
      80% {
          -webkit-transform: translateX(-5px);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
      }
  }
  
  @-moz-keyframes bounceInLeft {
      0% {
          opacity: 0;
          -moz-transform: translateX(-2000px);
      }
  
      60% {
          -moz-transform: translateX(20px);
      }
  
      80% {
          -moz-transform: translateX(-5px);
      }
  
      100% {
          opacity: 1;
          -moz-transform: translateX(0);
      }
  }
  
  @-o-keyframes bounceInLeft {
      0% {
          opacity: 0;
          -o-transform: translateX(-2000px);
      }
  
      60% {
          opacity: 1;
          -o-transform: translateX(20px);
      }
  
      80% {
          -o-transform: translateX(-5px);
      }
  
      100% {
          opacity: 1;
          -o-transform: translateX(0);
      }
  }
  
  @keyframes bounceInLeft {
      0% {
          opacity: 0;
          transform: translateX(-2000px);
      }
  
      60% {
          transform: translateX(20px);
      }
  
      80% {
          transform: translateX(-5px);
      }
  
      100% {
          opacity: 1;
          transform: translateX(0);
      }
  }
  @-webkit-keyframes bounceInRight {
      0% {
          opacity: 0;
          -webkit-transform: translateX(2000px);
      }
  
      60% {
          -webkit-transform: translateX(-20px);
      }
  
      80% {
          -webkit-transform: translateX(5px);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
      }
  }
  
  @-moz-keyframes bounceInRight {
      0% {
          opacity: 0;
          -moz-transform: translateX(2000px);
      }
  
      60% {
          -moz-transform: translateX(-20px);
      }
  
      80% {
          -moz-transform: translateX(5px);
      }
  
      100% {
          opacity: 1;
          -moz-transform: translateX(0);
      }
  }
  
  @-o-keyframes bounceInRight {
      0% {
          opacity: 0;
          -o-transform: translateX(2000px);
      }
  
      60% {
          -o-transform: translateX(-20px);
      }
  
      80% {
          -o-transform: translateX(5px);
      }
  
      100% {
          opacity: 1;
          -o-transform: translateX(0);
      }
  }
  
  @keyframes bounceInRight {
      0% {
          opacity: 0;
          transform: translateX(2000px);
      }
  
      60% {
          transform: translateX(-20px);
      }
  
      80% {
          transform: translateX(5px);
      }
  
      100% {
          opacity: 1;
          transform: translateX(0);
      }
  }
  @-webkit-keyframes fadeInUp {
      0% {
          opacity: 0;
          -webkit-transform: translateY(20px);
      }	100% {
          opacity: 1;
          -webkit-transform: translateY(0);
      }
  }
  
  @-moz-keyframes fadeInUp {
      0% {
          opacity: 0;
          -moz-transform: translateY(20px);
      }
  
      100% {
          opacity: 1;
          -moz-transform: translateY(0);
      }
  }
  
  @-o-keyframes fadeInUp {
      0% {
          opacity: 0;
          -o-transform: translateY(20px);
      }
  
      100% {
          opacity: 1;
          -o-transform: translateY(0);
      }
  }
  
  @keyframes fadeInUp {
      0% {
          opacity: 0;
          transform: translateY(20px);
      }
  
      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }
  @-webkit-keyframes bounceIn {
      0% {
          opacity: 0;
          -webkit-transform: scale(.3);
      }
      50% {
          -webkit-transform: scale(1.05);
      }
  
      70% {
          -webkit-transform: scale(.9);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: scale(1);
      }
  }
  
  @-moz-keyframes bounceIn {
      0% {
          opacity: 0;
          -moz-transform: scale(.3);
      }
  
      50% {
          -moz-transform: scale(1.05);
      }
  
      70% {
          -moz-transform: scale(.9);
      }
  
      100% {
          opacity: 1;
          -moz-transform: scale(1);
      }
  }
  
  @-o-keyframes bounceIn {
      0% {
          opacity: 0;
          -o-transform: scale(.3);
      }
  
      50% {
          -o-transform: scale(1.05);
      }
  
      70% {
          -o-transform: scale(.9);
      }
  
      100% {
          opacity: 1;
          -o-transform: scale(1);
      }
  }
  
  @keyframes bounceIn {
      0% {
          opacity: 0;
          transform: scale(.3);
      }
  
      50% {
          transform: scale(1.05);
      }
  
      70% {
          transform: scale(.9);
      }
  
      100% {
          opacity: 1;
          transform: scale(1);
      }
  }
  @-webkit-keyframes moveUp {
      0% {
          opacity: 1;
          -webkit-transform: translateY(40px);
      }	100% {
          opacity: 1;
          -webkit-transform: translateY(0);
      }
  }
  
  @-moz-keyframes moveUp {
      0% {
          opacity: 1;
          -moz-transform: translateY(40px);
      }
  
      100% {
          opacity: 1;
          -moz-transform: translateY(0);
      }
  }
  
  @-o-keyframes moveUp {
      0% {
          opacity: 1;
          -o-transform: translateY(40px);
      }
  
      100% {
          opacity: 1;
          -o-transform: translateY(0);
      }
  }
  
  @keyframes moveUp {
      0% {
          opacity: 1;
          transform: translateY(40px);
      }
  
      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  @-webkit-keyframes fadeBgColor {
      0%{
          background:none;
      }
    70%{
          background:none;
      }
      100%{
          background:#464646;
      }
  }
  @-o-keyframes fadeBgColor {
      0%{
          background:none;
      }
    70%{
          background:none;
      }
      100%{
          background:#464646;
      }
  }
  @keyframes fadeBgColor {
      0%{
          background:none;
      }
    70%{
          background:none;
      }
      100%{
          background:#464646;
      }
  }
  
  .animate-in.animationDelay, .animate-out.animationDelay {
      animation-delay:.4s;
      -webkit-animation-delay:.4s;
  }
  .animate-in.animationDelayMed, .animate-out.animationDelayMed {
      animation-delay:1.2s;
      -webkit-animation-delay:1.2s;
  }
  .animate-in.animationDelayLong, .animate-out.animationDelayLong {
      animation-delay:1.6s;
      -webkit-animation-delay:1.6s;
  }
  .animate-in.fadeBgColor, .animate-out.fadeBgColor {
      -webkit-animation-name: fadeBgColor;
      -moz-animation-name: fadeBgColor;
      -o-animation-name: fadeBgColor;
      animation-name: fadeBgColor;
  }
  .animate-in.bounceIn, .animate-out.bounceIn {
      -webkit-animation-name: bounceIn;
      -moz-animation-name: bounceIn;
      -o-animation-name: bounceIn;
      animation-name: bounceIn;
  }
  .animate-in.bounceInRight, .animate-out.bounceInRight {
      -webkit-animation-name: bounceInRight;
      -moz-animation-name: bounceInRight;
      -o-animation-name: bounceInRight;
      animation-name: bounceInRight;
  }
  .animate-in.bounceInLeft, .animate-out.bounceInLeft {
      -webkit-animation-name: bounceInLeft;
      -moz-animation-name: bounceInLeft;
      -o-animation-name: bounceInLeft;
      animation-name: bounceInLeft;
  }
  .animate-in.fadeIn, .animate-out.fadeIn {
      -webkit-animation-name: fadeIn;
      -moz-animation-name: fadeIn;
      -o-animation-name: fadeIn;
      animation-name: fadeIn;
  }
  .animate-in.fadeInDown, .animate-out.fadeInDown {
      -webkit-animation-name: fadeInDown;
      -moz-animation-name: fadeInDown;
      -o-animation-name: fadeInDown;
      animation-name: fadeInDown;
  }
  .animate-in.fadeInUp, .animate-out.fadeInUp {
      -webkit-animation-name: fadeInUp;
      -moz-animation-name: fadeInUp;
      -o-animation-name: fadeInUp;
      animation-name: fadeInUp;
  }
  .animate-in.moveUp, .animate-out.moveUp {
      -webkit-animation-name: moveUp;
      -moz-animation-name: moveUp;
      -o-animation-name: moveUp;
      animation-name: moveUp;
  }

/* Seccion cotizador */
/* Contenedor datos */
.dataContainer {
    background-color: #FFF;
    border-radius: 9px;
}

.dataContainer p{
    margin: 0;
    text-align: center;
}
/* Seccion de imagen */
.block1Cot {
    width: 100%;
    height: 20%;
    background-image: url(../../_images/banner.jpg);
    border-radius: 9px;
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    display: flex;
    overflow: hidden;
}
.block1CotShw {
    background: linear-gradient(68deg, #569A2B 37.99%, rgba(88, 155, 45, 0.00) 150%);
    width: 100%;
    padding: 5% 0px;
}

.block1CotShw div {
width: 50%;
text-align: center;
font-family: 'AvenirNextBold';
}

.block1CotShw img {
    width: 50%;
    max-width: 250px;
}

.block1CotShw h1 {
    color: #FFF;
    font-size: 2.5vw;
    font-family: 'AvenirNextBold';
    line-height: 1.2;

}
/* Secccion de texto con cliente */
.block2Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
    border-radius: 9px;
}
.block2Text {
    width: 80%;
    text-align: center;
    font-family: 'Avenir Next';
    font-weight: 500;
    margin: 100px;
    position: relative;
}
.block2Text #imgLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.block2Text p {
    font-size: 1.5em;
}
.block2DataClient {
    background-color: #2D2D2D;
    border-radius: 9px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 30px 40px;
    box-sizing: border-box;
    margin-bottom: 30px;
    z-index: 1;
    position: relative;
}
.block2Element {
    width: 25%;
    gap: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: left;
}

.block2ClientTitle{
    color: #55BA5E;
    font-family: "Avenir Next";
    font-weight: 700;
    font-size: 1.2em;
    margin: 0;
}
.block2ClientValue{
    color: #FFF;
    font-family: "Avenir Next";
    font-size: 2.2em;
    font-style: normal;
    font-weight: 500; 
    margin: 0;
}

.data-content-options {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    flex-direction: column;
    border: 1px solid #55BA5E;
    border-radius: 9px;
    padding: 20px;
    width: 77%;
    margin-bottom: 50px;
    transition: all .5s;
    
}

.data-content-options.close {
    background-color: #55BA5E;
    height: 100%;
    color: #FFF;
    transition: all .5s;
}

.data-content-options:not(.close){ overflow: auto; }

span.hide-on-desktop {
    display: none;
}

.closeData {
    height: 0px;
    display: none;
    color: #FFF !important;
    visibility: hidden;
}
.contentHeader {
    display: flex;
    cursor: pointer;
}
.contentHeader img {
    width: 10%;
    height: auto;
}
.contentHeader p {
    margin: auto; 
    width: 90%;
    flex-grow: 1;
    text-align: center;
    font-family: "Avenir Next";
    font-size: 2vw;
    font-weight: 600;
}
.imgBackGround{
    content: url('../../_images/chevron-down.svg');
    width: 30px;
    padding: 10px;
}
.crossImgOpen{
    content: url('../../_images/x.svg');
    width: 30px;
    padding: 10px;
}

.fixContainer {
    display: flex;
    justify-content: space-between;
}
.fixedData {
    color:#55BA5E;
    font-family: "Avenir Next";
    display: flex;
    flex-direction: column;
    width: 23%;
}
@media only screen and (max-width: 767px) {
    .fixedData {
        display: none;
    }
}

.dynamicDataContainer {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
}
.dynamicData {
    display: flex;
    flex-direction: column;
    font-family: "Avenir Next";
    height: 100%;
    width: 100%;
}
.blankSpace {
    width: 155px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 0 20px;
    position: relative;
}
.dataRow p{
    margin: 0px;
    font-size: 1em;
}

.dataColumn p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    padding: 5px;
}
    .dataColumn p:nth-child(odd){ background-color: #f6f6f6; }
    .dataColumn p:nth-child(even) { background-color: #FFF; }


.open {
    height: 50px;
    background-color: #55BA5E;
}

.contactContainer {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    align-items: center;
}
.call-button {
    background-color: #55BA5E;
    align-items: center;
    width: 10%;
    border-radius: 9px;
    color: #FFF;
    box-sizing: border-box;
    padding: 10px 10px;
    text-align: center;
    font-family: "AvenirNextBold";
}