/* --------------------------------------------------------
CS Chat Stylesheet

version: 1.1
author: Richie Sun
email: rsun@ovloop.com
----------------------------------------------------------*/

/* CHANGE BACKGROUND COLOR AND TEXT COLOR OF FLOATING BUTTON HERE */
.cschat-chatpopup-button-wrapper .csChatFloatingButton {
    background-color: #F3EFE8;
    color: var(--alias-orange);
    cursor: pointer;
    transition: all 0.6s var(--alias-easeOutCubic);
}
.cschat-chatpopup-button-wrapper .csChatFloatingButton {
    bottom: 20px;
    right: calc(40 * var(--unit-fx));
    position: fixed;
    border-radius: 100%;
    z-index: 10;
    width: 54px;
    height: 54px;
    font-size:0; 
    padding: 0;
}


.cschat-chatpopup-button-wrapper .csChatFloatingButton:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%; left: 50%;
    -webkit-mask: url("/assets/svg/chat.svg") 50% 50% / 21px 18px;
    width: 21px; height: 18px;
    transform: translate(-50%, -50%);
    background: var(--alias-orange);
}


/* CHANGE HOVER BUTTON COLOR HERE */
.cschat-chatpopup-button-wrapper .csChatFloatingButton:hover {
    color: #F3EFE8;
    background-color: var(--alias-orange);
}
.cschat-chatpopup-button-wrapper .csChatFloatingButton:hover:before {
    background: #F3EFE8;
}



.cschat-chatpopup {
  display: none;
  position: fixed;
  width: 400px;
  height: auto;
  bottom: 30px;
  right: 30px;
  z-index: 5000;
  background-color: #fff;
  padding: 0px;
  padding-top: 80px;
}
.cschat-chatpopup #closeChat {
  position: absolute;
  background: var(--alias-orange);
  color: white;
  padding: 0;
  border-radius: 100%;
  top: 20px;
  right: 20px;
  height: calc(54 * var(--unit-fx));
  width:  calc(54 * var(--unit-fx));
  box-sizing: border-box;
  font-size: 0;
  cursor:pointer;
}



.cschat-chatpopup #closeChat:before,
.cschat-chatpopup #closeChat:after {
    content: "";
    background: #fff;
    width:  calc( 13 * var(--unit-fx) );
    height: calc(  2 * var(--unit-fx) );
    display: inline-block;
    position: absolute;
    top: 50%; left: 50%;
}
.cschat-chatpopup #closeChat:before {
    transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.625);
}
.cschat-chatpopup #closeChat:after {
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.625);
}


#csChatPopupChat{
    display:none !important;
}:root {
    
    --minSize:    320;
    --maxSize:    1440;

    /* Media Queries*/
   
    --media-m:     screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 500px) and (orientation: portrait);
    
    /* FontFamily */
    --alias-font-feature-settings: 'ss10' on, 'ss13' on, 'ss14' on;
    --alias-main:   'Wallop', sans-serif;
    --alias-alt:   'Wallop-Book', sans-serif;

    /* Colors */
    --alias-themeColor: #F3EFE8;
    --alias-themeBackground: #F3EFE8;
    --alias-theme-light: #F3EFE8;
    --alias-theme-dark: #3E3935;
    --alias-theme-primary: #F84C26;
    --alias-theme-secondary: #2D452D;
    --alias-dark: #3E3935;
    --alias-light: #F3EFE8;
    --alias-beige: #E5DDD2;
    --alias-orange: #F84C26;
    --alias-green: #2D452D;
    --alias-white10: rgba(255,255,255,0.1);

    /* Easings */
    --alias-easeOut: cubic-bezier(0.430, 0.195, 0.020, 1.000);
    --alias-easeIn: cubic-bezier(0.98, 0.0, 0.57, 0);
    --alias-easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    --alias-easeOut2: cubic-bezier(0.9, 0.1, 0.15, 1.05);
    --alias-easeOut3: cubic-bezier(0.630, 0.195, 0.010, 1.000);
    --alias-easeOutSlow: cubic-bezier(.43,.195,.02,1);
    --alias-easeOutSnap: cubic-bezier(0.835, 0.085, 0.005, 1);
    --alias-easeOutUnspun: cubic-bezier( 0.745, 0.065, 0.170, 1.000);
    --alias-easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
    
    /* Units*/
    --unit-md:  calc( 1rem * pow(1.618, var(--currentValue) ) );
    --unit-vr:  calc(15 / 1440 * var(--vw));
    --unit-fx:  calc( var(--vw) / 1440 );
    --unit-fy:  calc( var(--vh) / 900 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );
    --vhfix: 100vh;
    --vw: 100vw;
    --vh: 100vh;
    --unit-vw:  calc( var( --vw ) / 100 );
    --unit-vh:  calc( var( --vh ) / 100 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );


}



