/*#########################################
#         VARS
#########################################*/
:root{
    --col-fra : #ff5c5c;
    --col-fra-light : #ffe7e7;
    --col-fra-dark : #6e3434;
    --col-fra-grey : #b58484;

    --col-motherlang : #ff5c5c;
    --col-motherlang-light : #ffe7e7;
    --col-motherlang-dark : #6e3434;
    --col-motherlang-grey : #b58484;

    --col-math : #f57b50;
    --col-math-light : #feebe5;
    --col-math-dark : #a53b15;
    --col-math-grey : #cb8267;

    --col-histgeo : #f3aa2a;
    --col-histgeo-light : #fdf2df;
    --col-histgeo-dark : #765432;
    --col-histgeo-grey : #cea071;

    --col-phychim : #20b755;
    --col-phychim-light : #def4e6;
    --col-phychim-dark : #184e2b;
    --col-phychim-grey : #6bbb87;

    --col-eng : #4680e1;
    --col-eng-light : #e3ecfb;
    --col-eng-dark : #16356a;
    --col-eng-grey : #8ba6d3;

    --col-ita : #665ed9;
    --col-ita-light : #e8e7f9;
    --col-ita-dark : #322e73;
    --col-ita-grey : #9896c2;

    --col-ger : #5656dd;
    --col-ger-light : #e6e6fa;
    --col-ger-dark : #322e73;
    --col-ger-grey : #9896c2;

    --col-spa : #5369ee;
    --col-spa-light : #e5e9fc;
    --col-spa-dark : #2c356f;
    --col-spa-grey : #8e98d2;

    --col-svt : #85c92c;
    --col-svt-light : #edf7e0;
    --col-svt-dark : #3b4f21;
    --col-svt-grey : #9cae84;

    --col-tech : #1aaba6;
    --col-tech-light : #ddf2f2;
    --col-tech-dark : #1b4241;
    --col-tech-grey : #81a9a8;

    --col-histArt : #bdc813;
    --col-histArt-light : #eef1c4;
    --col-histArt-dark : #494c19;
    --col-histArt-grey : #b3b771;

    --col-prAp : #d74770;
    --col-prAp-light : #f5d1db;
    --col-prAp-dark : #743345;
    --col-prAp-grey : #b99ca4;



    --col-footam : #5369ee;
    --col-footam-light : #e5e9fc;
    --col-footam-dark : #2c356f;
    --col-footam-grey : #8e98d2;


    --fontRegF: 'GoogleSans_reg';
    --fontBigF: 'Poppins-SemiBold';
    --fontBigW: 600;
    --fontBigLS: -0.03em;
    --fontLightF: 'Poppins-Light';
    --fontLightW: 300;
    --fontLightLS: -0.03em;

}



