@import url(./fonts.css);

/* GLOBALS */
* {
        font-family:'Kanit', sans-serif;
}
body,
html {
        font-size:28px;
        color:#1c2e33;
}
body {
        background-color: #ffe19b;
        width: 100vw;
        overflow-x: hidden;
}
html,
body,
#world {
        padding: 0; margin:0;
}
a,
a:visited {
        color:#ff5613;
        text-decoration: none;
}
a:hover {
        color:#ff00dd;
}
h2 {
        margin: .8rem 0;
}

/* CLASSES AND IDs */
#captain {
        position:fixed;
        width: 100vw;
        background-color: #ffbd22;
        border-bottom: 1px solid #ffe099;
        max-height:160px;
        display:flex;
        justify-content:center;
        z-index:9000;
}
#nav {
        display:flex;
        width:90%;
        justify-content: space-around;
        align-items: center;
        max-height:100%;
}
#nav > img {
        max-height:90%;
}
#nav a {
        color:#1c2e33;
        cursor:pointer;
        padding: 15px 0;
        width:calc(100% / 8);
        text-align: center;
        border-radius: 5px;
        line-height:1.5rem;
        background-size:241px 72px;
}
#nav a:hover {
        background-size:241px 72px;
}
#NAV_FreakFactory {
        background: transparent url(../img/menu/nav_freaks.svg) no-repeat top left;
}
#NAV_Brands {
        background: transparent url(../img/menu/nav_holyshit.svg) no-repeat top left;
}
#NAV_Partners {
        background: transparent url(../img/menu/nav_partners.svg) no-repeat top left;
}
#NAV_Sale {
        background: transparent url(../img/menu/nav_sales.svg) no-repeat top left;
}
#NAV_Gallery {
        background: transparent url(../img/menu/nav_gallery.svg) no-repeat top left;
}
#NAV_Company {
        background: transparent url(../img/menu/nav_company.svg) no-repeat top left;
}
#NAV_FreakFactory:hover {
        background: #FF9B1A url(../img/menu/nav_freaks.svg) no-repeat top left;
}
#NAV_Brands:hover {
        background: #FF9B1A url(../img/menu/nav_holyshit.svg) no-repeat top left;
}
#NAV_Partners:hover {
        background: #FF9B1A url(../img/menu/nav_partners.svg) no-repeat top left;
}
#NAV_Sale:hover {
        background: #FF9B1A url(../img/menu/nav_sales.svg) no-repeat top left;
}
#NAV_Gallery:hover {
        background: #FF9B1A url(../img/menu/nav_gallery.svg) no-repeat top left;
}
#NAV_Company:hover {
        background: #FF9B1A url(../img/menu/nav_company.svg) no-repeat top left;
}
#footer {
        position:fixed;
        bottom:0;
        height:50px;
        padding: 5px;
        width: 100vw;
        background-color: #ffbd22;
        z-index:8000;
        text-align: center;
        vertical-align: middle;
}
#introAnimation {
        position: fixed;
        width:100vw;
        height:100vh;
        display: flex;
        align-items: flex-start;
        pointer-events: none;
        z-index: 15000;
}
#introAnimation > div {
        padding:40px !important;
        margin:0 !important;
        width:calc(50vw - 80px);
        height:calc(100vh - 80px);
        display:flex;
        align-items:flex-end;
}
#introAnimation > div:nth-child(odd) {
        background-color: #1c2e33 !important;
}
#introAnimation > div:nth-child(even) {
        background-color: #ffbd22 !important;
        color:#1c2e33;
        font-size: 1.5rem;
        justify-content: center;
        flex-direction: column;
}

.headspace {
        height: 200px;
}
.headspace-half {
        height: 100px;
}
#world > div:not(.headspace) {
        width:90%;
        min-height: 100vh;
        margin:auto;
}
#world > div > div {
        max-width:1840px;
        padding:80px 5vw;
        text-align: center;
        margin:auto;
}
#world > div:not(#introAnimation) > div {
        background: #ffd36c;
        box-shadow:0 30px 60px 20px rgba(28,46,51, 0.2);
}

