@font-face {
    font-family: 'Lato-Light';
    src: url('../fonts/Lato-Light.eot');
    src: local('☺'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.woff2') format('woff2'), url('../fonts/Lato-Light.ttf') format('truetype'), url('../fonts/Lato-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-LightItalic';
    src: url('../fonts/Lato-LightItalic.eot');
    src: local('☺'), url('../fonts/Lato-LightItalic.woff') format('woff'), url('../fonts/Lato-LightItalic.woff2') format('woff2'), url('../fonts/Lato-LightItalic.ttf') format('truetype'), url('../fonts/Lato-LightItalic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-Regular';
    src: url('../fonts/Lato-Regular.eot');
    src: local('☺'), url('../fonts/Lato-Regular.woff') format('woff'), url('../fonts/Lato-Regular.woff2') format('woff2'), url('../fonts/Lato-Regular.ttf') format('truetype'), url('../fonts/Lato-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-Italic';
    src: url('../fonts/Lato-Italic.eot');
    src: local('☺'), url('../fonts/Lato-Italic.woff') format('woff'), url('../fonts/Lato-Italic.woff2') format('woff2'), url('../fonts/Lato-Italic.ttf') format('truetype'), url('../fonts/Lato-Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-Bold';
    src: url('../fonts/Lato-Bold.eot');
    src: local('☺'), url('../fonts/Lato-Bold.woff') format('woff'), url('../fonts/Lato-Bold.woff2') format('woff2'), url('../fonts/Lato-Bold.ttf') format('truetype'), url('../fonts/Lato-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-BoldItalic';
    src: url('../fonts/Lato-BoldItalic.eot');
    src: local('☺'), url('../fonts/Lato-BoldItalic.woff') format('woff'), url('../fonts/Lato-BoldItalic.woff2') format('woff2'), url('../fonts/Lato-BoldItalic.ttf') format('truetype'), url('../fonts/Lato-BoldItalic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-Black';
    src: url('../fonts/Lato-Black.eot');
    src: local('☺'), url('../fonts/Lato-Black.woff') format('woff'), url('../fonts/Lato-Black.woff2') format('woff2'), url('../fonts/Lato-Black.ttf') format('truetype'), url('../fonts/Lato-Black.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato-BlackItalic';
    src: url('../fonts/Lato-BlackItalic.eot');
    src: local('☺'), url('../fonts/Lato-BlackItalic.woff') format('woff'), url('../fonts/Lato-BlackItalic.woff2') format('woff2'), url('../fonts/Lato-BlackItalic.ttf') format('truetype'), url('../fonts/Lato-BlackItalic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.texte_std {
    display: block;
    position: relative;
    height: auto;
    margin: 10px 20px 10px 20px;
    font-family: 'Lato-light';
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    color: black;
}
.texte_std a{
    cursor: pointer;
    font-family: 'Lato-Regular';
    color: #f7901e;
    cursor: pointer;
}
.container
{
    width: 1250px;
    height: auto;
    display: block;
    position: relative;
    margin: auto;
}
.navigation
{
    width: 1230px;
    height: 60px;
    display: block;
    position: relative;
    background-color:black;
    margin: auto;
}
.section_lcc
{
    width: 1230px;
    height: 300px;
    position: relative;
    display: block;
    margin: auto;
    padding:10px;
}
#boite_1
{
    width: 610px;
    height: 300px;
    display: inline-block;
    position: relative;
    background-image: url(../images/tuiles/phebus_mur.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_1:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_2
{
    width: 300px;
    height: 300px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background-image: url(../images/tuiles/piz_sign.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_2:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}#boite_3
{
    width: 300px;
    height: 300px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background-image: url(../images/tuiles/mie_pack.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_3:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

/* section #2 */
.section_2
{
    width: 1250px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin: auto;
    
}
#boite_4
{
    width: 300px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background-image: url(../images/tuiles/ua_rollup.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_4:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_5
{
    width: 610px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background-image: url(../images/tuiles/straccel_logo.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_5:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.boite_super /* cette boite superpose 2 petites boite 300 x 300 */
{
    width: 300px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin-left: 6px;
    
}
#boite_6
{
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background-image: url(../images/tuiles/casino_pere.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_6:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}#boite_7
{
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background-image: url(../images/tuiles/prevost_p55.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_7:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

/* section 3 */

.section_3
{
    width: 1250px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin: auto;
    margin-top: 5px;
    
}
#boite_8
{
    width: 610px;
    height: 610px;
    display: inline-block;
    position: relative;
    background-image: url(../images/tuiles/phi_brochure.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_8:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.boite_super_2
{
    width: 300px;
    height: auto;
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
#boite_9
{
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background-image: url(../images/tuiles/harley_bilbord.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_9:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}#boite_10
{
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background-image: url(../images/tuiles/rue_abribus.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_10:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_11
{
    width: 300px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background-image: url(../images/tuiles/bnc_cover.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_11:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.section_4
{
    width: 1250px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin: auto;
    margin-top: 5px;
    cursor: pointer;
}
#boite_12
{
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background-image: url(../images/tuiles/fcb_op2017.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;   
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_12:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_13
{
    width: 300px;
    height: 300px;
    display: block;
    position: relative;
    background-image: url(../images/tuiles/mas_cover.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_13:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_14
{
    width: 300px;
    height: 610px;
    display: inline-block;
    position: relative;
    background-image: url(../images/tuiles/betabloc_IMG_9796_lr.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_14:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_15
{
    width: 610px;
    height: 610px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background-image: url(../images/tuiles/desj_cover.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#boite_15:hover
{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.footer
{
    width: 1230px;
    height: 60px;
    display: block;
    position: relative;
    background-color:black;
    margin: auto;
    margin-top: 5px;
}



/* filtre foncé pour affichage du texte */