@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

:root {
    --darkColor: #0a1324;
    --lightColor: rgb(160, 160, 160);
    --white: rgba(255, 255, 255, 0.8);
    --primaryBackgroundColor: #9ea2a9;
    --primaryColor: #0a1324;
    --secondaryColor: #0a1324;
    --primaryBackgroundColorInverted: rgb(23, 23, 23);
    --primaryColorInverted: rgba(255, 255, 255, 0.8);
    --secondaryColorInverted: grey;
}
body.dark-theme {
    --primaryBackgroundColor: rgb(23, 23, 23);
    --primaryColor: rgba(255, 255, 255, 0.8);
    --secondaryColor: grey;
    --primaryBackgroundColorInverted: #9ea2a9;
    --primaryColorInverted: #0a1324;
    --secondaryColorInverted: #0a1324;
    --darkColor:#303030;
}

* {
    box-sizing: border-box;
}

body {
    /*background-image: linear-gradient(0deg, #000000 0%, #4e2f13 100%);*/
    background-color: var(--primaryBackgroundColor);
    font-family: "noto-sans",sans-serif/*'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif*/;
    margin: 0;
    overflow: overlay;
    font-size: 12px;
    color: var(--primaryColor);
    /*text-shadow: 2px 2px black;*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, .8) inset;
    transition: all .1s;
}
/*
body.dgrey {
    background: rgb(0,0,0);
    background: linear-gradient(354deg, rgba(0,0,0,1) 0%, rgba(56,56,56,1) 35%, rgba(17,33,36,1) 100%);
}
body.dblue {
    background: rgb(2,0,36);
    background: linear-gradient(354deg, rgba(2,0,36,1) 0%, rgba(13,14,75,1) 35%, rgba(17,33,36,1) 100%);
}
body.dgreen {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 11%, rgba(29,48,0,1) 23%, rgba(0,29,7,1) 100%);
}
*/
body.menuOpen,
body.loading,
body.lock-scroll {
    overflow: hidden;
}
body.loading .header-item--menu {
    display: none;
}
body.inset {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .8) inset;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

h2, span {
    color: var(--secondaryColor);
}

span {
    font-size: .7em;
}

a, a:visited {
    color: var(--secondaryColor);
    text-decoration: none;
    text-shadow: none;
    /*font-style: italic*/;
}
a:hover {
    text-decoration: underline;
}

button.primary {
    padding: 20px 30px;
    border-radius: 20px;
    background-color: #131c2d;
    border: none;
    color: var(--white);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    transition: all .1s;
    text-transform: uppercase;
}
button.primary:not(:disabled):hover {
    cursor: pointer;
    box-shadow: none;
    background-color: #131c2d;
}
button.primary:disabled {
    background-color: grey;
}
button.primary:disabled,
button.secondary:disabled {
    box-shadow: 0 0 10px rgba(0, 0, 0, .6) inset;
}
button.secondary {
    padding: 20px 30px;
    background-color: rgba(0, 0, 0, .1);
    border: none;
    color: var(--white);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    border-radius: 20px;
    transition: all .1s;

}
button.secondary:disabled {
    background-color: rgba(255, 255, 255, .3);
}
button.secondary:hover {
    cursor: pointer;
    text-decoration: underline;
    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    /* color: black; */
    background: rgba(255, 255, 255, .1);
}

/* width */
::-webkit-scrollbar-track
{
	background-color: transparent;
}

::-webkit-scrollbar
{
	width: 6px;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

.hide {
    display: none !important;
}

.logo-loading {
    display: none;
}
body.loading .logo-loading {
    display: block;
}
body.loading .logo-site {
    display: none;
}


.header {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 81px;
    padding: 20px -20px 20px 20px;
    color: var(--white);
    position: fixed;
    z-index: 999;
    top: 0;
    backdrop-filter: none;
    transition: all .2s;
}
body.inset .header {
    -webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.24); 
    box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.14);
}
body.loading .header,
body.loading .headerContainer {
    height: 100vh;
}
body.inset.fullview:not(.loading) .header,
body.inset.fullview:not(.loading) .iconMenu {
    top: -90px;
}


body.inset:not(.menuOpen) .header,
body.loading .header {
    /* -webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.24); 
    box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.14);
    
    background: rgba(255, 255, 255, 0.1); */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(10px);
}

