/**
* Fonts, balises principales, messages d'alerte, popups
*
* CSS
*
* @category CSS
* @package  webroot/css
* @author   AMIOT Romain <webmaster@naboombu.fr>
* @license  http://opensource.org/licenses/gpl-license.php GNU Public License
* @link     http://naboombu.fr
*
*/

/*
* Déclaration des fonts
*/

@charset "utf-8";

@font-face {
    font-family:        'Fugaz';
    src:                url('../fonts/fugaz/FugazOne-Regular.ttf') format('truetype'),
                        url('../fonts/fugaz/fugazone-regular.woff2') format('woff2'),
                        url('../fonts/fugaz/fugazone-regular.woff') format('woff');;
    font-weight:        normal;
    font-style:         normal;
    font-display: fallback;
}

@font-face {
    font-family:        'Barlow';
    src:                url('../fonts/barlow/Barlow-ExtraLight.ttf') format('truetype'),
                        url('../fonts/barlow/Barlow-ExtraLight.woff2') format('woff2'),
                        url('../fonts/barlow/Barlow-ExtraLight.woff') format('woff');
    font-weight:        normal;
    font-style:         normal;
    font-display: fallback;
}

@font-face {
    font-family:        'Oxanium';
    src:                url('../fonts/oxanium/Oxanium-VariableFont_wght.ttf') format('truetype'),
                        url('../fonts/oxanium/oxanium-variablefont_wght.woff2') format('woff2'),
                        url('../fonts/oxanium/oxanium-variablefont_wght.woff') format('woff');
    font-weight:        normal;
    font-style:         normal;
    font-display: fallback;
}

/*
* Animations
*/
@keyframes anim-headerFigures{
    0%  {opacity: 1; transform: translate(400px, 0px);}
    100%{opacity: 1;transform: translate(0px, 0px);}
}
@keyframes anim-headerArrow{
    0%  {transform: translate(0px, -50px); opacity: 1;}
    50% {opacity: 1;}
    100%{transform: translate(0px, 0px); opacity: 0;}
}
@keyframes anim-headerLogo{
    0%  {opacity: 1; transform: translate(0px, -400px);}
    100%{opacity: 1; transform: translate(0px, 0px);}
}

@keyframes anim-h1{
    0%  {opacity: 0; transform: translate(150px, 70px);}
    100%{opacity: 1; transform: translate(0px, 0px);}
}
@keyframes anim-h2{
    0%  {opacity: 0;transform: translate(-150px, 70px);}
    100%{opacity: 1;transform: translate(0px, 0px);}
}
.anim-h1{animation: anim-h1 0.3s normal;}
.anim-h2{animation: anim-h2 0.6s normal;}
.title h1, .title h2{opacity:0;}

@keyframes anim-shape{
    0% {transform: rotate(-5deg); bottom: -52%;}
    100%{transform: rotate(-3deg); bottom: -67%;}
}
.anim-shape{animation: anim-shape 1.3s normal;}

@keyframes anim-navbarSlideOn{
    0%  {opacity: 0; transform: translateX(150px);}
    100%{opacity: 0.8; transform: translateX(0px);}
}
@keyframes anim-navbarSlideOff{
    0%  {opacity: 0.8; transform: translateX(0px);}
    100%{opacity: 0; transform: translateX(-150px);}
}

@keyframes anim-eventSlide{
    0%  {opacity: 0;transform: translate(-500px, 0px);}
    100%{opacity: 1; transform: translate(0px, 0px);}
}
.event0{animation: anim-eventSlide 0.3s 0.2s normal;}
.event1{animation: anim-eventSlide 0.3s 0.4s normal;}
.event2{animation: anim-eventSlide 0.3s 0.6s normal;}
.event3{animation: anim-eventSlide 0.3s 0.8s normal;}
.event4{animation: anim-eventSlide 0.3s 1s normal;}
.event5{animation: anim-eventSlide 0.3s 1.2s normal;}
.event6{animation: anim-eventSlide 0.3s 1.4s normal;}
.event7{animation: anim-eventSlide 0.3s 1.6s normal;}
.event8{animation: anim-eventSlide 0.3s 1.8s normal;}
.event9{animation: anim-eventSlide 0.3s 2s normal;}
.event-wrapper{opacity:0;}

