body, html {margin:0; padding:0;  }
html {scroll-behavior: smooth; }


body {color:#170a34; font-family: 'roboto', sans-serif; font-weight:400; font-size:13px;
background-position:left top; background-repeat: no-repeat;background-attachment:fixed;
background-color: #ffffff;height: 100%}



div {display:block}

.flexContCol {display: flex;  flex-direction: column;}

.colored { color:#ffff00}
.messbox { display:block;margin:0 0 20px 0}
.messbox span i { display: inline-block; font-size:25px; color:#5ed17d; margin:0 5px 0 0}
.messbox span i.error {color: inherit;}
.messbox span { font-size:20px; display:block; margin:15px 0}
.messbox p { margin-bottom:15px;}
.messbox a {}

.error {color:#F00}

::selection {  background: #33548b; color:#ffffff /* WebKit/Blink Browsers */}
::-moz-selection {  background: #33548b;color:#ffffff /* Gecko Browsers */}
 

.offline { display: flex;background:#170a34;
    vertical-align: middle;
    text-align: center; height:100%}
	
.offline .logo {    margin: auto;}	
.offline h1 { color:#ffffff; margin-top:25px; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:1px }	

/*typo*/
h1,h2,h3 { display:block; margin:0; padding:0 0 10px 0; font-family: 'Roboto Condensed'; text-transform:uppercase}
h1 {padding:0; font-weight:400; font-size:22px; line-height:25px; margin-bottom:8px}
h2 { font-size:35px;  padding:0 0 10px 0; line-height:35px;}
h3 { font-size:15px; }
h4 { font-size:15px;  padding:0 0 10px 0; margin:0}
.subTitle {font-size:18px; line-height:26px; display:block;}
* b, * strong {font-weight: bold}
p {margin:0 0 20px 0 ; padding:0; }
.description {color:#170a34; line-height:22px}
p.center {margin:0 auto 20px auto ; padding:0; text-align:center }
.tCenter, .tCenter * {text-align:center}

ul {display:block; margin:0; padding:0; border-left:0px solid #f1f1f1}
ul li { display:block; padding:3px 0 3px 0; list-style:circle}
ul li i {float:left; margin:2px 0 0 -12px; font-size:11px}
/*elements*/
hr {display:block; margin:20px 0 18px 0; width:100%; border:0; border-top:1px solid #f2f3f2}
hr.full {display:block; margin:0; width:100%;}
hr.sep {border:0}
img {max-width:100%}
a, a:visited { text-decoration:none; cursor:pointer}
a.small {border-bottom:1px dotted #170a34; font-size:11px; color:#170a34; display:inline-block; padding-bottom:3px; margin:6px 0 0 0}
a.small:hover {color:#98d4da}

a.small i {display:inline-block; width:15px;}
a.color{ color:#455d8b; border-bottom:1px dotted #455d8b; display:inline-block; padding-bottom:1px}

a.linkIcon, a.linkIcon:visited {display:inline-block; color:#170a34; font-size:13px }
a.linkIcon i {display:inline-block; width:22px}
a.linkIcon:hover , a.linkIcon.active{color:#ff0000}
.icoRound { display:inline-block; padding:7px; width:14px;   text-align:center; background:#33548b; border-radius:8px;}
.icoRound i {line-height:14px;font-size:16px;color:#fff;}
.icoRound2 i {line-height:14px;font-size:18px;color:#33548b;}


/*BLOC DATE TITRE*/
.vAlignCenter {vertical-align:middle}
.blocDate, .blocTitre {display:inline-block; padding:10px 7px 5px 6px;  vertical-align:middle;border-radius:10px;}
/*.blocTitre {width: calc(100% - 80px); padding:0 0 0 2px ; margin-bottom:20px  }*/
.blocTitre {width: calc(100% - 0px); padding:0 0 0 2px ; margin-bottom:20px  }

/*.blocDate { height:54px; max-height:54px; width:46px; background:#98d4da; font-weight:500; text-align:center;  color:#ffffff; display:inline-block; margin:0 10px 20px 0}*/
.blocDate { height:52px; max-height:52px; width:46px; background:#170a34; font-weight:500; text-align:center;  color:#fcfe00; display:inline-block; margin:0 10px 20px 0}

.blocDate span { display:block;font-size:15px; line-height:27px; letter-spacing:-0.5px}
.blocDate span.day {font-size:33px; letter-spacing:-2px; font-weight:400; color:#fcfe00 }
.organisator {color:#170a34; font-size:11px;}
.organisator a { display:inline-block;border-bottom:1px dotted #170a34; color:#0d1419}

.logo {    display: block;
    margin: -230px auto 10px auto;
    max-width: 90%;
    border-radius: 24px;
   /*border: 5px solid #fff;*/}


/*BOUTON TAGS*/
.tag, .buton {display: inline-block; padding:10px 16px; border-radius:4px; border:2px solid #170a34; font-size:13px; line-height:12px; letter-spacing:0.03em;  }
.tag i { color:#170a34; display:inline-block; margin-right:6px; font-size:13px;}
.buton { background:#170a34; border:1px solid #170a34; margin:0 10px 10px 0; color:#ffffff !important; font-weight:500; cursor:pointer; font-size:14px; line-height:14px;}
.buton i { color:#ffffff; display:inline-block; margin-right:6px; font-size:13px;}
.buton:hover, .buton:hover i { background:#ffffff; color:#170a34 !important}
.butonInv { background:#fff; border:1px solid #170a34; margin:0 10px 10px 0; color:#170a34 !important; font-weight:500; cursor:pointer; font-size:14px; line-height:14px;}
.butonBig {}

/*.add-button, .big-button, .add-button-inv, .add-button-inv2, .main-button {
    position: sticky; bottom: 10px;  background-color: #33548b; border: 0;  margin: auto; padding: 10px 20px; color: #fff;
    font-size: 12px;    font-weight: 600;    border-radius: 20px;    flex-shrink: 0;    z-index: 1;    cursor: pointer; border: 2px solid #33548b;
}*/

 .main-button {
    background-color: #fff; border: 0;  margin: auto; padding: 10px 0; color: #000;text-transform:uppercase;letter-spacing:1px;
    font-size: 12px;    font-weight: 600;   cursor: pointer; border: 1px solid #fff;
}
 .main-button:hover {background-color: #000; color: #fff;}

/*.big-button {padding:14px 30px; font-size:19px !important;}
.main-button {display:block; margin:0; border-radius:0; width:100%; text-transform:uppercase; letter-spacing:1px; padding:14px 0; text-align:center}

.add-button:hover , .big-button:hover,.main-button:hover  {color:#33548b;  background-color:rgba(255,255,255,0.9)}
.add-button-inv  { background-color:transparent; color:#fff; border:1px solid #fff; font-weight:normal; font-size:13px !important}
.add-button-inv:hover   { background-color:#fff; color:#33548b}
.add-button-inv2 { background-color:transparent; color:#33548b; border:1px solid #33548b; font-weight:normal; }*/

.main-button
{-moz-transition: all 0.3s ease-in;  -webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}	


.langChoice {text-align:center}
.langChoice .main-button {display:inline-block; width:22%; margin:8px 1%; min-width: 180px;}
	
	
/*bloc*/
.content {background:#fff; max-width:100%; margin:auto; padding:0px; overflow:hidden; width:1150px; border-radius: 30px;}
.bloc,.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67 , .bloc-25, .blog-50, .blog-33, .blog-25 {display:inline-block; margin:0; padding:0; vertical-align:top}
.bloc-25 {width:25%}
.bloc {width:100%}
.bloc-33 {width:33.33%}
.bloc-40 {width:35%}
.bloc-60 {width:65%}
.bloc-67 {width:66.66%}
.bloc-50 {width:50%}
.inner {display:block; padding:40px}
.blog-50 { width:calc(50% - 10px); margin:0 10px 10px 0}
.blog-33 { width:calc(33.33% - 10px); margin:0 10px 10px 0}
.blog-25 { width:calc(25% - 10px); margin:0 10px 10px 0}

div.topContainer, div.blocsContainer {display: flex;  flex-direction: row ;}
div.topContainer section,  div.blocsContainer section {height: auto;}

hr.sectionSep {display:block; width:300px; max-width:90%; margin:50px auto; border:0; border-top:3px dotted #fff; opacity:0}

.menuVid {display:block; margin-bottom:10px; margin-top:10px;}
.menuVid a {display:inline-block; margin-right:25px; color:#fff; font-family: 'Roboto Condensed'; text-transform:uppercase }
.menuVid a sup { text-transform:none; display:inline-block; margin-left:4px}
.menuVid a.inactive {opacity:0.90}

.icoUp { position: fixed; right:30px; bottom:40px;cursor:pointer; display:none; z-index:600}
.icoUp:hover { opacity:0.8}



/*global effect*/
.borderRight {border-right:1px solid #f2f3f2; margin-right:-1px;} 
.borderLeft {border-left:1px solid #f2f3f2; margin-left:-1px;} 

.shadow  {box-shadow: 0px -1px 40px -1px rgba(45,60,89,0.3);
-webkit-box-shadow: 0px -1px 40px -1px rgba(45,60,89,0.3);
-moz-box-shadow: 0px -1px 40px -1px rgba(45,60,89,0.3);}
.shadow2  {-webkit-box-shadow: 0px 0px 36px 16px rgba(255,255,255,0.52); 
box-shadow: 0px 0px 36px 16px rgba(255,255,255,0.52);}
.floatR {float:right}
.anim-x {animation: slideX .6s both;}
.anim-opa {animation: opa 1.6s both;}
.anim-opa-long {animation: opa 3.6s both;}

.chatCont {padding:25px 0 0 0}
.videoCont {border-right: 1px solid #f0f0f0; margin-right: 25px;}
.videoCont .inner {padding: 25px 0 25px 25px}

iframe.video {border: 0; margin-bottom:25px; max-width:100%; width:720px; height:405px}

@keyframes slideX {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
}


@keyframes opa {
  0% {
    opacity: 0;
  }
}


.anim-y {
  animation: slideUp .6s both;
}

.anim-y:nth-child(2) {
  animation-delay: 0.28s;
}

.anim-y:nth-child(3) {
  animation-delay: 0.42s;
}

.anim-y:nth-child(4) {
  animation-delay: 0.56s;
}

.anim-y:nth-child(5) {
  animation-delay: 0.7s;
}

.anim-y:nth-child(6) {
  animation-delay: 0.84s;
}

.anim-y:nth-child(7) {
  animation-delay: 0.98s;
}

.anim-y:nth-child(8) {
  animation-delay: 1.12s;
}

.anim-y:nth-child(9) {
  animation-delay: 1.26s;
}

.anim-y:nth-child(10) {
  animation-delay: 1.4s;
}


.anim-y:nth-child(11) {
  animation-delay: 1.54s;
}


.anim-y:nth-child(12) {
  animation-delay: 1.68s;
}

.anim-y:nth-child(13) {
  animation-delay: 1.82s;
}


.anim-y:nth-child(14) {
  animation-delay: 1.96s;
}


.anim-y:nth-child(15) {
  animation-delay: 2.10s;
}


.anim-y:nth-child(16) {
  animation-delay: 2.24s;
}


.anim-y:nth-child(17) {
  animation-delay: 2.38s;
}


.anim-y:nth-child(18) {
  animation-delay:2.52s;
}


.anim-y:nth-child(19) {
  animation-delay: 2.66s;
}
.anim-y:nth-child(20) {
  animation-delay: 2.80s;
}

.anim-y:nth-child(21) {
  animation-delay: 2.94s;
}



/*modeul team*/
.teamContainer {}
.teamContainer article {display:inline-block; padding:1%; width:18%; vertical-align:top}
.teamContainer article .photo { display:block; margin:0 auto 15px auto; background:#fff; border-radius:100%; padding:2px; border:1px solid #f0f0f0; max-width:90%; width: 142px;}
.teamContainer article .photo.grey  {filter: grayscale(100);}
/*.teamContainer article:hover .photo.grey {filter: grayscale(0);}*/
.teamContainer article .societe, .teamContainer article .poste { font-weight:300; font-size:11px; opacity:0.95}
.teamContainer article .societe {text-transform:uppercase; margin:0}
.teamContainer article .email  { margin:5px 0; font-size:10px;opacity:0.95}



/*GLOBAL EFFECT*/
li, a, .buton, .butonRed,.teamContainer article *
 {-webkit-transition: all 0.2s; -moz-transition: all 0.2s ; -o-transition: all 0.2s ; transition: all 0.2s ; }


.logos img {display: block; margin:20px auto 0 auto; height:70px}



@keyframes slideUp {
  0% {
    transform: translateY(76px) scale(0.92);
    opacity: 0;
  }
}


.show880, .show680, .show540 {display:none}
/*responsive*/
@media (max-width: 880px) {
.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67 {display:block !important; width:auto !important}
div.topContainer, div.blocsContainer {display: flex;  flex-direction:column ;}
.blocsContainer .bloc-33 {width:100%}
.hide {display:none !important}

.present * {text-align:center !important}
.flexContCol {display:block;  flex-direction:unset !important}
.frame {height:550px}
.chatCont {padding:25px}
iframe.video {height:385px}
.videoCont {border-right: 0px solid #eee;}
.videoCont .inner {padding: 25px 25px 25px 25px}
video { height:300px !important}
.logoS { margin:20px auto 40px auto !important}
.teamContainer article {width:30%}
.inner {padding:20px !important; width:auto !important}
.content {border-radius: 0;}
.hide {display:none}
.gotoCenter {margin-left:auto !important; margin-right:auto !important}
.show880 {display: block}
}


@media (max-width: 680px) {
.show680 {display:block}
.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67, .blog-50, .blog-33 {display:block; width:auto; margin-right:0}
iframe.video {height:300px}
video { height:280px !important}
.teamContainer article {width:45%}

}


@media (max-width: 540px) {
.show540 {display:block}
}