#img_ff_pagestart {
        display:block;
        width: 100%;
}
.ornament {
        width:300px;
}
.ornament150 {
        width:150px;
}
.contentToMoveUp {
        position: relative;
        top:-300px;
        width: 100%;
}
#resinCuts {
        width:100%;
        display:flex;
        justify-content: space-around;
}
#resinCuts > img {
        width:calc(100% / 5.5);
        border-radius:5%;
        aspect-ratio: 1/1;
}
#h1_FFTitle {
        font-size:2.5rem;
        border-bottom:.3rem solid #1c2e33;
        text-shadow:
                0 -5px 0 #FFD36C,
                -5px 0 0 #FFD36C,
                5px 5px 0 #FFD36C,
                -5px -5px 0 #FFD36C;
}
h1.badge-green {
        text-shadow: 0 -5px 0 #159C5F,  5px 5px 0 #159C5F;
}
h1.badge-1c2e33 {
        text-shadow: 0 -7px 0 #E9BB4D,  7px 7px 0 #E9BB4D;
}
h2.badge-green {
        display:inline-block;
        background:#159C5F;
        padding-left:20px;
        padding-right:20px;
        border-radius:35px;
        color: #159C5F;
        background: #1c2e33;
}
h2.badge-1c2e33 {
        display:inline-block;
        padding-left:20px;
        padding-right:20px;
        border-radius:35px;
        color: #E9BB4D;
        background: #1c2e33;
}
h3.badge-1c2e33 {
        display:inline-block;
        background:#E9BB4D;
        padding-left:20px;
        padding-right:20px;
        border-radius:35px;
}
ul.featured {
        text-align: center;
        list-style-type:none;
}
ul.featured li:before {
        content:'👽 ';
}
ul.featured li {
        display:inline-block;
        font-size:1.2rem;
        padding-left:60px;
}
.shortenedWidth {
        width:70%;
        margin:auto
}
.hearties {
        display: flex;
        justify-content: space-between;
        margin:100px 0;
        background:#ffbd22 url(../img/pattern_mandala_boxbgcolor.svg) bottom left no-repeat;
        background-size:100%;
        border-radius:30px;
}
.hearties > div {
        width:32%;
        display:flex;
        flex-direction: column;
        justify-content: center;
        font-weight:bold;
        font-size:1.2rem;
        padding:1rem;
}
.hearties > div:nth-child(2) {
        display:flex;
        flex-direction: column;
}
.hearties > div:nth-child(2) > div:nth-child(1) {
        margin-bottom:80px;
}
.heartsvg {
        max-height:40px;
}
.h1-title {
        font-family:"KenyanCoffee", "Kanit", sans-serif;
        text-transform:uppercase;
        color:#1c2e33;
        background:#ffbd22;
        width: 100%;
        margin:0 auto;
}

.titleImage {
        height:3rem;
        position:relative;
        margin-right:40px;
        top:20px;
        left:20px;
}
#hs_pagestart {
        background: url(../img/holy-shit_pagestart_narrow.svg) no-repeat top left;
}
#hs_pagestart > img:first-child {
        max-width:40%;
}