@keyframes anim-widgetLeft{
    0%  {width: 0;}
    50% {width: 100%;}
    51% {left: 0;}
    100%{left: 100%;}
}
@keyframes anim-widgetRight{
    0%  {width: 100%; left: 100%;}
    50% {left: 0;}
    51% {width: 100%;}
    100%{width:  0;}
}
@keyframes anim-widgetAppear{
    0% {opacity: 0;}
    100%{opacity: 1;}
}
.anim-widgetLeft{animation: anim-widgetLeft 1s ease-out;}
.anim-widgetRight{animation: anim-widgetRight 1s ease-out;}
.anim-widgetAppear{animation: anim-widgetAppear 0.1s 0.6s normal;}

@keyframes jukeboxColumn1{0% {height: 30%;} 10% {height: 20%;} 23% {height: 35%;} 30% {height: 24%;} 40% {height: 32%;} 55% {height: 18%;} 60% {height: 39%;} 72% {height: 20%;} 80% {height: 31%;} 94% {height: 15%;} 100% {height: 30%;}}
@keyframes jukeboxColumn2{0% {height: 40%;} 10% {height: 25%;} 23% {height: 45%;} 30% {height: 32%;} 40% {height: 47%;} 55% {height: 40%;} 60% {height: 45%;} 72% {height: 33%;} 80% {height: 40%;} 94% {height: 30%;} 100% {height: 50%;}}
@keyframes jukeboxColumn3{0% {height: 50%;} 10% {height: 62%;} 23% {height: 48%;} 30% {height: 58%;} 40% {height: 50%;} 55% {height: 79%;} 60% {height: 62%;} 72% {height: 82%;} 80% {height: 64%;} 94% {height: 75%;} 100% {height: 50%;}}
@keyframes jukeboxColumn4{0% {height: 48%;} 10% {height: 57%;} 23% {height: 55%;} 30% {height: 46%;} 40% {height: 56%;} 55% {height: 64%;} 60% {height: 55%;} 72% {height: 73%;} 80% {height: 52%;} 94% {height: 62%;} 100% {height: 42%;}}
@keyframes jukeboxColumn5{0% {height: 31%;} 10% {height: 22%;} 23% {height: 35%;} 30% {height: 23%;} 40% {height: 37%;} 55% {height: 21%;} 60% {height: 41%;} 72% {height: 26%;} 80% {height: 34%;} 94% {height: 17%;} 100% {height: 32%;}}

.anim-h1, .anim-h2, .event0, .event1, .event2, .event3, .event4, .event5, .event6, .event7, .event8, .event9, .anim-shape, .anim-widgetAppear{animation-fill-mode: forwards;}

/*
* Architecture du site *********************************************************************************************************************************
*/
* {
    margin:             0;
    padding:            0;
    border:             0;
    outline:            0;
    vertical-align:     baseline;
    box-sizing:         border-box;
}

html{
    color:              #000;
    font:               normal 100% "Fugaz", "Trebuchet MS", Arial, Helvetica, sans-serif;
    scroll-behavior:    smooth;
    width:              100%;
}

body{
    min-width:          365px;
    width:              100%;
    font-size:          .8em;
}

#header, #about, #agenda, #contact, #listen{
    display:            block;
    width:              100%;
    min-height:         100vh;
    position:           relative;
}

#about, #agenda, #contact, #listen{
    box-sizing:         border-box;
    padding:            50px 5% 0px 5%;
}

.wrappers{
    position:           relative;
    z-index:            2;
    margin:             0 auto;
}

