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


/* FONTS */

  @font-face {
    font-family: 'Fuente';
    src: URL('..//fonts/Esphimere Light.otf') format('truetype');
  }

  @font-face {
    font-family: 'Fuente-Bold';
    src: URL('..//fonts/Esphimere.otf') format('truetype');
  }

  @font-face {
    font-family: 'Fuente-Italic';
    src: URL('..//fonts/Esphimere Light Italic.otf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }

  @font-face {
    font-family: 'Smile';
    src: URL('..//fonts/Foodlist-Regular.ttf') format('truetype');
    /*src: URL('..//fonts/Postface.otf') format('truetype');*/
  }

  @font-face {
    font-family: 'Menu';
    src: URL('..//fonts/forgotten futurist rg.otf') format('truetype');
  }

  @font-face {
    font-family: 'Maestros';
    src: URL('..//fonts/Parisien Night Oblique.otf') format('truetype');
  }

/* FONTS */

/* ----------------- GLOBAL ----------------- */

  /* Style body */

    body {
      background-color: lightgray;
      margin: 0px;
      background-image: url('../images/crissXcross.png');
    }

    .panel-control-body 
    {
      /*background-color: rgb(0, 30, 30);*/
      background-image: url('../images/Rayas.jpg');
    }

  /* # Scrollbar Colors */

    body::-webkit-scrollbar {
      width: 1em;
    }

    body::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(255, 253, 253, 0.5);
      box-shadow: inset 0 0 6px rgba(50, 50, 50, 0.5);
      background-color: rgba(47, 46, 46, 1);
    }
    
    body::-webkit-scrollbar-thumb {
      background-color: rgba(100, 100, 100, 0.5);
      /*outline: 5px solid slategrey;*/
    }

  /* # Font */

    * {
      font-family: "Fuente", "Fuente-Italic", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    }

  /* # 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: darkorange;
      color: lightgrey;
      text-decoration: none;
    }

  /* Element Select */

    select {
      width: auto;
      text-align: center;
      text-align-last: center;
      -moz-text-align-last: center;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: transparent;
      /*background-color:lavender;*/
      background-color: white;
      background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position-x: 100%;
      background-position-y: 5px;
      border: 1px solid #dfdfdf;
      border-radius: 2px;
    }


/* ----------------- SPECIFIC ----------------- */

/* # 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;
      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: 65px;
      box-shadow: 3px 3px 15px 3px #00000050;
      /*border-bottom: solid 1px  darkorange;*/
      font-family: "Menu";
      -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  darkorange;
      z-index: 9998;
    }

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


  /* # MENU */

    /* Navigation Bar (container for Menu) */

      .navigation-bar {
        position: fixed;
        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-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*/
        -webkit-backdrop-filter: blur(10px); /* Add this line first, it fixes blur for Safari*/
        backdrop-filter: blur(10px);  /* This line activates blur*/
      }

    /* Navbar container */

      .navbar {
        width: 100%;
        display: flex;
        overflow: hidden;
        /*background-color:tomato;*/
      }

    /* Links inside the navbar */

      .navbar a {
        float: left;        
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-family: "Menu";
        /*border: solid 1px  darkorange;*/
        border-radius: 10px;
        border-radius: 0px 10px 10px 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: teal;
        background-color:black;
        background-color: #333;
        color: white;
        background-color: white;
        background-color: #CFFF00;
        background-color: lightgray;
        background-color: darkorange;
        background-color: lightgray;
        border-left: solid 15px  darkorange;
        color: black;
        color: darkorange;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; 
      }

    /* Style Unordered List (ul) */ 

      .menu-lista {
        width:100%;
        font-size: 18px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: "Menu";
      }
    
    /* Style List Item (li) */

      .menu-item {
        float: left;
        background-color: darkorange;
        background-color:black;
        font-size: 1.5rem;
        border-radius: 10px;
        border-radius: 0px 10px 10px 0px;
        margin: 4px;
        background-color: #404040;
        background-color:black;
        background-color:rgb(40, 40, 40);
        border: solid 1px  darkorange;
      }


    /* Style Menu 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);
      }
    
  
  /* TEXT */

    /* Style Paragraph */

      p {
        font-size: 1.2rem;
        padding-bottom: 10px;
        /*border-bottom: solid 1px;*/
        box-shadow: 0px 1px 0px darkorange;
        box-shadow: 0px 1px 0px rgb(137, 76, 0);
      }

    /* Style Paragraph Sentence Said */
      .frase {
        font-family: "Smile";
        font-size: 1.6rem;
        font-style: italic;
        color: darkorange;
        text-shadow: 1px 1px 0 #000;
      }

    /* Style Paragraph DamePaella */
      .dame-paella {
        font-family: "Smile";
        font-size: 1.4rem;
        font-style: italic;
        color: darkorange;
      }

    /* Style Paragraph Color Orange (span) */

      .texto-naranja {
        color: darkorange;
        text-shadow: 1px 1px 0 #000;
      }

      h1 {
        padding: 1%;
        margin: 0px;
        text-align: center;
        color: darkorange;
        vertical-align: baseline;
        font-family: "Smile";
        /*border-radius: 20px 20px 0px 0px;
        background-color: rgba(255, 255, 255, 0.15);*/
      }

      h2 {
        color: darkorange;
        text-shadow: 1px 1px 0 #000;
      }

      .titulo {
        font-size: 3rem;
        font-weight: bold;
        color: lightgray;
        color: darkorange;
        border-left: solid 20px lightgrey;
        border-left: solid 20px darkorange;
        text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
        background-color: rgba(255, 255, 255, 0.5);
        background-color: darkorange;
        background-color: rgba(211, 211, 211, 0.5);
        border-radius: 5px;
        border-radius: 0px 10px 10px 0px;
        text-align: left;
        align-content: baseline;
        font-family: "Menu";
        letter-spacing: 1.5;
        /*width: 50%;*/
        height: fit-content;
        display: none;
      }

      .maestros {
        float: right;
        clear: both;
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 4rem;
        font-weight: bold;
        color: lightgray;
        color: darkorange;
        color: lightgrey;
        border-left: solid 20px lightgrey;
        border-left: solid 20px rgba(255, 255, 255, 0);
        text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
        background-color: rgba(255, 255, 255, 0.5);
        background-color: darkorange;
        background-color: rgba(211, 211, 211, 0.5);
        background-color: transparent;
        border-radius: 5px;
        border-radius: 0px 10px 10px 0px;
        text-align: left;
        align-content: baseline;
        font-family: "Maestros";
        /*width: 50%;*/
        padding-left: 20px;
        padding-right: 20px;
        letter-spacing: 2px;
      }

  /* Style Divs (layout) */

  /* INDEX */
  
    #paellas {
      padding-top: 0px;
      margin: 0px;
      padding-top: 65px;
      padding-top: 0px;
      position: relative;
    }

    .bloque {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      justify-content: space-between;
      width: 96%;
      padding: 0px 1%;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 60px;
    }
     
    .bloque-index {
      display: flex;
      justify-content:center;
      width: 93%;    
      padding: 0px 1%;    
      margin-top: 20px;
      margin-bottom: 50px;
      margin-left: 2%;
      margin-right: 2%;
      /*box-shadow: 10px 10px 8px #888888;*/
      /*border: solid 1px lightgrey;*/     
    }

    #apartado {
      display: flex;
      padding-top: 80px;
      margin-bottom: 10px;
    }

    #apartado-index {
      padding-top: 20px;
      margin-bottom: 10px;
      float: left;
    }

    .bloque-izquierda {
      float: left;
      width: 50%;
      color: lightgray;
      padding: 5px 1%;
      margin-left: 10px;
      margin-right: 10px;
    }

    .bloque-derecha {
      float: right;
      width: 40%;
      color: lightgray;
      padding: 40px 1%;
      margin-left: 10px;
      margin-right: 10px;
    }

  /* INDEX */


  /* SERVICES */

    /*
    .bloque-servicios {
      display: flex;
      justify-content: center;
      width: 90%; 
      padding: 0px 1%; 
      margin-top: 20px;
      margin-bottom: 50px;
      margin-left: 5%;
      margin-right: 5%;
      box-shadow: 10px 10px 8px #888888;
      border: solid 1px;
    }
    */

    .servicios {
      font-family: 'Smile';
      font-size: 3rem;
      color: lightgray;
      text-align: left;
      color: darkorange;
    }
  
    .bloque-izquierda-servicios {
      float: left;
      width: 35%;  
      padding: 20px 1%; 
      margin-left: 10px;
      margin-right: 10px;
    }
  
    .bloque-derecha-servicios {
      float: right;
      width: 55%;  
      padding: 20px 1%;  
      margin-left: 10px;
      margin-right: 10px;
      color: lightgray; 
    }

    .titulo-servicios {
      float: right;
      width: 70%;
    }

    .titulo-servicios-icon {
      float: left;
      width: 20%;
      color: lightgray;
      margin-bottom: 20px;
    }

  /* SERVICES */


  /* GALLERY */

    .item {
      float: left;
      width: 30%;
      min-width: 240px;
      margin: 10px 0px;
      padding: 10px 1%;
      /*box-shadow: 10px 10px 8px #888888;*/
      /*border: solid 1px;*/
      color: lightgray;
      border-radius: 15px;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .imageContainer {
      position: relative;
      top: 0;
      left: 0;
    }

    .enlarge-image {
      position: fixed;
      top: 54%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      max-width: 80%;
      max-height: 80vh;
      margin: auto;
      display: none;
      /*background-color: black;*/
    }

    #image-enlarged {
      display: block;
      object-fit: contain;
      max-width: 100%;
      max-height: 80vh;
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 3px 3px 15px 3px #00000050;
      border: solid lightgray 3px;
      border-radius: 15px;
    }

    .image-event {
      position: relative;
      top: 0;
      left: 0;
      border-radius: 10px;
    }

    .logo-image {
      position: absolute;
      top: 2%;
      right: 2%;
      width: 35%;
      -webkit-filter: drop-shadow(5px 5px 5px #222);
      filter: drop-shadow(5px 5px 5px #222);
    }

    .logo-top {
      position: absolute;
      top: 12%;
      right: 2%;
      width: 24%;
    }

    .previous-button {
      z-index:9998;
      -webkit-appearence: none;
      -webkit-backdrop-filter: blur(10px); /* Add this line first, it fixes blur for Safari*/
      backdrop-filter: blur(10px);  /* This line activates blur*/
      position: absolute;
      top: 44%;
      left: 5px;
      padding: 15px 30px 17px 35px;
      background-color: darkorange;
      background-color:black;
      font-size: 2.2rem;
      border-radius: 10px;
      border-radius: 10px 0px 0px 10px;
      margin: 4px;
      background-color: #404040;
      background-color:black;
      background-color:rgba(40, 40, 40, 0);
      border: solid 1px  darkorange;
      color: lightgrey;
    }

    .next-button {
      z-index:9998;
      -webkit-appearence: none;
      -webkit-backdrop-filter: blur(10px); /* Add this line first, it fixes blur for Safari*/
      backdrop-filter: blur(10px);  /* This line activates blur*/
      position: absolute;
      top: 44%;
      right: 5px;
      padding: 15px 30px 17px 35px;
      background-color: darkorange;
      background-color:black;
      font-size: 2.2rem;
      border-radius: 10px;
      border-radius: 0px 10px 10px 0px;
      margin: 4px;
      background-color: #404040;
      background-color:black;
      background-color:rgba(40, 40, 40, 0);
      border: solid 1px  darkorange;
      color: lightgrey;
    }

  /* GALLERY */


  /* CONTACT */

  /* CONTACT */


  /* CONTROL PANEL */

    .bloque-control {
      display: flex;
      justify-content: space-evenly;
      width: 96%;
      padding: 0px 1%;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 60px;
    }

    .bloque-control-apartado {
      border: dashed 2px red;
      padding: 20px 0px;
      margin-bottom: 10px;
    }

    .select-image {
      -webkit-appearence: none;
      font-size: 1.2rem;
      display: block;
      margin: auto;
    }

    .save-image {
      font-size: 1.2rem;
      display: block;
      margin: auto;
    }
    
    #fileToUpload {
      -webkit-appearence: none;
      font-size: 1.2rem;
      width: 100%;
      display: block;
      margin: auto;
    }

    .text-field {
      width: 96%;
      font-size: 2em;
      background-color: transparent;
      padding: 1%;
      margin: 0px;
      text-align: center;
      color: darkorange;
      vertical-align: baseline;
      font-family: "Smile";
    }

    textarea {
      padding: 1%;
      width: 96%;
      font-size: 1.2em;
      background-color: transparent;
      color: white;
      box-shadow: 0px 1px 0px darkorange;
      box-shadow: 0px 1px 0px rgb(137, 76, 0);
    }

    input::file-selector-button {
      -webkit-appearence: none;
      font-family: "Fuente", "Fuente-Italic", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
      font-size: 1.2rem;
      color: black;
      background-color: lightgrey;
      border: thin solid grey;
      border-radius: 10px;
      height: 35px;
    }

    .dt-list-event {
      background-color: lightgray;
      font-size: 1.2rem;
      padding: 6px 10px;
      border: solid 2px darkorange;
    }

  /* Save Data */

    .codigo-sql {
      background-color: lightgrey;
      max-width: 80%;
      width: fit-content;
      padding: 10px;

      margin: auto;
      margin-bottom: 20px;
    }

  /* CONTROL PANEL */


  /* RESIDUOS */

    .logo {
      display: block;
      float: right;
      text-align: right;
    }

    label {
      font-size: 1.4rem;
    }

    .charla {}

    .panel {
      padding-top: 70px;
    }

    img {}

    .importante {}

    footer {
      z-index: 100;
      padding: 10px 10px;
      background-color: black;
      color: lightgray;
      position: fixed;
      bottom: 0px;
      width: calc(100% - 20px);
      display: flex;
      justify-content: space-between;
    }

    /* RESIDUOS */


@media (max-width: 779px)
{
  /* # COLLAPSIBLE */

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

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

    .content {
      position:fixed; top:70px;  right: 0;;
      position:fixed; top:10px;  right: 0;;
      width: auto; 
      margin-right: 5px;
    }

  /* # COLLAPSIBLE */


  /* # MENU 779px */

    .navigation-bar {
        position: static;
        box-shadow: 0px 0px 0px 0px #00000050;
        background-color: transparent;
        border-bottom: 0px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    
      .navbar {
        background-color: transparent;
        /*border-radius: 10px;*/
      }
    
      .navbar a {
        padding: 14px 20px;
        margin-left: 0px;
        margin-right: 0px;
        /*border-bottom: solid 2px black;*/
        /*border-bottom: solid 2px darkorange;*/
        border-radius: 10px;
        border-radius: 0px 10px 10px 0px;
        /*border: solid 1px  darkorange;*/
        /*border: solid 1px  lightgrey;*/
      }
    
      .navbar a:hover,
      .dropdown:hover .dropbtn {
        border-radius: 10px;
        border-radius: 0px 10px 10px 0px;
    
      }
    
      .menu-lista {
        justify-content: center;   
      }
    
      .menu-item {
        float: right;
        clear: both;
        font-size: 2rem;
        padding: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin: 3px;
        width: fit-content;
        border: solid 1px darkorange;
      }

      #idioma {
        float:right;   
      }

  /* # MENU 779px */


  /* TEXT */

    p {
      font-size: 1.5rem;
    }
  
    .titulo {
      display: block;
      margin-bottom: 30px;
      margin-top: 30px;
      padding-left: 10px;
      background-color: lightgray;
    }
  
    .maestros {
      position: absolute;
      bottom: 10px;
      left: 10px;
      font-size: 3rem;
      padding: 0px;
    }
  
    .frase {
      font-size: 1.8rem;
    }

  /* TEXT */


  /* INDEX 779px */

    #paellas {
      padding-top: 0px;
    }
    
    .logo-top {
      display: none;
    }

    .bloque {
      width: 94%;
      display: block;
      align-content: center;
      margin: auto;
      box-shadow: 0px 0px 0px;
      border: solid 0px;
      padding: 0px;
      margin-top: 20px;
    }

    .bloque {
      justify-content:center;
     }
  
    .bloque-index { 
      width: 100%;
      display: block;
      align-content: center;
      margin: auto;
      box-shadow: 0px 0px 0px;
      border: solid 0px;
      padding: 0px;
      margin-top: 20px;
    }

    #apartado-index {
      display: inline-block;
      width: 90%;
      margin: auto;
      justify-content: space-between;
      margin-left: 3%;
    }
  
    .bloque-izquierda {
      width: 90%;
      padding: 5%;
      margin: 0px;
      padding-top: 2%;
    }
  
    .bloque-derecha {
      width: 100%;
      padding: 0%;
      margin: 0px;
    }

  /* INDEX 779px */


  /* SERVICES 779px */

    .bloque-servicios {
      width: 100%;
      display: block;
      align-content: center;
      margin: auto;
      box-shadow: 0px 0px 0px;
      border: solid 0px;
      padding: 0px;
      margin-top: 20px;  
    }
  
    .bloque-izquierda-servicios {
      width: 90%;
      padding: 5%;
      margin: 0px; 
    }
  
    .bloque-derecha-servicios {
      width: 90%;
      padding: 5%;
      margin: 0px;
      padding-top: 2%;
    }

    .servicios {
      font-size: 2.4rem;
    }

  /* SERVICES 779px */


  /* GALLERY 779px */

    .item {
      width: 90%;
      padding: 10px 5%;
    }

  /* GALLERY 779px */


  /* CONTROL PANEL */

    .panel {
      padding-top: 0px;
    }

    .bloque-control {
      width: 96%;
      display: block;
      align-content: center;
      margin: auto;
      box-shadow: 0px 0px 0px;
      border: solid 0px;
      padding: 0px;
      margin-top: 20px;
     }
  
     .save-image {
      display: block;
      margin: auto;
      margin-top: 20px;;
      margin-bottom: 20px;;
      font-size: 1.2rem;
    }

    .dt-list-event {
      display: block;
      width: 90%;
      margin: auto;
    }

  /* CONTROL PANEL */
}


