/**
 * @brief SalonBienEtreStyle theme, main styles.
 * @details Plugin / Theme Styles
 * @author JB Lebrun
 * @version 1.0.1
 * @date Creation: Jan 2025
 * @date Modification: Jan 2025
 * @copyright 2025 Ideogram Design
 */

/* Fonts */
@font-face{font-family: "Recoleta"; src: url('../fonts/Recoleta-Medium.ttf'); font-weight:500;}
@font-face{font-family: "Recoleta"; src: url('../fonts/Recoleta-Bold.ttf'); font-weight:600;}
@font-face{font-family: "Recoleta"; src: url('../fonts/Recoleta-Regular.ttf');}

/* Color definition */
:root {
  --primary-color: rgb(70, 176, 232);
  --primary-color-dark:  rgb(0, 70, 122);
  --primary-color-light: rgb(226, 247, 255);
  --primary-color-medium: rgb(132, 200, 236);
}

/* global */
* {padding:0; margin:0; box-sizing: border-box;}
body {background:white;}
p {padding: 8px 0;}
a {transition: all 0.3s; text-decoration:none; color:var(--primary-color-dark);}
a:hover {color:var(--primary-color);}
ul {margin: 0 0 0 28px;; padding:0; list-style:url(../img/bullet.png);}
ul ul {margin:0 0 0 18px; padding:0;  list-style:url(../img/bullet2.png);}
ul ul ul {margin:0 0 0 18px; padding:0;}
ul li {margin:4px 0 16px 4px;}
ol {list-style: none; counter-reset: li; margin: 0 0 0 10px;}
ol li {counter-increment: li; margin:4px 0 16px 4px;}
ol li::before {content: counter(li); color: #009cb4; font-weight:600; display: inline-block; width: 1em; margin: 0.25em 0.5em 0.25em -0.5em; text-align: right; direction: rtl;}
b, strong {font-weight:bold; font-size:inherit;}
i, em {font-style:italic; font-size:inherit;}
blockquote {margin:8px 20px;}
pre {margin:0.5rem 0; font-family:monospace; font-size:0.8rem; border:solid 1px #009cb4; background:#f0f9fb; padding:0.5rem;}
input, textarea, select {border:none; background:white; color:#5A5A5A !important; border-radius:0.3rem;}
input, textarea, option {padding:8px 8px;}
select {padding:8px 4px;}
textarea {resize: none;}
input:focus::placeholder, textarea:focus::placeholder {color:#ACACAC !important;}
input[value=""]::placeholder, textarea:empty::placeholder {color:black;}
input[type=checkbox] {margin-right:8px;}
input[type=radio] {margin-right:8px;}
.inputs {width:250px;}
.linputs {width:400px;}
.sinputs {width:150px;}
.vsinputs {width:40px;}
.vlinputs {width:100%;}
form {margin:0; font-size:0;}
.img {font-size:0 !important; line-height:0;}
sup, sub{font-size:9px; color:inherit;}
img {border:0; max-width:100%; height:auto;}
img.marginWrapper {margin:-50px 0;}
.pad10 {padding:10px;}
.pad20 {padding:20px;}
.pad50 {padding:50px;}

/* icon image for layered menu */
img.icon{float:left; margin-right:4px;}

/* error */
.error {font-size:16px; font-weight:bold; color:#CC3333; padding:4px;}

/* tool */
.clear {clear:both; height:0; font-size:0;}
.unselectable {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor:default;}
.centered {text-align:center;}
.lefted {text-align:left;}
.righted {text-align:right;}

/* editor */
* {font-family: 'Recoleta', sans-serif; font-size: 1rem; font-weight:normal; font-style:normal; color:var(--primary-color-dark);}

/* generic titles */
.eTitle1 {font-size:3.5rem; line-height: 3.75rem; font-weight:bold; background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 50%, var(--primary-color-light) 100%); background-clip:text; -webkit-background-clip:text; color:transparent;}
.eTitle2 {font-size:2.2rem; text-transform:uppercase; color:var(--primary-color); margin: 0.5rem 0 0.35rem;}
.eTitle3 {font-size:2.2rem; text-transform:uppercase; margin: 0.5rem 0 0.35rem;}

.eTitle4 {font-size:1.35rem; color:var(--primary-color-dark); margin: 0.25rem 0;}
.eTitle5 {font-size:1.25rem; line-height: 1.35rem; color:var(--primary-color); font-weight:600; margin: 0 0 0.25rem;}
.eTitle6 {font-size:1.25rem; line-height: 1.35rem; color:var(--primary-color-dark); font-weight:600; margin: 0 0 0.25rem;}


/* generic contents */
.eContent1 {}
.eContent2 {font-size:1.65rem;}
.eContent3 {font-size:1.85rem; text-transform:uppercase;}
.eContent4 {font-size:1.85rem; font-weight:bold; color:var(--primary-color-dark);}
.eContent5 {font-size:1.85rem; font-weight:bold; color:var(--primary-color);}
.eContent5 img.bigIcon {vertical-align:-14px; margin: 0 0.5rem;}
.eContent6 {font-size:1.65rem; color:var(--primary-color);}
.large {font-size:2.75rem; line-height:2.75rem;}

a.eLink1 {}
a.eLink2 {}
a.eLink1:hover, a.eLink2:hover {}

table.eTable{margin:0.5rem 0; border:solid 1px #009cb4;}
th.eTableHeader, td.eTableHeader {background:#009cb4; padding:0.5rem; font-weight:bold; color: white;}
td.eTableLine0 {background:white; padding:0.5rem;}
td.eTableLine1 {background:#f0f9fb; padding:0.5rem;}

td.eTableLineAuto {background:white; padding:4px; font-weight:bold;}
tr:nth-child(odd) td.eTableLineAuto {background:#EFEAF4; padding:4px; font-weight:bold;}

/* parts */
.SalonBienEtreButton {font-size:1.25rem; letter-spacing:0.1rem; display:inline-block; text-decoration: none; text-transform:uppercase; padding: 10px 24px 8px; background:var(--primary-color); border-radius: 50px; color:white; transition:all 0.5s ease;}
.SalonBienEtreButton:hover {background:var(--primary-color-dark);}
.SalonBienEtreButton + .SalonBienEtreButton {margin: 0 0 0.5rem  0.5rem;}

/* page structure */
.mainContent {max-width:1200px; margin:0 auto; font-size:0;}

.columns {display:flex; align-items:top; flex-wrap:wrap;}
.columns .column.half {flex:1; min-width:48%;}
.columns .column.half:nth-child(even) {margin-left:4%;}

.columns .column.third {flex:1; min-width:33%:}
.columns .column.third2 {flex:2; min-width:66%:}

/* Page coloured content lines */
.primaryColorLine {background:var(--primary-color);}
.primaryColorLine * {color:white;}

.primaryColorDarkLine {background:var(--primary-color-dark);}
.primaryColorDarkLine * {color:white;}

.primaryColorLightLine {background:var(--primary-color-light);}

.primaryColorDarkGradientLine {background:linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%)}
.primaryColorDarkGradientLine * {color:white;}

.primaryColorLightGradientLine {background:linear-gradient(90deg, var(--primary-color-light) 0%, var(--primary-color) 100%)}

.primaryColorLightBoxLine {}
.primaryColorLightBoxLine .line {background:var(--primary-color-light); border-radius:2rem; padding:2rem !important; margin: 3rem auto;}

/* Form */
.form {display:flex; flex-wrap: wrap;}
.form .formInput {flex:1; min-width:95%; margin: 1em 0 1em 5%;}
.form .formInput.half {min-width:45%; max-width:45%;}
.form .formButtons {min-width:95%; margin: 1em 0 1em 5%; text-align:right;}

/*
.formLine {display:block; padding:8px 0; font-size:0;}
.formItem {display:inline-block; width:120px; text-align:right;}
.formLargeItem {display:inline-block; width:240px; text-align:right;}
.formLabel {display:inline-block; width:80px; text-align:right;}

.formLargeInput {display:inline-block; width:450px; padding:0 8px;}
.formButton {display:inline-block; padding:0 8px; vertical-align:top;}
.formButtons {text-align:center; padding:8px;}
.formTotal {display:inline-block; width:210px; padding:0 8px; font-weight:bold; color:#de1818}
.formDesc {display:inline-block;}
.formValue {display:inline-block; width:350px; padding:0 8px; font-weight:bold;}
.formValue.comment {font-weight:normal; font-style:italic;}
.formSubTotal {display:inline-block; line-height:1.1rem;}

.formLine.total {text-align:center;}
.columns .column.form.total {text-align:right;}
.columns .column.form.total .formLine.total {display:inline-block;}
*/

/* Input : media popup */
.mediaPopupBkgd {position:fixed; left:0; top:0; background:#f18700; opacity:0.75; width:100%; z-index:10000;}
.mediaPopup {z-index:10001; position:fixed; top:0; left:0; text-align:center; max-width:100%; box-sizing: content-box;}
.mediaPopup .closeButton {width:0; height:0; overflow:visible; float:right; position:relative; top:-28px; left:-4px; cursor:pointer; font-size:0;}
.mediaPopup .closeButton img {width:33px !important; height:33px !important; max-width:33px;}
.mediaPopup .mediaTitle {margin:8px 0 0; padding:8px 8px; text-align:center; color:white; font-weight:bold; background:#009cb4; font-size:1rem; line-height:1.2rem;}

.mediaPopup .mediaContentBox {max-width:100%; max-height:100%; overflow-y: auto; font-size:0; line-height:0;}
.mediaPopup .mediaContentBox img {max-width:100%; max-height:100%; width:auto; height:auto;}

/* Input : Social Network Sharing */
.SNSP.follow .networkIcon {margin:5px 0 0 20px;}
.share .img {text-decoration:none; font-size:0; padding:0 3px;}
.share .img img {vertical-align:0px !important;}


/* Page footer */
.PageFooter {}
.PageFooter .mainContent {margin:1rem auto 0;}

.PageFooter .bottom {display:flex; padding:1rem 0; justify-content: center; align-items: top;}
.PageFooter .bottom * {font-size:0.9rem;}
.PageFooter .bottom .left {flex:1; font-size:0.9rem;}
.PageFooter .bottom .left img {margin-top:0.5rem;}
.PageFooter .bottom .middle {flex:1; text-align:center;}
.PageFooter .bottom .right {flex:1; text-align:right;}
.PageFooter .bottom .right img {vertical-align:-19px;}

/* Page content */
.PageContent {}
.PageContent .mainContent {/*margin:2rem auto;*/}

/* Home portal */
.homePortal .line {padding:2rem 0;}


.homePortal .homeHTMLContent:first-child .line {padding:0 0 2rem;}
.homePortal .homeHTMLContent .line {}
.homePortal .homeHTMLContent .line .content {text-align:center; font-size:1.5rem; line-height:1.5rem;}

.homePortal .homeBanner .mainContent {padding:0;}
.homePortal .homeBanner .mainContent .line {font-size:0; line-height:0;}

.homePortal .home2ColQuote .line {background:#009cb4 url(../img/Lines/logo.png) 0% 35% no-repeat; background-size:5% auto; border-radius:1.5rem; display:flex;}
.homePortal .home2ColQuote .line .quote {flex:1; min-width:35%; padding: 0 0 0 4rem;}
.homePortal .home2ColQuote .line .quote * {color:white; text-align:left !important;}
.homePortal .home2ColQuote .line .content {flex:1; min-width:60%; margin-left: 5%;}
.homePortal .home2ColQuote .line .content .text {color:white; font-size:1.25rem; line-height:1.5rem;}
.homePortal .home2ColQuote .line .content .buttons {padding-top:1rem;}

.homePortal .home2ColPicture .line {}
.homePortal .home2ColPicture .line .cols {display:flex;}
.homePortal .home2ColPicture .line .cols .content {flex:2;}
.homePortal .home2ColPicture .line .cols .content .text {font-size:1.25rem; line-height:1.5rem;}
.homePortal .home2ColPicture .line .cols .content .buttons {padding-top:1rem;}
.homePortal .home2ColPicture .line .cols .picture {flex:1; min-width:40%; margin-left:5%; overflow:hidden; font-size:0; line-height:0;}
.homePortal .home2ColPicture .line .cols .picture img {border-radius:1.5rem;}

.homePortal .homeKeyFigures .line .cols {display:flex;}
.homePortal .homeKeyFigures .line .cols .keyFigure {flex:1; margin:0 1%;}
.homePortal .homeKeyFigures .line .cols .keyFigure * {text-align:center; font-size:1.45rem; text-transform:uppercase;}
.homePortal .homeKeyFigures .line .cols .keyFigure .icon {}
.homePortal .homeKeyFigures .line .cols .keyFigure .mainLine {font-weight:500; margin:0.5rem 0 0.125rem;}
.homePortal .homeKeyFigures .line .cols .keyTitle {flex:1; margin:0 1%; padding:0 2rem 0 0;}

.homePortal .homeExhibitors .line {}

.homePortal .homeAgenda .line {display:flex;}
.homePortal .homeAgenda .line .titles {flex:1; min-width:25%; max-width:25%;}
.homePortal .homeAgenda .line .activities {flex:3; min-width:71%; max-width:71%; margin-left:4%;}
.homePortal .homeAgenda .line .activities .activity {margin:0.25rem 0 1rem;}
.homePortal .homeAgenda .line .activities .activity .time {margin-right:0.3rem;}
.homePortal .homeAgenda .line .activities .separator {border-top:dotted 2px var(--primary-color-dark); height:1rem; font-size:0; line-height:0;}

/* Partners */
.partners {display:flex; flex-wrap: wrap; justify-content: left; align-items: center; margin:1rem 0 0;}
.partners .partner {flex:1; min-width:30%; max-width:30%; height:auto; margin:1rem 1.5%; text-align:center;}

/* Exhibitors */
.exhibitors {display:flex; flex-wrap: wrap; justify-content: left; align-items: center; margin:1rem 0 0;}
.exhibitors .eTitle4 {flex:3; min-width:100%;}
.exhibitors .exhibitor {flex:1; display:flex; min-width:30%; max-width:30%; height:auto; margin:0.5rem 0.5% 1.5rem; padding:1rem; background:white; border-radius:1rem;}
.exhibitors .exhibitor .logo {flex:1; min-width:100px; max-width:100px; margin-right:0.5rem; font-size:0;}
.exhibitors .exhibitor .data {min-height:100px;}
.exhibitors .exhibitor .data .address {background:url(../img/Home/marker-city.svg) 0 0 no-repeat; background-size:auto 100%; padding: 0 0 0 2rem; margin:0.5rem 0; font-weight:bold; color:var(--primary-color-dark);}
.exhibitors .exhibitor .data .link a {text-decoration:underline;}

/* Specific */
.IWLogos {margin:0 2rem 0 0;}