/* Réglages pour les écrans qui ont une largeur de 750px à 960px (Tablette) */
@media screen and (max-width: 960px){
	
#mainbanner, #nav, #wrapper , #footer, #footersocial{
	width: 758px!important ;
}


	img{
		max-width: 100%!important;
		height: auto;
	}
	#banner {
		margin-left: 10px;
	}
	
	#slideshow .gkIsWrapper-gk_publisher figcaption.bottom.contains-pagination{
		height: 40px!important;
	}
	#slideshow .gkIsWrapper-gk_publisher figcaption h3 {
		font-size: 15px!important;
		line-height: 35px!important;
	}

	
	/* MOD LEFT */
	#left {
		width: 100%!important;
	}

	#left > div.inner{
		margin-right: 0px;
		overflow-x: hidden;
		overflow-y: hidden;
		margin-bottom: 10px;
	}

	#left div.moduletable, #left div.module,
	#left div.moduletable_menu, #left div.module_menu {
	float: left;
	width: 33.3%; /* Nbre de module (ici 3) */
	}
	
	
	/* CENTRE */
	#center, #maintop {
		width: 100%!important;
	}
	#center, #maintop .moduletable_tabs .gkTabsNav li{
		width: 33%;
	}
	#maintop .moduletable_agenda .nspArt.nspCol3, #maintop .moduletable_actu .nspArt.nspCol3, #maintop .moduletable_tabs .nspArt.nspCol3{
		margin:0 30px !important;
	}
	
	/* Mod RIGHT */
	#right {
		width:100%!important;
		max-width: 750px;
	
	}
	#right .inner{
		padding-left: 0!important;
	}
	#right h3{
		padding-left: 15px;
	}
	#right .inner .moduletable_acces{
		width: 100%;
		float: left;
		padding-left: 5px!important;
	}
	
	#right .inner .moduletable{
		float: left;
		width: 45%;
	}
	
	#right .inner .moduletable_annuaire{
		width: 45%!important;
		float: right;
		height: auto;
	}
	
	#right .moduletable_annuaire{
		margin-left: 25px!important;
	}
	
	#right .moduletable_acces li{
		margin:0 2px 10px 6px !important;
		width: 85px!important;
		height: 85px!important;
	}
	#right .moduletable_annuaire li{
		margin:5px 25px 15px 6px !important;
		width: 80px!important;
		height: 80px!important;
	}

	
	#footersocial > div {
		margin: 0!important;
	}
	#footersocial .moduletable_reseaux .menu li{
		margin-right: 0!important;
	}
	#footersocial .moduletable_liens, #footersocial .moduletable_plan{
		max-width: 250px;
	}
	
	#footer .moduletable_arbo .menu li.deeper.parent {
    margin-right: 0!important;
    width: 25%!important;
}
	
} 





