/*
Theme Name:  Innovatech
Theme URI: http://wordpress.org/themes/innovatech
Author: @semioticags
Author URI: https://instagram.com/semioticags
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
date: technology, nets, firewalls,security,software, hardware, IT, IT services, IT solutions, IT consulting, IT support, IT management, IT infrastructure, IT systems, IT networks, IT security, IT operations, IT development, IT engineering, IT architecture, IT design, IT implementation, IT deployment, IT integration, IT testing, IT maintenance, IT monitoring, IT optimization, IT performance, IT scalability, IT reliability, IT availability, IT disaster recovery, IT business continuity, IT compliance, IT governance, IT risk management, IT project management, IT service management, IT change management, IT incident management, IT problem management, IT configuration management, IT asset management, IT service desk, IT help desk, IT support, IT knowledge management, IT documentation, IT training, IT education, IT certification, IT standards,
IT best practices, IT methodologies, IT frameworks, IT processes, IT tools, IT technologies,
Text Domain: Innovatech
*/
/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
:root {
--green: rgba(89, 187, 168, 1);
--greendark: rgba(1, 138, 136, 1);
--black: rgba(14, 28, 35, 1);
--grey: rgba(51, 55, 65, 1);
--ligthgray: rgba(166, 175, 177, 1);
--bruma:rgba(237, 239, 240, 1);
    }
