/**,*:before,*:after{ 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}
#bandeau{ height: 406px; width: 999px; }
.actions .col_gauche LI, #navigation #ACTIONS LI{ width: 206px; height: 127px; }
#navigation #ACTIONS.nivo_1 LI{ width: 153px; height: 100px; }
.desc, .ws-title{ height: 392px; width: 228px; }*/
/* col_gauche */
/*#reseaux.conteneur{ width: 100%; }
.tweet li { width: 245px !important; }*/

/* entete */
/*#navigation .btn-menu{ position: relative; }*/

/*body{background-color: yellow;}*/
@media (max-width: 1023px) {
    *,*:before,*:after{ 
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; 
    }
    
    #layer_jeune { 
        display: none !important;
    }
    #entete.fixed {
        background: none repeat scroll 0 0 #EFEFEF;
        -moz-box-shadow: 0 0 3px #009EE0;
        -webkit-box-shadow: 0 0 3px #009EE0;
        box-shadow: 0 0 3px #009EE0;
        height: 56px;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1002;
    }
    #entete.fixed #outils{display: none;}
    .fixed #logo_entete{
        left: 2%;
        position: fixed;
        width: 100px;
        top: 5px;
    }
    #logo_entete img{max-width: 100%; height: auto; margin: 0;}
    #navigation .btn-menu { display: block; height: auto; }
    
    .section{
        padding: 0 15px;
        width: 100%;
        margin: 0 auto;
    }
    #navigation{
        float: right;
        height: auto;
        left: auto;
        position: relative;
        right: -15px;
        top: -70px; 
        width: auto;
        z-index: 1001;
    }
    #navigation.fixed{ 
        position: fixed;
        top: 14px;
        right: 30px;
        z-index: 1002;
    }
    #navigation.fixed .btn-menu{}
    #nav-menu{ 
        display: none;
        margin-top: -4px;
        border: 3px solid #009EE0;
        position: absolute;
        right: 0;
        top: 100%;
    }
    #navigation #nav-menu > li{
        width: 100%;
        background: #ffffff;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
    }
    #navigation #nav-menu > li:hover{ background: #009EE0; }
    #navigation #nav-menu > li > a{ 
        display: block;
        width: 95%;
        padding-left: 5%;
    }
    #navigation #nav-menu > li > a:hover{ background-color: #009EE0; }
    
    #navigation #nav-menu .sous_nav{
        position: absolute;
        right: 0;
        left: auto !important;
        margin-right: 3px;
        z-index: 10;
        top: -3px;
    }
    #navigation LI#RESSOURCES.nivo_1 .sous_nav{ margin: 0; top: 30px; }
    #navigation #RESSOURCES.nivo_1 .sous_nav .ss_menu{ margin-left: 0; }
    #navigation LI#ACTIONS.nivo_1 .sous_nav { 
        right: 100%;
        width: 180px;
        padding: 0;
        margin: 0;
    }
    #navigation #ACTIONS.nivo_1 li{ padding: 0; margin-bottom: 0; }
    #navigation #ACTIONS.nivo_1 .sous_nav > LI > A{ display: none; }
    #navigation #ACTIONS.nivo_1 LI h2{ 
        bottom: 0;
        font-size: 13px;
        left: 0;
        padding: 0;
        position: relative;
        width: 100%;
    }
    #navigation #ACTIONS.nivo_1 LI.last{ margin: 0; }
    #navigation #ACTIONS.nivo_1 LI h2 A{ width: auto; position: relative; }
    #navigation LI .ss_menu{ width: 100%; }
    #navigation #FRANCOPHONIE.nivo_1 .sous_nav{ width: 150px; right: 100%; }
    #navigation li#FRANCOPHONIE .sous_nav .ss_menu{ width: 100% !important; }
    
    #navigation LI#ACTUALITES.nivo_1 .sous_nav{ margin-right: 0; top: 35px; }
    
    #bandeau{
        height: auto;
        padding: 6px 1%;
        width: 98%;
    }
    #bandeau #wowslider-container1,
    #wowslider-container1 .ws_images{ width: 100%; height: auto; }
    #bandeau #wowslider-container1 .ws_images img{
        max-width: 100%;
        height: auto;
        width: 100%;
    }
    #bg_desc{height: 96%; left: 1%;}
    
    #section_3 #partenariat{height: auto; top: 0;}
    
    .corps,.col_gauche,.col_droite,
    #section_4 .col_gauche{
        width: 100% !important;
    }
    .col_droite{float: left; margin-top: 23px;}
    
    #section_4 .section {
        float: left;
        left: 0;
        margin: 0;
    }
    #section_4 .col_droite #dossier{
        width: 100%;
        margin-top: 13px;
        padding-top: 25px;
        border: 1px solid #D2D2D2;
    }
    #section_5{ height: auto; }
    
    #agenda{ height: auto; }
    #section_1 .col_droite #evenement li{}
    
    #section_1 .prix{ margin-left: 25px; }
    
    #nuage,ul.nuage{width: 100%;}
    
    .col_gauche .imageflow .caption{
        left: 0;
        width: 100% !important;
        top: 95px;
    }
    #pied .col_droite ul{ margin-bottom: 23px; }
    
    #evenement{margin-right: 8%;}
    #evenement-nav {
        left: 0;
        right: auto;
        position: absolute;
        top: 20px;
    }
    #section_2{ height: auto !important; }
    
    .col_gauche .jcarousel-container-horizontal {
        left: 0;
        margin: auto;
    }
    
    /* page intérieure */
    .article .col_droite UL.nivo1, .events .col_droite UL.nivo1{width: 100%;}
    
    .col_gauche .liste .spip_logos {
        height: auto !important;
        max-width: 100%;
        float: none;
        margin: auto;
        display: block;
    }
    .liste li a.logo{margin-right: 3%; width: 13%; padding: 1%;}
    .liste li div{width: 100%; float: left;}
    .liste LI A.logo + div,
    .liste LI.avec_logo div{ width: 76%; }
    
    .article .col_centre{width: 100%; left: 0;}
    
    .article .col_gauche #listeMenu{
        background: none repeat scroll 0 0 #FFFFFF;
        display: none;
        left: 0;
        padding-left: 15px;
        position: relative;
        z-index: 10;
        margin: 0;
        width: auto;
        top: 0;
    }
    .article .col_gauche #listeMenu li{font-size: 14px; background-position: 0 4px; cursor: default;}
    .article .col_gauche #listeMenu li span{display: block; width: 100%;}
    .article .col_gauche #listeMenu li a,
    #autre DD LI a{display: block;}
    .article .col_gauche #listeMenu li a:hover,
    #autre DD LI a:hover{background-color: #009ee0; color: #fff; text-decoration: none;}
    
    #ariane li{font-size: 16px; background: url("../img/right.gif") no-repeat scroll right center transparent; margin-top: 13px;}
    #ariane li:last-child, #ariane li.last{ padding-right: 0; background-image: none; line-height: 21px; }
    #ariane li:last-child a, #ariane li.last a{ padding-right: 25px; background: url("../img/bottom.gif") no-repeat right center transparent; }
    #ariane li.ouvert a{ background: url("../img/right.gif") no-repeat right center transparent; }
    .col_centre div.actu ul.liste_actions li{width: 22%;}
    div.col_centre div.texte p img,
    .article .col_centre div.actu li img{
        display: block;
        float: none;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
        border: 1px solid #E7E7E7;
        padding: 1%;
    }
    div.col_centre div.texte img.puce,
    .article .col_centre div.actu li img.puce{
        border: 0 none;
        display: inline;
        float: none;
        height: auto;
        margin: 0;
        max-width: none;
        padding: 0;
    }
    .col_centre div.actu ul.liste_actions li .legende{width: 100%; height: auto;}
    h2.titre img{max-width: 100%; height: auto !important; display: block; margin: 0 auto;}
    .col_centre div.actu ul.liste_actions li a.logo {
        display: block;
        margin: 0 auto;
        float: none;
        border: 0;
    }
    .article .col_centre div.actu ul.liste{margin-top: 0;}
    
    #section_4 .col_gauche #contenu_ressources .col_gauche{ height: 100% !important; }
    
    #reseaux.conteneur{ padding-left: 1.5%; padding-right: 1.5%; width: 100%; }
    
    #wowslider-container1 a{ /*display: none !important;*/ }
 
    #navigation LI .sous_nav li{}    
    #navigation LI .sous_nav img{ display: none;}
	
	.actions .col_gauche LI, #navigation #ACTIONS LI {
		background: none repeat scroll 0 0 #fff;
		border: 5px solid #ffffff;
		float: left;
		font-size: 13px;
		height: 111px;
		margin: 0 6px 12px 0 !important;
		outline: 1px solid #d5d5d5;
		overflow: hidden;
		padding: 0 0 30px;
		position: relative;
		text-align: center;
		width: 188px;
	}
	
	.actions .col_gauche LI IMG, #navigation #ACTIONS LI IMG {
		height: auto;
		max-width: 100%;
		width: auto;
	}
	.actions .col_gauche LI H2 {
		bottom: 8px;
		left: 0;
		min-height: 29px;
		padding: 22px 10px 0;
		position: absolute;
		width: 100%;
	}
	.actions .col_gauche LI H2 A{
		bottom: 37%;
		left: 0;
		line-height: normal;
		min-height: 40px;
		position: absolute;
		transform: translate(0px, 50%);
		width: 100%;
	}
	#section_3 #partenariat, #section_3 #programmation { height: 595px; top: 0 }
    #programmation > img { max-height: none; }
	#section_3 #bloc_programmation { height: auto; max-height: 360px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #section_4 .col_droite .liste LI{width: 32%; margin-left: 0.665%; margin-right: 0.665%; background-image: none;}
    #section_4 .col_droite .liste img{ display: block; float: none; margin: 0 auto; }
    #section_4 .liste LI DIV H2{text-align: center;}
}

