@font-face {
    font-family: 'century';
    src        : url('../webfonts/CenturyGothic.woff2') format('woff2');
    font-weight: normal;
    font-style : normal;
}

@font-face {
    font-family: 'cowboys';
    src        : url('../webfonts/cowboys.woff2') format('woff2');
    font-weight: normal;
    font-style : normal;
}

html {
    scroll-behavior: smooth;
}

#totop {
    display      : block;
    padding      : 8px;
    font-size    : 2rem;
    position     : fixed;
    right        : 20px;
    bottom       : 20px;
    background   : #000;
    color        : #FFF !important;
    z-index      : 40;
    line-height  : 1 !important;
    border-radius: 6px;
    transition   : opacity .3s;
    opacity      : .4;
}

#totop:hover {
    opacity: 1;
}

media,
img {
    max-width: 100% !important;
}

.container-fluid {
    width  : 100% !important;
    padding: 0;
}

.cont900 {
    width    : 900px;
    max-width: 100% !important;
    margin   : 0 auto;
    padding-inline: 10px;
}

.cont1200 {
    width    : 1200px;
    max-width: 100% !important;
    margin   : 0 auto;
    padding-inline: 10px;
}

.container {
    width    : 1200px;
    max-width: 100% !important;
}

.videos {
    display     : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
}

.unevideo {
    width        : 100%;
    aspect-ratio: 16/9;
}

.unevideo iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

#main {
    padding-bottom: 50px;
}



.nav-item,
#transition,
footer {
    text-align: left
}

p,
ul,
li,
a,
h2,
h3 {
    font-family: century;
}

ul {
    padding   : 0;
    list-style: none;
}

iframe {
    max-width: 100% !important;
}

#surheader {
    background: #2a2a2a;
    color     : rgb(255, 255, 255);
    font-size : .86rem;
    padding   : 6px 0;
}

#surheader ul {
    margin: 0;
}

#surheader li {
    display     : inline-block;
    margin-right: 1rem;
}

#surheader .topsoc li {
    margin: 0 0 0 .5rem;
}

#surheader a {
    color: white;
}

#mainnav {
    position  : fixed;
    left      : 0;
    top       : 0;
    width     : 100%;
    height    : 100%;
    background: rgba(255, 255, 255, .9);
    z-index   : 1000;
    padding   : 40px 20px;
    text-align: center;
    display   : none;
    opacity   : 0;
    transition: opacity 1s ease;
}

#mainnav.open {
    display   : block;
    opacity   : 1;
    transition: opacity 1s ease;
}

#mainnav ul {
    margin: 0;
}

#mainnav li {
    display  : block;
    margin   : 0 0 15px 0;
    font-size: 1.5rem;
}

#mainnav li::last-child {
    margin-right: 0;
}

#openmenu,
#closemenu {
    font-size: 2rem;
    color    : black;
}

@media (min-width: 992px) {
    #mainnav {
        position  : static;
        width     : auto;
        height    : auto;
        background: rgba(255, 255, 255, .9);
        z-index   : 1000;
        padding   : 0;
        text-align: left;
        display   : block;
        opacity   : 1;
    }

    #mainnav ul {
        margin: 0;
    }

    #mainnav li {
        display  : inline-block;
        margin   : 0 10px 0 0;
        font-size: 1rem;
    }

    #mainnav li::last-child {
        margin-right: 0;
    }
}

#mainnav li a {
    color          : #000;
    text-decoration: none;
}

#mainnav li a:hover,
#mainnav li a.activ {
    color: #2EA3F2;
}

footer {
    background-color: #2d2d2d;
    color           : rgba(255, 255, 255, .8);
    height          : 50px;
}

footer a {
    color          : rgba(255, 255, 255, .8);
    text-decoration: none;
}

footer a:hover {
    color          : rgba(255, 255, 255, .8);
    text-decoration: underline;
}

footer .sep {
    display: inline-block;
    margin : 0 5px;
}


/***********HEADER*************/

header {
    background     : url(../img/dirty_boots_trio_phone.jpg)no-repeat 50% 50%;
    background-size: cover;
    height         : calc(100vh - 100px);
    margin         : 0 auto 40px auto;
    padding        : 0 20% 20% 20%;
    width          : 100%;
    display        : flex;
    align-items    : flex-end;
}

