/**
 * @brief IdeogramStyle theme, main styles.
 * @details Plugin / Theme Styles
 * @author JB Lebrun
 * @version 1.0.4
 * @date Creation: Dec 2022
 * @date Modification: Jun 2023
 * @copyright 2022 - 2023 Ideogram Design
 */

/* Fonts */
@font-face{font-family: "Montserrat"; src: url('../fonts/Montserrat-Light.ttf');}
@font-face{font-family: "Montserrat"; src: url('../fonts/Montserrat-Medium.ttf'); font-weight:600;}
@font-face{font-family: "Playfair"; src: url('../fonts/PlayfairDisplay-ExtraBold.ttf');}

/* global */
* {padding:0; margin:0; box-sizing: border-box;}
body {background:white;}
p {padding: 8px 0;}
a {text-decoration:none; color:#020344; transition: color 0.3s;}
a:hover {color:#020344;}
ul {margin:0px 28px; padding:0;}
ul ul {margin:0px 18px; padding:0;}
ul ul ul {margin:0px 18px; padding:0;}
ul li {margin:4px 4px 12px;}
ol {list-style: none; counter-reset: li; margin: 0px 16px;}
ol li {counter-increment: li;}
ol li::before {content: counter(li); color: #00b3d7; font-weight:600; display: inline-block; width: 1em; margin: 0.25em 0.85em 0.25em -1.85em; 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;}
input, textarea, select {border:none; background:white; color:#5A5A5A; font-weight:bold; font-size:12px; border:solid 1px #888888;}
input, textarea, option {padding:4px 4px; font-weight:bold; color:#5A5A5A; font-size:12px;}
select {padding:3px 4px;}
textarea {resize: none;}
input[type=checkbox] {margin-right:8px;}
input[type=radio] {margin-right:8px;}
.inputs {width:200px;} select.inputs {width:205px;}
.linputs {width:400px;} select.linputs {width:405px;}
.sinputs {width:150px;} select.sinputs {width:155px;}
.vsinputs {width:40px;} select.vsinputs {width:55px;}
.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;}

/* loading */
@keyframes rotate360 {
  to {transform: rotate(360deg);}
}
#Loading {margin:40px auto; height:100px; width:100px; background:url(../img/custom/loading.png) 50% 50% no-repeat; animation: 2s rotate360 infinite linear;}

/* editor */
* {font-family: 'Montserrat', sans-serif; font-size: 1rem; line-height: 1.4rem; font-weight:normal; font-style:normal; color:#333333;}

/* generic titles */
.eTitle1 {font-family: "Playfair", serif; font-size:3.2rem; line-height: 3.5rem; color:#020344;}
.eTitle2 {font-family: "Playfair", serif; font-size:2.3rem; line-height: 2.6rem; margin: 12px 0 16px; background:#03045e !important; background: linear-gradient(to right, #03045e 0%, #008bc2 33%, #00b3d7 66%, #9ee5f2 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent;}
.eTitle3 {font-family: "Playfair", serif; font-size:1.8rem; line-height: 2.1rem; margin: 12px 0 10px; color:#020344;}
.eTitle4 {font-family: "Playfair", serif; font-size:1.5rem; line-height: 1.8rem; margin: 8px 0 6px; color:#9ee5f2;}
.eTitle5 {font-size:1.3rem; line-height: 1.8rem; margin: 8px 0 6px; color:#00b3d7;}

/* generic contents */
.eContent1 {}
.eContent2 {color:#00b3d7; font-weight:bold;}
.eContent3 {color:#020344; font-weight:bold;}
.eContent4 {font-size:1.1rem;}
.eContent5 {font-style:italic;}

a.eLink1 {transition: color 0.3s, border 0.3s;}
a.eLink2 {font-weight:bold; transition: color 0.3s, border 0.3s;}
a.eLink1:hover, a.eLink2:hover {}

table.eTable{margin:4px 96px; border:solid 1px #797f9d;}
th.eTableHeader, td.eTableHeader {background:#797f9d; padding:4px; font-weight:bold; color: white;}
td.eTableLine0 {background:white; padding:4px; font-weight:bold;}
td.eTableLine1 {background:#EFEAF4; padding:4px; font-weight:bold;}

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

.etiquette {font-family: "Playfair", serif; display:inline-block; font-size: 1.1rem; letter-spacing: 0.15em; color: #fff; padding: 5px 8px; background-color: #00B3D7; text-transform:uppercase;}

/* parts */
/* buttonBlue  *
.IdeogramStyleButton {background-color: transparent; color: #00b3d7 !important; font-family: "Montserrat"; font-size: 1.13rem; font-weight: 600; font-style: normal; letter-spacing: 0.1em; text-decoration: none; text-transform:uppercase; padding: 12px 20px; margin-top:15px; border: 2px solid #00b3d7; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center;}
a.IdeogramStyleButton span {margin-left:20px; display: block; width: 28px; height: 28px; margin-bottom: -6px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS42NDciIGhlaWdodD0iMTcuMTA4IiB2aWV3Qm94PSIwIDAgMjEuNjQ3IDE3LjEwOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzMjEuNSAtMTY4MS43OTYpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzMzLjkyMSAxNjgyLjUwMSkiPjxsaW5lIHkxPSI4LjEzNCIgeDI9IjguMTM0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDcuNTYyKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBiM2Q3IiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTI2My41LDE2ODUuMTMzbDguNTE2LDguNTgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI2My41IC0xNjg1LjEzMykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwYjNkNyIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9nPjxwYXRoIGQ9Ik0xOS45NzgsMEgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzIxLjUgMTY5MC4zNDkpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMGIzZDciIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48L3N2Zz4=); background-repeat: no-repeat; background-size: contain;  animation: slide1 1s ease-in-out infinite; margin-left: 10px;}
a.IdeogramStyleButton:hover {color: #00b3d7; transform: scale(1.02); transition: transform 350ms ease-in;}

/* buttonLightBlue  *
.IdeogramStyleButtonLight {background-color: transparent; color: #9EE5F2 !important; font-family: "Montserrat"; font-size: 1.13rem; font-weight: 600; font-style: normal; letter-spacing: 0.1em; text-decoration: none; text-transform:uppercase; padding: 12px 20px; margin-top:15px; border: 2px solid #9EE5F2; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center;}
a.IdeogramStyleButtonLight span { margin-left:20px; display: block; width: 28px; height: 28px; margin-bottom: -6px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS42NDciIGhlaWdodD0iMTcuMTA4IiB2aWV3Qm94PSIwIDAgMjEuNjQ3IDE3LjEwOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzMjEuNSAtMTY4MS43OTYpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzMzLjkyMSAxNjgyLjUwMSkiPjxsaW5lIHkxPSI4LjEzNCIgeDI9IjguMTM0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDcuNTYyKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOWVlNWYyIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTI2My41LDE2ODUuMTMzbDguNTE2LDguNTgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI2My41IC0xNjg1LjEzMykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzllZTVmMiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9nPjxwYXRoIGQ9Ik0xOS45NzgsMEgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzIxLjUgMTY5MC4zNDkpIiBmaWxsPSJub25lIiBzdHJva2U9IiM5ZWU1ZjIiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48L3N2Zz4=); background-repeat: no-repeat; background-size: contain;  animation: slide1 1s ease-in-out infinite; margin-left: 10px;}
a.IdeogramStyleButtonLight:hover {color: #9EE5F2; transform: scale(1.02); transition: transform 350ms ease-in;}
*/

.IdeogramStyleButton {background: url(../img/arrows/blue.png) right 18px top 50% no-repeat transparent; background-size:auto 40%; color: #00b3d7 !important; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; text-transform:uppercase; padding: 12px 50px 12px 20px; border: 2px solid #00b3d7; border-radius: 50px;}
.IdeogramStyleButton:hover {color: #00b3d7; transform: scale(1.02); animation: slide1 1s ease-in-out infinite;}

.IdeogramStyleButton.LightBlue {background-image: url(../img/arrows/lightBlue.png); color: #9EE5F2 !important;}
.IdeogramStyleButton.LightBlue:hover {color: #9EE5F2;}

.IdeogramStyleButton.White {background-image: url(../img/arrows/white.png); color: white !important; border: 2px solid white;}
.IdeogramStyleButton.White:hover {color: #white;}

/*@keyframes slide1 {0%,  100% {transform: translate(0, 0);}  50% {transform: translate(5px, 0);}} */

@keyframes slide1 {
    from {background-position:right 25px top 50%;}
    to {background-position:right 5px top 50%;}
}

.IdeogramStyleButton + .IdeogramStyleButton {margin-left:20px;}

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

.HTMLHeader .darkBlueLine {text-align:center;}
.HTMLHeader .darkBlueLine .eTitle1 {text-align:center;}
.HTMLHeader .darkBlueLine .etiquette {margin:8px auto 0;}
.HTMLHeader.hasBanner .darkBlueLine {padding-bottom: 100px;}
.HTMLHeader .mainContent {padding:50px 0;}

.HTMLContent .mainContent {padding:50px 0;}
.HTMLContent .mainContent.eyed {background:url(../img/eye-bkgd.png) 100% 50% no-repeat;}
.HTMLContent .mainContent.flexContainer {display:flex; align-items: center; justify-content: center;}
.HTMLContent .mainContent.flexContainer.wrapped {flex-wrap:wrap;}
.HTMLContent .mainContent.flexContainer .smallBlockContent {flex:0.5;}
.HTMLContent .mainContent.flexContainer .blockContent {flex:1;}
.HTMLContent .mainContent.flexContainer .largeBlockContent {flex:1.5; margin:0 40px;}
.HTMLContent .mainContent .blockContent {margin:0 40px;}

.HTMLContent .uppedPictures {position: relative; top: -150px;}
.HTMLContent .uppedPicturesTemp {height:275px;}
.HTMLContent .uppedPicturesNext {position: relative; top: -160px;}

.HTMLContent .uppedPicturesSolo {position: relative; top: -50px; height:325px; overflow-y:visible;}

.HTMLContent .mainContent .text2Columns {column-count: 2; column-gap: 50px;}
.HTMLContent .mainContent .text2Columns p {padding: 0 0 8px;}
.HTMLContent .mainContent .text3Columns {column-count: 3; column-gap: 45px;}
.HTMLContent .mainContent .text3Columns p {padding: 0 0 8px;}
.HTMLContent .mainContent .text4Columns {column-count: 4; column-gap: 40px;}
.HTMLContent .mainContent .text4Columns p {padding: 0 0 8px;}
.HTMLContent .mainContent .blockPicture {max-height:275px; font-size:0; line-height:0; text-align:right;}
.HTMLContent .mainContent .blockPicture img {max-height:375px; position:relative; top:-50px;}
.HTMLContent .mainContent .blockSmallPicture {max-height:225px; font-size:0;}
.HTMLContent .mainContent .blockSmallPicture img {max-height:325px; position:relative; top:-50px;}


.darkBlueLine {background:#020344;}
.darkBlueLine * {color:white;}
.darkBlueLine a:hover {color:#e8f2fb;}
.darkBlueLine .eTitle2 {background-image: linear-gradient(to left, #008bc2 0%, #00b3d7 33%, #9ee5f2 66%, #f5f5f5 100%) !important;}
.darkBlueLine .etiquette {background:white; color: #00b3d7;}

.mediumBlueLine {background:#00b3d7;}

.lightBlueLine {background:#e8f2fb;}
.lightBlueLine .eTitle4 {color:#020344;}

.gradiantBlueLine {background-image: linear-gradient(to right, #03045E 0%, #008BC2 33%, #00B3D7 66%, #9EE5F2 100%)}
.gradiantBlueLine * {color:white;}

.archLeftLine {background:url(../img/lines/archLeft.png) 0% 100% no-repeat; background-size:auto 80%;}
.archRightLine {background:url(../img/lines/archRight.png) 100% 100% no-repeat; background-size:auto 80%;}

.ecoGreenLine {background:url(../img/lines/eco.png) no-repeat 50% 50% #e8fbec; background-size: contain;}
.ecoGreenLine .eTitle2 {color:#5fd377; background:none !important; -webkit-text-fill-color: unset;}

/* input : media popup */
.mediaPopupBkgd {position:fixed; left:0; top:0; background:#333333; opacity:0.75; filter:alpha(opacity=75); width:100%; z-index:10000;}
.mediaPopup {z-index:10001; padding:10px; background:white; position:fixed; top:0; left:0; text-align:center; max-width:96%; box-sizing: content-box; border-radius:16px;}
.mediaPopup .closeButton {width:0; height:0; overflow:visible; float:right; position:relative; top:0px; left:-50px; cursor:pointer; font-size:0;}
.mediaPopup .closeButton img {width:33px !important; height:33px !important; max-width:33px;}
.mediaPopup .mediaTitle {margin:4px 0 0; padding:2px 8px; text-align:center; color:#444444; font-weight:bold; background:white;}
.mediaPopup .message {margin-top:32px; font-size:24px; color:#333333; text-align:center;}
.mediaPopup .buttons {text-align:center; height:50px;}
.mediaPopup .buttons .greenButton {display:inline-block; margin:8px; text-align:center; color:white; font-size:20px; padding:8px; background:#89ca8c; min-width:100px;}
.mediaPopup .buttons .redButton {display:inline-block; margin:8px; text-align:center; color:white; font-size:20px; padding:8px; background:#ec5f65; min-width:100px;}
.mediaPopup .buttons .greenButton:hover, .mediaPopup .buttons .redButton:hover{text-decoration:none; opacity:0.8;}

/* input : page controler in control bar */
.genericPageEmptyController {font-size:0px; height: 0px;}
.genericPageController {margin:16px 0 32px; padding:0 4px; width:100%;}
.genericPageController .gpcBox {margin:0 auto;}
.genericPageController .gpcButton {padding:0; font-size:0; line-height:0; background-color: #e8f2fb; vertical-align:middle;}
.genericPageController .gpcButton a {font-size:0; line-height:0;}
.genericPageController .gpcSelected {line-height:17px; font-weight:bold; padding: 14px 17px; font-size:16px; background-color:#00B3D7; color:white; font-size:18px; text-decoration:none; display:inline-block;}
.genericPageController .gpcLink {line-height:17px; color:#020344; padding: 14px 17px; text-decoration:none; font-size:16px; font-weight:600; display:inline-block; transition: color 0.3s;}
.genericPageController .gpcLink:hover {text-decoration:none; color:#00B3D7;}
.genericPageController .gpcSpacer {padding:0 2px; color: #021271; background-color: #e8f2fb; text-decoration:none;}
.genericPageController .gpcLPage {padding:0 2px; color:#021271; background-color: #e8f2fb; text-decoration:none;}
.genericPageController .gpcRPage {padding:0 2px; color:#021271; background-color: #e8f2fb; text-decoration:none;}
.genericPageController .gpcPage {padding:0 2px; color:#021271; background-color: #e8f2fb; text-decoration:none;}

/* header  */
.PageHeader {}
.PageHeader .header {background-size:cover; height:200px;}
.PageHeader .top {display:flex;}
.PageHeader .top .logo {margin:30px 0 0; font-size:0; line-height:0;}
.PageHeader .top .menus {flex:3; display:flex; margin:60px 20px 0;}
.PageHeader .top .menus .menu {flex:1; text-align:center;}
.PageHeader .top .menus span.menu {color:#e8f2fb;}
.PageHeader .top .menus a.current {opacity:0.5;}
.PageHeader .top .menus * {font-size:1.2rem;}
.PageHeader .top .menus .language {border:solid 1px white;}
.PageHeader .top .menuOpener {display:none;}
.PageHeader .top .anniversary {font-size:0; line-height:0;}

#MobileMenu {display:none;}

/* footer */
.PageFooter {}
.PageFooter .menus {display:flex; text-align:center; padding-top: 80px;}
.PageFooter .menus a {flex:3; text-transform:uppercase; font-size:1.05rem; font-weight:bold; padding:20px 0; letter-spacing: 0.25rem;}
.PageFooter .menus a:first-of-type {flex:2; text-align:left;}
.PageFooter .menus a:last-of-type {flex:2; text-align:right;}

.PageFooter .logo {margin:80px 0; height:55px; overflow:visible; text-align:center; border-bottom:solid 1px rgba(255, 255, 255, 0.3); }

.PageFooter .contacts {display:flex; margin:80px 0;}
.PageFooter .contacts .address {flex:1; text-align:left;}
.PageFooter .contacts .question {flex:1; text-align:center;}
.PageFooter .contacts .social {flex:1; text-align:right;}
.PageFooter .contacts .social .networkIcon {margin-left:20px;}

.PageFooter .bottom {display:flex; padding:0 0 20px;}
.PageFooter .bottom .altmenus {vertical-align:middle;}
.PageFooter .bottom .altmenus a {font-size:12px; letter-spacing: 0.15em;}
.PageFooter .bottom .separator {flex:3; max-width:100%; border-bottom:solid 1px rgba(255, 255, 255, 0.3); height:12px; margin:0 20px;}
.PageFooter .bottom .copy {text-align:right; vertical-align:middle; font-size:12px; letter-spacing: 0.15em;}

/* content */
.PageContent {}
.PageContent .pageBanner {width: 90vh; margin: -100px auto 25px;}

/* home portal */
.PageContent .homePortal {}
.PageContent .homePortal .content1Block .mainContent {display:flex; align-items: center; justify-content: center;}
.PageContent .homePortal .content1Block .mainContent .picture {max-width:33%; font-size:0; line-height:0;}
.PageContent .homePortal .content1Block .mainContent .content {flex:2; padding:30px; max-width:50%;}
.PageContent .homePortal .content1Block .mainContent .content .button {padding:20px 0;}

.PageContent .homePortal .content3Blocks {margin: 50px 0;}
.PageContent .homePortal .content3Blocks .mainContent {display:flex;}
.PageContent .homePortal .content3Blocks .mainContent .block {flex:1}
.PageContent .homePortal .content3Blocks .mainContent .block:first-of-type {margin-right:4%;}
.PageContent .homePortal .content3Blocks .mainContent .block:last-of-type {margin-left:4%;}
.PageContent .homePortal .content3Blocks .mainContent .block .header {font-size:0; margin:0 0 20px; border-bottom: solid 1px #cccccc;}
.PageContent .homePortal .content3Blocks .mainContent .block .header .picture {display:inline-block; width:20%; font-size:0; line-height:0;}
.PageContent .homePortal .content3Blocks .mainContent .block .header .eTitle1 {display:inline-block; width:80%; padding-left:20px; position:relative; top:-15px;}
.PageContent .homePortal .content3Blocks .mainContent .block .button {padding:20px 0;}

/* generic share */
.PageContent .HTMLContent .share {font-family: "Playfair", serif; font-size:2.3rem; line-height: 2.6rem; color:white; text-align:center; font-style:italic;}
.PageContent .HTMLContent .share .img {margin:0 12px;}
.PageContent .HTMLContent .share a.img {transition: opacity 0.3s ease;}
.PageContent .HTMLContent .share a.img:hover {opacity:0.5;}

/* articles generic */
.articles .articleItem {padding:20px; position:relative;}
.articles .articleItem .header {font-size:0; display:flex;}
.articles .articleItem .header .banner {width:174px; margin-right:20px; font-size:0px;}
.articles .articleItem .header .date {flex: 2; border-bottom: solid 1px white; padding:0;}
.articles .articleItem .type {display:inline-block; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: 0.03rem; background:white; color:#020344 !important; margin:15px 0 0; padding:4px 6px;}
.articles .articleItem .eTitle2 {display:block;}
.articles .articleItem .summary {margin-right:50px;}
.articles .articleItem .link {position:absolute; bottom: 20px; right:20px; width:40px;}
.articles .articleItem .link a {display:inline-block; background: url(../img/arrows/white.png) right 0 top 50% no-repeat transparent; background-size:30px auto; width:100%;}

/* articles home portal */
.PageContent .homePortal .articles .mainContent {font-size:0;}
.PageContent .homePortal .articles .mainContent .content {display:inline-block; width:50%; vertical-align:top; padding:20px 40px 20px 0;}
.PageContent .homePortal .articles .mainContent .content .button {padding:20px 0;}
.PageContent .homePortal .articles .mainContent .articleItem {display:inline-block; width:46%; vertical-align:top; margin:4% 0 4% 4%;}

/* articles page */
.PageContent .HTMLHeader .RSS {}
.PageContent .HTMLContent.articles {margin: -100px auto 0;}
.PageContent .HTMLContent.articles .mainContent {padding:0;}

/* articles page latest articles */
.PageContent .HTMLContent.articles .latestArticle {max-width:60%; margin-bottom:40px;}
.PageContent .HTMLContent.articles .latestArticle .articleItem {width: 100%; background:url(../img/eye-bkgd.png) 100% 50% no-repeat #00b3d7; background-size:auto 80%; padding:40px;}
.PageContent .HTMLContent.articles .latestArticle .articleItem * {color:white;}
.PageContent .HTMLContent.articles .latestArticle .articleItem .header .banner {width:340px;}
.PageContent .HTMLContent.articles .latestArticle .articleItem .header .banner img {width:100%;}
.PageContent .HTMLContent.articles .latestArticle .articleItem .header .date .day {float:left; font-size: 3.6rem; line-height: 2.8rem;}
.PageContent .HTMLContent.articles .latestArticle .articleItem .header .date .monthYear {margin-left: 64px; font-size: 1.5rem; line-height: 1.34rem;}

/* articles page article list */
.PageContent .HTMLContent.articles .articleList {display:flex; flex-wrap: wrap; justify-content: stretch;}
.PageContent .HTMLContent.articles .articleList .articleItem {flex: 1 0 31%; margin:1%; min-width:31%; max-width:31%; align-self: stretch;}
.PageContent .HTMLContent.articles .articleList .articleItem .header {border-bottom: solid 1px white; padding-bottom:12px;}
.PageContent .HTMLContent.articles .articleList .articleItem .header .banner {width:260px;}
.PageContent .HTMLContent.articles .articleList .articleItem .header .banner img {width:100%;}
.PageContent .HTMLContent.articles .articleList .articleItem .header .date {border-bottom:none;}
.PageContent .HTMLContent.articles .articleList .articleItem .header .date .day {font-size: 2rem; line-height: 1.8rem;}
.PageContent .HTMLContent.articles .articleList .articleItem .header .date .monthYear {font-size:1.1rem; line-height:1.1rem;}
.PageContent .HTMLContent.articles .articleList .articleItem .header .date .monthYear::first-letter, .PageContent .HTMLContent.articles .latestArticle .articleItem .header .date .monthYear::first-letter {text-transform: uppercase;}
.PageContent .HTMLContent.articles .articleList .articleItem .eTitle2 {font-size:1.4rem; line-height:1.6rem;}

.PageContent .HTMLContent.articles .articleList .articleItem.lightBlueLine .header {border-bottom: solid 1px #020344;}
.PageContent .HTMLContent.articles .articleList .articleItem.lightBlueLine .type {background:#020344; color:white !important;}
.PageContent .HTMLContent.articles .articleList .articleItem.lightBlueLine .link a {background-image: url(../img/arrows/darkBlue.png);}

/* article page */
.PageContent .HTMLContent.article .articleItem {width:1000px; margin:0 auto;}
.PageContent .HTMLContent.article .articleItem .header {display:flex; align-self: stretch;}
.PageContent .HTMLContent.article .articleItem .header .banner {width:340px; font-size:0; margin-right:40px;}
.PageContent .HTMLContent.article .articleItem .header .banner img {width:100%;}
.PageContent .HTMLContent.article .articleItem .header .date {border-bottom: solid 1px #020344; flex:1; max-width:100%;}
.PageContent .HTMLContent.article .articleItem .header .date .backButton {float:right;}
.PageContent .HTMLContent.article .articleItem .header .date .backButton img {width:80%;}
.PageContent .HTMLContent.article .articleItem .header .date .day {float:left; font-size: 4.6rem; line-height: 3.2rem;}
.PageContent .HTMLContent.article .articleItem .header .date .monthYear {margin-left: 72px; font-size: 2rem; line-height: 1.5rem;}

.PageContent .HTMLContent.article .articleItem .content {margin-top:32px;}

/* html page layout */
.PageContent .HTMLContent .squareBoxes {font-size:0; display:flex; flex-wrap: wrap;}
.PageContent .HTMLContent .squareBoxes .box {flex:1; min-width:50%; max-width:50%; padding:50px;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+1) {background:#7dd3e3;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+2) {background:#00b3d7;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+3) {background:#008bc2;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+4) {background:#0c0e79;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+5) {background:#020344;}
.PageContent .HTMLContent .squareBoxes .box * {color:white;}
.PageContent .HTMLContent .squareBoxes .box .number {display:inline-block; font-size:2.5rem; line-height:1.4em; background:white; padding:8px; border-radius:50px; min-width:70px; text-align:center;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+1) .number {color:#7dd3e3;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+2) .number {color:#00b3d7;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+3) .number {color:#008bc2;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+4) .number {color:#0c0e79;}
.PageContent .HTMLContent .squareBoxes .box:nth-child(5n+5) .number {color:#020344;}

.PageContent .HTMLContent .columnBoxes {font-size:0; display:flex; flex-wrap: wrap;}
.PageContent .HTMLContent .columnBoxes .box {flex:1; min-width:30%; max-width:30%; margin:1.5%;}
.PageContent .HTMLContent .columnBoxes .box.larger {flex:2; min-width:63%; max-width:63%; margin:1.5%;}
.PageContent .HTMLContent .columnBoxes .box.on2 {min-width:47%; max-width:47%;}
.PageContent .HTMLContent .columnBoxes .box.full {min-width:100%; max-width:100%;}
.PageContent .HTMLContent .columnBoxes .box .header {font-size:1.5rem; font-family: "Playfair", serif; color: #00B3D7; padding:0 0 12px; margin:0 0 20px; border-bottom: solid 1px #cccccc;}
.PageContent .HTMLContent .columnBoxes .box .header img.picture {display:inline; max-height: 40px; width: auto; margin-right: 20px; vertical-align:-8px;}


.PageContent .HTMLContent .iconedList .line {padding: 0 0 20px;}
.PageContent .HTMLContent .iconedList .line .picture {display:inline-block; margin-right:10px; max-width:44px; vertical-align:top;}
.PageContent .HTMLContent .iconedList .line .title {display:inline-block; min-height:44px; vertical-align:middle;}

.PageContent .HTMLContent ul.columnBulletList {columns: 4; column-gap: 80px; list-style-type: none;}
.PageContent .HTMLContent ul.columnBulletList.cols3 {columns: 3;}

.PageContent .HTMLContent ul.columnBulletList li {text-transform:uppercase; font-size:1.2rem; background:url(../img/blue-line-bullet.jpg) no-repeat; padding: 12px 0 12px 40px;}
.PageContent .HTMLContent ul.columnBulletList li .big {font-weight:bold; font-size:1.6rem; line-height:1rem;}

/* productsDigital */
.PageContent .HTMLContent .productBoxes {flex-wrap:wrap; align-items:start;}
.PageContent .HTMLContent .productsBox {flex:1; text-align: center; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); padding: 30px 30px 45px; max-width: 29%; min-width: 29%; margin: 1% 2%; border-radius: 25px;}
.PageContent .HTMLContent .productsBox h3 {color: #008BC2; !important}
.PageContent .HTMLContent .productsBox p {color: #4A3D7B !important;}

/* Team display extension */
.mainContent.team {display:flex;}
.mainContent.team .picture {width:350px; margin-right: 40px;}
.mainContent.team .content {flex:1;}
.mainContent.team .content .separator {border-bottom: solid 1px #cccccc; padding: 0 0 16px; margin: 0 0 8px;}
.mainContent.team .content .contacts {border-left:solid 0.15em #020344; padding-left:16px; line-height:1.1em !important; margin-top:16px !important; font-weight: 600;}

.memberCard {margin: 0 auto; max-width:900px; border-radius:40px; padding:40px; font-size:0; display:flex;}
.memberCard .picture {flex:1; margin-right:40px; max-width:280px;}
.memberCard .data {flex:1;}
.memberCard .eTitle2 {background: #03045e; background: linear-gradient(to right, #020344 0%, #008bc2 100%) !important;-webkit-background-clip: text !important; -webkit-text-fill-color: transparent;}
.memberCard .data .jobtitle {margin:20px 0; color: #ffffff; font-size:1.2rem;}
.memberCard .data .phone {margin:20px 0; border-left: solid 2px #020344; padding-left:16px; color: #ffffff; font-weight:700; font-size:1.3rem;}
.memberCard .data .button {margin:40px 0;}

/* Product list */
.PageContent .HTMLContent.products {margin: -150px auto 0;}
.mainContent .productList {font-size:0;}

.mainContent .productList .categories {margin-top:32px;}
.mainContent .productList .categories .IdeogramStyleButton {background-image:none !important; padding: 12px 20px 12px 20px !important; text-align:center;}
.mainContent .productList .categories .IdeogramStyleButton[href="#"] {border-color:white; color:white !important;}

.mainContent .productList .productItem {display:inline-block; width:29%; margin:2%;}
.mainContent .productList .productItem .picture {font-size:0; line-height:0;}
.mainContent .productList .productItem .picture img {width:100%; height:auto;}
.mainContent .productList .productItem .content {background:url(../img/arrows/white.png) 95% 50% no-repeat #00b3d7; background-size:10%; cursor:pointer;}
.mainContent .productList .productItem .content .client {padding:16px 16px 8px; color:white; font-size:1.5rem; font-family: "Playfair", serif; font-weight:bold;}
.mainContent .productList .productItem .content .product {padding: 0 16px 16px; color:white;}
.mainContent .productList .productItem:hover .content {animation: slide1 1s ease-in-out infinite;}

.mainContent.product {display:flex;}
.mainContent.product .content {flex:1; background:#e8f2fb; padding:30px;}
.mainContent.product .content img.geoIcon {max-height:20px;}
.mainContent.product .content .backButton {float:right; margin: 0 0 20px 20px; text-align:right;}
.mainContent.product .content .backButton img {width:80%;}

.mainContent.product .visuals {flex:2; text-align:center;}
.mainContent.product .visuals .picture {font-size:0; line-height:0; margin:0 0 20px;}
.mainContent.product .visuals .picture img {width:800px;}

/* Reference list */
.mainContent .referenceList {display:flex; flex-wrap:wrap;}
.mainContent .referenceList .category {flex:1; min-width:31%; max-width:31%; margin:1%;}

/* Case studies */
.mainContent .caseStudyList {display:flex; flex-wrap:wrap;}
.mainContent .caseStudyList .caseStudyItem {flex:1; min-width:30%; max-width:30%; background:#e8f2fb; padding:20px; border-radius:20px; text-align:center; margin:0 3% 3% 0;}
.mainContent .caseStudyList .caseStudyItem .button {padding:20px 0;}

/* History */
.history {max-width:900px; margin:0 auto;}
.history .line {display:flex; align-items:center; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 196px, white 197px, white 199px, rgba(0, 0, 0, 0) 200px, rgba(0, 0, 0, 0) 100%) repeat-y;}
.history .line div {padding:20px 0;}
.history .line:first-child div {padding:0 0 20px;}
.history .line:last-child div {padding:20px 0 0;}
.history .line .year {min-width: 140px; font-size:1.8rem; text-align:right;}
.history .line .symbole {min-width: 100px; text-align:center; padding-left:20px !important; padding-right:20px !important; font-size:0;}
.history .line .description {flex:1; font-size:1.1rem;}

/* visualProduct */
.productsVisual {}
.productsVisual img {display:inline-block; width: 30%; margin: 1%;}