@font-face {
    font-family: GoogleSans_reg;
    src: url('fonts/GoogleSans-Regular.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('fonts/Poppins-SemiBold.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Poppins-Light;
    src: url('fonts/Poppins-Light.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Blogger_Sans_bold;
    src: url('fonts/Blogger Sans-Bold.otf');
    text-rendering: optimizeLegibility;
}

/*#########################################
#         BASE
#########################################*/
html{background: #FFF;}
body{ overflow-x: hidden;}

h1, h2{margin-top:50px; margin-bottom: 50px; font-weight: bold;
	font-family: var(--fontBigF);
	font-size: 3em;
    color: #333;
    text-shadow: 1px 3px 13px rgba(255,255,255,0.2);
}
h2.super_title{
    font-size:3.5em;
}
h1{font-size:3.2em;margin-bottom:100px}
h2{margin-bottom:80px;}

h3{margin-top:50px; margin-bottom: 20px; font-weight: bold;font-size: 2.1em;
font-family: var(--fontBigF);}
h4{margin-top:40px; margin-bottom: 20px; font-weight: bold;font-size: 1.6em;
font-family: var(--fontBigF);}

.dark_section, .dark_section h2, .dark_section h3,  .dark_section h4{
    color:#FFF;
} 


ul.with_dot{
	list-style: circle;
	padding-left:30px;
}
ul.separated_list li{margin-bottom:20px;}

/*#########################################
#         Iframe
#########################################*/

iframe{border:none; max-width: 100%;}

/*#########################################
#         Factory
#########################################*/
pre{
	background-color: #fdf6e3;
	border: none;
	padding: 6px;
	/*box-shadow: 0 3px 10px rgba(0,0,0,0.1);*/
}

p{margin-top: 30px; margin-bottom: 30px; font-size:1.2em;}
p.little_baseline{font-family: var(--fontlightF); color:#999;}
li{ font-size:1.2em;}


.color_blue{ color:#3d82d5;}

.flex{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.flex-wrap{ flex-wrap: wrap; }
.flex-spaceb{ justify-content: space-between; }



/*#########################################
#         TEST logo
#########################################*/

.learnious_logo{
    -webkit-text-stroke: 2px white;
    font-family: 'Paytone One', sans-serif;
    font-weight: bold;
    text-shadow: 0px 3px 10px rgba(0,0,0,0.2);
    letter-spacing: -0.008em;
}
.lll{color:#fd5c5c;}
.lle{color:#f37a50;}
.lla{color:#f2aa29;}
.llr{color:#bbc912;}
.lln{color:#84c92b;}
.lli{color:#20b755;}
.llo{color:#4582e1;}
.llu{color:#5268ee;}
.lls{color:#5558dd;}


/*#########################################
#         ANIMATION ON SCROLL
#########################################*/
.inline-photo{
    opacity: 0;
    transform: translateY(1.2em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
                  opacity .3s .25s ease-out;
    will-change: transform, opacity;
}
.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}

h2.show-on-scroll{
    opacity: 0;
    transform: translate(-20%, 0);
    transition: transform 1s .25s cubic-bezier(0,1,.3,1),
                  opacity .3s .25s ease-out;
    will-change: transform, opacity;
}
h2.show-on-scroll.is-visible{
    opacity: 1;
    transform: none;
}







/*#########################################
#         PAGE TOP
#########################################*/
#page_top{
    height: 60px;
    background: #FFF;
    margin-bottom:0px;
    font-family: var(--fontRegF);
}

#home_main_nav {
    display: flex;
    align-items: center;
    height: 60px;
}
#home_main_nav ul{
    margin-bottom: 0px;
}

#projects_menu {
    font-weight: 400;
    margin-bottom:0px;
    margin-top:26px;
    margin-left: 30px;
}

#projects_menu li{
    display: inline-block;
    font-size: 1.1em;
}
#projects_menu li a{
    color:#666;
}

#site_menu{
    text-align: right;
    margin-left: auto;

}
#site_menu li{
    display:inline-block;
    margin:0 20px;
}
#site_menu li a{
    font-size:0.9em;
}
#site_menu .btn-link{text-decoration: none;}

.btn_lang{color:#BBB; margin-right: 0;}


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


#page_header{
    height: 390px;
    position: relative;
    padding-top: 30px;
    /*background: url(../images/main/home_header_bg.png) no-repeat 50% 100%, 
                linear-gradient(to bottom, #3a7fd5, #6ebce2);*/
}
#page_header .svg_wave_top{
    position: absolute;
    top: 0px;
    fill:#FFF;
    transform: rotate(-180deg);
}
#page_header .svg_wave_bottom{
    position: absolute;
    bottom: 0px;
    fill:#FFF; 
}

#page_header {
    background: url(../images/main/home_header_bg.png) no-repeat 50% 100%, 
                url(../images/learnious/grid_5.png) 50% 50%,
                linear-gradient(-45deg, #0098ff, #00d0ff, #00ff85, #00d0ff, #0098ff );

    background-size: 2000px 355px, 13px, 600% 600%;

    /*-webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;*/
}


/*#########################################
#        PAGE HEADER BASELINE
#########################################*/



#page_header_baseline {
    background: url(../images/main/home_header_bg.png) no-repeat 50% 100%,
                #22b856;

    background-size: 2000px 355px;

    height: 390px;
    position: relative;
    padding-top: 30px;

    margin-bottom : 0px;

}

#img_header_container{
    padding-right: 60px;
}
.iframeVideo iframe{
    border-radius: 18px;
    
}

.iframeVideo_container{
    border:solid #FFF 5px;
    border-radius: 20px;
    -webkit-box-shadow: 5px 5px 18px 2px rgba(0,0,0,0.35); 
box-shadow: 5px 5px 18px 2px rgba(0,0,0,0.35);
}


.header_baseline_min_height{
    min-height: 350px;
}

#header_baseline_left{
    flex-wrap: wrap;
}


#logo_baseline {
    position: relative;
    color: #FFF;
    font-family: var(--fontLightF);
    text-align: center;
    padding: 0 30px;
}