#li_logo{ display: none; }
@media (max-width: 859px) {
    #entete #outils{
        position: fixed;
        left: 0;
        height: auto;
        top: 0;
        right: auto;
        z-index: 100;
        background: #807267;
        width: 100%;
        padding: 0 2%; /*10px 2%;*/
    }
    #outils > li{
        height: auto;
        padding: 10px 10px 10px 0 !important;
    }
    #li_logo{
        display: none; 
        width: 0;
        -webkit-transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }
    #li_logo img{max-width: 100%; height: auto;}
    #li_logo.fixed{}
    #entete #langue ul{ top: 100%; }
    #page{padding-top: 30px;}
    #entete{
        background: none repeat scroll 0 0 #FFFFFF;
        height: 140px;
        left: 0;
        position: fixed;
        top: 28px;
        width: 98%;
        z-index: 1001;
        padding-left: 2%;
    }
    #entete #search{ background-image: none; }
    #entete #search .formulaire_recherche{
        display: block;
        height: auto;
        position: relative;
        top: 0;
        border-style: none solid;
    }
    #entete #search input#recherche{ font-size: 18px; width: 225px; }
    
    #entete #search > a { display: none; }
    #navigation{position: fixed; right: 15px; top: 110px;}
    #bandeau{margin-top: 230px !important;}
    
    #entete #langue{ width: auto; }
    
    #entete .recherche_avancee{ display: none;
        right: -3px !important;
        font-size: 14px;
        top: 3px;
        position: relative; 
    }
    #entete .recherche_avancee a{ padding: 5px; }
    #entete .recherche_avancee a:hover{ color: #ffffff; background-color: #009EE0; }
    #entete #langue{ font-size: 18px; top: 5px; }
    
    #entete #langue ul li { margin-bottom: 10px; }
    
    #fancybox-content div .newsletter div.view, #fancybox-content div .newsletter form.news{ width: 464px; }
    #fancybox-content div .newsletter FORM.news INPUT.coche{ left: -107px; }
    #fancybox-content div .newsletter FORM.news LABEL.decal{ left: -115px; }
    
    #li_logo{display: none;}
    
    #entete #search{ clear: left; float: right; margin-left: 0; height: 41px; }
    #entete #search .formulaire_recherche{ border-style: none solid none none; width: 263px; }
    #outils > li { padding: 10px 10px 0px 0 !important; }
    
    #entete{ top: 98px; height: 125px; }
    #page{ padding-top: 0; }
    h1#logo_entete{ top: 10px; }
    #entete #outils{ padding-bottom: 15px; }
    
}