.card {
        width: 100%;
        display:flex;
        justify-content:stretch;
        border-bottom:.1rem solid #1c2e33;
}
.card .card-head {
        display:flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 auto; /* makes "width" work */
        text-align: center;
}
.card .card-head img {
        max-width: 100%;
        width:100%;
}
.card-body {
        background-color: rgba(255,255,255,0.65);
        width:100%;
        font-size:.9rem;
}
.card-body > p,
.card-body > h2 {
        margin: 2rem;
}
.card h2 {
        color:#1c2e33;
        font-size:2em;
}
.card-hs {
        /*max-height:570px;*/
        border:0;
        overflow:hidden;
        border-top-left-radius:6rem;
        border-bottom-right-radius:6rem;
        margin-bottom:4px;
}
.card-hs.card-hs-inv {
        border-top-left-radius:0;
        border-bottom-right-radius:0;
        border-top-right-radius:6rem;
        border-bottom-left-radius:6rem;
}
.card-hs p {
        max-height:570px;
        border-radius:20px;
        padding:10px 20px;
        padding:10px;
        margin: 30px;
}
.card-hs h2 {
        padding:0;
        margin: 1rem;
}
.card-partner .card-head {
        width:25%;
        background: #1c2e33;
        color:rgba(255,255,255,0.65);
}
.card-partner h2 {
        margin:.4rem;
}
.hs-link {
        display:inline-block;
        padding:6px 12px;
        background-color: #ffbd22;
        border-radius:6px;
        margin:6px;
}
.hs-link:hover {
        padding:6px 12px;
        background-color: #ff5613;
        border-radius:6px;
        color:#ffbd22;
}
#card-rhabarbie {
        background-color: #ff32e7;
}
#card-rhabarbie .card-body > * {
        background-color: rgba(255, 202, 242, 0.7);
}
#card-rhabarbie > div:nth-child(2) {
        background:url(../img/girls/bg_rhabarbie.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
#card-rhabarbie .hs-link {
        background-color: rgb(255, 0, 191);
        color:yellow;
}
#card-rhabarbie .hs-link:hover {
        color: rgb(255, 0, 191);
        background-color:yellow;
}
#card-silvercream {
        background-color: rgb(117, 117, 117);
}
#card-silvercream .card-body > * {
        background-color: rgba(233, 233, 233,.7);
}
#card-silvercream > div:nth-child(1) {
        background:url(../img/girls/bg_silvercream.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
#card-silvercream .hs-link {
        background-color: rgb(51, 51, 51);
        color:rgb(233, 233, 233);
}
#card-silvercream .hs-link:hover {
        color: rgb(51, 51, 51);
        background-color:rgb(233, 233, 233);
}
#card-funkyskunky {
        background-color: rgb(132, 0, 255);
}
#card-funkyskunky .card-body > * {
        background-color: rgba(255, 183, 207, 0.7);
}
#card-funkyskunky > div:nth-child(2) {
        background:url(../img/girls/bg_funkyskunky.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
#card-funkyskunky .hs-link {
        background-color: rgb(98, 0, 255);
        color:rgb(255, 0, 76);
}
#card-funkyskunky .hs-link:hover {
        color: rgb(98, 0, 255);
        background-color:rgb(255, 0, 76);
}
#card-blackstrawberry {
        background-color: rgb(132, 0, 255);
}
#card-blackstrawberry .card-body > * {
        background-color: rgba(220, 183, 255,.7);
}
#card-blackstrawberry > div:nth-child(1) {
        background:url(../img/girls/bg_blackstrawberry.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
#card-blackstrawberry > div:nth-child(1) h2 {
        color:white;
}
#card-blackstrawberry .hs-link {
        background-color: rgb(31, 0, 80);
        color:rgb(219, 103, 255);
}
#card-blackstrawberry .hs-link:hover {
        color: rgb(31, 0, 80);
        background-color:rgb(219, 103, 255);
}
#card-heyc {
        background-color: rgb(137, 251, 255);
}
#card-heyc .card-body > * {
        background-color: rgba(225, 254, 255,.7);
}
#card-heyc > div:nth-child(2) {
        background:url(../img/girls/bg_heyc.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
#card-heyc .hs-link {
        background-color: rgb(18, 182, 223);
        color:rgb(255, 115, 220);
}
#card-heyc .hs-link:hover {
        color: rgb(18, 182, 223);
        background-color:rgb(255, 115, 220);
}
#card-ganjahaze {
        background-color: rgb(47, 150, 0);
}
#card-ganjahaze .card-body > * {
        background-color: rgba(200, 255, 175,.7);
}
#card-ganjahaze > div:nth-child(1) {
        background:url(../img/girls/bg_ganjahaze.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
#card-ganjahaze .hs-link {
        background-color: rgb(55, 151, 0);
        color:rgb(251, 255, 0);
}
#card-ganjahaze .hs-link:hover {
        color: rgb(55, 151, 0);
        background-color:rgb(251, 255, 0);
}
#card-holywhite {
    background:white;
}
#hs_pagestart .card-head img {
        width:100%;
        max-width:100%;
        height:auto;
}
#hs_pagestart .card-head {
        max-width:30%;
        height:auto;
}
#hs_pagestart .card-head img:hover {
        filter: drop-shadow(0px 0px 215px yellow);
        cursor:pointer;
}