/* Réglages pour les écrans qui ont une largeur de 524px à 750px (Smartphone Paysage) */
@media screen and (max-width: 758px){
	
#mainbanner, #nav, #wrapper , #footer, #footersocial, #right{
		width: 524px!important ;
	}
	
	
	 #banner{
		 width: 200px;
	 }
	 
	header #nav ul {
		width: 200px!important;
		height: auto;
	}
	header #nav ul ul {
		background: #fff!important;
		box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
		padding-top: 0px!important;
		margin-left: 100px;
	}
	
	#banner .moduletable .search .button{padding: 7px!important;}
	
	.uk-navbar-content:before, .uk-navbar-brand:before, .uk-navbar-toggle:before {
    display: inline-block!important;
    height: 100%;
    vertical-align: middle;
	}
	.uk-navbar-toggle:after {
	background: url('../images/ico-menu-mobile.png') no-repeat;
    content: "";
    display: block !important;
    height: 39px !important;
    width: 160px !important;
    margin: 6px 0 0 0;
	}
	.uk-navbar-flip {
    float: right;
	}
	uk-offcanvas.uk-active {
    	display: block;
    }
    .uk-offcanvas-page {
   	 	position: fixed;
   	 	transition: margin-left 0.3s ease-in-out 50ms;
	}
	.uk-offcanvas-bar-flip {
		left: auto;
		right: 0;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	#nav .menu {
		display: none;
	}
	
	header .search {
	    margin: 58px 0 0 !important;
	    width: 250px !important;
	}
	header .search .inputbox {
   		width: 195px!important;
   	}
   	
   	#slideshow .gkIsWrapper-gk_publisher figcaption.bottom.contains-pagination{display: none!important;}
	
	
	/* CENTER */
	
	 #center {
	 	width: 100%!important;
	 }
	 #center .moduletable h3{
		 padding: 10px 0 0 20px;
	 }
	 #center .moduletable_agenda, #center .moduletable_actu, #center .gkTabsContainer{
		 padding: 0!important;
	 }
	 #maintop .moduletable_agenda .nspArt.nspCol3, #maintop .moduletable_actu .nspArt.nspCol3, #maintop .moduletable_tabs .nspArt.nspCol3{
		 margin: 0 7px !important;
		 width: 30%!important;
	 }
	 
	 
	 #maintop .moduletable_tabs .gkTabsNav li {
	 	width: 32.9%!important;
	 	}
	 
	 #center .contact-form dl{
		width: 292px!important;
	}
	footer #contentfooter {
    	width: 292px!important;
	}
	footer .social{
		margin-left: 12%!important;
	}

	#center .contact-form textarea, #center .contact-form .required{max-width: 80%;}
	#center .contact-form .button.validate {
		margin-left: 0!important;
	}
	 
	 /* RIGHT */
	 
	 #right {
		width: 100%!important;
	}
	
	 #right .moduletable{
	 	width: 45%!important;
		float: left;
		margin: 10px 0 0!important;
	
	}
	#right .inner .moduletable_annuaire, #right .inner .meteo{
		width: 100%!important;
		padding: 0!important;
		margin:  0 0 25px!important;
	
	}
	
	#right .moduletable_annuaire li, #right .moduletable_accesli{
		margin:5px 5px 15px 8px !important;
		width: 90px!important;
		height: 90px!important;
	}
	
	#right .moduletable_annuaire{
		margin-left: 0!important;
	}
	#right .inner .moduletable_annuaire{height: auto!important;}


	 
	 /* FOOTER */
	 #footersocial .moduletable_liens, #footersocial .moduletable_plan{
		 margin-bottom: 20px!important;
	 }


} 





/* Réglages pour les écrans qui ont une largeur inférieur à 524px (Smartphone Vertical) */
@media screen and (max-width: 524px){



#mainbanner, #nav, #wrapper , #footer, #footersocial, #right{
	width: 292px!important ;
}
	#banner {
		margin-left: 0;
		margin-top: 10px;
	}
	header .search{
		margin: 10px 0 !important;
	}
	
	#slideshow{
		display: none!important;
	}

	#nav ul.menu li{
		float: none; 
	}
	
	
	#maintop .moduletable_agenda .nspArt.nspCol3, #maintop .moduletable_actu .nspArt.nspCol3, #maintop .moduletable_tabs .nspArt.nspCol3 {
	    margin: 0 18% !important;
	    width: auto!important;
	}
	
	#maintop .moduletable_tabs .gkTabsNav li {
	    width: 100%!important;
	}
	
	#maintop .nspArt h4.nspHeader {

	    padding: 0!important;
	}
	#maintop .nspImage {
		margin-top: 20px;
	}
	
	
	 #right > div.inner > div:nth-child(even) {
     	float: left !important;
    }
    
    #right .moduletable_annuaire li, #right .moduletable_accesli {
    	margin: 5px 4px 15px 3px !important;	
	}
		
	.items-row .item{
		width: 100%!important;
	}

	.cols-3 .column-3{
		float: none;
	}

	#right .moduletable{
		width: 93%!important;
		margin-bottom: 35px!important;
	}
	
	#footer .moduletable_arbo .menu li.deeper.parent {
	    width: 50% !important;
	}

	.btn {
    display: inline-block;
    cursor: pointer;
    
}

.btn-navbar {
    display: none;
    float: right;
    padding: 12px 15px;
    margin-right: 5px;
    margin-left: 5px;
}

.icon-bar {
    display: block;
    width: 18px;
    height: 3px;
    background-color: #CECECE;
    -webkit-border-radius: 1px; /* Ce sont des préfixes, pour que les navigateurs */
       -moz-border-radius: 1px; /* prennent en charge les nouvelles propriétés. */
            border-radius: 1px;
}

.icon-bar + .icon-bar { /* Le + permet de sélectionner les éléments qui suivent */
    margin-top: 3px;
}





}