@charset "utf-8";
/* CSS Document */

/* FONTS */

@font-face {
    font-family: 'Fuente';
    src: URL('..//fonts/Esphimere Light.otf') format('truetype');
  }
  
* {
    font-family:"Fuente",'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* # COLLAPSIBLE */

  /* Style the button that is used to open and close the collapsible content */

  .collapsible {
    display: none;
    background-color: #eee;
    background-color:rgba(127, 127, 127, 0.3);
    border-radius: 0px 10px 10px 0px;
    border-radius: 0px 0px 0px 0px;
    color: #444;
    color: rgba(211, 211, 211, 0.5);
    cursor: pointer;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    width: auto;
    border: none;
    text-align: left;
    outline: none;
    font-size: 2rem;
    margin: 0px;
    height: 50px;
    /*box-shadow: 3px 3px 15px 3px #00000050;*/
    -webkit-box-shadow: 0 0 5px rgb(81, 77, 73);
        box-shadow: 0 0 5px rgb(81, 77, 73);
    /*border-bottom: solid 1px  darkorange;*/
    font-family: "Smile";
    -webkit-backdrop-filter: blur(10px); /* Add this line first, it fixes blur for Safari*/
    backdrop-filter: blur(10px);  /* This line activates blur*/
    border: solid 1px lightgrey;
    z-index: 9998;
    color: lightgrey;
    text-shadow:
    -1px -1px 0 rgb(102, 86, 69),
    1px -1px 0 rgb(102, 86, 69),
    -1px 1px 0 rgb(102, 86, 69),
    1px 1px 0 rgb(102, 86, 69);
  }

/* Style Icon Normal */

  .collapsible:after {
    font-size: 1.7rem;
    /*content: '\02795';
    font-size: 13px;*/
    float: left;
    margin-left: 5px;
    color: lightgrey;
  }

/* Style Icon Active */

  .active:after {
    font-size: 1.7rem;
    /*content: '\02796';*/
    color: lightgrey;
  }

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active,
  .collapsible:hover {
    background-color: #ccc;
    background-color:black;
    background-color: #333;
  }

/* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0px;
    margin: 0px;
    display: none;
    overflow: hidden;
    width: 100%;
    z-index: 9999;
  }

  /* # Link Style */

  a[href^="tel"] {
    color: inherit; /* Inherit text color of parent element. */
    text-decoration: none; /* Remove underline. */
    /* Additional css `propery: value;` pairs here */
  }

  a {
    color: lightgrey;
    text-decoration: none;
  }

/* # MENU */

    /* Navigation Bar Large Show */
    
      #nav-bar-large {
        display: block;
      }
      
    /* Navigation Bar (container for Menu) */

      .navigation-bar {
        position: fixed;
        top:26px;
        display: flex;
        justify-content: space-between;
        z-index:9999;
        width:  100%;
        /*max-width:  974px;*/
        margin-left: auto;
        margin-right: auto;
        background-color: darkorange;
        background-color:rgba(0, 0, 0, 0.5);
        background-color:transparent;
        background-color: rgb(169, 135, 100);
        /*background-image: url('../images/Rayas.jpeg');*/
        /*box-shadow: 3px 3px 15px 3px #00000050;*/
        border-bottom: solid 1px black;
        border-bottom: solid 1px  darkorange;
        border-bottom: solid 0px  lightgray;
        /*background-color:#CFFF00;*/
        /*backdrop-filter: blur(20px);
        background: #a0a0a015; /* I found this color of blur to work for me better*/
      }

      .language {
        z-index:9998;
        position: fixed;
        height: 26px;
        width: 100%;
        background-color: lightgrey;
        text-align: right;
        padding-top: 5px;
        margin: 0px;
        padding: 0px;
      }
      
      .image-language {
        height: 16px;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 10px;
        margin-right: 20px;
      }

      .image-language-left {
        float: left;
        height: 16px;
        margin-top: 5px;
        margin-bottom: 10px;
        margin-left: 50px;
        margin-right: 5px;
        color: rgb(157, 126, 94);
        color: rgb(102, 86, 69);
      }

      .p-top {
        float: left;
        height: 16px;
        margin-top: 3px;
        margin-right: 5px;
        color: rgb(157, 126, 94);
        color: rgb(102, 86, 69);
      }

      .ul-left {
        float: left;
      }

      .li-left{
        float: left;
      }

      .contact-bar-left {
        z-index:9999;
        position: fixed;
        height: 26px;
      }

      .mail-top {
        z-index:9999;
        position: fixed;
        top:0px;
        color: rgb(157, 126, 94);
        color: rgb(81, 77, 73);
        padding: 0px;
      }

    /* Navbar container */
      .navbar {
        width: 100%;
        display: flex;
        overflow: hidden;
        /*background-color:tomato;*/
        padding: 5px;
      }

    /* Links inside the navbar */
      .navbar a {
        float: left;      
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-family: "Fuente";
        /*border: solid 1px  darkorange;*/
        border-radius: 10px;
        border-radius: 0px 10px 10px 0px;
        border-radius: 0px 0px 0px 0px;
      }

    /* Links inside the navbar */
      .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: red;
        background-color: #333;
        background-color: #505050;
        color: white;
        color: lightgray;
        text-decoration: underline;
      }

    /* Style Active Button */
      .buttonactive{
        background-color:rgb(0, 38, 71) ;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; 
        /*border-left: solid 5px  lightgray;*/
      }

    /* Style Unordered List (ul) */   
      .menu-lista {
        width:100%;
        font-size: 18px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-right: 10px;
        overflow: hidden;
      }
    
    /* Style Logo */

      .menu-logo {
        float: left;
        width: 400px;
        margin: auto;
        padding-left: 40px;
      }

      .menu-logo-collapsible{
        float: left;
        width: 40%;
        margin: auto;
        padding-left: 40px;
      }

      .image-logo {
        width: 100%;
        margin: auto;
      }

    /* Style List Item (li) */

      .menu-item {
        float: right;
        background-color: rgb(169, 135, 100);
        font-size: 1.5rem;
        border-radius: 10px;
        border-radius: 0px 10px 10px 0px;
        border-radius: 0px 0px 0px 0px;
        margin: 4px;
        border: solid 0px  darkorange;
        color: lightgrey;
      }

    /* Style List Item (li) Specific*/

      #idioma {
        float:right;
        background-color:black ;
        background-color:rgb(0, 38, 71) ;
        color: lightgrey;
        border: solid 1px  lightgrey;
      }

      #boton-PC {
        float:right;
        background-color:rgb(0, 35, 56);
        background-color:rgb(59, 25, 25);
        border: solid 1px  rgb(211, 211, 211);
        color: lightgrey;
      }

      #boton-PC-salir {
        background-color:rgb(0, 35, 56);
        background-color:rgb(59, 25, 25);
        border: solid 1px  rgb(211, 211, 211);
      }
    