.title{
    width:              auto;
    height:             auto;
    position:           relative;
    margin:             0px 0px 0px 0px;
}

.shape-overlay{
    position: absolute;
    width: 100%;
    height: 20%;
    overflow: hidden;
    bottom: 0;
    left: 0;
}

.shape{
    position: absolute;
    transform: rotate(-5deg);
    width: 110%;
    height: 100%;
    bottom: -52%;
    left:  1px;
    background: #000;
}

/**
 * barre de navigation *********************************************************************************************************************************
 */
#smartphone-navbar-icon{display: none;}
#smartphone-navbar{display: none;}
#navbar{
    width:              auto;
    height:             160px;
    background:         linear-gradient(to right, #1fd3b4, #eaedaa);
    position:           fixed;
    z-index:            100;
    right:              0;
    top:                0;
    padding:            10px 10px 10px 10px;
    color:              #fff;
    display:            none;
}
#navbar:after{
    content:            "";
    border-left:        50px solid transparent;
    border-top:         160px solid #1fd3b4;
    width:              0;
    height:             0;
    position:           absolute;
    top:                0px;
    left:               -50px;
    transition:         all 0.4s;
}
#navbar div{
    font-size:          2em;
    text-transform:     uppercase;
    color:              #fcf700;
}
#navbar a{
    font:               normal 1.3em "Barlow", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display:            block;
    color:              #fff;
    transition:         all 0.3s;
}
#navbar a:hover{color: #181f27; transform: translateX(5px);}
.navbar-slide-on{
    animation:          anim-navbarSlideOn 0.3s normal;
    animation-fill-mode:forwards;
}
.navbar-slide-off{
    animation:          anim-navbarSlideOff 0.3s normal;
    animation-fill-mode:forwards;
}

/**
 * Barre de navigation mobiles *********************************************************************************************************************************
 */
 #smartphone-navbar-icon{
    display:            none;
    position:           fixed;
    top:                0px;
    left:               0px;
    background:         url('../img/icons.png') 0px -210px no-repeat;
    width:              30px;
    height:             30px;
    z-index:            1001;
}
 #smartphone-navbar-icon:hover #smartphone-navbar{display: block;}
#smartphone-navbar{
    width:              auto;
    height:             280px;
    background:         linear-gradient(to right, #eaedaa, #1fd3b4);
    position:           fixed;
    z-index:            100;
    left:               0;
    top:                0;
    padding:            5px;
    color:              #fff;
    display:            none;
}
#smartphone-navbar:after{
    content:            "";
    border-right:       50px solid transparent;
    border-top:         280px solid #1fd3b4;
    width:              0;
    height:             0;
    position:           absolute;
    top:                0px;
    right:              -50px;
    transition:         all 0.4s;
}
#smartphone-navbar a{
    color:              #fff;
    display:            block;
    font-size:          4vw;
    padding:            5px 5px 0px 5px;
    transition:         all 0.3s
}
#smartphone-navbar a:hover{color: #181f27;}
#smartphone-navbar div{
    padding:            5px;
    background:         #fff;
    color:              #000;
}

/**
 * Tag *********************************************************************************************************************************
 */
h1{
    font:               normal 8vw 'Fugaz';
    position:           relative;
    text-transform:     uppercase;
}
h2{
    font:               normal 6vw 'Fugaz';
    position:           relative;
    text-transform:     uppercase;
    margin:             -6vw 0px 0 100px;
}
h3{
    font:               normal 1.5em 'Fugaz';
    position:           relative;
    margin:             0 0 10px 0;
    color:              #ea4d7d;
}
a{text-decoration: none;}


/**
 * Header *********************************************************************************************************************************
 */
#header{
    background-position:center 0px;
    background-size:    cover;
    background-repeat:  no-repeat;
    width:              100%;
    height:             100vh;
    position:           relative;
    text-align:         center;
}