#logo_baseline h2{
    font-size:2em;
    color:#FFF;
    margin:0px;
    font-family: var(--fontBigF);
    font-weight: 600;
}
#logo_baseline h3{
    margin:0px;
    margin-top:20px;
    font-size:1.6em;
    color:#FFF;
    
    font-family: var(--fontLightF);
    font-weight: 300;
}
.text_logo{font-weight: bold; font-size:1.2em;}



/*#########################################
#         SECTION BASELINE
#########################################*/
#section_baseline{
    margin-bottom:120px;
}
#section_baseline h1{
    font-size:2.3em;
}
#site_baseline{text-align: center; font-family: var(--fontlightF); font-size:1.3em;}


/*---------------------
-----------------------
iframe VIDEO
-----------------------
---------------------*/

.iframeVideo {
    overflow: hidden;
    /* padding-bottom: 56.25%;*/
   padding-bottom: 56.25%;
    height: 0;
    margin: auto;
    /* width: 80%; */
    position: relative;
    /*border-radius: 15px;*/
    max-width: 1000px;
}

.iframeVideo iframe{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}



/*#########################################
#         FIRST CONTENT 
#########################################*/

#section_first_content{
    position: relative;
    background: rgba(254,92,92,1);
    background: radial-gradient(circle, rgba(254,141,92,1) 0%, rgba(254,92,92,1) 100%);
    background-size: cover;
    color:#FFF;
    margin: 60px 0;
    margin-top:0px;
    padding: 45px 0 130px 0;

}

#section_first_content .svg_wave_top{
    position: absolute;
    top: 0px;
    fill:#FFF;
    transform: rotate(-180deg);
}
#section_first_content .svg_wave_bottom{
    position: absolute;
    bottom: 0px;
    fill:#FFF;
    transform: scale(-1, 1);
}

#section_first_content h3, #section_first_content h2{
    text-shadow: 0px 2px 6px rgba(255,0,0,0.5);
    text-align: left;
}

#section_first_content p{
    color:#FFF;
    font-family: var(--fontLightF);
    /*margin:auto;*/
}

.testimonial_unit{

}


/*#########################################
#         SECTION CATALOG GAME MENU
#########################################*/

#h_browse_catalog{margin-top: 30px;}

#menu_games_filter_by_lang{
	background: #FFF;
    border-radius: 20px;
    box-shadow: 0 3px 120px rgba(0,120,200,0.2);
    width: 100%;
    /*margin-top: 60px;*/
}

#menu_games_filter_by_lang li{
	display:inline-block; 
	margin:4px; 
	text-align: center;
}



#nb_games_available{text-align: center; font-family: var(--fontlightF); font-size:1.3em; color:#BBB;/* margin-top: 80px;*/}





/*#########################################
#         section_game_menu
#########################################*/

