/*****************
    Imports
 ****************/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('utilities.css');
@import url('avenir.css');
@import url('adam-gorry.css');
@import url('buttons.css');
@import url('svg.css');
@import url('xsnav.css');

/*****************
    Tags
 ****************/
html,
body {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: rgba(0, 35, 80, 1);
    background-attachment: fixed;

    /* General font style */
    font-family: "Avenir-Light";
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

h1 {
    display:none;
}
@media (min-width: 768px) {

    h1 {
        display:block;
        position: absolute;
        top: -10px;
        left:0;
        z-index: -1;
        font-family: Avenir-Black;
        font-size: 10vw;
        color: #50E3C2;
        opacity: 0.07;
        text-transform: uppercase;
    }
}

h2 {
    font-size: 2.5rem;
    font-family: Avenir-Light;
}
@media (min-width: 768px) {
    h2 {
        font-size: 4.64rem;
    }
}

h3 {
    font-family:AAdamGorry-Inline;
    font-size: 2.57rem;
}

h4 {
    font-family:Avenir;
    letter-spacing:0.7rem;
    text-transform:uppercase;
    font-size:1rem;
    margin:0;
}

p {
}

a {
    color:#ffffff;
}
a:hover {
    color:#ffffff;
    text-decoration: underline;
}
b,strong{
    font-family: "Avenir-Black";
}
u{
    text-decoration:none;
    font-size:0.8rem;
}


/*****************
    Class
 ****************/

a,
.btn,
a.btn,
svg,
svg *,
.trans {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn,
#main-wrapper .mission a,
#main-wrapper .btn{
    text-decoration: none;
}

.text-uppercase.avenir {
    letter-spacing: 3px;
}

.cta-wrapper {
    height: 70px;
}

.lead,
.lead * {
    color: #FFFFFF;
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0;
}

section {
    position: relative;
    padding-top: 30px;
}
#main-wrapper section ul li{
    margin-bottom:1rem;
}

/*****************
    Forms
 ****************/
.form-control::-webkit-input-placeholder{color:#7d98ba;text-transform:uppercase;}
.form-control:-moz-placeholder{color:#7d98ba;text-transform:uppercase;}
.form-control::-moz-placeholder{color:#7d98ba;text-transform:uppercase;}
.form-control:-ms-input-placeholder{color:#7d98ba;text-transform:uppercase;}

.form-control{
    border-radius:100px;
    border: 2px solid #ECCB6C;
    background:transparent;
    /*text-transform:uppercase;*/
    color:#ffffff;
}
.form-control:focus{
    color:#ffffff;
    background:rgba(255,255,255,0.2);
    border:2px solid #ffffff;
}
textarea.form-control{
    border-radius:5px;
}
.transparent-input{
    border:none;
    background:rgba(255,255,255,0.2);
    display:inline;
    border-radius:0;
    color:rgb(180, 236, 81);
    width:20px;
    text-align:center;
}
.transparent-input:focus{
    color:#ffffff;
    background:rgba(138,229,128,0.2);
    border:none;
}

.has-error .form-control{
    border:2px solid #ff0000;
}
.has-error .help-block{
    font-size:0.8rem;
    color:rgba(255,0,0,0.8);
}

/*****************
    Nav
 ****************/
#main-nav {
    height: 275px;
    padding-top: 21px;
    background: linear-gradient(180deg, rgba(0, 14, 26, 0.6) 175px, rgba(0, 35, 80, 0) 275px);
    transition: all 0.5s ease;
}
#main-nav.open {
    height: 100vh;
    background: linear-gradient(180deg, rgba(0, 14, 26, 0.8) 80%, rgba(0, 35, 80, 0) 100%);
}

#main-nav.scrolled {
    height: 80px;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(0, 14, 26, 0.5) 30px, rgba(0, 35, 80, 0) 100%);
}
#main-nav.open,
#main-nav.open.scrolled {
    height: 100vh;
    background: linear-gradient(180deg, rgba(0, 14, 26, 0.8) 80%, rgba(0, 35, 80, 0) 100%);
}
#main-nav #main-nav-content{
    margin-top:20px;
    opacity:0;
}
#main-nav #main-nav-content.open{
    opacity:1;
}
@media (min-width: 992px) {
    #main-nav #main-nav-content,
    #main-nav #main-nav-content.open{
        opacity:1;
    }
    #main-nav {
        height: 275px;
        padding-top: 51px;
        background: linear-gradient(180deg, rgba(0, 14, 26, 0.6) 175px, rgba(0, 35, 80, 0) 275px);
        transition: all 0.5s ease;
    }

    #main-nav.scrolled {
        height: 80px;
        padding-top: 8px;
        background: linear-gradient(180deg, rgba(0, 14, 26, 0.5) 30px, rgba(0, 35, 80, 0) 100%);
    }
}
#main-nav .navbar-brand {
    transition: all 0.5s ease;
    width: 200px;
    text-align:center;
}
#main-nav .navbar-brand > div{
    width: 200px;
    text-align:center;
}