#header-video{
    height:             75%;
    width:              100%;
    object-fit:         cover;
    position:           absolute;
    left:               0;
    right:              0;
    bottom:             0;
    z-index:            -1;
}

#header-colorframe{
    position:           relative;
    width:              100%;
    height:             25%;
    background-image:   url('../img/header-colorframe.jpg');
}

#header-figures{
    position:           relative;
    width:              100%;
    height:             100%;
}

#header-figures img{
    position:           absolute;
    z-index:            2;
    max-height:         90%;
    bottom:             0;
}

#header-figure-battery{right: 5%; animation: anim-headerFigures 0.4s normal; animation-fill-mode:forwards;}
#header-figure-trumpet{right: 20%; animation: anim-headerFigures 0.7s normal; animation-fill-mode:forwards;}
#header-figure-saxo{right: 25%; animation: anim-headerFigures 1s normal; animation-fill-mode:forwards;}
#header-figure-trombone{right: 35%; animation: anim-headerFigures 1.4s normal; animation-fill-mode:forwards;}

#header-blackline{
    position:           relative;
    display:            block;
    width:              100%;
    height:             14vh;
    margin-top:         -4vh;
    background-image:   url('../img/header-blackline.png');
    background-size:    contain;
    background-repeat:  repeat-x;
    z-index:            3;
}

#header-nav{
    position:           relative;
    display:            block;
    top:                40%;
}

#header-nav a{
    font:               normal 1vw "Fugaz", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:              #fff;
    margin:             0 30px 0 30px;
    background:         linear-gradient(to top, #fff 2px, transparent 1px) no-repeat;
    background-size:    0 100%;
    transition:         background-size 0.3s;
    text-transform:     uppercase;
}
#header-nav a:hover{background-size:100% 100%;}

#header-logo{
    width:              20vw;
    position:           absolute;
    z-index:            4;
    top:                7%;
    left:               5%;
    animation:          anim-headerLogo 0.9s normal;
    animation-fill-mode:forwards;
}

#header-arrow{
    width:              2%;
    position:           absolute;
    bottom:             5vh;
    animation:          anim-headerArrow 1s normal;
    animation-iteration-count: infinite;
    z-index:            5;
}
#header-arrow:hover{cursor: pointer;}

#header-shape-overlay{
    position:           absolute;
    width:              100%;
    height:             30%;
    bottom:             -15%;
    left:               0;
    overflow:           hidden;
}

#header-shape{
    position:           absolute;
    transform:          rotate(-5deg);
    width:              110%;
    height:             50%;
    top:                30%;
    left:               -1%;
    background:         #000;
}


/**
 * Page Concerts a venir *********************************************************************************************************************************
 */
#agenda-bg{
    width:              100%;
    height:             100%;
    position:           fixed;
    background-image:   url('../img/dates-background.jpg');
    background-size:    cover;
    background-repeat:  no-repeat;
    z-index:            -2;
}
#agenda-title{float: right; margin-top: 3%;}
#agenda-title h1{color: #fcf700;}
#agenda-title h2{color: #df2674;}
#agenda-wrapper{
    clear:              both;
    font:               normal 1.2em "Oxanium", "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:         center;
    padding-top:        4%;
}