#section_game_menu{
    padding-top:0px;
    padding-bottom: 40px;
}

/* panel */
/*-----------------------------------*/
.panel-heading{
    padding: 5px 15px; 
    text-align: center; 
    margin:10px; 
    margin-right: 0px; 
    cursor:pointer;
}

.panel-heading.matiere_header {
    display: flex;
    justify-content: center;
    margin-left: 0px;
}
.panel-heading.matiere_header h2 {
    color: #FFF;
    margin: 4px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    font-family: var(--fontBigF);
    text-shadow: 0px 1px 5px rgba(0,0,0,0.2);


}

.game_list{padding:3px 0px;}

.game_thumbs_list li.title{margin-top:0px;}
.game_thumbs_list li.gameThumbContainer{
    /*display: none;*/

}
.sousMatiereMenu{    
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.title.sous_matiere{
    font-size: 1.2em;
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}
.title.sous_matiere_2{
    width: 60%;
    margin: auto;
    margin-top:0px;
    margin-bottom:10px;
   /* padding: 7px;*/
    border-radius: 40px 40px 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
 
}
.title.sous_matiere_2.need_hover{
    cursor: pointer;
}
.title.sous_matiere_2.need_hover:hover{
    opacity:0.8;
}
.title.sous_matiere_2 h4{
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color: #FFF;
    font-size: 22px;
    margin-bottom: 5px;
    padding: 0px 5px;
    line-height: 0.9em;
}  


.gameThumbsBlocPerSsMat2{
    display:flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 30px;

    /*transition: visibility 0.5s linear;*/
}

.gameThumbsBlocPerSsMat2 .gameThumbContainer{
    margin:10px;
}

.gameThumb{cursor:pointer;}

.gameThumb .descriptionToggleButton{
    color: #FFF;
    border-radius: 50%;
    padding: 0px;
    width: 1.4em;
    height: 1.3em;
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 0.8em;
    font-style: normal;
    margin-top: 0px;

    line-height: 1.4em;
}

.game_thumbs_list .vp_badge {
    background: #FFF;
    border-radius: 30px;
    font-size: 0.6em;
    padding: 5px 6px 2px;
    /*height: 30px;
    width: 30px;*/
    display: inline-block;
    opacity: 0.5;
    margin-left:10px;
    font-family: var(--fontBigF);
}


ul.sousMatiereMenu li {
    display: inline-block;
    margin: 0px 20px;
}

#games_menu_by_matiere_bloc{margin-top:-10px;}

/* gmae_menu_by_matiere new rules */
#games_menu_by_matiere{font-size:0.8em; margin-top: 40px;}

.matiere_header.test{display: none;}

.matiere_header h2{font-size:2.5em; font-family: var(--fontLightF);}

.title.sous_matiere_2 h4{margin-top: 4px;}
.gameThumbsBlocPerSsMat2 .gameThumbContainer {
    margin: 3px;
}
.game_thumbs_list .vp_badge{min-width: 26px; text-shadow: none;}

.game_thumbs_list li.title{margin-bottom: 20px;}

.gameThumb:hover{opacity:.7;}


/*#########################################
#         Testimonials
#########################################*/
.testimonial_item{
    margin: 30px;
    margin-bottom: 60px;
    font-weight: bold;
}
.testimonial_item .author, .testimonial_item .job{
    color:var(--col-text1);
}
.testimonial_item .content{
    background: rgba(256, 256, 256, .3);
    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: rgba(256, 256, 256, .3) transparent transparent rgba(256, 256, 256, .3);
}


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

/*#########################################
#         promo_points
#########################################*/



#promo_points{
    background: radial-gradient(circle, rgba(5,151,222,1) 0%, rgba(70,128,225,1) 100%);
    background-size: cover;
    
    color:#FFF;
    margin: 60px 0 0 0;
    padding: 80px 0 155px 0;
    position: relative;

}
#promo_points i.hero{
    font-size: 9em;
    text-shadow: 0px 2px 6px rgba(0,0,255,0.3);
}

