/*******************************************/
/**** Responsive ***************************/
/**** LMC 2018-04-24 ***********************/

/* global */
@media only screen and  (max-width: 853px) {
    a {
        display: block;
        cursor: pointer;
    }

    #print_btn {
        display: none;
    }

    .front #main_wrapper #content,
    .front #main_wrapper #right_side,
    .mobile.front #main_wrapper #content,
    .mobile #right_side {
        padding-top: 15px;
    }

    .tablet .form-item-lang-dropdown-select,
    .mobile .form-item-lang-dropdown-select {
        width: 25px;
        display: block;
    }

    #right_side #block-textsize-form {
        display: none;
        padding: 0 !important;
        margin: 0;
    }
    #main_wrapper {
        flex-direction: row;
        flex-wrap: wrap;
    }  
    #banner_area {
        flex-direction: row;
    }  
    #banner_area,
    #main_wrapper {
        display: flex;
        align-items: stretch;
        /* min-height: 100%; */
        /* display: flex; */
        /* flex-direction: row; 
        align-items: stretch;
        align-items: center;*/
    }  
    #banner_area #logo.block,
    #banner_area #main_site_logo.block,
    #banner_area #slogan.block {
        float: none;
    }
    #banner_area #slogan {
        line-height: normal;
        flex-grow:8;
    }
    #banner_area #logo,
    #banner_area #main_site_logo {
        flex-grow:2;
    }
    
    #banner_area #main_site_logo a,
    #banner_area #logo a {
        width: 100%;
        display: block;
    }

    #banner_area #main_site_logo img,
    #banner_area #logo img {
        width: 100%;
        display: block;
        height:auto;
    }

    .front #main_wrapper #hp_blocks_area, 
    .front #main_wrapper #hp_blocks_area .region-hp-blocks-content{
        flex-grow:12;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
        margin-left: 0;
    }
    .front #main_wrapper #hp_blocks_area h1 {
        padding: 0 3% 26px 0;
        width: 64%;
        height: auto;
        margin-right: 0;
        margin-left: 0;
        flex-grow:12;
    }
    .block#block-views-pefop-hp-block .views-field.views-field-title a {
        font-size: 13px;
    }
    .front #main_wrapper #hp_blocks_area .region-hp-blocks-content .block {
        
    }
    .views-field-field-slideshow-img {
        width: 100%;
        min-height: 140px;
        max-width: 100%;
        overflow:hidden;
    }
    .views-field-field-slideshow-img img {
        width: 100%;
        max-width: 100%;
        height:auto;
    }
    .front #main_wrapper .view-slideshow .views-field-body span {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .front #main_wrapper  .view-slideshow .slide_body_content {
        flex-grow: 2;
        font-size: 1.2em;
        max-width: 74%;
        padding:  5px;
    }
    .front #main_wrapper .view-slideshow .slide_body_link {
        flex-grow: 1;
        position: static;
        padding-left: 0.25%;
        padding-top: 10px;
        text-align: right;
    }

    /* language */
    #block-lang-dropdown-language.block-lang-dropdown {
        width: 7% !important;
    }
    /* main menu */
    #header_page {
    background: #F0F0F0;
    }

    #header_page #menu.hidden_desktop {
        background-color: transparent;
        background-image: none;
        margin:0;
        padding:0;
    }

    #header_page #menu.hidden_desktop .region-menu-area {
        background-color: #006CB8;
        height: auto;
        display: none;
        position: absolute;
        z-index: 9999;
        width: 100%;
        height: 100%;
        left: 0;
        top: 55px;
    }
    
    #header_page #menu.hidden_desktop li,    
    #header_page #menu.hidden_desktop li.first {
        width: 100%;
        background-image: none;
        border-bottom: 1px solid white;
        text-align: left;
    }
    #header_page #menu.hidden_desktop li.first a,
    #header_page #menu.hidden_desktop li.first a.active, 
    #header_page #menu.hidden_desktop li.first a:hover  {
        background-position: 25px;
    }
    #header_page #menu.hidden_desktop li li,    
    #header_page #menu.hidden_desktop li li.first {
        width: 85%;
    }

    #header_page #menu.hidden_desktop li ul {
        background-color: #F0F0F0;
        background-image: none;
        position: static;
        width: 100%;
    }

    #menu .blk-title-icon i.fas {
        color:#006CB8;
        width: 100%;
        display: block;
    }

    #header_page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    }

    #header_page #menu.hidden_desktop,
    #site #header {
        justify-content: space-between;
        align-self: auto;  
    }

    #header_page #menu.hidden_desktop {
        flex: 1;
        padding:10px;
        display: block;
    }
    
    #menu.hidden_mobile { display: none; }

    #site #header  {
        flex: 9;
        background: none;
        display: flex;
        flex-direction: row;
        padding-left: 0;
    }

    #main_site_link {
        margin-right: 2%;
    }
     #site #header #main_site_link,
     #site #header .region-header  {
         float: none;
         justify-content: space-between;
         align-self: auto;
         min-height: 20px;
         flex: 1;
     }
     #site #header .region-header .block {
         min-height: 20px;
     }
     #site #header .region-header #block-search-form {
         min-height: 20px;
         width: 80%;
     }

    .mobile.front div#block-views-publications-blocks-block {
        order: 2;
    }

    .mobile.front div#block-views-news-block {
        order: 1;
    }

    .mobile.front div#block-views-youtube-block {
        order: 3;
    }

    .mobile.front div#block-block-1 {
        order: 4;
    }

    .mobile.front div#block-views-pole-mag-block {
        order: 5;
    }

    .mobile.front div#block-views-rss-news-block {
        order: 6;
    }

    .front #hp_blocks_area .block .views-field-field-visual {
        width: 64%;
    }
    .mobile.front #hp_blocks_area .block .views-field-field-visual {
        width: 44%;
    }
    .front #hp_blocks_area .block .views-field-field-visual img {
        width: 100%;
        height: auto;
    }

    .front #hp_blocks_area #block-block-1 .esa_left {
        width: 44%;
        font-size: 18px;
        line-height: 18px;
        padding: 39px 0;
    }

    .front #hp_blocks_area #block-block-1 .esa_right {
        width: 43%;
        font-size: 13px;
        line-height: 18px;
        padding:22px 13px;
        margin-bottom: 16px;
        min-height: 50px;
    }

    /* content */
    .not-front #content {
        width: 68% !important;
        padding-left: 1%;
    }

    .front .block#block-views-pefop-hp-block .views-field.views-field-field-logo-pefop a {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 90px;
    }
    .front .block#block-views-pefop-hp-block .views-field.views-field-field-logo-pefop img {
        max-height: 90px;
        width: auto !important;
        height: auto !important;
        max-width: 85px;
    }

    /* parteners*/ 
    .view-partner .views-row {
        height: 130px;
        line-height: 130px;
    }
    #block-views-partner-block .view-partner {
        height: 130px;
    }
    .views-field.views-field-field-partners-logo img {
        width: 100%;
        height: auto;
    }

    h2.partners_block_title span {
        width: auto;
        padding: 0 5px;
    }

    #block-unesco-blocks-unesco-blocks-page-buttons {
        margin: 5px 5px 10px;
    }

    /* footer */

    .mobile #footer .block,
    .tablet #footer .block {
        width: 100%;
        clear: both;
    }

}