.event-wrapper{
    display:            inline-block;
    margin:             20px;
    width:              20%;
    height:             auto;
    color:              #fff;
    vertical-align:     top;
    background:         linear-gradient(#ef5142, #df2674);
    padding:            2%;
}

.event-wrapper:last-child{margin-bottom: 5%;}

.event-date{
    font-size:          2em;
    text-align:         center;
    border-bottom:      solid 1px #fff;
    padding-bottom:     5px;
    text-transform:     uppercase;
}

.event-description-time{
    font-size:          1.6em;
    text-align:         center;
    margin-bottom:      5%;
}

.event-description{
    border:             1px #fff solid;
    padding:            5px;
    position:           relative;
}

.event-description-city{font-size:2.2em;}
.event-description-address{font-size:1.3em;}
.event-description-price{
    margin-top:         5%;
    font-size:          1.2em;
    text-align:         center;
}
.event-description-city span{
    display:            none;
    position:           absolute;
    width:              100px;
    height:             30px;
    background-color:   #fff;
    color:              #000;
    font-size:          9pt;
    top:                -15px;
    left:               -15px;
    padding:            2px;
}
.event-description-city:hover span{
    display:            block;
}
.event-waypoint{transition: color 0.4s;}
.event-waypoint:hover{
    color:              #fcf700;
    cursor:             pointer;
}
.event-poster{
    position:           absolute;
    right:              10px;
    bottom:             10px;
    background:         url('../img/poster.png') no-repeat;
    background-size:    cover;
    width:              22px;
    height:             30px;
    transition:         all .4s;
}
.event-poster:hover{
    transform:          rotate(8deg);
}
#posters-wrapper{text-align: center; padding-bottom: 10%;}
#posters-wrapper button{
    padding:            10px !important;
    margin:             0 auto 10px auto !important;
}
#posters-wrapper div{
    font:               normal 1.2em "Oxanium", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:              #fff;
    padding:            2px;
    display:            inline-block;
    letter-spacing:     3px;
}

/**
 * Page about *********************************************************************************************************************************
 */
#about{background: #000; padding-bottom: 10%;} 
#about-title{float: left;}
#about-title h1{color: #fcf700;}
#about-title h2{color: #ea4d7d;}

.widget-container{
    position:           relative;
    margin:             5% auto auto auto;
    height:             auto;
    width:              70%;
}
#widget1{clear: both;}
.widget-cover{
    width:              0%;
    height:             100%;
    position:           absolute;
    left:               0;
    bottom:             0;
    background:         linear-gradient(#ef5142, #df2674);
}

.widget-reveal{
    width:              100%;
    height:             100%;
    display:            grid;
    grid-template-columns: 1fr 2fr;
    align-items:        center;
    opacity:            0;
}

.widget-item{
    grid-column:        1;
    grid-row:           1;
    font:               normal 1.4em "Oxanium", "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:         right;
    color:              #fff;
}
.widget-img{
    grid-column:        2;
    grid-row:           1;
    transform:          rotate(2deg);
}
.img-container{
    margin-left:        20%;
    width:              60%;
    box-shadow:         0 32px 28px -10px rgba(0,0,0,.22);
    overflow:           hidden;
}
.img-container img{
    position:           relative;
    transition:         all .3s ease;
    width:              100%;
}
.img-container:hover img{
    transform:          scale(1.3) rotate(-3deg);
    filter:             blur(6px);
}
.img-overlay{
    opacity:            0;
    position:           absolute;
    width:              60%;
    height:             100%;
    background:         rgba(255,255,0, .50) url('../img/whitecross.png');
    background-repeat:  no-repeat;
    background-position:center;
    z-index:            5;
    font-size:          10em;
    transition:         opacity 0.8s;
    text-align:         center;
    padding-top:        12%;
    color:              #fff;
}
.img-container:hover .img-overlay{
    opacity:            1;
    cursor:             pointer;
}

#widget2 .widget-reveal{grid-template-columns: 2fr 1fr; }
#widget2 .widget-item{grid-column:2; text-align: left;}
#widget2 .widget-img{grid-column:1;}

#about .shape{background: #ef5142 url('../img/noise-texture-lighter.png');}

.smartphone-widget-img{display: none;}
/**
 * Page écoutez-nous *********************************************************************************************************************************
 */
#listen{background: url('../img/noise-texture-lighter.png'), linear-gradient(#ef5142, #df2674); padding: 0;}
#listen-title{float: right; margin-right: 10%;}
#listen-title h1{
    background:         linear-gradient(to right, #1fd3b4 0%, #eaedaa 50%);
    background-size:    100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#listen-title h2{color: #fcf700;}

#listen-wrapper{
    position:           relative;
    width:              100%;
    min-height:         75vh;
    display:            grid;
    grid-template-columns: 50% 50%;
    padding:            2% 0 0 0;
}

#listen-wrapper h3{
    text-align:         center;
    text-transform:     uppercase;
    font-size:          3em;
    color:              #fff;
}