#promo_points h2{
    text-shadow: 0px 2px 6px rgba(0,0,255,0.3);
}

#promo_points h3{color:#FFF; text-shadow: 0px 2px 6px rgba(0,0,255,0.3);}

#promo_points .svg_wave_top{
    position: absolute;
    top: 0px;
    fill:#FFF;
    transform: rotate(-180deg);
}

#promo_points .svg_wave_bottom{
    position: absolute;
    bottom: 0px;
    fill:#FFF;
}

#promo_units_container{ align-items: baseline !important;}
.promo_unit{margin:50px 5% 0 5%; max-width: 300px; text-align: center;}
.promo_unit p{text-align: justify;}
.promo_unit h3{margin-top:28px;}


/*#########################################
#         HOW TO
#########################################*/

#section_howto{

    position: relative;

    /*background: url(../images/learnious/grid_5.png) 50% 50%,
                radial-gradient(circle, rgba(5,151,222,1) 0%, rgba(70,128,225,1) 100%);
    background-size: 13px, cover;*/

    background: url(../images/learnious/gone_7_light_blue.svg) no-repeat;
    background-size: 1200px 1200px, 1200px 1200px;
    background-position: -200px 10px;
	margin-bottom: 0px;
}

#section_howto h3{
	margin-top: 90px;
}
#section_howto h3:first-child{
    margin-top:40px;
}

#section_howto .svg_wave{
	fill: #FFF;
	position:absolute;
	bottom:0px;

}

#howto_bloc{
    background: #FFF;
    padding: 40px;
    box-shadow: 0 3px 50px rgba(80,120,200,0.1);
    border-radius: 20px 20px 0 0;
    margin-bottom: 90px;
    border-radius: 20px;
}

/*#howto_bloc{
    opacity: 0;
    transform: translate(10%, 0);
    transition: transform 1s .25s cubic-bezier(0,1,.3,1),
                  opacity .3s .25s ease-out;
    will-change: transform, opacity;
}
#howto_bloc.is-visible{
    opacity: 1;
    transform: none;
}*/

.bottomRightRounded {
    position: absolute;
    z-index: 9;
    transform: rotate(180deg);
    margin-top: -1px;
}

.svg_white{fill: #FFF;}


/*#########################################
#         GAMES EXEMPLES
#########################################*/


#section_games_samples{
    background: url(../images/learnious/gone_7_light_blue.svg) 50% 0px no-repeat;
    background-size: 1200px 1200px;
    position: relative;
    padding-bottom: 120px;
}

#section_games_samples_container iframe{max-height: 420px;}

#section_games_samples h2{ color:#377bdc; }
#section_games_samples h3{ color:rgba(5,151,222,1); /*#e86a5d;*/ }
#section_games_samples p{ color:rgba(5,151,222,1); /*#e86a5d;*/ }


div .var_info{margin-bottom:30px;}

#section_games_samples .svg_wave_bottom{
    position: absolute;
    bottom: 0px;
    fill:#FFF;
    transform: scale(-1, 1);
}

#games_samples_container{
    margin-top: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#thumbBase{
    display: none;
}
#games_samples_container .thumb{
    width:150px;
    margin: 10px;
    box-shadow: 2px 2px 7px rgba(0,0,150,.4);
    border-radius: 5px;
    display: flex;
    align-items: center;
    border:solid 2px #FFF;
    cursor:pointer;
}

#games_samples_container .thumb img{
    width:100%;
    height: auto;
}




/*#########################################
#         VISUAL CUSTOMIZATION
#########################################*/


#section_visual_customization{
    position: relative;
    text-align: right;
    margin-bottom: 0px;
    padding: 45px 0 40px;
