/* PUSH MENU */
#menu {
    position:fixed;
	overflow:auto;
	z-index:20;
    top:0;
    left:-35%;

    width: 35%;;
    height: 100%;
    padding: 270px 50px 30px 10%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;

    background-color: #132946;
	color: #fff;
}
body.admin-bar #menu {padding-top: 302px;}

#offsidemenu-header {
	position:fixed; 
	top:0; 
	left:-35%; 
	width:33%; 
	height:265px;
	padding:10px 50px 0 10%;
	
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
	
	background-color:#132946;
}
body.admin-bar #offsidemenu-header {padding-top: 42px;}

#offsidemenu-logo {width:130px;}
#menu h2 {color:#0069B4; position:fixed; top:200px; left:13.4%; margin:0; padding:0; display:inline-flex; height:51px; align-items:center; width:20%; line-height:1em;}
#menu h2 a {color:#0069B4; text-decoration:none; font-family: 'MyriadPro-Bold';}
body.admin-bar #menu h2 {top:232px}

#menu ul.bsn-list li, #menu ul.bsn-list li a {color: #fff; font-family: 'MyriadPro-Light'; font-size: 17px;}
#menu ul.bsn-list li.current_page_item > a, #menu ul.bsn-list li a:hover {color: #53B7FF;}
#menu ul.bsn-list li.current_page_item > a {font-family: 'MyriadPro-Bold';}

body.open #menu, body.open #offsidemenu-header {left:0;}
/* MAIN PAGE */
.page-wrap {
   
    padding:50px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
}
body.open .page-wrap {
    margin-left: 300px;
}

/* MENU TOGGLE ICON */

button:focus {
    outline: none;
}
#offside-menu-toggle {
    position:fixed;
	z-index:20;
    width:51px;
    height:51px;
	top:200px;
	left:10%;
	padding:0;
	margin:0;

    cursor:pointer;

    border:none;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
	
	-webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
    
	background-color:#0069B4;
	background-image:url("../images/button-plus.svg");
	background-size:25px 25px;
	background-repeat:no-repeat;
	background-position:center;
}
body.admin-bar #offside-menu-toggle {top:232px;}

#offside-menu-toggle:hover {transform:rotate(90deg); background-color:#53B7FF; border-radius:50%;}
body.open #offside-menu-toggle:hover {transform:rotate(45deg); background-color:#53B7FF; border-radius:50%;}

body.open #offside-menu-toggle {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* PAGES DOMAINES */
body.page-template-template-domaine #menu h2.widgettitle {display:none;}
body.page-template-template-domaine.open #menu h2.widgettitle {display:flex;}
body.page-template-template-domaine #offside-menu-toggle {position:absolute; background-color: transparent;}
body.page-template-template-domaine.open #offside-menu-toggle {position:fixed; background-color: #0069B4;}
body.page-template-template-domaine.open #domaine-banner-side h1, body.page-template-template-domaine.open #domaine-banner-side-summary {display:none;}


@media (max-width: 1599px) {
	#menu h2 {left:14%; top:175px; font-size: 1.3em;}
	body.admin-bar #menu h2 {top:197px;}
	#offside-menu-toggle {top:175px;}
	body.admin-bar #offside-menu-toggle {top:197px;}
}

@media (max-width: 1399px) {
	#menu {width:40%; left:-40%;}
	#offsidemenu-header {left:-40%; width:38%;}
	#menu h2 {left:15.5%; width:20%; }
}

/* MENU RESPONSIVE */
@media (max-width:1000px) {
	#menu {width:60%; left:-60%; padding: 130px 50px 30px 10%;}
	#offsidemenu-header {left:-60%; width:58%;}
	#offsidemenu-logo {width:50px; height:42px; display:inline-block; background-image: url("../images/unesco_natcom_mobile.png"); background-size: contain; background-repeat: no-repeat;}
	#offsidemenu-logo img {display:none;}
	#offside-menu-toggle {top:70px; width:40px; height:40px; background-size:20px 20px;}
	body.page-template-template-domaine #offside-menu-toggle {position:fixed; background-color:#0069B4;}
	body.page-template-template-domaine #menu h2.widgettitle {display:flex;}
	#offsidemenu-header {height:130px}
	#menu h2 {left:17%; padding:0; margin:0; top:65px; width:70%}
	#header, body.page-template-template-domaine #header {margin-bottom:54px; background-color: #f7f7f7;}
	body.admin-bar #menu {padding-top: 162px;}
	body.admin-bar #offside-menu-toggle {top:97px;}
	body.admin-bar #menu h2 {top:97px;}
	.singular .entry-header {margin-top:140px;}
}
@media (max-width: 768px) {
	#menu {width:80%; left:-80%;}
	#offsidemenu-header {left:-80%; width:76%;}
	#menu h2 {left:19%;}
}
@media (max-width: 480px) {
	#menu {width:90%; left:-90%;}
	#offsidemenu-header {left:-90%; width:84%;}
	#menu h2 {left:24%; font-size:20px;}
}