/*
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);
    }
    /*----------------------------------------*/
    /*------------ESTILOS GENERALES-----------*/
    /*----------------------------------------*/


    @media(min-width:200px){
/*--------------------*/
/*-----SEARCH BOX-----*/
/*--------------------*/
.search-box{
width: 100%;
height: auto;
padding: 24px  16px 32px;
background: #018A88;
background: linear-gradient(-45deg,rgba(1, 138, 136, 1) 0%, rgba(89, 187, 168, 1) 45%, rgba(67, 175, 160, 1) 70%, rgba(1, 138, 136, 1) 100%);
position: absolute;
top: 68px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
display: none;
}
.icon-search-box{
position: absolute;
padding: 6px 0;
top: 8px;
right: 48px;
width: 40px;
height: 40px;
}

#icon-search{
font-size: 24px;
color: var(--black);
position: 4;
top: 0;
}
#help{
display: none;
}
.close-search-box{
margin-bottom: 32px;
position: relative;
}
#icon-cancel-search{
font-size: 16px;
color: white;
position: absolute;
right: 0;
}
#icon-cancel-search:hover{
color: var(--black);
transition: .2s;
}
.search-box h2{
color: white;
font-size: 18px;
text-align: center;
font-weight: 400;
text-shadow: 2px 2px 2px rgba(0,0,0,.2);
margin-bottom: 24px;
font-family: 'Swavao', sans-serif;
}
.search-form-box{
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
padding: 6px;
border-radius: 30px;

}
#search-form{
width: 96%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
position: relative;

}
#input-search{
width: 86%;
border-style: none;
color: var(--black);
font-weight: 400;
font-size: 18px;
padding: 8px 16px;
border-radius: 30px;
}
#input-search:focus{
border:1px solid var(--bruma);
outline: none;

}
#icon-right-open{
padding: 8px;
}
.input-submit{
background-color: transparent;
padding: 8px;
position: absolute;
width: 36px;
height: 30px;
border-style: none;
right: 0;
cursor: pointer;
}
#icon-search-box{
color: var(--black);
}
.input-submit:hover{
cursor:pointer  ;
}
#icon-right-big-input{
border-style: none;
background-color: var(--black);
color: white;
padding: 8px 6px;
border-radius: 50%;
}
.input-submit:hover ~ #icon-right-big-input{
background-color: var(--darkgreen);
}
    /*---fin de @media---*/
    }
    @media(min-width:400px){

    /*---fin de @media---*/
    }
    @media(min-width:500px){
        .icon-search-box{
        padding: 14px 0;
        right: 60px;
        background-color: white;
        width: 200px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        padding: 12px 12px 12px 24px;
        border-radius: 30px;
        align-items: center;
        box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

        }

        .icon-search-box:hover{
        background-color: var(--bruma);
        cursor: pointer;
        }
        #help{
        display: block;
        }





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

    @media(min-width:600px){

    .search-box{
    padding: 5% 10%;
    }
    .search-form-box{
    width: 100%;
    }






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

    @media(min-width:700px){

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

    @media(min-width:800px){
    .search-box{
    padding: 5% 15%;
    }
    #input-search{
    width:90%;
    }
    /*---fin de @media---*/
    }

    @media(min-width:900px){

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

    @media(min-width:1000px){
    #input-search{
    width:92%;
    }
    .search-box h2{
    font-size: 24px;
    }
    #icon-cancel-search{
    font-size: 18px;

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

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

    @media(min-width:1200px){

    #input-search{
    width:93%;
    }
    /*---fin de @media---*/
    }

    @media(min-width:1300px){
    .icon-search-box{
    width: 250px;
    }
    .search-box{
    padding: 0 20% 24px 20%;
    }
    .close-search-box{
     top: 36px;
     right: 30px;
    }

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

    @media(min-width:1400px){

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

    @media(min-width:1600px){

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


    @media(min-width:1900px){


    #input-search{
    width:94%;
    }
    #icon-cancel-search{
    font-size: 21px;
    }
    .search-box h2{
    font-size: 28px;
    }
    /*---fin de @media---*/
    }