/**handles:flatsome-style**/
/*
Theme Name: Swiss Nutrition and Health Foundation
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

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

/* ---- VARIABLES ------------------ */

html, body {

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

--base-color: #000;
--primary-color: #E6181B;

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

--font-xs: calc(0.9em + 0.2 * ((100vw - 320px) / 150));
--font-s: calc(1em + 0.1 * ((100vw - 320px) / 150));
--font-m: calc(1.1em + 0.6 * ((100vw - 320px) / 150));
--font-l: calc(1.2em + 1.1 * ((100vw - 320px) / 150));
--font-xl: calc(1.6em + 1.1 * ((100vw - 320px) / 150));
--font-xxl: calc(2.2em + 1.1 * ((100vw - 320px) / 150));
--font-xxxl: calc(3.2em + 1 * ((100vw - 320px) / 150));

/* Formule responsive font-size */
/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */

--space-xs: 1em;
--space-s: 2em;
--space-m: 5em;
--space-l: 8em;
--space-xl: 12em;
--space-xxl: 16em;

}

/* --- FONTS -------------------------------*/
h1.lead{font-size: var(--font-xxxl); line-height: 1.1;}
h1 {font-size: var(--font-xxl); line-height: 1.1; font-weight: 400;}
h2.lead {font-size: calc(1.2 * var(--font-xl)); font-weight: 400;}
h2 {font-size: var(--font-xl); line-height: 1.3; font-weight: 400; }
h3 {font-size:  var(--font-l); line-height: 1.3; font-weight: 500; margin-bottom: 0.9em}
h4, h5 {font-size: var(--font-m); line-height: 1.4; font-weight: 500;}
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));}
h6.small-headline {text-transform: none;font-size: calc(0.9 * var(--font-xs));font-weight: 600;letter-spacing: 0; line-height: 1.4; margin-bottom: 0.7em; opacity: 1;}
td {color: var(--base-color);}
h6{margin-bottom: 1em;}


/*LIST STYLE*/
#content ul {list-style: none; /* Remove default bullets */}
#content ul li::before {content: "\25A0";  color: var(--primary-color); font-weight: bold;  display: inline-block; width: 1em; margin-left: -1em; }


/* --- 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, #footer .section-content > .row, .row.row-main {max-width: var(--container-max-width);padding-left: var(--passe-partout);padding-right: var(--passe-partout);}
.header .container {padding-left: calc(var(--passe-partout) + 15px); padding-right: calc(var(--passe-partout) + 15px);}
.container .section, .row .section {padding-left: 0;padding-right: 0;}
.absolute-footer{display:none;}



/* --- ELEMENTS -------------------------------*/

