/* HEADER */
header {overflow: hidden; }
.nav{
    padding: 40px 0px 0px;
    flex-direction: column;
}

.nav ul{
    margin: 27px 0px;
}

.menu > li > a{
	padding: 0px 15px;
    font-size: 1em;
    margin-left: 0px;
}

.menu > li > span {
    margin-left: 0px;
    font-size: 1em;
}

.submenu{
	position: absolute;
    background: #55BA5E;
    width: 200px;
    border-radius: 9px 0px 9px 9px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s;
    top: 20px;
}

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

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

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

/* FOOTER */

.foot{
    width: 100%;
    height: auto;
    flex-direction: column;
}

#logo_foot {
    margin: 40px 0px 0px 65px;
    width: 30%;
}

.box1{
    text-align: center;
    padding: 0px 10px;
    margin: 0px 10px;
}

.box1 a{
    font-size: 1em;
}

.box2{
    display: flex;
    margin: 50px 20px 50px;
}

.media{
    display: flex;
    margin: 0px 30px;
}

#icons{
	margin: -2px 8px;
}

.foot2{
    font-size: 1em;
    margin: 0px auto;
    padding: 20px 0px;
    flex-direction: column;
    align-items: center;
}

/* INDEX */

.banner{
    background: transparent;
    flex-direction: column;
}

.text-banner{
    top: 100%;
    right: 0;
    width: 100%;
    text-align: center;
    position: relative;
}

.text-banner h1{
    color: #55BA5E;
    font-size: 1.5em;
}

.text-banner h2{
    color: #55BA5E;
    margin: -3% 20% 5% 20%;
}

.img-banner{
    width: 100%;
    margin-left: 0%;
    overflow: hidden;
    background: linear-gradient(336deg, rgba(23,111,31,1) 4%, rgba(216,255,140,1) 100%);
    border-radius: 9px;
}

.ima-sr{
    margin: -2% auto;
    width: 83%;
}

.button-call{
    padding: 7px 12px;
    background-color: #55BA5E;
    color: white;
}

.block1{
    margin: 50px 0px 0px;
    width: 100%;
    flex-wrap: wrap;
}

.block{
    width: 40%;
    height: auto;
    margin-bottom: 20px;
}

#text{
    font-size: 0.85em;
    margin: 10px 0px;
}

.icon{
    margin: 5px 15px;
}

.block2{
    padding: 30px 30px 0px;
}
	
.titl1{
    font-size: 1.5em;
    padding: 0px;
    margin-top: 30px;
}

.titl2{
    margin: 0px auto;
    padding: 10px;
    font-size: 1em;
}

.sub{
    margin: 25px 25px 0px;
    flex-wrap: wrap;
}

.sub p, .sub a{
    font-size: 1.1em;
}

.block3{
    margin: 40px 0px;
}

.block3 p{
    font-size: 1em;
    width: 95%;
}
 /*FORMULARIO*/

.block4{
    display: block;
    padding: 10px 0px;
    margin: 0px auto 40px;
}

.block4 h1{
    font-size: 1.6em;
    margin-bottom: -25px;
    text-align: center;
    width: 100%;
}

.block-text{
    width: 100%;
    text-align: center;
}

.block4 p{
    font-size: 1em;
    text-align: center;
    width: 85%;
    padding: 0px 27px;
}

.form{
    width: 100%;
    text-align: center;
}

input,
textarea{
    margin: 5px 5px;
    padding: 3px 8px;
}

.line1{
    flex-direction: column;
    align-items: center;
}

.line2{
    flex-direction: column;
    align-items: center;
}

button{
    height: 30px;
    margin: 20px;
    font-size: 0.9em;
}

::placeholder{
    font-size: 0.8em;
}

#name{
    width: 100% !important;
    height: auto;
}

#service{
    width: 100% !important;
    height: auto;
}

#phone{
    width: 100% !important;
    height: auto;
}

#mail{
    width: 100% !important;
    height: auto;
}

.form-popup textarea{
    width: 100% !important;
    height: 80px;
    resize: none;
}

form textarea{
    width: 75% !important;
    height: 80px;
    resize: none;
}


.form-popup .name,  .form-popup .phone, .form-popup .mail{
    width: 100% !important;
}

select{
    font-size: 0.9em;
    margin: 5px 5px;
    padding: 5px 17px;
    background-position-x: 92%;
}

