@charset "UTF-8";

/* ==========================================================================
   Author's custom styles
   ==========================================================================

    Sommaire :
    0.1 Slick (v1.6.0)
    0.2 Bolt form
    0.3 Magnific popup (v1.1.0)
    1. Layout et toolbox
    2. Navigation + footer
    3. Homepage
    4. Blocs
    5. Pages de listing
    6. Pages événement
    7. Pages actualités
    8. Pages contenu
    9. Responsive (media queries)
*/

/*=================================*/
/* 1. Layout et toolbox */
/*=================================*/

@font-face {
    font-family: 'Asap';
    src: url('../fonts/Asap-Bold.eot');
    src: url('../fonts/Asap-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Asap-Bold.woff2') format('woff2'),
    url('../fonts/Asap-Bold.woff') format('woff'),
    url('../fonts/Asap-Bold.ttf') format('truetype'),
    url('../fonts/Asap-Bold.svg#Asap-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Asap';
    src: url('../fonts/Asap-Regular.eot');
    src: url('../fonts/Asap-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Asap-Regular.woff2') format('woff2'),
    url('../fonts/Asap-Regular.woff') format('woff'),
    url('../fonts/Asap-Regular.ttf') format('truetype'),
    url('../fonts/Asap-Regular.svg#Asap-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Phosphate';
    src: url('../fonts/Phosphate-Solid.eot');
    src: url('../fonts/Phosphate-Solid.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Phosphate-Solid.woff2') format('woff2'),
    url('../fonts/Phosphate-Solid.woff') format('woff'),
    url('../fonts/Phosphate-Solid.ttf') format('truetype'),
    url('../fonts/Phosphate-Solid.svg#Phosphate-Solid') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
    url('../fonts/MyriadPro-Regular.woff') format('woff'),
    url('../fonts/MyriadPro-Regular.ttf') format('truetype'),
    url('../fonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('../fonts/Futura-Medium.eot');
    src: url('../fonts/Futura-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Futura-Medium.woff2') format('woff2'),
    url('../fonts/Futura-Medium.woff') format('woff'),
    url('../fonts/Futura-Medium.ttf') format('truetype'),
    url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('../fonts/Futura-MediumItalic.eot');
    src: url('../fonts/Futura-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Futura-MediumItalic.woff2') format('woff2'),
    url('../fonts/Futura-MediumItalic.woff') format('woff'),
    url('../fonts/Futura-MediumItalic.ttf') format('truetype'),
    url('../fonts/Futura-MediumItalic.svg#Futura-MediumItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

body {
    font-family: "Myriad Pro", Arial, Sans-Serif;
    color: #2c2421;
}

.bg-primary {
    background-color: #382e83;
    color: #fff;
}

.bg-secondary {
    background-color: #aad9d7;
    color: #565656;
}

.bg-white {
    background-color: white;
}

.bg-dark {
    background-color: #524896;
    color: #fff;
    overflow: hidden;
}

.bg-light {
    background-color: #def0ef;
}

.container > .bg-white {
    margin: 0 auto;
    max-width: 1200px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Asap';
}

h1 {
    color: #382e83;
}

h2 {
    color: #88c7d4;
    margin-bottom: .5em;
}

.bg-secondary h1 {
    margin: 0;
    padding: .5em 0;
    text-align: center;
    color: #fff;
    font-family: "Phosphate";
}

.bg-secondary h2, .bg-secondary h3 {
    color: #fff;
}

.bg-secondary p {
    color: #565656;
}

a {
    color: #eebf01;
}


.lead {
    font-family: "Asap";
    margin-bottom: 0;
}

.mt1 {
    margin-top: 1em;
}
.mt2 {
    margin-top: 2em;
}

.mb1 {
    margin-bottom: 1em;
}
.mtb {
    margin-top: 1em;
    margin-bottom: 1em;
}

.pt1 {
    padding-top: 1em;
}
.ptb {
    padding-top: 1em;
    padding-bottom: 1em;
}
.pa1 {
    padding: 1em;
}

.padding {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.p0 {
    padding: 0;
}

.pl0 {
    padding-left: 0;
}

.relative {
    position: relative;
}

.flex {
    display: flex;
    align-items: center;
}


.img-full {
    width: 100%;
    max-width: 100%;
}

.imageholder .portrait {
    display: block;
    margin: 0 auto;
}

.bg-semi {
    background-color: rgba(255, 255, 255, 0.5);
}

.button {
    font-weight: bold;
    background-color: #eebf01;
}

.button i {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.button:hover {
    background-color: #861e54;
}

input[type="submit"], button[type="submit"] {
    text-transform: uppercase;
}

.marker {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("../images/map-marker.svg") no-repeat 0 0 transparent;
    background-size: cover;
}

.calendrier {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("../images/calendar.svg") no-repeat 0 0 transparent;
    background-size: cover;
}

.exclamation {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("../images/info.svg") no-repeat 0 0 transparent;
    background-size: cover;
}

.organisateurs {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("../images/orga-cards.svg") no-repeat 0 0 transparent;
    background-size: cover;
}

.fleche {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("../images/right-chevron.svg") no-repeat 0 0 transparent;
    background-size: cover;
}
.fleche-retour {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("../images/left-chevron.svg") no-repeat 0 0 transparent;
    background-size: cover;
}

.share-button {
    display: inline-block;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJTaGFyZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0OC42NjVweCIgaGVpZ2h0PSI0OC42NjVweCIgdmlld0JveD0iMCAwIDQ4LjY2NSA0OC42NjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4LjY2NSA0OC42NjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNDAuMzMyLDMxLjU5MmMtMi4zNzcsMC00LjUxNSwxLTYuMDMzLDIuNTk4bC0xNy43MzctOC42ODZjMC4wNjEtMC40MDYsMC4xMDMtMC44MiwwLjEwMy0xLjI0NmMwLTAuNDE0LTAuMDQtMC44MTgtMC4wOTgtMS4yMTVsMTcuNzExLTguNTg5YzEuNTE5LDEuNjA5LDMuNjY2LDIuNjE5LDYuMDU0LDIuNjE5YzQuNjAzLDAsOC4zMzMtMy43MzEsOC4zMzMtOC4zMzNjMC00LjYwMy0zLjczLTguMzMzLTguMzMzLTguMzMzcy04LjMzMywzLjczLTguMzMzLDguMzMzYzAsMC40MTQsMC4wNCwwLjgxNywwLjA5OCwxLjIxNWwtMTcuNzA5LDguNTg5Yy0xLjUxOS0xLjYwOS0zLjY2Ni0yLjYxOS02LjA1NC0yLjYxOUMzLjczLDE1LjkyNSwwLDE5LjY1NiwwLDI0LjI1OGMwLDQuNjAzLDMuNzMsOC4zMzMsOC4zMzMsOC4zMzNjMi4zNzcsMCw0LjUxNS0xLDYuMDMzLTIuNTk2bDE3LjczNiw4LjY4NWMtMC4wNjIsMC40MDYtMC4xMDQsMC44Mi0wLjEwNCwxLjI0NWMwLDQuNjA0LDMuNzMsOC4zMzMsOC4zMzMsOC4zMzNzOC4zMzMtMy43MjksOC4zMzMtOC4zMzNDNDguNjY1LDM1LjMyMiw0NC45MzUsMzEuNTkyLDQwLjMzMiwzMS41OTJ6Ii8+PC9nPjwvc3ZnPg==") no-repeat 0 0 transparent;
    background-size: cover;
}

dl.partage {
    position: absolute;
    right: 5px;
    top: 5px;
    margin: 0;
    text-align: right;
    transition: all .2s;
}

dl.partage dt {
    padding: 5px;
}

dl.partage dd {
    display: none;
    opacity: 0;
    padding: 5px 10px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #cacaca;
    transition: all .2s;
}

dl.partage dd:first-of-type {
    border-bottom: 0 none;
}

dl.partage dd:last-child {
    border-top: 0 none;
}

dl.partage dd a {
    color: #fff;
}

dl.partage dd span {
    width: 100%;
}

dl.partage dd:first-child {
    border-bottom: 0 none;
}

dl.partage dd:last-child {
    border-top: 0 none;
}

dl.partage:hover .share-button {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

dl.partage:hover dd {
    display: block;
    opacity: 1;
}

.tw-share-button {
    background-color: #1b95e0;
}

.tw-share-button a {
    padding: .25em .25em .25em 24px;
    color: #fff;
    font-weight: bold;
    background: #1b95e0 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E") no-repeat 3px 3px/20px 20px;
}

.tw-share-button a:hover {
    text-decoration: none;
    background-color: #0c7abf;
}

.fb-share-button {
    background-color: #4267b2;
}

.fb-share-button a {
    padding: .25em .25em .25em 24px;
    color: #fff;
    font-weight: bold;
    background: #4267b2 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgY2xhc3M9Il8xcGJxIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDE0SDMuNjY3QzIuNzMzIDEzLjkgMiAxMy4xNjcgMiAxMi4yMzNWMy42NjdBMS42NSAxLjY1IDAgMCAxICAgICAgICAgICAgMy42NjcgMmg4LjY2NkExLjY1IDEuNjUgMCAwIDEgMTQgMy42Njd2OC41NjZjMCAuOTM0LS43MzMgICAgICAgICAgICAxLjY2Ny0xLjY2NyAgICAgICAgICAgIDEuNzY3SDEwdi0zLjk2N2gxLjNsLjctMi4wNjZoLTJWNi45MzNjMC0uNDY2LjE2Ny0uOS44NjctLjlIMTJ2LTEuOGMuMDMzICAgICAgICAgICAgMC0uOTMzLS4yNjYtMS41MzMtLjI2Ni0xLjI2NyAwLTIuNDM0LjctMi40NjcgICAgICAgICAgICAyLjEzM3YxLjg2N0g2djIuMDY2aDJWMTR6Ij48L3BhdGg+PC9zdmc+) no-repeat 3px 3px/20px 20px;
}

.fb-share-button a:hover {
    text-decoration: none;
    background-color: #365899;
}

ul.partage {
    margin: 0;
    text-align: right;
    transition: all .2s;
    list-style-type: none;
    overflow: hidden;
}

ul.partage li {
    margin: 0;
    float: left;
    width: 50%;
    text-align: center;
    transition: all .2s;
}

ul.partage li span {
    display: inline-block;
    width: 100%;
}

ul.partage li a {
    display: inline-block;
    width: 100%;
    color: #fff;
    text-indent: -9999px;
}

ul.partage li .tw-share-button a {
    background-position: center center;
}

ul.partage li .fb-share-button a {
    background-position: center center;
}

/*=================================*/
/* 2. Navigation + footer */
/*=================================*/

.menu-accessibilite {
    height: 0;
    overflow: hidden;
}

ul.acces-rapide li {
    display: inline-block;
}

header .headertitle {
    background: #382e83;
    padding: 10px 0;
    max-height: 44px;
    height: 44px;
    overflow: visible;
    transition: all .25s;
}

header .headertitle .logo {
    position: absolute;
    left: 0px;
    top: 3px;
    z-index: 6;
}

header .headertitle .desc {
    display: none;
    margin: 0;
    text-align: center;
    font-family: "Futura";
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}

header .headertitle .logo h1 {
    margin: 0;
    height: 150px;
    width: 129px;
}

header .headertitle .logo:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: -3px;
    z-index: 9;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 256px 256px 0 0;
    border-color: rgba(222, 240, 239, .95) transparent transparent;
    transition: all .25s;
}

header .headertitle .logo img {
    height: 128px;
    position: absolute;
    left: 16px;
    top: 8px;
    z-index: 10;
    transition: all .25s;
}

header.fixed {
    padding-top: 62px;
}

header.fixed .headertitle {
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 4px 0;
    height: 32px;
    max-height: 32px;
    overflow: visible;
}

header.fixed .headertitle .burger-menu {
    font-size: 1.375em;
    padding: 6px 16px 4px;
}

header.fixed .headertitle h1 {
    font-size: 1.5rem;
}

header.fixed .headertitle .desc {
    font-size: 1.25rem;
}

header.fixed .headertitle .logo::after {
    border-width: 128px 128px 0 0;
}

header.fixed .headertitle .logo img {
    left: 16px;
    height: 50px;
}

ul.social-media {
    position: absolute;
    right: 130px;
    top: 4px;
    margin: 0;
    line-height: 1;
}
.fixed ul.social-media {
    right: 130px;
    top: 4px;
}

ul.social-media li {
    margin-right: 16px;
    width: 33px;
    height: 33px;
    display: inline-block;
    vertical-align: top;
}

ul.social-media li img {
    width: 33px;
    height: 33px;
    background-color: transparent;
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
    transition: all 0.2s;
}

ul.social-media li:hover img {
    filter: invert(0%);
    -ms-filter: invert(0%);
    -webkit-filter: invert(0%);
}

ul.social-media .laloupe {
    margin-right: 0;
    background-color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

ul.social-media .laloupe button {
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    width: 33px;
    height: 33px;
    background: transparent url("../images/search.svg") no-repeat center center/cover;
}

ul.social-media .laloupe:hover {
    background-color: #eebf01;
}

.fixed ul.social-media li, .fixed ul.social-media li img, .fixed ul.social-media li button {
    width: 24px;
    height: 24px;
}

.searchform {
    opacity: 0;
    height: 0;
    position: absolute;
    width: 100%;
    top: 44px;
    left: 0;
    padding: 12px 0;
    background-color: #fff;
    border-bottom: 2px solid #382e83;
    transition: all .2s;
}
.searchform .column {
    display: none;
}
.searchform.open {
    opacity: 1;
    height: 58px;
}
.searchform.open .column {
    display: block;
}

.fixed .searchform {
    top: 32px;
}

.searchform {
    font-size: 1rem;
}

.searchform .input-group {
    margin-bottom: 0;
}

.searchform input[type="text"], .searchform input[type="search"] {
    display: block;
    margin: 0;
    width: 100%;
    height: 34px;
    background-color: #fff;
    transition: all 0.3s;
}

.searchform button[type="submit"] {
    width: 44px;
    height: 34px;
    text-indent: -9999px;
    background: #eebf01 url("../images/icone-loupe.png") no-repeat center center;
    transition: all 0.3s;
}

.searchform button[type="submit"]:active, .searchform button[type="submit"]:hover {
    background-color: #382e83;
}

header .menu-container {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 6;
}

/*header .menu-container:after {*/
/*content: "";*/
/*display: block;*/
/*position: absolute;*/
/*right: 0;*/
/*top: -3px;*/
/*z-index: 9;*/
/*width: 0;*/
/*height: 0;*/
/*border-style: solid;*/
/*border-width: 0 160px 160px 0 ;*/
/*border-color: transparent #def0ef transparent;*/
/*transition: all .2s;*/
/*}*/
header.fixed .headertitle .burger-menu {
    font-size: 1.375em;
    padding: 6px 16px 4px;
}
.burger-menu {
    position: relative;
    z-index: 11;
    padding: 6px 16px 4px;
    float: right;
    font-size: 1.375em;
    font-weight: bold;
    font-family: "Myriad Pro";
    color: #382e83;
    background-color: #def0ef;
    cursor: pointer;
    transition: all .2s;
}

.burger-menu:hover {
    color: #fff;
    background-color: #aad9d7;
}

.menu-close {
    display: none;
    padding: 0 4px 0;
}

.burger-menu.is-open .menu-close {
    display: inline-block;
}

.burger-menu.is-open .menu-open {
    display: none;
}

nav .menu-list {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding-top: 80px;
    background: rgba(222, 240, 239, .9);
    transition: all .2s;
    transform: translateY(-100%);
}

nav .menu-list li {
    list-style-type: none;
    text-align: right;
    font-family: "Futura";
    font-size: 1.25rem;
}

.menu-list.is-open {
    display: block;
    height: 100vh;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-list > li a, .menu-list > li > li a {
    display: block;
    padding: .5rem 2rem;
    color: #951a4e;
    text-decoration: none;
}

.menu-list > li a:hover {
    background-color: rgba(255, 255, 255, 1);
}

.menu-list .submenu-parent {
    position: relative;
}

.menu-list .submenu a {
    background-color: rgba(255, 255, 255, 1);
}

.menu-list .submenu a:hover {
    background-color: rgba(222, 240, 239, .9);
}

footer .menu li, footer .menu .menu-text {
    padding: 0;
}

footer .menu a {
    padding: 0.25rem 1rem;
    color: #565656;
    text-transform: uppercase;
}

footer .menu .active > a {
    background: transparent;
    color: #565656;
    font-weight: bold;
}

footer label {
    text-transform: uppercase;
}

.logo-footer {
    padding: 1.5em 0 0;
}

.mj-subscribe-form {
    padding-bottom: .5em;
}

.mj-subscribe-form label {
    font-family: "Phosphate";
    font-size: 1.5em;
    font-weight: normal;
    text-align: center;
    color: #fff;
}
.mj-subscribe-form input[type="text"] {
    height: 2.55rem;
}

.mj-subscribe-form .input-group {
    max-width: 480px;
    margin: 0 auto;
}

/*=================================*/
/* 3. Homepage */
/*=================================*/

.headerphoto {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    min-height: 20vh;
    max-height: 36vh;
}

h2.homepage {
    margin: 0;
    padding: .5em 0;
    text-align: center;
    color: #fff;
    font-family: "Phosphate";
    font-size: 1.75em;
}

a.voirtout {
    display: block;
    margin-bottom: 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: #eebf01;
}

a.voirtout:hover {
    background-color: #382e83;
}

/*=================================*/
/* 4. Blocs */
/*=================================*/
.date {
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lieu {
    padding: 0;
    font-size: 1em;
    font-family: "Futura";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.festival {
    margin: 0;
    padding: 0;
    font-size: 1.125em;
    font-family: "Futura";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bloc-sticky {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.bloc-sticky h2 {
    display: inline-block;
    margin: 0;
    padding: 0.25em;
    line-height: 1;
    max-width: 67%;
    color: black;
    background-color: #fff;
    transition: opacity .25s;
    font-size: 1.5em;
}

.bloc-sticky a:hover h1 {
    opacity: 0.1;
}

.bloc-sticky img {
    width: 100%;
    transition: transform .25s ease 0s;
}

.bloc-sticky a:hover img {
    transform: scale(1.01);
}

.bloc-sticky .imageholder {
    max-height: 515px;
}

.bloc-sticky .infosholder {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 0 .5em 1em;
    width: 100%;
}

.bloc-sticky .infosholder .date {
    padding: 0.125em 0.25em;
    color: #fff;
    background-color: #382e83;
    font-size: 1em;
}

.bloc-sticky .infosholder .lieu, .bloc-sticky .infosholder .festival, .bloc-sticky .infosholder .chapo {
    padding: 0.125em 0.25em;
    color: #fff;
    background-color: black;
    font-size: 1em;
}

.bloc-sticky .infosholder p:first-child {
    margin-bottom: 0;
}

.bloc-sticky .infosholder p:last-child {
    margin-bottom: 0;
}

.bloc-sticky .infosholder i {
    width: 12px;
    height: 12px;
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.bloc-sticky a p {
    color: #3a302d;
}

.bloc-event {
    position: relative;
    padding: 12px 0;
    height: 124px;
    overflow: hidden;
    border-bottom: 1px solid #181527;
}

.bloc-event img {
    filter: sepia(0.5);
    -ms-filter: sepia(0.5);
    -webkit-filter: sepia(0.5);
}

.bloc-event h1 {
    margin-bottom: 6px;
    line-height: 1;
    font-weight: bold;
    font-size: 1.125rem;
    text-transform: uppercase;
}

.bloc-event .imageholder {
    float: left;
}

.bloc-event .infosholder {
    display: flex;
    height: 100px;
    padding: 0 24px 0 6px;
}

.bloc-event .infosholder .valign {
    margin: auto 0;
    max-width: 100%;
}

.bloc-event .infosholder::after {
    content: "\0000a0";
    position: absolute;
    right: 0;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    margin-right: -4px;
    background: transparent url("../images/right-chevron.svg") no-repeat 0 0 ;
    background-size: 100% 100%;
}

.bloc-event a:hover::after, .bloc-event a:hover .marker, .bloc-event a:hover .calendrier, .bloc-event a:active::after, .bloc-event a:active .marker, .bloc-event a:active .calendrier, .bloc-event a:hover .exclamation {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.bloc-event .date {
    font-size: 1em;
}

.bloc-event .lieu {
    font-size: 1em;
}

.bloc-event a {
    display: block;
    overflow: hidden;
    color: #2c2421;
    text-decoration: none;
    transition: background .2s;
}

.bloc-event a:hover {
    background: #aad9d7;
    color: #fff;
}

.bloc-event a:hover img {
    filter: sepia(0);
    -ms-filter: sepia(0);
    -webkit-filter: sepia(0);
}

.bloc-event p {
    margin-bottom: 0;
    line-height: 1.5;
}

.listing-news .columns {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 2px;
}

.bloc-news {
    display: flex;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.bloc-news h1 {
    line-height: 1.1;
    font-size: 1.5em;
}

.bloc-news .imageholder {
    padding:1.35em;
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.bloc-news .imageholder img {
    width: 100%;
    transition: transform .25s ease 0s;
}

.bloc-news .infosholder {
    float: left;
    padding: 1em .5em 1.25rem;
    font-size: 1em;
    width: 100%;
}

.bloc-news p {
    line-height: 1.25;
    margin-bottom: 0;
}

.bloc-news a {
    width: 100%;
    max-width: 100%;
    color: #181527;
}

.bloc-news:hover img {
    transform: scale(1.04);
}

.bloc-news:hover .lirelasuite {
    color: #fff;
    background-color: #382e83;
}

a.lirelasuite, span.lirelasuite {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: inline-block;
    margin: 0;
    padding: 0.125em 0.25em;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background-color: #181527;
    transition: background .25s;
}

a.lirelasuite:hover, span.lirelasuite:hover {
    color: #fff;
    background-color: #382e83;
}

a.lirelasuite i, span.lirelasuite i {
    width: 12px;
    height: 12px;
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.taxo {
    padding: 0.125em 0.25em;
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #def0ef;
}

.listing-news .columns:nth-child(1) {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(1) .taxo {
    background-color: #fff;
}

.listing-news .columns:nth-child(3) {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(3) .taxo {
    background-color: #fff;
}

.listing-news .columns:nth-child(4) {
    background-color: #fff;
}

.listing-news .columns:nth-child(4) .taxo {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(7) {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(7) .taxo {
    background-color: #fff;
}

.listing-news .columns:nth-child(5) {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(5) .taxo {
    background-color: #fff;
}

.listing-news .columns:nth-child(8) {
    background-color: #fff;
}

.listing-news .columns:nth-child(8) .taxo {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(9) {
    background-color: #def0ef;
}

.listing-news .columns:nth-child(9) .taxo {
    background-color: #fff;
}

.page-recherche .bloc-news .taxo {
    color: #fff;
    background-color: #c20e1a;
}

/*=================================*/
/* 5. Pages de listing */
/*=================================*/


.page-listing {
    min-height: 50vh;
}

.titre-pages h1 {
    margin: 0;
    text-align: center;
}

.filters .btn-filtre {
    width: 230px;
}

.filters .dropdown-pane {
    width: 230px;
}

.filters .dropdown-pane ul {
    margin-bottom: 0;
    text-align: center;
}

.filters .dropdown-pane ul li button, .filters .dropdown-pane ul li a {
    margin-bottom: .25em;
    font-size: 1em;
    font-weight: normal;
    width: 100%;
}

.pagination ul {
    clear: both;
    display: inline-block;
    margin: 8px 0;
    padding: 0;
    border: 1px solid #DDD;
}

.pagination ul li {
    float: left;
    list-style-type: none;
    border-right: 1px solid #DDD;
}

.pagination ul li.active, .pagination ul li:hover {
    background-color: #382e83;
}

.pagination ul li.active a, .pagination ul li:hover a {
    color: #fff;
}

.pagination ul li:last-child {
    border-right: none;
}

.pagination ul li a {
    padding: 2px 8px;
    color: #181527;
    text-decoration: none;
}



/*=================================*/
/* 6. Pages événements */
/*=================================*/

.page-event .imageholder {
    padding: 1em 0;
    text-align: center;
}

.page-event .infosholder {
    padding: .25em 1em;
}

.page-event .infosholder p {
    margin-bottom: 0;
}

.page-event .infosholder .date {
    color: #fff;
    padding: 0.125em 0.25em;
    margin-right: 24px;
    font-size: 1em;
}

.page-event .infosholder h1 {
    display: inline-block;
    margin-bottom: .25em;
    padding: .25em;
    color: black;
    font-family: "Phosphate";
    background-color: white;
    line-height: 1;
}

.page-event .infosholder i {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.page-event .infosholder .lieu {
    clear: both;
    display: inline-block;
    padding: 0 .25em;
    color: white;
    /*background-color: #def0ef;*/
}

.page-event .infosholder .lieu a {
    color: #fff;
    text-decoration: none;
}

.page-event .infosholder .festival {
    font-size: 1.2em;
}

.page-event .infosholder .ipicto {
    width: 14px;
    height: 14px;
}

.page-event .infosholder .lead {
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.25em;
}

.page-event .artistes:nth-child(odd) .fiche-artiste {
    float: right;
}

.textholder {
    padding: 1em 2em;
    padding: 1em 2em;
}

.chapoholder {
    padding: 0 2em;
    padding: 0 2em;
}

.vertical-align {
    display: table;
}

.vertical-align > div {
    display: table-cell;
    vertical-align: middle;
}

.vertical-align .imageholder {
    padding: 1em 2em;
    padding: 1em 2em;
}

.reserver {
    text-align: center;
}

.reserver .button {
    margin: 0;
    color: white;
    background-color: #eebf01;
    font-size: 1em;
    text-decoration: none;
    text-transform: uppercase;
}

.reserver .button:hover {
    color: #fff;
    background-color: #382e83;
}

.surleweb {
    padding-bottom: 3px;
    font-family: "Futura";
}

.surleweb img {
    display: inline-block;
    margin: 0 0.5em;
    width: 32px;
    height: 32px;
    opacity: 1;
    transition: opacity .2s;
}

.surleweb img:hover {
    opacity: 0.75;
}

.premiere-partie {
    background-color: #def0ef;
}

.premiere-partie .bg-secondary {
    padding: .25em 1em;
    text-transform: uppercase;
    font-weight: bold;
}

.premiere-partie .imageholder {
    padding: 1em 2em;
    padding: 1em 2em;
}

.premiere-partie h2 {
    font-size: 1.5em;
    font-family: "Phosphate";
}


.infos-lieu h2, .fiche-structure h2 {
    margin: 0;
    padding: .5em 0;
    font-size: 1.25em;
    text-align: center;
    color: #fff;
}

.infos-lieu h3, .infos-lieu h4 {
    margin-bottom: 0;
}

.infos-lieu h3 i {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.infos-lieu p {
    margin-bottom: 0;
}
.infos-lieu a {
    color: #2c2421;
    text-decoration: none;
}
.infos-lieu a:hover {
    color: #88c7d4;
}

aside h2 .bg-secondary {
    padding: .25em 1em;
}

ul.artistes li {
    display: inline-block;
}

.page-event .unsurdeux:nth-child(odd) .column:first-child {
    float: right;
}

.bg-dark .surleweb img {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
    fill: #ffffff;
}


/*=================================*/
/* 7. Pages actualités */
/*=================================*/

.page-actu .imageholder {
    padding: 1em 0;
    text-align: center;
}

.pagination ul {
    clear: both;
    display: inline-block;
    margin: 8px 0;
    padding: 0;
    border: 1px solid #DDD;
}

.pagination ul li {
    float: left;
    list-style-type: none;
    border-right: 1px solid #DDD;
}

.pagination ul li.active, .pagination ul li:hover {
    background-color: #382e83;
}

.pagination ul li.active a, .pagination ul li:hover a {
    color: #fff;
}

.pagination ul li:last-child {
    border-right: none;
}

.pagination ul li a {
    padding: 2px 8px;
    color: #181527;
    text-decoration: none;
}

.galerie-photo h3 {
    margin: .5em 0;
    font-size: 1.5em;
}

.galerie-photo img {
    border: 1px solid #000;
}

/*=================================*/
/* 8. Pages de contenu */
/*=================================*/
.page-simple h2 {
    display: inline-block;
    padding: 0 .5em;
    color: #fff;
    background-color: #382e83;
}

.page-simple h3 {
    color: #c20e1a;
}

.page-simple .imageholder {
    padding: 1em 2em;
    padding: 1em 2em;
}

h2.pashomepage {
    margin: 0;
    padding: .25em 0;
    text-align: center;
    font-size: 1.5em;
}

.bloc-annexe {
    margin: 1em auto;
    padding: .5em 1em;
    color: #fff;
    background-color: #382e83;
}

.bloc-annexe i {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
}

.bloc-annexe h3 {
    margin-bottom: .25em;
    text-align: center;
}

/*=================================*/
/* 9. Responsive */
/*=================================*/

/* Small only Max 479px */
@media screen and (max-width: 29.9375em) {

    .menu-container, .menu-list {
        width: 100%;
    }

}

/* Small and up 480px up */
@media screen and (min-width: 30em) {

    .share-button {
        width: 32px;
        height: 32px;
    }

    dl.partage {
        right: 10px;
        top: 10px;
    }

    .menu-container, .menu-list {
        width: 100%;
    }

    .bloc-news h1 {
        font-size: 1.5em;
    }

    .bloc-news .imageholder {
        width: 50%;
    }

    .bloc-news .infosholder {
        width: 50%;
    }

}

/* Small only max 639px  */
@media screen and (max-width: 39.9375em) {

    header.fixed .headertitle .logo::after {
        border-width: 80px 80px 0 0;
    }

    header.fixed .headertitle .logo img {
        top: 4px;
        left: 8px;
        height: 32px;
    }


    header .headertitle {
        width: 100%;
        top: 0;
        padding: 4px 0;
        height: 32px;
        max-height: 32px;
        overflow: visible;
    }

    header .headertitle .burger-menu {
        font-size: 1.375em;
    }

    header .headertitle h1 {
        font-size: 1.5rem;
    }

    header .headertitle .logo::after {
        border-width: 128px 128px 0 0;
    }

    header .headertitle .logo img {
        left: 16px;
        height: 50px;
    }

    nav .menu-list {
        background: rgba(222, 240, 239, .9) url("../images/logo-ville-de-nice-blanc.png") no-repeat center 95% ;
    }

    ul.social-media li, ul.social-media li img {
        width: 24px;
        height: 24px;
    }

    ul.social-media .laloupe button {
        width: 24px;
        height: 24px;
    }

    .searchform {
        top: 32px;
    }

}

/* Medium and up  640px up */
@media screen and (min-width: 40em) {

    header .headertitle .logo h1 {
        height: 150px;
        width: 129px;
    }

    header .headertitle .logo:after {
        border-width: 208px 208px 0 0;
    }

    header .headertitle .logo img {
        height: 96px;
        left: 16px;
        top: 8px;
    }

    ul.social-media {
        position: absolute;
        right: 150px;
        top: 6px;
        margin: 0;
        line-height: 1;
    }

    .burger-menu {
        padding: 10px 16px 6px;
        font-size: 1.75rem;
    }

    .menu-container, .menu-list {
        width: 320px;
    }

    .menu-list li {
        font-size: 1.25rem;
    }

    h2.homepage {
        font-size: 2em;
    }

    .bloc-sticky h2 {
        font-size: 2em;
    }

    .bloc-sticky .infosholder {
        padding: 0 0 1em 2em;
    }

    .bloc-sticky .infosholder .date {
        font-size: 1.2em;
    }

    .bloc-sticky .infosholder .lieu, .bloc-sticky .infosholder .festival, .bloc-sticky .infosholder .chapo {
        font-size: 1.2em;
    }

    .bloc-sticky .infosholder i {
        width: 14px;
        height: 14px;
    }

    .bloc-news h1 {
        font-size: 1.5em;
    }

    .listing-news > .columns:nth-child(odd) {
        clear: left;
    }
    
    .listing-news .columns:nth-child(3) {
        background-color: #fff;
    }

    .listing-news .columns:nth-child(3) .taxo {
        background-color: #def0ef;
    }

    .listing-news .columns:nth-child(4) {
        background-color: #def0ef;
    }

    .listing-news .columns:nth-child(4) .taxo {
        background-color: #fff;
    }

    .listing-news .columns:nth-child(7) {
        background-color: #fff;
    }

    .listing-news .columns:nth-child(7) .taxo {
        background-color: #def0ef;
    }

    .listing-news .columns:nth-child(8) {
        background-color: #def0ef;
    }

    .listing-news .columns:nth-child(8) .taxo {
        background-color: #fff;
    }

    /*.titre-pages h1 {*/
        /*padding: 21px 0 16px 120px;*/
    /*}*/

    .page-event .infosholder .date {
        font-size: 1.2em;
        margin-right: 36px;
    }

    .reserver .button {
        font-size: 1.2em;
    }

    .infos-lieu h2, .fiche-structure h2 {
        font-size: 1.5em;
    }

    .infos-lieu h3 i {
        height: 18px;
        width: 17px;
    }

    h2.pashomepage {
        font-size: 2em;
    }

}

/* Medium only 640px à 1023px */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

    .bloc-news .imageholder {
        width: 100%;
    }

    .bloc-news .infosholder {
        width: 100%;
    }
    nav .menu-list {
        background: rgba(222, 240, 239, .9) url("../images/logo-ville-de-nice-blanc.png") no-repeat center 95% ;
    }

}

/* Large and up 1024px up */
@media screen and (min-width: 64em) {

    header .headertitle .desc {
        display: block;
        margin-top: 6px;
        margin-left: -24px;
        font-size: 1.1em;
    }

    header.fixed .headertitle .desc {
        display: block;
        margin-top: 0;
        margin-left: -24px;
        font-size: 1.5em;
    }

    header .headertitle .logo h1 {
        height: 150px;
        width: 129px;
    }

    header .headertitle .logo:after {
        border-width: 208px 208px 0 0;
    }

    header .headertitle .logo img {
        height: 96px;
        left: 16px;
        top: 8px;
    }

    .menu-list li {
        font-size: 1.5rem;
    }

    h2.homepage {
        font-size: 2.5em;
    }

    .bloc-sticky h2 {
        font-size: 2.5em;
    }

    .bloc-sticky .infosholder {
        padding: 0 0 2em 4em;
    }

    .bloc-sticky .infosholder .date {
        font-size: 1.5em;
    }

    .bloc-sticky .infosholder .lieu, .bloc-sticky .infosholder .festival, .bloc-sticky .infosholder .chapo {
        font-size: 1.5em;
    }

    .bloc-sticky .infosholder i {
        width: 20px;
        height: 20px;
    }

    .bloc-news h1 {
        font-size: 1.5em;
    }

    .bloc-news .infosholder {
        width: 50%;
        padding-left: 0.9375rem;
    }

    /*.titre-pages h1 {*/
        /*padding: 14px 0 6px 120px;*/
    /*}*/

    .page-event .infosholder .date {
        font-size: 1.5em;
    }

    .page-event .infosholder .lieu {
        font-size: 1.25em;
    }

    .page-event .infosholder .festival {
        font-size: 1.5em;
    }

    .page-event .infosholder .ipicto {
        width: 20px;
        height: 20px;
    }

    .textholder {
        padding: 1.5em 3em;
    }

    .chapoholder {
        padding: 0 3em;
    }

    .vertical-align .imageholder {
        padding: 1.5em 3em;
    }

    .reserver .button {
        font-size: 1.5em;
    }

    .premiere-partie .imageholder {
        padding: 1.5em 3em;
    }

    .infos-lieu h3 i {
        height: 22px;
        width: 20px;
    }

    .page-simple .imageholder {
        padding: 1.5em 3em;
    }

}

/* Large only 1024px à 1199px */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {



}

/* XLarge and up 1200px up */
@media screen and (min-width: 75em) {

    header .headertitle .desc {
        margin-top: 3px;
        margin-left: 0;
        font-size: 1.35em;
    }

    header .headertitle .logo h1 {
        height: 150px;
        width: 129px;
    }

    header .headertitle .logo:after {
        border-width: 256px 256px 0 0;
    }

    header .headertitle .logo img {
        height: 128px;
        left: 16px;
        top: 8px;
    }

    h2.homepage {
        font-size: 3em;
    }

    .bloc-sticky h2 {
        font-size: 3em;
    }

    .bloc-sticky .infosholder .date {
        font-size: 1.75em;
    }

    .bloc-sticky .infosholder .lieu, .bloc-sticky .infosholder .festival, .bloc-sticky .infosholder .chapo {
        font-size: 1.75em;
    }

    .bloc-sticky .infosholder i {
        width: 22px;
        height: 22px;
    }

    .page-event .infosholder .date {
        font-size: 1.75em;
    }

    .page-event .infosholder .lieu {
        font-size: 1.5em;
    }

    .page-event .infosholder .festival {
        font-size: 1.75em;
    }

    .textholder {
        padding: 1.75em 3.5em;
    }

    .chapoholder {
        padding: 0 3.5em;
    }

    .vertical-align .imageholder {
        padding: 2em 4em;
    }

    .reserver .button {
        font-size: 1.75em;
    }

    .premiere-partie .imageholder {
        padding: 2em 4em;
    }

    .page-simple .imageholder {
        padding: 2em 4em;
    }

}

/* XLarge and up 1200px up */
@media screen and (min-width: 85em) {

    header .headertitle .desc {
        margin-top: 0;
        margin-left: 0;
        font-size: 1.5em;
    }

}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input:not([type]),
textarea,
select {
    appearance: none;
    background-color: #fff;
    border: .1rem solid #382e83;
    box-shadow: none;
    box-sizing: inherit;
    height: 3rem;
    padding: .6rem 1.0rem;
    width: 100%;
}
textarea {
    min-height: 6.5rem;
}
label, legend {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
}
.button.primary {
    background-color: #382e83;
    color: #fff;
}
.button.primary:hover {
    background-color: #aad9d7;
    color: #fff;
}