@font-face{font-family:'Kindly Rewind';src:url('sources/Kindly Rewind.ttf');}
*, html{margin:0;padding:0;}
html,body{
    height: 100%;
}
body{font-family:'Kindly Rewind';background-color:black;color:white;width:100%;overflow:hidden}

@keyframes animlargesun{
    from{
        transform: translateY(30%);
    }
    to{
        transform: translateY(-10%);
    }
}


.slide{
    width: 100%;
    height: 100%;
    position: relative;
}

.ttr
{
    font-size : 50px ;
    text-align : center ;
}

/***************************** FIXES ******************************/

#logo
{
    position : fixed ;
    height : 13% ;
    width : 0 auto ;
    left : 25px;
    top : 25px ;
    z-index : 9000;
}
#logo img
{
    height : 100% ;
    width : 100% ;
}


nav
{
    height : 100% ;
    width : 150px ;
    position : fixed ;
    left: 100%;
    margin-left : 0px ;
    padding-top : 25px;
    
    z-index : 9001;
}

#nav_1
{
    width : 150px ;
    height : 100% ;
}

#nav_1 a
{
    text-align : right ;
    color : white ;
    text-decoration: none ;
    font-size : 25px;
    margin-bottom : 40px ;
    transition : all 0.5s ease-in-out ;
}

#nav_1 a:hover
{
    color : darkorange;
}

#nav2
{
    position : fixed ;
    z-index:9003;
    right : 25px;
    top : 25px;
    background-color: rgba(0,0,0,0.8);
    border-radius: 50%;
    cursor: pointer;
    width : 75px ;
    height : 75px ;
    padding-top : 15px;
    cursor : pointer;
    overflow : hidden ;
    
    transition: all 0.5s;
    transform: scale(1);
}



#fondburger{
    position: fixed;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: rgba(0,0,0,0.8);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s;
    z-index: 101;
}

#nav2:hover
{
    background-color: darkorange;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px auto 0;
    transition: 0.4s;
}

.scaled{
     transform: scale(100);
}

.change{
    background-color: darkorange!important;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}


#ssmenu
{
    position: fixed;
    width: 400px;
    height: 400px;
    top: 150%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index : 1001;
}

#ssmenu ul{
    list-style:none;
}

#ssmenu ul li
{
    position : relative;
}

#ssmenu ul li a{
    display: block;
    width: 400px;
    height: 80px;
    margin-top : 5%;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    color : darkorange;
}

#ssmenu ul li a:hover{
    color: darkorange;
}

@media all and (max-width: 768px)
{
    #resmenu{
        display: block;
    }
}




/***************************** HOME ******************************/

#bg1
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-image: url(images/bg/grille.gif);
    background-position: center;
    z-index: 5;
}

#bg2
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-image: url('images/bg/sun.png');
    z-index: 4; 
    animation-name: animlargesun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    
}

#bg3
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 35%;
    left: 0;
    background-size: auto;
    background-image: url('images/bg/ciel.png');
    background-position: center;
    z-index: 3; 
}


#home
{
    padding-top : 300px ;
    height : 100%;
    z-index : 1
}


#welback
{
    text-align: center ;
    font-size : 50px ;
    opacity : 0 ;
    z-index : 10;
}


#home_2
{
    margin-top : 17%;
}

#book
{
    height : 100px ;
    width : 400px ;
    text-align : center ;
    font-size : 45px ;
    border : 5px solid white ;
    line-height : 100px ;
    cursor : pointer ;
    z-index : 11;
    transition : all 0.5s ease-in-out ;
    opacity : 0 ;
    z-index : 1 ;
}
#book:hover
{
    color : darkorange ;
    border : 5px solid darkorange ;
}

/***************************** ABOUT ******************************/

#about
{
    padding-top : 7%;
    height : 100% ;
    background-color : rgba(0,0,0,0.4);
    z-index : 15;
    text-align : center ;
}

#ab_1
{
    position : relative ;
    margin-top : 50px ;
    font-size : 22px ;
    line-height : 25px ;
    left:-100%;
}

#ab_2
{
    position : relative ;
    right : -100% ;
    margin-top : 50px ;
    font-size : 30px ;
    line-height : 50px ;
}