@media (max-width: 768px) {
    #bg_desc{display: none;}
    #bandeau div#wowslider-container1 div.ws-title{
        position: relative !important;
        left: 0;
        top: auto;
        bottom: 0;
        background: url("../img/bleu_trans.png") repeat scroll 0 0 transparent;
        width: 100%;
        padding: 10px 2%;
        height: auto;
    }
    .desc H2, .ws-title h2{ margin-bottom: 5px; }
    .roundabout-holder {
        left: -15%;
        margin: 0 auto;
    }
    #section_4 .audio .liste LI SPAN{width: 100%;}
    
    #section_4 .col_droite .liste IMG{display: block; margin: 0 auto; float: none;}
    #section_4 .liste LI DIV H2{text-align: center;}
    
    .col_centre div.actu ul.liste_actions li{width: 46%;}
    
    .col_gauche .imageflow .caption{top: 70px;}
    
    #entete #search{ clear: left; margin-left: 0; height: 41px; }
    #entete #search .formulaire_recherche{ border-style: none solid none none; width: 263px; }
    #outils > li { padding: 10px 10px 0px 0 !important; }
    
    #navigation #nav-menu .sous_nav li{ 
        border: 0;
        height: auto !important; 
        font-size: 13px !important;
        margin-left: 0;
        margin-right: 0;
        width: 100% !important; 
    }
    
} /* fin max768 */

