@media screen and (max-width: 768px) {
    body {
        padding-top: 91px;
    }
    header {
        position: fixed;
        background-color: black;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 99999999999;
    }
    #video-media {
        display: none;
    }
    #social-media {
        background: black;
        position:fixed;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-flow:row;
        justify-content: flex-end;
        align-items: center;    
    }
    #flag-icon { 
        width: 25px;
        height: auto;
        margin: 5px 25px 5px 25px;
    }
    #weather-icon {
        width: 25px;
        margin: 5px 25px 5px 25px;
    }
    #top-menu {
        position: none;
        background: black;
        border: none;
        left: none;
        right: none;
        top: 50px;
        left: 0;
        width: 100%;
        flex-direction: row;
        flex-flow: row;
        justify-content: space-between;
        margin-left:none;
        margin-right:none;
    }  

    #nav-logo {
        width: 100px;
        height:auto;
    }
    .nav-ul {
        position: fixed;
        top: 91px;
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 10px 0;
        align-items: center;
        background-color: rgb(42, 42, 42);
        text-transform: uppercase;
        height: calc(80% - 91px);
        overflow-y: auto;
        left: 100%;
        transition: left 0.3s;
    }
    .nav-li {
        line-height: 30px;
    }
    .nav-li:nth-child(1) {
        margin-left: 0;
    }
    .nav-toggle {
        display:block;
        color: var(--font-color-white);
    }
    .nav-menu_visible {
        left: 0%;
    }
    .nav-toggle:focus:not(:focus-visible) {
        outline: none;
    }
    /*---------------------------------banner-----------------------------*/
    #rbanner {
        display: block;
        position: relative;
    }
    #rbanner img {
        max-width: 100%;
        width: 100%;
        height: auto;
        vertical-align: middle;
    }
    #rbanner > span {
        position: absolute;
        top: 165px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        border: solid 3px var(--bg-color-aqua);
        border-radius: 35px;
        padding: 5px 5px 5px 5px;
        font-weight: bold;
        font-size: 20px;
        letter-spacing:3px;
        text-transform: uppercase;
        text-align: center;
        color: var(--font-color-white);
        cursor: pointer;
    }
    #rbanner > span > a {
        color: var(--font-color-white);
    }
    /************************************************************************/
    #inicio-main-2 {
        flex-direction: column;
    }
    #inicio-main-2-a {
      flex: 100%;
    }
    #inicio-main-2-a h3 {
        font-size: 80px;
    }
    #inicio-main-2-b {
        position: unset;
        flex: 100%;
    }
    #inicio-main-2-b img {
        position: unset;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }
    #inicio-main-2-b button {
        position: unset;
        left: 0;
        top: 0;
    }
    /************************************************************************/
    #inicio-main-3 > div > h4 {
        font-size:60px;
    }
    #inicio-main-3-a {
        flex: 50%;
    }
    #inicio-main-3-a div span {
        font-size:18px;
    }
    #inicio-main-3-b {
        flex: 50%;
    }
    #inicio-main-3-b div span {
        font-size:18px;
    }
    /************************************************************************/
    #inicio-main-4 {
        position: static;
        z-index: 9;
    }
    #titulo_tienda {
        margin: 0;
        padding: 0;
        background: var(--bg-color-orange);
        position: static;
        display: block;
    }
    #titulo_tienda > h1 {
        padding: 0;
        margin: 0 0 0 2%;
    }
    /************************************************************************/
    #titulo_tienda h1 {
        font-size:40px;
    }
    /************************************************************************/
    #inicio-main-5 {
        flex-direction: column;
    }
    #inicio-main-5-a {
        padding: 0;
    }
    #inicio-main-5-a h1 {
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 34px;
    }
    #inicio-main-5-a div {
        flex-direction: column;
        padding: 0;
        margin-bottom: 5%;
    }
    #inicio-main-5-a > div > a > img {
        width: 200px;
        height: auto;
        margin-left: 10%;
    }
    /*************************************************************************/
    #inicio-main-6 {
        flex-direction: column;
    }
    #inicio-main-6-a {
        flex: 100%;
    }
    #inicio-main-6-a-form {
        width: unset;
        margin-left: 0;
    }
    #inicio-main-6-b {
        flex: 100%;
    }
    /*************************************************************************/
    #inicio-main-8-b {
        flex-direction: column;
    }
    #inicio-main-8-container-form > form {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #inicio-main-8-container-form > form > input[type="text"] {
        width: 100%;
    }
    #inicio-main-8-container-form > form > button {
        width: 100%;
        text-align: center;
    }
    /*************************************************************************/
    #inicio-main-9-b {
        flex-direction: column;
    }

    /********************** Comunidad **************************/
    #header_image {
            display: no;
    }

    /********************************** galerias ********************************/
    #galeria_categorias_main {
        margin: 5% 2% 4% 2%;
    }
    #galeria_categorias_main > h1 {
        font-size: 48px;
    }
    #galeria_categorias_main > span {
        font-size: 16px;
    }
    #galeria_categorias_main > div {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:space-around;
    }
    .galery_column_categoria {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: .5rem;
        flex: 0 1 calc(50% - 1rem);
        margin-bottom: 3%;
        cursor: pointer;
    }
    .galery_column_categoria > a > img {
        width: 100%;
        border: none;
        border: solid 6px transparent; 
        border-radius: 15px;
    }
    .galery_column_categoria > a > span { 
        display: block;
        text-align: center;
        color: var(--bg-color-beige);
        font-weight: bold;
    }
    .galery_column_categoria > a > span:hover {
        color: var(--bg-color-orange);
    }
    #container_galerias {
        width: 100%;
        background-image: url(../img/sections_background_a.jpg);
        background-repeat:repeat-y;
        position: relative;
        overflow: auto;
    }
    #galeria_main {
        margin: 5% 2% 4% 2%;
    }
    #galeria_main > h1 {
        text-transform: uppercase;
        color: var(--font-color-orange);
        font-family: dabre;
        font-weight: normal;
        font-size: 58px;
    }
    #galeria_main > span {
        color: var(--font-color-white);
        font-size: 18px;
        text-align: center;
    }
    #galeria_main > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    #galeria_description > div > h3 {
        color: var(--bg-color-white);
        font-size: 26px;
    }
    #galeria_description > div > span {
        color: var(--bg-color-white);
    }
    #galeria_leftcontent {
        /* border: solid 1px red;
        flex: 80%;
        display: flex;
        flex-direction: row;
        flex-flow: row wrap;
        flex-wrap: wrap; */
        width: 100%;
    }
    .gallery {
        flex: 100%;
        display: flex;
        flex-direction: row;
        flex-flow: row wrap;
        flex-wrap: wrap;
        width: 100%;
    }
    .cap_btm {
        top:90%;
        background: none;
    }
    .galery_column_item {
        display: flex;
        flex-direction: column;
        margin: 15px;
        flex: 0 1 calc(50% - 30px);
        margin-bottom: 3%;
        cursor: pointer;
    }
    .galery_column_item > a > img {
        width: 100%;
        border: none;
        border: solid 6px transparent; 
        border-radius: 15px;
    }
    #galeria_rightcontent {
        flex: 100%;
        flex-direction: column;
    }
    #galeria_rightcontent > h2 {
        color: var(--font-color-beige);
    }
    #galeria_rightcontent > div {
        display: flex;
        flex-direction: row;
    }
    #galeria_rightcontent > div > h2 {
        color: var(--font-color-beige);
    }
    #galeria_rightcontent > div > ul {
        list-style-type: none;
    }
    /* #galeria_rightcontent > div > ul > li::before {
        content: "\2022";
        color: var(--font-color-beige);
        font-weight: bold; 
        display: inline-block; 
        width: 1em; 
        margin-left: -.1em; 
    } */
    #galeria_rightcontent > div > ul > li {
        border: solid 1px red;
        display: flex;
        flex-direction: column;
        flex: 33%;
    }
    #galeria_rightcontent > div > ul > li > a {
        line-height: 30px;
        font-weight: bold;
        font-size: 16px;
        color: var(--font-color-beige);
        text-decoration: none;
    }#galeria_rightcontent > div > ul > li > a:hover {
        color: var(--font-color-orange);
    }
    #galeria_rightcontent > div > ul > li > a > img {
        width: 80%;
    }

    /*************************************************************************/
    #footer-1 {
        flex-direction: column;
    }
    #footer-1-a {
        background: var(--bg-color-aqua);
        flex: 100%;
    }
    /* #footer-1-b {
        position: relative;
        background: var(--bg-color-white);
        flex: 100%;
    } */
    #footer-2 {
        flex-direction: column;
    }
    #footer-3 {
        flex-direction: column;
    }
    #footer-3 h1, h2, h3, h4, h5, h6 {
        padding-left: 35px;
        padding-top: 30px;
        padding-bottom: 5px;
    }
    #footer-3 ul {
        padding-left: 35px;
    }

    /*-------------------------------*/
    /*             modal
    /*-------------------------------*/
    .modal {
        width: 90%;
        z-index: 999999999999;
    }
    .modal h1 {
        font-size: 26px;
    }
    .modal div img {
        width: 120px;
    }
    /*********************************/
    .modal_con {
        width: 95%;
        z-index: 999999999999;
    }
    .modal_con > div {
        margin-top: 0;
        margin-bottom: 0;
        height: 100%;
    }
    /*********************************/
    .modal_cli {
        width: 95%;
        height: 95%;
        left: 50%; 
        z-index: 999999999999;
    }
    /********************************/
    .modal_tar {
        z-index: 999999999999;
    }
}
@media screen and (min-width: 1400px) {
    
    .modal_con {
        width: 45%;
        height: 60%;
    }
    .modal_cli {
        height: 65%;
    }

}