/*    background: url(../images/learnious/gone_7_salmon.svg) no-repeat, url(../images/learnious/gone_7_salmon.svg) no-repeat, #fdf6e3;
    background-position: calc(10% - 800px) -510px, calc(80% + 480px) 401px, 0;
    background-size: 1200px 1200px, 600px 600px, cover;*/
}

#section_visual_customization .svg_wave_top{
    position: absolute;
    top: 0px;
    fill: #fff;
    transform: rotate(-180deg);
    left: 0px;
    z-index: 4;
}

#section_visual_customization h2{ color:#e86a5d; }
#section_visual_customization h3{ color:#A66759; /*#e86a5d;*/ }
#section_visual_customization p{ color:#A66759; /*#e86a5d;*/ }


.visual_custom_unit{
    max-width: 300px;
    margin-bottom:50px;
}

#characters_bloc{
	
}

#characters_img_bloc{
	
}

#looknfeel_bloc{
	
}
#looknfeel_thumbs{
	
}



/*#########################################
#         TEAM
#########################################*/


#section_team{
    position: relative;
    padding: 80px 0 140px 0;
    background: url(../images/learnious/grid_5.png) 50% 50%,
                radial-gradient(circle, rgba(254,141,92,1) 0%, rgba(254,92,92,1) 100%);
    background-size: 13px, cover;

    margin-bottom:0;

}

#section_team .svg_wave_top{
    position: absolute;
    top: 0px;
    fill:#fdf6e3;
    transform: rotate(-180deg);

}

#section_team .svg_wave_bottom{
    position: absolute;
    bottom: 0px;
    fill:#fbf9f6;
}

#section_team h2{margin-left: 50px;}

#ul_team{
    align-items: baseline;
    flex-wrap: wrap;
    font-size:0.8em;
}


#ul_team li{display: inline-block; text-align: center; margin:20px; width: 200px;}
#ul_team h4{font-size:1.2em;margin-top: 20px;}

#ul_team img{
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(100,0,0,0.4);
}

.team_unit_title{font-weight: bold;}
.team_unit_details{margin-top: 10px; opacity:0.7;}



/*#########################################
#         PRICES
#########################################*/
#section_price{
    background: radial-gradient(circle, rgba(124,206,108,1) 0%, rgba(31,188,88,1) 65%);
    margin-bottom: 0px;
    padding-bottom: 110px;
    padding-top:50px;

    color:#FFF;
    text-align: center;
}

#section_price .baseline{
    font-size:1.3em;
}

#section_price h2, #section_price h3{
    color:#FFF;
}

.table_prices{
    color:#089a3f;
    margin:auto;
    font-size:1.5em;
    border-radius:20px;
    overflow: hidden;
    border-collapse: collapse;
    border: none
}

.table_prices.for_desktop{
    width:660px;
}
.table_prices.for_mobile{
    width:350px;
}
.table_prices th{
    background:#fff;
    padding:20px 30px;
    text-align: center;
    border-right: solid 1px #089a3f;
}
.table_prices td{
    background:#d0eed4;
    padding:20px 30px;
    text-align: center;
    font-weight: 600;
    font-size:1.2em;
    border-right: solid 1px #089a3f;
}
.table_prices th:last-child, .table_prices td:last-child{
    border: none;
}
.table_prices tr.with_border{
    border-bottom: solid 1px #089a3f;
}
.table_prices small {
    font-size: 0.4em;
    letter-spacing: -0.05em;
}


/*#########################################
#         CLIENTS
#########################################*/

#section_clients{
	background: #fbf9f6;
	margin-bottom: 0px;
	padding-bottom: 110px;
    padding-top:50px;
}

.svg_before_clients{
	transform: rotate(-180deg);
	margin-bottom: -1px;
	fill:#FFF;
	width:-100%;
}

#clients_bloc{
	display: flex;
	justify-content: space-around;
}
#clients_bloc img{margin:20px;}


/*#########################################
#         FOOTER
#########################################*/