@media (max-width: 767px) {
    #fond_menu_ressources{display: none;}
    #onglets{
        display: none;
        background: none repeat scroll 0 0 #6D1F80;
        height: auto;
        width: 190px;
        z-index: 10;
    }
    #onglets li{
        clear: both;
        margin: 0;
        padding: 0 5%;
        width: 90%;
    }
    #onglets li img{border-bottom: 4px solid #6D1F80;}
    #section_4 .col_gauche H3.titre { margin-bottom: 30px; cursor: pointer; float: left; padding-right: 30px; background: url("../img/v.gif") no-repeat scroll right 12px transparent; }
    #section_4 .col_gauche H3.ouvert{ background: url("../img/right2.gif") no-repeat scroll right 12px transparent; }
    .jcarousel-clip-horizontal{ width: 100%; }
    
}

@media (max-width: 640px) {
    #evenement, #agenda, #section_1 .prix {
        clear: both;
        float: none;
        height: auto;
        margin: 0 auto 13px;
        width: 300px;
    }
    #evenement-nav{right: 6px; left: auto;}
    
    #evenement ul.inerFade {
        float: none;
        margin-bottom: 15px;
        width: 316px;
        margin: auto;
    }
    #evenement ul{width: 300px;}
    
    #agenda .liste li div.date{ float: none; margin: 10px auto 5px; }
    #agenda .liste li h2{width: 100%; text-align: center;}
    #agenda .liste LI,#agenda .liste LI H2{float: none;}
    #agenda a.plus{display: block; width: 100%; float: none;}
    
    .article .col_gauche #listeMenu {
        left: 0;
        margin-left: 0;
        padding-left: 5%;
        width: 95%;
    }
    .article .col_gauche #listeMenu LI UL{width: 100%;}
    #ariane li:last-child, #ariane li.last{ width: 100%; }
    
    .liste li{padding-bottom: 13px; border-bottom: 1px solid #E7E7E7;}
    .liste li:last-child,.liste li.last{border-bottom: 0; padding-bottom: 0;}
    .liste li a.logo{width: 100%; margin: 13px 0 0 !important; border: 0 !important;}
    .liste li a.logo img{border: 1px solid #E7E7E7; padding: 1%;}
    .liste LI A.logo + div, .liste LI.avec_logo div{width: 100%;}
    
}
@media (max-width: 639px) {
    
    .events .col_droite LI.nivo1, .article .col_droite LI.nivo1{
        padding: 25px 2.5% 20px;
        width: 95%;
    }
    .facebook_feed li, .tweet li{ width: 435px !important; }
    .pied_cnil{ padding-top: 20px; }
    .pied_cnil img{
        bottom: 32px;
        margin: 0;
        position: absolute;
        top: 5px;
        right: 8px;
    }
    #bandeau_bleu li.jcarousel-item{ width: 227px; }
    .jcarousel-prev-horizontal, .jcarousel-next-horizontal { display: none !important; }    
    
    .jcarousel-container-horizontal{ width: 95%; }
    
}

@media (max-width: 480px) {
    #bandeau { margin-top: 110px !important; }
    #bandeau_bleu li.jcarousel-item{
        padding: 0 5px 0 0;
        width: 200px;
    }
    .col_gauche .jcarousel-container-horizontal {
        left: 0;
        padding: 0 7%;
        width: 86%;
    }
    .jcarousel-prev-horizontal{left: 0;}    
    .jcarousel-next-horizontal{right: 0;}
    
    #section_2 .col_droite{ top: 4px; }
    
    #pied .col_droite ul {
        border-left: 0 none;
        border-top: 1px solid #999999;
        margin-bottom: 0;
        padding-top: 10px;
        text-align: center;
        width: 100% !important;
    }
    #pied .col_droite ul#plan_1{border-top: 0; padding-top: 0;}
    #pied .newsletter{margin-top: 0; height: auto;}
    
    #pied .copy{
        bottom: -32px;
        left: 0;
        text-align: center;
        width: 100%;
    }
    
    #pied H3.titre {
        color: #000000;
        margin-bottom: 15px;
        text-align: center;
    }
    #pied .section{padding-bottom: 20px;}
    
    #section_3 div.col_gauche ul{width: 195px; margin: auto;}
    
    #pied .newsletter{width: 100%; padding: 15px 0;}
    
    #pied .newsletter DIV.view {
        float: left;
        left: 3%;
        position: relative;
        top: 16px;
        width: 94%;
    }
    #pied .newsletter form.news {
        left: 3%;
        position: relative;
        right: auto;
        top: 18px;
        width: 94%;
    }
    #pied .newsletter FORM.news P {
        float: left;
        left: 0;
        position: relative;
        top: 0;
        width: 100%;
        margin-top: 7px;
    }
    #pied .newsletter DIV.view,#pied .newsletter form.news{top: 0;}
    #pied .newsletter FORM.news INPUT.coche,
    #pied .newsletter FORM.news LABEL.decal{left: 0;}
    #pied .newsletter FORM.news LABEL{width: 100%;}
    #pied .newsletter FORM.news LABEL.decal{width: auto;}
    
    #page { padding-top: 70px; }
    
    col_gauche .imageflow .caption{top: 0;}
    
}

