@import url(style.css);

/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
:root {
--bluedark: rgba(10,47,92, 1);
--blue: rgba(0,56,184,1);
--black: rgba(34,34,34, 1);
--violet: rgba(75,0,130, 1);
--gray: rgba(220,220,220, 1);
    }
    /*----------------------------------------*/
    /*------------ESTILOS GENERALES-----------*/
    /*----------------------------------------*/


@media(min-width:320px){
/*--------------------*/
/*-----SEARCH BOX-----*/
/*--------------------*/
.search-box{
width: 100%;
height: auto;
padding: 24px  16px 32px;
background: var(--black);
background-image: url(../img/serach-pattern.png);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
position: absolute;
top: 60px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
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;
}
.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(--blue);
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;
}

.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(--bluedark);
}
    /*---fin de @media---*/
    }
@media(min-width:480px){

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

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

    @media(min-width:640px){
    .search-box{
    padding: 5% 10%;
    }
    .search-form-box{
    width: 100%;
    }
    /*---fin de @media---*/
    }

    @media(min-width:720px){

    /*---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:1024px){
    #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:1280px){

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

    @media(min-width:1360px){

    .search-box{
    padding: 0 20% 24px 20%;
    }
    .close-search-box{
     top: 36px;
     right: 30px;
    }

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

    @media(min-width:1440px){

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

    @media(min-width:1600px){

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


    @media(min-width:1920px){


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