#jukebox-wrapper, #player-wrapper{position: relative;}

#equalizer-wrapper{
    position:           absolute;
    display:            flex;
    justify-content:    space-between;
    align-items:        flex-end;
    column-gap:         2%;
    width:              80%;
    height:             80%;
    bottom:             0px;
    left:               10%;
    z-index:            1;
}

.equalizer-column{
    height:             30%;
    flex-grow:          1;
    opacity:            0.5;
    background-color:   #fff;
}
#column1{animation: jukeboxColumn1 3.5s ease-in infinite;}
#column2{animation: jukeboxColumn2 3.2s ease-out infinite;}
#column3{animation: jukeboxColumn3 3.7s ease-in infinite;}
#column4{animation: jukeboxColumn4 3.4s ease-out infinite;}
#column5{animation: jukeboxColumn5 3.6s ease-in infinite;}

#jukebox-players-wrapper{
    position:           relative;
    margin-left:        20%;
    width:              60%;
    z-index:            2;
}

.plays-name{
    font:               normal 1.3em "Oxanium", "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:     uppercase;
    margin:             0;
    color:              #fff;
}

.audio-wrapper{width: 80%;}

.video-wrapper{
    display:            inline-block;
    width:              46%;
    margin:             1%;
    position:           relative;
    height:             200px;
}

.video-wrapper.video-wrapper .plays-name{margin-left: 20px;}

.video-wrapper a{
    position:           relative;
    display:            block;
    width:              100%;
    height:             100%;
}

.video-icon{
    position:           absolute;
    width:              100%;
    height:             100%;
    background:         url('../img/video-icon.png') no-repeat center center;
    top:                0;
    opacity:            0;
    transition:         opacity 0.4s;
}

.video-wrapper a:hover .video-icon{opacity: 1;}

.thumbnail{
    position:           relative;
    display:            block;
    width:              100%;
    height:             100%;
    background-size:    cover;
    filter:             grayscale(100%);
    border-radius:      5px;
    transition:         filter 0.4s;
    color:              #fcf700;
    font:               normal 1em "Oxanium", "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding:            10px 0 0 10px;
}

.video-wrapper a:hover .thumbnail{filter: grayscale(0%);}

#listen .shape{
    background:         #000;
    z-index:            2;
}

/**
 * Page contact *********************************************************************************************************************************
 */
#contact{background: url('../img/contact-background.jpg') no-repeat; background-size: cover; background-position: bottom;}
#contact-title h1{
    background:         linear-gradient(to right, #1fd3b4 0%, #eaedaa 50%);
    background-size:    100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#contact-title h2{color: #fcf700;}

#contact-wrapper{
    height:             70vh;
    position:           relative;
    width:              50%;
    display:            grid;
    grid-template-columns: 40% 40%;
    margin:             0 auto 5% auto;
    column-gap:         10%;
    justify-content:    space-around;
    align-items:        center;
}

#contact-box-wrapper, #contact-form-wrapper{
    border:             1px solid #fff;
    padding:            5%;
}

#contact-box-wrapper{
    color:              #fff;
    font:               normal 1.2em 'Oxanium';
}

