.ci{
font-family: 'Urbanist';
font-style: normal;
font-weight: 300;
line-height: 1.3;
}
.ci-medium{
font-family: 'Urbanist';
font-style: normal;
font-weight: 500;
line-height: 1.1;
}
.ci-light{
font-family: 'Urbanist';
font-style: normal;
font-weight: 300;
}
.ci-bold, strong{
font-family: 'Urbanist';
font-style: normal;
font-weight: 800;
letter-spacing: 0.25px;
}
.ci-ital, i{
font-family: 'Xanh Mono';
font-weight: 400;
letter-spacing: -0.5px;
font-style: normal;
}
.non-ital{
font-style: normal !important;
}
.ci-ital-light{
font-family: 'Xanh Mono';
font-style: italic;
font-weight: 400;
}
.h-xsmall{
font-size: clamp(0.875rem, 0.9rem + 2.8vw, 1rem);
line-height: 1.2;
}
.h-small{
font-size: clamp(1rem, 1.1rem + 2.8vw, 1.25rem);
line-height: 1.2;
letter-spacing: 0.25px;
}
.h-medium{
font-size: clamp(1.4rem, 1.7rem + 2.8vw, 1.9rem);
line-height: 1.2;
font-weight: 400;
letter-spacing: 0.25px;
}
.h-medium em{
font-size: clamp(1.4rem, 1.7rem + 2.8vw, 2.25rem);
}
.h-large{
font-size: clamp(2.4rem, 1.7rem + 2.8vw, 3.8rem);
line-height: 1.2;
font-weight: 500;
}
.h-large em{
font-size: clamp(3rem, 1.7rem + 2.8vw, 3.985rem);
}
.h-xlarge{
font-size: clamp(3.8rem, 2.6rem + 4vw, 5.6rem);
line-height: 0.875;
}
.p-medium{
font-size: 16px;
}
.p-small{
font-size: 14px;
}
.p-x-small{
font-size: 12px;
}
.p-xxsmall{
font-size: 10px;
}
.p-xxxsmall{
font-size:9px;
} p, a, h1, h2, h3, h4, h5, h6, span, ul, li, figure{
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
font-family: 'Urbanist';
font-smoothing: auto;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: grayscale;
text-wrap-style: balance;
}
a{
cursor: var(--link-cursor);
}
p, figcaption{
font-family: 'Urbanist';
line-height: 1.3;
text-wrap: pretty;
font-weight: 400;
}
b{
font-family: 'Urbanist';
font-weight: 600;
}
em, em a{
font-family: 'Xanh Mono';
line-height: 1;
font-style: normal;
font-weight: 400;
}
li em a{
letter-spacing: -0.5px;
}
.entry-text-wrapper h1{
line-height: 0.9;
font-weight: 500;
letter-spacing: -1px;
}
ul.wp-block-list li {
list-style: katakana;
list-style-position: inside;
font-display: block;
font-family: 'Anonymous';
font-weight: 400;
font-size: 12px;
letter-spacing: -0.5px;
line-height: 1.3;
color: var(--lightgrey);
padding: var(--xxs-space-gap) 0px;
}
ul.wp-block-list li a{
font-family: 'Ngetic';
font-weight: lighter;
line-height: 1.3;
color: var(--accent);
font-size: 18px;
letter-spacing: 0.25px;
text-decoration: none;
}
ul.wp-block-list li a:hover{
text-decoration: underline !important;
}
figcaption{
font-size: 12px;
}
.hero-headline, .tease-headline{
width: fit-content;
}
.highlight-headline{
position: relative;
display: inline-block;
padding: var(--s-space-gap);
}
.tease-headline{
padding: var(--xs-space-gap) var(--s-space-gap);
border-radius: var(--border-radius-tile);
}
.tease-headline h5{
font-size: 0.75rem;
}
a:where(:not(.wp-element-button)) {
text-decoration: none !important;
}
figcaption{
color: var(--text-color);
}
svg#mailc2a{
max-width:100%;
}
.text-underline:hover h4, .text-underline:hover h5{
transition: var(--transition-300);
opacity: 1;
}
a.text-underline{
display: inline-block;
position: relative;
height: fit-content;
width: max-content;
overflow: hidden;
line-height: 1.3;
}
a.text-underline.has-color-accent::before, a.text-underline.has-color-accent::after{
--underline-color: var(--accent);
}
a.text-underline.has-color-comp::before, a.text-underline.has-color-comp::after{
--underline-color: var(--accent-comp);
}
a.text-underline.has-color-white::before, a.text-underline.has-color-white::after{
--underline-color: var(--white);
}
a.text-underline.has-color-black::before, a.text-underline.has-color-black::after{
--underline-color: var(--black);
}
a.text-underline.thin::before, a.text-underline.thin::after{
--linethick: 1px;
}
a.text-underline.medium::before, a.text-underline.medium::after{
--linethick: 2px;
bottom: -0px;  
}
a.text-underline.thick::before, a.text-underline.thick::after{
--linethick: 3px;
bottom: -1px;
}
a.text-underline::before{
--underline-color: #ffffff;
--linethick: 1px;
content: '';
display: block;
border-bottom: var(--linethick) solid var(--underline-color);
width: 100%;
left: 0;
position: absolute;
bottom: 1px;
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
transition-delay: 0.1s;
}
a.text-underline::after{
--underline-color: #ffffff;
--linethick: 1px;
content: '';
display: block;
border-bottom:  var(--linethick) solid var(--underline-color);
width: 100%;
left: 100%;
position: absolute;
bottom: 1px;
transform: translateX(-200%);
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
transition-delay: 0.2s;
}
a.text-underline:hover::before{
transform: translateX(100%);
}
a.text-underline:hover::after{
transform: translateX(-100%);
}
.dsg-wrapper a{
opacity: var(--opacity-fade-thick);
transition: var(--transition-300);
}
.dsg-wrapper a:hover{
opacity: 1;
}
ul#menu-helly-mobile-menu li.menu-item a{
font-size: 56px;
font-family: 'Urbanist';
font-weight: 400;
color: var(--white);
transition: all 0.3s var(--transition-belzier);
text-transform: inherit;
line-height: 1.05;
}
#helly-logo h1:hover, a#mobile-nav:hover p, ul#menu-helly-mobile-menu li.menu-item a:hover, .mobile-dsg-wrapper a:hover{
opacity: var(--opacity-fade-thick) !important;
}
ul.menu#menu-helly-menu li a, .dsg-wrapper a, .helly-copyright p, .slot-swiper-counter{
font-style: normal;
line-height: 100%;
font-weight: 500;
text-decoration: none;
display: inline-block;
opacity: var(--opacity-fade-thick);
transition: all 0.3s var(--transition-belzier);
font-family: 'Urbanist';
color: var(--white);
}
ul.menu#menu-helly-menu li a{
font-size: 14px;
}
a#hamburger{
outline: 1px solid #ffffff;
padding: 2px 4px;
line-height: 1.2;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
}
a#hamburger:hover{
background-color: var(--darkgrey);
outline: 1px solid var(--lightgrey);
}
a#hamburger.active{
outline: 1px solid var(--lightgrey);
background-color: var(--darkgrey);
}
.marquee-item a{
font-family: 'Xanh Mono';
font-style: normal;
font-weight: 600;
transition: all 0.3s var(--transition-belzier);
color: var(--white);
font-size: 14px;
}
.marquee-item:hover a{
color: var(--lightgrey);
}
#helly-logo h2 {
line-height: 0.9;
font-weight: 600;
text-transform: uppercase;
font-style: normal;
letter-spacing: 0.25px;
font-size: 22px;
}
a.arrow-button{
font-weight: 600;
color: var(--black);
}
@media only screen and (max-width: 580px){
#helly-logo h2 {
font-size: 18px;
}
ul.wp-block-list li a{
text-decoration: underline !important;
}
}
@media only screen and (max-width: 420px){
#helly-logo h2 {
font-size: 16px;
max-width: 1rem;
}
}