#visionoil_starter {
        border-radius:0.8rem;
        background: -moz-linear-gradient(top,  rgb(224, 176, 64) 0%, rgba(243,197,91,0) 100%);
        background: -webkit-linear-gradient(top,  rgba(224, 176, 64,1) 0%,rgba(224, 176, 64,0) 100%);
        background: linear-gradient(to bottom,  rgba(224, 176, 64,1) 0%,rgba(224, 176, 64,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c55b', endColorstr='#00f3c55b',GradientType=0 );
}
.badge-round {
        display:inline-block;
        padding: 20px 20px;
        padding-top:0;
        height:80px;
        overflow:hidden;
        border-radius: 80px;
        overflow:hidden;
        background-color: #ffbd22;
        background-color:rgba(255,0,36,.75);
        color:#ff6c00;
        color:#ffbd22;
        font-weight:bold;
        font-size:1.2rem;
        line-height:90%;
        vertical-align: top;
        text-align: center;
}
.badge-round p {
        margin:0;
        margin-top:14px;
}
#visionoil_background {
        width:100%;
        background: url(../img/CBD_1920.webp) no-repeat top left;
}
#visionoil_header {
        display:flex;
        justify-content: space-around;
        align-items:center;
        padding-top:0rem;
}
#visionoil_header > h2 > img {
        margin-top:.5rem;
}
#visionoil_header_title {
        padding-left: 1.6rem;
        width:calc(100% + -1.6rem);
        display:flex;
}
#visionoil_header_title > div {
        margin:auto;
}
.hasLightBorder {
        text-shadow:
        5px 0px 0px #E9BB4D,
        -5px -0px 0px #E9BB4D,
        0px -5px 0px #E9BB4D,
        -0px 5px 0px #E9BB4D,

        
        5px 5px 0px #E9BB4D,
        -5px -5px 0px #E9BB4D,
        5px -5px 0px #E9BB4D,
        -5px 5px 0px #E9BB4D
}
#img_visionoil_logo {
        padding:0.4rem;
        background-color: #1c2e33;
        /*background-color: #159C5F;*/
        border-radius:.5rem;
}
#visionOilImages {
        display:flex;
        justify-content: space-around;
}
#visionOilImages img {
        max-width: calc(100% / 6.3);
        border-radius:0.6rem;
}
#visionOilUL {
        list-style-type:none;
        vertical-align: top;
        display:flex;
        height:100%;
}
#visionOilUL li {
        width:32%;
        vertical-align: top;
        height:100%;
}
#visionOilUL li div {
        margin:0.6rem;
        padding:0.5rem;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        height:100%;
        font-size:1rem;
        background-color: #ffbd22;
        border:.4rem solid #1c2e33;
        border-radius: 0.6rem;;
}

.outlet_logo { grid-area: outletlogo; }
.outlet_summary { grid-area: outletsummary; }
.outlet_contacts { grid-area: outletcontacts; }

#outlet_container {
        width:49%;
        display:inline-grid;
        grid-template-areas:
                'outletlogo outletsummary'
                'outletlogo outletcontacts';
        gap:0px;
        font-size:.8rem;
        text-align:left;
        vertical-align: top;
        background-color: rgba(255,255,255,0.65);
        border-bottom:.2rem solid #1c2e33;
        border-bottom:.2rem solid #ffd36c;
}
#outlet_container img {
        max-width:100%;
}
#outlet_container > * {
        padding:.4rem;
}
.outlet_logo {
        background: #1c2e33;
        width:6rem;
}

.outlet_contacts > * {
        display:inline-block;
}
.outlet_contacts > *:first-child {
        margin-right:.8rem;
}


.light-background {
        background-color:rgba(255,255,255,0.65);
        flex-direction: column;
}
.light-background > p {
        margin:40px 20px;
}

#gallery_container {
        width:100%;
        cursor:grab;
        display:flex;
        flex:1;
        /*height:700px;*/
        max-height:65vh;
        background-color: #1c2e33;
        border-radius:8px;
        overflow-x:scroll;
}
#gallery_container img {
        max-height:70vh;
        aspect-ratio: 1/1;
}
.slides-inner {
        position: relative;
        height: 100%;
        width: 100%;
        overflow:hidden;
        overflow-x: scroll;
        display:flex;
        margin:20px;
}
.slide {
        padding:0;
        width:auto;
        height:100%;
}
.slide img {
        width:auto;
        height:100%;
}

