PageSourceSearch

https://www.awwwards.com/blog/

html awwwards.com collected 2026-10-01 07:20:00 UTC 270,832 bytes, 1,890 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="referrer" content="origin-when-cross-origin" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>            Awwwards Blog - For Web Designers and Developers
8    </title>
9            <meta name="theme-color" content="#3ea094">
10                    <meta name="description" content="            For Web Designers and Developers. We cover a wide range of topics such as Web Design, Graphic Design, Photography, Art, Illustration...
11    ">
12                            <link rel="canonical" href="https://www.awwwards.com/blog/" />
13        <link rel="icon" href="https://assets.awwwards.com/assets/images/favicon.svg" type="image/svg+xml" />
14    <link rel="mask-icon" href="https://assets.awwwards.com/assets/images/favicon-safari.svg" color="#000000" />
15    <link rel="apple-touch-icon" href="https://www.awwwards.com/apple-touch-icon.png" />
16    <link rel="preload" href="https://assets.awwwards.com/assets/fonts/inter-tight/InterTight-VariableFont_wght.ttf" as="font" crossorigin>
17    <style>
18        *{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}article,aside,details,figcaption,figure,footer,header,nav,section{display:block}li{list-style:none}table{border-collapse:separate;border-spacing:0}img{border:none}input{border:none}input[type=submit],input[type=text]{-webkit-appearance:none}input:focus{outline:none}
18input[type=submit],button{cursor:pointer}input[type=submit]:focus,button:focus{outline:none}a{text-decoration:none}.grid{display:grid;grid-template-rows:repeat(var(--grid-rows, 1), 1fr);grid-template-columns:repeat(var(--grid-columns, 12), 1fr);gap:var(--grid-gutter, var(--gutter))}.grid__col-1{grid-column:auto/span 1}.grid__col-2{grid-column:auto/span 2}.grid__col-3{grid-column:auto/span 3}.grid__col-4{grid-column:auto/span 4}.grid__col-5{grid-column:auto/span 5}.grid__col-6{grid-column:auto/span 6}.grid__col-7{grid-column:auto/span 7}.grid__col-8{grid-column:auto/span 8}.grid__col-9{grid-column:auto/span 9}.grid__col-10{grid-column:auto/span 10}.grid__col-11{grid-column:auto/span 11}.grid__col-12{grid-column:auto/span 12}@media(max-width: 576px){.grid{display:flex;flex-direction:column}[class*=grid__col-]{grid-column:auto}}@font-face{font-family:"Inter Tight";src:url("https://assets.awwwards.com/assets/fonts/inter-tight/InterTight-VariableFont_wght.ttf") format("truetype");font-weight:100 900}body:has(.nav-filters__item.is-open){overflow-y:hidden}@media(max-width: 1000px){body:has(.nav-filters__item.is-open) #header{z-index:0}body:has(.nav-filters__item.is-open) .nav-filters__container{background:rgba(0,0,0,0);pointer-events:none}body:has(.nav-filters__item.is-open) .nav-filters__item{opacity:0}body:has(.nav-filters__item.is-open) .nav-filters__dropdown{pointer-events:all}}:root{--nf-height: 54px;--nf-container-pad: 6px;--nf-bg-1: #ededed;--nf-bg-2: #f8f8f8;--nf-bg-3: #fff;--nf-bg-count: #FF9667}.l-filters{display:grid;grid-auto-columns:auto 1fr}.l-filters:has(.l-filters__left) .nav-filters{margin-bottom:clamp(20px,3vw,40px)}.l-filters__left{display:flex;align-items:center}.l-filters__right{display:flex;align-items:center;justify-content:flex-end;gap:20px;white-space:nowrap}.l-filters .nav-filters,.l-filters .toggle{grid-column:1/3}@media(max-width: 1024px){.l-filters{grid-template-columns:1fr;padding-block:20px}.l-filters__left{order:-1;margin-bottom:20px}.l-filters__right{justify-content:space-between}}@media(max-width: 768px){.l-filters__right{white-space:normal}}.nav-filters{position:relative;z-index:1;margin-top:10px}.nav-filters:has(.is-open){z-index:3}.nav-filters:has(.is-open) .nav-filters__overlay{opacity:1;visibility:visible}.nav-filters__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);opacity:0;visibility:hidden;transition:all .3s;z-index:3}.nav-filters__container{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;min-height:var(--nf-height);padding:var(--nf-container-pad);background:var(--nf-bg-1);border-radius:var(--rounded-normal);z-index:4;transition:all .3s}.nav-filters__left{height:100%}.nav-filters__list{display:flex;gap:6px;flex-wrap:wrap;height:100%;font-size:.95rem;font-weight:var(--font-medium)}.nav-filters__list>li{position:relative;min-width:0}.nav-filters__item{display:flex;align-items:center;min-width:48px;max-width:220px;height:42px;padding-inline:24px;background:var(--nf-bg-2);border-radius:var(--rounded-normal);cursor:pointer;transition:all .3s}.nav-filters__item:hover{background:var(--nf-bg-3)}.nav-filters__item:has(.nav-filters__count){position:relative;padding:0;overflow:hidden}.nav-filters__item.is-open+.nav-filters__dropdown{max-height:500px;opacity:1;visibility:visible;animation:none}.nav-filters__item.is-open .nav-filters__arrow{transform:rotate(180deg)}.nav-filters__item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-filters__item>.ico-svg{margin-left:6px}.nav-filters__ico{margin-left:6px}.nav-filters__dropdown{position:absolute;top:calc(100% + 12px);left:calc(var(--nf-container-pad)*-1);width:280px;max-height:0;padding:8px 8px 0 8px;background:var(--nf-bg-2);border-radius:var(--rounded-normal);box-shadow:0px 0px 6px 0px rgba(0,0,0,.2);opacity:0;visibility:hidden;overflow:hidden;transition:all .6s;z-index:2}.nav-filters__search{position:relative;display:flex;height:42px;margin-bottom:8px;background:var(--nf-bg-1);border-radius:var(--rounded-normal)}.nav-filters__search input{width:100%;padding-inline:30px 8px;background:rgba(0,0,0,0)}.nav-filters__search button{position:absolute;top:50%;left:8px;transform:translateY(-50%);border:none;color:#a7a7a7;background:none}.nav-filters__search .ico-svg{display:block}.nav-filters__sublist{max-height:326px;margin-bottom:12px;overflow-y:auto}.nav-filters__sublist::-webkit-scrollbar{width:4px}.nav-filters__sublist::-webkit-scrollbar-track{background:var(--nf-bg-1);border-radius:4px}.nav-filters__sublist::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);border-radius:4px}.nav-filters__sublist::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.6)}.nav-filters__subitem{position:relative;display:flex;align-items:center;min-height:40px;padding-inline:30px 8px;border-radius:var(--rounded-normal);transition:all .3s}.nav-filters__subitem.is-active:after{opacity:1}.nav-filters__subitem span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-filters__subitem:before{content:"";position:absolute;
18left:10px;width:12px;height:12px;border:1px solid #a7a7a7;border-radius:50%}.nav-filters__subitem:after{content:"";position:absolute;left:12px;width:8px;height:8px;background:currentColor;border-radius:50%;opacity:0;transition:all .3s}.nav-filters__subitem:hover{background:var(--nf-bg-1)}.nav-filters__subitem:hover:after{opacity:1}.nav-filters__colors{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;margin-bottom:8px;margin-right:8px;border-radius:4px;overflow:hidden}.nav-filters__color{display:block;width:100%;max-height:40px;aspect-ratio:3/1.35;transition:all .3s}.nav-filters__color:hover{box-shadow:inset 0 0 0 8px rgba(0,0,0,.4)}.nav-filters__count{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--nf-bg-count);line-height:normal;font-size:var(--text-size-small);color:#fff;border-radius:var(--rounded-normal);transform:translate(-50%, -50%)}.nav-filters__right .nav-filters__dropdown{left:auto;right:0}.nav-filters__ani-count .nav-filters__count{overflow:visible}.nav-filters__ani-count .nav-filters__count:before{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;animation:aniCountPulse 1s ease 5;border-radius:var(--rounded-normal);border:4px double var(--nf-bg-count)}.nav-filters__ani-count .nav-filters__dropdown{animation:aniDropdownHideShow 4s 1s forwards}@media(max-width: 1100px){.nav-filters__item{padding-inline:12px;max-width:100%}}@media(max-width: 1000px){.nav-filters__left,.nav-filters__right{width:100%}.nav-filters__list>li{width:calc(50% - 3px)}.nav-filters__list>li:nth-child(n+7){display:none}.nav-filters__dropdown{display:none}.nav-filters__item.is-open+.nav-filters__dropdown{display:block;position:fixed;top:var(--pad-inner);left:var(--pad-inner);width:calc(100% - var(--pad-inner)*2)}.nav-filters__overlay{background:rgba(0,0,0,.3)}}@keyframes aniCountPulse{0%{transform:scale(1);opacity:1}60%{transform:scale(1.3);opacity:.4}100%{transform:scale(1.4);opacity:0}
18}@keyframes aniDropdownHideShow{0%{transform:translateY(-20px);max-height:0;opacity:0}10%{transform:translateY(0px);max-height:500px;opacity:1;visibility:visible;z-index:5}90%{transform:translateY(0px);max-height:500px;opacity:1;visibility:visible;z-index:5}100%{transform:translateY(-20px);max-height:0;opacity:0;visibility:hidden}}.breadcrumb-filters{--bf-line-height: 130%;display:flex;gap:12px;flex-wrap:wrap;line-height:var(--bf-line-height)}.breadcrumb-filters__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}.breadcrumb-filters__left{display:flex;gap:12px;flex-wrap:wrap}.breadcrumb-filters__right{display:flex;gap:20px;flex-wrap:wrap}.breadcrumb-filters__list{display:flex;gap:12px}.breadcrumb-filters__title{font-size:var(--text-primary);font-weight:var(--font-bold);line-height:var(--bf-line-height)}.breadcrumb-filters__item.is-active{font-weight:var(--font-medium)}.breadcrumb-filters__link{display:flex;align-items:center;transition:all .3s}.breadcrumb-filters__link:hover{opacity:.8}.breadcrumb-filters__grid{display:flex;align-items:center;gap:12px}.breadcrumb-filters__grid li{position:relative}.breadcrumb-filters__grid .is-active:after{content:"";display:block;position:absolute;bottom:-4px;left:0;width:100%;height:1px;background:var(--color-primary)}.breadcrumb-filters__grid .ico-svg{display:block;cursor:pointer}.breadcrumb-filters__grid .ico-svg:hover{opacity:.8}.breadcrumb-filters [data-count]:after{padding:2px 2px 0 2px;content:attr(data-count);margin-left:4px;border:var(--border-thin) solid var(--color-primary);border-radius:2px;font-size:12px;line-height:10px;font-weight:300}.breadcrumb-filters__more{padding-top:clamp(20px,3vw,50px);line-height:150%}.breadcrumb-filters__more h3{margin-bottom:1rem;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold)}@media(max-width: 768px){.breadcrumb-filters__list li:not(:last-child){display:none}}:root{--font-1: Inter Tight;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-bold: 600;--font-extrabold: 700;--font-black: 800;--color-primary: #222;--color-primary-rgb: 34, 34, 34;--color-link: #222;--color-white: #fff;--color-white-rgb: 255, 255, 255;--color-orange: #FA5D29;--color-errors: #FA5D29;--color-blue: #49B3FC;--color-featured: #f8f0ee;--color-red: #FA5D29;--color-underlined: var(--color-primary-rgb);--color-connect: #FF602C;--color-connect-2: #FFAE94;--color-connect-3: #FFC5B1;--color-inspire: #AAEEC4;--color-inspire-2: #C8E4D3;--color-inspire-3: #E2F4E9;--color-awards: #502bd8;--color-awards-2: #6749d1;--color-awards-3: #917eda;--color-read: #c0ab3c;--color-read-2: #CDC38B;--color-read-3: #DBD6C0;--color-learn: #FFF083;--color-learn-2: #FFF9D0;--color-learn-3: #fffbe2;--color-jobs: #74bcff;--color-jobs-2: #99ccfc;--color-jobs-3: #b4d7f8;--text-size-small: 11px;--text-size-primary: 14px;--text-size-medium: 18px;--text-size-large: 22px;--border-gray: #ededed;--color-dotteds-rgb: 34, 34, 34;--bg-primary: #F8F8F8;--bg-primary-rgb: 248, 248, 248;--bg-secondary: #222;--bg-3rd: #ededed;--bg-4rd: #f8f8f8;--bg-white: white;--innerWidth: 1816px;--header-height: 71px;--gutter: 20px;--pad-inner: 52px;--color-odd-rows: #f8f8f8;--avatar-bg: #F8F8F8;--border-table: #222;--border-thin: 0.5px;--alert-green: #e0f4d9;--alert-green-rgb: 224, 244, 217;--alert-yellow: #FFF083;--alert-yellow-rgb: 255, 240, 131;--modal-alpha: 0.7;--rounded-small: 4px;--rounded-normal: 8px;--rounded-large: 1rem;--img-resizing-site: 16 / 12;--img-resizing-paronamic: 2 / 1;--img-resizing-desktop: 19 / 10}.fs-1{font-size:24px}html{scroll-behavior:smooth;font-size:var(--text-size-primary)}body{margin:auto;font-family:var(--font-1);font-size:var(--text-size-primary);font-weight:300;background:var(--bg-primary);color:var(--color-primary);line-height:200%;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body.dark{--color-primary: #eee;--bg-primary: #121212}@media(min-width: 768px){body.has-header-above #content{margin-top:-71px}body.has-header-above #header{background:rgba(0,0,0,0)}}body.header-dark #header{--color-primary: #fff;--bg-primary: #222;--sf-bg: #383838;--button-bg: var(--color-primary);--button-color: #222;color:var(--color-primary)}.content-header{background:var(--ch-bg, transparent);overflow:hidden}@media(min-width: 768px){.content-header{margin-bottom:clamp(30px,6vw,100px);padding-top:71px;padding-bottom:clamp(30px,6vw,100px)}}.content-header .block{margin-bottom:0}input,select,textarea,button{font-family:var(--font-1);font-size:var(--text-size-primary)}figure img{display:block}a{color:var(--color-link)}strong{font-weight:var(--font-bold)}.ico-svg{position:relative;display:inline-block;height:auto;fill:currentColor;transition:all .3s}.ico-svg.is-success{color:#52c67e}.ico-svg.is-danger{color:#fa5d29}.ico-svg.is-alert{color:#ff602c}
18.ico-svg[class*="--reflect"]{transform:scaleX(-1)}.ico-svg[class*="--white"]{color:#fff}.ico-svg[class*="--middle"]{top:-1px;vertical-align:middle;margin-right:.1em}.has-sticker{position:relative}span.has-sticker{display:inline-block}.has-sticker .sticker-svg{position:absolute;pointer-events:none}.has-sticker__ico{position:absolute;height:auto;margin-block:auto;pointer-events:none}.sticker-svg{--color-1: #ec6237;--color-2: #e5d8ca;--color-3: #AAEEC4;--color-4: #502BD8;--color-5: #222;--color-6: #502BD8;--color-7: #FCB6F2;position:relative;display:inline-block;width:-moz-fit-content;width:fit-content;height:auto}.sticker-svg.sc-orange-beige{--sc-1: var(--color-1);--sc-2: var(--color-2)}.sticker-svg.sc-orange-black{--sc-1: var(--color-1);--sc-2: var(--color-5)}.sticker-svg.sc-beige-purple{--sc-1: var(--color-2);--sc-2: var(--color-4)}.sticker-svg.sc-green-black{--sc-1: var(--color-3);--sc-2: var(--color-5)}.sticker-svg.sc-green-purple{--sc-1: var(--color-3);--sc-2: var(--color-4)}.sticker-svg.sc-purple-pink{--sc-1: var(--color-6);--sc-2: var(--color-7)}.sticker-svg.sc-purple-green{--sc-1: var(--color-6);--sc-2: var(--color-3)}.bg-color-academy{background-color:var(--color-learn) !important}img{max-width:100%}p{margin-bottom:1em}:root{--sf-height: 42px;--sf-bg: #ededed;--hf-bg: var(--bg-primary)}.has-content-header,.modal .header-floating{--sf-bg: var(--ch-bg, #f8f8f8);--hf-bg: var(--ch-bg, --bg-primary)}body.has-header-sticky #header{position:sticky;top:0;z-index:3;background:var(--bg-primary)}body.has-header-dark .header-main{--hm-color: white;--button-color: var(--color-primary);--button-bg: var(--hm-color);--button-border: var(--hm-color);--sf-bg: #333}body.has-header-dark .header-main .button[class*="--outline"]{--button-color: var(--hm-color)}body.has-header-dark .header-main .button[class*="--outline"]:hover{--button-border: var(--color-primary)}
18body.has-header-dark:has(.nav-header-main__link.is-open) .header-main,body.has-header-dark:has(.header-main.has-search-focus) .header-main{--hm-color: #222;--sf-bg: var(--nf-bg-3)}body.has-content-header .search-form,body.has-content-header .header-floating,body.has-content-header .marquee-top{filter:brightness(95%)}body.has-content-header:has(.nav-header-main__link.is-open) .search-form,body.has-content-header:has(.nav-header-main__link.is-open) .header-floating,body.has-content-header:has(.header-main.has-search-focus) .search-form,body.has-content-header:has(.header-main.has-search-focus) .header-floating{filter:none}body:has(.nav-header-main__link.is-open),body:has(.header-main.has-search-focus),body:has(.nav-header-main.is-open){overflow-y:hidden}@media(max-width: 1270px){body:has(.nav-header-main__link.is-open),body:has(.header-main.has-search-focus),body:has(.nav-header-main.is-open){--ch-bg: var(--bg-primary)}body:has(.nav-header-main__link.is-open) .marquee-top,body:has(.header-main.has-search-focus) .marquee-top,body:has(.nav-header-main.is-open) .marquee-top{display:none}}@media(min-width: 1270px){body:has(.bt-dropdown-user) .nav-header-main__content{padding-right:328px}body:has(.nav-header-main__link.is-open) .nav-header-main,body:has(.header-main.has-search-focus) .nav-header-main{margin-inline:0}body:has(.nav-header-main__link.is-open) .nav-header-main__item,body:has(.header-main.has-search-focus) .nav-header-main__item{padding-inline:0}body:has(.nav-header-main__link.is-open) .nav-header-main__item:not(.has-dropdown),body:has(.header-main.has-search-focus) .nav-header-main__item:not(.has-dropdown){display:none}body:has(.nav-header-main__link.is-open) .nav-header-main__link,body:has(.header-main.has-search-focus) .nav-header-main__link{display:none}}#header{--header-mt: 8px;position:relative;margin-top:var(--header-mt)}.header-fixed #header{position:sticky;top:0;background:var(--bg-primary);z-index:4}#header.is-top{z-index:5}@media(max-width: 768px){#header{--header-mt: 0px;position:sticky;top:0;margin-top:0;z-index:5;background:var(--bg-primary)}#header .inner{inline-size:auto;margin-inline:0}}.c-header-main{--header-height: 54px;width:var(--innerWidth);max-width:100%;height:var(--header-height)}.header-main{--hm-color: var(--color-primary);--hm-text: var(--text-size-primary);--hm-active-bg: #ededed;--hm-active-bg-2: var(--bg-primary);--hm-active-color: var(--color-primary);--hm-active-2-color: var(--color-primary);--hm-active-3-color: rgba(0,0,0,0.13);--hm-border-alpha: 0.3;--hm-separator: 10px;--color-link: var(--hm-color);position:relative;font-weight:400;color:var(--hm-color);z-index:3}.header-main.has-search-focus .header-main__container{z-index:1}.header-main.has-search-focus .search-inspiration li:has([data-section=search]){display:block}.header-main.has-search-focus .search-inspiration li:has([data-section=nav]){display:none}@media(min-width: 1270px){.header-main.has-search-focus .nav-header-main__item{border-bottom:0}.header-main.has-search-focus .nav-header-main__item:not(:has(.nav
18-header-main__dropdown)){display:none}.header-main.has-search-focus .nav-header-main__link{display:none}}.header-main.has-search-fill .search-inspiration__nav{display:none}.header-main.has-search-fill .search-inspiration__searching{display:block}@media(max-width: 1270px){.header-main.has-search-fill .nav-header-main__item{border-bottom:0}.header-main.has-search-fill .nav-header-main__item:not(:has(.nav-header-main__dropdown)){display:none}.header-main.has-search-fill .nav-header-main__link{display:none}}.header-main:has(.nav-header-main__link.is-open),.header-main.has-search-focus{--color-primary: #222;--hm-color: #222;--sf-bg: var(--nf-bg-3);--button-bg: var(--hm-color);--button-color: white;--button-border: var(--hm-color)}.header-main:has(.nav-header-main__link.is-open) .header-main__overlay,.header-main.has-search-focus .header-main__overlay{opacity:1;visibility:visible}@media(min-width: 1270px){.header-main:has(.nav-header-main__link.is-open) .header-main__container,.header-main.has-search-focus .header-main__container{background:var(--hm-active-bg);border-bottom-left-radius:0;border-bottom-right-radius:0}.header-main:has(.nav-header-main__link.is-open) .nav-header-main__dropdown,.header-main.has-search-focus .nav-header-main__dropdown{height:auto;opacity:1;visibility:visible}}.header-main__container{position:relative;display:flex;align-items:center;width:100%;height:var(--header-height);padding-inline:6px;font-size:var(--hm-text);color:var(--hm-color);border-radius:var(--rounded-normal);background:var(--ch-bg, --bg-primary);transition:all .3s}.header-main__overlay{position:fixed;top:50%;left:50%;width:200svw;height:200svh;background:rgba(0, 0, 0, var(--modal-alpha));transform:translate(-50%, -50%);z-index:-1;transition:all .3s;opacity:0;visibility:hidden}.header-main__logo{position:relative;left:4px}.header-main__hamburger{position:relative;display:none;align-items:center;height:100%;margin-right:12px;cursor:pointer}.header-main__hamburger:before{content:"";position:absolute;inset:0;width:48px;left:-20px}.header-main__hamburger svg{stroke:currentColor}.header-main__logo svg{display:block;fill:var(--hm-color);transition:all .3s}.header-main__search{flex:1;margin-left:clamp(8px,3vw,24px)}.header-main__right{display:flex;gap:12px;height:var(--sf-height);margin-left:clamp(8px,3vw,20px)}.header-main__bts{display:flex;gap:12px}.header-main__bts .button{font-weight:var(--font-medium)}.header-main__user{height:100%;display:flex;align-items:center;gap:16px}.header-main__separator{width:1px;height:24px;background-color:rgba(var(--color-primary-rgb), 0.2)}.header-main__link{cursor:pointer}.header-main__ico{display:none;align-items:center;cursor:pointer}@media(max-width: 1270px){.header-main:has(.nav-header-main.is-open) .header-main__overlay{opacity:1;visibility:visible}.header-main__logo{position:static}.header-main__hamburger{display:flex}.header-main__overlay{display:none}}@media(max-width: 1024px){.header-main #g_id_onload{display:none}}@media(max-width: 768px){.header-main__container{border-radius:0;padding-inline:0 var(--pad-inner)}.header-main__hamburger{justify-content:center;margin-right:0;aspect-ratio:1/1}}.nav-header-main{height:var(--header-height);margin-inline:60px 0px;font-weight:var(--font-medium)}.nav-header-main.is-open{left:0;opacity:1;visibility:visible;transform:translateX(0)}.nav-header-main.is-open .nav-header-main__dropdown{opacity:1;visibility:visible}.nav-header-main__content{min-height:450px;padding:0 424px 12px 60px}.nav-header-main__list{display:flex;align-items:center;height:100%}.nav-header-main__item{height:100%;padding-inline:10px}.nav-header-main__item.has-dropdown .nav-header-main__link{cursor:pointer}.nav-header-main__link{display:flex;align-items:center;height:100%;color:var(--hm-color);transition:all .3s}.nav-header-main__link.is-open .nav-header-main__arrow{transform:scaleY(-1)}.nav-header-main__link:has(.budget-tag){gap:4px}.nav-header-main__link:hover{opacity:.7}.nav-header-main__link .ico-svg{margin-left:6px}.nav-header-main__arrow{transition:none}.nav-header-main__arrow--sub{display:none}.nav-header-main__dropdown{position:absolute;top:calc(100% - 1px);left:0;width:100%;height:0;background:var(--hm-active-bg);color:var(--hm-active-2-color);font-weight:lighter;background:var(--hm-active-bg);border-bottom-left-radius:var(--rounded-normal);border-bottom-right-radius:var(--rounded-normal);overflow:hidden;opacity:0;visibility:hidden;transition:all .3s;z-index:1}.nav-header-main__social{display:none}.nav-header-main__sponsor{position:absolute;bottom:0;right:8px;margin-right:12px;margin-bottom:12px;font-size:14px;font-weight:400;color:var(--hm-color)}@media(max-width: 1270px){.nav-header-main{--nhm--top: calc(var(--header-height) + calc(var(--header-mt) * 2 ));display:flex;flex-direction:column;justify-content:space-between;position:fixed;top:var(--nhm--top);left:0;width:100%;min-height:calc(100dvh - var(--nhm--top));margin:0;padding:0;font-weight:300;background:var(--bg-primary);overflow-y:auto;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s}.nav-header-main__content{min-height:auto;padding:0}.nav-header-main__list{flex-direction:column;gap:0;height:auto}.nav-header-main__list>
18li:not(:last-child){border-bottom:1px solid rgba(0, 0, 0, var(--hm-border-alpha))}.nav-header-main__link{background:var(--hm-active-3-color)}.nav-header-main__item{flex-direction:column;width:100%;height:auto;padding-inline:0}.nav-header-main__link{display:flex;justify-content:space-between;width:100%;height:54px;padding:12px 20px;line-height:normal;font-weight:var(--font-medium)}.nav-header-main__link.is-open+.nav-header-main__dropdown{display:block}.nav-header-main__link .ico-svg{display:none}.nav-header-main__dropdown{position:static;height:auto}.nav-header-main__dropdown .inner{inline-size:auto}.nav-header-main__social{display:flex;justify-content:space-around}.nav-header-main__social a{display:block;padding:12px}.nav-header-main__social .ico-svg{display:block}.nav-header-main__sponsor{display:none;position:static}.nav-header-main .search-inspiration{--si-gap: 16px}}.search-form{position:relative;display:flex;align-items:center;gap:20px;height:var(--sf-height);background:var(--sf-bg);border-radius:var(--rounded-normal);transition:background .3s}.search-form__field{display:flex;flex:1;height:100%;padding-left:16px;border-top-left-radius:var(--rounded-normal);border-bottom-left-radius:var(--rounded-normal)}.search-form__button{display:flex;align-items:center;padding:0;background:rgba(0,0,0,0);border:none;cursor:pointer}.search-form__button:focus{outline:none}.search-form__button .ico-svg{fill:var(--hm-color)}.search-form__input{position:absolute;inset:0;padding-left:38px;background:rgba(0,0,0,0);border:none;font-size:.95rem;color:var(--hm-color)}.search-form__input:focus{outline:none}.search-form__input::-moz-placeholder{color:var(--hm-color)}.search-form__input::placeholder{color:var(--hm-color)}.search-inspiration{--si-gap: 28px;--si-nav-width: 180px;position:relative;display:flex;gap:var(--si-gap);width:100%;font-weight:400;color:var(--hm-color)}.search-inspiration__nav{width:var(--si-nav-width)}.search-inspiration__nav .search-inspiration__list{display:none;position:absolute;top:0;width:calc(100% - 200px);height:400px;margin-left:200px}.search-inspiration__nav li:has([data-section=search]){display:none}.search-inspiration__nav li:not(:last-child){margin-bottom:2px}.search-inspiration__searching{display:none;width:100%}.search-inspiration__section{position:relative;display:flex;align-items:center;height:40px;padding-inline:38px 16px;border-radius:var(--rounded-normal);cursor:pointer;transition:all .3s}.search-inspiration__section.is-active{background:var(--nf-bg-3);font-weight:var(--font-bold)}.search-inspiration__section.is-active+.search-inspiration__list{display:block}.search-inspiration__section:hover{background:var(--nf-bg-3)}.search-inspiration__section .search-inspiration__ico{position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-inspiration__section .search-inspiration__arrow{display:none}.search-inspiration__item{position:relative;display:flex;align-items:center;justify-content:space-between;height:40px;padding-inline:8px;line-height:normal;border-radius:var(--rounded-normal);transition:all .3s}.search-inspiration__item:hover{background:var(--nf-bg-3)}.search-inspiration__item[data-count]::after{padding:2px 2px 0 2px;content:attr(data-count);margin-left:4px;margin-left:4px;border-radius:2px;font-size:14px;line-height:10px}.search-inspiration__item-text{display:flex;align-items:center}.search-inspiration__item-text .ico-svg{margin-inline:8px 10px}.search-inspiration__item span{flex:1}.search-inspiration__item span:not(.budget-tag){width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.search-inspiration [data-search-target]+[data-search-target]{margin-block:16px}.search-inspiration__list:has(.avatar-name){padding-left:14px}.search-inspiration__list:has(.avatar-name) li:not(:last-child){margin-bottom:16px}@media(max-width: 1270px){.search-inspiration{--si-nav-width: 100%}.search-inspiration__nav .search-inspiration__list{position:static;width:100%;height:auto;margin-left:0}.search-inspiration__nav li:not(:last-child){margin-bottom:0}.search-inspiration__menu li{--hm-border-alpha: 0.1;border-top:1px solid rgba(0, 0, 0, var(--hm-border-alpha))}.search-inspiration__section{justify-content:space-between;
18height:54px;padding-inline:var(--pad-inner);border-radius:0}.search-inspiration__section.is-active{background:var(--hm-active-3-color);border-radius:0}.search-inspiration__section.is-active .search-inspiration__arrow{transform:scaleY(-1)}.search-inspiration__section .search-inspiration__ico{display:none}.search-inspiration__section .search-inspiration__arrow{display:block}.search-inspiration__item{height:54px;padding-inline:var(--pad-inner);background:#fff;border-radius:0}.search-inspiration__item .ico-svg{margin-left:0}.search-inspiration__searching{padding-block:16px;background:#fff}.search-inspiration__searching .search-inspiration__item{height:30px}}.slider-header{position:relative;z-index:0;padding-right:10%;overflow:hidden}.slider-header .swiper-slide{width:350px}.slider-header__figure{margin-bottom:20px}.slider-header__img{display:block}.slider-header__title{line-height:130%;font-size:1rem;font-weight:300}.slider-header__nav{display:flex;justify-content:flex-end}.slider-header__btnav{display:flex;justify-content:center;align-items:center;width:30px;height:30px;cursor:pointer;transition:all .3s}.slider-header__btnav:hover{opacity:.7}.slider-header__btnav--next{transform:scaleX(-1)}.header-floating{position:fixed;top:-80px;left:0;width:100%;height:72px;min-height:72px;background:var(--hf-bg);border-bottom:1px solid var(--ch--bg, --bg-3rd);transition:all .3s ease-in-out;z-index:4}.header-floating.show{top:0}.header-floating .inner{display:flex;justify-content:space-between;align-items:center;height:100%}.header-floating__left{display:flex;align-items:center;gap:10px}.header-floating__right{display:flex;align-items:center;gap:40px}.header-floating__by{display:flex;align-items:center;gap:10px}.modal .header-floating{filter:brightness(95%)}@media(max-width: 1024px){.header-floating__left{height:32px;overflow:hidden}.header-floating__left strong{padding-right:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@media(max-width: 768px){.header-floating{display:none !important}}.list-featured{display:flex;flex-wrap:wrap;gap:8px}.list-featured__img{display:block;width:100%;border-radius:4px}.list-featured__title{display:block;margin-top:12px;color:var(--color-white);line-height:100%}.bt-dropdown-user{position:relative;display:flex;align-items:center}.bt-dropdown-user:hover .dropdown-user{opacity:1;visibility:visible}.bt-dropdown-user .circle-avatar{font-size:1.25em}@media(max-width: 576px){.bt-dropdown-user .bt-dropdown-user__link{pointer-events:none}}.dropdown-user{--color-hover: rgba(255,255,255, 0.1);position:absolute;top:calc(100% + 12px);left:0;width:230px;padding:20px 0;background:var(--bg-secondary);color:var(--color-white);border-radius:var(--rounded-normal);z-index:3;transition:all .3s;opacity:0;visibility:hidden}.dropdown-user:before{content:"";width:44px;height:44px;position:absolute;top:-25px}.dropdown-user__list{padding:16px 0;border-bottom:1px solid var(--color-hover)}.dropdown-user__list:first-child{padding-top:0}.dropdown-user__list:last-child{padding-bottom:0;border-bottom:0}.dropdown-user__link{padding:0 28px;display:flex;align-items:center;gap:8px;color:var(--color-white);transition:all .3s}.dropdown-user__link:hover{background-color:var(--color-hover)}@media(max-width: 1024px){.dropdown-user{left:auto;right:0}}:root{--height-input: 48px;--pad-input: 16px;--bg-input: #fff;--bg-input-hover: #f8f8f8;--color-input: #222;--border-input: #ededed;--check-toggle-width: 80px;--check-toggle-height: 40px;--check-toggle-color-ball: #fff;--check-toggle-color-bg: #dedede;--check-toggle-color-bg-checked: #222}.form-field{position:relative;width:100%}.form-field.is-invalid .text-input{color:currentColor;border-color:var(--color-errors)}.form-field.is-invalid .input-drag{border-color:var(--color-errors)}.form-field.is-invalid .link-underlined{--color-underlined: 250, 93, 41}.form-field.is-invalid .form-field__msg{color:var(--color-errors)}.form-field__label{display:block;margin-bottom:8px;line-height:100%;text-transform:uppercase;font-size:12px;font-weight:300;color:#a7a7a7}
18.form-field__label.is-required:after{content:" (*)"}.form-field__msg{padding-top:1em;font-size:var(--text-size-small);line-height:100%;color:#a7a7a7}.form-field__msg li:not(:last-child){margin-bottom:.5em}.form-field__remove{position:absolute;bottom:0;right:0;display:flex;justify-content:center;align-items:center;width:36px;height:var(--height-input);cursor:pointer;transition:all .3s}.form-field__remove:hover{opacity:.7}.form-field__remove+.text-input{padding-right:36px}.form-field .text-input{width:100%}.text-input{display:block;height:var(--height-input);padding:0 var(--pad-input);background:var(--bg-input);border:0;color:var(--color-input);border-bottom:1px solid var(--border-input);transition:all .3s ease-in-out}.text-input:focus{outline:0;border-color:#a7a7a7}.text-input:disabled{background:var(--bg-primary)}.text-input::-moz-placeholder{color:#dedede;font-weight:300}.text-input::placeholder{color:#dedede;font-weight:300}textarea.text-input{height:100px;padding-top:var(--pad-input)}.box-input-check-toggle{display:flex;align-items:center;gap:10px}.box-text-input{position:relative;display:flex;width:100%;background:var(--bg-input)}.box-text-input__url{display:flex;align-items:center;padding-left:var(--pad-input);color:#a7a7a7;border-bottom:1px solid var(--border-input)}.box-text-input .text-input{width:100%;padding-left:4px}.c-toggle{display:inline-flex;gap:16px}.label-c-toggle+.c-toggle{margin-left:2em}.c-toggle__col{display:flex;align-items:center}.c-toggle strong{position:relative;line-height:130%}.c-toggle sup{position:absolute;bottom:100%;left:0;width:100%;text-align:center;color:#7a7a7a;font-size:var(--text-size-small)}.check-toggle{display:inline-block;position:relative;width:var(--check-toggle-width);height:var(--check-toggle-height);-webkit-user-select:none;-moz-user-select:none;user-select:none}.check-toggle__ball{position:relative;top:2px;display:block;width:calc(var(--check-toggle-height) - 4px);height:calc(var(--check-toggle-height) - 4px);background:var(--check-toggle-color-ball);border-radius:50%;transform:translateX(2px);transition:all .3s}.check-toggle input{display:none}.check-toggle input:checked+label{--check-toggle-color-bg: var(--check-toggle-color-bg-checked)}.check-toggle input:checked+label .check-toggle__ball{transform:translateX(calc(var(--check-toggle-width) - var(--check-toggle-height) + 2px))}.check-toggle label{position:absolute;inset:0;background:var(--check-toggle-color-bg);border-radius:var(--check-toggle-height);cursor:pointer;transition:all .3s}.input-check{position:relative;display:inline-block}.input-check input{display:none}.input-check label{display:inline-block;position:relative;padding-left:25px;margin-right:30px;line-height:130%;cursor:pointer}.input-check label:before{content:"";display:block;position:absolute;top:9px;left:0;width:19px;height:19px;margin-top:-10px;border:2px solid #dedede;border-radius:var(--rounded-small)}.input-check label:after{content:"";position:absolute;top:4px;left:5px;width:9px;height:9px;background:var(--color-primary);border-radius:2px;opacity:0;transform:scale(0);transition:all .3s}.input-check input[type=checkbox]:checked+label:after{opacity:1;transform:scale(1)}.input-check input[type=radio]:checked+label:after{opacity:1;transform:scale(1)}.input-check input[type=radio]+label:before{border-radius:50%}.input-check input[type=radio]+label:after{border-radius:50%;border:none;top:4px;left:5px;width:9px;height:9px;background-color:var(--color-primary);border-radius:50%;transform:scale(0)}.input-ranger-double{--height-ranger: 20px;position:relative;width:100%;height:var(--height-ranger)}.input-ranger-double__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;outline:none;position:absolute;margin:auto;top:0;bottom:0;background-color:rgba(0,0,0,0);pointer-events:none}.input-ranger-double__track{width:100%;height:4px;position:absolute;margin:auto;top:0;bottom:0;border-radius:var(--height-ranger)}.input-ranger-double input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none}.input-ranger-double input[type=range]::-moz-range-track{-moz-appearance:none}.input-ranger-double input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--height-ranger);width:var(--height-ranger);background-color:var(--color-white);border:2px solid #27ae60;pointer-events:auto;border-radius:50%;cursor:pointer}.input-ranger-double input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:var(--height-ranger);width:var(--height-ranger);background-color:var(--color-white);border:2px solid #27ae60;pointer-events:auto;border-radius:50%;cursor:pointer;box-sizing:border-box}.input-ranger-double input[type=range]:active::-webkit-slider-thumb{background:#27ae60}.input-ranger-double__values{display:flex;justify-content:space-between;padding-top:8px;color:#a7a7a7}.input-ranger-double__values strong{color:var(--color-primary)}.input-drag{position:relative;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-input);aspect-ratio:var(--input-ratio, 1/1);border-radius:var(--rounded-small);background-color:var(--bg-input);overflow:hidden;transition:all .3s}.input-drag:hover{border-color:#a7a7a7}.input-drag.is-drag{border-color:var(--color-primary);border-style:dashed;background-color:#ededed}.input-drag.is-inserted:hover .input-drag__hover{opacity:1}.input-drag.is-inserted .input-drag__hover{z-index:1}.input-drag__input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;overflow:hidden;cursor:pointer;z-index:1}.input-drag__label{padding:20px;text-align:center;line-height:140%}.input-drag__label p{margin-bottom:.5em}.input-drag__label p:last-child{margin-bottom:0}.input-drag__preview{position:absolute;inset:0}.input-drag__preview img,.input-drag__preview video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.input-drag__hover{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:8px;background:rgba(0,0,0,.5);opacity:0;transition:all .3s}.input-drag__hover .button{position:relative;z-index:5;pointer-events:auto}.input-drag__hover .button:hover{background:red}.form-errors{margin-bottom:30px;color:#fa5d29;line-height:120%}.form-errors li{margin-bottom:8px}.form__section{margin-bottom:60px}.form__row{margin-bottom:30px}.form__row .text-input{width:100%}.form__bts{display:flex;justify-content:space-between;gap:var(--gutter);margin-top:clamp(30px,5vw,60px)}.form__bts__left{display:flex;align-items:center}.form__bts__right{display:flex;gap:8px}.form__bts .button{flex:auto}.form__hr{height:1px;background-color:#dedede;border:none;margin:clamp(40px,4vw,80px) 0}.form__hr--small{margin:clamp(20px,4vw,40px) 0}.box-form-autocomplete{display:flex;gap:8px}.box-form-autocomplete .button,.box-form-autocomplete .text-input{border-radius:var(--rounded-small)}.field-autocomplete{position:relative}.field-autocomplete__wrap{position:relative}.field-autocomplete__dropdown{position:absolute;top:100%;left:0;width:100%;z-index:1;opacity:0;visibility:hidden;transition:all .3s}.field-autocomplete__dropdown.is-visible{opacity:1;visibility:visible}.field-autocomplete__list{max-height:204px;overflow-y:auto}.field-autocomplete__list li{display:flex;align-items:center;gap:8px;padding:4px 16px;border-bottom:1px solid #ededed;background:var(--color-white);cursor:pointer;transition:all .3s}.field-autocomplete__list li:last-child{border-bottom:0}.field-autocomplete__list li:hover{background:#f8f8f8}.field-autocomplete__avatars{display:flex;flex-wrap:wrap;gap:8px;padding:16px}.field-autocomplete__avatars li{position:relative;display:flex;cursor:pointer}.field-autocomplete__avatars li:hover img{opacity:.5}.field-autocomplete__avatars li:hover .ico-svg{opacity:1}.field-autocomplete__avatars li img{transition:all .3s}.field-autocomplete__avatars .circle-avatar{background:#000;border-radius:50%;overflow:hidden}.field-autocomplete__avatars .ico-svg{position:absolute;top:50%;left:50%;width:40%;transform:translate(-50%, -50%);
18fill:var(--color-white);opacity:0}.field-autocomplete__avatar{display:flex;position:relative}.field-autocomplete__loading{--spinner-bg: #ededed;--spinner-color: #222;position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;width:var(--height-input);height:var(--height-input);font-size:10px}.snackbar{--snack-text: var(--color-white);position:fixed;bottom:20px;left:40px;max-width:400px;padding:20px 20px 20px 65px;opacity:0;font-size:16px;color:var(--snack-text);line-height:170%;background:rgba(var(--color-primary-rgb), 0.7);box-shadow:10px 10px 20px -10px rgba(var(--color-primary-rgb), 0.4);border-radius:var(--rounded-normal);z-index:11;transition:all .3s}.snackbar--success{background-color:rgba(14,14,14,.9)}.snackbar--warning{--snack-text: var(--color-primary);background-color:rgba(230,230,0,.9);font-weight:400}.snackbar--error{background-color:rgba(255,0,0,.9)}.snackbar.is-visible{opacity:1;transform:translateY(-20px)}.snackbar svg{position:absolute;top:50%;left:20px;width:30px;height:30px;margin-top:-15px;
18fill:var(--snack-text)}:root{--button-rounded: 8px;--button-rounded-full: 72px;--button-height: 48px;--button-pad: 24px;--button-bg: var(--color-primary);--button-color: var(--color-white);--button-border-color: var(--color-primary)}.button{position:relative;display:inline-flex;justify-content:center;align-items:center;height:var(--button-height);padding:0 var(--button-pad);background-color:var(--button-bg);font-size:var(--text-size-primary);color:var(--button-color);text-align:center;cursor:pointer;border:none;white-space:nowrap;transition:color .3s,background .3s,border .3s}.button:focus{outline:none}.button[class*="--tag"]{--button-color: var(--color-primary);--button-bg: transparent;--button-border-color: #a7a7a7;border-radius:var(--button-rounded-full);font-size:var(--text-size-medium);border:var(--border-thin) solid var(--button-border-color)}.button[class*="--tag"]:hover{--button-color: var(--color-primary);--button-bg: transparent;border-color:var(--color-primary)}.button[class*="--large"]{--button-height: 72px;min-width:var(--button-height);height:var(--button-height);padding:0 1.6em;font-size:18px;font-weight:400;line-height:var(--button-height)}.button[class*="--medium"]{--button-height: 60px;min-width:var(--button-height);height:var(--button-height);padding:0 1.2em;font-size:16px;line-height:var(--button-height)}.button[class*="--small"]{min-width:42px;height:42px;padding:0 20px;line-height:42px}.button[class*="--x-small"]{min-width:32px;height:32px;padding:0 12px;line-height:32px;font-size:13px}.button[class*="--extra-pad"]{padding:0 3em}.button[class*="--rounded"]{border-radius:var(--button-rounded)}.button[class*="--rounded-full"]{border-radius:var(--button-rounded-full)}.button[class*="--color"]{--button-inside-color: var(--bg-primary);padding:0;border:none;outline:var(--border-thin) solid rgba(var(--color-primary-rgb), 0.3);aspect-ratio:1/1}.button[class*="--color"]:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:8px solid var(--button-inside-color);border-radius:50%;transition:border .3s}.button[class*="--color"]:hover:before{border-width:4px}.button[class*="--full"]{width:100%}.button[class*="--circle"]{padding:0;border-radius:50%}.button[class*="--square"]{padding:0;aspect-ratio:1/1}.button[class*="--circle"]{padding:0;border-radius:50%;aspect-ratio:1/1}.button[class*="--white"]{--button-bg: var(--color-white);--button-color: var(--color-primary)}.button[class*="--red"]{--button-bg: #FA5D29;--button-color: var(--color-white)}.button[class*="--gray"]{--button-bg: #dedede;--button-color: var(--color-primary)}.button[class*="--blue"]{--button-bg: #49B3FC}.button[class*="--outline"]{--button-color: var(--color-primary);--button-bg: transparent;border:var(--border-thin) solid var(--button-border-color)}.button[class*="--outline--gray"]{--button-border-color: #dedede}.button[class*="--outline--gray"]:hover{--button-bg: #dedede;--button-color: var(--color-primary)}.button[class*="--outline--dark"]{--button-color: var(--color-white);--button-border-color: #fff}.button[class*="--outline--dark"]:hover{--button-bg: #fff;--button-color: var(--color-primary)}.button[class*="--outline--white"]{--button-color: var(--color-white);--button-border-color: #fff}.button[class*="--outline--white"]:hover{--button-color: var(--color-primary);--button-bg: var(--color-white)}.button[class*="--outline--red"]{--button-color: var(--color-red);--button-border-color: var(--color-red)}.button[class*="--outline--red"]:hover{--button-color: var(--color-white);--button-bg: var(--color-red)}.button[class*="--disabled"]{opacity:.5;pointer-events:none}.button.is-active{--button-bg: var(--bg-secondary);--button-color: var(--color-white)}.button.is-loading{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.button.is-loading .button__content{opacity:0}.button.is-loading .button__spinner{display:block;opacity:1;margin-right:12px;visibility:visible}.button__spinner{position:absolute;top:50%;left:50%;margin:-0.7em 0 0 -0.7em;width:1.4em;height:1.4em;border:var(--border-thin) solid rgba(255,255,255,.5);border-left-color:currentColor;border-radius:50%;opacity:0;transition:all .3s;animation:btRotate .6s infinite linear}.button__loading{display:flex;align-items:center;justify-content:center}.button__loading .button__spinner{display:none;position:static;margin:0;visibility:hidden;overflow:hidden}.button svg{position:relative;vertical-align:middle;fill:currentColor;transition:fill .3s}.button svg.ico--left{margin-right:.5em}.button svg.ico--right{margin-left:.5em}.button:hover{--button-color: var(--color-white);--button-bg: #383838}.button:hover svg{fill:currentColor}@media(max-width: 576px){.button[class*="--tag"]{--button-height: 36px;--button-pad: 16px;font-size:var(--text-size-primary)}.button[class*="--large"]{--button-height: 48px;font-size:var(--text-size-primary)}.button[class*="--medium"]{--button-height: 48px}}@keyframes btRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.bt-ico-left{display:inline-flex;align-items:center;gap:.5em;cursor:pointer}.bt-ico-label{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
18cursor:pointer}.bt-ico-label small{font-size:12px;line-height:normal}.bt-ellipses{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;height:72px;padding-inline:12px;background-color:#f8f8f8;background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%),linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:left top,left bottom;background-size:8px 1px,8px 1px;background-repeat:repeat-x,repeat-x;cursor:pointer;transition:all .3s}.bt-ellipses--no-hover{cursor:default}.bt-ellipses--white{background-color:#fff}.bt-ellipses:not(.bt-ellipses--no-hover):hover{background-color:#ededed}.bt-ellipses__input{position:absolute;inset:0;opacity:0;cursor:pointer}.bt-ellipses+small{display:block;padding-top:1em}.button-loadmore{--button-pad: 16px;--button-color: var(--color-primary);--border-width: 1px;--pics-border: var(--bg-primary);gap:12px}.button-loadmore:hover .button-loadmore__pic{--pics-border: #383838}.button-loadmore:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:2px solid #e52e86;transition:all .5s;animation:clippath 2s infinite linear;border-radius:var(--rounded-normal)}.button-loadmore__text{font-weight:var(--font-medium)}.button-loadmore__pics{display:flex}.button-loadmore__pic{border-radius:50%;border:2px solid var(--pics-border);transition:all .3s}.button-loadmore__pic:nth-child(n+2){margin-left:-0.9em}@keyframes clippath{0%,100%{-webkit-clip-path:inset(0 0 98% 0);clip-path:inset(0 0 98% 0)}25%{-webkit-clip-path:inset(0 0 0 98%);clip-path:inset(0 0 0 98%)}50%{-webkit-clip-path:inset(98% 0 0 0);clip-path:inset(98% 0 0 0)}75%{-webkit-clip-path:inset(0 98% 0 0);clip-path:inset(0 98% 0 0)}}.bt-play{--bt-bg: rgba(255,255,255,0.85);--bt-arrow: var(--color-primary);--bt-size: 70px;display:inline-flex;justify-content:center;align-items:center;width:var(--bt-size);height:var(--bt-size);border-radius:50%;background:var(--bt-bg);cursor:pointer}.bt-play .ico-svg{fill:var(--bt-arrow);width:30%;transform:translateX(10%)}.budget-tag{display:inline-flex;align-items:center;justify-content:center;height:22px;padding-inline:4px;line-height:18px;font-size:11px;font-weight:var(--font-medium);text-align:center;border-radius:var(--rounded-small);border:var(--border-thin) solid var(--budget-tag-border, rgba(var(--color-primary-rgb), 0.3))}.budget-tag[class*="--small"]{min-width:16px;height:16px;line-height:17px;font-size:10px}.budget-tag[class*="--big"]{height:30px;padding-inline:8px;line-height:16px;font-size:16px}.budget-tag[class*="--sotd"]{border-color:#ce6644;color:#ce6644}.budget-tag[class*="--dev"]{border-color:#8eabc6;color:#8eabc6}.budget-tag[class*="--hm"]{border-color:#726996;color:#726996}.budget-tag[class*="--white"]{border-color:#fff;color:#fff}.budget-tag[class*="--red"]{border-color:#fa5d29;color:#fa5d29}.budget-tag[class*="--solid"]{color:var(--color-primary);border:none}.budget-tag[class*="--solid"][class*="--black"]{background:#222;color:#fff}.budget-tag[class*="--solid"][class*="--white"]{background:#fff}.budget-tag[class*="--solid"][class*="--green"]{background:#aaeec4;border:none}.budget-tag[class*="--solid"][class*="--red"]{background:#fa5d29}.budget-tag[class*="--solid"][class*="--yellow"]{background:#fff083}.budget-tag[class*="--solid"][class*="--ocher"]{background:#ffd100}.budget-tag[class*=anim-shiny]{position:relative;overflow:hidden}.budget-tag[class*=anim-shiny]:before{position:absolute;content:"";display:inline-block;top:-4px;left:0;width:4px;height:50%;background-color:#fff;animation:budgetShiny 6s ease-in-out infinite}.budget-tag[class*=anim-shiny] span{position:relative;z-index:1}@keyframes budgetShiny{0%{transform:scale(0) rotate(45deg);opacity:0}
1893%{transform:scale(0) rotate(45deg);opacity:.1}95%{transform:scale(4) rotate(45deg);opacity:.6}100%{transform:scale(50) rotate(45deg);opacity:0}}:root{--budget-circle-size: 24px;--budget-circle-bg: #ededed;--budget-circle-color: var(--color-primary)}.budget-circle{display:inline-flex;justify-content:center;align-items:center;width:var(--budget-circle-size);height:var(--budget-circle-size);background-color:var(--budget-circle-bg);border-radius:50%;font-weight:var(--font-bold);font-weight:400;color:var(--budget-circle-color);transition:all .3s}.budget-circle[class*=small]{--budget-circle-size: 16px;font-size:12px}.budget-circle[class*=red]{--budget-circle-bg: var(--nf-bg-count);--budget-circle-color: white}.budget{--budget-height: 20px;display:inline-block;height:var(--budget-height);padding:0 10px;line-height:var(--budget-height);font-size:10px;border-radius:var(--budget-height)}.budget[class*="--white"]{background:var(--bg-white);color:var(--color-primary)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-bold)}.heading-1{font-size:42px;font-size:clamp(42px,-3.0704225352px + 9.014084507vw,170px);line-height:100%}.heading-2{font-size:42px;font-size:clamp(42px,5.3802816901px + 7.323943662vw,146px);line-height:100%}.heading-3{font-size:36px;font-size:clamp(36px,15.5774647887px + 4.0845070423vw,94px);line-height:100%}.heading-4{font-size:32px;font-size:clamp(32px,17.2112676056px + 2.9577464789vw,74px);line-height:100%}.heading-5{font-size:26px;font-size:clamp(26px,17.5492957746px + 1.6901408451vw,50px);line-height:120%}.heading-6{margin-bottom:1em;font-size:22px;font-size:clamp(22px,13.5492957746px + 1.6901408451vw,46px);line-height:130%;font-weight:300}.text-x-large{font-size:22px;font-size:clamp(22px,19.8873239437px + 0.4225352113vw,28px)}.text-large{font-size:18px;font-size:clamp(18px,17.2957746479px + 0.1408450704vw,20px)}.text-medium{font-size:16px;font-size:clamp(16px,16px + 0vw,16px)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-bold{font-weight:var(--font-bold)}.font-black{font-weight:var(--font-black)}.text-underlined{text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:var(--color-primary);text-decoration-thickness:1px;text-underline-offset:.2em}.text-truncated{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.legal-recaptcha{margin:1.5rem 0;line-height:120%}.legal-recaptcha small{opacity:.7}.link-underlined{position:relative;display:inline-block;line-height:100%;color:rgb(var(--color-underlined));border:none;cursor:pointer}
18.link-underlined:before{content:"";position:absolute;bottom:-0.2em;left:0;width:100%;height:2px;background-repeat:no-repeat;background-image:linear-gradient(to right, rgb(var(--color-underlined)) 45%, rgba(var(--color-underlined), 0.3) 55%);background-size:220% 100%;background-position:100% 50%;transition:.3s ease-out}.link-underlined--white{--color-underlined: 255,255,255}.link-underlined--red{--color-underlined: 250, 93, 41}.link-underlined:hover:before{background-position:0% 50%}.toggle{overflow:hidden;max-height:0;clear:both;transition:all .6s cubic-bezier(0, 1, 0.5, 1)}.toggle.show{transition:all .6s ease-in;max-height:1000px;overflow:hidden}.heading-hr{padding-bottom:24px;border-bottom:1px solid var(--border-gray);font-size:var(--text-size-primary)}.star-price{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(70px,10vw,128px);aspect-ratio:1/1;line-height:120%;font-size:10px;font-size:clamp(10px,7.8873239437px + 0.4225352113vw,16px)}.star-price--small{font-size:9px}.star-price--small .star-price__label{margin-bottom:.4em;line-height:90%}.star-price--large{width:10em;font-size:clamp(8px,2vw,16px)}.star-price--large .star-price__price{margin:.05em 0 0 0;font-size:3em;font-weight:var(--font-bold)}.star-price--large .star-price__price small{font-size:.6em}.star-price__wrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);line-height:170%;text-align:center;font-weight:400}.star-price__label{font-size:1.3em}.star-price__label--small{font-size:1em}.star-price__price{margin:.05em 0;font-size:2em;font-weight:var(--font-bold)}.star-price__old{font-size:.7em;text-decoration:line-through;line-height:normal}.star-price svg{width:100%;max-width:100%;height:auto}.loader-grid{display:flex;align-items:center;justify-content:center;height:40px;margin-top:40px;text-align:center}.loader-grid__spinner{width:8px;height:40px;border-radius:4px;display:inline-block;position:relative;background:currentColor;color:var(--color-primary);box-sizing:border-box;animation:animloader .3s .3s linear infinite alternate;transform:scale(0.5)}.loader-grid__spinner:before,.loader-grid__spinner:after{content:"";position:absolute;top:50%;left:20px;width:8px;height:40px;border-radius:4px;background:currentColor;transform:translateY(-50%);box-sizing:border-box;animation:animloader .3s .45s linear infinite alternate}.loader-grid__spinner:before{left:-20px;animation-delay:0s}
18@keyframes animloader{0%{height:48px}100%{height:4px}}.loading{--spinner-bg: rgba(255,255,255, 0.2);--spinner-color: #fff;--loading-msg: #fff;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:rgba(0, 0, 0, var(--modal-alpha));transform:scale(0.5);opacity:0;visibility:hidden;transition:all .3s;z-index:5}.loading--fixed{position:fixed;z-index:15}.loading--white{--spinner-bg: rgba(0,0,0, 0.2);--spinner-color: var(--color-primary);--loading-msg: #222;background-color:var(--bg-primary)}.loading.is-visible{transform:scale(1);opacity:1;visibility:visible}.loading__content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading__msg{max-width:400px;color:var(--loading-msg);text-align:center}.loading__spinner{pointer-events:none;width:2.5em;height:2.5em;border:2px solid rgba(0,0,0,0);border-color:var(--spinner-bg);border-top-color:var(--spinner-color);border-radius:50%;animation:loadingSpinner .6s linear infinite}@keyframes loadingSpinner{100%{transform:rotate(360deg)}}.wrapper{display:flex;flex-direction:column;min-height:100vh}.inner{inline-size:min(100% - var(--pad-inner)*2,var(--innerWidth));margin-inline:auto}.inner--sm{--innerWidth: 931px}.inner--lg{--innerWidth: 1216px}.inner--xl{--innerWidth: 1386px}.inner--xxl{--innerWidth: 1650px}.inner--xxxl{--innerWidth: 1834px}#content{flex:1}.block{margin-top:clamp(20px,3vw,50px);margin-bottom:clamp(50px,20vw,200px)}.block--mb-s{margin-bottom:clamp(50px,20vw,100px)}.block--private{position:relative;display:flex;align-items:center;min-height:calc(100vh - 71px);margin:0;padding:clamp(50px,20vw,100px) 0;background:rgba(0,0,0,.7)}.block--private .c-heading,.block--private .c-view-all{color:#fff}.block--private .bg-private{position:absolute;inset:0;width:100%;height:100%;z-index:-1;-o-object-fit:contain;object-fit:contain}.block[class*="--bg"]{margin:clamp(50px,20vw,200px) 0;padding:100px 0}.block[class*="--gray"]{background:var(--bg-3rd)}.item-link{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:1}.users-credits{display:inline-flex;flex-wrap:wrap;gap:.3em}.users-credits__details{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,3vw,20px)}.users-credits__cards{display:flex}.users-credits__cards .users-credits__item:nth-child(n+2){margin-left:-1em}.users-credits__cards .circle-avatar__img{border:2px solid var(--bg-primary)}.users-credits__number{display:flex;align-items:center}.users-credits .circle-avatar{display:block;flex-shrink:0}.users-credits .circle-avatar__img{box-sizing:content-box}.avatar-name__link{display:flex;align-items:center;gap:.5em;min-width:-moz-fit-content;min-width:fit-content}.avatar-name__link sup{flex:1;margin-bottom:auto;margin-left:.2em;vertical-align:text-top;font-size:.5em;font-weight:var(--font-medium)}.avatar-name__name{line-height:100%}.avatar-name__title{display:inline-block;font-size:1em}.avatar-name__img{display:block;height:auto;border-radius:50%;filter:grayscale(1)}.circle-avatar{display:inline-block;position:relative}.circle-avatar__notifications{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;width:16px;height:16px;border-radius:50%;background:var(--nf-bg-count);transform:translate(30%, -30%);font-size:11px;color:#fff;line-height:1;transition:all .3s;z-index:1}.circle-avatar__notifications:hover{background:var(--color-primary)}.circle-avatar__img{display:block;height:auto;border-radius:50%;filter:grayscale(1);aspect-ratio:1/1;-o-object-fit:cover;object-fit:cover}.circle-avatar__ribbon{position:absolute;top:0;left:0;width:100%;height:100%}.circle-avatar__ribbon svg{position:relative;top:50%;left:50%;width:calc(100% + .6em);height:calc(100% + .6em);transform:translate(-50%, -50%);stroke-width:1px;overflow:visible}.circle-avatar__ribbon span{position:absolute;left:0;top:100%;width:100%;text-align:center;font-size:Arial;font-size:8px;font-weight:400;line-height:100%;z-index:1}.menu-tabs{position:relative;display:flex;gap:clamp(8px,5vw,32px)}.menu-tabs--s2{height:80px;margin-bottom:clamp(24px,3vw,48px);justify-content:center;background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.menu-tabs--s3{margin-bottom:clamp(24px,3vw,48px);background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.menu-tabs--s3 li{padding-bottom:clamp(20px,3vw,20px);line-height:150%}.menu-tabs .active{font-weight:var(--font-bold)}.menu-tabs li{position:relative;display:flex;align-items:center;height:100%;cursor:pointer;color:#a7a7a7;white-space:nowrap}.menu-tabs .active{color:var(--color-primary)}.menu-tabs .active:before{content:"";position:absolute;bottom:0;left:0;width:100%;border-bottom:2px solid var(--color-primary)}.menu-tabs sup{position:relative;top:-0.2em;margin-left:.5em;font-size:10px}.menu-dd{--menu-bg: #222;--menu-bg-active: #FA5D29;--menu-color: #fff;display:flex;gap:8px;padding-left:8px;font-size:14px;color:var(--menu-color)}.menu-dd.is-open .menu-dd__bt{background:var(--menu-bg-active)}.menu-dd.is-open .menu-dd__box{opacity:1;visibility:visible;pointer-events:auto}.menu-dd__bt{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--menu-bt-size, 48px);height:var(--menu-bt-size, 48px);background:var(--menu-bg);font-size:Arial,sans-serif;font-size:35px;letter-spacing:-0.15em;border-radius:var(--rounded-normal);cursor:pointer;pointer-events:auto;transition:background .3s}.menu-dd__bt:hover{background:var(--menu-bg-active)}
18.menu-dd__bt svg{fill:var(--color-white)}.menu-dd__box{padding:clamp(20px,3vw,30px);background:var(--menu-bg);border-radius:var(--rounded-normal);opacity:0;visibility:hidden;transition:all .3s}.menu-dd__list li:not(:last-child){margin-bottom:16px}.menu-dd__list+.menu-dd__list{border-top:1px solid rgba(255,255,255,.2);margin-top:16px;padding-top:16px}.menu-dd__item{display:flex;align-items:center;gap:12px;line-height:100%;cursor:pointer;transition:all .3s}.menu-dd__item:hover{opacity:.7}.menu-dd__item .ico-svg{width:14px}.menu-dd a{color:var(--color-white)}.content-tabs__item{position:relative;display:none}.content-tabs__item.active{display:block}.tab img{display:block;width:100%}.list-tags{display:flex;flex-wrap:wrap;gap:12px}.list-tags--center{justify-content:center;min-width:100%}.list-tags li{display:flex}.list-default{margin:2em 0}.list-default li{list-style:square inside;line-height:140%}.list-default li:not(:last-child){margin-bottom:.5em}.list-checks li{position:relative;margin-bottom:1em;padding-left:32px;line-height:22px}.list-checks li:last-child{margin-bottom:0}.list-checks .ico-svg{position:absolute;top:0;left:0}.list-check li{position:relative;margin-bottom:1em;padding-left:28px;line-height:150%}.list-check li:last-child{margin-bottom:0}.list-check .ico-svg{position:absolute;top:6px;left:0}.list-lines li{display:flex;padding:12px 0;border-bottom:1px solid #dedede}.list-lines li:last-child{border-bottom:none}.list-lines li div{flex:1;line-height:130%}.box-site{position:relative;display:flex;align-items:flex-end;margin-bottom:30px;overflow:hidden}.box-site__bg{display:block;aspect-ratio:16/7;border-radius:var(--rounded-large)}.box-site__top{position:absolute;top:20px;left:20px}.c-boxes-score{display:inline-flex}.c-boxes-score .box-score:is(:first-child){border-top-right-radius:0;border-bottom-right-radius:0}.c-boxes-score .box-score:is(:last-child){border-top-left-radius:0;border-bottom-left-radius:0}.c-boxes-score .box-score:not(:last-child){border-right:none}.c-boxes-score .box-score:not(:first-child):not(:last-child){border-radius:0}.box-score{--scoreBorder: var(--color-primary);display:inline-flex;flex-direction:column;border:1px solid var(--scoreBorder);border-radius:var(--rounded-normal);text-align:center;line-height:100%;font-size:10px;font-size:clamp(10px,7.8873239437px + 0.4225352113vw,16px)}.box-score--small{min-width:40px;border-radius:var(--rounded-small)}.box-score--small .box-score__top{padding:.6em .6em;font-size:9px}.box-score--small .box-score__bottom{width:100%;padding:.8em 0;font-size:14px;justify-content:center}.box-score__top{padding:.5em 1em}.box-score__top strong{font-weight:var(--font-medium)}.box-score__bottom{padding:.8em;border-top:1px solid var(--scoreBorder)}.box-score__note{display:flex;flex-direction:column}.box-score__note strong{display:block;font-size:1.65em}.box-score__note sub{margin-top:.2em;font-size:.9em;font-weight:normal}.box-figure{height:100%;padding:clamp(20px,4vw,80px);background:var(--bg-box-figure, #222);border-radius:var(--rounded-large)}.box-figure>*{width:100%}.box-figure figure{width:100%;border-radius:var(--rounded-normal);overflow:hidden}.swiper{overflow:hidden}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-pointer-events{touch-action:pan-y}.swiper-pagination{display:flex;gap:12px}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--color-primary);opacity:.2;cursor:pointer;transition:all .3s}.swiper-pagination-bullet:hover{opacity:1}.swiper-pagination-bullet-active{opacity:1}.swiper-button-disabled{visibility:hidden}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{transition-property:opacity}.swiper-fade .swiper-slide-active{z-index:999}[class*=slider-cards] .swiper-slide{width:var(--card-width);height:auto}.slider-cards--half-3 .swiper-slide{--card-width: 490px}.slider-cards--half-4 .swiper-slide{--card-width: 390px}.slider-sites{margin-bottom:1em}.slider-sites .swiper-wrapper{display:grid;grid-auto-flow:column}.slider-sites .swiper-slide{position:relative;display:flex;flex-direction:column}.slider-sites__nav{display:flex;justify-content:flex-end;
18gap:16px;padding-top:clamp(20px,3vw,48px)}.slider-sites__prev svg{transform:translateX(-1px)}.slider-sites__next svg{transform:translateX(1px)}.slider-sites .figure-rollover__file{aspect-ratio:var(--img-resizing-site);-o-object-fit:cover;object-fit:cover}.slider-carousel .navigation{display:flex;justify-content:flex-end;gap:16px;margin-top:24px}.slider-carousel .navigation svg{fill:var(--color-primary)}.slider-carousel .bt-nav{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:1px solid var(--color-primary);border-radius:50%;cursor:pointer}.slider-carousel .swiper-button-disabled{visibility:visible;opacity:.3}.slider-carousel .swiper-button-next{transform:scaleX(-1)}.slider-carousel .swiper-slide img{display:block;width:100%}.pagination{display:flex;justify-content:flex-end;gap:8px;margin-top:50px;font-weight:var(--font-bold)}.pagination__item{display:flex;justify-content:center;min-width:32px;border-radius:var(--rounded-normal);font-size:12px;color:var(--color-primary);transition:all .3s}.pagination__item--current,.pagination__item:hover{background:var(--bg-secondary);color:var(--color-white)}.pagination__prev{margin-right:1em}.pagination__next{margin-left:1em}.pagination .link-underlined{margin-top:auto;margin-bottom:auto;font-size:14px}@media(max-width: 576px){.pagination{justify-content:center}.pagination__item:nth-of-type(4),.pagination__item:nth-of-type(5){display:none}}.list-circle-notes{display:flex;gap:8px}.circle-note{display:flex;flex-direction:column}.circle-note__legend{text-align:center;font-size:12px;font-weight:400}.circle-note__bg{fill:none;stroke:#dedede;stroke-width:1}.circle-note__path{fill:none;stroke-width:1;stroke:var(--color-primary);animation:progress .6s ease-out forwards}.circle-note__note{font-size:8px;font-weight:var(--font-bold);line-height:100%;text-anchor:middle;transform:translateY(1px)}@keyframes progress{0%{stroke-dasharray:0 100}}.list-circle-notes-ani{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px}.circle-note-progress{position:relative;display:inline-block;display:flex;flex-direction:column}.circle-note-progress .box-circle{position:relative;display:flex;align-items:center;flex-direction:column;transition:all .3s}.circle-note-progress .box-circle .legend,.circle-note-progress .box-circle .percent{transition:all .3s}.circle-note-progress svg{display:block;transform:rotate(-90deg)}.circle-note-progress circle{fill:none;stroke:var(--color-primary);stroke-width:1}.circle-note-progress circle:nth-child(1){stroke-opacity:.3}.circle-note-progress circle:nth-child(2){stroke-dasharray:238.7610416728;stroke-dashoffset:238.7610416728}.circle-note-progress .circle{position:relative;display:flex;justify-content:center}.circle-note-progress .info{position:absolute;top:50%;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;padding-top:10px;line-height:100%;text-align:center;font-weight:var(--font-medium);transform:translateY(-50%)}.circle-note-progress .percent{display:inline-flex;font-size:34px;font-weight:var(--font-bold)}.figure-rollover{position:relative;display:block;transition:all .3s}.figure-rollover.is-large{font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px)}.figure-rollover.is-large .button{height:auto;padding:.7em 1.4em}.figure-rollover__hover{position:absolute;top:0;display:flex;align-items:flex-end;justify-content:space-between;width:100%;height:100%;padding:1.6em 1.6em 1.5em 1.6em;visibility:hidden;opacity:0;color:#fff;background:linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);z-index:2;transition:all .3s;pointer-events:none;box-sizing:border-box}.figure-rollover__hover svg{pointer-events:all;cursor:pointer}.figure-rollover__hover .figure-rollover__bt{pointer-events:auto}.figure-rollover__fixed-left{position:absolute;top:1.6em;left:1.6em;display:flex;align-items:center;gap:8px;z-index:2;pointer-events:none}.figure-rollover__fixed-left .button{pointer-events:auto}.figure-rollover__fixed-right{position:absolute;top:1.6em;right:1.6em;display:flex;align-items:center;gap:8px;z-index:2;pointer-events:none}.figure-rollover__fixed-right .button{pointer-events:auto}.figure-rollover__fixed-right-bottom{position:absolute;bottom:1.6em;right:1.6em;display:flex;align-items:center;gap:8px;z-index:2;pointer-events:none}.figure-rollover__center{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.figure-rollover__center *{pointer-events:all}.figure-rollover__right{display:flex;align-items:flex-end}.figure-rollover__right *{pointer-events:all}.figure-rollover__topright{display:flex;align-items:flex-end}.figure-rollover__topright *{pointer-events:all}.figure-rollover.has-hover-active .figure-rollover__hover{opacity:1;visibility:visible}.figure-rollover__link{display:block}.figure-rollover__file{display:block;width:100%;height:auto;-o-object-fit:cover;object-fit:cover}.figure-rollover__row{margin-bottom:.2em;line-height:120%;text-align:left}.figure-rollover__row:last-child{margin-bottom:0}.figure-rollover__bts{display:flex;gap:1em;margin-bottom:.3em}.figure-rollover__bt{margin:auto}.figure-rollover__bt svg{display:block;width:1em;height:auto}.figure-rollover__note{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;font-size:40px;font-weight:var(--font-bold);color:var(--color-white);background:rgba(0,0,0,.5);pointer-events:none}.figure-rollover small{font-size:.666em}.figure-rollover h3{font-size:1em;font-weight:var(--font-medium)}.figure-rollover:hover .figure-rollover__hover{opacity:1;visibility:visible}.c-load-more{margin-top:clamp(20px,6vw,60px);text-align:center}.total-grid{margin-bottom:clamp(24px,3vw,48px)}.header-grid{margin-bottom:clamp(24px,3vw,48px)}.header-grid__top{display:flex;justify-content:space-between;flex-wrap:wrap}.grid-awwwards{--minthumb: 250px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:clamp(20px,10vw,100px) var(--gutter)}@media(max-width: 576px){.grid-awwwards{--minthumb: 150px!important}}.grid-collections{--minthumb: 440px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:36px var(--gutter);padding-bottom:30px;font-size:15px}@media(min-width: 1600px){.grid-collections{--minthumb: 440px}}.grid-collections .is-double{grid-column:span 2}.grid-collections .card-banner{height:calc(100% - 47px);border-radius:var(--rounded-large)}.grid-collections .figure-rollover__file{aspect-ratio:var(--img-resizing-site)}.grid-elements-fit{display:grid;grid-template-columns:repeat(auto-fit, minmax(297px, 1fr));grid-gap:var(--gutter)}.grid-elements-fit .figure-rollover{border-radius:var(--rounded-large);overflow:hidden}.grid-elements-fit--small .figure-rollover{border-radius:var(--rounded-normal)}.card-banner{position:relative;height:100%;background:var(--card-bg, --bg-secondary);overflow:hidden}.card-banner[class*="--dark"]{color:var(--color-white)}
18.card-banner[class*="--dark"] .link-underlined{--color-underlined: var(--color-white-rgb)}.card-banner[class*="--s1"]{display:flex;flex-direction:column;justify-content:space-between}.card-banner[class*="--s1"] .card-banner__info{width:70%}.card-banner[class*="--s1"] .card-banner__title{margin-bottom:.6em}.card-banner[class*="--s1"] .card-banner__footer{position:relative;padding:clamp(24px,3vw,40px);text-align:right;line-height:100%}.card-banner[class*="--s2"]{min-height:350px}.card-banner[class*="--s2"] .card-banner__info{width:500px;max-width:100%}.card-banner[class*="--s2"] .users-credits{margin:1em 0 1.5em 0}.card-banner[class*="--s2"] .users-credits__cards{--bg-primary: var(--bg-secondary)}.card-banner[class*="--s2"] .sticker-svg{position:absolute;top:12%;right:60%;width:clamp(80px,8vw,140px)}.card-banner__info{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,64px)}.card-banner__title{line-height:120%}.card-banner__photo{position:absolute;top:0;right:0;width:100%;height:100%}.card-banner__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.grid-cards{--minthumb: 350px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));gap:30px var(--gutter)}.grid-cards[data-cols="2"]{--minthumb: 594px}.grid-cards[data-cols="3"]{--minthumb: 444px}.grid-cards[data-cols="4"]{--minthumb: 350px}@media all and (max-width: 1490px){.grid-cards--one-row[data-cols="3"]>li:last-child{display:none}}@media all and (max-width: 1578px){.grid-cards--one-row[data-cols="4"]>li:last-child{display:none}}@media all and (max-width: 1184px){.grid-cards--one-row[data-cols="4"]>li:nth-last-child(2){display:none}}@media(max-width: 576px){.grid-cards--one-row[data-cols]>li{display:block}}@media(max-width: 576px){.grid-cards[data-cols]{--minthumb: 310px}}.grid-academy{--minthumb: 360px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:clamp(24px,3vw,60px) var(--gutter)}.grid-academy--s2{grid-template-columns:repeat(12, 1fr);grid-auto-rows:auto}.grid-academy--s2 .grid-academy__item{grid-column:span 3}.grid-academy--s2 .grid-academy__item-lg{grid-column:span 4}.grid-academy--s2 .grid-academy__item-xl{grid-column:span 6}.grid-academy--s2 .grid-academy__item-full{grid-column:span 12}.grid-academy--s2 .pos-1{grid-row:2}.grid-academy--s2 .pos-2{grid-row:3}@media(max-width: 576px){.grid-academy--s2 .pos-1{grid-row:1}.grid-academy--s2 .pos-2:nth-of-type(even){grid-row:4}.grid-academy--s2 .pos-2:nth-of-type(odd){grid-row:7}}@media all and (max-width: 1280px){.grid-academy--s2 .grid-academy__item,.grid-academy--s2 .grid-academy__item-lg,.grid-academy--s2 .grid-academy__item-xl{grid-column:span 6}}@media all and (max-width: 700px){.grid-academy--s2{grid-template-columns:1fr;grid-column-gap:0}.grid-academy--s2 .grid-academy__item,.grid-academy--s2 .grid-academy__item-lg,.grid-academy--s2 .grid-academy__item-xl{grid-column:1}}@media(max-width: 1780px){.grid-academy--one-row>li:nth-last-child(-n+1){display:none}}@media(max-width: 1360px){.grid-academy--one-row>li:nth-last-child(-n+2){display:none}}.grid-courses{--minthumb: 350px;--itemDisplay: block;display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:var(--gutter);padding-bottom:30px;font-size:15px}.grid-courses .is-double{grid-column:span 2}@media(max-width: 1556px){.grid-courses--one-row>li:nth-last-child(-n+1){display:none}}@media(max-width: 1168px){.grid-courses--one-row>li:nth-last-child(-n+2){display:none}}.grid-courses .card-banner{border-radius:var(--rounded-large)}.grid-filters{display:flex;flex-wrap:wrap;gap:var(--gutter)}.grid-filters--header{margin-bottom:clamp(50px,6vw,100px)}.grid-filters__excerpt{margin-top:auto;width:300px;max-width:100%}.grid-filters__aside{width:360px;max-width:100%}.grid-filters__content{flex:1}@media(max-width: 576px){.grid-filters__aside{width:100%}}.grid-filters-sites{display:flex;flex-wrap:wrap;gap:3%}.grid-filters-sites__aside{position:sticky;top:0;width:300px;padding-right:10px;max-height:100vh;align-self:flex-start;overflow-y:auto}.grid-filters-sites__aside::-webkit-scrollbar{width:2px}.grid-filters-sites__aside::-webkit-scrollbar-thumb{background:#ededed}.grid-filters-sites__aside .menu-options{flex-direction:column;align-items:flex-start}.grid-filters-sites__aside .menu-options:not(:has(li)){display:none}.grid-filters-sites__aside .menu-options__placeholder{font-size:var(--text-size-small)}.grid-filters-sites__content{flex:1;min-width:350px}.aside-filter{background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.aside-filter.is-open .aside-filter__arrow path:nth-child(2){display:none}.aside-filter.is-open .aside-filter__content{max-height:300px;opacity:1;visibility:visible}.aside-filter:hover:not(.is-open) .aside-filter__arrow{transform:rotate(90deg)}.aside-filter__header{display:flex;justify-content:space-between;align-items:center;height:70px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.aside-filter__arrow{transition:all .3s}.aside-filter__content{visibility:hidden;max-height:0;opacity:0;overflow:hidden;transition:all .3s}.aside-filter__search{display:flex;justify-content:space-between;
18height:47px;margin-bottom:20px;background:#ededed;border-radius:var(--rounded-small)}.aside-filter__search-text{flex:1;padding:0 12px;background:rgba(0,0,0,0)}.aside-filter__search-button{padding:0 12px;background:rgba(0,0,0,0);border:none}.aside-filter__list{max-height:124px;margin-bottom:20px;color:var(--color-white);line-height:150%;overflow-y:auto;overflow-x:hidden}.aside-filter__list::-webkit-scrollbar{width:2px}.aside-filter__list::-webkit-scrollbar-track{background:#ededed}.aside-filter__list::-webkit-scrollbar-thumb{background-color:var(--color-primary)}.aside-filter__list a:after{content:"(" attr(data-count) ")";font-weight:var(--font-bold)}.grid-directory{--minthumb: 350px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:var(--gutter);padding-bottom:30px;font-size:15px}.grid-directory--pro{--minthumb: 480px;margin-bottom:var(--gutter);padding-bottom:0;overflow:hidden}.grid-directory--pro+.grid-directory{margin-top:40px}@media(max-width: 1600px){.grid-directory--pro>li:nth-last-child(-n+1){display:none}}.grid-directory--large{--minthumb: 600px}.grid-directory .is-double{grid-column:span 2}.grid-directory .card-banner{border-radius:var(--rounded-normal)}.grid-sites{--minthumb: 350px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:30px var(--gutter);padding-bottom:30px}.grid-sites--3cols{--minthumb: 440px}.grid-sites.is-large{--minthumb: 440px}.grid-jobs{--minthumb: 400px;--itemDisplay: block;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:var(--gutter);padding-bottom:30px;font-size:15px}@media(max-width: 2291px){.grid-jobs--one-row>li:nth-last-child(-n+1){display:none}}@media(max-width: 1925px){.grid-jobs--one-row>li:nth-last-child(-n+2){display:none}}@media(max-width: 1351px){.grid-jobs--one-row>li:nth-last-child(-n+3){display:none}}@media(max-width: 1024px){.grid-jobs--one-row>li:nth-last-child(-n+4){display:none}}.grid-jury{--minthumb: 285px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:var(--gutter);font-size:15px}@media(min-width: 1600px){.grid-jury{--minthumb: 426px}}.card-blog{display:flex;flex-direction:column;height:100%}.card-blog__header{flex:1;margin-bottom:2em}.card-blog__title{width:90%;font-size:20px;font-size:clamp(20px,10.8450704225px + 1.8309859155vw,46px);line-height:120%}.card-blog__figure{position:relative}.card-blog__excerpt{width:80%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;min-height:96px;overflow:hidden}.card-blog__by{display:flex;align-items:center;gap:12px;margin:2em 0}.card-blog__by .link-underlined{font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold)}.card-blog__media{display:block;width:100%;height:auto;border-radius:var(--rounded-normal);aspect-ratio:var(--img-resizing-site);-o-object-fit:cover;object-fit:cover}.card-blog__footer{margin-top:clamp(24px,3vw,48px);font-size:18px;font-size:clamp(18px,17.2957746479px + 0.1408450704vw,20px)}.card-blog .sticker-svg{position:absolute;top:10%;right:0;width:clamp(85px,9vw,170px);transform:translateX(50%);pointer-events:none}.c-loadmore{display:flex;justify-content:center;align-items:center;margin-block:clamp(20px,3vw,50px)}.slider-assets{margin-bottom:var(--gutter)}.slider-assets .swiper-slide{width:860px;max-width:100%}.slider-assets .card-slide .figure-rollover{border-radius:var(--rounded-normal)}@media(max-width: 576px){.slider-assets{overflow:visible}.slider-assets .swiper-wrapper{flex-direction:column;gap:var(--gutter);transform:none !important}}.card-awwward__figure{width:170px;max-width:100%;margin:0 auto}.card-awwward__figure:hover .card-awwward__media{transform:scale(1.05) translateY(-10px);filter:drop-shadow(0 6px 3px rgba(34, 34, 34, 0.4))}.card-awwward__figure svg{width:100%;transition:all .3s}.card-awwward__media{position:relative;max-width:100%;transition:all .3s}.card-awwward__caption{margin-top:1.4em;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:400;text-align:center;white-space:nowrap}.card-awwward__row{margin-top:1em;text-align:center}.card-awwward-mini{--card-width: 84px;--card-pad: 12px 8px 8px 8px;--card-bordertop: 7px;--card-titlesize: 12px;--card-rounded: 0;position:relative;width:var(--card-width);border-radius:var(--card-rounded);color:#222;line-height:100%;aspect-ratio:84/96;overflow:hidden}.card-awwward-mini--small{--card-width: 51px;--card-pad: 8px 5px;--card-bordertop: 3px;--card-titlesize: 8px;--card-rounded: 3px}.card-awwward-mini:hover .card-awwward-mini__bg{fill:#dedede}.card-awwward-mini__info{position:absolute;inset:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:var(--card-pad);border-top:var(--card-bordertop) solid var(--awwward-color)}.card-awwward-mini__number{font-size:var(--text-size-primary)}.card-awwward-mini__logo{width:20px}.card-awwward-mini__title{width:60px;max-width:100%;font-size:var(--card-titlesize);font-weight:normal;line-height:100%;text-align:left}.card-awwward-mini__bg{display:block;width:100%;height:100%;fill:#ededed;transition:all .3s}.card-asset{--card-pad-x: clamp(20px, 3vw, 30px);--card-pad-y: clamp(15px, 3vw, 26px);--card-border: 1px solid var(--border-gray);--card-bg: rgba(255, 255, 255, 0.6);--card-bt: var(--border-gray);display:flex;flex-direction:column;height:100%;background:var(--card-bg);border-radius:var(--rounded-normal);overflow:hidden}.card-asset__header{display:flex;flex-direction:column;flex:1;gap:12px;padding:var(--card-pad-x);line-height:normal}.card-asset__title{font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold);line-height:120%}.card-asset__content{flex:1;display:flex;flex-direction:column}.card-asset__list li{display:flex;justify-content:space-between;gap:20px;padding:var(--card-pad-y) var(--card-pad-x);border-top:var(--card-border);line-height:120%}.card-asset__list>div{display:flex;align-items:center}.card-asset__section{width:40%;flex-shrink:0}.card-asset__bts{display:flex;border-top:var(--card-border)}.card-asset__bt{flex:1;display:flex;justify-content:center;align-items:center;height:clamp(64px,5vw,94px);font-weight:var(--font-bold);transition:all .3s;transform:translateZ(0)}.card-asset__bt:hover{background:var(--color-white);color:#222}.card-asset__bt:nth-child(2){border-left:1px solid var(--card-border)}.card-asset__media{display:block;aspect-ratio:var(--img-resizing-site);-o-object-fit:cover;object-fit:cover;transition:all .3s}.card-asset__media:hover{filter:brightness(80%)}.card-asset .swiper{position:relative;overflow:visible}.card-asset .swiper-wrapper{border-radius:var(--rounded-normal);cursor:pointer;overflow:hidden}.card-asset .swiper-pagination{position:absolute;top:calc(100% + 30px);right:var(--card-pad-x)}.card-blog-full{position:relative}.card-blog-full__figure{grid-column:1/3;grid-row:1;width:100%;border-radius:var(--rounded-large);overflow:hidden}.card-blog-full__img{display:block;width:100%}
18.card-blog-full__entry{display:flex;flex-wrap:wrap;gap:var(--gutter);width:100%;margin-top:clamp(32px,5vw,180px)}.card-blog-full__desc{flex:1;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);margin:0 clamp(0px,5vw,140px);line-height:150%}.card-blog-full__more{margin:clamp(20px,4vw,60px) 0}.card-blog-full__box{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:clamp(20px,4vw,40px);background:#f8f8f8;border-radius:var(--rounded-normal);line-height:140%;font-size:var(--text-size-medium)}.card-blog-full .c-typography__photo{width:80%;margin:0 auto}.card-blog-full .c-typography__photo img{width:100%}.card-blog-full table{margin:0 auto}@media(max-width: 576px){.card-blog-full__entry{flex-direction:column}.card-blog-full__desc{margin:0}}.card-certificate{--color-line: rgba(0,0,0, 0.1);position:relative;display:flex;flex-direction:column;width:436px;max-width:100%;padding:5%;border-top:10px solid var(--color-award);background:var(--bg-3rd);aspect-ratio:430/610}.card-certificate__header{display:flex;justify-content:space-between;margin-bottom:16%}.card-certificate__logo{width:10%}.card-certificate__data{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:20%;line-height:100%;font-size:9px}.card-certificate__content{display:flex;flex-direction:column;flex:1}.card-certificate__title{padding:6% 0;font-size:18px;font-size:clamp(18px,17.2957746479px + 0.1408450704vw,20px);font-weight:var(--font-bold);line-height:120%;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}.card-certificate__by{padding:3% 0;font-size:14px;font-size:clamp(14px,13.2957746479px + 0.1408450704vw,16px);line-height:120%;border-bottom:1px solid var(--color-line)}.card-certificate__cover{display:flex;align-items:center;flex:1;padding:5% 0}.card-certificate__logo-text{display:flex;align-items:center;font-size:10px;font-weight:var(--font-medium);line-height:10px}.card-certificate__logo-text svg{fill:#acacac}.card-collection__info{display:flex;justify-content:space-between;align-items:center;padding-top:16px;line-height:100%}.card-collection__left{flex:1}.card-collection__right{flex-shrink:0}.card-collection__row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.card-collection__row a{color:var(--color-primary)}.card-collection__row h3{font-size:var(--text-size-primary);line-height:140%}.card-collection__footer{margin-top:12px;padding-top:16px;border-top:1px solid #f8f8f8}.card-collection .figure-rollover{border-radius:var(--rounded-large);overflow:hidden}.card-collection .figure-rollover__file{aspect-ratio:var(--img-resizing-site)}.card-course{--pad-content: 32px;display:flex;flex-direction:column;height:100%;background:var(--color-white);border-radius:var(--rounded-large);overflow:hidden}.card-course__figure{width:100%;overflow:hidden}.card-course__img{display:block;width:100%;height:auto}.card-course__content{flex:1;padding:var(--pad-content)}.card-course__title{margin-bottom:.4em;font-size:24px}.card-course__footer svg{display:block}.card-course__row{display:grid;grid-template-columns:50% 50%;padding:20px var(--pad-content);border-top:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;line-height:120%}.card-course__link{display:flex;justify-content:flex-end;padding:var(--pad-content)}.card-course .swiper{position:relative;width:100%}.card-course .swiper-pagination{position:absolute;bottom:28px;right:28px;z-index:10}.card-course a{color:var(--color-primary)}.card-course .circle-avatar__img{width:20px}.card-directory-sp{display:flex;flex-direction:column;height:100%;padding:clamp(24px,3vw,64px);background:var(--bg-secondary);border-radius:var(--rounded-normal);color:var(--color-white);overflow:hidden}.card-directory-sp__header{display:flex;justify-content:space-between}.card-directory-sp__title{font-size:26px;font-size:clamp(26px,17.5492957746px + 1.6901408451vw,50px);line-height:110%}.card-directory-sp__content{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-top:2em}.card-directory-sp__left{flex:1}.card-directory-sp__footer{display:flex;justify-content:space-between;margin-top:4em}.card-directory-sp .swiper{width:60%}.card-directory-sp .swiper-wrapper{height:auto;border-radius:var(--rounded-normal);overflow:hidden}
18.card-directory-sp .swiper-pagination{display:flex;justify-content:flex-end;margin-top:36px}.card-directory-sp .swiper-pagination-bullet{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all .3s}.card-directory-sp .swiper-pagination-bullet-active{background:var(--color-white)}.card-directory-sp .swiper img{display:block;aspect-ratio:var(--img-resizing-site);-o-object-fit:cover;object-fit:cover}.card-directory-sp .circle-avatar{margin-bottom:auto;font-size:var(--text-size-large)}.card-directory-sp .circle-avatar.hot{--avatar-bg: var(--bg-secondary)}.card-directory-sp .badget-reviews{position:relative;top:50px;border-color:rgba(255,255,255,.3)}.card-directory-sp a{color:var(--color-white)}.card-directory{--card-pad-x: clamp(20px, 3vw, 30px);--card-pad-y: clamp(15px, 3vw, 26px);--card-border: 1px solid var(--border-gray);--card-bg: var(--bg-white);--avatar-bg: var(--card-bg);display:flex;flex-direction:column;height:100%;background:var(--card-bg);border-radius:var(--rounded-normal);overflow:hidden}.card-directory__header{display:flex;padding:var(--card-pad-x);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold)}.card-directory__content{flex:1}.card-directory__media{display:block;width:100%;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover;border-radius:var(--rounded-normal);transition:all .3s}.card-directory__media:hover{filter:brightness(80%)}.card-directory__list{flex:1}.card-directory__list li{display:flex;gap:20px;padding:var(--card-pad-y) var(--card-pad-x);border-top:var(--card-border);line-height:120%}.card-directory__list>div{display:flex;align-items:center}.card-directory__section{width:40%;flex-shrink:0}.card-directory__awards{display:flex;align-items:center;gap:4px;font-weight:var(--font-bold)}.card-directory__awards .ico-svg{top:-1px;display:block}.card-directory .box-score--small{width:50px;max-width:-moz-max-content;max-width:max-content}.card-directory-basic{--card-pad-x: clamp(24px, 3vw, 36px);--card-pad: clamp(10px, 3vw, 16px) var(--card-pad-x);--card-border: 1px solid #383838;--card-bg: var(--bg-secondary);--card-color: #fff;display:flex;flex-direction:column;height:100%;background:var(--card-bg);border-radius:var(--rounded-normal);color:var(--card-color)}.card-directory-basic__header{padding:clamp(30px,3vw,60px) var(--card-pad-x);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px)}.card-directory-basic__header p:last-child{margin-bottom:0}.card-directory-basic__user sup{font-weight:300;font-size:.4em}.card-directory-basic__list{flex:1}.card-directory-basic__list li{display:flex;justify-content:space-between;gap:20px;padding:var(--card-pad);border-top:var(--card-border);line-height:120%}.card-directory-basic__list div:nth-child(2){text-align:right}.card-directory-basic__footer{display:flex;justify-content:flex-end;padding:var(--card-pad);padding-top:clamp(10px,3vw,30px);padding-bottom:clamp(10px,3vw,30px);border-top:var(--card-border)}.card-directory-basic .ico-svg{fill:var(--card-color)}.card-directory-basic a{color:var(--card-color)}.card-academy{--card-pad-x: clamp(20px, 3vw, 30px);--card-pad-y: clamp(10px, 3vw, 20px);--card-border: 1px solid #ededed;--card-bg: rgba(255, 255, 255, 0.9);position:relative;display:flex;flex-direction:column;height:100%;background:var(--card-bg);border-radius:var(--rounded-large);overflow:hidden;container-type:inline-size}.card-academy--dark{--card-bg: var(--bg-secondary);--color-link: #fff;--card-border: 1px solid #383838;color:#fff}.card-academy__figure{position:relative}.card-academy__figure .top-right{position:absolute;top:20px;right:20px;pointer-events:none}.card-academy__figure .bottom-right{position:absolute;bottom:20px;right:20px;pointer-events:none}.card-academy__figure .center{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}.card-academy__figure .center .ico-svg{display:block;opacity:.8}.card-academy__media{display:block;width:100%;-o-object-fit:cover;object-fit:cover;aspect-ratio:16/9;transition:all .3s}.card-academy__media:hover{filter:brightness(80%)}.card-academy__thumb{-o-object-fit:cover;object-fit:cover;aspect-ratio:16/9}.card-academy__tag{background:var(--color-learn);border:none;font-weight:600}.card-academy__info{display:flex;flex-direction:column;justify-content:space-between;
18height:100%}.card-academy__footer .card-academy__row{align-items:center;border-top:var(--card-border)}.card-academy__by{line-height:120%}.card-academy__title{font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);line-height:120%}.card-academy__title-large{font-size:18px;font-size:clamp(18px,13.0704225352px + 0.985915493vw,32px);line-height:100%}.card-academy__info-masterclass{padding-right:15%;min-width:280px}@container (max-width: 400px){.card-academy__info-masterclass{margin-bottom:12px;padding-right:0}}.card-academy__excerpt{margin-top:clamp(20px,4vw,28px);font-size:14px;font-size:clamp(14px,13.2957746479px + 0.1408450704vw,16px);line-height:1.4}.card-academy__row{display:flex;flex-wrap:wrap;gap:8px;padding:var(--card-pad-y) var(--card-pad-x)}.card-academy__row:first-child{padding-top:var(--card-pad-x);padding-bottom:var(--card-pad-x)}.card-academy__row>*:first-child{flex:1}.card-academy__row .budget-tag{position:relative;top:3px;font-weight:var(--font-bold);font-size:13px}.card-academy__desc{line-height:140%}.card-academy__more{display:flex;align-items:center}.card-academy__more .ico-svg{display:block}.card-academy__stats{display:flex;line-height:100%;font-size:14px;gap:var(--card-pad-x)}.card-academy__stat{display:flex;flex-direction:column;gap:6px}.card-academy__timer{--scoreBorder: #4e4e4e;margin-bottom:auto;border-radius:var(--rounded-small)}.card-academy__timer .box-score__top{padding:.5em;font-size:.8em;line-height:100%}.card-academy__icons{display:flex;flex-wrap:wrap;gap:clamp(8px,3vw,20px)}.card-academy__icon{display:flex;align-items:center;gap:8px;font-size:13px;line-height:100%}.card-academy__icon.lord-icon-color-2{color:var(--lord-icon-primary)}.card-academy__weeks{--scoreBorder: #ededed;background:#fff;margin-bottom:auto;color:#222;border-radius:var(--rounded-small)}.card-academy__weeks .box-score__top{padding:.5em;font-size:.8em;line-height:100%}.card-academy__weeks .box-score__bottom{padding:.4em;line-height:normal;font-size:.8em;font-weight:400}.card-academy__chars{display:flex;line-height:120%;font-size:12px;gap:3%}.card-academy__char{padding-left:8px;border-left:2px solid #ff0}.card-academy__score{width:100px}.card-academy__coming-soon{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:rgba(0,0,0,.8);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);line-height:160%;color:#fff;text-align:center;z-index:2}.card-academy__label{width:130px;color:var(--color-primary);border:1px solid rgba(0,0,0,.1);border-radius:var(--rounded-small);overflow:hidden}.card-academy__label>div{line-height:1.2;overflow:hidden}.card-academy__label>div:first-child{padding:8px 12px}.card-academy__label>div:has(.card-academy__marquee){padding-inline:0;background:#fa5d29;border-top:none;color:#fff}.card-academy__label>div.is-closed{background:var(--color-primary);color:#fff}.card-academy__marquee{display:flex;align-items:center;justify-content:flex-start;height:30px;overflow:hidden}.card-academy__marquee>*{will-change:transform;transform:translateX(0);white-space:nowrap;padding-inline:.5ch;animation:marquee_text 4s linear infinite}@keyframes marquee_text{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}.card-academy .box-score{width:100px;margin-bottom:8px;border:none;text-align:left}.card-academy .box-score__info{margin-bottom:12px;font-size:14px;line-height:14px}.card-academy .box-score__wrap{display:flex;align-items:center;position:relative;background-color:#ededed;border-radius:4px;overflow:hidden}.card-academy .box-score__bar{height:4px;background-color:var(--color-learn)}.box-price{display:flex;gap:8px;line-height:normal}.box-price__off{display:flex;flex-direction:column;padding-top:2px;font-size:12px;line-height:14px}.box-price__old{color:#fa5d29}.box-price__previous{color:#fa5d29;text-decoration:line-through}.box-price__previous strong{font-weight:400}.box-price__total{font-size:32px;line-height:1}.box-price__total sup{margin-left:4px;font-size:12px;font-weight:400}.box-price__amount{display:flex;gap:2px;height:27px;font-size:32px}.box-price__amount sup{font-size:14px;font-weight:400;transform:translateY(2px)}.box-price__currency{font-size:14px;font-weight:var(--font-medium)}.box-price__dto{font-size:9px}.box-price__right{display:flex;flex-direction:column;justify-content:space-between;line-height:normal;height:100%}.box-price__dec{display:flex;justify-content:space-between}.postit{position:absolute;top:0;right:0;width:260px;padding:20px clamp(16px,2vw,20px);background:var(--ch-bg, var(--color-learn-2));line-height:140%;border-radius:var(--rounded-large)}.postit p:last-child{margin-bottom:0}.card-job{--card-pad-x: clamp(20px, 3vw, 30px);--card-pad-y: clamp(10px, 3vw, 16px);--card-border: 1px solid #ededed;--card-bg: var(--color-white);--avatar-bg: var(--card-bg);display:flex;flex-direction:column;height:100%;background:var(--card-bg);border-radius:var(--rounded-large)}.card-job__header{display:flex;gap:8px;align-items:center;padding:var(--card-pad-x);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold);border-bottom:var(--card-border)}.card-job__header>div{display:flex}.card-job__header>div:nth-child(1){flex:1;overflow:hidden}.card-job__header .users-credits__item{flex-wrap:nowrap}.card-job__header .circle-avatar{flex-shrink:0}.card-job__tag{background:#fdede8;border:none}.card-job__content{flex:1;padding:var(--card-pad-x);line-height:150%}.card-job__title{margin-bottom:1em;font-size:18px;font-size:clamp(18px,17.2957746479px + 0.1408450704vw,20px);line-height:130%}.card-job__list{padding-bottom:var(--card-pad-y)}.card-job__list li{display:flex;justify-content:space-between;gap:20px;padding:var(--card-pad-y) var(--card-pad-x);border-top:var(--card-border);line-height:120%}.card-job__list div:nth-child(2){text-align:right}.card-job__ago{display:flex;align-items:center}.card-job__ago .ico-svg{top:-1px;margin-right:8px}.card-jury{--card-pad: clamp(10px, 3vw, 16px) clamp(20px, 3vw, 30px);--card-border: 1px solid var(--border-gray);--card-bg: var(--bg-white);--avatar-bg: var(--card-bg);display:flex;flex-direction:column;height:100%;background:var(--card-bg);border-radius:var(--rounded-normal)}.card-jury__header{padding:var(--card-pad);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold)}.card-jury__title{margin:clamp(10px,3vw,20px) 0;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);line-height:130%}.card-jury__figure img{display:block;width:100%;aspect-ratio:var(--img-resizing-site);-o-object-fit:cover;object-fit:cover;border-radius:var(--rounded-normal);transition:all .3s;filter:grayscale(1)}.card-jury__figure img:hover{filter:grayscale(1) brightness(80%)}.card-jury__list{flex:1}.card-jury__list li{display:flex;justify-content:space-between;gap:20px;padding:var(--card-pad);border-top:var(--card-border);line-height:120%}.card-jury__list div:nth-child(2){text-align:right}.card-jury__footer{display:flex;justify-content:space-between;padding:var(--card-pad);padding-top:clamp(10px,3vw,30px);padding-bottom:clamp(10px,3vw,30px);border-top:var(--card-border)}.card-jury__social{display:flex;align-items:center;gap:30px}.card-jury__social .ico-svg{display:block}
18.badget-reviews{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;height:60px;border:1px solid rgba(var(--color-primary-rgb), 0.1);border-radius:var(--rounded-normal);font-size:1em;line-height:120%}.badget-reviews__label{margin:2px 0;font-size:.8em}.badget-reviews__number{font-size:1.6em}.c-view-all{display:flex;flex-direction:column;justify-content:center;margin-top:clamp(30px,5vw,80px)}.c-view-all__row{display:inline-flex;justify-content:center;align-items:center;gap:20px}.c-view-all__ico-left{vertical-align:text-bottom;margin-right:4px}.add-card{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:wrap;gap:var(--gutter);height:100%;min-height:300px;border:1px solid #ededed;background:#f8f8f8;border-radius:var(--rounded-normal)}.add-card__content{padding:30px;text-align:center;line-height:150%}.add-card__content p:not(:last-child){margin-bottom:2em}.add-card .button{min-width:180px}.card-masterclass{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vw,60px);border-radius:var(--rounded-large);aspect-ratio:1/1;color:#fff;overflow:hidden}.card-masterclass--soon{pointer-events:none}.card-masterclass--soon:has(a){pointer-events:all}.card-masterclass--soon .card-masterclass__bottom{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}.card-masterclass--soon .card-masterclass__photo{filter:brightness(40%)}.card-masterclass__top,.card-masterclass__bottom{position:relative;pointer-events:none;z-index:2}.card-masterclass__logo{max-width:15vw;width:auto;max-height:80px}.card-masterclass__photo{position:absolute;inset:0;width:100%;height:100%;z-index:-1;-o-object-fit:cover;object-fit:cover}.card-masterclass__bt{position:absolute;bottom:0;right:0;width:220px;max-width:30vw;height:60px;text-align:center;font-size:18px;border-bottom:10px solid var(--color-masterclass)}.card-masterclass__title{line-height:100%;width:600px;max-width:100%;margin:.2em 0}.card-site-full__credits{display:flex;justify-content:center;margin-top:clamp(30px,5vw,80px);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold)}.card-site-full__more{margin-top:clamp(30px,5vw,60px);text-align:center}.card-site-full .figure-rollover{width:100%;border-radius:var(--rounded-large);overflow:hidden}.card-site-mini{display:flex;align-items:center;gap:20px}.card-site-mini__figure{flex-shrink:0;position:relative;border-radius:var(--rounded-small);overflow:hidden}.card-site-mini__title{font-size:1em}.card-site-mini a{color:var(--color-primary)}.card-site{font-size:15px}.card-site__left{flex:1;display:flex;align-items:center}.card-site__right{display:flex;gap:16px;flex-shrink:0;padding-left:20px}.card-site__info{display:flex;flex-wrap:wrap;padding-top:16px}.card-site__row{display:flex;align-items:center;gap:8px}.card-site__award{font-weight:var(--font-medium)}.card-site__title{font-size:15px;line-height:150%}.card-site__desc p{margin:.4em 0 0 0;line-height:150%}.card-site__awards{display:flex;align-items:center;gap:8px}.card-site .figure-rollover{border-radius:var(--rounded-small);overflow:hidden}.card-site .figure-rollover__file{aspect-ratio:var(--img-resizing-site)}@media(max-width: 576px){.card-site__info{overflow:hidden}}.card-site-2{display:flex;flex-direction:column;height:100%;background:var(--bg-white);border-radius:var(--rounded-normal)}.card-site-2__info{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,30px)}.card-site-2__row{display:flex;justify-content:space-between}.card-site-2__row:has(.card-site-2__category){gap:20px}.card-site-2__row div:nth-child(2){flex-shrink:0;text-align:right}.card-site-2__title{font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);line-height:120%}.card-site-2__vote-now{display:flex;flex-direction:column;gap:20px;margin-top:20px}.card-site-2 .figure-rollover{border-radius:var(--rounded-normal);overflow:hidden}.card-site-2 .figure-rollover:hover{filter:brightness(90%)}.card-site-2 .figure-rollover__file{aspect-ratio:var(--img-resizing-site)}.card-video{position:relative;display:inline-flex;color:var(--color-white);overflow:hidden}.card-video__header{position:absolute;top:28px;left:28px;z-index:9}.card-video__footer{position:absolute;bottom:28px;right:28px}.card-video-v{--colorCard: #fff;position:relative;border-radius:var(--rounded-large);aspect-ratio:50/74;color:var(--colorCard);overflow:hidden}.card-video-v:hover .card-video-v__media{filter:brightness(90%);transform:scale(1.05)}.card-video-v__media{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:all .3s}.card-video-v__info{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(20px,6vw,44px)}.card-video-v__footer{display:flex;gap:20px}.card-video-v__title{font-size:24px;font-size:clamp(24px,19.7746478873px + 0.8450704225vw,36px);line-height:120%}.card-video-v__title+div{margin-top:1em}.card-video-v__ico{display:flex;align-items:flex-end;flex-shrink:0}.l-news{position:relative;padding:clamp(40px,6vw,120px) clamp(0px,6vw,100px);border-radius:var(--rounded-large)}.l-news--dark{--bg-primary: var(--bg-secondary);--color-primary: var(--color-white);--color-primary-rgb: 255, 255, 255;background:var(--bg-secondary);color:var(--color-white)}.l-news--style1{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(3, auto)}.l-news--style1 .l-news__item{width:clamp(100px,33vw,608px)}.l-news--style1 .l-news__item:nth-child(1){grid-column:1/3;justify-self:end}.l-news--style1 .l-news__item:nth-child(3){grid-area:3/2;justify-self:end;margin-top:-40%}.l-news--style1 .grid-title{margin-top:2rem}.l-news--style1 .grid-title__cell:nth-child(1),.l-news--style1 .grid-title__cell:nth-child(4){grid-column:1/3}.l-news--style1 .grid-title__cell:nth-child(2){position:relative;
18left:-20%}.l-news--style1 .grid-title span{position:relative}.l-news--style1 .grid-title sup.grid-title__subtitle{position:absolute;bottom:calc(100% + 2rem);left:0;font-size:var(--text-size-primary);font-weight:300}.l-news--style1 .grid-title sup.grid-title__desc{position:absolute;top:calc(100% + 2rem);left:0;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:300;text-align:left;line-height:150%;font-weight:300;color:#7a7a7a}.l-news--style1 .grid-title svg{margin-left:-0.1em;width:.7em;height:auto}.l-news--style1 p{color:#7a7a7a}.l-news--style2{display:grid;grid-template-columns:auto auto;grid-template-rows:repeat(2, auto);justify-content:space-evenly;width:100%;margin:0 auto;padding:0}.l-news--style2 .l-news__item:nth-child(odd){padding-right:0}.l-news--style2 .l-news__item:nth-child(odd) .card-blog{width:350px;max-width:100%}.l-news--style2 .l-news__item:nth-child(odd) .card-blog__title{width:100%}.l-news--style2 .l-news__item:nth-child(1){grid-column:2/3}.l-news--style2 .l-news__item:nth-child(2){grid-row:1/3;align-self:center}.l-news--style2 .l-news__item:nth-child(3){grid-area:2/2;justify-self:end;margin-top:40%}.l-news--style2 .card-blog{display:block;width:657px;max-width:100%}.l-news--style2 .card-blog__title{width:500px;max-width:100%;font-size:30px}.l-news .card-element{margin:0 auto 5vw auto}.l-news .list-elements{margin:4vw 0}.l-news p{margin-bottom:1.5em;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);line-height:140%}.l-news .ico-svg{fill:var(--color-primary)}@media(max-width: 1023px){.l-news--style1{display:flex;flex-direction:column;gap:var(--gutter);padding:0}.l-news--style1 .l-news__item{width:100%}.l-news--style1 .l-news__item:nth-child(1){display:flex;justify-content:flex-end;width:100%}.l-news--style1 .l-news__item:nth-child(3){margin-top:0}.l-news--style1 .l-news__item .grid-title{width:-moz-min-content;width:min-content}.l-news--style2{display:flex;flex-direction:column;gap:var(--gutter);padding:0}.l-news--style2 .l-news__item{width:100%}.l-news--style2 .l-news__item:nth-child(2){margin-top:0}.l-news--style2 .l-news__item:nth-child(3){margin-top:0}}.card-slide__info{display:flex;justify-content:space-between;flex-wrap:wrap;padding-top:24px}.card-slide__title{margin-bottom:.5em;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px)}.card-slide__title a{color:var(--color-primary)}.card-slide__data{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.card-slide .is-truncated{flex:1}.card-slide .is-truncated .avatar-name{flex:1}.card-slide .is-truncated .avatar-name__name{flex:1;display:flex}.card-slide .is-truncated .avatar-name .link-underlined{flex:1;width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-slide__row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%}.card-slide__row .card-slide__title{margin-bottom:0}.card-slide__row .link-underlined{font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);font-weight:var(--font-bold)}.card-slide__row small{position:relative;top:.2em;margin:0 .3em;font-weight:300;font-size:.75em;line-height:100%}.card-slide .figure-rollover{border-radius:var(--rounded-large);overflow:hidden}.content-dropdown-tags{position:relative}.content-dropdown-tags.is-active .button{background:var(--bg-secondary);color:var(--color-white)}.content-dropdown-tags.is-active .dropdown-tags{opacity:1;visibility:visible}.dropdown-tags{position:absolute;top:calc(100% + 10px);right:0;width:600px;max-width:calc(100vw - 48px);max-height:400px;padding:30px;border-radius:var(--rounded-normal);background:var(--bg-secondary);overflow-y:auto;cursor:default;opacity:0;visibility:hidden;transition:all .3s;z-index:4;overflow:auto;overscroll-behavior:contain}.dropdown-tags--top-right{top:auto;bottom:calc(100% + 16px);right:0}.dropdown-tags.is-show{opacity:1;visibility:visible}.dropdown-tags__label{margin-bottom:20px;text-align:left;font-size:var(--text-size-small);color:#a7a7a7;line-height:100%}.dropdown-tags__close{position:absolute;top:10px;right:10px;padding:10px;cursor:pointer}.dropdown-tags__close svg{display:block;fill:#fff}.dropdown-tags .list-tags+.dropdown-tags__label{margin-top:30px}.dropdown-tags .button{border-color:rgba(255,255,255,.4)}.dropdown-tags .button:hover{border-color:rgba(255,255,255,.4)}.c-tags{display:flex;width:1100px;max-width:100%;margin:0 auto}.c-tags .list-tags{justify-content:center}.c-tags-row{position:relative;display:flex;gap:16px;margin:20px 0}.c-tags-row__left{flex:1;height:40px;overflow:hidden}.c-tags-row .more-tags{position:absolute;right:0}.modal{--pad-modal: 30px;--pad-large-modal: 50px;--pad-modal-box: clamp(24px, 3vw, 48px);position:fixed;inset:0;display:flex;justify-content:center;align-items:center;min-height:100%;height:auto;padding:var(--pad-modal) 0;background-color:rgba(0, 0, 0, var(--modal-alpha));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;z-index:10;transition:all .4s}.modal.is-visible{visibility:visible;opacity:1}.modal.is-visible .modal__content{opacity:1}.modal[class*="--white"]{background-color:rgba(255,255,255,.7)}.modal[class*="--fullscreen"]{padding:0}.modal[class*="--fullscreen"] .modal__content{width:100%;height:calc(100% - 30px);margin-bottom:0}.modal[class*="--x-large"] .modal__content{width:calc(100% - 52px)}.modal[class*="--large"] .modal__content{width:1142px}.modal[class*="--medium"] .modal__content{width:900px}.modal[class*="--small"] .modal__content{width:600px}.modal[class*="--bottom"]{padding-bottom:0;align-items:flex-end}.modal[class*="--bottom"].is-visible .modal__content{transform:translateY(0)}.modal[class*="--bottom"] .modal__content{margin:0;
18transform:translateY(300px);transition:transform .6s}.modal[class*="--bottom"] .modal__box{border-bottom-left-radius:0;border-bottom-right-radius:0}.modal__content{position:relative;display:inline-block;width:840px;max-width:100%;margin:auto 0;opacity:0;transition:opacity .6s .2s}.modal__box{padding:3em;padding:var(--pad-modal-box);background:var(--bg-primary);border-radius:var(--rounded-large)}.modal__box--dark{background:var(--bg-secondary);color:var(--color-white)}.modal__video{position:relative;border-radius:var(--rounded-large);overflow:hidden}.modal__sotd-document{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--bg-primary);overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;border-radius:var(--rounded-normal)}.modal .header-floating{top:0;position:sticky;display:flex;align-items:center}.modal .bt-nav{position:fixed;bottom:40px;right:40px;z-index:9}.header-col{display:flex;margin-bottom:clamp(50px,20vw,100px)}.header-col>div{flex:1}.l-register{display:flex;min-height:100vh}.l-register__left{position:relative;width:60%}.l-register__right{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:40%;min-width:700px}.l-register__bg{position:absolute;top:0;left:0;width:100%;height:100vh;-o-object-fit:contain;object-fit:contain}.l-register__content{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:0 40px}.l-register__top,.l-register__bottom{padding:clamp(30px,4vw,60px) 0}.l-register__logo{position:absolute;top:40px;left:40px;display:inline-flex;align-items:center;gap:16px;margin-bottom:clamp(30px,4vw,60px)}.l-register__logo svg:nth-child(1){width:71px;height:auto;fill:var(--color-primary)}.l-register__logo .sticker-svg{width:clamp(40px,5vw,80px)}.l-register .content-tabs{width:580px;max-width:100%;height:100%}.l-register .content-tabs__item{height:100%}@media(max-width: 576px){.l-register__left{display:none}.l-register__right{width:100%;min-width:auto}}.m-login{--min-height-login: 693px;position:relative;width:100%;min-height:var(--min-height-login);border-radius:var(--rounded-large);overflow:hidden}.m-login__container{display:flex;justify-content:space-between;min-height:var(--min-height-login)}.m-login__container>div{flex:1}.m-login__left{background:var(--bg-3rd)}.m-login__right{background:var(--bg-white)}.m-login__inner{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:var(--pad-large-modal)}.m-login__title{margin-bottom:1.5em;font-size:var(--text-size-large);font-weight:normal}.m-login__logo{display:flex;justify-content:center;align-items:center;gap:2vw;font-size:162px}.m-login__logo svg{width:auto;height:1em}.m-login__logo svg:nth-child(1){height:.4em}.m-login__forgot{margin-top:-1em;text-align:right;font-size:.8em}.m-login__social{display:flex;flex-wrap:wrap;gap:16px}.m-login__social .button{flex:1}.m-login__or{margin-top:2em}.m-login .button[class*=full]{margin-top:.5em}.m-alert__header{display:flex;justify-content:space-between;margin-bottom:clamp(40px,5vw,80px)}.m-alert__header img{margin:auto 0}.m-alert__top{margin-bottom:2em}.m-alert__title{font-size:var(--text-size-large);font-weight:300}.m-alert__bts{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--gutter);margin-top:var(--pad-modal-box)}.m-alert__bts .button{flex:1;min-width:min(12em,100%)}.m-alert__content .list-cart{margin-bottom:40px}.m-alert__content .list-cart__item{padding:clamp(12px,4vw,16px)}.m-cookies__bottom{display:flex;align-items:center;flex-wrap:wrap;gap:16px 0;margin-top:clamp(30px,5vw,50px)}.m-cookies__bottom div:first-child{flex:1}.m-cookies__list li{display:flex;align-items:center;flex-wrap:wrap;padding:16px 0;line-height:130%;background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.m-cookies__list div:first-child{flex:1}.cookies-popup{position:fixed;right:30px;bottom:-50%;width:400px;max-width:100%;padding:clamp(20px,5vw,30px);background:var(--bg-secondary);color:#fff;border-radius:var(--rounded-normal);z-index:10;opacity:0;transition:all .4s}.cookies-popup.is-show{opacity:1;bottom:30px}.cookies-popup .button:hover{background:#7a7a7a}.c-heading{position:relative;margin-bottom:clamp(40px,5vw,96px);font-weight:400}.c-heading--small .c-heading__top{margin-bottom:1rem}.c-heading--small .c-heading__middle+.c-heading__bottom{margin-top:1em}.c-heading--small .c-heading__short-desc{width:500px}.c-heading__top{margin-bottom:clamp(20px,3vw,24px);font-weight:400}.c-heading__top .text-default{font-weight:400}.c-heading__middle+.c-heading__bottom{margin-top:1em}.c-heading__short-desc{display:inline-block;width:360px;max-width:100%;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px)}.c-heading__large-desc{display:inline-block;width:900px;max-width:100%;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px)}.c-heading__by{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,2vw,30px);font-size:16px;font-size:clamp(16px,14.5915492958px + 0.2816901408vw,20px)}.c-heading__by small{font-size:.6em}.c-heading__between{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}.c-heading .heading-1{position:relative;display:inline-block}.subtitle-center{display:flex;justify-content:center;align-items:center;margin-bottom:clamp(30px,5vw,80px);font-size:18px;font-size:clamp(18px,17.2957746479px + 0.1408450704vw,20px)}.subtitle-center--bottom{margin-top:clamp(30px,5vw,80px)}.subtitle-center .bt-ico-left{margin-left:1em}.text-subtitle-narrow{display:inline-block;width:360px;max-width:100%}.heading-underlined{margin-bottom:3em;font-size:var(--text-size-primary);font-weight:normal}.heading-underlined__text{display:inline-block;border-bottom:1px solid var(--color-primary)}
18.heading-section{display:flex;justify-content:space-between;align-items:center;height:71px;margin-bottom:48px;background:var(--bg-primary);background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.heading-section.sticky{position:sticky;top:71px;z-index:1}.heading-section__left{display:flex;align-items:center;gap:8px;height:100%}.heading-section__right{display:flex;align-items:center}.heading-section__title{min-width:150px;font-size:var(--text-size-primary);font-weight:var(--font-medium)}.heading-section .menu-tabs{display:flex;align-items:center;flex-wrap:wrap;height:100%}@media(max-width: 768px){.heading-section.sticky{position:static}.heading-section__left{width:100%}.heading-section__right{display:none}.heading-section__title{min-width:auto;padding-right:12px}.heading-section .menu-tabs{width:100%;overflow-x:auto}.heading-section:has(.menu-tabs>li:nth-child(1)){height:auto}.heading-section:has(.menu-tabs>li:nth-child(1)) .heading-section__title{padding-right:0;font-size:1.4em}.heading-section:has(.menu-tabs>li:nth-child(1)) .heading-section__left{width:100%;flex-direction:column;flex-wrap:wrap}.heading-section:has(.menu-tabs>li:nth-child(1)) .menu-tabs{flex-wrap:nowrap}.heading-section:has(.menu-tabs>li:nth-child(1)) .menu-tabs li{padding-bottom:16px}}.tb-stats{border-collapse:separate;border-spacing:0;margin:0 auto}.tb-stats th,.tb-stats td{border-right:1px solid var(--border-table);border-bottom:1px solid var(--border-table)}.tb-stats th:first-child,.tb-stats td:first-child{border-left:1px solid var(--border-table)}.tb-stats th{padding:clamp(8px,2vw,16px);border-top:1px solid var(--border-table);font-size:var(--text-size-small);font-weight:var(--font-medium);text-transform:uppercase;line-height:120%}.tb-stats td{padding:clamp(8px,2vw,20px) clamp(8px,2vw,16px);font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px);line-height:120%}.tb-stats tr:first-child th:first-child{border-top-left-radius:var(--rounded-normal)}.tb-stats tr:first-child th:last-child{border-top-right-radius:var(--rounded-normal)}.tb-stats tr:last-child td:first-child{border-bottom-left-radius:var(--rounded-normal)}.tb-stats tr:last-child td:last-child{border-bottom-right-radius:var(--rounded-normal)}.tb-dotteds{--button-pad: 16px;width:100%;line-height:120%;font-weight:400}.tb-dotteds__bts{display:inline-flex;gap:12px}.tb-dotteds th{padding:clamp(10px,2vw,28px);background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x;font-weight:normal}.tb-dotteds tr{position:relative;transition:all .3s}.tb-dotteds tr:hover:not(:has(th)){background:var(--color-odd-rows)}.tb-dotteds td{padding:clamp(10px,2vw,36px) clamp(10px,2vw,28px);background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x;font-size:var(--text-size-medium)}.tb-dotteds .button{font-size:1rem}.tb-dotteds .text-truncated{max-width:300px}.palette__desc{width:300px;margin-bottom:2em;font-size:16px;font-size:clamp(16px,14.5915492958px + 0.2816901408vw,20px)}.palette__list{display:flex;justify-content:center}.list-palette{--palette-width: 400px;--palette-margin: 300px;--palette-margin-neg: -300px;--palette-height: 580px;--palette-pad: 30px;--palette-pad-neg: -30px;position:relative;display:inline-flex;box-sizing:content-box}.list-palette--h{padding-left:var(--palette-margin)}.list-palette--h li{margin-left:var(--palette-margin-neg);transition:all .3s}.list-palette--h li:hover:not(:last-child){margin-right:var(--palette-margin)}.list-palette--h li:hover:not(:last-child) .list-palette__item{margin-right:var(--palette-pad-neg);padding-right:var(--palette-pad);border-top-right-radius:0;border-bottom-right-radius:0}.list-palette--h li:hover:not(:last-child) .list-palette__header{transition-delay:.3s;opacity:1}.list-palette--h li:not(:last-child) .list-palette__header{opacity:0}
18.list-palette--v{padding-left:var(--palette-margin)}.list-palette--v li{margin-left:var(--palette-margin-neg);transition:all .3s}.list-palette--v li:not(:last-child) .list-palette__header{opacity:0}.list-palette--v li:hover{z-index:2}.list-palette--v li:hover .list-palette__bts,.list-palette--v li:hover .list-palette__header{opacity:1}.list-palette--v .list-palette__item{height:auto}.list-palette--v .list-palette__footer{display:none}.list-palette--v .list-palette__bts{opacity:0;transition:all .3s}.list-palette__item{display:inline-flex;flex-direction:column;justify-content:space-between;width:var(--palette-width);height:var(--palette-height);border-radius:var(--rounded-large);color:var(--color-card, --color-primary);overflow:hidden;transition:all .3s}.list-palette__box{display:inline-flex;flex-direction:column;justify-content:space-between;height:100%;padding:var(--palette-pad)}.list-palette__header{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;font-size:20px;transition:all .3s}.list-palette__footer{text-align:right}.list-palette__aa{font-size:75px;font-size:clamp(75px,48.5915492958px + 5.2816901408vw,150px);font-weight:400;line-height:60%;transition:all .3s}.list-palette__bts{display:flex;align-items:center;gap:var(--gutter)}.list-palette__bt{display:flex;align-items:stretch;cursor:pointer;transition:all .3s}.list-palette__bt:hover{opacity:.7}@media(max-width: 1024px){.list-palette{--palette-width: 200px;--palette-margin: 170px;--palette-margin-neg: -170px;--palette-pad: 15px;--palette-pad-neg: -15px}.list-palette__header{font-size:var(--text-size-primary)}}.marquee-text{display:flex;align-items:center;justify-items:center;overflow:hidden}.marquee-text div{padding-right:.5ch;white-space:nowrap}.heading-svg{position:relative;margin:clamp(20px,6vw,60px) 0;line-height:100%}.heading-svg__title{width:100%;height:auto;fill:var(--color-primary);font-weight:var(--font-bold)}.heading-fit{container-type:inline-size;margin:clamp(20px,6vw,60px) 0;text-align:center;border:1px solid red}.heading-fit__title{display:block;font-weight:var(--font-bold);font-size:var(--font-size);line-height:1em;transform:translateY(0.07em);white-space:nowrap}.c-collect{--gray-collect: #a7a7a7;--height-modal: 591px;display:flex;justify-content:space-between;flex-wrap:wrap;background:var(--bg-primary);border-radius:var(--rounded-large);overflow:hidden}.c-collect__left{display:flex;justify-content:space-between;flex-direction:column;flex:1;min-width:min(12em,100%);min-height:var(--height-modal);background-color:#ededed}.c-collect__right{flex:1}.c-collect__inner{width:100%;padding:0 var(--pad-large-modal)}.c-collect__media{flex:1;display:flex;justify-content:center}.c-collect__thumb{width:380px;margin:auto;border-radius:var(--rounded-normal)}.c-collect__header{display:flex;align-items:center;height:140px}.c-collect__title{font-size:var(--text-size-large)}.c-collect__footer{display:flex;align-items:center;height:140px}.c-collect__search{--height-input: 32px;position:relative;margin:50px 0}.c-collect__search input{width:100%;height:var(--height-input);background:rgba(0,0,0,0)}.c-collect__search input::-moz-placeholder{color:var(--gray-collect);font-size:10px;text-transform:uppercase}.c-collect__search input::placeholder{color:var(--gray-collect);font-size:10px;text-transform:uppercase}.c-collect__search button{position:absolute;top:0;right:0;width:var(--height-input);height:var(--height-input);background:rgba(0,0,0,0);border:none;display:flex;justify-content:center;align-items:center}.c-collect__search svg{stroke:var(--gray-collect)}.c-collect .list-collections{max-height:319px;overflow-y:auto}.c-collect__form{display:flex;flex-direction:column;width:100%;min-height:var(--height-modal)}.c-collect__form .rows{flex:1;margin-top:50px}.c-collect__form .row{margin-bottom:2rem}.c-collect__bts{display:flex;gap:12px;width:100%}.c-collect__bts [class*="--full"]{flex:1}.c-collect__saved{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;min-height:var(--height-modal);font-size:var(--text-size-large);text-align:center;line-height:170%}.c-collect__saved-thumb{display:flex;justify-content:center;gap:20px}.c-collect__saved-thumb .logo{width:20%;height:auto}.c-collect__saved-thumb img{width:30%;border-radius:var(--rounded-normal)}.list-collections__item{display:flex;justify-content:space-between;padding:20px var(--pad-large-modal);background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.list-collections__left{display:flex;align-items:center;gap:12px}.list-collections__number{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:var(--rounded-normal);background:#ededed}.head-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:clamp(20px,3vw,50px)}.head-toolbar__left{display:inline-flex;align-items:center;gap:16px}.head-toolbar__right{display:flex}.head-toolbar:has([data-collection-count]) .head-toolbar__left{gap:0}.toolbar-bts{--toolbar-gutter: 40px;display:inline-flex;gap:var(--toolbar-gutter)}.toolbar-bts__item{position:relative;display:flex;cursor:pointer;transition:all .3s}.toolbar-bts__item:hover .ico-svg{opacity:.5}.toolbar-bts .ico-svg{display:block;
18fill:var(--color-primary)}.toolbar-bts__share{position:absolute;top:50%;right:-17px;display:flex;align-items:center;gap:var(--toolbar-gutter);height:45px;padding:0 20px;background:var(--bg-secondary);border-radius:45px;transform:translateY(-50%);opacity:0;visibility:hidden;transition:all .3s}.toolbar-bts__share.is-show{opacity:1;visibility:visible}.toolbar-bts__share .ico-svg{display:block;width:16px;fill:var(--color-white);opacity:.5}.toolbar-bts__share .ico-svg:hover{opacity:1}.toolbar-bts__close{cursor:pointer}.toolbar-bts__close .ico-svg{opacity:1}.filter-box{--pad-box: clamp(20px, 6vw, 30px);margin-bottom:4px;padding:var(--pad-box) 0;background:var(--bg-4rd);border-radius:var(--rounded-normal);font-weight:400}.filter-box__title{margin-bottom:8px;padding:0 var(--pad-box);font-size:18px;font-weight:var(--font-bold)}.filter-box__item{line-height:3em}.filter-box__item.is-open .filter-box__item-head{background:var(--color-learn)}.filter-box__item.is-open .filter-box__arrow{transform:rotate(180deg)}.filter-box__item.is-open .filter-box__sublist{max-height:300px;margin-bottom:1em;opacity:1;visibility:visible}.filter-box__item-head{display:flex;justify-content:space-between;padding:0 var(--pad-box);cursor:pointer;transition:all .3s}.filter-box__item-head:hover{background:var(--bg-3rd)}.filter-box__item-link{display:block;padding:0 var(--pad-box);line-height:2.8em;transition:all .3s}.filter-box__item-link:hover{background:var(--bg-3rd)}.filter-box .is-active{font-weight:var(--font-bold)}.filter-box .is-active ul{font-weight:normal}.filter-box__sublist{visibility:hidden;max-height:0;opacity:0;overflow:hidden;transition:all .3s}.filter-box__sublist .filter-box__item-link{padding-left:clamp(40px,6vw,60px);line-height:2.5em}.filter-box__arrow{opacity:.3}.tags-info{position:relative;display:grid;grid-template-columns:50% 50%;margin:clamp(30px,4vw,60px) 0}.tags-info--s2{display:flex;flex-direction:column;align-items:center}.tags-info--s2 .tags-info__right{width:40%;margin:0 auto;text-align:center}.tags-info--s2 .tags-info__right>p{margin:0 auto}.tags-info--s2 .tags-info__title{margin-bottom:.4em}@media(max-width: 1024px){.tags-info--s2 .tags-info__right{width:100%}}.tags-info__right>p{width:740px;max-width:100%}.tags-info__title{font-size:28px;font-size:clamp(28px,18.1408450704px + 1.9718309859vw,56px);line-height:100%}.tags-info__subtitle{font-size:1rem;font-weight:300}.tags-info__read-more{display:flex;gap:10px;margin-top:clamp(1em,3vw,2em)}.tags-info__read-more .link-underlined{margin:auto 0}.tags-info__more p:first-child{margin-top:1em}.l-msg{width:700px;max-width:100%;margin:0 auto;text-align:center}.l-msg__logo{display:inline-flex;align-items:center;gap:16px;margin-bottom:2em}.l-msg__logo svg:nth-child(1){width:84px;height:auto;fill:var(--color-primary)}.l-msg__logo .sticker-svg{width:clamp(50px,5vw,100px)}.l-msg__text{width:500px;max-width:100%;margin:0 auto;font-size:18px;font-size:clamp(18px,16.5915492958px + 0.2816901408vw,22px)}.l-msg__text+.toast{margin-top:clamp(80px,5vw,160px)}.l-msg h2{margin-bottom:.5em}.faqs__list{background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:top;background-size:8px 1px;background-repeat:repeat-x;font-size:18px;font-size:clamp(18px,17.2957746479px + 0.1408450704vw,20px)}.faqs__list>li{background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x}.faqs__list>li.active .faqs__answer{height:auto}.faqs:has(.faqs__arrow) .faqs__arrow{rotate:-90deg}.faqs:has(.faqs__arrow) .active .faqs__arrow{rotate:0deg}.faqs__question{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:clamp(20px,3vw,30px) 0;font-weight:var(--font-bold);cursor:pointer}.faqs__answer{height:0;overflow:hidden}.faqs__answer ul,.faqs__answer ol{margin-bottom:1em}.faqs__answer ul li{list-style-type:disc}.faqs__answer ol li{list-style-type:decimal}.faqs__answer li{list-style-position:inside}.toast{display:inline-flex;padding:clamp(20px,5vw,30px);background:#f8f8f8;border-radius:var(--rounded-normal);text-align:left;line-height:150%}.toast__icon{display:flex;align-items:flex-start;padding:8px 16px 0 0}.box-featured{display:flex;flex-wrap:wrap;margin-bottom:auto;padding:clamp(20px,4vw,32px);background:var(--bg-4rd);border-radius:var(--rounded-normal);line-height:150%}.box-featured--green{background:#E2F4E9}.box-featured--warning{background:#f7f0cc}.box-featured--danger{background:#ffd1d1}.box-featured__m{margin:0 8px}.box-featured__label{margin-bottom:.5em;text-transform:uppercase;font-size:12px;color:#7a7a7a}.box-featured .ico-svg{vertical-align:middle}.box-featured p:last-child{margin-bottom:0}.intro-texts{font-size:30px;font-size:clamp(30px,3.9436619718px + 5.2112676056vw,104px);line-height:140%;font-weight:var(--font-bold)}.intro-texts__subtitle{margin-top:clamp(20px,5vw,100px);text-align:center;font-size:18px;font-size:clamp(18px,14.4788732394px + 0.7042253521vw,28px);font-weight:300;line-height:120%}.intro-texts__link{margin-right:.2em;padding-bottom:.1em;color:#a7a7a7;cursor:pointer;transition:all .3s;background-image:linear-gradient(to right, transparent 20%, var(--bg-primary) 20%),linear-gradient(to right, var(--color-primary), transparent);background-position:bottom;background-size:16px 3px;background-repeat:repeat-x}.intro-texts__link .ico-svg{width:.3em;margin-left:.1em}.intro-texts__link:hover{color:currentColor}.intro-texts__button{border:0;font-size:30px;font-size:clamp(30px,3.9436619718px + 5.2112676056vw,104px);font-weight:var(--font-bold);color:var(--color-connect);border-bottom:2px solid currentColor;transition:all .3s}.intro-texts__button:hover{color:var(--color-primary)}@media(max-width: 1024px){.intro-texts__link{background-size:8px 2px}}.has-tooltip{position:relative;display:inline-block}.has-tooltip:hover .tooltip{visibility:visible;opacity:1;transform:translate(-50%, 0)}.tooltip{--tooltip-bg: var(--bg-secondary);--tooltip-color: #fff;visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 10px);left:50%;width:var(--tooltip-width, auto);background-color:var(--tooltip-bg);border-radius:var(--rounded-normal);color:var(--tooltip-color);line-height:120%;transform:translate(-50%, -10px);transition:all .3s ease-in-out;z-index:3}.tooltip--white{--tooltip-bg: #fff;--tooltip-color: #222}.tooltip:before{content:"";position:absolute;top:calc(100% - 0px);left:50%;height:10px;width:100%;transform:translateX(-50%)}.tooltip:after{content:"";position:absolute;top:100%;left:50%;height:0;width:0;margin-left:-6px;border:solid rgba(0,0,0,0);border-top-color:var(--tooltip-bg);border-width:8px 6px;pointer-events:none}.tooltip--user{width:180px;padding:35px 30px;min-height:240px;text-align:center;line-height:120%}.tooltip__content{padding:20px;white-space:nowrap;font-size:14px;line-height:100%;text-align:center;z-index:1}.tooltip__content--multiline{white-space:normal;text-align:left;line-height:120%}.tooltip__content P:last-child{margin-bottom:0}.tooltip.is-open{visibility:visible;opacity:1;transform:translate(-50%, 0)}.tooltip__row:not(:last-child){margin-bottom:1em}.tooltip a{color:var(--tooltip-color)}.marquee-top{--marquee-bg: #222;--marquee-color: #fff;position:relative;width:100%;display:flex;align-items:center;overflow:hidden;white-space:nowrap;height:50px;background-color:var(--marquee-bg);color:var(--marquee-color)}.marquee-top--awwwards{--marquee-bg: var(--color-award, transparent);filter:brightness(90%);color:#fff}.marquee-top--dmk{--marquee-bg: #f02d00}.marquee-top--gray{--marquee-bg: var(--sf-bg);--marquee-color: var(--color-primary)}.marquee-top__wrapper{display:flex;align-items:center;height:100%;opacity:0;transition:opacity .3s}.marquee-top__wrapper.is-visible{opacity:1}.marquee-top__item{padding:0 12px}.marquee-top__item:has(.marquee-top__separator){padding:0}.marquee-top__ico{vertical-align:middle;margin-inline:12px;
18fill:currentColor}.marquee-top__separator{position:relative;top:-1px;display:inline-flex;align-items:center;margin-inline:16px;font-size:1.3em;vertical-align:middle;fill:currentColor}.marquee-top a:hover{opacity:0}.color-menu{color:var(--menu-color-1)}.menu-float{--menu-color-3: #fff;position:fixed;bottom:-80px;left:0;width:100%;font-size:13px;opacity:0;pointer-events:none;transition:all .3s ease-in-out;z-index:9;pointer-events:none}.menu-float.is-visible{opacity:1;bottom:30px}.menu-float__inner{position:relative;display:flex;justify-content:center}.menu-float__top{max-width:707px;max-height:0;overflow:hidden;transition:all .4s}.menu-float__bottom{position:relative;display:flex;justify-content:center}.menu-float__bottom:before{content:"";height:60px;transition:all .3s}.menu-float__menu-row+.menu-float__menu-row{margin-top:28px}.menu-float__wrapper{--bg-menu-wrapper: 34, 34, 34;position:relative;display:flex;flex-direction:column;min-width:0;max-width:-moz-fit-content;max-width:fit-content;padding:6px;border-radius:12px;background:rgba(var(--bg-menu-wrapper), 0.8);pointer-events:auto;transition:all .4s}.menu-float__wrapper.is-open-main .menu-float__bottom{position:relative}.menu-float__wrapper.is-open-main .menu-float__layout--primary .menu-float__content{width:100%}.menu-float__wrapper.is-open-main .menu-float__layout--primary{position:absolute;top:0;left:0;width:100%}.menu-float__wrapper.is-open-main .menu-float__layout--secondary,.menu-float__wrapper.is-open-main .menu-float__layout--tertiary{opacity:0;visibility:hidden}.menu-float__wrapper.is-open{min-width:720px !important;max-width:1200px}.menu-float__wrapper.is-open .menu-float__top{max-height:500px;max-width:1200px}.menu-float__wrapper.is-open .menu-float__bottom:before{flex:0;width:100%}.menu-float__wrapper.is-open .menu-float__menu-content{max-width:1200px}.menu-float__wrapper.is-open .menu-float__title:after{max-width:200px;opacity:1}.menu-float__wrapper.is-open .menu-float__subtitle{max-width:200px;opacity:1}.menu-float__wrapper.is-open .menu-float__hamburger{margin-left:auto}.menu-float__wrapper.is-open .menu-float__hamburger div:nth-child(1){top:0;transform:rotate(45deg)}.menu-float__wrapper.is-open .menu-float__hamburger div:nth-child(2){opacity:0}.menu-float__wrapper.is-open .menu-float__hamburger div:nth-child(3){top:0;transform:rotate(-45deg)}.menu-float__right{position:absolute;right:0;bottom:0}.menu-float__right .menu-float__wrapper{overflow:visible !important}.menu-float__logo{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.menu-float__logo svg{fill:#dedede}.menu-float__breadcrumb{display:inline-flex;align-items:center;flex-shrink:0;height:48px}.menu-float__title{margin-left:-2px;color:var(--menu-color-1)}.menu-float__title+.menu-float__subtitle:before{content:".";margin-right:2px;color:var(--menu-color-1);font-weight:var(--font-bold)}.menu-float__subtitle{color:#a7a7a7;transition:all .3s}.menu-float__layout--primary .menu-float__content{display:flex;position:relative;aspect-ratio:1/1;background-color:var(--bg-secondary);color:#fff}.menu-float__layout--secondary{flex:1;margin-left:6px}.menu-float__layout--secondary .menu-float__content{position:relative;width:100%;background:#3e3e3e;color:#dedede}.menu-float__layout--secondary .menu-float__item{justify-content:center;width:100%;border:1px solid #4e4e4e;color:#dedede;white-space:nowrap}.menu-float__layout--secondary .menu-float__item.is-active{color:var(--menu-color-1, #dedede);border-color:var(--menu-color-1, #dedede)}.menu-float__layout--secondary .menu-float__item.is-active:hover{opacity:.8}.menu-float__layout--secondary .menu-float__item:hover:not(.is-active){border-color:#a7a7a7}.menu-float__layout--tertiary{display:flex;margin-left:6px}.menu-float__layout--tertiary .menu-float__content{padding:0}.menu-float__layout--tertiary .button{width:100%;font-size:13px;transition:all .3s}.menu-float__layout--tertiary .button:not(.is-custom){background:var(--menu-color-1, #dedede);color:var(--color-primary)}.menu-float__layout--tertiary .button:hover{opacity:.8}.menu-float__layout--tertiary .button.is-ch{background:var(--ch-bg, #dedede)}.menu-float__hamburger{position:relative;width:20px;height:30px;cursor:pointer;pointer-events:auto;transition:all .3s}.menu-float__hamburger div{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:10px;height:1px;background-color:#fff;transform:translateZ(0);transition:all .3s}
18.menu-float__hamburger div:nth-child(1){top:-8px}.menu-float__hamburger div:nth-child(3){top:8px}.menu-float__menu{display:none;width:100%;display:none;margin-bottom:6px;padding:30px;background:#2c2c2c;color:#fff;border-radius:var(--rounded-normal);z-index:-1;transition:all .4s}.menu-float__menu--main{display:flex;font-size:15px;padding-top:4px;padding-left:1px}.menu-float__menu.is-active{display:block}.menu-float__menu-content{max-width:0;opacity:0;transition:all .4s,max-width 0s;overflow:hidden}.menu-float__menu-content.is-show{opacity:1}.menu-float__menu-col{position:relative;flex:1;background-image:linear-gradient(to bottom, #7a7a7a 0 10%, rgba(255, 255, 255, 0) 10%);background-position:left top;background-repeat:repeat-y;background-size:1px 8px}.menu-float__menu-section{position:relative;margin-top:0px;margin-bottom:25px;margin-left:16px;font-size:12px;color:#a7a7a7;line-height:100%}.menu-float__menu-section:before{content:"";position:absolute;top:3px;left:-17px;width:4px;height:4px;border-radius:50%;background:var(--menu-color-2, #fff)}.menu-float__menu-nav{line-height:120%}.menu-float__menu-nav li:not(:last-child){margin-bottom:16px}.menu-float__menu-nav li.is-active{font-weight:var(--font-bold)}.menu-float__menu-nav li.is-active a{color:var(--menu-color-1, --color-white);border-color:var(--menu-color-1, --color-white)}.menu-float__menu-nav a{display:block;padding:8px 0 8px 16px;border-left:1px solid rgba(0,0,0,0);transition:all .3s}.menu-float__menu-nav a:hover{color:var(--menu-color-1, --color-white);border-color:var(--menu-color-1, --color-white)}.menu-float__menu a{color:#fff}.menu-float__title-section{flex-shrink:0;display:flex;align-items:center;margin:0 12px 0 6px;line-height:100%}.menu-float__content{display:inline-flex;align-items:center;gap:6px;height:60px;padding:0 6px;text-align:center;border-radius:var(--rounded-normal);overflow:hidden}.menu-float__progress{position:absolute;top:0;left:0;display:flex;width:100%;height:100%}.menu-float__bar{background-color:rgba(78,78,78,.5);width:0;height:100%}.menu-float__nav{position:relative;display:flex;margin-left:-6px}.menu-float__nav li{display:flex}.menu-float__item{display:inline-flex;align-items:center;height:48px;margin-left:6px;padding:0 12px;border-radius:var(--rounded-normal);color:var(--color-primary);font-weight:400;cursor:pointer;overflow:hidden;transition:max-width .3s,padding .3s,margin .3s,color .3s,background .3s,border-radius .3s,border-color .3s,opacity .3s}.menu-float__filters{position:relative;display:flex;height:60px;margin-left:-6px;margin-right:-6px}.menu-float__filters li{border-left:1px solid rgba(var(--color-primary-rgb), 0.1)}.menu-float__filter{position:relative;display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu-float__filter.has-filter:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--menu-color-2)}.menu-float__filter.is-active{background:#222}.menu-float__filter.is-active svg{transform:scaleY(-1)}.menu-float__arrow{fill:#a7a7a7;margin-left:12px}.menu-float__content:has(.menu-float__awwwards){border-radius:0}.menu-float__awwwards{display:flex;gap:6px}.menu-float .button[class*="--awwward"],.menu-float .button[class*="--awwward"]:hover{--button-bg: var(--color-award);--button-color: var(--color-primary)}.menu-float .avatar-name sup{color:#fff}.menu-float .bt-nav{position:absolute;bottom:0;pointer-events:auto}.menu-float .bt-nav--left{left:-28px}.menu-float .bt-nav--right{right:-28px}.menu-float .bt-nav svg{fill:#dedede}.menu-float .button--suggestions{--button-bg: var(--bg-secondary);--button-color: #fff}.menu-float .button--suggestions:hover{background-color:#4e4e4e}.menu-float .button--suggestions img{margin:0 20px 0 8px;border-radius:50%}.menu-float .button--suggestions .budget-circle{flex-shrink:0;margin:0 8px 0 20px;background:#4e4e4e}.style-1{--menu-color-1: var(--color-inspire);--menu-color-2: var(--color-inspire-2);--menu-color-3: var(--color-inspire-3)}.style-2{--menu-color-1: var(--color-learn);--menu-color-2: var(--color-learn-2);--menu-color-3: var(--color-learn-3)}.style-3{--menu-color-1: var(--color-connect);--menu-color-2: var(--color-connect-2);--menu-color-3: var(--color-connect-3)}.style-4{--menu-color-1: var(--color-read);--menu-color-2: var(--color-read-2);--menu-color-3: var(--color-read-3)}.style-5{--menu-color-1: var(--color-awards);--menu-color-2: var(--color-awards-2);--menu-color-3: var(--color-awards-3)}.style-6{--menu-color-1: var(--color-jobs);--menu-color-2: var(--color-jobs-2);--menu-color-3: var(--color-jobs-3)}.bt-nav{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border-radius:var(--rounded-normal);cursor:pointer;transition:all .3s}.bt-nav.is-hidden{opacity:0}
18.is-intersecting .c-box-float-more .box-float-more{opacity:1;top:0;transform:translateY(0)}.c-box-float-more{position:fixed;bottom:30px;left:0;width:100%;z-index:9;pointer-events:none}.c-box-float-more .inner{position:relative;display:flex;justify-content:flex-end}.c-box-float-more .box-float-more{pointer-events:all;opacity:0;transform:translateY(50px)}.box-float-more{position:relative;display:inline-flex;height:72px;padding:6px;background:var(--bg-secondary);border-radius:var(--rounded-small);color:#fff;line-height:120%;pointer-events:all;overflow:hidden;transition:all .3s ease-in-out}.box-float-more:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--menu-color-2)}.box-float-more__info{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:80px;padding:0 12px}.box-float-more__info span{color:#7a7a7a}.box-float-more__photo{border-radius:4px;-o-object-fit:cover;object-fit:cover}.menu-float-news{position:absolute;bottom:-100%;right:0;width:270px;padding:12px;border-radius:var(--rounded-normal);background:var(--bg-secondary);color:#fff;line-height:1.3em;border-bottom:6px solid var(--menu-color-1);pointer-events:all;transform:translateY(calc(100% - 30px));opacity:0;visibility:hidden;transition:all .4s;z-index:-1}.menu-float-news.is-visible{bottom:0;transform:translateY(0);opacity:1;visibility:visible}.menu-float-news__photo{position:relative;margin-bottom:.4em;-o-object-fit:cover;object-fit:cover}.menu-float-news__video{position:relative;margin-bottom:.4em}.menu-float-news__video iframe{pointer-events:none}.menu-float-news__header{display:flex;justify-content:space-between;margin-bottom:4px}.menu-float-news__prices{display:flex;gap:8px}.menu-float-news__prices .text-strikethrough{color:#a7a7a7}.menu-float-news__label{color:#a7a7a7}.menu-float-news__close{text-align:right}.menu-float-news__close span{position:relative;top:-6px;right:-6px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;line-height:100%;padding:4px;z-index:2;cursor:pointer}.menu-float-news__close span:hover{opacity:.7}.filters{display:flex;flex-direction:column;border-radius:var(--rounded-normal);transition:all .3s;z-index:-1;pointer-events:all}.filters__tab{display:none}.filters__tab.is-active{display:block}.filters__search{display:flex;height:40px;margin-bottom:20px;background:#383838;border-radius:var(--rounded-small)}.filters__search input{flex:1;padding:0 16px;background:rgba(0,0,0,0);font-size:var(--text-size-primary);color:var(--color-white)}.filters__search button{width:40px;background:rgba(0,0,0,0);border:none}.filters__search .ico-svg{fill:var(--color-white)}.filters__label{margin-bottom:1.5em;text-transform:uppercase;color:#7a7a7a;font-weight:400;font-size:var(--text-size-small);border-bottom:1px solid #4e4e4e;clear:both}.filters__content{flex:1;max-height:310px;color:var(--color-white);overflow-y:auto;overflow-x:hidden}.filters__content::-webkit-scrollbar{width:2px}.filters__content::-webkit-scrollbar-track{background:#383838}.filters__content::-webkit-scrollbar-thumb{background-color:var(--color-white)}.filters__list li{float:left;width:33.333%}.filters__list--small li{width:50%}.filters__list+.filters__title{padding-top:2em}.filters li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters__item{display:inline-flex;align-items:center;height:26px;padding:0 8px;color:var(--color-white);border-radius:26px;cursor:pointer;transition:all .3s}.filters__item.is-active{color:var(--menu-color-3);background:#383838}.filters__item.is-active .ico-svg{margin-left:6px}.filters__item:hover{background:#383838}.filters__colors{display:grid;grid-template-columns:repeat(9, 1fr)}.filters__colors .filters__item{position:relative;display:flex;width:100%;height:36px;padding:0;border-radius:0;outline:4px solid rgba(0,0,0,0);transition:z-index 0s outline .6s}.filters__colors .filters__item.is-active,.filters__colors .filters__item:hover{outline-color:var(--color-white);z-index:1}.cart-count{position:relative;display:block;margin:auto;display:flex}.cart-count span{position:absolute;top:-12px;right:-12px;display:flex;justify-content:center;align-items:center;width:15px;height:15px;background:#fff;color:var(--color-primary);border-radius:50%;font-size:12px;font-weight:var(--font-bold);line-height:100%}@media(max-width: 768px){.menu-float{display:none}}#footer a{color:var(--color-primary)}#footer a:hover{opacity:.75}.footer__top{margin-bottom:clamp(40px,4vw,150px)}.footer__top .box-featured{background:var(--bg-3rd)}.footer__bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;margin-bottom:120px;padding-top:clamp(24px,3vw,48px);font-size:14px;font-weight:400;background-image:linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);background-position:top;background-size:8px 1px;background-repeat:repeat-x}.footer__wrapper{display:flex}.footer__nav{display:flex;flex-wrap:wrap}.footer__item{display:flex;line-height:140%;font-size:clamp(35px,20vw,4vw);font-weight:var(--font-bold)}.footer__item:not(:last-child):after{content:"-";margin:0 .4em;font-weight:300}.footer__figure{position:absolute;transform:translate(-50%, -50%);opacity:0;transition:opacity .3s;transform-origin:center;pointer-events:none}.footer__figure.show{opacity:1}.footer__figure.show img{opacity:.9;transform:scale(1) rotate(20deg)}.footer__img{transform:scale(0);transition:all .3s}.footer__logo{display:inline-flex;align-items:center;gap:16px;margin-bottom:clamp(30px,4vw,60px)}.footer__logo--s1 svg{width:40px}.footer__logo--s2 svg:nth-child(1){width:44px;height:auto;
18fill:var(--color-primary)}.footer__logo--s2 .sticker-svg{width:clamp(40px,4vw,72px)}.footer__logo svg{fill:var(--color-primary)}.footer__nav{display:flex;flex-wrap:wrap;gap:0 24px}.footer__grid{--grid-min: 18%;--menu-margin: clamp(10px, 4vw, 20px);flex:1;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--grid-min), 1fr));grid-gap:24px}.footer__menu{font-weight:var(--font-bold);line-height:100%}.footer__menu li:not(:last-child){margin-bottom:var(--menu-margin)}@media(max-width: 1024px){.footer__bottom{margin-bottom:100px}.footer__wrapper{flex-direction:column;gap:40px}.footer__grid{--grid-min: 40%;gap:var(--menu-margin)}}.l-404{position:relative;height:100vh}.l-404__header{display:flex;align-items:center;gap:24px;padding:70px}.l-404__logo{width:72px;height:auto;fill:#fff;filter:drop-shadow(1px 1px 30px rgba(0, 0, 0, 0.5))}.l-404__img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:-1}@media(max-width: 1024px){.l-404__header{justify-content:center;height:100%;padding:0}}.contact-us__desc{width:510px;max-width:100%}.no-results{display:flex;justify-content:center;align-items:center;min-height:400px;text-align:center}.no-results__msg{width:240px;max-width:100%}.no-results p:last-child{margin-bottom:0}.ribbon-pro{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;width:72px;height:82px;padding:8px;background:#fff;border-radius:var(--rounded-normal);line-height:100%}.ribbon-pro__bottom{font-size:10px}.ribbon-pro--black{background:#222;color:#fff}.ribbon-pro .ico-svg{top:-2px}.snackbar-msg{position:absolute;top:0;right:0;width:460px;max-width:100%;padding:clamp(20px,6vw,28px);background:var(--bg-secondary);font-size:var(--text-size-primary);color:#fff;line-height:140%;border-radius:var(--rounded-normal);z-index:2;transform:translateY(calc(-100% - 70px));opacity:0;transition:all .4s ease-in-out}.snackbar-msg.is-show{opacity:1;transform:translateY(72px)}.snackbar-msg__item{display:flex;gap:30px}.snackbar-msg__close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer}.snackbar-msg__close:hover svg{transform:rotate(90deg)}.snackbar-msg__close svg{transition:all .3s}.snackbar-msg__label{margin-bottom:12px;font-size:10px;line-height:100%}.snackbar-msg li:not(:last-child){margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2)}.snackbar-msg .button:hover{background:#4e4e4e}.fit-video{position:relative;padding-bottom:56.25%;height:0}.fit-video iframe{position:absolute;top:0;left:0;width:100%;height:100%}.lazy{opacity:0;transition:all .6s}.lazy--hidden{opacity:0}
18.lazy--loaded{opacity:1}@media(max-width: 1280px){:root{--pad-inner: 40px}.list-palette{--palette-width: 300px;--palette-height: 435px;--palette-margin: 220px;--palette-margin-neg: -220px}.list-palette--v{--palette-width: 200px;--palette-margin: 170px;--palette-margin-neg: -170px}}@media(max-width: 1023px){:root{--pad-inner: 24px}.header-main__bts{display:none}.box-table{overflow-x:auto}.box-table th{width:auto}.grid-sites-last{grid-template-columns:1fr}.has-many-credits .avatar-name__name{display:none}.has-many-credits .avatar-name__link{gap:0}}@media(max-width: 576px){:root{--pad-inner: 16px;--rounded-large: 8px;--text-size-large: 20px}.header-main__ico{display:flex}.header-search__separator,.search-dropdown{display:none}[class*=grid-]{--minthumb: 310px}[class*=grid-] .is-double{grid-column:auto}.list-search-ac{min-width:auto}.toolbar-bts{--toolbar-gutter: 20px}.head-toolbar.is-sm-center{justify-content:center}.c-heading .heading-1{display:block;word-wrap:break-word}.c-heading br{content:""}.c-heading br:after{content:" "}.c-view-all__row{flex-direction:column}.modal{padding:0}.modal[class*="--x-large"] .modal__content{width:100%}.modal[class*="--bottom"]{display:block}.modal__box{min-height:100vh;border-radius:0}.modal .bt-nav{top:0;right:0;border-radius:0}.grid-directory{grid-gap:var(--gutter) 0}.grid-directory--pro{height:auto !important}.grid-directory--pro li{width:100%}.card-directory__section{width:80px}.card-directory-sp__header{flex-direction:column;gap:20px}.card-directory-sp__header .circle-avatar{position:relative;margin-right:auto;font-size:1rem}.card-directory-sp__header .circle-avatar img{width:30px}.card-directory-sp .swiper{width:100%}.card-directory-sp .swiper-pagination{margin-top:20px}.swiper-button-disabled{display:none}.slider-sites__nav{justify-content:center}.card-banner--s2 .card-banner__photo img{opacity:.2}.card-banner--s2 .sticker-svg{top:auto;left:auto;bottom:10%;right:10%}.total-grid{text-align:center}.tags-info{grid-template-columns:100%;grid-gap:1em}.tags-info__read-more{flex-direction:column}.tags-info__read-more .link-underlined{margin-right:auto}.c-tags-row+.tags-info{margin-top:40px}.header-col{flex-direction:column;gap:20px}.dropdown-tags .list-tags{gap:8px}.dropdown-tags .button{height:28px;padding:0 8px;font-size:var(--text-size-small)}.m-login__container{flex-direction:column}.cookies-popup{bottom:0;right:0;width:100%;border-radius:0}}.terms{font-size:clamp(16px,5vw,24px);line-height:1.5}.terms h3{margin-bottom:.5em;font-size:2em;font-weight:bold;line-height:1.2}.terms h4{margin-block:1em .5em;font-size:1.5em;font-weight:bold;line-height:1.2}.terms ul{margin-bottom:1em}.terms li{list-style:disc;list-style-position:inside}.terms a{text-decoration:underline}.terms a:hover{text-decoration:none}.terms img{display:block;width:100%}
19                .choices [hidden]{display:none !important}.choices{position:relative;font-size:16px}.choices:focus{outline:none}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid var(--border-input);margin:0}.choices[data-type*=select-one]:after{content:"";position:absolute;top:50%;right:24px;width:12px;height:12px;margin-top:-4px;border:2px solid #a7a7a7;border-top:0;border-left:0;transform:rotate(45deg) translateY(-50%);transform-origin:center;pointer-events:none}.choices[data-type*=select-one].is-open:after{right:17px;margin-top:-4px;transform:rotate(-135deg) translateY(-50%)}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{padding-bottom:5px;cursor:text}input[type=search].choices__input::-webkit-search-cancel-button{display:none}.choices__inner{display:inline-block;width:100%;min-height:var(--height-input);border-bottom:1px solid var(--border-input);background-color:var(--bg-input);font-size:var(--text-size-primary);vertical-align:top;overflow:hidden}.choices__list--single{display:inline-block;padding-left:var(--pad-input);width:100%;line-height:var(--height-input)}.choices__list--single .choices__button{display:none}.choices__list--multiple{display:inline;padding-bottom:5px}.choices__list--multiple .choices__item{position:relative;display:inline-block;vertical-align:middle;margin:5px 0 0 5px;padding:11px;max-width:100%;border-radius:29px;background-color:#e9e9e9;
19color:#222;font-weight:normal;line-height:13px;cursor:default;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:25px}.choices__list--multiple+.choices__input{min-width:auto}.choices__list--dropdown{display:none;position:absolute;width:100%;background:#fff;border:1px solid #e9e9e9;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;z-index:2}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown .choices__list{position:relative;max-height:390px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px 15px;line-height:normal;transition:all .3s}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f3f3f3}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.5}.choices__button{position:absolute;top:13px;right:8px;display:block;width:12px;height:12px;border:none;text-indent:-23em;overflow:hidden;cursor:pointer}.choices__button:before,.choices__button:after{content:"";display:block;position:absolute;top:4px;left:0px;width:12px;height:1px;background-color:var(--color-primary);transform:translateZ(0)}.choices__button:before{transform:translateZ(0) rotate(-45deg)}.choices__button:after{transform:translateZ(0) rotate(45deg)}.choices__button:hover{opacity:.7}.choices__button:focus{outline:none}.choices__input{min-width:100%;margin-left:15px;padding:10px 0 0 0;border:0;border-radius:0;background:transparent;vertical-align:middle}.choices__input::-moz-placeholder{color:#a7a7a7;font-weight:300}.choices__input::placeholder{color:#a7a7a7;font-weight:300}.choices__input:focus{outline:0}.circle-color .choices__list--multiple .choices__item{display:inline-flex;align-items:center;gap:8px;pointer-events:none}.circle-color .choices__list--multiple .choices__item:before{content:"";display:block;width:12px;height:12px;border-radius:50%;background-color:var(--color-tag, white)}.circle-color .choices__button{pointer-events:all}
20        .grecaptcha-badge {visibility: hidden;}
21    </style>
22        
22<script>
23        window.dataLayer = window.dataLayer || [];
24        function gtag(){dataLayer.push(arguments);}
25        // gtag('consent', 'default', {
26        //     'ad_storage': 'denied',
27        //     'analytics_storage': 'denied'
28        // });
29    </script>
29
30    <!-- Google Tag Manager -->
31    
31<script>
vendor: 375 bytes, lines 31-35
31(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
32                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
33            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
34            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
35        })(window,document,'script','dataLayer','
35GTM-PXD9JT
vendor: 3 bytes, line 35
35');
35</script>
35
36    <!-- End Google Tag Manager -->
37        <style>
38        .l-list-sites{display:flex;flex-wrap:wrap;gap:clamp(30px,3vw,94px)}.l-list-sites__col{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:min(380px,100%)}.l-list-sites__col.s-2 .list-sites{margin-top:24px}.l-list-sites__col.s-2 .list-sites__item{padding:0}.l-list-sites__col.s-2 .list-sites__card{flex-direction:column;gap:0}.l-list-sites__col.s-2 .list-sites__left{flex-direction:column;gap:0}.l-list-sites__col.s-2 .list-sites__figure{position:relative;width:100%}.l-list-sites__col.s-2 .list-sites__media{width:100%;border-radius:var(--rounded-normal)}.l-list-sites__col.s-2 .list-sites__info{width:100%;min-height:120px}.l-list-sites__heading{padding-bottom:24px;font-size:var(--text-size-primary)}.l-list-sites__more{margin-top:clamp(20px,3vw,44px)}.l-list-sites .list-sites{flex:1}.list-sites--bw{height:100%;background:#fff;border-radius:var(--rounded-normal)}.list-sites__item{padding:clamp(10px,4vw,24px)}.list-sites__item:not(:last-child){border-bottom:1px solid var(--border-gray)}.list-sites__item:has(.list-sites__more){padding:0}.list-sites__card{display:flex;align-items:center;gap:clamp(10px,4vw,20px)}.list-sites__left{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,4vw,20px);flex:1;min-width:0}.list-sites__right{display:flex;flex-direction:column;gap:4px;justify-content:center}.list-sites__figure{flex-shrink:0}.list-sites__media{border-radius:50%;-o-object-fit:cover;object-fit:cover;width:clamp(40px,4vw,72px);height:auto;transition:all .3s}.list-sites__media:hover{filter:brightness(80%)}.list-sites__thumb{border-radius:var(--rounded-small)}.list-sites__label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.list-sites__title{font-size:18px;font-size:clamp(18px, 17.2957746479px + 0.1408450704vw, 20px);font-weight:bold;line-height:120%}.list-sites__title--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-sites__info{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.list-sites__number{display:flex;flex-direction:column;align-items:center;line-height:normal;min-width:43px}.list-sites__number small{font-size:10px}.list-sites__more{display:flex;align-items:center;justify-content:center;width:100%;height:60px;font-size:6px;letter-spacing:2px;transition:all .3s}.list-sites__more:hover{letter-spacing:4px}.grid-blog{--minthumb: 500px;display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--minthumb), 1fr));grid-auto-flow:row dense;grid-gap:clamp(40px,6vw,100px) var(--gutter)}.grid-blog--two-cols{--minthumb: 600px}.grid-blog-mansory{--marginCard: clamp(0px, 11vw, 200px);--grid-cols: 1fr;display:grid;grid-template-columns:repeat(auto-fit, minmax(0, var(--grid-cols)));width:100%;grid-gap:var(--gutter);max-width:1300px;margin:0 auto}.grid-blog-mansory__large{width:80%;margin-top:var(--marginCard)}.grid-blog-mansory__large .card-blog__title{width:70%}.grid-blog-mansory__small{width:40%;margin-bottom:var(--marginCard)}.grid-blog-mansory .light-masonry-column{display:flex;flex-direction:column}.grid-blog-mansory .light-masonry-column:nth-child(3){align-items:flex-end}.card-blog-special{--pad-card: clamp(20px, 8vw, 100px);display:flex;max-width:1810px;margin:0 auto;background:#f3f3f3;padding:var(--pad-card);gap:var(--pad-card)}.card-blog-special--reflect .card-blog-special__left{order:1}.card-blog-special__left{width:55%}.card-blog-special__right{display:flex;align-items:center;width:45%}.card-blog-special__media{display:block;width:100%;border-radius:var(--rounded-large)}.card-blog-special__title{line-height:120%}.card-blog-special__by{display:flex;align-items:center;gap:12px;margin:clamp(10px,3vw,20px) 0 clamp(30px,3vw,70px) 0}.card-blog-special__by .link-underlined{font-weight:bold;font-size:18px;font-size:clamp(18px, 15.8873239437px + 0.4225352113vw, 24px)}.card-blog-special__excerpt{margin-bottom:clamp(24px,3vw,48px)}.sticker__1{right:8%;bottom:-12%;width:clamp(24px,6vw,110px)}.sticker__3{right:0;bottom:0;width:clamp(24px,6vw,110px);transform:translateX(50%) translateY(30%)}.sticker__5{top:0;right:15%;width:clamp(110px,12vw,220px);transform:translateY(-70%)}@media(max-width: 576px){.grid-blog{--minthumb: 300px}.card-blog-special{flex-direction:column}.card-blog-special__left,.card-blog-special__right{width:100%}
38.card-blog-special__right{order:-1}.card-blog-special__excerpt{margin-bottom:0}.light-masonry-column{grid-gap:40px 0}}.video-playlist{display:flex;background:var(--bg-4rd);border-radius:var(--rounded-large)}.video-playlist__left{width:60%}.video-playlist__right{flex:1}.video-playlist__main{position:relative;width:100%;height:100%}.video-playlist__info{position:absolute;top:clamp(36px,5vw,72px);left:clamp(36px,5vw,72px);color:#fff;z-index:1}.video-playlist__video{position:absolute;width:100%;height:100%;border-radius:var(--rounded-large);-o-object-fit:cover;object-fit:cover}.video-playlist__list li:not(:last-child){border-bottom:1px solid var(--border-gray)}.video-playlist__item{position:relative;display:flex;align-items:center;gap:20px;width:100%;padding:16px 36px;transition:all .3s}.video-playlist__item:hover{background:var(--bg-primary)}.video-playlist__heading{margin-bottom:.5em;font-size:20px;font-size:clamp(20px, 14.3661971831px + 1.1267605634vw, 36px)}.video-playlist__head-list{padding:36px 36px 6px 36px}.video-playlist__thumb{border-radius:50%;-o-object-fit:cover;object-fit:cover}.video-playlist__data{flex:1}.video-playlist__title{font-size:18px;font-size:clamp(18px, 15.8873239437px + 0.4225352113vw, 24px)}
39    </style>
40    <style>
41    .pointer-none{pointer-events:none}.relative{position:relative}.mb-0{margin-bottom:0}.mt-0{margin-top:0}.m-0{margin:0}.mt-lg{margin-top:clamp(1em,2vw,2em)}.mb-lg{margin-bottom:clamp(1em,2vw,2em)}.mb-xl{margin-bottom:clamp(1em,4vw,3em)}.p-0{padding:0}.pt-0{padding-top:0}.pb-0{padding-bottom:0}.no-scroll{overflow:hidden}.no-pointer{pointer-events:none}.nowrap{white-space:nowrap}.text-uppercase{text-transform:uppercase}.text-default{font-size:var(--text-size-primary);font-weight:300}.text-center{text-align:center}.text-right{text-align:right}.text-bold{font-weight:var(--font-bold)}.text-regular{font-weight:400}.text-strikethrough{text-decoration:line-through}.text-red{color:var(--color-errors)}.text-balance{text-wrap:balance}.flex-space-between{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5em}.ar-sites{width:100%;-o-object-fit:cover;object-fit:cover;aspect-ratio:var(--img-resizing-site) !important}.ar-paronamic{width:100%;-o-object-fit:cover;object-fit:cover;aspect-ratio:2/1 !important}.ar-desktop{width:100%;-o-object-fit:cover;object-fit:cover;aspect-ratio:var(--img-resizing-desktop) !important}.color-primary{color:var(--color-primary)}.color-red{color:#FA5D29}.hidden{display:none !important}.is-hidden{display:none !important}.is-grab{cursor:grab}.is-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.rounded-small{border-radius:var(--rounded-small)}.rounded-normal{border-radius:var(--rounded-normal)}.rounded-large{border-radius:var(--rounded-large)}.box-width{max-width:100%;width:var(--widthBox)}.box-width--auto{margin:0 auto}.text-ico{display:flex;align-items:center;gap:.5em}.alpha-04{--modal-alpha: 0.4}.show-sm,.show-md{display:none}@media(max-width: 1024px){.hidden-lg{display:none}}@media(max-width: 768px){.hidden-md{display:none}.show-md{display:block}}@media(max-width: 576px){.hidden-sm{display:none}.show-sm{display:block}}
42    </style>
43    </head>
44
45<body class=""  data-page-viewed="">
46<div class="eu-location" data-eu="0"></div>
47<div class="wrapper">
48                    <div class="marquee-top marquee-top--gray">
49    <div class="marquee-top__wrapper" data-controller="header-marquee">
50        <a href="/academy-plan?utm_source=alert" class="item-link" aria-label="Courses"></a>
51        <div class="marquee-top__item">
52            <strong>The Creative Pass</strong>
53            <svg class="marquee-top__ico" viewBox="0 0 100 125" width="20"><path d="M50,97.5c-26.1915607,0-47.5-21.3084412-47.5-47.5S23.8084393,2.5,50,2.5S97.5,23.8084393,97.5,50S76.1915588,97.5,50,97.5z   M50,7.0238094C26.3030148,7.0238094,7.0238104,26.3030128,7.0238104,50S26.3030148,92.9761887,50,92.9761887  S92.9761887,73.6969833,92.9761887,50S73.6969833,7.0238094,50,7.0238094z"/><g><ellipse cx="35.2381935" cy="34.3672791" rx="4.7493854" ry="6.5021348"/></g><g><ellipse cx="64.7618027" cy="34.3672791" rx="4.7493854" ry="6.5021348"/></g><path d="M50,80.4100494c-14.6896172,0-26.6402111-11.4621811-26.6402111-25.5509796  c0-1.2492523,1.0131454-2.2619057,2.2619038-2.2619057c1.2487602,0,2.2619057,1.0126534,2.2619057,2.2619057  c0,11.594223,9.9213562,21.0271759,22.1164017,21.0271759s22.1164017-9.4329529,22.1164017-21.0271759  c0-1.2492523,1.0131454-2.2619057,2.2619019-2.2619057c1.248764,0,2.2619095,1.0126534,2.2619095,2.2619057  C76.640213,68.9478683,64.689621,80.4100494,50,80.4100494z"/></svg>
54            <span>Watch all courses for just $12/month</span>
55        </div>
56    </div>
57</div>
58                        
59
60
61<header id="header" data-controller="search" data-search-url-value="tv_search_articles" data-search-selected-type-value="post">
62    <div class="inner">
63        <div class="c-header-main">
64            <div class="header-main" data-search-target="headerMain">
65                <div class="header-main__overlay " data-search-target="overlay" data-action="click->search#close"></div>
66                <div class="header-main__container">
67                    <div class="header-main__hamburger" data-search-target="hamburger" data-action="click->search#toggleMobile">
68						        <svg class="ico-svg" viewbox="0 0 20 20" width="16">
69        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#hamburger"></use>
70    </svg>
71
72					</div>
73					<a href="/" class="header-main__logo" aria-label="Awwwards">
74						    <svg width="30" height="16" viewBox="0 0 30 16" ><path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z" /></svg>
75
76					</a>
77                    <nav class="nav-header-main" data-search-target="navHeaderMain">
78						<ul class="nav-header-main__list">
79							<li class="nav-header-main__item has-dropdown">
80								<span class="nav-header-main__link" data-search-target="eLinksDD" data-action="click->search#toggleDropdown">
81									Explore
82									        <svg class="ico-svg nav-header-main__arrow" viewbox="0 0 20 20" width="8">
83        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
84    </svg>
85
86								</span>
87								<div class="nav-header-main__dropdown">
88									<div class="nav-header-main__content">
89										<div class="search-inspiration">
90											<nav class="search-inspiration__nav">
91												<ul class="search-inspiration__menu">
92													<li>
93														<span class="search-inspiration__section" data-section="nav" data-search-target="navAwwards" data-search-target="eSection" data-action="click->search#doToogleTab">
94															        <svg class="ico-svg ico-svg search-inspiration__ico" viewbox="0 0 20 20" width="14">
95        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#wheat"></use>
96    </svg>
97
98															Awards
99															        <svg class="ico-svg search-inspiration__arrow" viewbox="0 0 20 20" width="8">
100        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
101    </svg>
102
103														</span>
104														<ul class="search-inspiration__list">
105                                                            																																													<li>
106																<a class="search-inspiration__item" href="/websites/" data-count="25K">
107																	<span>
108																		Honor Mentions
109																																			</span>
110																</a>
111															</li>
112																														<li>
113																<a class="search-inspiration__item" href="/websites/nominees/" data-count="48K">
114																	<span>
115																		Nominees
116																																			</span>
117																</a>
118															</li>
119																														<li>
120																<a class="search-inspiration__item" href="/websites/sites_of_the_day/" data-count="6482">
121																	<span>
122																		Sites of the Day
123																																			</span>
124																</a>
125															</li>
126																														<li>
127																<a class="search-inspiration__item" href="/websites/sites_of_the_month/" data-count="197">
128																	<span>
129																		Sites of the Month
130																																			</span>
131																</a>
132															</li>
133																														<li>
134																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/sites_of_the_year/" data-count="64">
135																	<span>
136																		Sites of the Year
137																																			</span>
138																</a>
139															</li>
140																														<li>
141																<a class="search-inspiration__item" href="https://www.awwwards.com/honors/winners" data-count="">
142																	<span>
143																		Honors
144																																					<span class="budget-tag budget-tag--solid--black">New</span>
145																																			</span>
146																</a>
147															</li>
148																														<li>
149																<a class="search-inspiration__item" href="/winner-list/" data-count="">
150																	<span>
151																		Most Awarded Profiles
152																																			</span>
153																</a>
154															</li>
155																														<li>
156																<a class="search-inspiration__item" href="/jury/2026/" data-count="">
157																	<span>
158																		Jury 2026
159																																			</span>
160																</a>
161															</li>
162																														<li>
163																<a class="search-inspiration__item" href="/annual-awards/" data-count="">
164																	<span>
165																		Annual Awards
166																																			</span>
167																</a>
168															</li>
169																													</ul>
170													</li>
171													<li>
172														<span class="search-inspiration__section" data-section="search" data-search-target="navTrending"data-search-target="eSection" data-action="click->
172search#doToogleTab">
173															        <svg class="ico-svg ico-svg search-inspiration__ico" viewbox="0 0 20 20" width="14">
174        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#flame"></use>
175    </svg>
176
177															Trending
178															        <svg class="ico-svg search-inspiration__arrow" viewbox="0 0 20 20" width="8">
179        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
180    </svg>
181
182														</span>
183														<ul class="search-inspiration__list">
184                                                            															 															<li>
185																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/portfolio/" data-count="9502">
186																	<span>Portfolio Websites</span>
187																</a>
188															</li>
189																														<li>
190																<a class="search-inspiration__item" href="https://www.awwwards.com/awwwards/collections/free-fonts/" data-count="288">
191																	<span>Free fonts</span>
192																</a>
193															</li>
194																														<li>
195																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/animation/" data-count="11196">
196																	<span>Animated websites</span>
197																</a>
198															</li>
199																														<li>
200																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/" data-count="6982">
201																	<span>Sites of the Day</span>
202																</a>
203															</li>
204																														<li>
205																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/scrolling/" data-count="5980">
206																	<span>Scrolling</span>
207																</a>
208															</li>
209																														<li>
210																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/single-page/" data-count="5916">
211																	<span>One page design</span>
212																</a>
213															</li>
214																														<li>
215																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/ui-design/" data-count="7068">
216																	<span>UI design</span>
217																</a>
218															</li>
219																														<li>
220																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/e-commerce/" data-count="6428">
221																	<span>E-commerce layouts</span>
222																</a>
223															</li>
224																														<li>
225																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/architecture/" data-count="3228">
226																	<span>Architecture websites</span>
227																</a>
228															</li>
229																														<li>
230																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/photography/" data-count="1872">
231																	<span>Photography websites</span>
232																</a>
233															</li>
234																													</ul>
235													</li>
236													<li>
237														<span class="search-inspiration__section" data-search-target="eSection" data-action="click->search#doToogleTab">
238															        <svg class="ico-svg ico-svg search-inspiration__ico" viewbox="0 0 20 20" width="14">
239        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#geometric-1"></use>
240    </svg>
241
242															By Category
243															        <svg class="ico-svg search-inspiration__arrow" viewbox="0 0 20 20" width="8">
244        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
245    </svg>
246
247														</span>
248														<ul class="search-inspiration__list">
249                                                            															 															<li>
250																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/e-commerce/" data-count="6428">
251																	<span>E-commerce</span>
252																</a>
253															</li>
254																														<li>
255																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/architecture/" data-count="3228">
256																	<span>Architecture</span>
257																</a>
258															</li>
259																														<li>
260																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/hotel-restaurant/" data-count="2556">
261																	<span>Restaurant &amp; Hotel</span>
262																</a>
263															</li>
264																														<li>
265																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/design-agencies/" data-count="11228">
266																	<span>Design Agencies</span>
267																</a>
268															</li>
269																														<li>
270																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/business-corporate/" data-count="11222">
271																	<span>Business &amp; Corporate</span>
272																</a>
273															</li>
274																														<li>
275																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/fashion/" data-count="3900">
276																	<span>Fashion</span>
277																</a>
278															</li>
279																														<li>
280																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/mobile-apps/" data-count="3324">
281																	<span>Mobile &amp; Apps</span>
282																</a>
283															</li>
284																														<li>
285																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/interaction-design/" data-count="3444">
286																	<span>Interaction Design</span>
287																</a>
288															</li>
289																														<li>
290																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/illustration/" data-count="4284">
291																	<span>Illustration</span>
292																</a>
293															</li>
294																														<li>
295																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/header-design/" data-count="1788">
296																	<span>Header Design</span>
297																</a>
298															</li>
299																													</ul>
300													</li>
301													<li>
302														<span class="search-inspiration__section" data-search-target="eSection" data-action="click->
302search#doToogleTab">
303															        <svg class="ico-svg ico-svg search-inspiration__ico" viewbox="0 0 20 20" width="14">
304        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#geometric-2"></use>
305    </svg>
306
307															By Technology
308															        <svg class="ico-svg search-inspiration__arrow" viewbox="0 0 20 20" width="8">
309        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
310    </svg>
311
312														</span>
313														<ul class="search-inspiration__list">
314                                                            															 															<li>
315																<a class="search-inspiration__item" href="https://www.awwwards.com/awwwards/collections/css-js-animations/" data-count="1052">
316																	<span>CSS animations</span>
317																</a>
318															</li>
319																														<li>
320																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/wordpress/" data-count="11192">
321																	<span>Wordpress</span>
322																</a>
323															</li>
324																														<li>
325																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/shopify/" data-count="708">
326																	<span>Shopify</span>
327																</a>
328															</li>
329																														<li>
330																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/webgl/" data-count="3708">
331																	<span>WebGL sites</span>
332																</a>
333															</li>
334																														<li>
335																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/react/" data-count="2524">
336																	<span>React Websites</span>
337																</a>
338															</li>
339																														<li>
340																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/3d/" data-count="3964">
341																	<span>3D websites</span>
342																</a>
343															</li>
344																														<li>
345																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/figma/" data-count="2332">
346																	<span>Figma</span>
347																</a>
348															</li>
349																														<li>
350																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/gsap-animation/" data-count="4444">
351																	<span>Gsap</span>
352																</a>
353															</li>
354																														<li>
355																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/framer-motion/" data-count="96">
356																	<span>Framer</span>
357																</a>
358															</li>
359																														<li>
360																<a class="search-inspiration__item" href="https://www.awwwards.com/websites/webflow/" data-count="1724">
361																	<span>Webflow</span>
362																</a>
363															</li>
364																													</ul>
365													</li>
366													<li>
367														<a href="/collections/" class="search-inspiration__section">
368															        <svg class="ico-svg ico-svg search-inspiration__ico" viewbox="0 0 20 20" width="14">
369        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#geometric-3"></use>
370    </svg>
371
372															Collections
373															        <svg class="ico-svg search-inspiration__arrow" viewbox="0 0 20 20" width="8">
374        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
375    </svg>
376
377														</a>
378													</li>
379																										<li>
380														<a href="/blog/" class="search-inspiration__section">
381															        <svg class="ico-svg ico-svg search-inspiration__ico" viewbox="0 0 20 20" width="14">
382        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#geometric-4"></use>
383    </svg>
384
385															Blog
386														</a>
387													</li>
388												</ul>
389											</nav>
390											<div class="search-inspiration__searching" data-search-target="autocompleteView">
391												<div data-search-target="autocompleteTagsContainer">
392													<ul class="search-inspiration__list" data-search-target="autocompleteTags"></ul>
393												</div>
394												<div data-search-target="autocompleteUsersContainer">
395													<ul class="search-inspiration__list" data-search-target="autocompleteUsers"></ul>
396												</div>
397											</div>
398										</div>
399									</div>
400								</div>
401							</li>
402							<li class="nav-header-main__item">
403								<a class="nav-header-main__link" href="/directory/">
404									Directory
405								</a>
406							</li>
407                            <li class="nav-header-main__item">
408								<a class="nav-header-main__link" href="/academy/">
409									Academy
410									<span class="budget-tag budget-tag--small--solid--black anim-shiny"><span>New</span></span>
411								</a>
412							</li>
413							<li class="nav-header-main__item">
414								<a class="nav-header-main__link" href="/jobs/">
415									Jobs
416								</a>
417							</li>
418							<li class="nav-header-main__item">
419								<a class="nav-header-main__link" href="/market/">
420									Market
421								</a>
422							</li>
423						</ul>
424						<ul class="nav-header-main__social">
425							<li>
426								<a href="https://www.facebook.com/awwwards" target="_blank">
427									        <svg class="ico-svg" viewbox="0 0 20 20" width="20">
428        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#facebook"></use>
429    </svg>
430
431								</a>
432							</li>
433							<li>
434								<a href="https://www.instagram.com/awwwards" target="_blank">
435									        <svg class="ico-svg" viewbox="0 0 20 20" width="20">
436        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#instagram"></use>
437    </svg>
438
439								</a>
440							</li>
441							<li>
442								<a href="https://twitter.com/awwwards" target="_blank">
443									        <svg class="ico-svg" viewbox="0 0 20 20" width="20">
444        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#twitter"></use>
445    </svg>
446
447								</a>
448							</li>
449							<li>
450								<a href="https://www.instagram.com/awwwards" target="_blank">
451									        <svg class="ico-svg" viewbox="0 0 20 20" width="20">
452        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#instagram"></use>
453    </svg>
454
455								</a>
456							</li>
457							<li>
458								<a href="https://www.youtube.com/awwwardstv" target="_blank">
459									        <svg class="ico-svg" viewbox="0 0 20 20" width="20">
460        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#youtube"></use>
461    </svg>
462
463								</a>
464							</li>
465							<li>
466								<a href="https://www.tiktok.com/@awwwards.com" class="tiktok">
467									        <svg class="ico-svg" viewbox="0 0 20 20" width="20">
468        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#tiktok"></use>
469    </svg>
470
471								</a>
472							</li>
473						</ul>
474					</nav>
475                    <div class="header-main__search">
476						<div class="search-form">
477							<div class="search-form__field">
478								<button type="submit" class="search-form__button" aria-label="Search">
479									        <svg class="ico-svg" viewbox="0 0 20 20" width="14">
480        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#lupe"></use>
481    </svg>
482
483								</button>
484								<input type="text" value="" maxlength="50"
485									placeholder="Search by Blog"
486									class="search-form__input "
487									data-action="focus->search#show keyup->search#search"
488									data-search-target="input"
489								>
490							</div>
491						</div>
492					</div>
493                    <div class="header-main__right">
494                        <div class="header-main__user">
495            <strong class="header-main__link hidden-sm" data-controller="login" data-action="click->
495login#open">Log in</strong>
496        <strong class="header-main__link hidden-sm" data-controller="login" data-action="click->login#register">Sign Up</strong>
497        <span class="header-main__ico" data-controller="login" data-action="click->login#open">
498                    <svg class="ico-svg" viewbox="0 0 20 20" width="20">
499        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#user-login"></use>
500    </svg>
501
502        </span>
503        <div id="g_id_onload"
504             data-client_id="67367874134-drekvs51ripc1p92r1hpcntjk1jfmqka.apps.googleusercontent.com"
505             data-login_uri="https://www.awwwards.com/login-google-one-tap"
506             data-_destination="/blog/">
507        </div>
508    </div>
509
510                        <div class="header-main__bts">
511							<a href="/pro" class="button button--small--rounded">
512								Be Pro
513							</a>
514															<a href="/submit/" class="button button--small--outline--rounded">
515									Submit Website
516								</a>
517													</div>
518                    </div>
519                </div>
520            </div>
521        </div>
522    </div>
523</header>        <section id="content">
524                
525
526    <div class="block block--mb-s">
527        <div class="inner">
528            <div class="heading-svg has-sticker">
529                <svg class="heading-svg__title" width="1722" height="208" viewBox="0 0 1721.8 207.6">
530                    <path d="M0.1,2.5h128.5v34.8H37.8v46.4h73.1v34.8H37.8v87H0.1V2.5z M158.7,2.5h73.9c19.7,0,34.9,5.3,45.5,16 c10.8,10.4,16.2,24.4,16.2,41.8c0,13.5-3.3,25.1-9.9,34.8c-6.6,9.5-16,16-28.1,19.7l56.3,90.8h-42.1l-54.5-87.6h-19.7v87.6h-37.7 V2.5z M232.9,83.1c7.3,0,13.1-1.8,17.4-5.5c4.3-3.7,6.4-9.5,6.4-17.4s-2.1-13.7-6.4-17.4c-4.3-3.7-10.1-5.5-17.4-5.5h-36.5v45.8 H232.9z M333.4,2.5h125.6v34.8h-87.9v42.6h70.5v34.8h-70.5v56h90.8v34.8H333.4V2.5z M550.7,207.8c-12,0-22.9-2.5-32.8-7.5 c-9.7-5-17.8-11.9-24.4-20.6c-6.4-8.7-10.6-18.3-12.8-28.7l30.5-19.1c3.1,12.4,7.9,22.3,14.5,29.9c6.8,7.5,15.4,11.3,25.8,11.3 c7.9,0,14.3-1.9,19.1-5.8c4.8-4.1,7.2-10.1,7.2-18.3c0-5-1.6-9.5-4.9-13.3c-3.3-3.9-7.4-7.2-12.5-10.2c-4.8-2.9-11.8-6.6-20.9-11 l-8.4-4.1c-11.6-5.8-20.9-13-27.8-21.8c-7-8.9-10.4-20.2-10.4-33.9c0-10.2,2.3-19.5,7-27.8c4.8-8.3,11.5-14.8,20-19.4 c8.7-4.8,18.6-7.2,29.6-7.2c28,0,47.2,12.3,57.4,36.8l-30.5,19.4c-5-14.3-14-21.5-27-21.5c-5.6,0-10.4,1.8-14.5,5.5 c-4.1,3.5-6.1,7.8-6.1,13s1.7,9.9,5.2,13.9c3.7,3.9,8,7.2,13,10.2c5.2,2.7,12.7,6.3,22.3,10.7c9.5,4.4,17.4,9,23.8,13.6 c6.6,4.6,11.9,10.7,15.9,18.3c4.3,7.3,6.4,16.3,6.4,27c0,12.2-2.8,22.9-8.4,32.2c-5.4,9.1-13,16.1-22.9,21.2 C574.5,205.4,563.3,207.8,550.7,207.8z M647.1,2.5h37.7v77.1H766V2.5h37.7v203H766v-91.1h-81.2v91.1h-37.7V2.5z M918.6,2.5h76.6 c20.7,0,36.4,5.7,47.3,17.1c10.8,11.2,16.2,26.1,16.2,44.7s-5.4,33.5-16.2,45c-10.8,11.2-26.6,16.8-47.3,16.8h-38.9v79.5h-37.7V2.5 z M993.7,91.2c8.5,0,15.1-2.2,19.7-6.7s7-11.2,7-20.3s-2.3-15.9-7-20.3s-11.2-6.7-19.7-6.7h-37.4v53.9H993.7z M1173.5,207.8 c-17.6,0-33.6-3.9-48.1-11.6s-26.1-19.3-34.8-34.8c-8.5-15.7-12.8-34.8-12.8-57.4s4.2-41.7,12.8-57.1c8.7-15.7,20.3-27.4,34.8-35.1 c14.5-7.7,30.5-11.6,48.1-11.6c17.6,0,33.6,3.9,48.1,11.6c14.5,7.7,26,19.4,34.5,35.1c8.7,15.5,13.1,34.5,13.1,57.1 s-4.3,41.8-13.1,57.4c-8.5,15.5-20,27.1-34.5,34.8S1191.1,207.8,1173.5,207.8z M1173.5,173c10.6,0,20.2-2.4,28.7-7.2 c8.7-5,15.7-12.7,20.9-22.9c5.2-10.4,7.8-23.4,7.8-38.9c0-15.5-2.6-28.3-7.8-38.6c-5.2-10.4-12.2-18.1-20.9-22.9 c-8.5-5-18.1-7.5-28.7-7.5c-10.6,0-20.3,2.5-29,7.5c-8.5,4.8-15.4,12.5-20.6,22.9c-5.2,10.2-7.8,23.1-7.8,38.6 c0,15.5,2.6,28.4,7.8,38.9c5.2,10.2,12.1,17.9,20.6,22.9C1153.2,170.6,1162.8,173,1173.5,173z M1356.5,207.8 c-12,0-22.9-2.5-32.8-7.5c-9.7-5-17.8-11.9-24.4-20.6c-6.4-8.7-10.6-18.3-12.8-28.7l30.5-19.1c3.1,12.4,7.9,22.3,14.5,29.9 c6.8,7.5,15.4,11.3,25.8,11.3c7.9,0,14.3-1.9,19.1-5.8c4.8-4.1,7.2-10.1,7.2-18.3c0-5-1.7-9.5-4.9-13.3c-3.3-3.9-7.5-7.2-12.5-10.2 c-4.8-2.9-11.8-6.6-20.9-11l-8.4-4.1c-11.6-5.8-20.9-13-27.8-21.8c-7-8.9-10.4-20.2-10.4-33.9c0-10.2,2.3-19.5,7-27.8 c4.8-8.3,11.5-14.8,20-19.4c8.7-4.8,18.6-7.2,29.6-7.2c28,0,47.2,12.3,57.4,36.8l-30.4,19.4c-5-14.3-14-21.5-27-21.5 c-5.6,0-10.4,1.8-14.5,5.5c-4.1,3.5-6.1,7.8-6.1,13s1.7,9.9,5.2,13.9c3.7,3.9,8,7.2,13.1,10.2c5.2,2.7,12.7,6.3,22.3,10.7 c9.5,4.4,17.4,9,23.8,13.6c6.6,4.6,11.9,10.7,16,18.3c4.2,7.3,6.4,16.3,6.4,27c0,12.2-2.8,22.9-8.4,32.2 c-5.4,9.1-13.1,16.1-22.9,21.2C1380.3,205.4,1369.1,207.8,1356.5,207.8z M1481.6,37.3H1425V2.5h150.8v34.8h-56.6v168.2h-37.7V37.3z  M1656.9,207.8c-12,0-22.9-2.5-32.8-7.5c-9.7-5-17.8-11.9-24.4-20.6c-6.4-8.7-10.6-18.3-12.8-28.7l30.5-19.1 c3.1,12.4,7.9,22.3,14.5,29.9c6.8,7.5,15.4,11.3,25.8,11.3c7.9,0,14.3-1.9,19.1-5.8c4.8-4.1,7.2-10.1,7.2-18.3 c0-5-1.6-9.5-4.9-13.3c-3.3-3.9-7.4-7.2-12.5-10.2c-4.8-2.9-11.8-6.6-20.9-11l-8.4
530-4.1c-11.6-5.8-20.9-13-27.8-21.8 c-7-8.9-10.4-20.2-10.4-33.9c0-10.2,2.3-19.5,7-27.8c4.8-8.3,11.5-14.8,20-19.4c8.7-4.8,18.6-7.2,29.6-7.2 c28,0,47.2,12.3,57.4,36.8l-30.4,19.4c-5-14.3-14-21.5-27-21.5c-5.6,0-10.4,1.8-14.5,5.5c-4.1,3.5-6.1,7.8-6.1,13s1.7,9.9,5.2,13.9 c3.7,3.9,8,7.2,13.1,10.2c5.2,2.7,12.7,6.3,22.3,10.7c9.5,4.4,17.4,9,23.8,13.6c6.6,4.6,11.9,10.7,15.9,18.3 c4.3,7.3,6.4,16.3,6.4,27c0,12.2-2.8,22.9-8.4,32.2c-5.4,9.1-13.1,16.1-22.9,21.2C1680.7,205.4,1669.5,207.8,1656.9,207.8z"></path>
531                </svg>
532            </div>
533        </div>
534    </div>
535
536            <div class="block">
537                    <div class="card-blog-special ">
538        <div class="card-blog-special__left">
539            <div class="card-blog-special__info">
540                <p>Aug 31, 2026</p>
541                <h3 class="card-blog-special__title heading-5">
542                    <a href="/razorpay-sprint26-the-future-of-payments.html">Razorpay Sprint26: The Future of Payments.</a>
543                </h3>
544                <div class="card-blog-special__by">
545                    by
546                            
547    <div class="users-credits ">
548        <ul class="users-credits__details">
549                            <li>
550                                                            <div class="users-credits__item">
551                                                <figure class="avatar-name ">
552                            <a class="avatar-name__link" href="/razorpaydesign/" aria-label="Razorpay Design">
553                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/2790936/69ef51a21b8ab389542518.png" width="32" height="32" alt="" />
554                                <figcaption class="avatar-name__name">
555                                                                            <strong class="link-underlined ">Razorpay Design</strong>
556                                                                                                        </figcaption>
557                            </a>
558                        </figure>
559                    </div>
560                </li>
561                    </ul>
562            </div>
563
564                </div>
565                <div class="card-blog-special__excerpt text-large">A Blueprint for a New Kind of Fintech Web
566
567There is an unspoken rule in B2B product websites. Keep it clean. Keep it safe. Keep the product in the hero. Lead with...</div>
568                <div class="text-medium hidden-sm">
569                    <a href="/razorpay-sprint26-the-future-of-payments.html" class="bt-ico-left">
570                                <svg class="ico-svg" viewbox="0 0 20 20" width="16">
571        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
572    </svg>
573
574                        <strong class="link-underlined">Read Article</strong>
575                    </a>
576                </div>
577            </div>
578        </div>
579        <div class="card-blog-special__right">
580            <a href="/razorpay-sprint26-the-future-of-payments.html"><img class="card-blog-special__media" src="https://assets.awwwards.com/awards/images/2026/08/69f03e17c2e6f377520226.jpg" alt="Razorpay Sprint26: The Future of Payments."></a>
581        </div>
582    </div>
583
584        </div>
585    
586    <div class="block">
587        <div class="inner">
588            <ul class="grid-blog grid-blog grid-blog--two-cols">
589                                            <li>
590        <div class="card-blog">
591            <div class="card-blog__header">
592                <p>Aug 12, 2026</p>
593                <h3 class="card-blog__title">
594                    <a href="/awwards-interview-bonhomme.html">Awwwards Interview — Bonhomme </a>
595                </h3>
596            </div>
597            <div class="card-blog__info">
598                <a href="/awwards-interview-bonhomme.html">
599                    <figure class="card-blog__figure">
600                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/08/5b894a01cecbb.jpg" alt="Awwwards Interview — Bonhomme">
601                    </figure>
602                </a>
603                <div class="card-blog__by">
604                                            <small>by</small>
605                                
606    <div class="users-credits ">
607        <ul class="users-credits__details">
608                            <li>
609                                                            <div class="users-credits__item">
610                                                <figure class="avatar-name ">
611                            <a class="avatar-name__link" href="/BONHOMME/" aria-label="BONHOMME">
612                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/214176/54b5857184727.jpeg" width="32" height="32" alt="" />
613                                <figcaption class="avatar-name__name">
614                                                                            <strong class="link-underlined ">BONHOMME</strong>
615                                                                                                                <sup>INT</sup>
616                                                                    </figcaption>
617                            </a>
618                        </figure>
619                    </div>
620                </li>
621                    </ul>
622            </div>
623
624                                    </div>
625                <div class="card-blog__excerpt text-large hidden-sm">Emmanuel Cruellas — Co-founder &amp;amp; Creative Director, Bonhomme
626
627Founded in 2013 by Emmanuel Cruellas and Morgane Urbain, </div>
628                <div class="card-blog__footer">
629                    <div class="hidden-sm">
630                        <a href="/awwards-interview-bonhomme.html" class="bt-ico-left">
631                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
632        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
633    </svg>
634
635                            <strong class="link-underlined">Read Article</strong>
636                        </a>
637                    </div>
638                </div>
639            </div>
640        </div>
641    </li>
642
643                                            <li>
644        <div class="card-blog">
645            <div class="card-blog__header">
646                <p>Aug 5, 2026</p>
647                <h3 class="card-blog__title">
648                    <a href="/floema-spaces-for-people-made-for-life.html">Floema: Spaces for people, made for life. </a>
649                </h3>
650            </div>
651            <div class="card-blog__info">
652                <a href="/floema-spaces-for-people-made-for-life.html">
653                    <figure class="card-blog__figure">
654                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/08/floema-cs-thumb.jpg" alt="Floema: Spaces for people, made for life.">
655                    </figure>
656                </a>
657                <div class="card-blog__by">
658                                            <small>by</small>
659                                
660    <div class="users-credits ">
661        <ul class="users-credits__details">
662                            <li>
663                                                            <div class="users-credits__item">
664                                                <figure class="avatar-name ">
665                            <a class="avatar-name__link" href="/burocratik/" aria-label="Bürocratik">
666                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/12836/67618be431533723511082.png" width="32" height="32" alt="" />
667                                <figcaption class="avatar-name__name">
668                                                                            <strong class="link-underlined ">Bürocratik</strong>
669                                                                                                                <sup>PRO</sup>
670                                                                    </figcaption>
671                            </a>
672                        </figure>
673                    </div>
674                </li>
675                    </ul>
676            </div>
677
678                                    </div>
679                <div class="card-blog__excerpt text-large hidden-sm">Floema designs and produces sustainable urban furniture and signage for natural spaces. Spaces for people, made for life.
680
681</div>
682                <div class="card-blog__footer">
683                    <div class="hidden-sm">
684                        <a href="/floema-spaces-for-people-made-for-life.html" class="bt-ico-left">
685                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
686        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
687    </svg>
688
689                            <strong class="link-underlined">Read Article</strong>
690                        </a>
691                    </div>
692                </div>
693            </div>
694        </div>
695    </li>
696
697                            </ul>
698        </div>
699    </div>
700
701    <div class="block">
702        <div class="marquee-text" data-controller="marquee">
703            <div class="heading-1"><strong>FRESH NEWS & ARTICLES -</strong></div>
704        </div>
705    </div>
706
707            <div class="block">
708                    <div class="card-blog-special  card-blog-special--reflect ">
709        <div class="card-blog-special__left">
710            <div class="card-blog-special__info">
711                <p>Jul 29, 2026</p>
712                <h3 class="card-blog-special__title heading-5">
713                    <a href="/capitolium-a-digital-hub-for-a-first-of-its-kind-sports-collaboration.html">Capitolium: A Digital Hub for a First-of-its-Kind...</a>
714                </h3>
715                <div class="card-blog-special__by">
716                    by
717                            
718    <div class="users-credits ">
719        <ul class="users-credits__details">
720                            <li>
721                                                            <div class="users-credits__item">
722                                                <figure class="avatar-name ">
723                            <a class="avatar-name__link" href="/supercolor/" aria-label="Supercolor">
724                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/179326/66914f24877b7753865600.png" width="32" height="32" alt="" />
725                                <figcaption class="avatar-name__name">
726                                                                            <strong class="link-underlined ">Supercolor</strong>
727                                                                                                                <sup>PRO</sup>
728                                                                    </figcaption>
729                            </a>
730                        </figure>
731                    </div>
732                </li>
733                    </ul>
734            </div>
735
736                </div>
737                <div class="card-blog-special__excerpt text-large">Building the Story Behind Stade Toulousain and Toulouse Football Club, Sharing One Exclusive Jersey
738
739For the first time in the history of world sport, two elite...</div>
740                <div class="text-medium hidden-sm">
741                    <a href="/capitolium-a-digital-hub-for-a-first-of-its-kind-sports-collaboration.html" class="bt-ico-left">
742                                <svg class="ico-svg" viewbox="0 0 20 20" width="16">
743        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
744    </svg>
745
746                        <strong class="link-underlined">Read Article</strong>
747                    </a>
748                </div>
749            </div>
750        </div>
751        <div class="card-blog-special__right">
752            <a href="/capitolium-a-digital-hub-for-a-first-of-its-kind-sports-collaboration.html"><img class="card-blog-special__media" src="https://assets.awwwards.com/awards/images/2026/07/69e9350bc520b242777543.jpg" alt="Capitolium: A Digital Hub for a First-of-its-Kind Sports Collaboration"></a>
753        </div>
754    </div>
755
756        </div>
757    
758    <div class="block">
759        <div class="inner">
760            <ul class="grid-blog grid-blog grid-blog--two-cols">
761                                            <li>
762        <div class="card-blog">
763            <div class="card-blog__header">
764                <p>Jul 15, 2026</p>
765                <h3 class="card-blog__title">
766                    <a href="/la-revoltosa-rebooting-a-70-year-old-spanish-soda-brand-for-the-scroll-generation.html">La Revoltosa: Rebooting a 70-Year-Old Spanish Soda... </a>
767                </h3>
768            </div>
769            <div class="card-blog__info">
770                <a href="/la-revoltosa-rebooting-a-70-year-old-spanish-soda-brand-for-the-scroll-generation.html">
771                    <figure class="card-blog__figure">
772                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/07/revoltosa-cs-thumb.jpg" alt="La Revoltosa: Rebooting a 70-Year-Old Spanish Soda Brand for the Scroll Generation">
773                    </figure>
774                </a>
775                <div class="card-blog__by">
776                                            <small>by</small>
777                                
778    <div class="users-credits ">
779        <ul class="users-credits__details">
780                            <li>
781                                                            <div class="users-credits__item">
782                                                <figure class="avatar-name ">
783                            <a class="avatar-name__link" href="/Waka/" aria-label="Waka">
784                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/842922/5df1f3f042b00476897402.jpg" width="32" height="32" alt="" />
785                                <figcaption class="avatar-name__name">
786                                                                            <strong class="link-underlined ">Waka</strong>
787                                                                                                                <sup>PRO</sup>
788                                                                    </figcaption>
789                            </a>
790                        </figure>
791                    </div>
792                </li>
793                    </ul>
794            </div>
795
796                                    </div>
797                <div class="card-blog__excerpt text-large hidden-sm">Introduction
798
799La Revoltosa is a Spanish soda brand born in 1953, deeply rooted in bar culture and family memory across Spain. When Ref</div>
800                <div class="card-blog__footer">
801                    <div class="hidden-sm">
802                        <a href="/la-revoltosa-rebooting-a-70-year-old-spanish-soda-brand-for-the-scroll-generation.html" class="bt-ico-left">
803                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
804        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
805    </svg>
806
807                            <strong class="link-underlined">Read Article</strong>
808                        </a>
809                    </div>
810                </div>
811            </div>
812        </div>
813    </li>
814
815                                            <li>
816        <div class="card-blog">
817            <div class="card-blog__header">
818                <p>Jul 10, 2026</p>
819                <h3 class="card-blog__title">
820                    <a href="/reshaping-telha-clarkes-digital-home.html">Reshaping Telha Clarke’s Digital Home </a>
821                </h3>
822            </div>
823            <div class="card-blog__info">
824                <a href="/reshaping-telha-clarkes-digital-home.html">
825                    <figure class="card-blog__figure">
826                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/07/6964b60076436116585408.jpg" alt="Reshaping Telha Clarke’s Digital Home">
827                    </figure>
828                </a>
829                <div class="card-blog__by">
830                                            <small>by</small>
831                                
832    <div class="users-credits ">
833        <ul class="users-credits__details">
834                            <li>
835                                                            <div class="users-credits__item">
836                                                <figure class="avatar-name ">
837                            <a class="avatar-name__link" href="/greg-lalle/" aria-label="Greg Lallé">
838                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/749100/65afc4c97e5d8544114955.jpg" width="32" height="32" alt="" />
839                                <figcaption class="avatar-name__name">
840                                                                            <strong class="link-underlined ">Greg Lallé</strong>
841                                                                                                                <sup>PRO</sup>
842                                                                    </figcaption>
843                            </a>
844                        </figure>
845                    </div>
846                </li>
847                    </ul>
848            </div>
849
850                                    </div>
851                <div class="card-blog__excerpt text-large hidden-sm">Introduction
852
853In the world of architecture websites, standing out has become increasingly difficult. Minimal layouts, large imagery, refined...</div>
854                <div class="card-blog__footer">
855                    <div class="hidden-sm">
856                        <a href="/reshaping-telha-clarkes-digital-home.html" class="bt-ico-left">
857                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
858        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
859    </svg>
860
861                            <strong class="link-underlined">Read Article</strong>
862                        </a>
863                    </div>
864                </div>
865            </div>
866        </div>
867    </li>
868
869                            </ul>
870        </div>
871    </div>
872
873    <div class="block">
874        <div class="marquee-text" data-controller="marquee">
875            <div class="heading-1"><strong>STYLE - INSPIRATION - STAY TUNED -</strong></div>
876        </div>
877    </div>
878
879            <div class="block">
880                    <div class="card-blog-special ">
881        <div class="card-blog-special__left">
882            <div class="card-blog-special__info">
883                <p>Jul 8, 2026</p>
884                <h3 class="card-blog-special__title heading-5">
885                    <a href="/designing-for-an-identity-that-shapeshifts.html">Designing for an Identity That “ShapeShifts”</a>
886                </h3>
887                <div class="card-blog-special__by">
888                    by
889                            
890    <div class="users-credits ">
891        <ul class="users-credits__details">
892                            <li>
893                                                            <div class="users-credits__item">
894                                                <figure class="avatar-name ">
895                            <a class="avatar-name__link" href="/fromanother/" aria-label="fromanother">
896                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/2879537/69e1ec8cd622c536356279.PNG" width="32" height="32" alt="" />
897                                <figcaption class="avatar-name__name">
898                                                                            <strong class="link-underlined ">fromanother</strong>
899                                                                                                                <sup>PRO</sup>
900                                                                    </figcaption>
901                            </a>
902                        </figure>
903                    </div>
904                </li>
905                    </ul>
906            </div>
907
908                </div>
909                <div class="card-blog-special__excerpt text-large">The Idea: Representing the Intangible.
910
911With fromanother.love: our brand identity doesn&#039;t want to be pinned do</div>
912                <div class="text-medium hidden-sm">
913                    <a href="/designing-for-an-identity-that-shapeshifts.html" class="bt-ico-left">
914                                <svg class="ico-svg" viewbox="0 0 20 20" width="16">
915        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
916    </svg>
917
918                        <strong class="link-underlined">Read Article</strong>
919                    </a>
920                </div>
921            </div>
922        </div>
923        <div class="card-blog-special__right">
924            <a href="/designing-for-an-identity-that-shapeshifts.html"><img class="card-blog-special__media" src="https://assets.awwwards.com/awards/images/2026/07/69e5f4cf15e99855199696.jpg" alt="Designing for an Identity That “ShapeShifts”"></a>
925        </div>
926    </div>
927
928        </div>
929    
930
931    <div class="block">
932        <div class="inner">
933            <ul class="grid-blog grid-blog--two-cols">
934                                            <li>
935        <div class="card-blog">
936            <div class="card-blog__header">
937                <p>Jul 1, 2026</p>
938                <h3 class="card-blog__title">
939                    <a href="/the-new-obys.html">The New Obys </a>
940                </h3>
941            </div>
942            <div class="card-blog__info">
943                <a href="/the-new-obys.html">
944                    <figure class="card-blog__figure">
945                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/07/obys-cs-thumb.jpg" alt="The New Obys">
946                    </figure>
947                </a>
948                <div class="card-blog__by">
949                                            <small>by</small>
950                                
951    <div class="users-credits ">
952        <ul class="users-credits__details">
953                            <li>
954                                                            <div class="users-credits__item">
955                                                <figure class="avatar-name ">
956                            <a class="avatar-name__link" href="/obys/" aria-label="Obys">
957                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/762039/69d76a8a62ffc259189093.jpg" width="32" height="32" alt="" />
958                                <figcaption class="avatar-name__name">
959                                                                            <strong class="link-underlined ">Obys</strong>
960                                                                                                                <sup>PRO</sup>
961                                                                    </figcaption>
962                            </a>
963                        </figure>
964                    </div>
965                </li>
966                    </ul>
967            </div>
968
969                                    </div>
970                <div class="card-blog__excerpt text-large hidden-sm">Introduction
971
972Every studio eventually reaches a point where its own website no longer reflects who they are. For Obys, that moment came after...</div>
973                <div class="card-blog__footer">
974                    <div class="hidden-sm">
975                        <a href="/the-new-obys.html" class="bt-ico-left">
976                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
977        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
978    </svg>
979
980                            <strong class="link-underlined">Read Article</strong>
981                        </a>
982                    </div>
983                </div>
984            </div>
985        </div>
986    </li>
987
988                                            <li>
989        <div class="card-blog">
990            <div class="card-blog__header">
991                <p>Jun 3, 2026</p>
992                <h3 class="card-blog__title">
993                    <a href="/gq-audemars-piguet-the-extraordinary-lab.html">GQ &amp; Audemars Piguet: The Extraordinary Lab </a>
994                </h3>
995            </div>
996            <div class="card-blog__info">
997                <a href="/gq-audemars-piguet-the-extraordinary-lab.html">
998                    <figure class="card-blog__figure">
999                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/06/gq-cs-thumb.jpg" alt="GQ &amp; Audemars Piguet: The Extraordinary Lab">
1000                    </figure>
1001                </a>
1002                <div class="card-blog__by">
1003                                            <small>by</small>
1004                                
1005    <div class="users-credits ">
1006        <ul class="users-credits__details">
1007                            <li>
1008                                                            <div class="users-credits__item">
1009                                                <figure class="avatar-name ">
1010                            <a class="avatar-name__link" href="/immersivegarden/" aria-label="Immersive Garden">
1011                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/207/678e560901d2d451249818.jpg" width="32" height="32" alt="" />
1012                                <figcaption class="avatar-name__name">
1013                                                                            <strong class="link-underlined ">Immersive Garden</strong>
1014                                                                                                                <sup>INT</sup>
1015                                                                    </figcaption>
1016                            </a>
1017                        </figure>
1018                    </div>
1019                </li>
1020                    </ul>
1021            </div>
1022
1023                                    </div>
1024                <div class="card-blog__excerpt text-large hidden-sm">Creating a Real-Time Cinematic Experience Around Audemars Piguet’s RD#5
1025
1026Created in collaboration with Condé Nast for GQ and Audemars Piguet,...</div>
1027                <div class="card-blog__footer">
1028                    <div class="hidden-sm">
1029                        <a href="/gq-audemars-piguet-the-extraordinary-lab.html" class="bt-ico-left">
1030                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
1031        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
1032    </svg>
1033
1034                            <strong class="link-underlined">Read Article</strong>
1035                        </a>
1036                    </div>
1037                </div>
1038            </div>
1039        </div>
1040    </li>
1041
1042                            </ul>
1043        </div>
1044    </div>
1045
1046            <div class="block">
1047                    <div class="card-blog-special  card-blog-special--reflect ">
1048        <div class="card-blog-special__left">
1049            <div class="card-blog-special__info">
1050                <p>Jun 3, 2026</p>
1051                <h3 class="card-blog-special__title heading-5">
1052                    <a href="/gq-audemars-piguet-the-extraordinary-lab.html">GQ &amp; Audemars Piguet: The Extraordinary Lab</a>
1053                </h3>
1054                <div class="card-blog-special__by">
1055                    by
1056                            
1057    <div class="users-credits ">
1058        <ul class="users-credits__details">
1059                            <li>
1060                                                            <div class="users-credits__item">
1061                                                <figure class="avatar-name ">
1062                            <a class="avatar-name__link" href="/immersivegarden/" aria-label="Immersive Garden">
1063                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/207/678e560901d2d451249818.jpg" width="32" height="32" alt="" />
1064                                <figcaption class="avatar-name__name">
1065                                                                            <strong class="link-underlined ">Immersive Garden</strong>
1066                                                                                                                <sup>INT</sup>
1067                                                                    </figcaption>
1068                            </a>
1069                        </figure>
1070                    </div>
1071                </li>
1072                    </ul>
1073            </div>
1074
1075                </div>
1076                <div class="card-blog-special__excerpt text-large">Creating a Real-Time Cinematic Experience Around Audemars Piguet’s RD#5
1077
1078Created in collaboration with Condé Nast for GQ and Audemars Piguet, </div>
1079                <div class="text-medium hidden-sm">
1080                    <a href="/gq-audemars-piguet-the-extraordinary-lab.html" class="bt-ico-left">
1081                                <svg class="ico-svg" viewbox="0 0 20 20" width="16">
1082        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
1083    </svg>
1084
1085                        <strong class="link-underlined">Read Article</strong>
1086                    </a>
1087                </div>
1088            </div>
1089        </div>
1090        <div class="card-blog-special__right">
1091            <a href="/gq-audemars-piguet-the-extraordinary-lab.html"><img class="card-blog-special__media" src="https://assets.awwwards.com/awards/images/2026/06/gq-cs-thumb.jpg" alt="GQ &amp; Audemars Piguet: The Extraordinary Lab"></a>
1092        </div>
1093    </div>
1094
1095        </div>
1096    
1097    <div class="block">
1098        <div class="inner">
1099            <ul class="grid-blog grid-blog--two-cols">
1100                                            <li>
1101        <div class="card-blog">
1102            <div class="card-blog__header">
1103                <p>May 6, 2026</p>
1104                <h3 class="card-blog__title">
1105                    <a href="/fluid-glass-case-study.html">Fluid Glass - Case Study </a>
1106                </h3>
1107            </div>
1108            <div class="card-blog__info">
1109                <a href="/fluid-glass-case-study.html">
1110                    <figure class="card-blog__figure">
1111                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/05/699c319db1537012218587.jpg" alt="Fluid Glass - Case Study">
1112                    </figure>
1113                </a>
1114                <div class="card-blog__by">
1115                                            <small>by</small>
1116                                
1117    <div class="users-credits ">
1118        <ul class="users-credits__details">
1119                            <li>
1120                                                            <div class="users-credits__item">
1121                                                <figure class="avatar-name ">
1122                            <a class="avatar-name__link" href="/exo-ape/" aria-label="Exo Ape">
1123                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/602593/6260faaaa1043239269710.png" width="32" height="32" alt="" />
1124                                <figcaption class="avatar-name__name">
1125                                                                            <strong class="link-underlined ">Exo Ape</strong>
1126                                                                                                                <sup>PRO</sup>
1127                                                                    </figcaption>
1128                            </a>
1129                        </figure>
1130                    </div>
1131                </li>
1132                    </ul>
1133            </div>
1134
1135                                    </div>
1136                <div class="card-blog__excerpt text-large hidden-sm">Introduction
1137
1138Fluid Glass is a UK-based specialist in structural and architectural glazing, working on high-end res</div>
1139                <div class="card-blog__footer">
1140                    <div class="hidden-sm">
1141                        <a href="/fluid-glass-case-study.html" class="bt-ico-left">
1142                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
1143        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
1144    </svg>
1145
1146                            <strong class="link-underlined">Read Article</strong>
1147                        </a>
1148                    </div>
1149                </div>
1150            </div>
1151        </div>
1152    </li>
1153
1154                                            <li>
1155        <div class="card-blog">
1156            <div class="card-blog__header">
1157                <p>Apr 29, 2026</p>
1158                <h3 class="card-blog__title">
1159                    <a href="/mapping-the-uncharted-the-san-rita-project.html">Mapping the Uncharted: The San Rita Project </a>
1160                </h3>
1161            </div>
1162            <div class="card-blog__info">
1163                <a href="/mapping-the-uncharted-the-san-rita-project.html">
1164                    <figure class="card-blog__figure">
1165                        <img class="card-blog__media" src="https://assets.awwwards.com/awards/images/2026/04/thumbn
1165ail.jpg" alt="Mapping the Uncharted: The San Rita Project">
1166                    </figure>
1167                </a>
1168                <div class="card-blog__by">
1169                                            <small>by</small>
1170                                
1171    <div class="users-credits ">
1172        <ul class="users-credits__details">
1173                            <li>
1174                                                            <div class="users-credits__item">
1175                                                <figure class="avatar-name ">
1176                            <a class="avatar-name__link" href="/Sanrita/" aria-label="San Rita">
1177                                <img class="avatar-name__img" src="https://assets.awwwards.com/awards/media/cache/thumb_user_70/avatar/2175775/6986109337252327595502.png" width="32" height="32" alt="" />
1178                                <figcaption class="avatar-name__name">
1179                                                                            <strong class="link-underlined ">San Rita</strong>
1180                                                                                                                <sup>PRO</sup>
1181                                                                    </figcaption>
1182                            </a>
1183                        </figure>
1184                    </div>
1185                </li>
1186                    </ul>
1187            </div>
1188
1189                                    </div>
1190                <div class="card-blog__excerpt text-large hidden-sm">A Place to Call Home
1191
1192For a long time, we simply wanted to build something that felt like a home rather than just another portfolio. As a studio,...</div>
1193                <div class="card-blog__footer">
1194                    <div class="hidden-sm">
1195                        <a href="/mapping-the-uncharted-the-san-rita-project.html" class="bt-ico-left">
1196                                    <svg class="ico-svg" viewbox="0 0 20 20" width="16">
1197        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow"></use>
1198    </svg>
1199
1200                            <strong class="link-underlined">Read Article</strong>
1201                        </a>
1202                    </div>
1203                </div>
1204            </div>
1205        </div>
1206    </li>
1207
1208                            </ul>
1209        </div>
1210    </div>
1211
1212    <div class="block">
1213        <div class="inner">
1214            <div class="card-site-full__more">
1215                <a class="button button--large--outline--rounded" href="/blog/all">View all Articles</a>
1216            </div>
1217        </div>
1218    </div>
1219
1220
1221            
1222
1223
1224<div class="menu-float  js-menufloat-show  style-1">
1225    <div class="inner">
1226        <div class="menu-float__inner">
1227
1228                            <div class="bt-nav bt-nav--left is-hidden js-gototop">
1229                    <svg width="18" height="22" viewBox="0 0 18 22">
1230                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.69899 3.08174L7.76441 4.02584L7.75493 4.0258L1.3542 10.4265L0.0117182 9.08405L6.41245 2.68332L8.69707 0.398693L10.0396 1.74118L17.4565 9.15817L16.1159 10.4893L9.66059 4.0339L8.69899 3.08174ZM8.22508 5.69881L10.4911 7.2949L10.5527 21.8672L8.29342 21.8576L8.22508 5.69881Z"/>
1231                    </svg>
1232                </div>
1233            
1234                            <div class="menu-float__wrapper">
1235                    <div class="menu-float__top">
1236                        <div class="menu-float__menu menu-main" id="menu-main">
1237                            <div class="menu-float__menu-content">
1238                                <div class="menu-float__menu--main">
1239                                    <div class="menu-float__menu-col style-2 ">
1240                                        <div class="menu-float__menu-section">Awards</div>
1241                                        <ul class="menu-float__menu-nav">
1242                                            <li >
1243                                                <a href="/websites/" class="menu-float__sub-item ">Winners
1244                                                </a>
1245                                            </li>
1246                                            <li >
1247                                                <a href="/websites/nominees/" class="menu-float__sub-item ">
1248                                                    Nominees
1249                                                </a>
1250                                            </li>
1251                                            <li >
1252                                                <a href="/websites/sites_of_the_day/" class="menu-float__sub-item">
1253                                                    Sites of the Day
1254                                                </a>
1255                                            </li>
1256                                            <li >
1257                                                <a href="/websites/sites_of_the_month/" class="menu-float__sub-item">
1258                                                    Sites of the Month
1259                                                </a>
1260                                            </li>
1261                                        </ul>
1262                                    </div>
1263                                    <div class="menu-float__menu-col style-1">
1264                                        <div class="menu-float__menu-row style-1 ">
1265                                            <div class="menu-float__menu-section">Inspiration</div>
1266                                            <ul class="menu-float__menu-nav">
1267                                                <li  >
1268                                                    <a href="/collections/" class="menu-float__sub-item">
1269                                                        Collections
1270                                                    </a>
1271                                                </li>
1272                                                <li >
1273                                                    <a href="/elements/" class="menu-float__sub-item">
1274                                                        Elements
1275                                                    </a>
1276                                                </li>
1277                                            </ul>
1278                                        </div>
1279                                        <div class="menu-float__menu-row style-1">
1280                                            <div class="menu-float__menu-section">Academy</div>
1281                                            <ul class="menu-float__menu-nav">
1282
1283                                                                                                    <li>
1284                                                        <a href="/academy/" class="menu-float__sub-item">
1285                                                            Courses
1286                                                        </a>
1287                                                    </li>
1288                                                                                            </ul>
1289                                        </div>
1290                                    </div>
1291                                    <div class="menu-float__menu-col style-1 ">
1292                                        <div class="menu-float__menu-row style-1 ">
1293                                            <div class="menu-float__menu-section">Directory</div>
1294                                            <ul class="menu-float__menu-nav">
1295                                                <li>
1296                                                    <a href="/directory/homepage/" class="menu-float__sub-item ">
1297                                                        Professionals
1298                                                    </a>
1299                                                </li>
1300                                                <li >
1301                                                    <a href="/directory/international/" class="menu-float__sub-item">
1302                                                        Internationals
1303                                                    </a>
1304                                                </li>
1305                                                <li >
1306                                                    <a href="/directory/freelance/" class="menu-float__sub-item">
1307                                                        Freelancers
1308                                                    </a>
1309                                                </li>
1310                                                <li >
1311                                                    <a href="/directory/agency-studio/" class="menu-float__sub-item ">
1312                                                        Agencies & Studios
1313                                                    </a>
1314                                                </li>
1315                                            </ul>
1316                                        </div>
1317                                    </div>
1318                                    <div class="menu-float__menu-col style-1 ">
1319                                        <div class="menu-float__menu-row style-1 ">
1320                                            <div class="menu-float__menu-section">w.</div>
1321                                            <ul class="menu-float__menu-nav">
1322                                                <li  class="is-active" >
1323                                                    <a href="/blog/" class="menu-float__sub-item">
1324                                                        Blog
1325                                                    </a>
1326                                                </li>
1327                                                <li  >
1328                                                    <a href="/jobs/"  class="menu-float__sub-item">
1329                                                        Jobs
1330                                                    </a>
1331                                                </li>
1332                                                <li>
1333                                                    <a href="/jury/" class="menu-float__sub-item ">
1334                                                        Jury
1335                                                    </a>
1336                                                </li>
1337                                                <li >
1338                                                    <a href="/market/" class="menu-float__sub-item ">Products</a>
1339                                                </li>
1340                                                <li>
1341                                                    <a href="/honors/nominees" class="menu-float__sub-item ">
1342                                                        Awards Honors &nbsp;<span class="budget-tag budget-tag--solid--white">New</span>
1343                                                    </a>
1344                                                </li>
1345                                            </ul>
1346                                        </div>
1347                                    </div>
1348                                </div>
1349                            </div>
1350                        </div>
1351                        <div class="menu-float__menu" id="menu-filters">
1352                            <div class="menu-float__menu-content">
1353                                                
1354    <div class="filters">
1355        
1356                            
1357                                        <div class="filters__tab" id="filter-winners-category" data-controller="searchable-filter">
1358
1359        
1360        <div class="filters__content" data-searchable-filter-target="filters">
1361                            <div class="js-filter-section">
1362                    <div class="filters__label">category</div>
1363                    <ul class="filters__list">
1364                                                    <li class="js-filter-item">
1365                                <a
1366                                    href="/blog/design-illustration/"
1367                                    class="filters__item "
1368                                >
1369                                    <span class="js-filter-item-name">Design &amp; Illustration</span>
1370                                                                    </a>
1371                            </li>
1372                                                    <li class="js-filter-item">
1373                                <a
1374                                    href="/blog/inspirational-talks/"
1375                                    class="filters__item "
1376                                >
1377                                    <span class="js-filter-item-name">Inspirational talks</span>
1378                                                                    </a>
1379                            </li>
1380                                                    <li class="js-filter-item">
1381                                <a
1382                                    href="/blog/interviews/"
1383                                    class="filters__item "
1384                                >
1385                                    <span class="js-filter-item-name">Interviews</span>
1386                                                                    </a>
1387                            </li>
1388                                                    <li class="js-filter-item">
1389                                <a
1390                                    href="/blog/media/"
1391                                    class="filters__item "
1392                                >
1393                                    <span class="js-filter-item-name">Media</span>
1394                                                                    </a>
1395                            </li>
1396                                                    <li class="js-filter-item">
1397                                <a
1398                                    href="/blog/mobile-excellence/"
1399                                    class="filters__item "
1400                                >
1401                                    <span class="js-filter-item-name">Mobile Excellence</span>
1402                                                                    </a>
1403                            </li>
1404                                                    <li class="js-filter-item">
1405                                <a
1406                                    href="/blog/news/"
1407                                    class="filters__item "
1408                                >
1409                                    <span class="js-filter-item-name">News</span>
1410                                                                    </a>
1411                            </li>
1412                                                    <li class="js-filter-item">
1413                                <a
1414                                    href="/blog/resources-tools/"
1415                                    class="filters__item "
1416                                >
1417                                    <span class="js-filter-item-name">Resources &amp; Tools</span>
1418                                                                    </a>
1419                            </li>
1420                                                    <li class="js-filter-item">
1421                                <a
1422                                    href="/blog/the-best-articles/"
1423                                    class="filters__item "
1424                                >
1425                                    <span class="js-filter-item-name">The Best Articles</span>
1426                                                                    </a>
1427                            </li>
1428                                                    <li class="js-filter-item">
1429                                <a
1430                                    href="/blog/web-design-tag/"
1431                                    class="filters__item "
1432                                >
1433                                    <span class="js-filter-item-name">Web Design</span>
1434                                                                    </a>
1435                            </li>
1436                                            </ul>
1437                </div>
1438                    </div>
1439    </div>
1440
1441                            
1442        
1443                            
1444                                        <div class="filters__tab" id="filter-winners-tag" data-controller="searchable-filter">
1445
1446                    <div class="filters__search">
1447                <input type="text" class="js-input-filter-search" placeholder="Search ..." data-searchable-filter-target="input" data-action="keyup->searchable-filter#searchEvent">
1448                <button type="submit" data-action="click->
1448searchable-filter#doSearch">
1449                            <svg class="ico-svg" viewbox="0 0 20 20" width="17">
1450        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#lupe"></use>
1451    </svg>
1452
1453                </button>
1454            </div>
1455        
1456        <div class="filters__content" data-searchable-filter-target="filters">
1457                            <div class="js-filter-section">
1458                    <div class="filters__label">tag</div>
1459                    <ul class="filters__list">
1460                                                    <li class="js-filter-item">
1461                                <a
1462                                    href="/blog/agencies-studios/"
1463                                    class="filters__item "
1464                                >
1465                                    <span class="js-filter-item-name">Agencies &amp; Studios</span>
1466                                                                    </a>
1467                            </li>
1468                                                    <li class="js-filter-item">
1469                                <a
1470                                    href="/blog/animation-tag/"
1471                                    class="filters__item "
1472                                >
1473                                    <span class="js-filter-item-name">Animation</span>
1474                                                                    </a>
1475                            </li>
1476                                                    <li class="js-filter-item">
1477                                <a
1478                                    href="/blog/apps-web-apps/"
1479                                    class="filters__item "
1480                                >
1481                                    <span class="js-filter-item-name">Apps &amp; Web Apps</span>
1482                                                                    </a>
1483                            </li>
1484                                                    <li class="js-filter-item">
1485                                <a
1486                                    href="/blog/art-design/"
1487                                    class="filters__item "
1488                                >
1489                                    <span class="js-filter-item-name">Art &amp; Design</span>
1490                                                                    </a>
1491                            </li>
1492                                                    <li class="js-filter-item">
1493                                <a
1494                                    href="/blog/business-productivity/"
1495                                    class="filters__item "
1496                                >
1497                                    <span class="js-filter-item-name">Business &amp; Productivity</span>
1498                                                                    </a>
1499                            </li>
1500                                                    <li class="js-filter-item">
1501                                <a
1502                                    href="/blog/case-study/"
1503                                    class="filters__item "
1504                                >
1505                                    <span class="js-filter-item-name">Case Study</span>
1506                                                                    </a>
1507                            </li>
1508                                                    <li class="js-filter-item">
1509                                <a
1510                                    href="/blog/code-front-end/"
1511                                    class="filters__item "
1512                                >
1513                                    <span class="js-filter-item-name">Code &amp; Front-End</span>
1514                                                                    </a>
1515                            </li>
1516                                                    <li class="js-filter-item">
1517                                <a
1518                                    href="/blog/coding-techniques/"
1519                                    class="filters__item "
1520                                >
1521                                    <span class="js-filter-item-name">Coding Techniques</span>
1522                                                                    </a>
1523                            </li>
1524                                                    <li class="js-filter-item">
1525                                <a
1526                                    href="/blog/creative-advertising/"
1527                                    class="filters__item "
1528                                >
1529                                    <span class="js-filter-item-name">Creative Advertising</span>
1530                                                                    </a>
1531                            </li>
1532                                                    <li class="js-filter-item">
1533                                <a
1534                                    href="/blog/events-conferences/"
1535                                    class="filters__item "
1536                                >
1537                                    <span class="js-filter-item-name">Events &amp; Conferences</span>
1538                                                                    </a>
1539                            </li>
1540                                                    <li class="js-filter-item">
1541                                <a
1542                                    href="/blog/fonts/"
1543                                    class="filters__item "
1544                                >
1545                                    <span class="js-filter-item-name">Fonts</span>
1546                                                                    </a>
1547                            </li>
1548                                                    <li class="js-filter-item">
1549                                <a
1550                                    href="/blog/gadgets/"
1551                                    class="filters__item "
1552                                >
1553                                    <span class="js-filter-item-name">Gadgets</span>
1554                                                                    </a>
1555                            </li>
1556                                                    <li class="js-filter-item">
1557                                <a
1558                                    href="/blog/giveaways/"
1559                                    class="filters__item "
1560                                >
1561                                    <span class="js-filter-item-name">Giveaways</span>
1562                                                                    </a>
1563                            </li>
1564                                                    <li class="js-filter-item">
1565                                <a
1566                                    href="/blog/html5-css3/"
1567                                    class="filters__item "
1568                                >
1569                                    <span class="js-filter-item-name">HTML5 &amp; CSS3</span>
1570                                                                    </a>
1571                            </li>
1572                                                    <li class="js-filter-item">
1573                                <a
1574                                    href="/blog/icons-tag/"
1575                                    class="filters__item "
1576                                >
1577                                    <span class="js-filter-item-name">Icons</span>
1578                                                                    </a>
1579                            </li>
1580                                                    <li class="js-filter-item">
1581                                <a
1582                                    href="/blog/illustration-tag/"
1583                                    class="filters__item "
1584                                >
1585                                    <span class="js-filter-item-name">Illustration</span>
1586                                                                    </a>
1587                            </li>
1588                                                    <li class="js-filter-item">
1589                                <a
1590                                    href="/blog/inspiration/"
1591                                    class="filters__item "
1592                                >
1593                                    <span class="js-filter-item-name">Inspiration</span>
1594                                                                    </a>
1595                            </li>
1596                                                    <li class="js-filter-item">
1597                                <a
1598                                    href="/blog/interviews/"
1599                                    class="filters__item "
1600                                >
1601                                    <span class="js-filter-item-name">Interviews</span>
1602                                                                    </a>
1603                            </li>
1604                                                    <li class="js-filter-item">
1605                                <a
1606                                    href="/blog/javascript-1/"
1607                                    class="filters__item "
1608                                >
1609                                    <span class="js-filter-item-name">JavaScript</span>
1610                                                                    </a>
1611                            </li>
1612                                                    <li class="js-filter-item">
1613                                <a
1614                                    href="/blog/layout-design/"
1615                                    class="filters__item "
1616                                >
1617                                    <span class="js-filter-item-name">Layout Design</span>
1618                                                                    </a>
1619                            </li>
1620                                                    <li class="js-filter-item">
1621                                <a
1622                                    href="/blog/learning-resources/"
1623                                    class="filters__item "
1624                                >
1625                                    <span class="js-filter-item-name">Learning Resources</span>
1626                                                                    </a>
1627                            </li>
1628                                                    <li class="js-filter-item">
1629                                <a
1630                                    href="/blog/los-angeles-2017/"
1631                                    class="filters__item "
1632                                >
1633                                    <span class="js-filter-item-name">Los Angeles 2017</span>
1634                                                                    </a>
1635                            </li>
1636                                                    <li class="js-filter-item">
1637                                <a
1638                                    href="/blog/motion-graphics/"
1639                                    class="filters__item "
1640                                >
1641                                    <span class="js-filter-item-name">Motion Graphics</span>
1642                                                                    </a>
1643                            </li>
1644                                                    <li class="js-filter-item">
1645                                <a
1646                                    href="/blog/packaging-graphic/"
1647                                    class="filters__item "
1648                                >
1649                                    <span class="js-filter-item-name">Packaging &amp; Graphic</span>
1650                                                                    </a>
1651                            </li>
1652                                                    <li class="js-filter-item">
1653                                <a
1654                                    href="/blog/photography-tag/"
1655                                    class="filters__item "
1656                                >
1657                                    <span class="js-filter-item-name">Photography</span>
1658                                                                    </a>
1659                            </li>
1660                                                    <li class="js-filter-item">
1661                                <a
1662                                    href="/blog/plugins-frameworks/"
1663                                    class="filters__item "
1664                                >
1665                                    <span class="js-filter-item-name">Plugins &amp; Frameworks</span>
1666                                                                    </a>
1667                            </li>
1668                                                    <li class="js-filter-item">
1669                                <a
1670                                    href="/blog/responsive/"
1671                                    class="filters__item "
1672                                >
1673                                    <span class="js-filter-item-name">Responsive</span>
1674                                                                    </a>
1675                            </li>
1676                                                    <li class="js-filter-item">
1677                                <a
1678                                    href="/blog/sites-of-the-month/"
1679                                    class="filters__item "
1680                                >
1681                                    <span class="js-filter-item-name">Sites of the Month</span>
1682                                                                    </a>
1683                            </li>
1684                                                    <li class="js-filter-item">
1685                                <a
1686                                    href="/blog/sites-of-the-year/"
1687                                    class="filters__item "
1688                                >
1689                                    <span class="js-filter-item-name">Sites of the Year</span>
1690                                                                    </a>
1691                            </li>
1692                                                    <li class="js-filter-item">
1693                                <a
1694                                    href="/blog/tutorials/"
1695                                    class="filters__item "
1696                                >
1697                                    <span class="js-filter-item-name">Tutorials</span>
1698                                                                    </a>
1699                            </li>
1700                                                    <li class="js-filter-item">
1701                                <a
1702                                    href="/blog/typography-tag/"
1703                                    class="filters__item "
1704                                >
1705                                    <span class="js-filter-item-name">Typography</span>
1706                                                                    </a>
1707                            </li>
1708                                                    <li class="js-filter-item">
1709                                <a
1710                                    href="/blog/ui-ux/"
1711                                    class="filters__item "
1712                                >
1713                                    <span class="js-filter-item-name">UI &amp; UX</span>
1714                                                                    </a>
1715                            </li>
1716                                                    <li class="js-filter-item">
1717                                <a
1718                                    href="/blog/vr/"
1719                                    class="filters__item "
1720                                >
1721                                    <span class="js-filter-item-name">VR</span>
1722                                                                    </a>
1723                            </li>
1724                                                    <li class="js-filter-item">
1725                                <a
1726                                    href="/blog/video-tag/"
1727                                    class="filters__item "
1728                                >
1729                                    <span class="js-filter-item-name">Video</span>
1730                                                                    </a>
1731                            </li>
1732                                                    <li class="js-filter-item">
1733                                <a
1734                                    href="/blog/weekend-roundup/"
1735                                    class="filters__item "
1736                                >
1737                                    <span class="js-filter-item-name">Weekend Roundup</span>
1738                                                                    </a>
1739                            </li>
1740                                                    <li class="js-filter-item">
1741                                <a
1742                                    href="/blog/offices/"
1743                                    class="filters__item "
1744                                >
1745                                    <span class="js-filter-item-name">offices</span>
1746                                                                    </a>
1747                            </li>
1748                                            </ul>
1749                </div>
1750                    </div>
1751    </div>
1752
1753                            
1754            </div>
1755                                    </div>
1756                        </div>
1757                    </div>
1758
1759                    <div class="menu-float__bottom">
1760                        <div class="menu-float__layout menu-float__layout--primary">
1761                            <div class="menu-float__content">
1762                                <a href="/" class="menu-float__logo" aria-label="Awwwards home page">
1763                                        <svg width="30" height="16" viewBox="0 0 30 16" ><path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z" /></svg>
1764
1765                                </a>
1766                                                            </div>
1767                        </div>
1768
1769                                            <div class="menu-float__layout menu-float__layout--secondary">
1770        <div class="menu-float__content">
1771            <strong class="menu-float__title-section">Filters</strong>
1772            <ul class="menu-float__filters">
1773                                    <li>
1774                        <span
1775                            class="menu-float__filter js-menufloat-filter "
1776                            data-id="filter-winners-category"
1777                        >
1778                            Category
1779                                    <svg class="ico-svg menu-float__arrow" viewbox="0 0 20 20" width="12">
1780        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
1781    </svg>
1782
1783                        </span>
1784                    </li>
1785                                    <li>
1786                        <span
1787                            class="menu-float__filter js-menufloat-filter "
1788                            data-id="filter-winners-tag"
1789                        >
1790                            Tag
1791                                    <svg class="ico-svg menu-float__arrow" viewbox="0 0 20 20" width="12">
1792        <use xlink:href="https://www.awwwards.com/assets/redesign/images/sprite-icons.svg?v=3#arrow-dd"></use>
1793    </svg>
1794
1795                        </span>
1796                    </li>
1797                            </ul>
1798        </div>
1799    </div>
1800    
1801        
1802                    </div>
1803
1804                </div>
1805            
1806                                        
1807            
1808        </div>
1809    </div>
1810</div>
1811
1812
1813
1814
1815
1816
1817    </section>
1818            <footer id="footer">
1819    <div class="inner">
1820        <div class="footer__top">
1821            <p class="footer__logo footer__logo--small">
1822                    <svg width="30" height="16" viewBox="0 0 30 16" ><path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z" /></svg>
1823
1824            </p>
1825            <div class="footer__wrapper">
1826                <div class="footer__grid">
1827                    <ul class="footer__menu">
1828                        <li><a href="/websites/">Websites</a></li>
1829                        <li><a href="/collections/search/">Collections</a></li>
1830                        <li><a href="/elements/">Elements</a></li>
1831                    </ul>
1832                    <ul class="footer__menu">
1833                        <li><a href="/academy/">Academy</a></li>
1834                        <li><a href="/jobs/search/">Jobs</a></li>
1835                        <li><a href="/market/">Market</a></li>
1836                    </ul>
1837                    <ul class="footer__menu">
1838                        <li><a href="/directory/search/">Directory</a></li>
1839                        <li><a href="https://conference.awwwards.com">Conferences</a></li>
1840                    </ul>
1841                    <ul class="footer__menu">
1842                        <li><a rel="nofollow" href="/faqs/">FAQs</a></li>
1843                        <li><a rel="nofollow" href="/about-us/">About Us</a></li>
1844                        <li><a rel="nofollow" href="/contact-us/">Contact Us</a></li>
1845                    </ul>
1846                </div>
1847                            </div>
1848        </div>
1849        <div class="footer__bottom">
1850            <div class="footer__left">
1851                <ul class="footer__nav">
1852                    <li><a rel="nofollow" href="/cookies-policy/">Cookies Policy</a></li>
1853                    <li><a rel="nofollow" href="/terms/">Legal Terms</a></li>
1854                    <li><a rel="nofollow" href="/privacy-policy/">Privacy Policy</a></li>
1855                </ul>
1856            </div>
1857            <div class="footer__right">
1858                <ul class="footer__nav">
1859                    <li><strong>Connect:</strong></li>
1860                    <li><a href="https://www.instagram.com/awwwards">Instagram</a></li>
1861                    <li><a href="https://www.linkedin.com/company/awwwards">LinkedIn</a></li>
1862                    <li><a href="https://twitter.com/awwwards">Twitter</a></li>
1863                    <li><a href="https://www.facebook.com/awwwards">Facebook</a></li>
1864                    <li><a href="https://www.youtube.com/awwwardstv">YouTube</a></li>
1865                    <li><a href="https://www.tiktok.com/@awwwards.com">TikTok</a></li>
1866                    <li><a href="https://www.pinterest.es/awwwards/">Pinterest</a></li>
1867                </ul>
1868            </div>
1869        </div>
1870    </div>
1871</footer>
1872                
1872<script src="https://assets.awwwards.com/dist/js/runtime.bf71a965.js" defer></script>
1872<script src="https://assets.awwwards.com/dist/js/5880.7efd7b75.js" defer></script>
1872<script src="https://assets.awwwards.com/dist/js/2164.63e99435.js" defer></script>
1872<script src="https://assets.awwwards.com/dist/js/7384.aa4162b5.js" defer></script>
1872<script src="https://assets.awwwards.com/dist/js/9434.e4eb6ac7.js" defer></script>
1872<script src="https://assets.awwwards.com/dist/js/966.cbfdb87c.js" defer></script>
1872<script src="https://assets.awwwards.com/dist/js/redesign_default.525695d8.js" defer></script>
1872
1873        
1873<script>
1874        var script = document.createElement('script');
1875        script.type = 'text/javascript';
1876        script.src = 'https://www.google.com/recaptcha/api.js?render=6LdYct0kAAAAAHlky5jhQhrvSRt_4vOJkzbVs2Oa';
1877        script.async = true;
1878        document.body.appendChild(script);
1879    </script>
1879
1880    
1881            
1881<script>
1882                window.AmplitudeData = window.amplitude || {};
1883                window.AmplitudeData.MandatoryProperties = {"page_type":"user","page_sub_type":"homepage","page_uri":"\/_fragment","url":"https:\/\/www.awwwards.com\/_fragment?_hash=mgZpM7IRN%2B73JtL7Ivf7UFTN6YHqhpu%2BYqA5pJMqqXI%3D&_path=_format%3Dhtml%26_locale%3Den%26_controller%3DApp%255CController%255CJavascriptController%253A%253AmandatoryProperties","prev_page_type":null,"prev_page_sub_type":null,"prev_page_uri":null,"url_query_params":"_hash=mgZpM7IRN%2B73JtL7Ivf7UFTN6YHqhpu%2BYqA5pJMqqXI%3D&_path=_format%3Dhtml%26_locale%3Den%26_controller%3DApp%255CController%255CJavascriptController%253A%253AmandatoryProperties"};
1884            </script>
1884
1885</div>
1886
1887
1888
1889</body>
1890</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.