/* STYLE */
/* reset */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Montserrat', sans-serif;}

/*************************************************
****************** DESKTOP *****************
*************************************************/

body {font-size:18px; color: #000000; background: #fff;}
.wrap {width:1000px; margin:auto;}

header {width:100%;}
/* .head-sup {width:100%; background:#000033;} */
.head-sup h1 {font-weight: 300; display:block; text-align:center; color:#ffffff; font-size:20px; letter-spacing: 4px;padding: 9px 0px; box-sizing: border-box;}
.webconf {/*background: #3c1b5c;*/ text-align:center; margin:auto; color:#fcd547;padding:4px 0px; box-sizing: border-box;  background-image: -moz-linear-gradient( -175deg, rgb(0,51,102) 0%, rgb(102,0,153) 100%);
  background-image: -webkit-linear-gradient( -175deg, rgb(0,51,102) 0%, rgb(102,0,153) 100%);
  background-image: -ms-linear-gradient( -175deg, rgb(0,51,102) 0%, rgb(102,0,153) 100%);}
.finances {text-align: center; margin:auto; font-size:60px; font-weight:900; color:#fcd547; line-height: 1; margin-bottom: 10px;}
#subtitle{text-align: center; margin:auto; font-size:20px; font-weight:600; color:#fcd547; padding-top: 20px;}
.new_title{padding: 20px 0;}
.title_date{padding: 20px 0; text-align: center; font-weight: bold; font-size: 25px;}
.color_y span {color:#fcd547;}
.head-sub {width:100%; text-align: center;/* padding-top: 10px; font-size: 14px;*/ /*background-image: url(https://cdn.publications-agora.com/maquettes_packs/pack-2203-webconf-hotlist/sign_up/img/ban.png); height:600px; color:#ffffff;background-position: bottom center; background-size: cover;*/}
.head-sub img { display: block; width: 100%; margin: auto; text-align: center; }
.head-sub h1 {color:#ffffff; text-align: center; width: 1000px; margin: auto; font-size: 40px; font-weight: 400;}
.head-sub span {text-align: center;}
#horsemen {width:653px; display: block; margin: auto;}
.title {font-weight:bold; font-size:35px; display:block; text-align: center;}
.decalew {display:block; margin-left: 55px;}

/* CONTENT */
.content { display: block; margin: auto; width: 100%; font-weight:500;line-height: 1.8; }
.quoi-quand { display: block; margin: 75px auto; text-align: center; width: 90%; font-size: 18px; }
.quoi-quand ul.aln-left { text-align: left; }
.bg-font { font-size: 40px; }
.color1 { color: #A70000; }
.color2 { color: #ffffff; }
.apple { position: relative; top: -10px; }
.bg-color { background: #eeeced!important; }
.bg-color1 { background: #000!important; }
.ou { display: block; margin: auto; text-align: center; width: 1000px; padding: 80px; }
.ou-img { float: left; width: 40%; display: block; }
.ou-img img { width: 100%; }
.zero-img img { width:55%; }
.ou-text { float: right; width: 55%; display: block; text-align: left;}
.aln-center { text-align: center; display: block; margin: auto; }

/*.zero-text { position: relative; top: 25px; }*/



/*VIDEO*/
#video {/*background-color: rgba(0, 0, 0, 0.5);*/ width:80%; margin: 25px auto 39px auto; text-align: center; border: 1px solid lightgray; }
.red { color: red; }
.blue { color: #0086b3; }
.green { color: #2c585b; }
ul { }
ul li { padding: 10px; padding-left: 0px; }
.content-right {width:100%; /*float:left;background:#eeeeee;*/ /*border-radius: 10px; margin-bottom: 30px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.18); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.18); box-shadow: 0 1px 4px rgba(0,0,0,0.18);*/}
.headline {width:100%;}
.headline-title {background:#480f8a; height:72px; width:100%;}
.headline-title span {color:#ffffff; font-weight:bold; font-size:34px; text-align: center; display:block; padding: 14px 0px; box-sizing: border-box;}
.headline-content {width: 90%; margin: 15px auto 45px;}
.guru-content {width:100%;}
.guru-content ul {padding:0;}
.guru-content ul li {list-style-type: none; font-size:12px; display: inline; width: 108px; float: left; margin: 13px; text-align:center; color:#480f8a;}
.guru-content ul li span {font-weight:bold; text-transform: uppercase;}
.guru {width:80px;}
.headline-content strong { font-size: 36px; display: block; margin: auto; text-align: center; }
.headline-arrow {background-image: url(https://cdn.publications-agora.com/maquettes_packs/pack-2203-webconf-hotlist/sign_up/img/arrow_bg.png); background-repeat: no-repeat; background-position: center right;}

/*FORM*/
.form-up-section {width:100%; background:#000000; padding-bottom:30px; box-sizing: border-box; }
.form-section-content {width:90%; margin: auto; margin-top:-50px; display: block; position: relative; background:#ffffff; border-radius: 6px;-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px; }
.reduce-mrg {  position: relative; top: -150px; margin-bottom: -150px; }
#form-content { width: 90%; margin: auto;}
#form-content label { font-size:13px;font-weight: 600;}
#form-mobile {font-weight: 900;}
#form-title {text-align: center;font-size:25px; margin:15px 0px;font-weight: bold; color: #000;}
#form-title span {font-size:20px; color: #000; font-weight: 400;}
.form-separator { border-bottom: solid 1px lightgray; height: 1px;}
.field-content {margin: 20px auto 0px; width: 78%;}
#field { font-weight: 500; border: solid 1px lightgray; padding:13px; box-sizing: border-box; width: 100%; margin: auto; position: relative;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.75);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
    -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
    transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;}

#check-rgpd {width: 78%; margin: auto; margin-bottom: 15px;}
#check-rgpd em {font-size:10px; font-weight: 600;}
.coreg-item { width: 78%; margin: auto;}
.coreg-item label {font-size:10px!important;}
#cta {background:#A70000; width: 78%; font-size:30px; color:#ffffff; cursor:pointer; transition: all 1s; position: relative; border-radius: 5px; display: block; padding: 14px; box-sizing: border-box; margin:auto; border:0; font-weight: bold;box-shadow: 0px 0px 3px 0px rgb(0 0 0);}
#cta:hover {cursor:pointer;transition: all 1s; background:#cb0303;}

/*CALENDRIER*/
.calendrier {background:#000000; width:100%;}
.calendrier hr {border:0; border-top: 1px solid lightgray; width: 50%;margin: auto;}
.calendrier span {font-weight:bold;margin:auto; text-align:center; display:block; color:#fff;padding: 15px 0px; box-sizing: border-box;}
.calendar-content {text-align: center;padding-bottom: 15px; box-sizing: border-box;background:#A70000;}
.calendar-mail {width: 200px;text-align: center;margin: auto; color:#fff; display: inline-block;}
.calendar-mail a {text-align: center;margin: auto; display: block; color: #fff; font-size: 14px;}
.calendar-img {width:40px;}

#wrap-title-calendar{position: absolute; left: 50%;}
#title-calendar{position: relative; left: -50%; text-transform: uppercase; }

.dateIcon {
    float: left;
    width: 81px;
    height: 85px;
    background-image: url(https://cdn.publications-agora.com/maquettes_packs/pack-2203-webconf-hotlist/sign_up/img/datebg.png);
    background-repeat: no-repeat; }

.dateMonth {
    padding-top: 9px;
    text-transform: uppercase;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
    width: 81px;
    line-height: 12px;
    text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25);
    filter: dropshadow(color=rgba(0, 0, 0, 0.25), offx=-1, offy=-1);
}

.dateDay {
    padding-top: 17px;
    text-transform: uppercase;
    text-align: center;
    color: #2a2a2a;
    font-weight: bold;
    font-size: 32px;
    line-height: 32px;
    width: 81px; }

.dateInfo {padding-left: 10px; float:left; color:#000000;}
.dateHeadline {font-size: 18px;padding-top: 20px;font-weight: bold;}
.dateSubHeadline {font-size: 16px;padding-top: 5px;}

/*COPY*/
/*.content { background:#ffffff;  width:100%; display: block; margin: 50px auto;}*/
.title { display: block; margin : 25px auto; text-align: center; font-size: 30px; }
.premia {width:350px; display:block; margin:auto;}
.flt-left { float: left; margin-right: 25px; }


.calendar-icon ul {padding:0;}
.calendar-icon ul li {list-style-type: none; width: 100px; display: inline-block; text-align: center; font-size: 14px; color: #00adef;}
.calendar-icon ul li a {text-transform: none;}

/* ELEVATOR */
.elevator {background:transparent;width:100%;}
#elevator-btn {color: #000000; background: #e7bd18; border: 0; height: 56px; width: 310px; font-weight: bold; font-size: 18px; border-radius: 5px;
    cursor: pointer; transition: all .5s;box-shadow:  0px 0px 3px 0px rgba(0,0,0,0.74); display: block; margin: auto;text-decoration: none; text-align: center;padding-top: 15px;
    box-sizing: border-box;}
#elevator-btn:hover {color: #000000; background: #f3fb1c; cursor: pointer; transition: all .5s;}
.elevator-mobile {display:none;}


/* FOOTER */
footer { float:left; line-height: 0.5; color: darkgray; width:100%; background: #444444; }
footer a { text-decoration: none; color: darkgray; }
.footer-content { font-size:9px; line-height: normal; margin: 35px auto; text-align: justify; }
.clearfix::after { content: ""; clear: both; display: table; }
.footerlogo { float: left; display: block; margin: auto; margin-right: 10px; background: transparent; width:116px; }
#avertissement { color:#FF0000; font-weight:bold; font-style: italic; }

/*************** TOP LINK STYLE *******************/
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url('https://cdn.publications-agora.com/maquettes_packs/pack-2203-webconf-hotlist/sign_up/img/ui.totop.png') no-repeat left top; }
#toTopHover { background:url('https://cdn.publications-agora.com/maquettes_packs/pack-2203-webconf-hotlist/sign_up/img/ui.totop.png') no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus { outline:none; }
 
/*********************************
*********** Media Start **********
***********************************/

@media only screen and (max-width: 1000px) { 

    .wrap {width:100%;}
    .head-sub {height:auto;}
    .head-sub h1 {width:100%;font-size: 40px;}
    .content {width:90%;margin-top: 0; border-radius: 0;box-shadow: 0 0 black; margin-bottom: 0px;}
    .content-right {width:100%; border-radius: 0;height: auto;}
    .content-left {width:100%; float:none; border-radius: 0;}
    .copy-content {border-top-left-radius: 0px;border-top-right-radius: 0px;}
    .guru-content {width: 433px; margin: auto; position: relative;}
    .guru-content ul li {margin:0; }
    .form-section-content {width:98%; margin-top:0px;}
    .form-up-section {padding-top:30px;}
    .bg-font {font-size: 25px;}

    #horsemen {width: 100%; padding-bottom: 5%; }

    footer { width: 100%; }
    .footer-content { width: 90%; margin:auto; padding:20px 0px;}
}

 
@media (max-width: 780px) {
    
    .ou { width: 100%; padding: 30px 20px; }
    .ou-img { float: none; display: block; width: 100%; }
    .zero-img img { width:60%; }
    .ou-text { float: none; width: 100%; display: block; margin: 30px auto;}
    #horsemen {width: 100%;}
    .head-sub span {font-size: 18px;}
    .head-sub h1 {width:100%;font-size: 20px;}
    .finances {font-size: 45px;}
    .headline-title {display:none;}
    .calendar-icon ul li {width:100%;}
    #elevator-btn {width:90%;}
	.footerlogo { float: none;margin: auto;}
    /* #wrap-title-calendar{position: relative;} */
    #title-calendar{position: relative;}
    #form-mobile{font-size: 16px;}

    .dateIcon {
        /* float: left; */
        float: none;
        width: 81px;
        height: 60px;
        background-image: url(https://cdn.publications-agora.com/maquettes_packs/pack-2203-webconf-hotlist/sign_up/img/datebg.png);
        background-repeat: no-repeat; background-size: 70%; }
    
    .dateMonth {
        padding-top: 5px;
        text-transform: uppercase;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 12px;
        width: 56px;
        line-height: 12px;
        text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25);
        filter: dropshadow(color=rgba(0, 0, 0, 0.25), offx=-1, offy=-1);
    }
    
    .dateDay {
        padding-top: 5px;
        text-transform: uppercase;
        text-align: center;
        color: #2a2a2a;
        font-weight: bold;
        font-size: 20px;
        line-height: 32px;
        width: 56px;}

        .dateInfo {padding-left: 0px;
             /* float:left; */
             color:#000000;}
.dateHeadline {font-size: 14px;padding-top: 0px;font-weight: bold;}
.dateSubHeadline {font-size: 12px;padding-top: 0px;}

}

@media (max-width: 420px) {
    
    .head-sup h1 {font-size: 14px; letter-spacing: 0px;}
    .head-sub span {font-size:14px;}
    .webconf {font-size: 14px;}
    .finances {font-size: 36px;}
    .headline-content strong {font-size:25px;}
    .guru {width: 105px;}
    .guru-content {width: 100%;width: 244px;}
    .guru-content ul li {width:122px;}
    #horsemen {width: 100%;}
    #resp{font-size: 20px;}
    .title_date{font-size: 20px;}

}