@import "variables.css" ;

/* --- GLOBAL --- */
html {
  background: transparent;
}
html, body, .mm-page, .responsive-menu-page-wrapper, #page-wrapper, .dialog-off-canvas-main-canvas {
  min-height: 100vh;
}
.page-forms-xmas-launch #page-wrapper, .page-forms-xmas-launch-confirmation #page-wrapper {
  min-height: initial;
}
body {
  background-image:url('/themes/custom/cleanium/images/launch/xmas_bg.png'), url('/themes/custom/cleanium/images/launch/xmas_bg_mobile.png');
  background-repeat: no-repeat;
  background-color: #fbfaf8;
  background-size: 0, contain;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}
/* Buttons */
.uk-button.uk-button-dark.uk-border-pill > a {
  display: block;
  color: inherit;
}
span.jx-button-icon {
  margin-left: auto;
  background-color: var(--global-primary-background);
  border-radius: 75px;
  width: 35px;
  height: 35px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 7px;
}
.field-cta-link span.jx-button-icon {
  width: 40px;
  height: 40px;
  right: 10px;
}
div.uk-button > a {
    color: inherit;
}
/* Links */
a:hover {
  text-decoration: none;
}
/* Layout */
.region {
	box-sizing: border-box;
}
#block-cleanium-page-title h1 {
	font-weight: 600;
  color: var(--global-link-color);
}
.jx-border-top {
  border-top: 1px solid;
}
.jx-margin-top-auto {
  margin-top: auto;
}
/* List */
.bullet-list li::marker {
  content: '\f13f';
  font-family: "uicons-regular-rounded", sans-serif;
}
ul:not([class]) li {
  padding-left: 10px;
}
/* Forms */
.webform-required::before {
  display: inline-block;
  content: '*';
  color: red;
}
input[type="text"]::placeholder {
  color: var(--global-link-color) ;
}
.jx-rounded-border {
  border-radius: 7px;
}
.jx-separation-border {
  border-bottom: 1px solid var(--global-border) ;
  padding-bottom: 5px;
  margin-bottom: 15px ;
}
.form-actions:has(input[type="submit"]) {
  position: relative ;
}

/* Drupal Throbber */
.ajax-progress {
  position: absolute;
  top: 0;
  left:0;
  z-index: 9;
  display: block;
  height:40px;
  width: 136px;
  background-color: var(--global-primary-background);
}
.ajax-progress .throbber {
  display: flex;
  margin: auto;
}
.digit {
  font-family: Euclid, Outfit, sans-serif;
}

/* Select 2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}
.select2-container .select2-selection--single {
  height: 40px;
}
.select2-container--default .select2-selection--single {
  background-color: #f7f4f9;
  border: 1px solid var(--global-primary-background);
  border-radius: 7px;
}
/* InteliPhone */
.iti {
  display: block ;
}

/* --- HEADER --- */
.page-home #page-header {
  position: absolute;
  width: 100%;
  top: 25px;
  right: 0;
}
#page-header .uk-wrapper{
  padding: 0;
}
#cleanium-region-header {
  padding: 10px;
}
.region-header.uk-sticky.uk-active #cleanium-region-header {
  padding-top: 5px;
  padding-bottom: 5px;
}
.region-header.uk-sticky.uk-active {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(254,26,161, 0.2);
}
/* Site Branding */
.site-branding {
  width: 100%;
}
.uk-logo {
  width:100%;
}
.uk-logo.isotype {
	width: 50px;
}
.region-header.uk-sticky.uk-active .uk-logo {
  display: none !important;
  visibility: hidden;
}
.region-header.uk-sticky.uk-active .uk-logo.isotype {
  visibility: visible;
  display: block !important ;
}

/* Navigation Tools */
.h-nav-tools-item {
  box-sizing: border-box;
  border-radius: 5px;
}
span.phone-number {
  font-size: 1.375em;
  font-weight: 600;
}
.phone-number-wrapper a:hover {
  text-decoration: none;
}
.phone-number-wrapper .phone-icon {
  background-color: var(--global-secondary-background);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 50px;
}
/* Header Language Switcher */
.language-link.is-active {
  font-size: 0;
  width: 35px;
  height: 24px;
  display: flex;
}
a.language-link {
  color: var(--global-link-color) ;
}
#block-cleanium-languageswitcher .uk-link:hover, a.language-link:hover {
  text-decoration: none;
}
a.language-link img{
  width: 35px;
  height: 24px;
}

