@charset "utf-8";

@font-face {
  font-family: 'Jaldi', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Jaldi&display=swap');}
@font-face {
font-family: 'Nunito Sans', sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet')};

@font-face {
font-family: 'Nunito Sans', sans-serif;
scr: url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@700&display=swap');}

#ctn-bars-search{
    position: fixed;
    top: -90px;
    width: 81.85%;
    background: rgba(43, 57, 56, 0.5);
    padding: 20px;
    z-index: 1;
    transition: all 600ms;
}

#ctn-bars-search input{
    display: block;
    width: 85%;
    margin: auto;
    padding: 10px;
    outline: 0;
    font-size: 1em;
    font-style: normal;
    color: #007b5f;
    font-weight: lighter;

}

#box-search{
    position: fixed;
    top: 294px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    background: #fff;
    z-index: 8;
    overflow: hidden;
    display: none;
}

#box-search li a{
    display: block;
    width: 80%;
    color: #777777;
    padding: 12px 20px;
    margin: auto;
    font-size: 1em;
    font-style: normal;
    color: #007b5f;
    font-weight: lighter;
    text-decoration-line: none;}

#box-search li a:hover{
    background: #f3f3f3;
    color: #ff5d62;
}

#cover-ctn-search{
    width: 100%;
    height: 100%;
    position: fixed;
    /*background:  rgba(43, 57, 56, 0.5);*/
    background-color: transparent;
    z-index: 1;
    display: none;
    left: 0;
    margin-top: -259px;
}

#ctn-bars-search2{
    position: fixed;
    top: -90px;
    width: 90.85%;
    background: rgba(43, 57, 56, 0.5);
    padding: 20px;
    z-index: 1;
    transition: all 600ms;
    visibility: hidden;
}

#ctn-bars-search2 input{
    display: block;
    width: 85%;
    margin: auto;
    padding: 10px;
    outline: 0;
    font-size: 1em;
    font-style: normal;
    color: #007b5f;
    font-weight: lighter;
    background-color: #ffffff;

}

#box-search2{
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    background: #fff;
    z-index: 8;
    overflow: hidden;
    display: none;
}

#box-search2 li a{
    display: block;
    width: 80%;
    color: #777777;
    padding: 12px 20px;
    margin: auto;
    font-size: 1em;
    font-style: normal;
    color: #007b5f;
    font-weight: lighter;
    text-decoration-line: none;}

#box-search2 li a:hover{
    background: #f3f3f3;
    color: #ff5d62;
}

#cover-ctn-search2{
    width: 100%;
    height: 100%;
    position: fixed;
    /*background:  rgba(43, 57, 56, 0.5);*/
    background-color: transparent;
    z-index: 1;
    display: none;
    left: 0;
    margin-top: -259px;
    visibility: hidden;
}


@media screen and (max-width: 1000px){

    #ctn-bars-search{width: 91%;}

    #box-search{width: 95%;}
}

@media screen and (max-width: 900px){

    #ctn-bars-search{width: 90.5%;}
}

@media screen and (max-width: 800px){

    #ctn-bars-search{width: 90%;}
}

@media screen and (max-width: 786px){

    #ctn-bars-search{display: none;}

    #cover-ctn-search {visibility: hidden;}

}

@media screen and (max-width: 768px){

    #ctn-bars-search2{visibility: visible;}

    #cover-ctn-search2 {
        margin-top: -391px;
        visibility: visible;}

}