@font-face {font-family: "Now";src: local("Now"),url("../fonts/Now/Now-Regular.otf") format("truetype");}
@font-face {font-family: "OpenSans";src: local("OpenSans"),url("../fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");}
/*COMMON*/
* {padding:0;margin:0;font-family: 'OpenSans',serif;}
html,body {width:100%;height:100%;scroll-behavior:smooth;background-color:#F2DEC4;background-image:url("./../assets/logo-grey.svg");background-size:20%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center 50%;}
section {width:100%;text-align:center;margin:0 auto;padding:0;}
#home {overflow:hidden;}
p {font-size: 16px;line-height:160%;color:black;}
a {font-size: 16px;text-decoration:none;text-transform:none;color:black;}
h1 {font-family: 'Now',serif;font-size:48px;}
h2 {font-family: 'Now',serif;font-size: 32px;}
h3 {font-family: 'Now',serif;font-size: 16px;}
li {list-style: none;font-size:14px;}
.menu-point {font-family: 'OpenSans',serif;font-size:20px;}
.sidenav-menu-point {font-family: 'OpenSans',serif;font-size:20px;}
.sub-menu-point  {font-family:"OpenSans", serif;font-size:18px;}
.clickable {cursor:pointer;}
.clickable:hover {color:#775168;}
.clickable {position: relative;display: inline-block;cursor: pointer;}
.clickable::after {
    content: "";
    position:absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px; /* thin line */
    background-color: currentColor; /* inherits text color */
    transition: width 0.3s ease, left 0.3s ease;
}
.clickable:hover::after {
    width: 100%;
    left: 0;
}
.unclickable {cursor:not-allowed !important;}
input {font-size: 18px;}
textarea {font-size: 18px;}
.fade-up {-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
.surrounder {width:80%;margin:0 auto;background:transparent;}
.transparent {color:transparent;}
.transparent-background {background:transparent;}
.bright {color:#FCFCFC;}
.bright-background {background-color:#FCFCFC;}
.primary-color {color:#F2DEC4;}
.primary-color-hover:hover {color:#F2DEC4;}
.primary-color-background {background-color:#F2DEC4;}
.primary-color-outline {outline:1px solid #F2DEC4;}
.primary-color-background-hover:hover {background-color:#F2DEC4;}
.primary-color-outline-hover:hover {outline-color:#F2DEC4;}
.primary-color-light {color:#EFE4D7;}
.primary-color-background-light {background-color:#EFE4D7;}
.primary-color-border-light {border-color:#EFE4D7;}
.primary-color-outline-light {outline:1px solid #EFE4D7;}
.primary-color-background-light-hover:hover {background-color:#EFE4D7;}
.primary-color-light-hover:hover {color:#EFE4D7;}
.secondary-color {color:#775168;}
.secondary-color-hover:hover {color:#775168;}
.secondary-color-background {background-color:#775168;}
.secondary-color-outline {outline:1px solid #775168;}
.secondary-color-outline-hover:hover {outline-color:#775168;}
.secondary-color-background-hover:hover {background-color:#775168;}
.secondary-color-shadow {color:#912B2B;}
.secondary-color-background-shadow {background-color:#912B2B;}
.primary-color-outline-light-hover:hover {outline:1px solid #775168;}

.darkener {position:absolute;width:100%;height:100%;background: rgba(239, 228, 215, 0.5);}

.primary-color-very-light {color:#D2DDFF;}
.primary-color-background-very-light {background-color:#D2DDFF;}
.box-shadow-primary-color-very-light {box-shadow:0 0 20px 5px rgba(210,221,255,0.3);}

.white {color:#FFFFFF;}
.white-background {background:#FFFFFF;}
.white-hover {background:#FFFFFF;}
.black {color:#141414;}
.black-background {background:#141414;}
.light-black {color:#525367;}
.light-black-background {background:#525367;}

.tertiary-color {color:#BF5636;}
.tertiary-color-background {background-color:#BF5636;}
.highlight-color {color:rgb(221, 0, 0);}
.highlight-color-background {background-color:rgb(221, 0, 0);}
.highlight-color-shadow {color:rgb(100, 33, 33);}
.highlight-color-background-shadow {background-color:rgb(100, 33, 33);}
.highlight-color-box-shadow {box-shadow:0 0 20px 5px rgba(221,0,0,0.5);}
.highlight-color-box-shadow:hover {box-shadow:0 0 20px 5px rgba(221,0,0,.3);}
.gray-color {color:gray;}
.gray-color-background {background:gray;}
.gray-color-light {color:lightgray;}
.gray-color-background-light {background:lightgray;}
.gray-color-border-light {border:1px solid lightgray;}
.box-shadow-dark {box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);}
.box-shadow-dark-sharp {box-shadow:0 0 8px 4px rgba(0,0,0,.2);}
.box-shadow-light {box-shadow:0 0 20px 5px rgba(255,255,255,.1);}
.box-shadow-dark-hover:hover {box-shadow:0 0 20px 5px rgba(0,0,0,.1);}
.box-shadow-light-hover:hover {box-shadow:0 0 20px 5px rgba(255,255,255,.1);}
.scale-hover:hover {transform:scale(1.2);}
.thin-line {width:90%;border:none;height:1px;background:gray;margin:8px auto;}
.animate {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}
.animate-fast {transition: all 150ms; -webkit-transition: all 150ms; -moz-transition: all 150ms; -o-transition: all 150ms;}
.animate-slow {transition: all 450ms; -webkit-transition: all 450ms; -moz-transition: all 450ms; -o-transition: all 450ms;}
.fa-external-link-alt {font-size: 12px;}
.icon {width:32px;height:32px;font-size: 32px;}
.big-p {font-size: 24px;}
.small-p {font-size:16px;}
.title {font-family: 'Now',serif;font-weight:normal;font-size: 48px;}
.invisible {color:transparent !important;background-color: transparent !important;border: none !important;width:100% !important;}
.hidden {display:none;}
.panel {border-radius:16px;box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);background:white;}
/*LINK-HOVER*/
.link-hover {position:absolute;width:256px;height:384px;right:0;top:0;cursor:pointer;z-index:50;}
.holder-panel {position:absolute;right:0;top:64px;width:auto;height:256px;}
.link-panel {float:left;position:relative;width:64px;height:256px;display:flex;align-items:center;}
.link-text {writing-mode:vertical-rl;text-orientation:mixed;position:absolute;padding:12px 0 12px 12px;text-align:center;}
.blink-animation {position:absolute;opacity:0;width:100%;height:100%;background:white;animation: blink 10s linear infinite;}
.jiggle-animator {float:right;animation: jiggle 10s linear infinite;}
.link-hover:hover .link-panel {width:192px;}
@keyframes blink {
    0% {
        opacity: 0;
    }
    45% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    55% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes jiggle {
    0% {
        width:0;
    }
    45% {
        width:0;
    }
    50% {
        width:16px;
    }
    55% {
        width:0;
    }
    100% {
        width:0;
    }
}
.topic-headline {padding:96px 0 96px 5%;}
/*FLOATING ACTION BUTTONS*/
.floating-action-button {box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);outline:1px solid #775168;font-size:32px;width:64px;height:64px;z-index:90;position:fixed;display:inline-flex;text-align:center;align-items:center;justify-content: center;}
.floating-action-button:hover {cursor:pointer;opacity: 0.8;}
.home-fab-div {bottom:256px; right:64px;}
.home-fab-div:hover {background:#775168;}
.home-fab-div:hover .icon {fill:#F2DEC4;}
/*SCROLLBAR*/
::-webkit-scrollbar {display:none;}
::-webkit-scrollbar-track {background:white;}
::-webkit-scrollbar-thumb {background: #775168;border-radius:3px;}
::-webkit-scrollbar-thumb:hover {background: rgba(119, 81, 104, 0.5);}
/*SELECTOR*/
::selection {color:white;background:#775168;}
/*BUTTON*/
.button {box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);background:transparent;height:48px;cursor:pointer;outline:1px solid #775168;display:inline-flex;text-align:center;align-items:center;justify-content: center;border:none;transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}
.button p {font-size:14px;padding:0 32px;text-transform: uppercase;color:#775168;}
.button:hover {background:#775168;outline:1px solid #775168;}
.button:hover p {color:#F2DEC4;}
/*TEXTFIELD*/
.textfield {--placeholder-color:black;border:none;background:transparent;padding-bottom:8px;font-size:18px;transition: box-shadow 0.3s ease;box-shadow: 0 1px 0 0 #525367;}
.textfield:focus {--placeholder-color:black;box-shadow: 0 2px 0 0 #775168;outline:none;}
.textfield::placeholder {
    color: var(--placeholder-color);
    transition: color 0.3s ease;
}
/*BACKDROP*/
.backdrop {display:none;z-index:100;position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);justify-content:center;align-items:center;}
/*COOKIE-CONSENT*/
.cookie-consent {display:none;z-index:105;position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);justify-content:center;align-items:center;}
.cookie-consent .backdrop {z-index:100;position:fixed;width:100%;height:100%;display:flex;background:rgba(0,0,0,0.5);justify-content:center;align-items:center;}
.cookie-consent .cookie-banner {width:480px;height:auto;text-align:center;padding:24px;position:relative;}
.cookie-consent .cookie-header {margin:16px 0;text-align:center;padding:0;}
.cookie-consent .logo {height:64px;position:absolute;top:32px;left:32px;}
.cookie-consent .cookie-text {padding:16px 0;}
.cookie-consent .text {text-align:left;margin:8px 0;}
.cookie-consent .cookie-settings {overflow-y:hidden;margin:16px 0;}
.cookie-consent .hidden {height:0;}
.cookie-consent .button-holder {width:100%;}
.cookie-consent .button-holder li {width:33.3%;float:left;}
/*SWITCH-HOLDER*/
.switch-holder {text-align:left;margin:16px 0;}
.switch-holder .info-icon {width:16px;height:16px;cursor:help;}
.switch-holder .switch {position:relative;display:inline-block;width:40px;height:22px;text-align:left;}
.switch-holder input {opacity: 0;width: 0;height: 0;}
.switch-holder .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.switch-holder .slider:before {position: absolute;content: "";height: 18px;width: 18px;left:2px;bottom:2px;background-color: white;-webkit-transition: .4s;transition: .4s;}
.switch-holder input:checked + .slider {background-color: #775168;}
.switch-holder input:focus + .slider {box-shadow: 0 0 1px #775168;}
.switch-holder input:checked + .slider:before {-webkit-transform: translateX(18px);-ms-transform: translateX(18px);transform: translateX(18px);}
.switch-holder .slider.round {border-radius: 22px;}
.switch-holder .round:before {border-radius: 50%;}
/*GLOW*/
.primary-glow {width:0;height:0;animation: primary-pulse 10s ease-in infinite;}
@keyframes primary-pulse {
    0% {
        box-shadow: 0px 0px 256px 256px rgba(77,121,255,0.5);
    }
    50% {
        box-shadow: 0px 0px 320px 320px rgba(77,121,255,0.7);
    }
    100% {
        box-shadow: 0px 0px 256px 256px rgba(77,121,255,0.5);
    }
}
.secondary-glow {width:0;height:0;animation: secondary-pulse 10s ease-in infinite;}
@keyframes secondary-pulse {
    0% {
        box-shadow: 0px 0px 256px 256px rgba(255,77,77,0.5);
    }
    50% {
        box-shadow: 0px 0px 320px 320px rgba(255,77,77,0.7);
    }
    100% {
        box-shadow: 0px 0px 256px 256px rgba(255,77,77,0.5);
    }
}
/*COOKIE-BUTTON*/
.cookie-consent .plain-button {border:none;width:90%;height:40px;cursor:pointer;float:left;}
/*HEADER*/
header {background:transparent;width:100%;height:128px;position:fixed;top:0;left:0;z-index:90;text-align:center;display:inline-flex;align-items:center;justify-content:center;}
header .navigation {position:absolute;left:16px;}
header .navigation li {display: inline-block;margin:0 24px;padding:0;}
header .menu-point {height:auto;position:relative;}
header .menu-point-p {cursor:default;}
header .sidenav-menu-point {height:auto;}
header .sub-menu {width:384px;position:absolute;visibility: hidden;height: 0;z-index: 1000;text-align:left;padding:16px 32px;}
header .sub-menu li {display: block;margin:8px auto;}
header .navigation li:hover .sub-menu,
header .navigation li:active .sub-menu,
header .navigation li:focus .sub-menu {visibility: visible;height: auto;}
header .logo-holder {height:75%;position:relative;}
header .logo-holder:hover {opacity: 0.5}
header .logo {height:100%;}
header .menu-icon {display:none;position:absolute;right:32px;width:48px;height:48px;}
header .menu-icon:hover {cursor:pointer;}
header .menu-point::after {
    content: "";
    position:absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px; /* thin line */
    background-color: currentColor; /* inherits text color */
    transition: width 0.3s ease, left 0.3s ease;
}

header .menu-point:hover::after {
    width: 100%;
    left: 0;
}

.permanent-header {background:#F2DEC4;height:64px;box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);}
.permanent-header .menu-point {font-size:16px;}
/*SIDENAV*/
.sidenav {width:0;visibility: hidden;height:0;margin-top: 96px;padding-top:8px;position: fixed;z-index: 99;top: 0;right: 0;overflow-x:hidden;overflow-y:auto;box-shadow:0 0 0 0 rgba(0,0,0,0),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);}
.sidenav ul {width:480px;}
.sidenav .sidenav-p {cursor:default;padding: 8px 8px 8px 32px;}
.sidenav a {padding: 8px 8px 8px 32px;text-decoration: none;display:block;transition: 0.3s;}
.sidenav .contact-button {margin-left:32px;}
.sidenav .sub-menu-point {padding-left:40px;}
.sidenav .initiative-a {font-size:24px;margin:12px 0;}
.expanded-sidenav {width:480px !important;}
/*CALL-TO-ACTION*/
#call-to-action {z-index:100;}
/*HOME*/
#home {margin:0;text-align:center;overflow:hidden;height:80%;position:relative;background-size:cover;background-repeat: no-repeat;background-attachment: fixed;background-position: center 40%;}
#home .surrounder {background:transparent;position:relative;height:100%;}
#home h1 {margin-top:256px;text-align:center;font-size:72px;}
#home .big-p {font-family:"Now",serif;text-align:center;font-size:32px;margin-top:8px;}
#home .button {margin-top:64px;}
#home .arrows-down {width:48px;height:48px;position:absolute;left:50%;bottom:10%;margin-left:-24px;animation: jump 0.5s ease-in infinite;cursor: pointer;}
#home .primary-glow {position:absolute;bottom:0;left:20%;}
#home .secondary-glow {position:absolute;bottom:0;right:20%;}
/*FOOTER*/
#footer {width:100%;height:720px;z-index:1;text-align:center;margin-top:128px;}
#footer h1 {width:100%;}
#footer .logo {height:720px;position:absolute;left: 50%;transform: translate(-50%, 0%);z-index:0;}
#footer .footer-ul {width:100%;display:flex;z-index:10;}
#footer .footer-li {width:50%;display:block;}
#footer .left-content {text-align:left;}
#footer .left-content a {font-size:16px;}
#footer .left-content p {font-size:16px;}
#footer .contact {width:100%;display:flex;margin: 8px auto;box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);}
#footer .contact .textfield {width:100%;margin:0 auto 8px auto;}
#footer .textarea {height:128px;}
#footer .button {float:right;margin-top:16px;}
#footer h1 {margin-top:64px;font-size:96px;padding-bottom:32px;}
#footer .content-holder {width:80%;margin:8px auto;display:block;}
#footer .content-holder li {margin-top:12px;float:left;width:100%;}
#footer .left-div {float:left;width:192px;height:100%;}
#footer .right-div {float:left;width:192px;height:100%;}
#footer .address-holder {float:left;text-align:left;padding:32px;width:30%;}
#footer .address-holder ul {width:100%;display:block;}
#footer .address-holder li {margin-bottom:8px;font-family:"Now",serif;font-size:18px;}
#footer .form {width:70%;float:right;padding:32px;}
#footer .company-name {font-size:28px !important;font-weight:bolder;}

/*MEDIA QUERIES*/
@media screen and (max-width: 1640px) {
    /*COMMON*/
    p {font-size: 16px;}
    a {font-size: 16px;}
    h2 {font-size: 24px;}
    h3 {font-size: 20px;}
    li {font-size:16px;}
    input {font-size: 16px;}
    textarea {font-size: 16px;}
    .menu-point {font-size:20px;}
    .sidenav-menu-point {font-size:20px;}
    .sub-menu-point  {font-size:16px;}
}
@media screen and (max-width: 1300px) {
    /*HOME*/
    #home {height:100% !important;}
    .topic-headline {padding:64px 0 64px 5%;}
    /*COMMON*/
    .link-hover {width:192px;}
    .link-hover:hover .link-panel {width:160px;}
    .header {height: 96px;}
    header .menu-icon {display: block;}
    header .navigation {display:none;}
    header .initiative-a {display:none;}
    header .contact-button {display: none;}
    .sidenav {visibility:visible;height: 100%;width: 0;}
    .floating-action-button {width: 72px; height:72px;}
    .home_fab_div {bottom:192px; right:48px;}
    .home_fab_div .arrow-up {margin:20px 0 0 20px;}
    .contact_fab_div {bottom:96px; right:48px;}
    .contact_fab_div .envelope {margin:20px 0 0 20px;}
}
@media screen and (max-width: 1000px) {
    .floating-action-button {width:48px;height:48px;}
    .home-fab-div {bottom:128px;right:32px;}
    .surrounder {width: 90%;}
    #footer {margin-top:32px;}
    #footer .surrounder {width:100%;}
    #footer .footer-ul {flex-direction: column;align-items: center;}
    #footer .footer-li {width: 100%;text-align: center;}
    #footer .left-div,
    #footer .right-div {float: none;width: 100%;text-align: center;}
    #footer .content-holder {width: 100%;}
    #footer .right-content {margin-top:64px;width:100%;}
    #footer .contact {margin:0 auto 48px auto;width:90%;}
}
@media screen and (max-width: 800px) {
    .topic-headline {padding:32px 0 32px 5%;}
    /*COMMON*/
    .button {height:32px;}
    .button p {padding:0 16px;font-size:12px;}
    .surrounder {width:90%;margin:0 auto;}
    p {font-size: 15px;}
    a {font-size: 15px;}
    h1 {font-size:38px;}
    h2 {font-size: 24px;}
    h3 {font-size: 18px;}
    li {font-size:15px;}
    input {font-size: 15px;}
    textarea {font-size: 15px;}
    .menu-point {font-size:18px;}
    .sidenav-menu-point {font-size:18px;}
    .sub-menu-point  {font-size:15px;}
    /*HOME*/
    #home h1 {margin-top:128px;font-size:56px;}
    #home .big-p {font-size:24px;}
}

@media screen and (max-width: 600px) {
    /*COMMON*/
    h1 {font-size:32px;}
    h2 {font-size: 20px;margin:24px 0 16px 0;}
    .link-hover:hover .link-panel {width:64px;}
    .jiggle-animator {animation:none;}
    .link-panel {width:48px;}
    .link-text {padding:4px 0 4px 4px;text-align:center;}
    /*HEADER*/
    .expanded-sidenav {width:100% !important;}
    /*COOKIE-CONSENT*/
    .cookie-consent .cookie-banner {width:90%;}
    .cookie-consent .logo {height:48px;top:16px;left:16px;}
    .cookie-consent .cookie-header {margin:8px 0;}
}