@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Delius&family=Kite+One&display=swap');
@font-face {
    font-family: CGR;
    src: url(font/CGR.ttf);
}

:root {
    --vert: #4F9D49;
    --vertf: #38733D;
    --vertc: #9EBA76;
    --rouge: #E66C4F;
    --rougec: #F09E74;
    --orange: #F19433;
    --orangeA: #F1943333;
    /* --orangeA: #e6a60c1c; */
    --beige: #FCE4B0;
    --bleu: #13182eCC;
    --jaune: #FC0;
    --noir: #000;
    --dark: #111;
    --blanc: #fff;
}

body {
    background-color: var(--beige);
    background: url(images/bottom.png) bottom center no-repeat, url(images/top.png) top center no-repeat, var(--beige);
    background-size: 100%, 100%, cover;
}

p {
    font-family: CGR, sans-serif;
    line-height: 1.8em;
    font-size: 1.2em;
}

a {
    text-decoration: none;
    color: inherit;
}

h2,
h3 {
    color: var(--vertf);
}

.container {
    min-height: 100vh;
}

p {
    font-family: CGR, sans-serif;
    line-height: 1.2em;
    font-size: 1.2em;
}


/*button{
    background: var(--rouge);
}*/

.navbar {
    background-color: var(--vertc);
    font-family: CGR, sans-serif;
    color: var(--rouge);
}

.navbar a {
    border-color: var(--vertf);
    color: var(--vertf);
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

a:active,
a:hover {
    /*background-color: var(--vertf);*/
    color: var(--blanc);
}

.active {
    border-bottom: 2px var(--vertf) solid;
    transition: border-bottom .3s;
}

.head span {
    display: inline-block;
    /*text-shadow: white 1px 1px 1px;*/
    font-family: "bebas neue";
    margin: 0px;
    padding: 0px;
    vertical-align: text-top;
    line-height: 0.8em;
}

.head .festival {
    font-size: 10em;
    color: var(--vertf);
}

.head .eco {
    font-size: 2.3em;
    color: var(--orange);
}

.head .rock {
    font-size: 9em;
    color: var(--vertf);
    vertical-align: text-top;
    float: top;
}

@media only screen and (max-width: 576px) {
    .head .festival {
        font-size: 4.5em;
    }
    .head .rock {
        font-size: 5em;
    }
}

.head .edition {
    font-size: 1.9em;
    color: var(--vertc);
    letter-spacing: .145em;
}

.head .logo {
    height: 9em;
}

.col1 {
    text-align: right;
}

.col2 {
    text-align: center;
}

.col3 {
    text-align: left;
}

.groupes,
.text-box-subhead,
.text-box-head {
    font-family: "bebas neue";
    font-size: 2.5em;
}

.frontpage.groupes {
    margin-bottom: 30vh;
}

.dates {
    font-family: "bebas neue";
    font-size: 3em;
    /* text-shadow: white 1px 1px 1px; */
    line-height: 1em;
}

@media only screen and (max-width: 576px) {}

.Rock {
    font-size: 1.4em;
    color: var(--rouge);
    display: inline-block;
}

.Folk {
    font-size: 1.4em;
    color: var(--vert);
    display: inline-block;
}

img .groupe {
    border-color: var(--rougec);
}


/*#app img{
    filter:sepia(70%);    
}
#app .groupe:hover img{
    filter:none;
    transition: filter .3s;
}*/

.p404 {
    color: var(--rouge);
    font-size: 15em;
}

.orange {
    color: var(--orange);
}

.rouge {
    color: var(--rouge);
}

.rougec {
    color: var(--rougec);
}

.vert {
    color: var(--vert);
}

.vertf {
    color: var(--vertf);
}

.vertc {
    color: var(--vertc);
}

.beige {
    color: var(--beige);
}

.sm-orange {
    background-color: var(--orange);
}

.sm-orangeA {
    background-color: var(--orangeA);
}

.sm-rouge {
    background-color: var(--rouge);
}

.sm-rougec {
    background-color: var(--rougec);
}

.sm-vert {
    background-color: var(--vert);
}

.sm-vertf {
    background-color: var(--vertf);
}

.sm-vertc {
    background-color: var(--vertc);
}

.sm-beige {
    background-color: var(--beige);
}

.big {
    font-size: 1.5em;
}

.big2 {
    font-size: 1.2em;
}

.text-box-head {
    font-family: "bebas neue", sans-serif;
}

.text-box-subhead {
    font-family: "bebas neue", sans-serif;
    font-size: 2.5em;
}

.rotate-l {
    transform: rotate(-1deg);
}

.border-20 {
    border-width: 20px;
    border-style: solid;
    border-color: var(--dark);
}

button {
    cursor: pointer
}