.wrapper > footer, footer{
    position: relative;
    background: #30374e;
    padding-top: 80px;
    padding-bottom: 40px;
    color:#FFF;
    font-family: var(--fontLightF);
}

footer h2 {
    color: #ffffff;
}
.footer-nav {
    margin-top: 20px;
}
.footer-nav > li {
    display: inline-block;
    margin-left: 8px;
    padding-right: 8px;
    border-right: solid 1px #FFF;
}

.footer-nav > li:last-child {
    border: none;
}

.footer-nav > li > a {
    color: #FFF;
}

.logoFooter {
    /*mix-blend-mode: luminosity;*/
    margin-top: 20px;
    margin-bottom: 20px;
}

.logoFooter{
    width: 300px;
    
}

#logo_site_footer{
    width:200px;
}
#logoFooter_container{
    display: flex;
    margin-bottom:20px;
}
#logoFooter_container .logoFooter{
    width:450px;
    margin:auto;
}

.logo_jnc{
    width: 150px;
    margin-left: 10px;
}

.copyright {
    background: none;
    color: #fff;
}


/*#########################################
#         CONTACT
#########################################*/



#section_contact{
    margin-bottom: 120px;
    background: url(../images/learnious/gone_7_light_blue.svg) no-repeat;
    background-size: 720px 720px;
    background-position: calc(50% - 250px);
}

#form_contact{
    padding:40px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 3px 50px rgba(80,120,200,0.1);

}

input.form-control, textarea.form-control{
    border-radius: 5px;
    background: rgba(109,124,144,.1);
    width: 100%;
    margin: 16px 0;
    padding: 8px 12px;
    border:none;
}

#section_contact textarea{
    height: 300px;
}


/*#########################################
#         
#########################################*/



/*#########################################
#         MEDIA QUERIES
#########################################*/
@media (max-width: 768px) {
    /*xs*/
    .for_mobile{display: block;}
    .for_desktop{display:none;}

    #page_header {
        height: 650px;
        margin-bottom: 10px;
        margin-top: 100px;
    }
    #section_baseline{margin-bottom:20px;}
    #section_baseline h1{font-size:1.9em;}
    #logo_bloc{max-width: 100%;}
    #logo_bloc img{width:250px;}

    .game_iso_container, #games_iso_top_low, #games_iso_top_hight{display:none;}

    #section_baseline h1{text-align: center; margin:20px 0;}
    #section_first_content{margin-top:0px;}
    .game_list .gameThumb{font-size: 0.8em;}
    .title.sous_matiere_2{width:90%;}

    #section_visual_customization h2{font-size: 3em;}

    #projects_menu {
        margin-top: -20px;
    }

    #site_menu {
        background: #fff;
        border-radius: 20px;
        position: absolute;
        top: 69px;
        z-index: 200;
        width: 92%;
        height: 24px;
    }

    #page_header_baseline{
        height: auto;
    }
    #header_baseline_left{
        text-align: center;
    }

    #header_baseline_left img {
        width: 300px;
    }
    #img_header_container img{
        width: 100%;
    }

    #img_header_container {
        padding-right: 15px;
    }

    #section_first_content h3 ,
    #section_games_samples h2, 
    #promo_points h2,
    #section_visual_customization h2,
    #section_clients h2 {
        text-align: center;
    }

    #section_visual_customization h2 {
        font-size: 2.4em;
    }

    .panel-heading.matiere_header h2 {
        font-size: 1.5em;
    }
  

}

@media (min-width: 768px) and (max-width: 992px) {
    /*sm*/
   .for_mobile{display: none;}
   .for_desktop{display:block;}
}

@media (min-width: 992px) and (max-width: 1200px) {
    /*md*/
   .for_mobile{display: none;}
   .for_desktop{display:block;}
}

@media (min-width: 1200px) {
    /*lg*/
    .for_mobile{display: none;}
    .for_desktop{display:block;}
}