@media screen and (max-width: 896px) and (orientation: landscape) {
    :root {
        --unit-fx:  calc( var(--vw) / 896 );
        --unit-fy:  calc( var(--vh) / 375 );
    }
}
@media screen and (max-width: 500px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 375 );
        --unit-fy:  calc( var(--vh) / 667 );
    }
}

/* -------------------------------------------- */
/* FONTS */


@font-face {
    font-family: "Wallop";
    src: url("../fonts/Wallop-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Wallop-Book";
    src: url("../fonts/Wallop-Book.woff2") format("woff2");
}


/* -------------------------------------------- */
/* Reset */

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    font-family: var(--alias-main);
    font-feature-settings: var(--alias-font-feature-settings);
}

input, button, textarea, select {
    font: inherit;
}

button, input, a {
    outline: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border: none;
    background: none;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    color: inherit;
    margin: 0;
}

ul li {
    list-style: none;
}

fieldset, button, input, select, textarea, hr {
    -webkit-appearance: none;
}

img, picture, video, canvas, svg {
    max-width: 100%;
}

video, canvas {
    display: block;
    width: 100%;
}

video {
    height: auto;
}

a { 
    text-decoration: none;
    color: inherit; 
}





/* -------------------------------------------- */
/* Animations */


@keyframes loaderIn {
    0%   { stroke-dashoffset: 276 }
    100% { stroke-dashoffset: 0   }
}
@keyframes loaderOut {
    0%   { stroke-dashoffset: 0 }
    100% { stroke-dashoffset: -276 }
}
@keyframes slideFromBottom {
    0%   { transform: translateY(100%) }
    100% { transform: translateY(0%)   }
}
@keyframes slideFromTop {
    0%   { transform: translateY(-100%) }
    100% { transform: translateY(0%)   }
}
@keyframes slideToBottom {
    0%   { transform: translateY(0%)    }
    100% { transform: translateY(100%) }
}
@keyframes slideToTop {
    0%   { transform: translateY(0%)    }
    100% { transform: translateY(-100%) }
}
@keyframes slideFromTop {
    0%   { transform: translateY(-100%)  }
    100% { transform: translateY(0%) }
}
@keyframes slideFromBottomInner {
    0%   { transform: translateY(70%) }
    100% { transform: translateY(0%)   }
}
@keyframes slideToBottomInner {
    0%   { transform: translateY(0%)    }
    100% { transform: translateY(70%) }
}
@keyframes slideToTopInner {
    0%   { transform: translateY(0%)    }
    100% { transform: translateY(-70%) }
}
@keyframes slideFromTopInner {
    0%   { transform: translateY(-70%)    }
    100% { transform: translateY(0%) }
}
@keyframes slideFromRight {
    0%   { transform: translateX(100%)  }
    100% { transform: translateX(0vw)   }
}
@keyframes slideFromRightLow {
    0%   { transform: translateX(70%)  }
    100% { transform: translateX(0vw)   }
}
@keyframes slideToRight {
    0% { transform: translateX(0vw)   }
    100%   { transform: translateX(100%)  }
}
@keyframes slideToRightLow {
    0% { transform: translateX(0vw)   }
    100%   { transform: translateX(70%)  }
}
@keyframes slideFromRightSmall {
    0%   { transform: translateX(20%)  }
    100% { transform: translateX(0vw)   }
}
@keyframes slideFromLeft {
    0%   { transform: translateX(-100%) }
    100% { transform: translateX(0%)    }
}
@keyframes slideToLeft {
    0% { transform: translateX(0%)    }
    100%   { transform: translateX(-100%) }
}
@keyframes slideToRight {
    0%   { transform: translateX(0%)    }
    100% { transform: translateX(100%)  }
}
@keyframes slideFadeFromBottom {
    0%   { opacity:0; transform: translateY(100%) }
    100% { opacity:1; transform: translateY(0%)   }
}
@keyframes slideFadeFromBottomRight {
    0%   { opacity:0; transform: translateY(100%) translateX(1em)  }
    100% { opacity:1; transform: translateY(0%) translateX(0)   }
}
@keyframes slideFadeFromBottomLeft {
    0%   { opacity:0; transform: translateY(100%) translateX(-1em) }
    100% { opacity:1; transform: translateY(0%) translateX(0)    }
}
@keyframes slideLetter {
    0%   { opacity:0; transform: translateY(100%) translateX( calc( 1px * var(--direction) )) }
    100% { opacity:1; transform: translateY(0%) translateX(0)    }
}
@keyframes slideLetterX {
    0%   { opacity:0; transform: translateX( calc( 1px * var(--direction) )) }
    100% { opacity:1; transform: translateX(0)    }
}
@keyframes scaleXIn {
    0%   { transform: scaleX(0) }
    100% { transform: scaleX(1) }
}
@keyframes slideFadeToTop {
    0%   { opacity:0; transform: translateY(0%)    }
    100% { opacity:1; transform: translateY(-100%) }
}
@keyframes slideFadeToRight {
    0%   { opacity:0; transform: translateX(0%)    }
    100% { opacity:1; transform: translateX(100%)  }
}
@keyframes slideFadeToTop {
    0%   { opacity:0; transform: translateY(0%)    }
    100% { opacity:1; transform: translateY(-100%) }
}
@keyframes fadeIn {
    0%   { opacity:0; }
    100% { opacity:1; }
}
@keyframes fadeOut {
    0%   { opacity:1; }
    100% { opacity:0; }
}
@keyframes scaleOut {
    0%   { transform: scale(1.2) }
    100% { transform: scale(1)   }
}
@keyframes blurIn {
    0%   { opacity:0; filter: blur(20px); }
    100% { opacity:1; filter: blur(0px);  }
}