/*HEADER*/
.nav>li>a { font-size: 0.9em; font-weight:500;}
.nav-spacing-xlarge>li {margin: 0 16px;}
.logo-left .logo {margin-right: 3em;}
.header-nav-main.nav-line-grow > li > a:before{background-color: var(--primary-color)!important;width: 6px; height: 6px; left: -8px; top: 43%;}
.header-wrapper.stuck {background-color: #fff;}
.header-main .header-button > .button.is-outline{text-transform: none; font-weight: 500; font-size: 1.06em; line-height: 2.5; padding: 0 2.3em;}

/* Language selector */
li.html.custom.html_topbar_left {margin-right: 0;}
.wpml-ls-legacy-dropdown-click {width: 9em;}
.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {border: 0.2em solid transparent; border-top: 0.4em solid; top: calc(50% - 0.1em);}
.wpml-ls-legacy-dropdown-click a {font-size: 1.06em; padding-left: 0; padding-right:0;}
.wpml-ls-legacy-dropdown-click .wpml-ls-flag {margin-right: 5px;}

/* Mobile */
.off-canvas .mfp-close {opacity: 1; top: 0.4em; right: 0.4em;}
.mfp-bg.off-canvas-center:not(.dark) {opacity:1;}
.off-canvas-center .mfp-content {padding-top: 0}
.nav-sidebar.nav-vertical > li > a {text-transform: none; color: var(--base-color); font-size: var(--font-m); display: inline;}
.nav-sidebar.nav-vertical > li.current-menu-item > a:before{opacity:1; position: absolute; content:""; background-color: var(--primary-color)!important;width: 6px; height: 6px; top: 45%; margin-left: -20px;}
.header-button {margin-top: 5px;}
.header-button a {text-transform: none; font-weight: 500; font-size: 1.06em;}

/*BUTTONS*/
a.button-inline {font-size: calc(0.8 * var(--font-xs));margin-left: 1.2em; margin-bottom: 0; display: inline-block; top: 0px;}
a.button.is-underline.button-inline:before {bottom: 0px;}
.button.is-underline:before {background-color: var(--primary-color);opacity: 1;}
.button.is-underline{padding-left: 0;padding-right: 0;}
a.button.right {text-align: right;}
a.button.right.is-underline:before {left: 0;width: 100%;}
a.button.right.is-underline:hover:before {width: 30%; left: 70%;}
.button.is-underline:before {left: 0; width: 100%;}
.button.is-underline:hover:before{left: 20%; width: 60%;}

p a {position: relative;}
p a.arrow {margin-left: 1em; top: -2px; color: transparent; background: url(https://nutritionhealthfoundation.ch/wp-content/uploads/btn-arrow-right.svg) no-repeat 0; transition: all .3s; font-size: .7em;}
p a.arrow:hover {background-position-x: 30%;}

/*Arrow Button in text box*/
.arrow-button-box .box-text p{display: inline;}
.arrow-button-box .box-text {padding-top: 1.6em;}
a.button.primary.is-link.lowercase.button-arrow{background-color: transparent!important; background-image: url(/wp-content/uploads/right-arrow.png); background-repeat: no-repeat;height: 0em; width: 2em; background-size: contain;padding: 0em 1em 2em 1em; margin: 0em 0em 0em 1em; top: 0.7em; border: none; transition: all 0.3s; display: inline-block;}
a.button.primary.is-link.lowercase.button-arrow:hover {transform: translateX(1em);}

/*BLOG*/
.box-blog-post .is-divider {display: none;}

/*SECTION OVERLAY ON PICTURE*/
.section-overlay{margin-top:-12%;}
.section-overlay-bottom{margin-bottom:-12%;}

/*PROJETS PORTFOLIO*/
h6.uppercase.portfolio-box-title {text-transform: none;font-weight: 300;font-size: var(--font-s);margin-bottom: 0.6em;}

/*TABS*/
li.tab.has-icon:before {display: none!important;}
ul.nav.nav-line-grow.nav-uppercase.nav-size-normal.nav-left{justify-content: space-evenly;}
.popup {font-size:90%;}
.tab-panels {padding-top: 2em;}

/* IMAGES */
.img .parallax-active {opacity:1!important;}


/* FORMS */
input[type=email], input[type=date], input[type=search], input[type=number], input[type=text], input[type=tel], input[type=url], input[type=password], textarea, select {box-shadow: none; border: 2px solid #ddd;}
input[type=email]:focus, input[type=date]:focus, input[type=search]:focus, input[type=number]:focus, input[type=text]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus, select:focus {box-shadow: none; border: 2px solid var(--base-color);}
input.wpcf7-submit {font-size: var(--font-s); text-transform: none; border-radius: 99px; padding-left: 30px; padding-right: 30px; }

/*PORTFOLIO*/

.normal-title {display:none;}
#portfolio-content p {text-align: justify;}

/*LINKEDIN*/
i.icon-linkedin {font-size: 1.3em; margin-left: -10px; margin-top: 5px;}

/********************************
 *  
 * ADD MOBILE ONLY CSS HERE  
 * 
 * ****************************/


@media only screen and (max-width: 48em) {

	h1.lead{font-size: var(--font-xxl);}
	p.lead {font-size: calc(1.1 * var(--font-s));}	
	
	.logo-left .logo {margin-right: 0em;}
	
	.html.custom.html_topbar_left {justify-content: center;}
	.wpml-ls-legacy-dropdown-click a {font-size: 1.32em;}
	.wpml-ls-legacy-dropdown-click {width: 10em;}
	.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {border: 0.3em solid transparent; border-top: 0.4em solid; top: calc(50% - 0.15em);}
	.wpml-ls-legacy-dropdown-click .wpml-ls-flag {margin-right: 10px;}
	
	.banner .banner-layers {overflow: visible;}
	
}