/* Alerte */
noscript #nsalerte {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(242, 242, 242, .42);
    z-index: 2000
}

noscript .popup_block_nsalerte {
    position: relative;
    margin: 18% auto;
    width: 773px;
    height: auto;
    font-size: 12px;
    background: #fff;
    padding: 7px;
    border: 12px solid #fff;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px
}

noscript .popup_block_nsalerte p {
    text-align: center;
    color: #000;
    font-size: 150%;
    font-weight: lighter
}

body {
    width: 100%;
    margin: auto;
    line-height: 1.2;
    font-family: futura_ltbook, sans-serif;
    font-size: 14px;
}

a {
    color: #000;
    text-decoration: none;
    cursor:default
}

a:hover {
    color: #ccc;
    text-decoration:none
}

.header {
    width: 1200px;
    margin:30px auto 42px auto;
}

.header img {
    width: 280px;
}

.header .home-title {
    margin-left: -2px;
    font-size: 36px;
}

.main {
    display: grid;
    padding: 5px;
    margin: 0 auto 7px auto;
    grid-template-rows: auto;
    grid-column-gap: 50px;
    width: 1200px;
    grid-template-columns:250px 900px
}

#main-menu {
    margin-top: -3px;
    width:250px
}

#nav-fol {
	margin-bottom: 73px;
}

#nav-menu-B {
    margin-bottom: 42px;
    font-size:15px;
}

.selected, .selected a {
    color: #ccc;
}

#lang {
    text-transform:uppercase;
}

#lang span {
	font-weight: 200;
	font-size: 18px;
}

#lang u {
    text-decoration-line: none;
	border-bottom: 1px solid #f6d528;
}

.mm-item {
    cursor: default;
    margin-bottom: 8px;
    font-size: 15px;
}

.mm-item:hover {
    color:#ccc;
}

#main-content {
    width: 900px;
    opacity: 1;
    transition: opacity .5s;
    text-align:center
}

#main-content.fadeout {
    opacity:0
}

.justify {
    text-align:justify
}

.center {
    text-align:center
}

.right {
    text-align:right
}

.left {
    text-align:left
}

.w600 {
    width:600px
}

h1 {
    margin-left: -1px;
    font-size: 18px;
    font-weight:500
}

.fs-sxxl {
    font-size:38px
}

.fs-xxl {
    font-size:28px
}

.fs-xl {
    font-size:20px
}

.fs-l {
    font-size:18px
}

.fs-m {
    font-size:16px
}

.fs-s {
    font-size:12px
}

.fs-xs {
    font-size:11px
}

.fs-U {
    text-transform:uppercase
}

.fs-gris {
    color:#797979
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.titre {
    font-size: 18px;
    color:#ccc
}

#folio img {
    max-width: 900px;
    max-height: 600px
}

#folio video {
    width: 900px;
    height: 600px;
    z-index:-1
}

.folios_page {
    display: table-cell;
    width: 900px;
    height: 604px;
    vertical-align:middle;
}

.folios_page img {
    height: auto;
    max-width: 100%;
    max-height:100%
}

.folio-caption {
    width: 600px;    
    margin:0 auto 0 auto;
    max-height: 600px;
    overflow-y: scroll; 
	
}

.folio-caption-child {
    font-size: 16px;
    text-align:left
}

.slides a {
    display:none
}

.slides span {
    display:none
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration:1.5s
}

@-webkit-keyframes fade {
    from {
        opacity:.4
    }

    to {
        opacity:1
    }
}

@keyframes fade {
    from {
        opacity:.4
    }

    to {
        opacity:1
    }
}

.folio-navig {
    position: absolute;
    width: 900px;
    margin: 0 auto 0 auto;
    z-index:500
}

.folio-navig a:hover {
    color:#6fcdf0
}

#folio-compteur {
    width: 30px;
    margin: 8px auto 0 auto;
    color: #d3d3d3;
    opacity: .9;
    text-align: center;
    font-size:22px
}

#post-prev {
    width: 250px;
    min-height: 40px;
    float: left;
    text-align: left;
    background: url(images/post_prev.svg) 0 50% no-repeat;
    z-index:500
}

#post-next {
    width: 250px;
    min-height: 40px;
    float: right;
    text-align: right;
    background: url(images/post_next.svg) 100% 50% no-repeat;
    z-index:500
}

.about {
    width: 900px;
    height: 673px;
    margin-top: -17px;
    text-align: left;
    overflow-x:scroll
}

.about img {
	max-width: 900px;
}

blockquote {
    padding: 30px 0 5px 34px;
    background: url(/css/images/bq.svg) no-repeat;
    z-index:1000
}