@keyframes slideDown {
    0%   { transform: translateY(-100%); }
    100%   { transform: translateY(0%); }
}




.__debug_mode_enabled__ *:not([data-debug-grid],[data-debug-col]) { 
    color:#0f0!important;
    outline:solid #0f0 1px!important; 
}
[data-debug-col] {
    background: rgba(184,184,184,0.15)
}
img[data-debug-ref] {
    opacity: 0;
}
.__debug_mode_enabled__ img[data-debug-ref] { 
    opacity: 1 !important;
}
[data-debug-col] {
    background: rgba(184,184,184,0.15)
}

input[type="checkbox"] {
-webkit-appearance: checkbox;
}



.link {
    transition: color 0.5s var(--alias-easeOut);
    position: relative ;
    z-index: 1 ;
    text-shadow: 
        -1px -1px 0 #E5DDD2 , 
         1px -1px 0 #E5DDD2 , 
        -1px 1px 0 #E5DDD2  , 
         1px 1px 0  #E5DDD2 ;
}
.bg\:green .link {
    text-shadow: 
        -1px -1px 0 var(--alias-green) , 
         1px -1px 0 var(--alias-green) , 
        -1px 1px 0 var(--alias-green)  , 
         1px 1px 0  var(--alias-green) ;
}

.link:before {
    content: '' ;
    z-index: -1 ;
    display: inline-block ; 
    position: absolute ; 
    bottom: 0.075em ; 
    left: 0 ; 
    width: 100% ; 
    height: 1px ; 
    background: currentColor ; 
    transform-origin:100% 100% ; 
    transform: scaleX(0) ;
    transition: transform 0.5s var(--alias-easeOut);
}

.link:hover:before {
    transform: scaleX(1) ;
    transform-origin: 0 0 ;
}