@media screen and (max-width: 767px){
    /* Base ===================================================================== */

    body,
    .page-col-2, 
    .page-col-2.page-sas {
        /*box*/ 
        width: 430px; 
        /*border */
        /*background*/
        /*fonts*/
        /* autres */  
    }

    /* Agencements ============================================================== */

    .grid-sizer, .item-grid.w1, .item-grid.w2, .stamp.w1, .stamp.w2,
    .page-col-2 aside .item-grid, .page-col-2 aside .stamp {
        /*box*/ 
        width: 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .item-grid.solidaire, .stamp.solidaire {    
        /*box*/ 
        height: auto;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .onlyDesktop, 
    .bloc-agenda .onlyDesktop, 
    .BlocAgenda .onlyDesktop {
        /*box*/ 
        display: none;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */  
    }

    .onlyMobile, 
    .bloc-agenda .onlyMobile, 
    .BlocAgenda .onlyMobile {
        /*box*/ 
        display: table-row;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .bloc-agenda {
        /*box*/ 
        width: auto;
        height: auto;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .bloc-agenda .agendaBlocMobile01 {
        /*box*/ 
        display : inline-block;
        margin-top : 10px;
        vertical-align: bottom;
        /*border */
        /*background*/
        /*fonts*/
        font-size: 15px;
        letter-spacing : 0;
        color: #ea001b;
        /* autres */   
    }

    .item-grid.BlocAgenda, .stamp.BlocAgenda {    
        /*box*/ 
        height: auto;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    } 

    .BlocAgenda .agendaBloc02 {
        display: flex;
        justify-content: center;
    }

    .BlocAgenda .agendaBloc02>span {
        /*box*/ 
        display: inline;
        /*border */
        /*background*/
        /*fonts*/
        font-size: 16px;
        line-height: 18px;
        letter-spacing: 0.6px;
        /* autres */   
    }

    .BlocAgenda .date-j {
        /*box*/ 
        padding: 0 5px;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .BlocAgenda .agendaBlocMobile01 {
        /*box*/ 
        margin-top : 10px;
        /*border */
        /*background*/
        /*fonts*/
        color: #D3001A;
        text-transform: uppercase;
        font-size : 14px;
        line-height : 16px;
        /* autres */   
    }

    .BlocAgenda .agendaBlocMobile02 {
        /*box*/ 
        /*border */
        /*background*/
        /*fonts*/
        font-size : 14px;
        line-height : 16px;
        /* autres */   
    }

    .BlocAgenda .agendaBlocMobile03 {
        /*box*/ 
        margin-top : 10px;
        /*border */
        /*background*/
        /*fonts*/
        font-family: "A2 Regular Black",'Montserrat','Lato Black',Futura,sans-serif;
        font-weight: 900;
        color: #D3001A;
        text-transform: uppercase;
        font-size : 16px;
        line-height : 18px;
        /* autres */
    }

    .page-col-2 main {
        /*box*/ 
        box-sizing: border-box;
        width : 100%;
        margin-right : 0;
        padding: 0;
        /*border */
        border : 0;
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .page-col-2 aside {
        /*box*/ 
        width : 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .item-grid.w3, .stamp.w3 {
        /*box*/ 
        width: 430px;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .item-grid.w4, .stamp.w4 {
        /*box*/ 
        width: 430px;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    #socialAside {
        /*box*/
        width : 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */  
    }

    .hasGrilleImgNav main {
        /*box*/ 
        width : 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    .hasGrilleImgNav aside {
        /*box*/ 
        width : 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    #iconoAside {
        /*box*/ 
        display : none;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */  
    }

    .bloc-agenda .agendaBlocMobile03 {
        /*box*/ 
        display : inline-block;
        margin-top : 10px;
        vertical-align: bottom;
        /*border */
        /*background*/
        /*fonts*/
        font-weight : bold;
        font-size: 20px;
        letter-spacing : 0;
        color: #ea001b;
        /* autres */   
    }

    .bloc-agenda .agendaBloc02 .table-cell > b {
        /*box*/ 
        display: inline;
        padding : 0 5px;
        /*border */
        /*background*/
        /*fonts*/
        font-size: 20px;
        line-height: 16px;
        letter-spacing: 0.65px;
        /* autres */   
    }

    /* Modules ================================================================== */

    .menu-listeSite > li a{
        /*box*/
        width: 430px; 
        /*border */
        /*background*/
        /*fonts*/
        /* autres */   
    }

    #mainMenu, #liteMenu {
        /*box*/ 
        position: absolute;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */    
    }

    #mainMenu,
    #mainMenu1 > li, #mainMenu2 > li,
    #mainMenu1 > li.isNotCollapse, #mainMenu2 > li.isNotCollapse  {
        /*box*/ 
        width : 100%;    
        /*border */
        /*background*/
        /*fonts*/   
        /* autres */  
    }

    #mainMenu {
        /*box*/    
        /*border */
        /*background*/
        background : #FFF;
        /*fonts*/   
        /* autres */ 
        top : 38px; 
        -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
        -o-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, Direction=180, Strength=10);
    }

    #mainMenu1 > li.isNotCollapse li, #mainMenu2 > li.isNotCollapse li  {
        /*box*/ 
        width : 100%;    
        /*border */
        /*background*/
        /*fonts*/   
        /* autres */  
    }

    #mainMenu1 li li a.afficherTous {
        /*box*/  
        width: 100%; 
        /*border */
        /*background*/ 
        /*fonts*/  
        /* autres */  
    } 

    #zoneRecherche input[type="text"] {
        /*box*/ 
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /*border */
        box-sizing: border-box;
        border-left: 5px solid #000;
        border-right: 5px solid #000;
        /*background*/
        /*fonts*/  
        text-align : center;
        /* autres */ 
    }

    #zoneRecherche input[type="text"]:focus {
        /*box*/ 
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /*border */
        box-sizing: border-box;
        /*background*/
        /*fonts*/  
        text-align : center;
        /* autres */ 
    }

    #zoneRecherche input[type="image"] {
        /*box*/ 
        display : none;
        /*border */
        /*background*/
        /*fonts*/    
        /* autres */ 
    }

    #menuAside {
        /*box*/ 
        max-width : 430px;
        width : 100%; 
        /*border */
        /*background*/
        /*fonts*/
        /* autres */  
    }

    .bloc-logoSite, #index .bloc-logoSite {
        /*box*/
        width: auto;
        height: auto;
        /*border */
        /*background*/
        background-position: center center;
        /*fonts*/
        text-align: center;
        /* autres */
    }

    .bloc-logoSite img {
        /*box*/
        width: 100%;
        height: auto;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */
    }

    .breadcrumb {
        /*box*/
        display: none;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */
    }

    .footer-content > div {
        /*box*/
        width: 49%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    /* FIGURE ------------------------------------------------------------------- */

    .item-grid.cols-1.textpic .csc-textpic img {
        max-width: 100%;
        width: auto !important;
        height: auto !important;
    }
    .item-grid.cols-1 .csc-textpic>div {
        width: 100% !important;
    }

    .cols-1 figure, .cols-1 figcaption { 
        max-width : 100%;
        width : 100%;
    }

    .cols-1 .csc-textpic-intext-left-nowrap .csc-textpic-text {
        margin-left : 0;
    }

    .cols-1 .csc-textpic-intext-right-nowrap .csc-textpic-text {
        margin-right : 0;
    }

    .cols-2 figure, .cols-2 figcaption { 
        width : 100%;
    }

    .cols-3 figure, .cols-3 figcaption { 
        width : 100%;
    }

    .cols-4 figure, .cols-4 figcaption { 
        width : 100%;
    }

    .csc-textpic-intext-left figure, .csc-textpic-intext-left-nowrap figure {
        padding-right : 0;
    }

    .csc-textpic-intext-right figure, .csc-textpic-intext-right-nowrap figure {
        padding-left : 0;
    }

    .csc-textpic-intext-right-nowrap figcaption, .csc-textpic-intext-right figcaption {   
        margin-left : 0;
    }

    .bgNone.BlocContenuSdL .label,
    .bgWhite.BlocContenuSdL .label,
    .bgLight.BlocContenuSdL .label,
    .bgDark.BlocContenuSdL .label,
    .bgInstitutionnel.BlocContenuSdL .label,
    .bgExpoPermanente.BlocContenuSdL .label,
    .bgExpoTemporaire.BlocContenuSdL .label,
    .bgEvenement.BlocContenuSdL .label,
    .bgActivite.BlocContenuSdL .label,
    .bgRessources.BlocContenuSdL .label,
    .bgBiblio2.BlocContenuSdL .label,
    .bgBiblio3.BlocContenuSdL .label,
    .bgCde.BlocContenuSdL .label,
    .bgEnseignant.BlocContenuSdL .label,
    .bgJunior.BlocContenuSdL .label { 
        padding : 0;
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 {
        /*box*/ 
        display : block;
        height : auto;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 > a {
        /*box*/ 
        display : block;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 > a::before{
        /*box*/ 
        display : none;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 > a::after {
        background-position: -117px -111px;
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .label,
    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .titre,
    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .sousTitre,
    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .date,
    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .public,
    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .texte
    {
        /*box*/ 
        max-width : 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .icono {
        position: relative;
        top: 0;
        z-index: initial;
        overflow: auto;
        width: 100%;
        height: 205px;
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .label {
        /*box*/ 
        padding: 0;
        /*border */
        /*background*/    
        /*fonts*/
        font-size: 11px;
        line-height: 14px;
        letter-spacing: 1px;
        color : #000;
        background : none;
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .titre {
        /*box*/ 
        /*border */
        /*background*/    
        /*fonts*/
        font-size: 20px;
        line-height: 20px;
        letter-spacing: -0.5px;
        color : #000;
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .sousTitre  {
        /*box*/ 
        /*border */
        /*background*/    
        /*fonts*/
        font-size: 15px;
        line-height: 15px;
        letter-spacing: 0.75px;
        color : #000;
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .date {
        /*box*/ 
        /*border */
        /*background*/    
        /*fonts*/
        font-size: 13px;
        line-height: 13px;
        letter-spacing: 0.5px;
        color : #000;
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .public {
        /*box*/ 
        /*border */
        /*background*/    
        /*fonts*/
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 0.5px;
        color : #000;
        /* autres */ 
    }

    .page-col-2.page-sas .BlocContenuSdL.colpos-0 .texte {
        /*box*/ 
        /*border */
        /*background*/    
        /*fonts*/
        color : #000;
        /* autres */ 
    }

    /*[V] - 23/10/2019 - Redimensionnement des images */
    @media screen and (min-width: 480px) and (max-width: 767px){
        .BlocContenuSdL .icono320,
        .BlocContenuSdL .icono768,
        .BlocContenuSdL .icono1024,
        .BlocContenuSdL .icono1130,
        .BlocContenuSdL .icono1330 { display:none; }

        .BlocContenuSdL .icono480{
            display:block;
            min-height:100%;
            z-index: 10;
        }

        #index .colpos-0:not(.BlocAgenda) span.icono480 {
            position: absolute;
            top: 0; left: 0;
        }
    }
    /* FIN */

    /* [V] - 23/10/2019 - Patch position du texte pour les écrans < 768px */
    @media screen and (max-width: 767px){
        #index .colpos-0:not(.BlocAgenda) .iconoContainer {
            position: relative;
            max-height: 205px;
        }

        .page-col-2.page-sas .BlocContenuSdL.colpos-0 .iconoContainer {
            position: relative;
            top: 0;
            z-index: initial;
            overflow: auto;
            width: 100%;
            height: 205px;
        }

        .page-col-2.page-sas .BlocContenuSdL.colpos-0 .icono {
            margin: 0;
        }
    }
    /* FIN */


    /* TITRES ------------------------------------------------------------------- */

    .mainTitre a {
        /*box*/    
        /*border */
        /*background*/
        /*fonts*/  
        font-size : 28px;
        line-height : 42px;
        /* autres */ 
    }

    /* Etats ==================================================================== */

    /* Grille-layout ------------------------------------------------------------ */

    .item-grid.item-grid-hasGrilleImgNav.w1.h1,
    .item-grid.item-grid-hasGrilleImgNav.w1.h2,
    .item-grid.item-grid-hasGrilleImgNav.w2.h1,
    .item-grid.item-grid-hasGrilleImgNav.w2.h2 {
        height: auto;
        min-height: 100px;
    }

    .item-grid.item-grid-hasGrilleImgNav .itemGridMenu {
        height: 100%;
        min-height: 100px;   
    }

    .item-grid.item-grid-hasGrilleImgNav.w1.h1 .itemGridMenu[style^="background"]::before,
    .item-grid.item-grid-hasGrilleImgNav.w1.h2 .itemGridMenu[style^="background"]::before,
    .item-grid.item-grid-hasGrilleImgNav.w2.h1 .itemGridMenu[style^="background"]::before,
    .item-grid.item-grid-hasGrilleImgNav.w2.h2 .itemGridMenu[style^="background"]::before {
        content: '';
        width: 25px;
        height: 25px;
        background-position: -222px -111px;
        background-image: url(/typo3conf/ext/sdl_gabarits/Resources/Public/Images/ui/spritesheet.png);
        background-repeat: no-repeat;
        display: block;
        position: inherit;
    }

    .itemGridMenu .container-grilleImgNav::after {
        content: initial;
    }

    .item-grid.item-grid-hasGrilleImgNav.w1.h1 .sprite-__25px_4,
    .item-grid.item-grid-hasGrilleImgNav.w1.h2 .sprite-__25px_4,
    .item-grid.item-grid-hasGrilleImgNav.w2.h1 .sprite-__25px_4,
    .item-grid.item-grid-hasGrilleImgNav.w2.h2 .sprite-__25px_4 {
        display: none;
    }

    .item-grid-hasGrilleImgNav .container-grilleImgNav {
        padding-left: 15px;
        max-width: 350px;
    }

    .item-grid-hasGrilleImgNav.w2.h2 .itemGridMenu .titre {
        font-size: 22px;
        line-height: 22px;
        letter-spacing: 0.5px;
    }

    .item-grid.item-grid-hasGrilleImgNav .itemGridMenu {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* Themes =================================================================== */

    #index .bloc-logoSite, #index .bloc-logoSite img {
        /*box*/
        width: auto;
        height: 165px;
        text-align: center;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */
    }

    #index .colpos-0:not(.BlocAgenda) {
        /*box*/ 
        width: 100%;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) a {
        /*box*/ 
        display : block;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) span {
        /*color: #000;*/
    }

    #index .colpos-0:not(.BlocAgenda).bgNone .label              {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgWhite .label             {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgLight .label             {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgDark .label              {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgInstitutionnel .label    {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgExpoPermanente .label    {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgExpoTemporaire .label    {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgEvenement .label         {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgActivite .label          {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgRessources .label        {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgBiblio2 .label           {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgBiblio3 .label           {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgCde .label               {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgEnseignant .label        {color:#000000;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgJunior .label            {color:#ffffff;background:transparent;}
    #index .colpos-0:not(.BlocAgenda).bgDarkInv .label           {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgInstitutionnelInv .label {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgExpoPermanenteInv .label {color:#98609e;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgExpoTemporaireInv .label {color:#2878c8;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgEvenementInv .label      {color:#26a698;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgActiviteInv .label       {color:#7ea100;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgRessourcesInv .label     {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgBiblio2Inv .label        {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgBiblio3Inv .label        {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgCdeInv .label            {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgEnseignantInv .label     {color:#000000;background:#fff;}
    #index .colpos-0:not(.BlocAgenda).bgJuniorInv .label         {color:#000000;background:#fff;}  

    #index .colpos-0:not(.BlocAgenda) .icono {
        /*box*/ 
        position: relative;
        height : 205px;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) .label {
        /*box*/ 
        /*border */
        /*background*/
        /*fonts*/
        color : #000;
        font-size : 11px;
        line-height : 14px;
        letter-spacing: 1px;
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) .titre {
        /*box*/ 
        /*border */
        /*background*/
        /*fonts*/
        font-size: 22px;
        line-height: 22px;
        letter-spacing: 0.5px;
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) .sousTitre {
        /*box*/ 
        /*border */
        /*background*/
        /*fonts*/    
        font-size: 15px;
        line-height: 15px;
        letter-spacing: 0.75px;
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) .date {
        /*box*/ 
        /*border */
        /*background*/
        /*fonts*/
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 0.5px;
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) .public {
        /*box*/ 
        /*border */
        /*background*/
        /*fonts*/
        font-size : 14px;
        line-height : 14px;
        letter-spacing: 0.5px;
        /* autres */ 
    }

    #index .colpos-0:not(.BlocAgenda) .texte {
        /*box*/ 
        height : auto;
        overflow: auto;
        /*border */
        /*background*/
        background : none;
        /*fonts*/
        color : #000;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.1px;
        /* autres */ 
    }

    /* Tempo */
    #expoTemporaire .itemGridMenu {
        /*box*/ 
        justify-content: inherit;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    #expoTemporaire .itemGridMenu .container-grilleImgNav {
        /*box*/ 
        margin-bottom: 0px;
        /*border */
        /*background*/
        /*fonts*/
        /* autres */ 
    }

    #expoTemporaire .item-grid.item-grid-hasGrilleImgNav .itemGridMenu::before {
        content: '';
        width: 25px;
        height: 25px;
        background-position: -117px -111px;
        background-image: url(/typo3conf/ext/sdl_gabarits/Resources/Public/Images/ui/spritesheet.png);
        background-repeat: no-repeat;
        display: block;
        position: inherit;
    }
}