/* CSS Document */
        #zone {
            background-color: white;
        }
        
        .sup.vignette_accueil {
            width: calc(50% - 24px);
            margin: 0 8px;
        }
        
        #Entreprises, #Environnement {
            margin-left: 16px;
        }
        
        .inf.vignette_accueil {
            width: calc(25% - 20px);
            margin: 0 8px;
        }
        
        .vignette_accueil {            
            background-size: 100%;
          transition: background-size .3s ease-out;
       }
        .vignette_accueil:hover {
             background-size: 103%;
         }

        .vignette_bande {
            width: calc(100% - 32px);
            left: 16px;
            bottom: 16px;
            height: 60px;
        }
        
        body.homepage .highlight {
            padding-right: 26px;
        }
        
        span.vertical-line{
            font-size: .95vw;
            vertical-align: text-top;
        }
        
        #Environnement .vignette_bande,
        #Services .vignette_bande,
        #Metiers .vignette_bande,
        #Apropos .vignette_bande {
            background-color: rgba(149, 149, 149, 0.85);
        }
        
        
        #Entreprises .image_fond { background-image: url(/fileadmin/images/accueil/entreprises-2.jpg); }
        #Particuliers .image_fond { background-image: url(/fileadmin/images/accueil/particuliers-2.jpg); }
        #Environnement {
            background-image: url(/fileadmin/images/accueil/environnement-2.jpg);
        }
        #Services {
            background-image: url(/fileadmin/images/accueil/services-2.jpg);
        }
        #Metiers {
            background-image: url(/fileadmin/images/accueil/carrieres-2.jpg);
        }
        #Apropos {
            background-image: url(/fileadmin/images/accueil/a-propos-2.jpg);
        }
        
        #Particuliers .vignette_bande {
            background-color: rgba(252, 204, 79, 0.85);
        }
        
        footer {
            padding: 16px;
        }
        
        footer #Focus {
            background-color: white;
        }
        footer #Focus .bloc {
            border: none; 
        }
        footer #Focus .bloc.title {
            padding-top: 44px;
            height: 102px;
            margin-bottom: 16px;
        }    
        
        footer #Focus section {
            margin-bottom: 16px;
        }
        
        footer #Focus section.half {
            width: calc(50% - 8px);
            margin-left: auto;
            margin-right: auto;
        }
        
        footer #Focus section .liste-vignettes {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 -8px;
        }
    
        footer #Focus section .vignette {
            position: relative;
            width: calc(25% - 16px);
            margin: 0 8px 16px 8px;
            background-color: #eeeeee;
        }

        footer #Focus section.half .vignette {
            width: calc(50% - 16px);
            margin: 0 8px;
        }
    
        #container {
            width: 50%;
        }

        .dummy {
          margin-top: 100%;
          /* 4:3 aspect ratio */
        }

        .content {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
            overflow: hidden;
            cursor: pointer;
        }
        
        .image-vignette {
            height: 100%;
            width: 100%;
            object-fit: cover;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }  
        
        .vignette:hover .image-vignette {
            transform: scale(1.03);
        }
        
        footer #Focus .title {
             width: 100%;
            height: 100%;
            position: relative;"
        }
        
        .vignette .vignette_bande { 
            display: table; 
            height: 3.125vw; 
            background-color: rgba(149, 149, 149, 0.85);
            transition: .2s;
       }
        
        .entreprises .vignette_bande { 
            background-color: rgba(39, 88, 141, 0.85); 
        }
        
        .particuliers .vignette_bande { 
            background-color: rgba(252, 204, 79, 0.85); 
        }
 
        .vignette_bande h2,
        footer #Focus .vignette_bande h2 {
            position: relative;
            bottom: auto;
            display: table-cell;
            height: 3.125vw;
            width: 100%;
            vertical-align: middle;
            left: 8px;
             margin: 0;
            padding: 0.3vw 0 0 0;
            color: #FFF;
            font-size: 1.2vw;
            font-family: Avenir-Bold, Arial, Helvetica, sans-serif;
            text-transform: uppercase;
           text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
       }
        
        .vignette .vignette_bande .legende {
            position: absolute;
            left: 8px;
            top: 2.5vw;
            color: white;
            font-size: 12px;
            width: calc(100% - 16px);
            opacity: 0;
            transition: 0s;
        }
        
        .vignette:hover .vignette_bande {
            padding-bottom: 2vw;
            height: 5.125vw;
         }
        
        .vignette:hover .vignette_bande .legende,
        footer #Focus .vignette:hover .vignette_bande .legende {
            opacity: 1;
             transition: .3s ease-out .1s;
       }
        
        .image_fond {
            height: 100%;
            transition: .3s ease-in-out;
        }

        .vignette:hover .image_fond {
            transform: scale(1.03);
        }
                
        .baseline {
            position: absolute;
            top: 80px; 
            left: 50%;
            margin-left: -400px;
            width: 800px;
            font-size: 30px;
            color: #ffffff;"
        }
        
        section.page-5 .introduction {
            height: auto;
        }
        
        section.page-5 .introduction.entete {
                padding-bottom: 16px;
        }
        
        @media only screen and (max-width: 1399px) {
            .vignette:hover .vignette_bande {
                height: 7.5vw;
                padding-bottom: 4.5vw;
            }
            
            .vignette:hover .vignette_bande .legende {
                top: 2.8vw;
            }
        }
        
        @media only screen and (max-width: 1023px) {
            #Menu button.navbar-toggle {
                margin-right: 16px;
            }
            
            #Menu .navbar-collapse {
                width: calc(100% - 32px);
                margin-left: 16px;
            }
            .inf.vignette_accueil {
                width: calc(50% - 24px);
                margin: 16px 8px 0 8px;
            }
            
            #Metiers { 
                margin-left: 16px;
            }
            
            .vignette .vignette_bande {
                height: 32px;
            }
            .vignette_bande h2, footer #Focus .vignette_bande h2 {
                font-size: 12px;
            }
            span.vertical-line{
                font-size: 9px;
            }

            footer #Focus section.half {
                width: 100%;
            }
            
            footer #Focus section .vignette {
                width: calc(50% - 16px);
            }
            
            .baseline {
                top: 50px; 
                left: 20px;
                margin-left: 0;
                width: auto;
            }
 
            section.page-5 .introduction.entete {
                padding-top: 20px;
            }
        }

        @media only screen and (max-width: 767px) {
            .sup.vignette_accueil,
			.inf.vignette_accueil {
                width: calc(100% - 32px);
                margin: 8px 0 8px 16px;
            }
            
            #zone .redactionnel-accueil {
                height: auto;
            }
            
            #BandeSuperieure,
            #BandeInferieure {
                position: relative;
                top: 0;
                height: auto;
            }
            
            .vignette:hover .vignette_bande {
                height: 23vw;
                padding-bottom: 15vw;
            }
            
            .vignette .vignette_bande .legende,
            .vignette:hover .vignette_bande .legende {
                top: 6.5vw;
            }
            
            footer {
                clear: both;
                padding-top: 8px;
            }
            
            footer #Focus section {
                margin-bottom: 0;
            }
            
            footer #Focus section.half .vignette,
            footer #Focus section .vignette {
                width: 100%;
                margin: 0 0 16px 0;
            }
            
            .baseline {
                top: 30px;
                font-size: 4vw;
            }
       }