#main-nav .navbar-brand > div svg#super-heros-carbone {
    display:inline-block;
    width: 200px;
    height: auto;
    margin:0 auto;
    transition: all 0.5s ease;
}

#main-nav.scrolled .navbar-brand > div{
    width: 200px;
}

@media (min-width: 992px) {
    #main-nav .navbar-brand,
    #main-nav .navbar-brand > div,
    #main-nav .navbar-brand > div svg#super-heros-carbone,
    #main-nav.scrolled .navbar-brand > div{
        width: 263px;
    }
}
#main-nav.scrolled .navbar-brand > div > svg#super-heros-carbone {
    height: 40px;
    width: 116px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@media (min-width: 992px) {
    #main-nav #main-nav-content > ul.navbar-nav {
        margin-left: 50px;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li {
        padding-left: 25px;
        padding-right: 25px;
    }
    #main-nav #main-nav-content > ul.navbar-nav > li:first-child {
        padding-left: 0;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li:last-child {
        padding-right: 0;
    }
}


#main-nav #main-nav-content > ul.navbar-nav > li > a {
    text-transform: uppercase;
    color: #ffffff;
    font-family: Avenir-Medium;
    font-size:1rem;
    line-height: 19px;
    text-align: center;
    text-shadow: 10px 6px 8px 0 rgba(2, 8, 27, 1);
    padding-left: 0;
    padding-right: 0;
}
#main-nav #main-nav-content > ul.navbar-nav > li > a:hover {
    letter-spacing:0.02rem;
}

@media (min-width: 992px) {
    #main-nav .navbar-brand > div svg#super-heros-carbone,
    #main-nav.scrolled .navbar-brand > div{
        width: 200px;
    }
    #main-nav #main-nav-content > ul.navbar-nav > li > a {
        border-bottom: 3px solid transparent;
        font-size:0.8rem;
    }
    #main-nav #main-nav-content > ul.navbar-nav > li > a:hover {
        letter-spacing:inherit;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li.border-white > a:not(.rainbow-text):hover,
    #main-nav #main-nav-content > ul.navbar-nav > li.border-white.active > a {
        border-bottom: 3px solid #ffffff;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li.border-orange > a:not(.rainbow-text):hover,
    #main-nav #main-nav-content > ul.navbar-nav > li.active.border-orange > a {
        border-bottom: 3px solid #ECCB6C;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li.border-green > a:not(.rainbow-text):hover,
    #main-nav #main-nav-content > ul.navbar-nav > li.border-green.active > a {
        border-bottom: 3px solid #8AE580;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li.border-blue > a:not(.rainbow-text):hover,
    #main-nav #main-nav-content > ul.navbar-nav > li.border-blue.active > a {
        border-bottom: 3px solid #3A5C87;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li > a:hover {
        text-shadow: 0px 0px 20px #53A0FD;
    }

    #main-nav #main-nav-content > ul.navbar-nav > li > a.rainbow-text:hover,
    #main-nav #main-nav-content > ul.navbar-nav > li.active > a.rainbow-text {
        border: none;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-image: linear-gradient(to right, #ffffff 0%, #CFACFB 0.5%, #DE623B 35%, #53A0FD 65%, #B4EC51 90%);
        border-image-slice: 1;
    }
    #main-nav #main-nav-content > ul.navbar-nav > li.active > a.rainbow-text:hover,
    #main-nav #main-nav-content > ul.navbar-nav > li.active > a.rainbow-text {
        cursor: default;
    }
}
@media (min-width: 1200px) {
    #main-nav .navbar-brand > div svg#super-heros-carbone,
    #main-nav.scrolled .navbar-brand > div{
        width: 263px;
    }
    #main-nav #main-nav-content > ul.navbar-nav > li > a {
        font-size:1rem;
    }
}

/*****************
    XS Nav
 ****************/

.navbar-toggler{

}

/*****************
    Header
 ****************/

/*****************
    Center
 ****************/
#main-wrapper {
    min-height: 100vh;
    padding-top: 270px;
    background-image: url('../img/background/home.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}
#main-wrapper a{
    text-decoration: underline;
}

/*****************
    Footer
 ****************/