@media (min-width: 780px) and (max-width: 1024px)
{

  /* # MENU 780px - 1024px */

    .navigation-bar {
    /*position: static;*/
      width: 100%;
    }

  /* # MENU 780px - 1024px */

  /* INDEX 780px - 1024px */

    .bloque-index {
      width: 100%;
      display: block;
      margin-left: 0px;
      margin-right: 0px;
      box-shadow: 0px 0px 0px;
      /*border: solid 01px;*/
      padding: 0px;
    }
  
    .bloque-izquierda {
      width: 90%;
      padding: 5%;
      margin-left: 0px;
      margin-right: 0px;
      padding-top: 0px;
    }
  
    .bloque-derecha { 
      width: 90%;
      padding: 5%;
      margin-left: 0px;
      margin-right: 0px;
      padding-top: 0px;
    }

  /* INDEX 780px - 1024px */

   .bloque-izquierda-servicios {
    width: 55%;
    padding: 5%;
    margin-left: 0px;
    margin-right: 0px;
    margin: auto;
    padding-right: 40%;
    padding-bottom: 0px;

   }

   .bloque-derecha-servicios {

    width: 90%;
    padding: 5%;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 0px;

   }

  /* GALLERY 780px - 1024px */

  .logo-top {
    position: absolute;
    top: 80px;
    right: 2%;
    width: 24%;
  }

  .item {
    width: 42%;
    padding: 10px 3%;
  }

  /* GALLERY 780px - 1024px */


  p {
    font-size: 1.3rem;
  }

}


@media (max-width: 520px)
{
  /* TEXT */

    .maestros {
      position: absolute;
      bottom: 10px;
      left: 10px;
      font-size: 2rem;
      padding: 0px;
    }

  /* TEXT */
}


@media (min-width: 1800px) {
  
  /* TEXT */

  .maestros {
    font-size: 6rem;
  }

  p {
    font-size: 1.4rem;
  }

/* TEXT */

  /* GALLERY more 1800px */

    .bloque {
      width: 97%;
    }

    .item {
      width: 22%;
      padding: 10px 1%;
    }

  /* GALLERY 779px */
  }