@media (max-width: 779px) {

  /* # MENU */

  .top-element-left {
    display: none;
  }

  .collapsible {
    display: block;
    position: fixed;
    position: fixed;
    top: 36px;
    right: 15px;
    /*border-bottom: solid 1px  lightgray;*/
  }

  #nav-bar-large {
    display: none;
  }

  .content {
    float: left;
    margin-right: 5px;
  }

  .navigation-bar {
    position: fixed;
    top: 26px;
    display: block;
    width: 100%;
    background-color: transparent;
  }

  .navbar {
    background-color: transparent;
    /*border-radius: 10px;*/
  }

  .navbar a {
    padding: 14px 20px;
    margin-left: 0px;
    margin-right: 0px;
  }

  .menu-lista {
    width: 100%;
    background-color: transparent;
  }

  .menu-item {
    display: block;
    margin-right: 10px;
    box-shadow: 3px 3px 15px 3px #00000050;
    border: solid 1px lightgrey;
  }
  
  .logo-top {
    display: none;
  }

  .panel {
    padding-top: 0px;
  }

  #paellas {
    padding-top: 0px;
  }

  .language {
    position: static;
    text-align: left;

  }

  .image-language-left {
    margin-right: 20px;
    margin-left: 20px;
  }

  .p-top {
      font-size: 16px;
  }
}