.headerContainer {
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    width: 100%;
    height: 40px;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.header-items {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}


.headerLogo {
    /* background-image: url(../resources/world.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px;
    text-shadow: 2px 2px rgba(0, 0, 0, .7);
    position: relative; */
    /* padding: 20px;
    border-radius: 100%;
    background: hsla(19, 22%, 29%, 1);
    background: linear-gradient(90deg, hsla(19, 22%, 29%, 1) 0%, hsla(132, 42%, 31%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(19, 22%, 29%, 1) 0%, hsla(132, 42%, 31%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(19, 22%, 29%, 1) 0%, hsla(132, 42%, 31%, 1) 100%);
    box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.14); */
}

.headerLogo-link,
.headerLogo-link:visited {
    color: var(--white);
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
}

@media (max-width:1023px) { 
    .headerMenu {
        display: none;
    }
}

.headerMenu-list {
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 10px;
}

.headerMenu-list--item:hover {
    cursor: pointer;
    text-decoration: underline
}

.headerMenu-list--item-link,
.headerMenu-list--item-link:visited {
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: none;
}

.footer {
    background-color: var(--darkColor);
    color: var(--lightColor);
    padding: 20px;
    /*border-top-left-radius: 40px;
    border-top-right-radius: 40px;*/
    border: 1px solid rgba(255, 255, 255, .1);
    height: 95vh;
    padding-top: 50px;
    margin-top: 40px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}
body.menuOpen .footer,
body.loading .footer { opacity: 0; }

.footerContainer { padding-top: 60px; }

.footerMenu {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.footerLogo {
    color: white;
    padding: 20px;
}


.footerMenu-list {
    list-style-type: none;
    padding: 0;
    
}

.footerMenu-list--item {
    padding: 10px;
}

.footerMenu-list--item-link,
.footerMenu-list--item-link:visited {
    color: var(--lightColor);
    text-decoration: none;
    font-size: 10px;
}

.footerMenu-list--item-link:hover {
    color: white;
    text-decoration: underline;
}
.footerMenu-item--title a{
    color: var(--white);
}
.footerMenu-list--item-link a {
    color: var(--white);
}

.page-content {
    opacity: 1;
}
body.menuOpen .page-content,
body.loading .page-content {
    opacity: 0;
}
.page-content--item {
    padding: 20px;
}
.page-content--item.fullwidth {
    padding: 20px 0;
    border-radius: 0;
}
.page-content--item.halfwidth {
    padding: 20px 0;
    width: 50%;
    margin: auto;
}
.page-content--item.full {
    padding: 0;
}
.page-content--item:not(.noPadding) > div {
    padding: 20px !important;
}
.page-content--item:not(.noRadius) > div {
    border-radius: 20px;
}
.page-content--item:not(.noShadow) > div {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
}
.page-content--item.blur > div {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
}

.page-comingSoon {
    border-radius: 20px;
    max-width: 600px;
    margin: auto;
    display: flex;
}
.page-content--item.fullwidth .page-comingSoon {
    border-radius: 0;
}
.page-title {
    height: 81px;
    max-width: 20vw;
    margin-left: 20px;
    display: flex;
    align-items: center;
    font-weight: 900;
}
.onlyMenu {
    display: none;
}
body.menuOpen .page-title,
body.menuOpen .page-description {
    position: fixed;
    max-width: 25vw;
    z-index: 999;
}
body.menuOpen .onlyMenu {
    display: flex;
}
.page-title h1 {
    margin: 0;
    /*text-shadow: 2px 2px black*/;
}


.iconMenu {
    display: inline-block;
    cursor: pointer;
    position: fixed;
    z-index:999;
    right: 20px;
    top: 20px;
    opacity: 1;
    transition: all .2s;
}
body.loading .iconMenu {
    opacity: 0;
}

.iconMenuBar {
    width: 35px;
    height: 5px;
    background-color: grey;
    margin: 6px 0;
    transition: 0.4s;
    border-radius: 20px;
}
body.menuOpen .iconMenuBar {
    background-color: white;
}

body.menuOpen .iconMenuBar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

body.menuOpen .iconMenuBar2 {opacity: 0;}

body.menuOpen .iconMenuBar3 {
    transform: translate(0, -11px) rotate(45deg);
}
body:not(.menuOpen) .iconMenuBar {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
}
.iconMenu:hover .iconMenuBar {
    box-shadow: none;
}

.mobileMenu {  
    position: fixed;
    height: 100%;
    width: 65vw;
    top: 0;
    background-color: var(--darkColor);
    color: var(--lightColor);
    right: -100vw;
    transition: right .4s;
    z-index: 998;
    padding: 0;
}

body.menuOpen .mobileMenu {
    display: block;
    right: 0;
    box-shadow: -2px -2px 15px rgba(0, 0, 0, .6);
}

.mobileMenu-header {
    height: 81px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mobileMenu-header--logo {
    padding: 20px;
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px;
}
.mobileMenu-list {
    list-style-type: none;
    padding: 0;
    overflow-y: scroll;
    height: calc(100vh - 81px);
    display: flex;
    flex-direction: column;
    margin-top: 0px;
}
.mobileMenu-list--item {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.mobileMenu-list--item-link,
.mobileMenu-list--item-link:visited {
    padding: 20px 0;
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.mobileMenu-list--item-link:hover {
    text-decoration: underline;
}
@media (max-width:480px)  { 
    /* smartphones, Android phones, landscape iPhone */ 
    body {
        font-size: 12px;
    }
    .mobileMenu { width: 100vw; }
    .page-title {
        padding-top: 100px;
        text-align: center;
        max-width: unset;
        justify-content: center;
        margin-left: 0;
    }
    body.menuOpen .page-title,
    body.menuOpen .page-title,
    body.menuOpen .page-description { opacity: 0 }
}
@media (min-width:600px)  { 
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
    .page-content {
        margin: auto;
    }
    .page-content--item.halfwidthDesktop {
        padding: 20px 0;
        width: 50%;
        margin: auto;
    }
}

@media (min-width:1024px) { 
    /* big landscape tablets, laptops, and desktops */ 
    body.menuOpen {
        overflow: auto;
    }
    .header {
        opacity: .5;
    }
    .header:hover,
    body.loading .header {
        opacity: 1;
        background-color: rgba(255, 255, 255, .1);
    }
    .header-items {
        justify-content: space-evenly;
    }
    .mobileMenu {
        display: none !important;
    }
    .iconMenu {
        display: none;
    }
    .page-title.sticky h1 {
        position: relative;
    }
    .page-description {
        max-width: unset;
    }

    
    .cookie-banner.active {
        bottom: 20px !important;
        width: unset; 
        border-radius: 20px;
    }
}
@media (min-width:1441px) { 
    /* large screens */ 
    .container,
    .container-centered {
        max-width: 1440px;
    }

    .container-centered {
        margin: auto;
    }
}
@media (min-width:1621px) { 
    /* extra large screens */ 
    .header-items {
        justify-content: space-around;
    }
    .page-content--item.fullwidth {
        max-width: 100vw;
    }
}

/* Components */
.not-found {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
}
.not-found--title { text-align: center }
.not-found--list { list-style-type: none }

/* COMPONENTS */
/* cookieBanner */
.cookie-banner {
    position: fixed;
    z-index: 999;
    bottom: -100vh;
    left: 50%;
    transform: translateX(-50%);
    -webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.24);
    box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.14);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    color: white;
    transition: all 1s;
    width: 100%;
}
.cookie-banner--content { 
    position: relative;
    margin: 0 20px;
}
.cookie-banner--accept {
    margin-right: 20px;
}
.cookie-banner.active {
    bottom: 0;
}
.cookie-banner--close {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    border-radius: 100%;
    padding: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cookie-banner--close:hover {
    cursor: pointer;
    text-shadow: 2px 2px rgba(0, 0, 0, .6);
}
/* cookiePolicy */
.cookie-policy--list-item {
    list-style-type: none;
}
.cookie-policy--list-item-update {
    padding: 20px;
}
.cookie-policy--container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    background:url(/clientlibs/resources/earth.jpg);
    background-size:cover;
    border-radius:50%;
    width:40px;
    height:40px;
    position: relative;
    animation: movimiento 5s linear 0s infinite;
    box-shadow: 0px 0px 10px black inset;
    border:1px solid black;
    /* transform:rotateX(6deg) rotateY(6deg) rotateZ(6deg); */
}
body.loading .logo {
    animation: movimiento 1s linear 0s infinite;
}
body.inset .header .logo::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 2px;
    background: rgba(0, 0, 0, .4);
    left: 0;
    border-radius: 100%;
    margin: auto;
    left: 50%;
    transform: translateX(-50%)/* rotateZ(-6deg)*/;
    bottom: -7px;
}
.logo-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateZ(6deg);
    text-shadow: 2px 2px black;
    text-align: center;
}

@keyframes movimiento {
    0% { background-position:0 0 }
    100% { background-position:355px 0 }
  }
  
  @keyframes stars {
    0% { background-position:0 0 }
    100% { background-position:0 100% }
  }

.page-description {
    padding: 20px 20px 0;
    position: relative;
    transition: width .2s;
}
body.menuOpen .page-description {
    text-align: center;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    overflow-x: visible;
    font-size: 12px;
    margin-top: 81px;
}

/* Form */
.form-element--container {
    display: flex;
    width: 100%;
    list-style-type: none;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
}
.form-field {
    flex: 1 1 20px;
    position: relative;
    padding-top: 20px;
    transition: all .2s;
}
.form-field.checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 20px;
}
.form-field--checkbox-disabled {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.form-field.checkbox .form-field--input.disabled {
    opacity: 0;
    pointer-events: none;
}

.form-field .form-field--label-container {
    flex-direction: column;
    height: 100%;
    pointer-events: none;
}

.form-field .form-field--label-container a {
    pointer-events: all;
}
.form-field .form-field--input-container {
    height: 100%;
}
.form-field .form-field--label-container {
    text-shadow: none;
}
.form-field:not(.checkbox) .form-field--label-container {
    position: absolute;
    left: 20px;
    transition: all .2s;
    transform: translate(-20px, -20px);
}
.form-field.error:not(.typing,.ckeckbox) .form-field--label-container {
    color: darkred !important;
    text-shadow: none;
}
.form-field.valid:not(.typing,.checkbox) .form-field--label-container {
    color: darkgreen !important;
}
.form-field.checkbox .form-field--label-container {
    flex-grow: 1;
}
.form-field.checkbox .form-field--input-container {
    flex-grow: 0;
}

.form-field.not-focus:not(.checkbox) .form-field--label-container {
    color: black;
    text-shadow: none;
    pointer-events: none;
    transform: none;
}
.form-elements .array {
    flex: 1 1 20px;
}

.form-field.typing:not(.checkbox) .form-field--item-description,
.form-field.error:not(.checkbox,.typing) .form-field--item-description,
.form-field.valid:not(.checkbox,.typing) .form-field--item-description {
    display: none;
}


.form-field.checkbox .form-field--input {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .6);
}
.form-field.checkbox:not(.error) .form-field--input:checked {
    box-shadow: none;
}