/* Mobile OffCanvas */
.toggle-button.moc-toggle {
  cursor: pointer;
}
.mmt-line {
	width: 35px;
	height: 2px;
	background-color: #0f1b31;
	margin-bottom: 7px;
	transition: all 500ms;
}
.mmt-line.mmt-line__2 {
	margin-left: 0;
}
.mmt-line.mmt-line__3 {
	margin-bottom: 0;
}
.main-menu-toggler-wrapper:hover .mmt-line.mmt-line__2 {
  margin-left:-7px;
}
#mobile-offcanvas .uk-offcanvas-close.uk-icon.uk-close {
  width: 30px;
  height: 30px;
  color: var(--global-color);
  margin-bottom: 1em;
}
.moc-logo {
  width: 200px
}
.moc-content-wrapper {
    height: 100%;
    overflow-y: hidden;
}
.moc-content-wrapper:hover {
    overflow-y: auto;
}
#mobile-offcanvas .uk-offcanvas-bar {
  color: var(--global-color) ;
  padding-top: 40px;
}
#mobile-offcanvas .uk-offcanvas-bar .uk-button-primary {
  background-color: var(--global-primary-background);
  color: #fff;
  width: 100%;
}
.moc-main-navigation {
    margin-top: 1em;
}
#mobile-offcanvas .uk-navbar-main-nav {
  flex-flow: column nowrap;
}
#mobile-offcanvas .uk-navbar-main-nav>li>a {
  justify-content: flex-start;
}

/* --- FEATURED --- */
#block-cleanium-landinghero, .storage.ft-slide {
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-slide-info {
    margin-top: 10%;
}
.hero-heading {
  font-family: Forte, sans-serif;
  font-size: 2.5em;
  color: var(--global-primary-background);
}
.field-slide-heading-item > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-slide-heading-item > div span {
    display: none;
}
.field-slide-heading-item p {
  margin: 0 ;
}
/* slides */
.hero-image {
  padding: 10%;
}
.field-slide-cta-item {
  max-width: 320px;
  margin: auto;
}
.field-slide-cta-item .uk-button {
    padding: 0 25px;
    line-height: 55px;
}
.field-slide-cta-item .first {
  margin: auto auto 3%;
}
.field-slide-cta-item .last {
  margin-bottom: 10%;
}

/* Launch Landing */

.uk-wrapper.xmas-launch-wrapper {
  background-repeat: no-repeat;
  background-size: 810px,810px, 0;
  background-position: top left, top left, bottom right;
  min-height: 100vh;
  position: relative;
}
.launch-content-wrapper {
  padding-top: 100px;
  max-width: 600px;
  margin: auto;
}
.launch-logo {
  max-width: 600px;
}
.launch-title {
  font-size: 2em;
  font-family: 'Gilroy', sans-serif;
  font-weight: 900;
  color: var(--global-primary-background);
  width: fit-content;
  margin: 15px auto 0;
}
span.title-dot {
  width: 10px;
  height: 10px;
  background-color: var(--global-secondary-background);
  display: inline-block;
  border-radius: 50px;
  position: absolute;
  bottom: 0;
  right: -10px;
}
.launch-countdown {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  color: var(--global-primary-background);
  margin: 1em auto;
  text-align: center;
}
.uk-countdown-label {
  font-size: 1em;
  display: block !important;
}
.uk-grid-small > * {
  padding-left: 5px;
}


.launch-description {
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  font-size: 1.175em;
  background-color: var(--global-secondary-background);
  padding: 1em;
  color: var(--global-primary-background);
  border-radius: 20px;
}
.launch-cta-percentage {
  position: absolute;
  background-color: var(--global-primary-background);
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-weight: 900;
  color: var(--global-secondary-background);
  top: -15px;
  right: 0;
}
.launch-cta-text {
  font-weight: 700;
  font-size: 1.175em;
  color: var(--global-primary-background);
  margin-bottom: 50px;
  width: 220px;
}
a.get-to-form {
  padding: 5px;
  background-color: var(--global-secondary-background);
  color: var(--global-primary-background);
  border-radius: 50px;
  display: inline-block;
  margin-left: 10px;
  text-align: center;
  vertical-align: middle;
}
.xmas-ball {
  background-image: url('/themes/custom/cleanium/images/launch/kom_xmas_ball.png'), url('/themes/custom/cleanium/images/launch/kom_xmas_ball_mobile.png');
  background-repeat: no-repeat;
  background-size: 0, contain;
  height: 150px;
  width: 150px;
  z-index: 0;
  right: 0;
  bottom:0;
}
.captcha.captcha-type-challenge--recaptcha {
  margin: auto;
  text-align: center;
  justify-content: center;
  display: flex;
}
.g-recaptcha > div:first-child {
  height: 100px !important ;
}