.contact-box-subwrapper{margin-bottom: 5%;}
.contact-box-subwrapper a{color: #fff;}
.contact-box-subwrapper:last-child{margin-bottom: 0%;}
.contact-box{display: inline-block;}
.contact-box::before{
    content:            '';
    display:            inline-block;
    width:              32px;
    height:             32px;
    border:             1px solid #fff;
    border-radius:      5px;
    vertical-align:     middle;
    margin-right:       10px;
    text-align:         center;
    font-size:          1.5em;
    transition:         all 0.3s;
}
#contact-box-phone::before{content: "\260E";}
#contact-box-mail::before{content: "\2709";}
#contact-box-facebook::before{content: "f";}
#contact-box-youtube::before{content: "Y";}
.contact-box:hover::before{
    border-color:       #fcf700;
    color:              #000;
    background:         #fcf700;
    transform:          rotate(8deg);
}
.contact-box:hover{color:#fcf700;}

form button:hover, #posters-wrapper button:hover{cursor:pointer;}
input[type="text"], input[type="mail"], textarea{
    padding:            10px;
    font:               normal 1em 'Oxanium';
    background:         #2e2e2e;
    color:              #fcf700;
    transition:         all 0.3s;
    border-radius:      5px;
    font-weight:        bold;
    margin-bottom:      5%;
}
input[type="text"]:hover, input[type="text"]:focus, input[type="mail"]:focus, input[type="mail"]:hover, textarea:hover{background: #515151; color: #fff;}
input[type="text"], input[type="mail"]{
    width:              100%;
    height:             30px;
}
textarea{
    width:              100%;
    height:             50%;
    resize:             none;
    display:            block;
}
input[type="submit"], form button, #posters-wrapper button{
    padding:            3% 5% 3% 5%;
    background:         #fcf700;
    font:               normal 1.2em 'Oxanium';
    text-align:         center;
    margin:             5% auto;
    display:            block;
    position:           relative;
    border-radius:      5px;
    transition:         all 0.3s;
}
input[type="submit"]:hover, form button:hover, #posters-wrapper button:hover{
    background:         #eaedaa;
    cursor:             pointer;
}


/**
 * Footer
 */
#footer{
    display:            block;
    position:           relative;
    width:              100%;
    padding:            100px 0 60px 0;
    font:               normal 1em 'Oxanium';
    letter-spacing:     3px;
}

#footer a{
    font:               normal 1em 'Oxanium';
    color:              #fcf700;
}

#footer-section-1, #footer-section-2, #footer-section-3{
    position:           relative;
    width:              100%;
    height:             auto;
    text-align:         center;
}

#footer-section-1 {margin-bottom: 3%;}
#footer-section-1 img{width: 7%;}

#footer-section-1 span{
    display:            block;
    font:               bold 2.5em 'Barlow';
    color:              #fff;
}

#footer-section-2{
    display:            grid;
    grid-template-columns: 20% 20% 20%;
    color:              #fff;
    justify-content:    center;
    margin:             3% 0 3% 0;
}
#footer-section-2 *{margin-bottom: 10px;}
#footer-section-2 span{color: #fcf700;}
#footer-section-2 a{display: block;}
#footer-section-2 a img{width: 30px; margin-bottom: 0;}
#footer-section-2 span:hover{cursor: pointer;}

#footer-section-3 span{
    background-color:   #24232a;
    color:              #fff;
    padding:            2px;
}

/**
 * Mentions légales
 */
#legal-notice{
    display:            none;
    position:           fixed;
    top:                4%;
    left:               4%;
    width:              90%;
    max-height:         90%;
    z-index:            1000;
    background-color:   #f8f4f1;
    border-radius:      5px;
    color:              #000;
    padding:            1rem;
    overflow-y:         auto;
    font:               normal 1.2em 'Oxanium';
    box-shadow:         0px 0px 6px 2px rgba(0,0,0,0.5);
}
#legal-notice p{text-align: justify;}

/**
 * Messages
 */