blockquote p {
    color: #8c8888;
    font: italic 14px 'Courier New', Courier, Geneva, "Times New Roman", times;
    line-height: 1.2;
    text-align:justify
}

.contact {
    width: 900px;
    height: 600px;
    margin: -17px auto 0 auto;
    text-align:left
}

.contact span {
    position: relative;
    top: -2px;
    color: #ccc;
    font: 18px Arial Narrow, sans-serif;
    margin:0 7px
}

.contact-item {
    margin-top: 10px;
    align-self: center;
    font-size:18px
}

.contact-courriel {
    margin: 10px 0 24px 0;
    align-self: center;
    font-size:18px
}

.contact-courriel a:hover {
    color: #000;
    opacity:.25
}

.contact-courriel img {
    position: relative;
    top: 2px;
    margin-left: 1px;
    height:14px
}

.insta {
    margin-top: 3px;
    height:18px
}

.insta:hover {
    opacity:.25
}

.legis {
    width: 940px;
    height: 600px;
    margin-top: -22px;
    text-align:justify
}

#footer {
    width: 1200px !important;
    margin: 40px auto 0 auto;
    font-size: 10px;
    line-height:1.3
}

#footer a {
    color:#707070
}

#footer .f2l {
    padding-left:11px
}

@media screen and (max-device-width: 1023px) {
    
    .header {
        display: grid;
        width: 900px;
        height: 140px;
        margin: 0px auto 0px auto;
        grid-template-columns: auto 104px;
    }
    
    .header .home-title {
        font-size: 6em;
    }

    .header #menu-mob-logo {
        margin: -73px 0 0 0;
        color: #000;
    	font-size: 15em;
    	text-align: right;
    }

    .header img {
        width: 473px;
        margin: 32px 0 0 2px;
    }
    
    .main {
        display: grid;
        width: 900px;
        margin: 0 auto 0 auto;
        grid-column-gap: 0;
        grid-template-columns:auto;
    }

    .fs-l {
        font-size:42px
    }

    #main-menu {
        margin-top: -3px;
        width: 900px;
    }

    #nav-mob {
    	display: none;
        margin-left: 12px;
        font-size:38px;
    }

    #nav-mob .mm-item, #nav-menu-B {
        margin-bottom: 12px;
        font: inherit;
    }

    #nav-menu-B .Bx {
        display: flex;
        height: 52px;
        font: inherit;
        font-size: 42px;
    }
	
    #mob-footer {
        margin-top: 38px;
        font-size: 12px; 
    }

    #mob-footer .f2l {
        padding-left: 20px
    }

	/* Android only */
    #nav-menu-B .BxA {
    	height: 58px;
    	font-size: 48px;
    }
    
    #nav-menu-B .bA {
        top: 0px;
    }
    
    #mob-footer .f2la {
    	margin-top: 3px;
        padding-left: 28px;
    }
	/* END :: Android only */

    #main-content {
        margin: 60px auto 0 auto
    }

    #folio img {
        max-width: 900px;
        max-height: 900px
    }

    #folio video {
        width: 900px;
        height: 600px;
        z-index:-1
    }

    .folios_page {
        display: table-cell;
        width: 900px;
        height: 900px;
        margin: 0 auto 30px auto;
        text-align:center
    }

    .folio-caption {
        width: 567px;
        max-height:900px
    }

    .folio-caption-child {
        font-size: 24px;
        max-height: 900px;
        text-align: left;
        overflow:scroll;
    }

    .folio-navig {
        width: 900px;
        font-size:36px
    }

    #folio-compteur {
        width: 900px;
        font-size:42px
    }

    #nav-aci {
        display: inline;
        position: absolute;
        top: 48px;
        right:42px
    }

    #nav-aci span {
        margin: 0 12px;
        font-size: 36px;
        font-weight: 100;
        color:#ccc
    }

    .insta {
        position: relative;
        top: 3px;
        height:32px
    }

    .about, .contact {
        width: 900px;
        height: 100%;
        margin: -20px 10px 0 10px;
        font-size: 38px;
    }

    .about h1 {
        font-size: 52px;
    }

    .contact-courriel, .contact-item, .contact-item span {
        font-size: inherit;
    }

    .contact-courriel img {
        position: relative;
        top: 6px;
        margin-left: 2px;
        height:34px
    }

    #footer {
        position: fixed;
        bottom: -32;
        width: 900px !important;
        margin: 10px;
        font-size: 16px;
        line-height:1.3
    }

    #footer .f2l {
        padding-left: 20px
    }
}