#main-footer {
    margin-top: 10rem;
    font-size: 0.66rem;
    padding-bottom: 8rem;
}

#main-footer hr {
    transform: inherit;
    border-bottom: 1px solid #ffffff;
    margin-bottom: 1.2rem;
}

#main-footer a {
    color: #ffffff;
}

/*****************
    Waiting
 ****************/

#waiting header .logo-wrapper .img-fluid {
    width: 100%;
    /*max-height: 170px;*/
}
@media (min-width: 576px) {
    #waiting header .logo-wrapper .img-fluid {
        width: 480px;
    }
}


#waiting header h2 {
    margin-top: 62px;
    margin-bottom: 58px;
}

#waiting header h3 {
    margin: 0;
}




/*****************
    Bienvenue
 ****************/

#home > header {
    padding-bottom: 120px;
}

#home > header .logo-wrapper {
    margin-bottom: 87px;
}

@media (min-width: 576px) {
    #home > header .logo-wrapper a {
        width: 480px;
    }
}

#home > header .logo-wrapper a svg {
    width: 80%;
    max-height: 170px;
}
@media (min-width: 992px) {
    #home > header .logo-wrapper a svg {
        width:100%;
    }
}


#home > header .lead *:last-child {
    margin-top: 40px;
}

#home section h2 {
    font-size:3.2rem;
    margin-top: 62px;
    margin-bottom: 58px;
}

#home section h3 {
    margin: 0;
}

#home section #ambassador-wrapper {
    margin-top: 4rem;
    margin-bottom: 5.1rem;
}

#home section blockquote:before {
    content: '"';
    font-size: 3rem;
    align-self: flex-start;
}

#home section blockquote {
    margin-top: 3.6rem;
    font-size: 2.4rem;
    display: flex;
}

#home section .ambassador {
}

#home section p {
    margin-bottom: 20px;
}

/*****************
    Faites le test
 ****************/
#do-the-test .hr{
    margin-top:2rem;
}
#do-the-test .cta-wrapper{
    height:50px;
}

/*****************
    Questionnaire
 ****************/
#quiz .hr{
    margin:0;
    transform:inherit;
}
#quiz .question{
    color: #FFD278;
    font-family: Avenir-Heavy;
    font-size: 2.4rem;
    line-height: 3rem;
}
#quiz .carousel-item.has-error .question{
    color:#ff0000;
}
#quiz .carousel-item li{
    margin-top:1.5rem;
}
#quiz .carousel-item li:first-child{
    margin-top:3.5rem;
}
#quiz .carousel-item li label{
    cursor: pointer;
}

/*****************
    Dashboard
 ****************/
.mission-wrapper{
    display:flex;
    flex-flow: row wrap;
}