@media only screen and (max-width: 750px) {
    .mobile .hidden_mobile {
        display: none !important;
    }    
    .mobile .hidden_desktop {
        display: block !important;
    }

    .not-front #block-unesco-blocks-unesco-blocks-map {
        display: none;
    }

    .mobile.front #main_wrapper #content {order: 1;}
    .mobile.front #main_wrapper #right_side {order: 3;}
    .mobile.front #main_wrapper #hp_blocks_area {order: 2;}

    .tablet .views-field.views-field-body {
        min-height: 38px;
    }

    .tablet.front #main_wrapper #hp_blocks_area {
        padding: 20px;
    }
    .tablet.front #main_wrapper #hp_blocks_area h1{
        padding-bottom: 0;
    }
    .tablet #hp_blocks_area #block-views-publications-blocks-block {
        height: auto;
    }

    .view-slideshow .views-field-title {
        width: 80%;
        padding: 20px 4%;
        top: 10%;
    }
    #block-unesco-blocks-unesco-blocks-custom-print-btn,
    .menu-lvl1:hover .menu-lvl2-container,
    .mobile #menu .menu-lvl2-container,
    .tablet #menu .menu-lvl2-container {
        display: none !important;
        visibility: hidden !important;
    }
     .menuparent.menu-lvl1-container-open .menu-lvl2-container,
    .mobile #menu .menu-lvl2-container.menu-lvl2-container-open,
    .tablet #menu .menu-lvl2-container.menu-lvl2-container-open {
        display: block !important;
        visibility: visible !important;
    }

    /* content */
    .not-front #content {
        width: 100% !important;
    }

    .mobile #breadcrumb li,
    .tablet #breadcrumb li {
        padding: 0 5% 0 0;
        margin: 0 5px 0 0;
    }   
    
    .not-front #main_wrapper #right_side,
    .not-front #main_wrapper #content {
        /*width: 92%;*/
        width: 100%;
        padding: 0 4%;
        box-sizing: border-box;
    }

    /* specificites des pages ateliers */
    .node-type-workshops #main_wrapper {
        display: flex;
        flex-direction: column;
    }
    .node-type-workshops #main_wrapper #right_side {order: 1;}
    .node-type-workshops #main_wrapper #content {order: 2;}

    .not-front #main_wrapper #content .content table {
        width: 100%;
        margin-bottom:  15px;
    }
    .not-front #main_wrapper #content .content table td {
        display: inline-table;
        width: 100%;
    }

    .not-front #main_wrapper #content .content #node-18 table td,
    .not-front #main_wrapper #content .content #node-19 table td {
        display: table-cell;
    }

    .not-front #main_wrapper #content .content img,
    .not-front #main_wrapper #content  .content {
        max-width: 100%;
        clear: both;
        float: none !important;
        display: block;
    }
    .not-front #main_wrapper #content #block-unesco-blocks-unesco-blocks-page-buttons .content {
        display: flex;
    }

    .mobile .map, .mobile .map *, 
    .tablet .map, .tablet .map * {
        width: 98% !important;
        background-repeat: no-repeat;
    }

    .mobile .node-webform .content .field-name-body, 
    .mobile .node-webform .content .webform-client-form,
    .tablet .node-webform .content .field-name-body, 
    .tablet .node-webform .content .webform-client-form {
        display: inline-block;
        width: 47%;
    }
    .page-publications-by-country ul.list-pays {
        display: flex;
        flex-wrap: wrap;
    }

    .page-publications-by-country ul.list-pays li {
        text-align: left;
        padding: 10px;
    }

    .mobile.not-front #main_wrapper #content .node-country .content {
        display: flex;
        /* flex-wrap: nowrap; */
        flex-direction: column;
        width: 100%;
        float: none;
    }
    .mobile.not-front #main_wrapper #content .node-country .content #country_right_side,
    .mobile.not-front #main_wrapper #content .node-country .content #country_left_side {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px;
    }

    .mobile .node-country #country_left_side .country_plug_link {
        padding-top: 20px !important;
        padding-bottom: 20px;
    }
    .mobile .node-country #country_left_side .field-name-field-country-info,
    .mobile .node-country #country_left_side .field-name-field-country-flag {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .mobile .node-country #country_left_side .field-name-field-country-info {
        width: 60%;
        padding: 0;
    }
    .mobile .node-country #country_right_side img {margin: 0 auto;}
    .mobile .node-country #country_right_side {
        margin-bottom:20px;
        display: flex;
        flex-direction: column;
    }

    .mobile .node-country #country_right_side .field-name-field-country-location {
        order: 1;
    }
    .mobile .node-country #country_right_side #btn_back_map {
        order: 2;
        padding-bottom: 0;
        padding-top: 20px;
    }

    .view-team .view-content h2,
    .view-team .view-content table {
        padding-top: 15px;
        padding-bottom: 12px;
    }
    .view-team .view-content h2:first-child { 
        padding-top: 0;
    }

    /* parteners*/ 
    .tablet #block-views-partner-block .view-partner ,
    .mobile #block-views-partner-block .view-partner {
        height: 110px;
    }
    .tablet .view-partner .views-row,
    .mobile .view-partner .views-row {
        height: 100px;
        line-height: 100px;
    }

    .tablet h2.partners_block_title span,
    .mobile h2.partners_block_title span {
        width: auto;
        padding: 0 5px;
    }
} 

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

    .mobile .node-webform .content .field-name-body, 
    .mobile .node-webform .content .webform-client-form,
    .tablet .node-webform .content .field-name-body, 
    .tablet .node-webform .content .webform-client-form {
        width: 96%;
        clear: both;
    }
    
    #banner_area #slogan {
        font-size: 1.1em;      
    }

    #banner_area #logo {
        padding-right: 2%;
    }

    .front #main_wrapper #right_side #block-unesco-blocks-unesco-blocks-map {
        margin: 20px;
    }

    .front #main_wrapper #right_side,
    .front #main_wrapper #content {
        flex-grow:12;
        flex-direction: column;
        width:100%;
        padding-right:0;
        padding-top: 20px;
    }
    .views-field-field-slideshow-img, .views-field-field-slideshow-img img {
        width: auto;
    }
    .front #main_wrapper #hp_blocks_area h1 {
        padding: 0 3% 26px;
        width:94%;
        height: auto;
        min-height: 240px;
    }
    .front #main_wrapper #hp_blocks_area .region-hp-blocks-content {
        flex:1;
        align-content:flex-start;
        display: flex;
        flex-wrap: wrap;
    }
    .front #main_wrapper #hp_blocks_area .region-hp-blocks-content .block {
        width: 100%;
        min-height: min-content;
        height: auto;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0;
        margin-right: 0;
        margin: 0;
        padding-top: 5%;
    }

    .front #main_wrapper .view-slideshow .slide_body_link {
        flex-grow: 1;
        position: static;
        padding-left: 0.25%;
    }
    .front #hp_blocks_area #block-block-1 .esa_left {
        width: 44%;
        font-size: 18px;
        line-height: 18px;
        padding: 30px 0;
    }

    .front #hp_blocks_area #block-block-1 .esa_right {
        width: 46%;
        font-size: 13px;
        line-height: 18px;
        padding: 20px 15px 10px 15px;
        margin-bottom: 16px;
        min-height: 50px;
    }

} 

@media only screen and (min-width: 482px) and (max-width: 750px) {
    #banner_area #logo {
        padding-right: 2%;
    }

    #banner_area #slogan {
        line-height: normal;        
        float: none;
        font-size: 1.5em;
    }
    .front #hp_blocks_area #block-block-1 .esa_left {
        width: 42%;
        font-size: 18px;
        line-height: 18px;
        padding: 39px 0;
    }

    .front #hp_blocks_area #block-block-1 .esa_right {
        width: 42%;
        font-size: 13px;
        line-height: 18px;
        padding: 13px;
        margin-bottom: 16px;
        min-height: 50px;
    }
} 

@media only screen and (min-width: 751px) and (max-width: 853px) {

    #banner_area #logo {
        padding-right: 2%;
    }   

    .front #main_wrapper #content{
        flex-grow:8;
        padding-left: 0;
        margin-right: 0;
        margin-left: 0;
        flex: 2;
    }
    .front #main_wrapper #right_side {
        flex-grow:4;
        padding-right: 0;
        margin-right: 0;
        margin-left: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 15px;
    }
}