#ab_3
{
    position : relative ;
    right : -100% ;
    margin-top : 75px ;
    font-size : 30px ;
}

#ab_a
{
    text-decoration: none;
    color : blueviolet ;
    cursor : pointer ;
}


/***************************** ARTISTES ******************************/

#artists
{
    padding-top : 7%;
    height : 100% ;
    z-index : 15;
    text-align : center ;
    
    overflow:hidden;
}

#bga
{
    position : absolute ;
    min-width: 100%;
    min-height: 100%;
    width : auto ;
    height : auto ;
    top : 50% ;
    left : 50% ;
    background-size: cover;
    z-index: 16;
    display : block;
    transform: translateX(-50%) translateY(-50%);
}

#artistsbis
{
    z-index : 17;
    position : relative ;
}

#myTab
{
    font-size : 35px ;
    margin-top : 20px ;
}

.nav-link
{
    color : white ;
}
.nav-link:hover
{
    color : darkorange ;
}

.active
{
    color : darkorange ;
}

.bloc_art
{
    position : relative ;
    height : 250px ;
    width : 100% ;
    padding : 2%;
    margin-bottom : 5% ;
}

.img_art
{
    background-size : 50% auto;
    background-repeat: no-repeat;
    background-position : center ;
    height : 200px ;
    width : auto;

    
    filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
    transition : all 1s ease-in-out;
        -mwebkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
}

.bloc_art:hover .img_art
{
    background-size : 65% auto ;
    
    filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0); 
}

.dt_art
{
    font-size : 20px ;
    opacity : 0 ;
    transition : all 1.5s ease-in-out ;
}

.bloc_art:hover .dt_art
{
    opacity : 1 ;
}

/****************************** NEWS ******************************/

#news
{
    background-image : url(images/bg/news.jpg);
    background-size: cover;
    background-position: center;
    z-index : 25;
    padding-top : 7% ;
}

.sl_n
{
    width : 100% ;
    height : 75px ;
    background-color : black ;
    font-size : 25px ;
    line-height : 75px ;
    margin-bottom : 50px ;
}
.sl_n a
{
    color : white ;
    text-decoration : white ;
    transition : all 0.25s ease-in-out ;
}
.sl_n a:hover
{
    color : darkorange;
}


.sl_n_date
{
    text-align : left ;
}

.sl_n_titre
{
    text-align : right ;
}

#pg
{
    text-align : center ;
}
#pg a
{
    color : white ;
    text-decoration : none ;
    transition : all 0.25s ease-in-out ;
}
#pg a:hover
{
    color : darkorange ;
}

.sl_nn
{
    margin-top : 20px ;
    height : auto ;
    width : 80% ;
    background-color : black ;
    font-size : 35px ;
    border-radius : 10px ;
}
.sl_nn p
{
    text-align : justify ;
    font-size : 25px;
}

.btn_r
{
    background-color: darkorange ;
    color : white ;
    height : 100px;
    width : 200px ;
    font-size : 35px;
    line-height : 80px;
}
.btn_r:hover
{;
    color : white ;
}

/****************************** CONTACT ******************************/

#contact
{
    padding-top : 7% ;
    z-index : 21 ;
}

#bgc
{
    position : absolute ;
    min-width: 100%;
    min-height: 100%;
    width : auto ;
    height : auto ;
    top : 50% ;
    left : 50% ;
    background-size: cover;
    z-index: 20;
    display : block;
    transform: translateX(-50%) translateY(-50%);
}

#contactbis
{
    z-index : 30;
    position : relative ;
}

#ctc_1
{
    margin-top : 25px ;
    margin-bottom : 30px;
    text-align : center ;
    font-size : 20px ;
}

.barre
{
    width : 100% ;
    height : 50px ;
    line-height : 50px ;
    border : 3px solid darkviolet ;
    color : white ;
    font-size : 15px ;
    background-color : rgba(0,0,0,0.4);
    padding: 5px;
}

.ctc
{
    margin-bottom : 15px ;
    height : auto ;
}

#_submit
{
    text-align : center ;
}

