/*
Theme Name: Wanasah
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

html, body {

font-size: 17px;
font-weight:400;

--base-color: #27674F;
--primary-color: #FE7D4D;
--secondary-color:#328567;

--container-max-width: 1750px;
--passe-partout: 10%;

--font-xs: calc(0.7em + 0.1 * ((100vw - 320px) / 150));
--font-s: calc(0.9em + 0.1 * ((100vw - 320px) / 150));
--font-m: calc(0.5em + 1.1 * ((100vw - 320px) / 150));
--font-l: calc(1.8em + 1.1 * ((100vw - 320px) / 150));
--font-xl: calc(2.4em + 1.1 * ((100vw - 320px) / 150));
--font-xxl: calc(2.8em + 1.1 * ((100vw - 320px) / 150));
--font-xxxl: calc(4em + 1 * ((100vw - 320px) / 150));
	
}
	
/* --- LAYOUT (passe-partout, etc.) -------------------------------*/

.full-width .ubermenu-nav, .container, .row {max-width: 100%;} /* Hack, e.g news home page: sinon max-width par default appliqué */
.header .container, #main .section-content>.row, #footer .section-content > .row {max-width: var(--container-max-width);}
.row-full-width > .col > .col-inner:first-of-type{padding: 0 8%;}

/* Passe-partout */
#header .container {padding-right: 2em; padding-left: 2em;}
#main .section-content > .row:not(.row-full-width), #footer .section-content > .row {padding-left: calc(var(--passe-partout) - 15px); padding-right: calc(var(--passe-partout) - 15px);}
#main .section-content > .row:not(.row-full-width).row-large {padding-left: calc(var(--passe-partout) - 30px); padding-right: calc(var(--passe-partout) - 30px);}
#main .section-content > .row:not(.row-full-width).row-small {padding-left: calc(var(--passe-partout) - 9.8px); padding-right: calc(var(--passe-partout) - 9.8px);}
#main .section-content > .row:not(.row-full-width).row-collapse {padding-left: calc(var(--passe-partout) - 0px); padding-right: calc(var(--passe-partout) - 0px);}

@media (min-width: 550px) {
.row-full-width > .col:last-of-type {padding-right: 0;}
.row-full-width > .col:first-of-type {padding-left: 0;}
}

@media (min-width: 1750px) {
  /* Corrige alignement sur very large screen */
 .row.align-right > .col {padding-left: 8%;}
 .row.align-left > .col {padding-right: 8%;}
}

.no-padding .col {padding: 0 15px 0px;}
.absolute-footer{display:none;}

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

h1.lead{font-size: var(--font-xxxl); line-height: 1.1;}
h1 {font-size: var(--font-xxl); line-height: 1.1;}
h2.lead {font-size: calc(1.2 * var(--font-xl));}
h2 {font-size: var(--font-xl); line-height: 1; }
h4, h5 {font-size: var(--font-m); line-height: 1.4;}
p, p + ul, p + ol, h1 + ul, h2 + ul, h3 + ul, h1 + ol, h2 + ol, h3 + ol {font-size: var(--font-s);}
p.lead {font-size: calc(1.3 * var(--font-s));}
span.color{color:var(--primary-color);}
.uppercase, h6, th, span.widget-title {line-height: 1.05;letter-spacing: 0;text-transform: uppercase;}
h4.uppercase{line-height: 2.5; font-weight: bolder; font-size: calc(1.2* var(--font-s));letter-spacing: 2px;}
.banner h1{font-size:3.5vw;}

/*HEADER*/
.nav-size-large>li>a {color: var(--base-color)!important;font-size: calc(1.2*var(--font-s)); }
.nav-size-large>li>a:hover{color: var(--primary-color)!important;}
.nav-spacing-xlarge>li {margin: 0 20px;}
.header-button .button {text-transform: none; font-size: calc(1.1*var(--font-s));}
.has-dropdown .icon-angle-down { display: none;}
.nav-dropdown-bold .nav-column li>a, .nav-dropdown.nav-dropdown-bold>li>a { color: var(--base-color);}

/*STAFF*/
.staff-row .col:before {
    content: "";
    background: #BFC9C0;
    position: absolute;
     top: -28px;
    left: -3px;
    width: 350px;
    height: 350px;
	border-radius: 20px; 
    opacity: 0.7;}

.staff-row h4.uppercase{line-height:1.4}


/*TESTIMONIALS*/
.icon-testimonials .icon-box-img img {opacity: 0.6;}
.icon-testimonials .icon-box-text .testimonial-quote{padding:40px;}
.flickity-page-dots .dot {border: 0px solid #111; background: var(--primary-color);}
.flickity-page-dots .dot.is-selected {background-color: var(--primary-color);}

/*ICONS WHITE HOVER*/
.icon-box:hover .has-icon-bg .icon .icon-inner {
background-color: #F28B5E;}

/*ACCORDEON*/
.accordion-title {font-size: 90%;border-top: none; color: var(--secondary-color)!important;}
.accordion .toggle {
    top: 0.1em;
	position: relative;}

/*BUTTON*/
.button{padding: 4px 50px;}
.header-button .button {font-size: calc(1.2*var(--font-s));padding: 0px 30px;}
a.button.secondary.is-xlarge.box-shadow-3-hover:hover{background-color: #e37042;}

/*ARROW DOWN*/
.arrow-down .icon-box-img:hover {
    transform: translateY(10px);
}
.arrow-down .icon-box-center .icon-box-img {
    transition: transform 500ms, opacity 400ms;
}

.arrow-down .icon-box-text:hover {
	transform: translateY(10px);}

.arrow-down .icon-box-text{transition: transform 500ms, opacity 400ms;}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

#header .container {padding-right: 0.5em;padding-left: 0.5em;}
#logo img {max-height: 75px!important;}
.banner h1 {font-size: 5vw;}
.transparent .header-main {height: 81px!important;}
}