/* --- CONTENT --- */

/* Breadcrumbs */
.uk-breadcrumb {
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 10px 20px;
  line-height: initial;
  width: fit-content;
  align-items: revert;
}
.uk-breadcrumb-item, .uk-breadcrumb-item>* {
  font-size: 1em;
  color: #eee8f7;
}
li.uk-breadcrumb-divider::before {
  content: '\f121';
  padding: 0 10px;
  font-family: "uicons-regular-rounded", sans-serif;
  color: var(--global-secondary-background) ;
}
.uk-breadcrumb-divider {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
/* Content Title */
.page-forms-quote #block-cleanium-page-title {
    margin-top: 2em;
}
#page-title {
  position: relative;
}
#page-title::before {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(to right, rgb(0 0 0 / 80%), transparent);
}
.region.region-title {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding-left: 10% ;
  position: relative;
}
/* Xmas Form */
.page-header-bg {
  width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 810px,0;
  postion: absolute;
}
.jx-fix {
  height: 40px;
}
.page-forms-xmas-launch #page-wrapper, .page-forms-xmas-launch-confirmation #page-wrapper {
  max-width: 560px;
  margin: auto auto 24px;
  padding: 0;
  height: initial;
  justify-content: flex-start;
}
#xlf-region-header {
  padding: 0 10px;
  box-sizing: border-box;
}
#xlf-region-header .uk-logo {
  max-width: 275px;
}
#xlf-success-region-header .uk-logo {
  max-width: 250px;
}
.xlf-heading, .xlf-success-heading {
  font-family: Gilroy, 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.375em;
  margin: 20px auto;
}
.page-forms-xmas-launch #page-footer, .page-forms-xmas-launch-confirmation #page-footer {
  position: initial;
  padding: 0;
}
.page-forms-xmas-launch-confirmation #page-footer-bottom {
  text-align: center;
  margin: auto;
  width: fit-content;
}
/* Xmas Form Confirmation */
.page-forms-xmas-launch-confirmation section#page-main-content {
  text-align: center;
}
.success-check span.uk-icon {
  color: var(--global-primary-background);
  border: 4px solid;
  border-radius: 100px;
  padding: 10px;
}
.success-check span.uk-icon svg {
  width: 75px;
}
.xlf-success-heading {
  font-size: 1.5em;
}
.webform-confirmation__message, .success-follow-us-text {
  font-size: 1em;
}
.success-follow-us-icons span.uk-icon {
  background-color: var(--global-primary-background);
  color: #fff;
  padding: 10px;
  border-radius: 100px;
  margin-right: 1em;
}
.success-follow-us-icons a:nth-last-of-type(1) span.uk-icon{
  margin-right: 0;
}
.success-follow-us-text {
  margin-bottom: 1em;
}
/* --- CBLOCKS --- */

.block-title {
  display: flex;
  align-items: center;
}
.block-title h2 {
  display: inline-block;
  position: relative;
}
.block-title h2 {
  margin-bottom: 50px;
  font-size: 2.5em;
  font-family: Forte, sans-serif;
}
.block-title h2::after {
  content: '';
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: var(--global-primary-background);
  border-radius: 30px;
  margin-right: -50px;
  position: absolute;
  left: -60px;
  bottom: calc((100% - 50px)/2);
  z-index: -1;
}
.block-title h2::first-letter {
  color: #fff;
}
.block-title-left {
  margin-right: 20px;
}





/* Landing Quote */
.ui-dialog.webform-confirmation-modal {
    background-color: #fff;
    box-shadow: 0 5px 10px #eee;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 1;
}
.ui-widget-overlay {
    background: #FFF;
    z-index: 0;
}

.jx-submit.uk-flex {
  font-weight: 700;
  background-color: var(--global-primary-background);
  width: fit-content;
  position: relative;
  border-radius: 10px;
  height: 45px;
  margin: 1em auto;
  justify-content: center;
  align-items: center;
}
.jx-submit:hover, .jx-submit:focus {
  background-color: var(--global-primary-background);
}
.jx-submit .uk-button {
  font-size: 1.175em;
}
.jx-submit > .form-submit {
  padding-right: 60px;
  z-index: 1;
  background-color: transparent;
}
.jx-submit-icon {
  color: var(--global-secondary-background);
  position: absolute;
  right: 15px;
  z-index: 0;
}
input.form-submit {
  border-radius: 50px;
}
div[role="alert"] {
  border: 1px solid red;
  padding: 1em;
  border-radius: 7px;
  color: red;
}
.form-item--error {
  transition: all 500ms;
}
.form-item--error-message {
  color: red;
  font-weight: 700;
}
.uk-form-danger, .uk-form-danger:focus {
  color: #f0506e;
  outline: red solid 1px;
}