#submit
{
    width : 150px ;
    height : 50px ;
    line-height : 40px ;
    border : 3px solid darkviolet ;
    color : white ;
    background-color : rgba(0,0,0,0.4);
    padding : 2px ;
    transition : all 0.5s ease-in-out ;
    cursor : pointer ;
    font-size : 20px ;
}
#submit:hover
{
    color : darkviolet ;
}

textarea
{
    background-color : rgba(0,0,0,0.4);
    color : white ;
    border : 3px solid darkviolet ;
    resize : none ;
    padding: 5px ;
    width : 100% ;
}

#print
{
    text-align : center ;
    font-size : 20px ;
}

footer
{
    position : absolute ;
    width : 100%;
    top : 100% ;
    margin-top : -50px ;
    height : 50px ;
    line-height : 50px ;
    color : white ;
    background-color : rgba(255,140,0,0.4);
    border-radius : 50px 50px 0px 0px ;
    text-align : center ;
    font-size : 15px ;
    z-index : 8999;
}

/****************************************MEDIAQUERIES**************************************/

/********************************* 870<1046 *******************************/

    
@media all and (min-width: 750px) and (max-width: 1200px)
{
    @keyframes animlargesun{
    from{
        transform: translateY(40%);
    }
    to{
        transform: translateY(15%);
    } 
    }
    
    #bg2
    {
        bottom: 0;
        left: 0;
        background-size: cover;
        background-image: url('images/bg/sun.png');
        z-index: 4; 
        animation-name: animlargesun;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-direction: alternate;

    }
    
    
    .ttr{
        font-size : 35px ;
    }
    
    /**************** NAV ********************/
    
    #logo{
        height: 9%;
    }
    
    /**************** HOME ********************/
    
    #home
    {
        padding-top : 35%;
    }


    #welback
    {
        font-size : 40px ;
    }

    #book
    {
        height : 100px ;
        width : 600px ;
        font-size : 30px ;
        line-height : 100px ;
    }
    
    /**************** ABOUT ********************/
    
    #about
    {
        padding-top : 15%;
    }
    
    /**************** ARTISTS ********************/
    
    #artists
    {
        padding-top : 15%;
    }

    #myTab
    {
        font-size : 30px ;
        margin-top : 20px ;
    }

    .bloc_art
    {
        height : 200px ;
    }

    .img_art
    {
        background-size : 60% auto;
        height : 150px ;
        
        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .bloc_art:hover .img_art
    {
        background-size : 60% auto ;

        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .dt_art
    {
        opacity : 1 ;
        font-size : 15px;
    }

    .bloc_art:hover .dt_art
    {
        opacity : 1 ;
    }
    
    /**************** NEWS ********************/
    
    #news
    {
        padding-top : 15% ;
    }

    .sl_n
    {
        height : 60px ;
        font-size : 17px ;
        line-height : 60px ;
        margin-bottom : 90px ;
    }

    .sl_nn
    {
        margin-top : 20px ;
        height : auto ;
        width : 80% ;
        background-color : black ;
        font-size : 25px ;
        border-radius : 10px ;
    }
    .sl_nn p
    {
        text-align : justify ;
    }

    .btn_r
    {
        background-color: darkorange ;
        color : white ;
    }
    
    /**************** CONTACT ********************/
    
    #contact
    {
        padding-top : 15% ;
    }

    #ctc_1
    {
        margin-top : 25px ;
        margin-bottom : 30px;
        text-align : center ;
        font-size : 20px ;
    }

    .barre
    {
        margin-bottom : 15px;
    }

    textarea
    {
        background-color : rgba(0,0,0,0.4);
        color : white ;
        border : 3px solid darkviolet ;
        resize : none ;
        padding: 5px ;
    }

    #print
    {
        text-align : center ;
        font-size : 20px ;
    }

    footer
    {
        font-size : 12px ;
    }
}

/********************************* 580<870 *******************************/

@media all and (min-width: 580px) and (max-width: 750px)
{
    .ttr{
        font-size : 40px ;
    }
    
    /**************** NAV ********************/
    
    #logo{
        height: 7%;
    }
    
    /**************** HOME ********************/
    
    #home
    {
        padding-top : 15%;
    }


    #welback
    {
        font-size : 35px ;
    }


    #home_2
    {
        margin-top : 50% ;
    }

    #book
    {
        font-size : 25px ;
    }
    
    /**************** ABOUT ********************/
    
    #about
    {
        padding-top : 15%;
    }
    
    #ab_1
    {
        font-size : 24px ;
        line-height : 35px ;
    }

    #ab_2
    {
        margin-top : 40px ;
        font-size : 28px ;
        line-height : 40px ;
    }

    #ab_3
    {
        margin-top : 50px ;
        font-size : 28px ;
    }
    
    /**************** ARTISTS ********************/
    
    #artists
    {
        padding-top : 15%;
    }

    #myTab
    {
        font-size : 28px ;
        margin-top : 25px ;
    }

    .bloc_art
    {
        height : 250px ;
        margin-bottom : 40px;
    }

    .img_art
    {
        background-size : 60% auto;
        height : 220px ;
        
        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .bloc_art:hover .img_art
    {
        background-size : 60% auto ;

        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .dt_art
    {
        opacity : 1 ;
        font-size : 20px;
    }

    .bloc_art:hover .dt_art
    {
        opacity : 1 ;
    }
    
    /**************** NEWS ********************/
    
    #news
    {
        padding-top : 15% ;
    }

    .sl_n
    {
        height : 100px ;
        font-size : 20px ;
        line-height : 100px ;
        margin-bottom : 100px ;
    }

    .sl_nn
    {
        margin-top : 20px ;
        height : auto ;
        width : 80% ;
        text-align : center ;
        background-color : black ;
        font-size : 25px ;
        border-radius : 10px ;
    }
    .sl_nn p
    {
        text-align : justify ;
    }

    .btn_r
    {
        background-color: darkorange ;
        color : white;
        height : 75px;
        line-height : 50px;
        width : 150px ;
    }
    
    /**************** CONTACT ********************/
    
    #contact
    {
        padding-top : 15% ;
    }

    #ctc_1
    {
        margin-top : 25px ;
        margin-bottom : 30px;
        text-align : center ;
        font-size : 25px ;
    }

    .barre
    {
        margin-bottom : 15px;
    }

    textarea
    {
        background-color : rgba(0,0,0,0.4);
        color : white ;
        border : 3px solid darkviolet ;
        resize : none ;
        padding: 5px ;
    }

    #print
    {
        text-align : center ;
        font-size : 20px ;
    }

    footer
    {
        font-size : 10px ;
    }
}

/*********************************    <580 *******************************/

@media all and (max-width: 580px) and (min-width: 350px)
{
    .ttr{
        font-size : 20px ;
    }
    
    /**************** NAV ********************/
    
    #logo{
        height: 7%;
    }
    
    /**************** HOME ********************/
    
    #home
    {
        padding-top : 40%;
    }


    #welback
    {
        font-size : 25px ;
    }


    #home_2
    {
        margin-top : 45% ;
    }

    #book
    {
        font-size : 20px ;
        line-height : 75px;
        height : 75px ;
    }
    
    /**************** ABOUT ********************/
    
    #about
    {
        padding-top : 20%;
    }
    
    #ab_1
    {
        margin-top : 25px ;
        font-size : 12px ;
        line-height : 20px ;
    }

    #ab_2
    {
        margin-top : 5px ;
        font-size : 18px ;
        line-height : 30px ;
    }

    #ab_3
    {
        margin-top : 30px ;
        font-size : 15px ;
    }
    
    /**************** ARTISTS ********************/
    
    #artists
    {
        padding-top : 20%;
    }

    #myTab
    {
        font-size : 18px ;
        margin-top : 10px ;
    }

    .bloc_art
    {
        height : 100px ;
        margin-bottom : 30px;
        width : 100%;
    }

    .img_art
    {
        background-size : 60% auto;
        height : 90px ;
        
        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .bloc_art:hover .img_art
    {
        background-size : 60% auto ;

        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .dt_art
    {
        opacity : 1 ;
        font-size : 12px;
    }

    .bloc_art:hover .dt_art
    {
        opacity : 1 ;
    }
    
    /**************** NEWS ********************/
    
    #news
    {
        padding-top : 20%;
    }

    .sl_n
    {
        height : 50px ;
        font-size : 12px ;
        line-height : 25px ;
        margin-bottom : 10% ;
        text-align : center ;
    }

    .sl_nn
    {
        margin-top : 20px ;
        height : auto ;
        width : 80% ;
        background-color : black ;
        font-size : 15px ;
        border-radius : 10px ;
    }
    .sl_nn p
    {
        text-align : justify ;
    }

    .btn_r
    {
        background-color: darkorange ;
        color : white;
        height : 75px;
        line-height : 55px;
        width : 150px ;
    }
    
    /**************** CONTACT ********************/
    
    #contact
    {
        padding-top : 20% ;
    }

    #ctc_1
    {
        margin-top : 20px ;
        margin-bottom : 20px;
        text-align : center ;
        font-size : 14px ;
    }

    .barre
    {
        margin-bottom : 10px;
        height : 30px ;
        line-height : 30px ;
    }

    textarea
    {
        background-color : rgba(0,0,0,0.4);
        color : white ;
        border : 3px solid darkviolet ;
        resize : none ;
        padding: 5px ;
    }

    #print
    {
        text-align : center ;
        font-size : 12px ;
    }

    footer
    {
        font-size : 12px ;
        height : 75px;
        line-height : 25px;
    }
}

@media all and (max-width: 350px)
{
    .ttr{
        font-size : 18px ;
    }
    
    /**************** NAV ********************/
    
    #logo{
        height: 7%;
    }
    
    /**************** HOME ********************/
    
    #home
    {
        padding-top : 35%;
    }


    #welback
    {
        font-size : 25px ;
    }


    #home_2
    {
        margin-top : 35% ;
    }

    #book
    {
        font-size : 20px ;
        line-height : 75px;
        height : 75px ;
    }
    
    /**************** ABOUT ********************/
    
    #about
    {
        padding-top : 25%;
        line-height : 10px;
    }
    
    #ab_1
    {
        margin-top : 15px ;
        font-size : 12px ;
        line-height : 15px ;
    }

    #ab_2
    {
        margin-top : 5px ;
        font-size : 18px ;
        line-height : 30px ;
    }

    #ab_3
    {
        margin-top : 30px ;
        font-size : 15px ;
        line-height : 20px;
    }
    
    /**************** ARTISTS ********************/
    
    #artists
    {
        padding-top : 25%;
    }

    #myTab
    {
        font-size : 18px ;
        margin-top : 10px ;
    }

    .bloc_art
    {
        height : 100px ;
        margin-bottom : 30px;
        width : 100%;
    }

    .img_art
    {
        background-size : 60% auto;
        height : 90px ;
        
        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .bloc_art:hover .img_art
    {
        background-size : 60% auto ;

        filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0); 
    }

    .dt_art
    {
        opacity : 1 ;
        font-size : 12px;
    }

    .bloc_art:hover .dt_art
    {
        opacity : 1 ;
    }
    
    /**************** NEWS ********************/
    
    #news
    {
        padding-top : 25%;
    }

    .sl_n
    {
        height : 50px ;
        font-size : 12px ;
        line-height : 25px ;
        margin-bottom : 7% ;
        text-align : center ;
    }

    .sl_nn
    {
        margin-top : 20px ;
        height : auto ;
        width : 80% ;
        background-color : black ;
        font-size : 13px ;
        border-radius : 10px ;
    }
    .sl_nn p
    {
        text-align : justify ;
    }

    .btn_r
    {
        background-color: darkorange ;
        color : white;
        height : 75px;
        line-height : 55px;
        width : 150px ;
    }
    
    /**************** CONTACT ********************/
    
    #contact
    {
        padding-top : 20% ;
    }
    
    .ctc
    {
        margin-bottom : 10px ;
    }
    
    #ctc_1
    {
        margin-top : 5px ;
        margin-bottom : 0px;
        text-align : center ;
        font-size : 14px ;
    }

    .barre
    {
        margin-bottom : 10px;
        height : 30px ;
        line-height : 30px ;
    }

    textarea
    {
        background-color : rgba(0,0,0,0.4);
        color : white ;
        border : 3px solid darkviolet ;
        resize : none ;
        padding: 5px ;
    }

    #print
    {
        text-align : center ;
        font-size : 12px ;
    }

    footer
    {
        margin-top : -35px;
        font-size : 8px ;
        height : 35px;
        line-height : 17px;
    }
}