@media (min-width: 768px) {
header {
    background     : url(../img/dirty_boots_trio.jpg)no-repeat 50% 50%;
    background-size: cover;
    height         : calc(100vh - 100px);
    margin         : 0 0 40px 0;
    padding        : 0 0 10% 10%;
    width          : 100%;
    display        : flex;
    align-items    : flex-end;
}
}

#top_logo {
    font-family    : 'cowboys';
    font-size      : 2rem;
    color          : #000;
    width          : 400px;
    display        : block;
    text-decoration: none;
}

h1 {
    font-family: 'century';
}

header h1 {
    font-size : 3rem;
    animation : titre ease 2s;
    color     : #D9531E;
    text-align: center;
}

h1 .musiques {
    font-size: 3rem;
    font-family: 'cowboys';
    text-shadow: 0.1em 0.1em 0.2em black
}
.lys {
    font-family   : 'century';
    text-transform: uppercase;
    font-weight   : bold;
    color         : #F47D31;
    text-shadow: 0.1em 0.1em 0.2em black;
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 4rem;
    }

    h1 .musiques {
        font-size: 1.5em;
    }
    .lys {
        font-size: 3rem;
    }
}



@keyframes titre {
    0% {
        opacity  : 0;
        transform: translateY(180px);
    }

    100% {
        opacity  : 1;
        transform: translateY(0px);
    }
}

#formcontact {
    margin       : 0 auto;
    width        : 100%;
    padding      : 3rem 10%;
    border       : 1px solid rgb(0, 0, 0);
    border-radius: 1em;
}

form {
    margin: 0 auto;
}

#formulaire {
    width    : 100%;
    max-width: 900px;
    margin   : 0 auto;
    padding  : 0 5%;
}

form div+div {
    margin-top: 1em;
}

input,
textarea {
    font      : 1em sans-serif;
    width     : 100%;
    box-sizing: border-box;
    border    : 1px solid #999;
}

input:focus,
textarea:focus {
    border-color: #000;
}

textarea {
    vertical-align: top;
    height        : 5em;
}

.button {
    padding-left: 90px;
}

button {
    margin-left: .5em;
}

/* dates */

.imgdate {
    width     : 220px;
    object-fit: contain;
}

.pdate {
    font-weight  : bold;
    font-size    : 1.1rem;
    width        : 100%;
    border-bottom: #b10f04f5 solid 2px;
}

.plieu {
    text-transform : uppercase;
    /* text-decoration: underline; */
}

.gpsbutton {
    display        : block;
    text-align     : center;
    text-decoration: bold;
    background     : #D9531E;
    border         : black 1px solid;
    color          : #ffffff;
    margin-bottom  : 10px;
    border-radius  : 3px;
    width          : 30%;
    margin-inline  : auto;
    padding-block  : 5px;
    box-shadow: 0 0 10px #878787;
}

.vid_home .gpsbutton,
.dates_home .gpsbutton,
.avis .gpsbutton {
    width        : 70%;
    margin-inline: auto;
    margin-top   : 15px;
}

.gpsbutton:hover {
    background     : #F47D31;
    color          : #000;
    text-decoration: none !important;
}

.gpsbutton a:hover {
    text-decoration: none;
}


.unedate a {
    text-decoration: none;
}


@media (min-width: 768px) {
    .unedate {
        display     : flex;
        margin-block: 20px;
        background  : #ffffff;
        box-shadow: 0 0 10px #878787;
    }

    .dateinfos {
        padding-inline: 30px;
        padding-top   : 20px;
        width         : 100%;
    }
}

.row_dates_home {
    display: flex;
}

.unedatehome {
    width           : 33.3%;
    padding-inline  : 12px;
}

.imgdatehome {
    width: 100%;
}

.vid_home {
    padding-block: 40px;
    margin-inline: auto;
}

.dates_home {
    padding-block : 40px;
    padding-inline: auto;
}

.dates_home h1,
.vid_home h1,
.avis h1 {
    text-align    : center;
    padding-bottom: 20px;
}