@charset "utf-8";
a {
    text-decoration: none;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav a,
nav a:hover {
    color: inherit;
}

.fixedBar{
  position: fixed;
  top: 0;
  left:0;
  width: 100%;padding:21px;
  z-index:9999999;
  background: rgba(255,255,255,0.5)
}

.navbar .underline{border-bottom:3px solid}
.navbar .overline{border-top:3px solid;margin-top:-3px !important}
.navbar .doubleline{border-top:3px solid;border-bottom:3px solid;margin-top:-3px !important}

[data-animate-parent="bounce"] li:hover{animation: bounce 2s ease infinite;}
[data-animate-parent="flipV"] li:hover{transform: rotateX(360deg)}
[data-animate-parent="flipH"] li:hover{transform: rotateY(360deg);}
[data-animate-parent="gelatine"] li:hover{animation: gelatine 0.5s infinite;}
[data-animate-parent="hithere"] li:hover{animation: hithere 1s ease infinite;}
[data-animate-parent="grow"] li:hover{animation: grow 2s ease infinite;}
[data-animate-parent="pulse"] li:hover{animation: pulse 2s ease infinite;}

@keyframes pulse {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(0.8); }
  }
@keyframes grow {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
@keyframes hithere {
    30% { transform: scale(1.2); }
    40%, 60% { transform: rotate(-20deg) scale(1.2); }
    50% { transform: rotate(20deg) scale(1.2); }
    70% { transform: rotate(0deg) scale(1.2); }
    100% { transform: scale(1); }
  }
@keyframes bounce {
      70% { transform:translateY(0%); }
      80% { transform:translateY(-15%); }
      90% { transform:translateY(0%); }
      95% { transform:translateY(-7%); }
      97% { transform:translateY(0%); }
      99% { transform:translateY(-3%); }
      100% { transform:translateY(0); }
  }
@keyframes gelatine {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
  }



@media only screen and (min-width: 768px) {
    [data-style=""] .parent {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px;
        padding: 0 12px;
        width: fit-content;
    }
    [data-style=""] .children {
        display: block;
    }
    [data-style=""] .closeApp,
    [data-style=""] .menu-toggle {
        display: none !important;
    }
    [data-style=""] span .menu-toggle {
        display: none;
    }
    [data-style=""] .closeApp,
    [data-style=""] .menu-toggle {
        display: none !important;
    }
    [data-style="Dark"] .closeApp,
    [data-style="Dark"] .menu-toggle,
    [data-style="Light"] .closeApp,
    [data-style="Light"] .menu-toggle,
    [data-style="basicDark"] .closeApp,
    [data-style="basicDark"] .menu-toggle,
    [data-style="basicLight"] .closeApp,
    [data-style="basicLight"] .menu-toggle {
        display: none;
    }
    [data-style="Dark"] .parent,
    [data-style="Light"] .parent,
    [data-style="basicDark"] .parent,
    [data-style="basicLight"] .parent {
        display: inline-block;
        padding: 12px;
        vertical-align: top;
        transition: 1s;
        width: fit-content;
        margin: 0;
    }
    [data-style="Dark"] .children,
    [data-style="Light"] .children,
    [data-style="basicDark"] .children,
    [data-style="basicLight"] .children {
        position: absolute;
        margin-top: 12px;
        z-index: 99;
    }
    [data-style="Dark"] .children li,
    [data-style="Light"] .children li,
    [data-style="basicDark"] .children li,
    [data-style="basicLight"] .children li {
        padding: 12px;
        display: none;
    }
    [data-style="Dark"] .parent:hover .children li,
    [data-style="Light"] .parent:hover .children li,
    [data-style="basicDark"] .parent:hover .children li,
    [data-style="basicLight"] .parent:hover .children li {
        display: block;
    }
    [data-style="Dark"] a{
        color:#efefef
    }
    [data-style="Light"] a{
        color:#1e1e1e
    }
    [data-style="Dark"] a:hover{
        color:#ccc
    }
    [data-style="Light"] a:hover{
        color:#666
    }
    [data-style="Dark"] .children{
        background-color:#1e1e1e
    }
    [data-style="Light"] .children{
        background-color:#efefef
    }

    [data-style="basicDark"] .children li,
    [data-style="basicDark"] .parent {
        background: rgba(0, 0, 0, 0.2);
    }
    [data-style="basicDark"] .children li:hover,
    [data-style="basicDark"] .parent:hover {
        background: rgba(0, 0, 0, 0.4);
    }
    [data-style="basicLight"] .children li,
    [data-style="basicLight"] .parent {
        background: rgba(255, 255, 255, 0.6);
    }
    [data-style="basicLight"] .children li:hover,
    [data-style="basicLight"] .parent:hover {
        background: rgba(255, 255, 255, 0.8);
    }
    [data-style="appmenuDark"] > ul,
    [data-style="appmenu"] > ul,
    [data-style="mobile"] > ul {
        width: 100%;
        left: 0;
        text-align: center;
        font-size: 18px;
        margin-top: -5px;
        display: none;
        box-shadow: 0 3px 4px #666;
        max-height: 100%;
        overflow: auto;
    }
    [data-style="appmenuDark"] .menu-toggle,
    [data-style="appmenu"] .menu-toggle,
    [data-style="mobile"] .menu-toggle {
        font-size: 35px;
    }
    [data-style="appmenuDark"] .children,
    [data-style="appmenuDark"] .children:empty,
    [data-style="appmenuDark"] .closeApp,
    [data-style="appmenu"] .children,
    [data-style="appmenu"] .children:empty,
    [data-style="appmenu"] .closeApp,
    [data-style="mobile"] .children,
    [data-style="mobile"] .children:empty,
    [data-style="mobile"] .closeApp {
        display: none;
    }
    [data-style="appmenuDark"] li,
    [data-style="appmenu"] li,
    [data-style="mobile"] li {
        padding: 12px 12px 6px 12px;
        background: #efefef;
    }
    [data-style="appmenuDark"] .children,
    [data-style="appmenu"] .children,
    [data-style="mobile"] .children {
        border-bottom: 2px solid #ccc;
    }
    [data-style="appmenuDark"] .children li,
    [data-style="appmenu"] .children li,
    [data-style="mobile"] .children li {
        padding: 12px;
    }
    [data-style="mobile"] > ul {
        position: absolute;
    }
    [data-style="appmenuDark"] li {
        background: #1e1e1e;
        color: #efefef;
    }
    [data-style="lateral-d"] .menu-toggle::after,
    [data-style="lateral-i"] .menu-toggle::after {
        content: " menú";
    }
    [data-style="lateral-d"] .menu-toggle,
    [data-style="lateral-i"] .menu-toggle {
        display: block;
        font-size: 21px;
    }
    [data-style="lateral-d"] > ul,
    [data-style="lateral-i"] > ul {
        position: fixed;
        top: 0;
        height: 100vh;
        background: #efefef;
        margin-top: 0;
        width: 30%;
        font-size: 18px;
        z-index: 99999999999999999999999999999999999999999;
        transform: translateZ(10px);
    }
    [data-style="lateral-d"] .closeApp,
    [data-style="lateral-i"] .closeApp {
        cursor: pointer;display:block;
    }
    [data-style="lateral-d"] [type="search"],
    [data-style="lateral-i"] [type="search"] {
        width: 86% !important;
    }
    [data-style="lateral-d"] .menu-toggle {
        text-align: right;
    }
    [data-style="lateral-d"] > ul {
        right: -50%;
        clip-path: polygon(12% 0, 0 100%, 100% 100%, 100% 0);
        padding: 12px 3% 12px 12px;
        text-align: right;
    }
    [data-style="lateral-i"] .menu-toggle {
        text-align: left;
    }
    [data-style="lateral-i"] > ul {
        left: -50%;
        clip-path: polygon(0 0, 0 100%, 100% 100%, 88% 0);
        padding: 12px 12px 12px 3%;
    }
    [data-style^="lateral-"] li {
        padding: 5px;
    }
    [data-style^="lateral-"] .children {
        padding-left: 21px;
    }
}
@media only screen and (max-width: 768px) {
    [data-style=""] .parent {
        display: block;
        margin: 0 5px;
        padding: 0 12px;
        width: fit-content;
    }
    [data-style=""] .children {
        display: block;
        padding-left: 21px;
        padding-bottom: 12px;
    }
    [data-style=""] .closeApp,
    [data-style=""] .menu-toggle {
        display: none !important;
    }
    [data-style=""] span .menu-toggle {
        display: none;
    }
    [data-style=""] .closeApp,
    [data-style=""] .menu-toggle {
        display: none !important;
    }
    [data-style="basicDark"] .closeApp,
    [data-style="basicDark"] .menu-toggle,
    [data-style="basicLight"] .closeApp,
    [data-style="basicLight"] .menu-toggle {
        display: none;
    }
    [data-style="basicDark"] .parent,
    [data-style="basicLight"] .parent {
        display: block;
        padding: 12px;
        transition: 1s;
        width: 94%;
        margin: 0;
        text-align: center;
    }
    [data-style="basicDark"] .children,
    [data-style="basicLight"] .children {
        margin-top: 12px;
    }
    [data-style="basicDark"] .children li,
    [data-style="basicLight"] .children li {
        padding: 12px;
        display: none;
    }
    [data-style="basicDark"] .parent:hover .children li,
    [data-style="basicLight"] .parent:hover .children li {
        display: block;
    }
    [data-style="basicDark"] .parent {
        background: rgba(0, 0, 0, 0.2);
    }
    [data-style="basicLight"] .parent {
        background: rgba(255, 255, 255, 0.6);
    }
    [data-style="appmenuDark"] > ul,
    [data-style="appmenu"] > ul,
    [data-style="mobile"] > ul {
        width: 100%;
        left: 0;
        text-align: center;
        font-size: 18px;
        margin-top: -5px;
        display: none;
        box-shadow: 0 3px 4px #666;
        max-height: 100%;
        overflow: auto;
    }
    [data-style="appmenuDark"] .menu-toggle,
    [data-style="appmenu"] .menu-toggle,
    [data-style="mobile"] .menu-toggle {
        font-size: 35px;
    }
    [data-style="appmenuDark"] .children,
    [data-style="appmenuDark"] .children:empty,
    [data-style="appmenuDark"] .closeApp,
    [data-style="appmenu"] .children,
    [data-style="appmenu"] .children:empty,
    [data-style="appmenu"] .closeApp,
    [data-style="mobile"] .children,
    [data-style="mobile"] .children:empty,
    [data-style="mobile"] .closeApp {
        display: none;
    }
    [data-style="appmenuDark"] li,
    [data-style="appmenu"] li,
    [data-style="mobile"] li {
        padding: 12px 12px 6px 12px;
        background: #efefef;
    }
    [data-style="appmenuDark"] .children,
    [data-style="appmenu"] .children,
    [data-style="mobile"] .children {
        border-bottom: 2px solid #ccc;
    }
    [data-style="appmenuDark"] .children li,
    [data-style="appmenu"] .children li,
    [data-style="mobile"] .children li {
        padding: 12px;
    }
    [data-style="mobile"] > ul {
        position: absolute;
    }
    [data-style="appmenuDark"] li {
        background: #1e1e1e;
        color: #efefef;
    }
    [data-style="lateral-d"] .menu-toggle::after,
    [data-style="lateral-i"] .menu-toggle::after {
        content: " menú";
    }
    
    [data-style="lateral-d"] .menu-toggle,
    [data-style="lateral-i"] .menu-toggle {
        display: block;
        font-size: 21px;
    }
    [data-style="lateral-d"] > ul,
    [data-style="lateral-i"] > ul {
        position: fixed;
        top: 0;
        height: 100vh;
        background: #efefef;
        margin-top: 0;
        width: 80%;
        font-size: 18px;
        z-index:9999999999999999
    }
    [data-style="lateral-d"] .closeApp,
    [data-style="lateral-i"] .closeApp {
        cursor: pointer;
        padding: 12px;
        margin-bottom: 12px;
        display: block;
    }
    [data-style="lateral-d"] .menu-toggle {
        text-align: right;
    }
    [data-style="lateral-d"] > ul {
        right: -100%;
        clip-path: polygon(18% 0, 0 100%, 100% 100%, 100% 0);
        padding: 12px 3% 12px 12px;
        text-align: right;
    }
    [data-style="lateral-i"] .menu-toggle {
        text-align: left;
    }
    [data-style="lateral-i"] > ul {
        left: -100%;
        clip-path: polygon(0 0, 0 100%, 100% 100%, 82% 0);
        padding: 12px 12px 12px 3%;
    }
    [data-style^="lateral-"] li {
        padding: 8px;
    }
    [data-style^="lateral-i"] .children {
        padding-left: 8px;
    }
    [data-style^="lateral-d"] .children {
        padding-right: 8px;
    }
}