/* css rules for the page p_media.php */

:root {
    --colPrimary: #3b8de1;
    --colPrimaryLight: #b9dbf6;
    --colPurpleDark: #221749;
    --colPurpleLight: #dadafc;
    --colGreenLight: #73a008;
    --col-text1: var(--colPurpleDark);
    --fontRegF: 'GoogleSans_reg';
    --fontBigF: 'Gluten', cursive;
    --fontBigW: 600;
    --fontBigLS: -0.03em;
    --fontLightF: 'Poppins-Light';
    --fontLightW: 300;
    --fontLightLS: -0.03em;
}


/*#########################################
#         page body
#########################################*/
#page_body{
    margin-bottom: 80px;
}

h2{
    font-family: var(--fontBigF);
    font-weight: 600;
    color:var(--col-text1);
}

/*#########################################
#         HEADER
#########################################*/

#page_header_baseline {
    /*background: url(../css/../images/main/carte_bg_bandeauHP_tiny.png) no-repeat 100% 50% #3b8de1;*/
    background: url(../images/main/jeuxgeo/carte_bg_bandeauHP_tiny.png) no-repeat 100% 50%,
                var(--colPrimary);

    background-attachment: fixed;
    background-position: 100% 5%;
    /*background-size: 2000px 355px;*/

    position: relative;

}

.header_baseline_min_height{
    min-height: 350px;
}

#header_baseline_left{
    flex-wrap: wrap;
}


#logo_baseline {
    position: relative;
    color: #FFF;
    font-family: var(--fontBigF);
    font-weight: 200;
    font-size: 1.5em;
    text-align: center;
    margin-left: 30px;
}
#logo_baseline h2{
    color:#FFF;
    margin:0px;
    font-size: 1.1em;
    font-family: var(--fontBigF);
    font-weight: 200;
}
#logo_baseline h2 b{
    font-weight: 600;
}

.text_logo{font-weight: bold; font-size:1.2em;}



/*#########################################
#         SECTION SITES
#########################################*/
section#section_sites{

}

#section_sites .part_left, #section_sites .part_right {
    height: 400px;
    padding:50px;
    position: relative;
}

#section_sites h3{
    color:#fff;
    font-size:1.5em;
}

#section_sites .btn_container .btn{
    font-size:1.2em;
}

#section_sites .flag{
    width:100px;
    position:absolute;
    top:-20px;
    right: 50px;
    /*transform: rotate(-25deg);*/
}

#section_sites ul.stats_list {
    text-align: center;
}
#section_sites ul.stats_list li{
    display: inline-block;
    margin:20px;
    text-align: center;
    font-size:2em;
}
#section_sites ul.stats_list .num {
    font-family: var(--fontBigF);
    font-weight: 600;
}

#site_jh ul.stats_list li, #site_jh ul.stats_list li h4{
    color:#945c8d;
}


/*#########################################
#       PRESS
#########################################*/
section#section_press{

    background: url(../../images/home/nuage1.png) no-repeat, var(--colSalmondLight);
    background-position: 12px -31px;
    background-size: 142px;

    padding: 70px 0px;

    margin-bottom:0px;
}


#section_press h2{
    color:var(--colPurpleDark);
    margin-bottom:50px;
}

#section_press img{

    /*-webkit-filter: grayscale(100%) brightness(200%); 
     filter: grayscale(100%) brightness(200%);*/

}


/*#########################################
#       TESTIMONIALS
#########################################*/
section#section_testimonial{

    background: url(../images/main/nuage1.png) no-repeat, url(../images/main/nuage1.png) no-repeat, #b9dbf6;
    background-position: 12px -31px, 99% 105%;
    background-size: 142px, 220px;

    padding: 70px 0;
}
#section_testimonial h2{
    text-align:center;
}
#testimonial_list{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
#section_testimonial .testimonial_item {
    max-width: 400px;
    padding-top: 60px;
    margin:10px;
}

#section_testimonial .testimonial_item:nth-child(even){
    margin-top:50px;
}
.testimonial_item .content{
    background: #FFF;
    border-radius: 40px;
    color:var(--col-text1);
    font-family: var(--fontLightF);
    font-size:1.3em;
    padding:20px;
}
.bubble{
    position: relative;
}
.bubble:before,
.bubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
}
/*.testimonial_item .content:before {
    left: 30px;
    bottom: -50px;
    border: 25px solid;
    border-color: #333 transparent transparent #333;
}*/

.testimonial_item .content:after {
    left: 38px;
    bottom: -30px;
    border: 15px solid;
    border-color: #fff transparent transparent #fff;
}


.testimonial_item .author {
    font-family: var(--fontBigF);
    margin-left: 20px;
    margin-top: 40px;
    font-size:1.2em;
    color:var(--col-text1);
}
.testimonial_item .job {
    font-family: var(--fontLightF);
    margin-left: 20px;
    color:var(--col-text1);
}


/*#########################################
#         MEDIA QUERIES
#########################################*/
@media (max-width: 768px) {
    /*xs*/
    #page_header_baseline{
        height: auto;
        padding: 30px 0;
        margin: 0px;
    }

    #img_big_header {
        margin-top: 0px;
        margin-left: 0px;
    }

    img{
        max-width: 90%;
    }
    #section_sites .part_left, #section_sites .part_right {
        height: 490px;
    }
}