.line1, .line2{
    width: 75%;
    margin: 0px auto;
}

/*POPUP*/

.popup-content{
    width: 75%;
}

.popup-text h1{
    font-size: 1.5em;
    margin: 20px 0px -5px 0px
}

.popup-text p{
    font-size: 0.8em;
}

.form-popup #messege{
    height: 170%;
}

.form-popup button{
    margin-top: 75px;
    font-size: 0.9em;
}

#close img{
    width: 75%;
}
/*ABOUTUS*/

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

.block5_1{
    margin: 30px auto;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.block5_1 h1{
    text-align: center;
    font-weight: bold;
    font-size: 1.15em;
    color: #55BA5E;
    margin: 0 auto;
    padding: 0px;
    /* top: 50px; */
    position: relative;
}

.block6{
    flex-wrap: wrap;
    justify-content: center;
    margin: 100px 0px 0px;
}

.ima-workers{
    width: 100%;
}

.block6 h1{
    margin: 0px auto;
    font-size: 1.6em;
    width: 80%;
}

.block6 p{
    padding: 10px 0px;
    width: 90%;
    margin: 0px auto;
    font-size: 0.9em;
    margin-bottom: 30px;
}

.box-text {
    text-align: center;
    width: 100%;
    margin-top: 30px;
}

.button-call2{
    font-size: 0.8em;
    margin: 0px auto;
    padding: 5px 15px;
}

.block7{
    margin: 35px 0px 0px;
    flex-wrap: wrap;
    justify-content: center;
}

.box-info{
    width: 100%;
    height: auto;
    margin-bottom: 35px;
}

.box-info h2{
    font-size: 1.9em;
    margin: 0 auto;
    padding: 30px 0px 0px;
}

.box-info p{
    font-size: 0.8em;
    margin: 0 auto;
    padding: 20px;
}

/*SERVICES*/

.block8{
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.ima-signature{
    width: 100%;
    height: auto;
}

.service-info{
    width: 100%;
    padding: 0px 0px;
    align-content: center;
    justify-content: center;
}

.block8 h3{
    font-size: 1em;
    margin-top: 20px;
}

.block8 h1{
    padding: 0px 35px;
    text-align: center;
    font-size: 1.6em;
    margin: 10px 0px;
    line-height: 35px;
}

.block8 p{
    font-size: 0.9em;
    padding: 0px 10px;
    font-weight: normal;
    text-align: center;
}

.block9{
    align-items: center;
    flex-flow: column-reverse;
}

.list{
    width: 100%;
    border-radius: 9px;
}

.list h1{
    font-size: 1.4em;
    font-weight: bold;
    margin: 20px 0px 20px;
}

.list ul{
    padding: 0px 50px;
    font-size: .9em;
    line-height: 20px;
}

.list ul li{
    text-align: center;
    font-size: 1.2em;
}

.ima-cashbook{
    width: 100%;
    height: auto;
    border-radius: 9px;
    margin: 20px 0px;
}

/*CONTACT*/

.ima-signature{
    width: 100%;
}

.contact-info{
    width: 100%;
    padding: 0px;
}

.contact-info h1{
    font-size: 1.9em;
    margin-top: 40px;
}

.contact-info p{
    font-size: 0.8em;
    margin: -20px 10px 20px;
}

.map{
    margin-bottom: 30px;
}

iframe{
    height:300px;
}

.sub1 {
    margin: 20px 0px;
}

.button-call3, .button-call2, .button-call{
    width: 33%;
}

/* COTIZADOR */

#big-container{width: 100%;}
.block1Cot{
    width: 95%;
    margin: 5px auto;    
}
.block1CotShw h1 {
    font-size: 3vw;
}
.block2Container {overflow: hidden;}
.data-content-options{width: calc(95% - 40px);}
.block2Text { margin: auto;}
.block2Text p { font-size: 1em; }
.block2DataClient {flex-direction: column;}
.block2Element { width: 100%; margin: 5px 0px;}

.fixContainer {overflow: auto;}
.fixedData {width: auto;;}
.dataColumn p { padding: 5px 15px; }


.contentHeader p { font-size: 4vw ;}

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

.dataColumn p span {color:#55BA5E ; }
.hide-on-mobile{ display: none;}