div.columns {
        width:49%;
        display: inline-block;
}
.columns img {
        max-width: 70%;
}
.columns-large {
        width:60% !important;
}
.columns-small {
        width:39% !important;
        vertical-align: top;
}
.card-service {
        display:flex !important;
        flex-direction: row;
        text-align: left;
}
.service-images {
        display:flex !important;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(255,255,255,0.65);
        background-color: #ffbd22;
        background-color: #1c2e33;
}
.service-images > img {
        width: calc(100% / 7.1);
        height:auto;
        aspect-ratio: 1/1;
        border-radius:30%;
        margin:.4rem;
        cursor: pointer;
        border:3px solid transparent;
}
.service-images > img:hover {
        border:3px solid #ffbd22;
}
.card-service .columns-large p {
        margin:1rem;
        font-size:.9rem;
}
.card-service img {
        max-width:100%;
}



#lightbox {
        position:fixed;
        background:rgba(28, 46, 51,.7);
        height:100vh;
        width:100vw;
        top:0;
        left:0;
        z-index:300000;
        display:none;
}
#lightbox > div {
        position:fixed;
        top:5vh;
        left:5vw;
        width:calc(90vw + -1rem);
        height:calc(90vh + -1rem);
        background:#ffbd22;
        z-index:400000;
        padding:1rem;
        border-radius:0.5rem;
        display:flex;
        justify-content: space-around;
        z-index:300001;
        opacity:.9;
}
#lightbox > div > img {
        opacity:1.2;
}
#lightbox > span {
        position:fixed;
        top:1vh;
        left:1vw;
        z-index:300002;
        background-color: #ffe099;
        padding:4px 8px;
        border-radius:6px;
        font-size:.8rem;
        opacity: .5;
}
#captainHS {
        position:fixed;
        z-index:90;
        top:20vh;
        left:10px;
        color:#1c2e33;
        display:none;
        opacity:0;
}
#captainHS a {
        color:rgba(28,46,51,1);
        cursor:pointer;
        display:block;
}
#HolyShitNavigation {
        list-style-type:none;
        padding:0;
        margin:0;
}
#HolyShitNavigation li {
        padding:2px 8px;
        margin:2px 0;
        background-color: rgba(255,189,34,0.5);
        border-radius: 5px;
}
#HolyShitNavigation li.inv {
        background-color: rgba(28,46,51,1);
        color: rgba(255,189,34,1);
        border-radius: 0px;
}
#HolyShitNavigation li:not(.inv):hover {
        background-color:rgba(255,189,34,1);
}
#HolyShitNavigation li:not(.inv) a:hover {
        color:rgba(28,46,51,1);
}
.impressum_infocontainer {
        margin:1rem 0;
}
.impressum_infocontainer > div {
        width:auto;
        display:flex;
        justify-content: center;
        align-items: center;
}
.impressum_infocontainer > div > div {
        width:auto;
        display:inline-block;
}
.impressum_infocontainer > div > div:first-child {
        margin-right:.4rem;
}
#nav_mobile {
        display:none;
        padding:0;
        margin:0;
}
#nav_mobile ul {
        display:flex;
        justify-content: space-between;
        align-items: center;
        list-style-type:none;
        height:100%;
        margin:0;
        padding:0;
}
#nav_mobile ul li {
        width:calc(100% / 6);
        height:100%;
        margin:0;
        display:flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
}
#nav_mobile ul li a {
        width:100%;
        margin:6px;
        padding:6px;
        cursor:pointer;
        background: transparent;
        aspect-ratio: 1/1;
        border-radius:5px;
        background-color:#ff6c00aa;
        color: #FFD36C;
}
#nav_mobile ul li a:hover {
        background-color:#ffe097;
        color: #ff6c00;
}
.img_emeraldTest {
        max-width:70% !important;
}
#SUBS {
        opacity:.6;
}
.mandalabg-primary {
        width:100%;
        background:transparent url(../img/pattern_mandala_primarycolor.svg) top center no-repeat;
        background-size:120%;
        padding:40px 0;
}
.mandalabg-primary-centered {
        width:100%;
        background:#ffe19b url(../img/pattern_mandala_boxbgcolor.svg) center center no-repeat;
        background-size:120%;
        padding:40px 0;
}