@media (max-width: 479px) {
    #bandeau { margin-top: 145px !important; }
    .facebook_feed li, .tweet li{ width: 322px !important; }
    #entete{ top: 128px; }
    #entete #search .formulaire_recherche{ width: 100%; }
    #entete #search {
        margin-left: 15px;
        width: 100%;
        margin-right: 0;
        padding-right: 0 !important;
    }
    #entete #search input#recherche { padding-right: 33px; width: 100%; }
    h1#logo_entete{ width: 190px; top: 95px; }
    #navigation{ top: 180px; }
    #entete { top: 70px; height: 185px; }
    #bandeau { margin-top: 191px !important; }
}

@media (max-width: 360px) {
    #navigation{top: 168px;}
    #navigation LI#ACTUALITES.nivo_1 .sous_nav{width: 320px;}
    #navigation li#ACTUALITES.nivo_1 .sous_nav #actus{width: 177px;}
    #navigation li#ACTUALITES.nivo_1 .sous_nav #evenements{width: 140px;}
    #entete{top: 70px;}
    .col_centre div.actu ul.liste_actions li{width: 100%; margin-top: 13px;}
}

@media (max-width: 359px) {
    .facebook_feed li, .tweet li{ width: 284px !important; }  
    #onglets_reseaux li a {
        padding: 0;
        text-indent: -9999px;
        width: 47px;
    }
}

@media (max-width: 320px) {
    #logo_entete{ width: 210px; }
}