.mission-wrapper .mission {
    position: relative;
    padding-top: 25px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 1rem 2rem;
}
.mission-wrapper .mission a{
    text-decoration:none;
}
@media (min-width: 576px) {
    .mission-wrapper .mission {
        position: relative;
        padding-top: 25px;
        width: calc(50% - 2rem);
        box-sizing: border-box;
        margin: 0 1rem 2rem;
    }
}
@media (min-width: 768px) {
    .mission-wrapper .mission {
        position: relative;
        padding-top: 25px;
        width: calc(33% - 2rem);
        box-sizing: border-box;
        margin: 0 1rem 2rem;
    }
}
@media (min-width: 1170px) {
    .mission-wrapper .mission {
        position: relative;
        padding-top: 25px;
        width: calc(20% - 2rem);
        box-sizing: border-box;
        margin: 0 1rem 2rem;
    }
}
.mission-wrapper .mission .rounded-circle {
    position:relative;
    width:70%;
    padding-top: 70%;
    margin:0 auto;
    background: linear-gradient(180deg, #B6EF52 0%, #429321 100%);
    margin-bottom:0.9rem;
}
.mission-wrapper .mission-accomplished .rounded-circle{
    background: linear-gradient(315deg, #AC874A 0%, #E3D192 100%);
}
.mission-wrapper .mission .rounded-circle .inner{
    position:absolute;
    top:2px;
    left:2px;
    z-index:10;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    border-radius:50%;
    background-color:#EBEBEB;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.mission-wrapper .mission-accomplished .rounded-circle .inner{
    top:3px;
    left:3px;
    width:calc(100% - 6px);
    height:calc(100% - 6px);
}

.mission-wrapper .mission .fb-share{
    display:none;
    position:absolute;
    top:14px;
    left:50%;
    z-index:1000;
    margin-left:-15px;
    width:30px;
    height:30px;
    border-radius:50%;
    background: linear-gradient(315deg, #AC874A 0%, #E3D192 100%);
}

.mission-wrapper .mission .fb-share .inner{
    position:absolute;
    top:2px;
    left:2px;
    z-index:10;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    border-radius:50%;
    background-color:#17569F;
}

.mission-wrapper .mission-accomplished .fb-share{
    display:block;
}

.mission-wrapper .mission .mission-title{
    color:#8AE580;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom:0;
}

.mission-wrapper .mission .mission-name{
    color:#ffffff;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-family: Avenir-Heavy;
    margin-bottom:0;
}

.mission-wrapper .mission .fb-share-p{
    display:none;
    position:absolute;
    top:0;
    width:100%;
    margin:0;
    font-size: 0.66rem;
    text-transform: uppercase;
    font-family: Avenir-Heavy;
}
.mission-wrapper .mission-accomplished .fb-share-p{
    display:block;
}
.mission-wrapper .mission-accomplished .fb-share-p,
.mission-wrapper .mission-accomplished .mission-title,
.mission-wrapper .mission-accomplished .mission-name{
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #AC874A), color-stop(1, #E3D192));
    background-image: gradient(linear, left top, right bottom, color-stop(0, #AC874A), color-stop(1, #E3D192));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.mission-wrapper .mission .mission-done{
    display:none;
    text-transform: uppercase;
    font-family: Avenir-Heavy;
    font-size:0.73rem;
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #AC874A), color-stop(1, #E3D192));
    background-image: gradient(linear, left top, right bottom, color-stop(0, #AC874A), color-stop(1, #E3D192));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.mission-wrapper .mission-accomplished .mission-done{
    display:block;
    margin:0;
}

#action-wrapper{
}
#action-wrapper h2{
    font-family: Avenir-Light;
    font-size: 3.2rem;
    line-height: 4rem;
    color: #8AE580;
}
#action-wrapper .col-md-5.order-12.order-md-1{
    padding-top:20rem;
}
#action-wrapper ul{
    list-style-image: url('../img/ovalx1.png');
}



/*****************
    Challenges
 ****************/
#challenges{}
#challenges h2{
    font-family: Avenir-Roman;
    font-size:2.2rem;
    color:#F99191;
}
#challenges .img-txt h3,
#challenges .txt-img h3{
    font-size:2.1rem;
}
#challenges .img-txt h3{
    padding-right:25px;
}
#challenges .txt-img h3{
    padding-left:25px;
}

#challenges a{
    text-decoration:underline;
}
#challenges a:hover{
    color:#F99191;
}

#challenges .img-txt,
#challenges .txt-img{
    padding-top:50px;
}

#challenges .img-txt aside,
#challenges .txt-img aside{
    position:absolute;
    top:25px;
    height:70%;
}
#challenges .img-txt aside {
    right: 15px;
}

#challenges .txt-img aside {
    left: 15px;
}

@media (min-width: 992px) {
    #challenges .img-txt,
    #challenges .txt-img{
        padding-top:100px;
    }
    #challenges .img-txt aside {
        right: -68px;
    }

    #challenges .txt-img aside {
        left: -78px;
    }
}
#challenges .img-wrapper{
    position:relative;
}
#challenges .img-wrapper h3{
    font-size:4.26rem;
}
#challenges .img-txt .txt-wrapper .row,
#challenges .txt-img .txt-wrapper .row{
    padding-top:40px;
    padding-bottom:30px;
}
@media (min-width: 992px) {
    #challenges .img-txt .txt-wrapper .row {
        border-left: 1px solid #ffffff;
    }

    #challenges .txt-img .txt-wrapper .row {
        border-right: 1px solid #ffffff;
    }
}



/*****************
    Challenge
 ****************/
#challenge h2{
    color:#F99191;
    font-family:AAdamGorry-Inline;
    font-size: 2.57rem;
}
#challenge h3{
    font-family: Avenir-Roman;
    font-size:2.2rem;
    color:#ffffff;
    margin:1.7rem 0 1rem 0;
}
#challenge h3:first-child{
    margin-top:0;
}

#challenge h4 {
    font-family: Avenir-Roman;
    font-size:1.4rem;
    color:#ffffff;
    letter-spacing:0.01rem;
    margin:2rem 0 1rem 0;
}
#challenge h4:first-child {
    margin-top:0;
}



/*****************
    Tooltips
 ****************/
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before{
    border-top-color:#F99191;
}
.tooltip-inner{
    background:#F99191;
}



/*****************
    Radio btn on actions
 ****************/
.btn.active{
    border-bottom: 2px solid #8AE580;
}
.btn.focus{
    border-bottom: 2px solid #ECCB6C;
}