.nav { position:relative; display:inline-block; z-index:100;font-family: 'Bubbler One', sans-serif; font-size:20px;vertical-align:bottom;}
.nav-list { text-align:left;list-style:none;margin:0; padding:0}
.nav-item { float:left; display:inline; position:relative; vertical-align:top}
.nav-item a { display:block; color:#FFFFFF; padding:30px 20px;margin:0;transition:all .5s }
.nav-item a:hover { background-color:#FFF;transition:all .5s; color:#041B44 }
.nav-item2 { float:left; display:inline; position:relative; vertical-align:top}
.nav-item2 a { display:block; color:#FFFFFF; padding:6px;margin:0;transition:all .5s }
.itemactif { background-color:#FFF; }
.itemactif  a { display:block; color:#041B44; padding:30px 20px;margin:0;transition:all .5s }
.nav-item:hover .nav-submenu { display:block;transition:all .5s  }
/* Navigation submenu 
.nav-submenu { display:none; position:absolute; width:200px; list-style:none; transition:all .5s;left:-40px;padding:15px 20px;}
.nav-submenu-item a { background-color:rgba(0, 57, 50, 0.4); display:block; padding:12px; color:#828487; margin:0;transition:all .5s   }
.nav-submenu-item a:hover { background-color:rgba(0, 57, 50, 0.8); color:#000;text-decoration:none;transition:all .5s ; transition:all .5s  }*/
/* Mobile navigation */
.nav-mobile { display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer; position:absolute; top:0; right:0; background:#3D3D3B url(img/nav.svg) no-repeat center center; background-size:18px; height:50px; width:50px; }
/* Mobile navigation, clickable area for revealing <ul> */
.nav-click { position:absolute; top:0; right:0; display:none; border-left:1px solid #3D3D3B; height:49px; width:50px; cursor:pointer; }
.nav-click i { display:block; height:48px; width:48px; background:url(img/drop.svg) no-repeat center center; background-size:20px; }
.nav-click:hover { background-color:#9CDCF9; }
.nav-rotate { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
/* menu transparant sous le sous-menu */
.smenus {width:100%; text-align:center; background-color:#83868B; z-index:1000;display:block}
.smenusdiv {display:inline-block; padding:15px 20px; margin:0; color:#FFF; transition:all .5s; vertical-align:top;font-family: 'Bubbler One', sans-serif; font-size:20px;}
.smenusdiv:hover {background-color:#FFF;transition:all .5s;color:#000 }
.smenusdivactif {display:inline-block;padding:15px 20px;margin:0;color:#041B44;background-color:#FFF;font-family: 'Bubbler One', sans-serif; font-size:20px;}

.logopt {width:50px; height:72px; background-image:url(../../images_mairie_grimaud/ecusson.jpg);background-size:cover ;vertical-align:top; display:none;transition:all .8s;}
.logopthide {display:inline-block;transition:all .8s}

#divmenu {width:100%;text-align:center;z-index:10000;background-color:#041B44;overflow:hidden}

@media screen and (min-width: 1300px)
	{
	.nav {margin:0}
	}

@media screen and (max-width: 1000px)
	{
	#divmenu {position:relative}
	.nav {margin:0}
	}

@media only screen and (max-width: 768px)
 { 
 	.nav-mobile { display:block; }
	.nav { width:100%; padding:50px 0 0 0; background-color:#041B44 }
	.nav-list { display:none;}
	.nav-item { width:100%; float:none; }
	.nav-item > a { padding:15px 10px; }
	.nav-click { display:block; }
	.nav-mobile-open { border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; }
	.nav-item:hover .nav-submenu { display:none;background-color:#999; }
	.itemactif a { background-color:#FFF !important }
	.nav-submenu { position:static; width:85%;}
	.nav-submenu-item a:hover {color:#828487;}
	.nav-submenu-item a {color:#072969;}
	.smenusdiv, .smenusdivactif {padding:10px;margin:0;width:100%}
	.smenus {min-height:45px}
}