/**
* 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:        'Nunito';
    src:                url('../fonts/nunito/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight:        normal;
    font-style:         normal;
    font-display: fallback;
}

@font-face {
    font-family:        'GreatVibes';
    src:                url('../fonts/greatvibes/GreatVibes-Regular.ttf') format('truetype');
    font-weight:        normal;
    font-style:         normal;
    font-display: fallback;
}

@font-face {
    font-family:        'BodoniModa';
    src:                url('../fonts/bodonimoda/BodoniModa-VariableFont_opsz.ttf') format('truetype');
    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:              #123840;
    font:               normal 100% "Nunito", "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, #danse, #show, #class, #signup, #planing{
    display:            block;
    width:              100%;
    min-height:         100vh;
    position:           relative;
}

#about, #agenda, #contact, #listen, #danse, #show, #class, #signup, #planing{
    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;
}

.subtitle{
    display:            inline-block;
    font:               normal 4em "BodoniModa", "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-bottom:      3%;
    position:           relative;
    z-index:            0;
}

.subtitle span{
    display:            block;
    position:           absolute;
    width:              90%;
    height:             50%;
    top:                50%;
    left:               40px;
    background:         #30ffd2;
    z-index:            -1;
}

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

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

/**
 * 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 20px 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 "Nunito", "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{
    position:           fixed;
    top:                5px;
    left:               5px;
    background:         url('../img/navbar-icon.png') 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 'BodoniModa';
    position:           relative;
    text-transform:     uppercase;
}
h2{
    font:               normal 6vw 'BodoniModa';
    position:           relative;
    text-transform:     uppercase;
    margin:             -6vw 0px 0 100px;
}
h3{
    font:               normal 1.5em 'BodoniModa';
    position:           relative;
    margin:             0 0 10px 0;
    color:              #123840;
}
a{text-decoration: none;}



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

#footer a{
    font:               normal 1em 'Nunito';
    color:              #123840;
}

#footer a:hover, #footer span:hover{color: #eaedaa;}

#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: 10%;}

#footer-section-1 span{
    display:            block;
    font:               bold 2.5em 'GreatVibes';
    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: #123840;}
#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:   #123840;
    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 'Nunito';
    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;}