label.checkbox-container {
    display: block;
    width: 60px;
    height: 30px;
    position: relative;
    cursor: pointer;
}
label.checkbox-container input {
    opacity: 0;
    width: 0;
    height: 0;
}
label.checkbox-container .checkbox-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: grey;
    box-shadow: 0 0 5px rgba(0, 0, 0, .6) inset;
    border-radius: 20px;
}
label.checkbox-container input:checked + .checkbox-item {
    background: green;
}
.form-field.error label.checkbox-container .checkbox-item {
    background: darkred;
}
label.checkbox-container input + .checkbox-item::before {
    content: "";
    position: absolute;
    background: white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .6);
    top: 5px;
    left: 5px;
    transition: all .3s;
}
label.checkbox-container input:checked + .checkbox-item::before {
    transform: translateX(30px);
}
.form-field.checkbox.disabled .checkbox-container {
    opacity: 0;
}
.form-field.checkbox.disabled .form-field--input-container {
    position: relative;
}




.form-field.error .form-field--input {
    border: 1px solid darkred;
}
.form-field.valid .form-field--input {
    border: 1px solid darkgreen;
}
.form-field.error:not(.typing) .form-field--input {
    color:darkred;
}
.form-field.typing .form-field--label {
    color: darkgrey;
    text-shadow: none;
}
.form-field.typing .form-field--input,
.form-field.valid:not(.typing) .form-field--input {
    background: white;
}
.form-field.valid:not(.typing) .form-field--input {
    color:darkgreen;
    box-shadow: none;
}
.form-field--input {
    width: 100%;
    padding: 20px 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6) inset;
    transition: all .2s;
    background: darkgray;
    border: 1px solid transparent;
}
.form-field--input:focus {
    box-shadow: none;
}
.form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.form-feedback {
    position: fixed;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    top: 100px;
    width: 50%;
    margin: auto;
}
.form-feedback--item {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    backdrop-filter: blur(15px);
}
.form-feedback--item {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    color: black;
    text-shadow: none;
}
.form-feedback--item.success {
    background: rgba(0, 255, 0, .8);
}
.form-feedback--item.error {
    background: rgba(255, 0, 0, .8);
}
.form-feedback--close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: black;
    text-shadow: none;
}
.form-feedback--close:hover {
    cursor: pointer;
}
.form-field .error-msg {
    position: absolute;
    bottom: 0;
    padding: 5px;
    background: rgb(121,0,0);
    background: linear-gradient(180deg, rgba(121,0,0,1) 25%, rgba(91,0,0,1) 100%);
    width: 100%;
    display: flex;
    box-sizing: border-box;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    backdrop-filter: blur(20px);
    box-shadow: 0 -2px 1px rgba(0, 0, 0, .3);
    max-height: calc(100% - 40px);
    font-size: 12px;
    overflow-y: auto;
    text-shadow: none;
    height: 0;
    opacity: 0;
    transition: all .2s;
    pointer-events: none;
}
.form-field.error-details .error-msg {
    height: 100% !important;
    opacity: 1 !important;
}