.alert-message{
    display:            block;
    position:           fixed;
    padding:            10px;
    border-radius:      5px;
    font:               normal 1.2em 'Quicksand-Regular';
    text-align:         justify;
    z-index:            100;
    top:                48%;
    left:               50%;
    transform:          translate(-50%, -50%);
    opacity:            0.8;
}
.alert-success{background-color:#5cb355;}
.alert-error{background-color:#e56a37;}



/**
* Media Queries
*/

/* breakpoints */

@media(max-width: 1980px){
.event-wrapper{width: 25%;}
.widget-container{width: 80%;}
#jukebox-players-wrapper{margin: 0 0 0 5%; width: 95%;}
#contact-wrapper{grid-template-columns: 70% 70%;}
}

@media(max-width: 1280px){
#header-logo{left: 3%;}
#header-figures img{max-height: 75%;}
#header-nav{top: 30%;}
#header-nav a{font-size: 1.2vw;}
.event-wrapper{width: 25%;}
.event-date{font-size: 1.5em;}
.event-description-city{font-size: 1.7em;}
.event-description-address{font-size: 1em;}
.widget-container{width: 80%;}
.widget-item{font-size: 1.2em;}
h3{font-size: 1.3em;}
#jukebox-players-wrapper{margin: 0 0 0 5%; width: 95%;}
.audio-wrapper{width: 70%;}
.video-wrapper{width: 40%; height: 160px; vertical-align: top;}
#contact-wrapper{grid-template-columns: 70% 70%;}
#footer-section-2{grid-template-columns: 30% 30% 30%;}
}

@media(max-width: 830px){
#navbar-icon{display: block;}
#header-colorframe{height: 40%;}
#header-video{height: 70%;}
#header-figures{height: 70%; top:  30%}
#header-logo{top: 4%; left: 3%; width: 50%;}
#header-blackline{height: 30vh; background-size: auto;}
#header-nav{top: 20%; text-align: center;}
#header-nav a{font-size: 2.5vw;}
#header-nav-part1, #header-nav-part2{display: block;}
#header-nav-part1{margin-bottom: 2%;}
#agenda-title{margin-top: 6%;}
.event-wrapper{width: 35%;}
#posters-wrapper{padding-bottom: 20%;}
.widget-container{width: 100%;}
.widget-item{font-size: 1em;}
h3{font-size: 1.1em;}
#listen{min-height: 50vh;}
#listen-wrapper{min-height: 50vh;}
#contact-wrapper{grid-template-columns: 100% 100%;}
#contact-wrapper{height: 40vh;}
#about{min-height: 50vh; height: auto;}
#smartphone-navbar-icon{display: block;}
}

@media(max-width: 630px){
#agenda-title {margin-top: 20%;}
#agenda-bg{height: 110%;}
#about{padding-top: 0;}
#header-colorframe{display: none;}
#header-video{height: 100%;}
#header-figures{display: none;}
#header-blackline{display: none;}
#header-logo{top: 10%; left: 20%; width: 60%;}
h1{font-size: 12vw;}
h2{font-size: 8vw; margin-top: -9vw;}
.event-wrapper{width: 100%; margin: 0 0 20px 0;}
#posters-wrapper{padding-bottom: 30%;}
.widget-img{display: none;}
.widget-reveal{display: block;}
.widget-item h3{font-size: 4vw;}
.smartphone-widget-img{display: block; margin:  8% 0 12% 0;}
#listen-wrapper{display: block; height: auto; padding-top: 15vh;}
#jukebox-wrapper{min-height: 50vh;}
#player-wrapper{min-height: 40vh; margin-top: 5vh;}
#jukebox-players-wrapper {margin: 0; width: 100%; text-align: center;}
.video-icon{left: 0;}
#contact-wrapper{display: block; padding-top: 5vh; width: 100%; margin-bottom: 0; height: auto;}
#footer{padding-top: 60px;}
#footer-section-2{display: block;}

#smartphone-navbar{width: 100%; height: auto;}
#smartphone-navbar:after{display: none;}
#smartphone-navbar a{font-size: 4vh;}
}