@media all and (max-width: 1782px) {
        body,
        html {
                font-size:22px;
        }
}
@media all and (max-width: 1440px) {
        body,
        html {
                font-size:18px;
        }
        #footer {
                height:30px;
        }
        .ornament150 {
                width:100px;
        }
        .hearties {
                margin: 50px 0;
        }
        .contentToMoveUp {
                top:-150px;
                width: 100%;
        }
        .card-hs .card-head {
                max-width: 20vw;
        }
        #visionoil_header_title > h2 {
                max-width:40%;
        }
        #visionoil_header_title > h2 > img {
                max-width:100%;
        }
        .badge-1c2e33 {
                font-size:1.4rem;
        }
        #captain {
                max-height:120px;
        }
        .headspace {
                height: 160px;
        }
}
@media all and (max-width: 1150px) {
        body,
        html {
                font-size:16px;
        }
        #captain {
                max-height:80px;
        }
        .headspace {
                height: 120px;
        }
}
@media all and (max-width: 1000px) {
        /* first one is removing subs from the menu */
        #SUBS {
                display:none;
        }
        .card-hs {
                border-radius:0;
                margin-bottom:0;
        }
        .card-hs.card-hs-inv {
                border-radius:0;
        }
        .shortenedWidth {
                width:100%;
        }
        #page_company .columns-large,
        #page_company .columns-small {
                display:block;
                width:100% !important;
        }
        .impressum_infocontainer {
                display:inline-block;
        }
        .badge-round {
                padding:10px;
                font-size:.9rem;
        }
        #visionoil_header_title {
                display:block;
                padding:0;
                width:100%;
        }
        #visionoil_header_title > * {
                display:block;
                width:100%;
                max-width:unset !important;
        }
        #visionoil_header_title > h2 {
                max-height:100px;
        }
        #visionoil_header_title > h2 > img {
                max-height:100px;
        }
        #visionOilUL {
                display:block;
                width:100%;
                padding-left: 0;
        }
        #visionOilUL > li {
                display:block;
                width:100%;
        }
        .headspace {
                height: 100px;
        }
        .headspace-half {
                height: 50px;
        }
        .img_emeraldTest {
                width:100px !important;
        }
}
@media all and (max-width: 800px) {
        body,
        html {
                font-size:14px;
        }
        #captainHS {
                display:none !important;
        }
        #outlet_container {
                display:grid;
                width:100%;
        }
}
@media all and (max-width: 700px) {
        .card-hs .card-head {
                display:none;
        }
        .hearties {
                margin: 20px 0;
                display:flex;
                flex-direction: column;
        }
        .hearties > div {
                width:100%;
        }
        .contentToMoveUp {
                top:-80px;
                width: 100%;
        }
        .card-partner {
                flex-direction: column;
        }
        .card-partner .card-head {
                display:block;
                width:100%;
        }
        .card-partner .card-head > img {
                display:inline;
                max-width:10%;
        }
        .card-partner .card-head > img:first-child {
                display:inline;
                max-width:32%;
        }
        .card.light-background.card-service > .columns.columns-large {
                width:100% !important;
        }
        .card.light-background.card-service > .columns.columns-small:first-child {
                display:none;
        }
        #nav {
                display:none;
        }
        #nav_mobile {
                display:block;
        }
        #h1_FFTitle {
                font-size:1.6rem;
        }
        #resinCuts {
                display:none;
        }
        .featured {
                padding-left:0;
        }
        .ornament150 {
                width:60px;
        }
        #introAnimation {
                display:none;
        }
        .heartsvg {
                max-height:20px;
        }
        .hearties {
                font-size:1.1rem;
        }
        .hearties > div {
                padding: .3rem;
        }
        .hearties > div:nth-child(2) > div:nth-child(1) {
                margin-bottom: 0px;
        }
        .card-hs {
                max-height:unset;
        }
}
@media all and (max-width: 560px) {
        #nav_mobile ul li a {
                margin:0;
                padding:6px;
                border-radius:0;
                border-right:2px solid #ffbd22;
        }
}