/* --- FOOTER --- */
footer#page-footer {
  padding-bottom: 10px;
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100vw;
  box-sizing: border-box;
  background: transparent;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.page-forms-xmas-launch footer#page-footer {
  width: 100%;
  padding-left: initial;
  background: transparent;
}
.page-forms-xmas-launch #page-footer-bottom {
  text-align: center;
  justify-content: center;
}

/* ======================== MEDIA QUERIES ========================== */

@media (min-width: 400px) and (min-height: 800px) {
  
  /* --- XMAS LAUNCH -- */
  .uk-wrapper.xmas-launch-wrapper {
    justify-content: center;
    display: flex;
    flex-flow: column;
  }

}
@media (min-width: 400px) {
  .launch-cta-text {
    width: 360px;
  }

}
@media (min-width: 640px) {

  /* --- HEADER --- */
  #cleanium-region-header {
    padding: 15px;
  }

  /* --- FEATURED ---*/

  /* --- CONTENT --- */
  .page-forms-xmas-launch #page-wrapper, .page-forms-xmas-launch-confirmation #page-wrapper {
    margin: auto auto 24px;
    background-color: white;
    border-radius: 20px;
    padding: 20px 10px;
    box-shadow: 0 5px 30px #632e904f;
    position: relative;
    z-index: 1;
  }

  /* --- CBLOCKS --- */
  #block-cleanium-landingservicesblock .field-block-content-components > .field-block-content-components-item {
    min-width: 380px;
  }


}
@media (min-width: 768px){

  /* XMAS LAUNCH */
  .dialog-off-canvas-main-canvas {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
  [class^="page-forms-xmas-launch"] #page-wrapper {
    margin: 0 auto 25px;
  }
  .page-header-bg {
    width: 100%;
    height: 237px;
    background-repeat: no-repeat;
    background-size: cover, 0;
    position: absolute;
    top: 0;
    z-index: 0;
  }
  .xlf-success-heading {
    font-size: 1.75em;
  }
  .success-check span.uk-icon {
    border: 6px solid;
  }
  span.uk-icon svg {
    width: initial;
  }
  .webform-confirmation__message, .success-follow-us-text {
    font-size: 1.3em;
    letter-spacing: .5pt;
  }
}

@media (min-width: 960px) {

  /* --- HEADER --- */
  .page-home #cleanium-region-header{
    padding-top: 2em;
  }
  /* Main Menu */
  .uk-navbar-main-nav>li>a {
    padding: 0 10px;
  }

  /* --- FEATURED ---*/
  .hero-content-wrapper {
    width: 97.5%;
    margin-left: 2.5% ;
  }
  .hero-heading {
    font-size: 3em;
  }
  .hero-slide-info {
    margin-left: 5%;
    margin-top: 5%;
  }
  .field-slide-heading-item > div {
    justify-content: flex-start;
  }
  .field-slide-heading-item > div span {
    display: initial;
    width: 150px;
    margin-right: 5px;
    justify-content: initial;
  }
  .field-slide-heading-item > div span:last-child {
    margin-left: 5px;
    height: 53px;
    width: 53px;
  }
  .hero-action-link.uk-visible\@m {
    margin-top: 10%;
  }
  .field-slide-cta-item .last, .field-slide-cta-item .first {
    margin-bottom: 0;
  }
  .field-slide-cta-item .first {
    margin-right: 10px;
  }
  .field-slide-cta-item .uk-button {
    line-height: 45px;
  }
  .field-slide-cta-item .last {
    justify-content: center ;
  }
  .field-slide-cta-item .uk-button-medium {
    font-size: initial;
  }

  /* --- XMAS LAUNCH ---*/
  .page-home #cleanium-region-header {
    max-width: 600px;
  }
  .jx-fix {
    height: 100px;
  }
  .uk-wrapper.xmas-launch-wrapper {
    background-repeat: no-repeat;
    background-size: contain, 0, contain;
    background-position: top left, top left, bottom right;
    padding: 0;
    position: relative;
    z-index: 0;
  }
  .launch-content-wrapper {
    padding-top: 75px;
    max-width: 500px;
    margin: auto 2.5%;
  }
  .launch-cta-percentage {
    width: 75px;
    height: 75px;
    font-size: 1.7em;
  }
  .launch-cta-text {
    font-size: 1.375em;
    margin: auto;
  }
  .uk-countdown-number {
    font-size: 4rem;
  }
