@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";.login-page{height:100vh;width:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;flex-direction:column;h2 {margin: 0; font-size: 26px; font-weight: 400; img {width: 180px; margin-left: 4px; margin-bottom: -8px;}} p {margin-top: var(--margin); margin-bottom: 0; font-size: 16px; font-weight: 300;} form {width: 380px; max-width: 100%; padding: 30px 0; display: flex; text-align: center; flex-direction: column; label {font-size: 13px; margin-bottom: 0; text-align: left; width: 100%;} input {margin-top: 6px; margin-bottom: 16px; padding-left: 8px;} button {margin-top: 8px; width: 100%;}}}header{background-color:#fff;box-shadow:0 10px 60px #0000000d;border-bottom:1px solid rgba(0,0,0,.05);aside,nav {display: flex; justify-content: flex-start; align-items: center; &.logo {a {display: contents;}}} .container {height: 110px; display: flex; justify-content: space-between; align-items: center;} img.logo {width: 120px; height: auto;} a,span {position: relative; margin: 0 20px; background-color: none; font-size: 14px; font-weight: 500; cursor: pointer; text-transform: uppercase; color: var(--dark-grey); transition: color .5s; &::after {content: " "; position: absolute; left: 0; bottom: -8px; width: 10px; height: 2px; background-color: var(--black); display: none;} &.active {color: var(--black); &::after {display: initial;}} &:hover {color: var(--black);}} .user-icon {.user-profile-icon {border: none;} span {height: 100%; width: 100%;}} .desktop-nav {display: flex;} .menu-toggle {display: none; background: none; border: none; cursor: pointer;} .menu-toggle img {width: 28px; height: auto;} .mobile-nav {display: none; text-align: center; a,span {&.active {&::after {display: none;}} &:hover {color: var(--black);}}} @media (max-width: 767px) {.desktop-nav {display: none;} .menu-toggle {display: block;} .mobile-nav {position: fixed; box-sizing: border-box; top: 0; right: -100%; width: 100%; height: 100vh; background: white; box-shadow: -2px 0 10px rgba(0,0,0,.1); z-index: 1000; transition: right .4s ease-in-out; display: flex; flex-direction: column; padding: 20px;} .mobile-nav.open {right: 0;} .mobile-nav-header {display: flex; justify-content: space-between; align-items: center;} .mobile-nav .logo {margin-top: 20px; width: 120px;} .mobile-nav .close-button {font-size: 36px; background: none; border: none; cursor: pointer; color: var(--dark-grey);} .mobile-nav ul {list-style: none; padding: 0; margin: 40px 0; display: flex; flex-direction: column; gap: 20px;} .mobile-nav li a {text-decoration: none; font-size: 18px; font-weight: 600; color: var(--dark-grey);}}}.react-tiny-popover-container{z-index:100}.popover-box{border-radius:8px;background-color:#fff;padding:2px 8px;pointer-events:none;box-shadow:#00000012 0 1px 1px,#00000012 0 2px 2px,#00000012 0 4px 4px,#00000012 0 8px 8px,#00000012 0 16px 16px;button {text-align: left; margin: 8px auto; pointer-events: initial; display: block; width: 100%; background-color: transparent; &:hover {background-color: rgb(242,242,242);;}}}.user-profile-icon{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;color:#fff;background-color:var(--dark-purple);background-size:cover;position:relative;span.ignore {position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0;}}.user-profile-icon .image-update-options .wrapper{border-radius:100%}.image-update-options{position:absolute;top:0;left:0;width:100%;height:100%}.image-update-options .wrapper{background-color:#000000b3;display:none;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;button {color: rgb(255,255,255); text-decoration: underline; background-color: transparent; margin: 0; width: auto; height: auto; font-size: 10px; margin: 2px 0;}}.image-update-options:hover .wrapper{display:flex}footer#website-footer{background-color:var(--dark-purple);color:var(--light-grey);padding:60px 0;color:#fff}footer#website-footer .container{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}@media (max-width: 768px){footer#website-footer .container{flex-direction:column;text-align:center}footer#website-footer .container :is(.logo-area, .nav-area, .contact-area){width:100%}footer#website-footer .container .contact-area{display:flex;flex-direction:column;align-items:center}footer#website-footer .container .logo-area{order:3}}footer#website-footer .footer-col{flex:0 0 auto;min-width:200px;a {color: white; transition: color .3s; &:hover {color: var(--purple);}}}footer#website-footer .logo-area{width:40%;margin-bottom:10px;color:#fff;font-size:16px;img {width: 120px; height: auto; margin-bottom: 18px;} p {margin: 0 0 8px 0;}}footer#website-footer :is(.nav-area h4, .contact-area h4){margin:0 0 20px;color:#fff;font-size:22px;text-transform:uppercase;font-weight:700}footer#website-footer .nav-area{width:25%;ul {li {font-size: 16px; margin-bottom: 8px;}}}footer#website-footer .contact-area{width:32%;p {display: flex; align-items: center; font-size: 16px; margin-bottom: 8px; img {width: 16px; margin-right: 8px;}} hr {width: 70px; height: 1px; background-color: white; border: none; margin: 20px 0;} .social-icons {display: flex; align-items: center; a {img {width: 20px; margin-right: 10px;}}}}section.add-article{display:flex;justify-content:center;align-items:center;flex-direction:column;padding-top:120px;max-width:460px;margin:auto;text-align:center;h1 {color: var(--black); font-size: 40px; font-weight: 600;} :is(form) {width: 100%; max-width: 800px; text-align: center; input {padding-left: 12px; height: 54px; width: 100%; font-size: 16px; font-weight: 300; margin: 12px 0; box-sizing: border-box;} fieldset {border: none; margin-bottom: 8px; label {margin-right: 8px;}} button {width: 100%; height: 54px; font-size: 15px;}}}.loader{width:50px;aspect-ratio:1;border-radius:50%;border:8px solid;border-color:#cbcbcb #ffffff;animation:l1 1s infinite;margin:auto}@keyframes l1{to{transform:rotate(.5turn)}}.list-page{section.hero-section {text-align: center; h1 {font-size: 60px; text-transform: uppercase; @media (width < 768px) {font-size: 44px; line-height: 50px;}} p {max-width: 780px; margin: auto; font-size: 18px; line-height: 24px;}} .grid {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 40px 0; > * {flex: 0 0 auto; width: 100%;} @media (min-width: 768px) {&.service > * {width: calc(33.333% - 24px);} &.workshop > * {width: calc(50% - 24px);}}} button.load-more {margin: auto; display: block;}}.list-page .circle-loader{margin:40px auto auto;display:block}.ui-service-card{display:flex;flex-direction:column;height:100%;background-color:#fff;box-shadow:0 10px 60px #00000012}.ui-service-card .image{overflow:hidden;img {display: block; max-width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; transition: transform .5s;}}.ui-service-card:hover{img {transform: scale(1.1);} .details {h3 {text-decoration: underline;}}}.ui-service-card.border-only{border-top:10px solid var(--purple)}.ui-service-card .details{padding:24px;h3 {margin-top: 0; font-size: 20px; line-height: 26px; font-weight: 800; text-transform: uppercase;} p {color: var(--dark-grey); margin-top: 0; font-size: 16px; line-height: 22px; font-weight: 500;} span {text-transform: uppercase; font-size: 14px;}}.ui-workshop-card{display:flex;flex-direction:column;flex:1 0 100%;aspect-ratio:1 / .66;overflow:hidden;li {flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-align: left; position: relative; img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; object-fit: cover; transition: transform .5s;} .details {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; display: flex; flex-direction: row; align-items: flex-end; padding: 34px 24px; box-sizing: border-box; background: linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.8) 20%,rgba(0,0,0,.4) 40%,transparent 100%); p {color: white; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase;} h3 {margin: 0; color: white; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase;}}} &:hover {img {transform: scale(1.2);} h3 {text-decoration: underline;}}}@media (width >= 768px){.ui-workshop-card{flex-basis:48%}}:root{--size: 10px;--ballsize: calc(var( --size)*1.2)}.circle-loader{margin:0 var( --size);width:var( --size);aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate}@keyframes l5{0%{box-shadow:var(--ballsize) 0 #000,calc(-1 *(var(--ballsize))) 0 #0002;background:#000}33%{box-shadow:var(--ballsize) 0 #000,calc(-1 *(var(--ballsize))) 0 #0002;background:#0002}66%{box-shadow:var(--ballsize) 0 #0002,calc(-1 *(var(--ballsize))) 0 #000;background:#0002}to{box-shadow:var(--ballsize) 0 #0002,calc(-1 *(var(--ballsize))) 0 #000;background:#000}}.user-profile{padding-top:var(--double-margin)}.user-profile .bio{background-color:var(--lightgrey);border-radius:var(--radius);padding:var(--double-margin);min-height:150px;box-sizing:border-box;display:flex;justify-content:space-between;position:relative}.user-profile .bio .update-message{position:absolute;top:8px;right:8px;margin:0}.user-profile .bio .user{display:flex;align-items:center}.user-profile .bio .user .user-profile-icon{display:flex;flex-direction:column;justify-content:center;width:82px;height:82px;border:4px solid #fff;font-size:24px}.user-profile .bio .user .personal-info{padding-left:var(--margin);display:flex;flex-direction:column;justify-content:center;h2,.h2 {font-size: 24px; font-weight: 600; margin: 0; margin-bottom: 4px;} input {border: var(--border); width: 100%;} p,.p {font-size: 14px; margin: 0; max-width: 275px;}}.user-profile .bio .user-stats>div{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;span {font-size: 24px; font-weight: 600;} small {font-size: 13px;}}.article-card{background-color:#fff;border:1px solid #fff;border-radius:8px;margin:8px 0;padding:8px;cursor:pointer;box-sizing:border-box;position:relative;display:flex;justify-content:flex-start;button.actions {background-color: transparent; border: none; height: auto; font-size: 12px; position: absolute; top: 0px; right: 8px;}}.article-card:hover{border:1px solid var(--purple)}.article-card .post-image{position:relative;margin-right:14px;img {aspect-ratio: 3 / 2; width: 200px; height:auto; object-fit: cover;}}.article-card .post-info{display:flex;flex-direction:column;justify-content:space-between;margin-right:16px;width:100%;p{margin: 0; margin-bottom: 18px; font-size: 13px; font-weight: 300; text-transform: capitalize;} .title {width: 100%; h2 {margin: 0; margin-bottom: 6px; font-size: 20px; font-weight: 500;}} .author {display: flex; justify-content: flex-start; align-items: center; img {width: 40px; height: auto; border-radius: 100px; margin-right: 6px;} p{margin: 0;}}}.published-status{font-size:14px}.published-status:before{content:"";display:inline-block;width:10px;height:10px;border-radius:12px;background-color:var(--status-draft);margin-right:6px}.published-status.published:before{background-color:var(--status-published)}.articles-list{display:flex;flex-direction:column;padding:var(--half-margin) 0}.articles-list .actions{padding:10px 0;display:flex;justify-content:space-between;input {width: 260px; padding-left: 14px; color: #B8B8B8;}}.articles-list .articles{background-color:var(--lightgrey);padding:var(--margin)}.articles-list .articles .filters{display:flex;justify-content:space-between;font-size:12px}.articles-list .articles .filters .categories{button {margin-right: 10px; font-size: 12px;}}.articles-list .articles .filters .sort{select {border: none; font-size: 12px; background-color: var(--lightgrey);}}.edit-article{overflow:hidden;height:100vh;width:100vw;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch}.edit-article .edit-area{flex:1;overflow:hidden}.edit-article .edit-area .title-wrapper{background-color:#fff;padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;border-bottom:var(--border)}.edit-article .edit-area .title-wrapper .title{display:flex;align-items:center;small.published-status {margin: 0 12px;} .cover-image {position: relative; img {width: 54px; height: auto; border-radius: 4px;}} input {border: var(--border);} h1,input.h1 {margin: 0; font-size: 22px; font-weight: 400; margin-left: 12px}}.edit-article .edit-area .title-wrapper .title-actions{display:flex;justify-content:flex-end;align-items:center;button.actions {background-color: transparent;} a {height: 100%; display: flex; align-items: center; font-size: 14px;}}.edit-article .edit-area .content-wrapper{height:100%;overflow:hidden;display:flex;justify-content:space-between;align-items:stretch;aside {margin-bottom: 100px; overflow-y: auto;}}:root{--toggle-width: 28px;--toggle-height: 40px}.aside-ui-component{max-width:100%;position:relative;background-color:transparent}.aside-ui-component.collapse{width:var(--toggle-width)!important}.aside-ui-component.collapse .toggle{background-color:var(--lightgrey)}.aside-ui-component.collapse .content{display:none}.aside-ui-component.right .content{border-right:none;border-left:var(--border)}.aside-ui-component.right .toggle{border-left:none;border-right:var(--border);right:unset;left:0}.aside-ui-component .toggle{box-sizing:border-box;position:absolute;z-index:99;top:0px;right:0px;width:var(--toggle-width);height:var(--toggle-height);background-color:#fff;cursor:pointer;border:var(--border);color:#b3b3b3}.aside-ui-component .toggle .icon{display:flex;justify-content:center;align-items:center;width:100%;height:100%;opacity:.6;img {max-width: 75%;}}.aside-ui-component .content{background-color:var(--lightgrey);box-sizing:border-box;border-right:var(--border);height:100%}.chapter-list{padding-top:var(--margin);input {margin-left:var(--margin); width: calc(100% - (var(--margin))*2); border: 1px solid lightgray; border-radius: 0; height: auto; margin-top: 12px; padding: 10px 8px; box-sizing: border-box;} .chapter {display: flex; justify-content: space-between; align-items: center; padding-right:var(--margin); &:hover {background-color: rgb(227,227,227); button.actions {display: block;} .ellipsis {display: initial;}} &.in-action {background-color: rgb(227,227,227); .ellipsis {display: initial;} input {margin-left: 0; width: 100%;}} p{margin: 6px 0; padding: 5px 0; font-size: 15px; line-height: 18px; font-weight: 400; display: flex; align-items: stretch; cursor: pointer; &.active {color: var(--purple); pointer-events: none;}} button.actions {background-color: transparent;} button.add {opacity: 0; transition: opacity .2s;}} button.add-chapter {margin-top: 12px; color: rgba(130,130,130,.7); &:hover {color: var(--purple);}} .suggested-chapters {border-top: 1px solid #d5d5d5; padding: var(--margin) 0; margin: 0 var(--margin); margin-top: 40px; button {color: rgba(130,130,130,.7); &:hover {color: var(--purple);}} h2 {display: flex; align-items: center; font-weight: 400; font-size: 14px; margin-bottom: 20px; img {width: 28px; height: auto;}} p {position: relative; font-size: 14px; line-height: 17px; cursor: pointer; &:first-of-type {margin-top: 0;} &:hover {color: var(--purple); &:before {position: absolute; content: "+"; color: var(--purple); left: -10px; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 40px;}}}}}.chapter-list>*{padding-left:var(--margin)}.editor-chat-assistant{padding:12px;textarea {border-radius: 4px; padding: 8px; box-sizing: border-box; font-size: 15px; width: 100%;} button.action {width: 100%; margin-top: var(--half-margin); &:hover {background-color: var(--purple); color: #fff;}} .loader-wrapper {margin-top: var(--half-margin); display: flex; justify-content: center;}}.editor-chat-assistant .title-area{display:flex;align-items:flex-start;img {width: 28px; height: auto;} h2 {font-size: 13px; font-weight: 400; color: var(--dark-grey);}}.edit-article{main.editor {margin-bottom: 100px; overflow-y: auto; flex: 1; .hidden {display: none;} .info {margin: 40px; padding: 40px; text-align: center; background-color: var(--lightgrey);} button.save {width: 240px; max-width: 100%; margin-top: 16px; margin-left: 16px;} ck-sticky-panel__content {border: none;} .ck-editor__editable_inline {min-height: 500px;} .ck-toolbar {border: none; button.custom-btn {display: flex; align-items: center; justify-content: center; img {width: 20px;}}} .ck.ck-editor {img {max-width: 100%; height: auto;} h2 {font-size: 30px; font-weight: 500;} h3 {font-size: 22px; font-weight: 500;} h4 {font-size: 16px; font-weight: 500;} p,li {font-size: 16px; line-height: 160%; margin-bottom: 16px;}} .ck.ck-content {border-left: none; border-right: none; padding: 0 20px; border: none; border: var(--border); * {max-width: 800px;}}}}section.read-article{padding:60px 0}.ads-area{margin:12px 0;background-color:var(--lightgrey);display:flex;align-items:center;justify-content:center}.read-article-content-area{main {display: flex; padding-top: 50px; aside {.content {border: none; background-color: transparent; margin-right: 40px; .chapters {border-top: var(--border); border-bottom: var(--border); padding: var(--double-margin) 0; p {font-size: 16px; line-height: 18px; font-weight: 500; color: var(--dark-grey); margin: 0; margin-bottom: var(--margin); cursor: pointer; &.active {color: var(--purple);} &:last-of-type {margin-bottom: 0;}}}}} .body-text-wrapper {flex: 1; section.body-text {> * {margin: 0;} :first-child {margin-top: 0;} blockquote {border-left: 5px solid #ccc; font-style: italic; overflow: hidden; padding-left: 1.5em; padding-right: 1.5em; margin: 30px 0; background-color: var(--lightgrey); :first-child {margin: 20px 0;} p {margin: 20px 0;}} h1,h2,h3,h4 {font-weight: 500; margin: 30px 0 20px 0;} h2 {font-size: 28px;} h3 {font-size: 22px;} h4 {font-size: 18px;} p,li {font-size: 18px; line-height: 150%; margin-bottom: 20px;} img {max-width: 100%; height: auto; margin-bottom: 20px;}}} .chapter-navigation {display: flex; margin-top: 40px; .button-area {display: flex; align-items: center; color: var(--purple); width: 50%; &:last-of-type {button {text-align: right;}} button {color: var(--purple); background-color: transparent; font-size: 15px; line-height: 18px; width: 100%; cursor: pointer; text-align: left; &:hover {text-decoration: underline;}}} &.no-prev {.button-area {width: 100%;}}}}}.read-article-content-area .title-area{h1 {margin: 0; font-size: 52px; font-weight: 600; margin-bottom: 40px;} div.metadata-area {display: flex; align-items: center; justify-content: space-between; .metadata {display: flex; align-items: center; justify-content: flex-start; .user-profile-icon {background-color: var(--lightgrey); color: var(--black); border: 1px solid var(--purple)} .article-info {margin-left: 8px; p {margin: 0; margin-bottom: 4px; font-size: 14px;}}} .actions {button {padding: 0 16px; height: 40px; display: inine-flex; justify-content: center; align-items: center; margin-right: 12px; border-radius: 100px; &:last-of-type {margin-right: 0;}}}} .article-image {width: 100%; aspect-ratio: 5 / 3; box-sizing: border-box; background-size: contain; margin-top: 30px; border-radius: 6px;}}.article-not-found{text-align:center}.type-page .topbar .container .breadcrumb{font-size:16px;margin-bottom:32px;a {text-decoration: none; margin: 0 5px;}}.type-page .topbar .container .main-title{font-size:48px;line-height:54px;text-transform:uppercase;margin:0}@media (max-width: 640px){.type-page .topbar .container .main-title{font-size:36px;line-height:42px}}.type-page .content-wrapper{display:flex;flex-direction:column;gap:40px;margin-top:40px}@media (max-width: 768px){.type-page .content-wrapper{flex-direction:column}}.type-page .content-wrapper .article-content{flex:3;blockquote {border-left: 5px solid #ccc; font-style: italic; overflow: hidden; padding-left: 1.5em; padding-right: 1.5em; margin: 30px 0; background-color: var(--lightgrey); :first-child {margin: 20px 0;} p {margin: 20px 0;}} h1,h2,h3,h4 {font-weight: 500; margin: 30px 0 20px 0;} h2 {font-size: 36px;} h3 {font-size: 28px;} h4 {font-size: 22px;} ul,ol {list-style-position: inside;} p,li {font-size: 18px; line-height: 150%; margin-bottom: 20px;} li {list-style-type: disc;} img {max-width: 100%; height: auto; margin-bottom: 20px;}}.type-page .content-wrapper .article-content .cover-image{width:100%;margin-bottom:0}.type-page .content-wrapper .article-list{flex:1;background:#f5f5f5;padding:20px;border-radius:6px;max-height:fit-content;h3 {font-size: 22px; font-weight: 600; text-transform: uppercase; margin-bottom: 16px;} ul {list-style: none; padding: 0; margin: 0; li {padding: 8px 0; font-size: 18px; cursor: pointer; color: var(--dark-grey); border-left: 2px solid transparent; transition: .3s; &:hover {color: var(--black);} &.active {font-weight: 700; border-left: 2px solid var(--blue); background: white; padding-left: 8px;}}}}main.homepage .hero-section{position:relative;height:600px;overflow:hidden}main.homepage .hero-section .hero-background{z-index:0;img {width: 100%; height: 100%; object-fit: cover; animation: zoomInSlow 7s ease-in-out forwards;}}main.homepage .hero-section .layer{position:absolute;top:0;left:0;width:100%;height:100%}main.homepage .hero-section .hero-content{background-color:#0009;display:flex;overflow:hidden}main.homepage .hero-section .hero-content .text{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;width:50%}main.homepage .hero-section .hero-content .text .cta{width:90%;max-width:860px;margin:auto;text-align:center;color:#fff;text-transform:uppercase;h2 {margin: 0; font-size: 60px; line-height: 68px; font-weight: 800; @media (width < 768px) {font-size: 44px; line-height: 52px;}} p {padding: 10px 30px; background-color: rgba(0,0,0,.2); margin: 0; margin-bottom: 16px; font-size: 16px; display: inline-block;}}main.homepage .hero-section .hero-content .image{flex:1;width:50%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;img {vertical-align:text-top; height: auto; max-height: 90%;}}@keyframes zoomInSlow{0%{transform:scale(1)}to{transform:scale(1.2)}}main.homepage>section{padding-top:80px;padding-bottom:80px;text-align:center}main.homepage .container>h2{font-size:42px;line-height:56px;font-weight:800;margin-bottom:12px;margin-top:0;text-transform:uppercase}main.homepage .container>p{font-weight:400;max-width:720px;margin:auto auto 32px;font-size:18px;line-height:24px}.homepage-about-us{display:flex;align-items:flex-start;gap:50px;img {width: 40%; object-fit: cover;} .details {width: 50%; text-align: left; h2 {font-size: 36px; text-transform: uppercase; line-height: 46px; margin: 0; margin-bottom: 14px;} p {font-size: 18px; line-height: 26px; margin-bottom: 20px;} a {text-decoration: underline;} h3 {font-size: 18px; font-weight: bold; margin: 0; margin-bottom: 4px;} h4 {font-size: 18px; margin: 0; color: var(--dark-grey); font-weight: 500;} button {margin-top: 12px;}}}@media (max-width: 900px){.homepage-about-us{flex-direction:column;img {width: 100%;} .details {width: 100%; h2 {font-size: 30px; line-height: 40px; margin-bottom: 24px;}}}}main.homepage{section#featured-courses {text-align: center; .all-courses {display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; article {width: 100%; @media (width >= 768px) {width: calc(50% - 12px);} @media (width >= 992px) {width: calc(33.333% - 16px);}}}}}article.course-card{text-align:left;a {text-decoration: none; h3 {margin-top: 0; font-size: 16px; padding: 2px 4px; line-height: 24px; font-weight: 700; letter-spacing: -.5px; text-transform: uppercase;} img.cover-image {width: 100%; aspect-ratio: 1.6 / 1; object-fit: cover; height: auto;}}}main.homepage{section#featured-services {background-color: var(--dark-purple); color: white; position: relative; overflow: hidden; p {color: white;} ul.services {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: stretch; margin-bottom: 40px; > a {display: flex; flex-direction: column; flex: 1 0 100%; @media (width >= 768px) {flex-basis: 30%;} li {flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; background-color: white; padding: 40px; text-align: left; border-top: 10px solid var(--purple); h3 {margin-top: 0; font-size: 20px; line-height: 26px; font-weight: 800; text-transform: uppercase;} p {color: var(--dark-grey); margin-top: 0; font-size: 16px; line-height: 22px; font-weight: 500;} span {text-transform: uppercase; font-size: 14px;}} &:hover {span {text-decoration: underline;}}}}}}main.homepage{section#featured-workshops {text-align: center; ul.workshops {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: stretch; margin-bottom: 40px; > a {display: flex; flex-direction: column; flex: 1 0 100%; aspect-ratio: 1 / .66; overflow: hidden; @media (width >= 768px) {flex-basis: 48%;} li {flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-align: left; position: relative; img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; object-fit: cover; transition: transform .5s;} .details {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; display: flex; flex-direction: row; align-items: flex-end; padding: 34px 24px; box-sizing: border-box; background: linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.8) 20%,rgba(0,0,0,.4) 40%,transparent 100%); p {color: white; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase;} h3 {margin: 0; color: white; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase;}}} &:hover {img {transform: scale(1.2);} h3 {text-decoration: underline;}}}}}}main.homepage .cta-banner{height:280px;background-image:url(/cta-banner-img.jpg);background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat;position:relative;overflow:hidden}main.homepage .cta-banner .cta-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center}main.homepage .cta-banner .cta-text{color:#fff;font-size:60px;line-height:66px;font-weight:700;text-transform:uppercase;text-align:center}@media (width < 768px){main.homepage .cta-banner .cta-text{font-size:40px;line-height:46px}}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-Light-25dadeaa.eot);src:local("Semplicita Pro Light"),local("SemplicitaPro-Light"),url(/assets/SemplicitaPro-Light-25dadeaa.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-Light-f7bd31e3.woff2) format("woff2"),url(/assets/SemplicitaPro-Light-690b2810.woff) format("woff"),url(/assets/SemplicitaPro-Light-89d7bb10.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-Bold-9ba6f4fa.eot);src:local("Semplicita Pro Bold"),local("SemplicitaPro-Bold"),url(/assets/SemplicitaPro-Bold-9ba6f4fa.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-Bold-4a1a0040.woff2) format("woff2"),url(/assets/SemplicitaPro-Bold-a022c9c5.woff) format("woff"),url(/assets/SemplicitaPro-Bold-55d16094.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-BoldItalic-047c0ba4.eot);src:local("Semplicita Pro Bold Italic"),local("SemplicitaPro-BoldItalic"),url(/assets/SemplicitaPro-BoldItalic-047c0ba4.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-BoldItalic-f6c4317a.woff2) format("woff2"),url(/assets/SemplicitaPro-BoldItalic-1a984b4c.woff) format("woff"),url(/assets/SemplicitaPro-BoldItalic-bc136045.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-SemiBoldItalic-12a40663.eot);src:local("Semplicita Pro SemiBold Italic"),local("SemplicitaPro-SemiBoldItalic"),url(/assets/SemplicitaPro-SemiBoldItalic-12a40663.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-SemiBoldItalic-fe2597e5.woff2) format("woff2"),url(/assets/SemplicitaPro-SemiBoldItalic-2b53956f.woff) format("woff"),url(/assets/SemplicitaPro-SemiBoldItalic-9ff6df34.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-MediumItalic-78eb89a7.eot);src:local("Semplicita Pro Medium Italic"),local("SemplicitaPro-MediumItalic"),url(/assets/SemplicitaPro-MediumItalic-78eb89a7.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-MediumItalic-e0ca9435.woff2) format("woff2"),url(/assets/SemplicitaPro-MediumItalic-16bdf4de.woff) format("woff"),url(/assets/SemplicitaPro-MediumItalic-60b6326a.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-LightItalic-2867a7aa.eot);src:local("Semplicita Pro Light Italic"),local("SemplicitaPro-LightItalic"),url(/assets/SemplicitaPro-LightItalic-2867a7aa.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-LightItalic-50e121b7.woff2) format("woff2"),url(/assets/SemplicitaPro-LightItalic-f73068d6.woff) format("woff"),url(/assets/SemplicitaPro-LightItalic-89ef91ad.ttf) format("truetype");font-weight:300;font-style:italic}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-SemiBold-0c340ab8.eot);src:local("Semplicita Pro SemiBold"),local("SemplicitaPro-SemiBold"),url(/assets/SemplicitaPro-SemiBold-0c340ab8.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-SemiBold-e12635ed.woff2) format("woff2"),url(/assets/SemplicitaPro-SemiBold-2695ba52.woff) format("woff"),url(/assets/SemplicitaPro-SemiBold-f19ea1fa.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-Regular-22eadf88.eot);src:local("Semplicita Pro Regular"),local("SemplicitaPro-Regular"),url(/assets/SemplicitaPro-Regular-22eadf88.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-Regular-70ddcb0d.woff2) format("woff2"),url(/assets/SemplicitaPro-Regular-0dede20c.woff) format("woff"),url(/assets/SemplicitaPro-Regular-75c69848.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-Italic-aacc26b7.eot);src:local("Semplicita Pro Italic"),local("SemplicitaPro-Italic"),url(/assets/SemplicitaPro-Italic-aacc26b7.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-Italic-0cd0b9f7.woff2) format("woff2"),url(/assets/SemplicitaPro-Italic-ee01001a.woff) format("woff"),url(/assets/SemplicitaPro-Italic-76df1597.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Semplicita Pro;src:url(/assets/SemplicitaPro-Medium-41cd67e0.eot);src:local("Semplicita Pro Medium"),local("SemplicitaPro-Medium"),url(/assets/SemplicitaPro-Medium-41cd67e0.eot?#iefix) format("embedded-opentype"),url(/assets/SemplicitaPro-Medium-588b350d.woff2) format("woff2"),url(/assets/SemplicitaPro-Medium-c829e5a0.woff) format("woff"),url(/assets/SemplicitaPro-Medium-5b2bccc9.ttf) format("truetype");font-weight:500;font-style:normal}:root{--black: #131313;--dark-color: #1a1a1a;--dark-purple: #112844;--dark-grey: #726F84;--purple: #2980ff;--lightgrey: #F6F6F6;--border: 1px solid #d5d5d5;--border-color: #d5d5d5;--status-draft: #ff4e63;--status-published: #2cbc00;--radius: 7px;--half-margin: 12px;--margin: 20px;--double-margin: 30px}*,h1,h2,h3,h4,h5,h6,.semplicita{font-family:Semplicita Pro,sans-serif}ul{margin:0;padding:0;list-style:none}a{font-weight:500;color:#646cff;text-decoration:inherit;cursor:pointer}a *{color:var(--black)}a:hover{color:#535bf2}body{margin:0}.container{max-width:1200px;margin:auto;padding:0 20px}.container.full{max-width:100%;padding:0 var(--margin)}.container.mini{max-width:880px}main.layout{min-height:100vh;flex-grow:1}.border{border:var(--border)}h1{font-size:3.2em;line-height:1.1}button{height:40px;border:none;cursor:pointer;transition:background-color .5s}button.transparent{background-color:transparent}button.small{font-size:13px}button:disabled{cursor:unset}button.border:hover{background-color:var(--purple);border-color:var(--purple);color:#fff}button.main{background-color:var(--purple);color:#fff;text-transform:uppercase;font-size:14px;font-weight:800;width:220px;max-width:100%}button.main:disabled{background-color:#f1f1f1;color:#c2c2c2;opacity:1}button.main:hover{background-color:#000}button.tall{height:70px}input{margin:6px 0;height:32px;border-radius:4px}input:is(:focus, :active){border-color:var(--purple)}::placeholder{opacity:.6}textarea{line-height:140%}.error,.unsaved{color:var(--status-draft);margin:12px 0}.success{color:var(--status-published);margin:12px 0}.warning{color:#828282b3;margin:12px 0}.editable{cursor:pointer}