.step {
    display: none;
}
.step.current {
    display: block;
}







/* Page Carousel */
.carousel {
    text-shadow: none;
    position: relative;
    overflow: hidden;
}

.carousel-content {
    overflow: hidden;
}

.slides {
    display: flex;
    transform: translateX(0);
    transition: all .5s;
}
.carousel.sliding .slides {
    /* margin: 20px; */
}
.carousel .slide {
    width: 100vw;
    height: 65vh;
    flex: 1 0 100%;
    background-color: var(--secondaryColor)/*darkgrey*/;
    color: var(--primaryColorInverted);
    box-shadow: none;
    transition: all .2s;
    /* padding: 20px; */
    position: relative;
    transition: all .2s;
}
.slide-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.carousel.sliding .slide {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, .4) inset;
    transition: all .2s;
}
.slide-title {
    font-size: 30px;
    text-align: left;
    transform: unset;
    /* transition: tran .2s ease; */
}
.carousel.sliding .slide-title {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .6);
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    z-index: 1;
}
.slide-subtitle {
    font-size: 20px;
    color: var(--secondaryColorInverted);
}
.slide-cta {
    margin-top: 20px
}
.slide-subtitle,
.slide-cta {
    opacity: 1;
    transition: all .3s;
}
.carousel.sliding .slide-subtitle,
.carousel.sliding .slide-cta {
    opacity: 0;
}
.carousel-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.carousel-index {
    border-radius: 100%;
    background-color: rgba(0, 0, 0, .6);
    backdrop-filter: blur(10px);
    border: none;
    color: black;
    padding: 2px;
    /* width: 20px;
    height: 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 900;
}
.carousel:not(.sliding) .carousel-index.paused {
    background: grey !important;
}
.carousel.sliding .carousel-index.paused {
    background: white !important;
}
.carousel-index--text {
    background: grey;
    width: 15px;
    height: 15px;
    padding: 10px;
    border-radius: 50%;
    backdrop-filter: blur(30px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .5) inset;
    transition: all .2s;
}
.carousel-index.paused .carousel-index--text {
    box-shadow: none;
}
.carousel.sliding .carousel-index--text {
    box-shadow: none;
    background: white;
}

.carousel-navigation--container {
    position: relative;
}
.carousel-navigation {
    position: absolute;
    bottom: -100px;
    left: 20px;
    display: flex;
    gap: 10px;
    pointer-events: none;
    transition: all .5s cubic-bezier(0.4, 0, 1, 1);
}
.carousel-navigation.enabled {
    bottom: 20px;
    left: 20px;
    pointer-events: all;
}
button.carousel-navigation--btn {
    border-radius: 50%;
    border: 1px solid black;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(20px);
    color: white;
    padding: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}




.coming-soon {
    padding: 180px 50px 100px;
    background-color: #b17e4a;
}




/* LIST COMPONENT */
ul.item-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
li.item {
    list-style-type: none;
    padding: 20px;
    flex: 1 0 50%;
}
.search-container {
    margin: 0 20px;
}
.search-container .form-field {
    padding-top: 0;
}
form#search--form {
    display: flex;
    align-items: center;
    gap: 20px;
}