.uk-countdown-separator {
  font-size: 2rem;
}
  .uk-countdown-label {
    font-size: 1.375em;
  }
  .xmas-ball {
    background-size: contain, 0;
    right: initial;
    z-index: -1;
  }
  .launch-description {
    font-size: 1.5em;
  }
  /* --- CBLOCKS --- */

  /* Testimonials */
  #block-cleanium-testimonials .block-wrapper > div:not(.block-title-left) {
    width: calc( 200% / 3 );
    padding: 0 30px;
  }

  /* Landing Call to Action */
  #block-cleanium-landingmaincta .field-block-left-components .storage {
    justify-content: space-between;
  }
  #block-cleanium-landingmaincta .field-block-left-components {
    width: calc( 200% / 3 );
    margin-right: 2.5%;
    order: 1;
    margin-bottom: 0;
  }
  #block-cleanium-landingmaincta .field-block-right-components {
    order: 2;
    margin-bottom: 0;
    width: calc(100%/3);
  }
  /* Landing Get in Touch */
    .left-title-block .field-block-content-components {
      max-width: 700px;
      margin-left: 5%;
    }
  /* --- FOOTER --- */
  footer#page-footer {
    background: initial;
  }
}
@media (min-width: 1024px) {
  /* --- GENERAL --- */
  body {
    background-size: cover,0;
  }

  /* --- CHRISTMAS LAUNCH --- */
}  


@media (min-width: 1200px) {

  /* --- HEADER --- */
  #cleanium-region-header {
    padding: 15px 50px;
  }

  /* --- FEATURED --- */
  .hero-heading {
    font-size: 4em;
  }
  .hero-content-wrapper {
    width: 91.665%;
    margin-left: 8.335%;
  }
  .hero-slide-info {
    margin-left: 0;
  }
  /* Xmas Launch */
  .page-home #cleanium-region-header {
    max-width: 600px;
  }
  .launch-content-wrapper {
    margin: 0 15%;
max-width: 600px;
  }
  .xmas-ball {
    height: 300px;
    width: 300px;
  }
  .uk-countdown-number {
    font-size: 6rem;  
  }
.uk-countdown-separator {
  font-size: 3rem;
}

  .launch-cta-text {
    width: 450px;
    margin: auto auto 60px 0;
  }
  /* --- CBLOCKS --- */
  /* Testimonial */
  .block-title-left h2 {
    font-size: 3em;
  }

  /* Landing CTA */
  #block-cleanium-landingmaincta .field-block-left-components-item .storage > .uk-flex-start {
    max-width: 600px;
    width: 65%;
  }
  #block-cleanium-landingmaincta .field.field-cta-link.field-type-link.uk-width-1-1 {
    width: 30%;
    margin-left: auto;
  }

}

@media (min-width: 1280px) {

  /* --- FEATURED --- */
  /* Xmas Launch */
  .page-home #cleanium-region-header {
    max-width: 600px;
    margin-left: 15%;
  }
.page-home #page-header {
  top: 75px;
  box-sizing: border-box;
}

  /* --- CBLOCK --- */

  /* Landing About Us */
  #block-cleanium-aboutus .sc-item-field-heading {
    width: 70%;
  }
  .sc-item-field-content {
    width: 80%;
  }

}

@media (min-width: 1430px) {

  /* --- HEADER --- */
  .uk-navbar-main-nav>li>a {
    padding: 0 15px;
  }
  
  /* --- FEATURED --- */
  
  /* Xmas Launch */
  .launch-description {
    font-size: 1.7em;
  }
  .launch-cta-text {
    font-size: 1.5em;
  }
  .launch-content-wrapper {
    max-width: 600px;
    margin: auto 15%;
    padding-top: 100px;
  }
}
@media (min-width: 1600px) {

  /* --- HEADER --- */
  .page-home #cleanium-region-header {
    padding-top: 5em;
  }
  /* --- FEATURED --- */
  /* Landing Slide */
  .hero-heading {
    font-size: 5em;
  }
  .field-slide-heading-item > div span {
    display: initial;
    width: initial;
    margin-right: 10px;
  }
  .field-slide-heading-item > div span:last-child {
    margin-left: 10px;
    height: initial;
    width: initial;
  }
  .hero-action-link {
    max-width: 600px;
  }

}