/***************************************************
 * Generated by SVG Artista on 2/12/2023, 10:06:25 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 @-webkit-keyframes animate-svg-stroke-1 {
        0% {
          stroke-dashoffset: 44232.37890625px;
          stroke-dasharray: 44232.37890625px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 44232.37890625px;
        }
      }
      
      @keyframes animate-svg-stroke-1 {
        0% {
          stroke-dashoffset: 44232.37890625px;
          stroke-dasharray: 44232.37890625px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 44232.37890625px;
        }
      }
      
      @-webkit-keyframes animate-svg-fill-1 {
        0% {
          fill: transparent;
        }
      
        100% {
          fill: rgb(255,255,255);
        }
      }
      
      @keyframes animate-svg-fill-1 {
        0% {
          fill: transparent;
        }
      
        100% {
          fill: rgb(255,255,255);
        }
      }
      
      .animated_logo-1 {
        -webkit-animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                             animate-svg-fill-1 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
                animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                     animate-svg-fill-1 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
      }
      
      @-webkit-keyframes animate-svg-stroke-2 {
        0% {
          stroke-dashoffset: 614.7317504882812px;
          stroke-dasharray: 614.7317504882812px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 614.7317504882812px;
        }
      }
      
      @keyframes animate-svg-stroke-2 {
        0% {
          stroke-dashoffset: 614.7317504882812px;
          stroke-dasharray: 614.7317504882812px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 614.7317504882812px;
        }
      }
      
      @-webkit-keyframes animate-svg-fill-2 {
        0% {
          fill: transparent;
        }
      
        100% {
          fill: rgb(255,255,255);
        }
      }
      
      @keyframes animate-svg-fill-2 {
        0% {
          fill: transparent;
        }
      
        100% {
          fill: rgb(255,255,255);
        }
      }
      
      .animated_logo-2 {
        -webkit-animation: animate-svg-stroke-2 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                             animate-svg-fill-2 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
                animation: animate-svg-stroke-2 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                     animate-svg-fill-2 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
      }
      
      @-webkit-keyframes animate-svg-stroke-3 {
        0% {
          stroke-dashoffset: 34.49605941772461px;
          stroke-dasharray: 34.49605941772461px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 34.49605941772461px;
        }
      }
      
      @keyframes animate-svg-stroke-3 {
        0% {
          stroke-dashoffset: 34.49605941772461px;
          stroke-dasharray: 34.49605941772461px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 34.49605941772461px;
        }
      }
      
      .animated_logo-3 {
        -webkit-animation: animate-svg-stroke-3 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
                             animate-svg-fill-3 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
                animation: animate-svg-stroke-3 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
                     animate-svg-fill-3 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
      }
      
      @-webkit-keyframes animate-svg-stroke-4 {
        0% {
          stroke-dashoffset: 1340.640380859375px;
          stroke-dasharray: 1340.640380859375px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 1340.640380859375px;
        }
      }
      
      @keyframes animate-svg-stroke-4 {
        0% {
          stroke-dashoffset: 1340.640380859375px;
          stroke-dasharray: 1340.640380859375px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 1340.640380859375px;
        }
      }
      
      .animated_logo-4 {
        -webkit-animation: animate-svg-stroke-4 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
                             animate-svg-fill-4 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
                animation: animate-svg-stroke-4 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
                     animate-svg-fill-4 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
      }
      
      @-webkit-keyframes animate-svg-stroke-5 {
        0% {
          stroke-dashoffset: 1107.8466796875px;
          stroke-dasharray: 1107.8466796875px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 1107.8466796875px;
        }
      }
      
      @keyframes animate-svg-stroke-5 {
        0% {
          stroke-dashoffset: 1107.8466796875px;
          stroke-dasharray: 1107.8466796875px;
        }
      
        100% {
          stroke-dashoffset: 0;
          stroke-dasharray: 1107.8466796875px;
        }
      }
      
      .animated_logo-5 {
        -webkit-animation: animate-svg-stroke-5 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
                             animate-svg-fill-5 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
                animation: animate-svg-stroke-5 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
                     animate-svg-fill-5 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
      }