@media(min-width:200px){
.contact-container{
width: 100%;
position: relative;
height: auto;
display: flex;
flex-direction:column-reverse;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
.contact-form-container{
width: 100%;
height: auto;
min-height: 200px;
padding: 16px;
background-color: white;
margin-bottom: 36px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 8px;
}
#contact-form-colorline-container-contact, #contact-form-colorline-container-green, #contact-form-colorline-container-darkgreen{
border-radius: 0px !important;
}
.contact-info-container{
width: 100%;
height: auto;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 24px;
}
.contact-image-box{
width: 100%;
margin: auto;
margin-bottom: 24px;
}
.contact-image-box img{
width: 100%;
}
.contact-info-container p{
margin-bottom: 12px;
}
.contact-info-container span{
display: flex;
align-items: flex-start;
color: var(--black);
}
#icon-ws-contact, #icon-instagram-contact{
font-size: 18px;
color: var(--greendark);
}
.contact-info-container span p, .contact-info-container span a{
font-size: 18px;
margin-left: 6px;
}
.contact-info-container span a{
color: var(--greendark);
text-decoration: none;
}
.contact-info-container span a:hover{
text-decoration: underline;
}
/*CONTACT FORM STYLES*/
.modulo-contacto{
width: 90%;
margin: auto;
position: relative;
padding-bottom: 56px;

}
.modulo-contacto h4{
text-align: left !important;
font-size:18px !important;
color: var(--green) !important;
}
/*formulario*/
.wpcf7-form{
    margin: 0;
    padding: 0;
    height: auto;
    padding-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    }
    .input-box{
    padding: 22px 16px  8px 16px;
    position: relative;
    margin-bottom: 12px;
    background-color: rgba(204, 204, 204, .1);
    border-bottom: 1px solid #ccc;
    height: auto;
    width: 100%;
    }
    .label-text{
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    padding: 0 4px;
    background-color: transparent;
    top: 16px;
    left: 16px;
    font-size: 1em;
    font-weight: 600;
    }
    .label-text-focus{
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    padding: 0 4px;
    left: 1em;
    top: 0;
    font-size: 1em;
    }
    .form-input{
    width: 100%;
    height: 24px;
    border-style: none;
    font-size: 1em;
    background-color: transparent;
    color: #359980;
    }
    .form-input:focus{
    outline: none;
    }
    #input-box-mensaje{
    border-bottom: none !important ;
    outline: none;
    padding-top: 40px;
    text-align: left;
    }
    #label-text-mensaje{
    padding: 12px 0;
    text-align: left;
    }
    .form-mensaje{
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    outline: none;
    font-family: 'lato', sans-serif;
    font-size: .875em;
    line-height: 1.125em;
    padding: 12px;
    font-weight: 400;
    border:1px solid #ccc;
    }
    .send-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    height: 100px;
    }
    .aceptacion-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    height: 32px
    }
    .aceptacion-check{
    width: 30px;
    height: 30px;
    padding: 10px 5px;
    }
    .aceptacion-link{
    padding: 0 10px ;

    }
    .aceptacion-link a{
    text-decoration: underline;
    font-size: .875em;
    }
    .input-send-box{
    position: relative;
    height: 60px;
    width: 160px;
    padding: 0;
    margin: auto;
    margin-top: 24px;
    border-radius: 36px;
    background-color: var(--green);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }
    .input-send-box:hover{
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    transition: 0.2s;

    }
    #icono-paper-contacto::after{
    content: "    Enviar";
    color: white;
    }
    #icono-paper-contacto{
    color: white;
    font-size: 1.375em;
    padding:  17px 14px ;
    width: 100%;
    height: 100%;
    position: absolute;
    }
    .input-send{
    position: relative;
    outline: none;
    border: none;
    background-color: transparent;
    width: 160px;
    height: 60px;
    color:transparent;
    }
    .input-send:hover{
    transition: .2s;
    cursor: pointer;
    }
    /*----CF7 message----*/
    div.wpcf7-validation-errors {
        background: #ffffcc;
        border: 1px solid #ffffcc;
        border-left: 6px solid #ffeb3b;
        color: #232122;
    }/*---cuando hay un error --*/
    div.wpcf7-response-output {
        margin: 2em 0;
        padding: 15px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    } /*---la caja de todos los textos --*/
    div.wpcf7-mail-sent-ng {
         background: #ffdddd;
        border: 1px solid #ffdddd;
        border-left: 6px solid #f44336;
        color: #232122;
    }/*---envio negado --*/
    div.wpcf7-mail-sent-ok {
        background: #ddffdd;
        border: 1px solid #ddffdd;
        border-left: 6px solid #4caf50;
        color: #232122;
    }/*---envio exitoso --*/
    .wpcf7-mail-sent-ok, .wpcf7-mail-sent-ng, .wpcf7-validation-errors, .wpcf7-response-output{
        font-family: 'Lato', sans-serif;
        color: #232122;
        font-size: 0.9em;
        }
    span.wpcf7-not-valid-tip {
       position: relative;
        top: 10px;
        color: #f44336;
    font-size: .9em;
    }








/*---fin de @media---*/
}
@media(min-width:400px){

/*---fin de @media---*/
}
@media(min-width:500px){
.contact-image-box{
width: 50%;
max-width: 280px;
margin: 0;
margin-bottom: 24px;
}

/*---fin de @media---*/
}
@media(min-width:600px){

/*---fin de @media---*/
}
@media(min-width:700px){

/*---fin de @media---*/
}
@media(min-width:800px){

/*---fin de @media---*/
}
@media(min-width:900px){
/*formulario*/
.input-send-box{
position: absolute;
right: 24px;
padding: 12px;
padding-top: 4px;
}
/*---fin de @media---*/



/*---fin de @media---*/
}
@media(min-width:1200px){

.contact-container{
flex-direction:row;
}
.contact-form-container{
width: 50%;
}
.contact-info-container{
width: 48%;
}

/*---fin de @media---*/
}
@media(min-width:1300px){
.contact-container{
padding: 36px;
padding-top: 24px;
}

#input-box-address, #input-box-mensaje{
width: 100%;
}
/*---fin de @media---*/
}
@media(min-width:1400px){

/*---fin de @media---*/
}
@media(min-width:1600px){


/*---fin de @media---*/
}
@media(min-width:1900px){

/*---fin de @media---*/
}