/* CSS DELTA FESTIVAL */


 /* Image */
 .bgimg {background-position:center; vertical-align:bottom; background-size: cover}
 .banner {background-image: url("medias/Delta-Festival-Marseille.jpg");}

/* elements de base */
* {
    margin: 0
}

nav {
    position:sticky;
    top:-4px;
    background-color: #2a2623;
    text-align:left;
    height: 48px;
    padding-top: 18px;
    font-weight: 600;
    box-shadow: 0px 4px 8px #00000080;
    z-index: 2;
}

nav span {
    text-align: center;
    margin: 0 0.35% ;
    text-decoration: none;
  }
  
span a:hover {
    color: #ed9b4c;
    font-size: 105%;
}

h1 {
    font-size: 98px;
    color: #FFFFFF;
    padding :60px 5% ;
    line-height: 0.9;
}

h2{
    font-size: 60px;
}

h1,h2 {
    font-family: "Leckerli One", cursive;
    font-weight: 300;
    text-shadow: 0px 4px 8px #00000080;
}

h2, h3 {
    padding :12px 6px 16px;
}


body {
    font-family: "Readex Pro", sans-serif;
    text-align:center;
    font-size : 16px;
    color:#FFFFFF;
    min-width: 300px;
    background-color: #2a2623;
}

section {
    margin: 20px 10%;
    padding: 25px 0px;
    background-color: #23525c;
    box-shadow: 0px 4px 8px #00000090;
}


p {
    padding: 20px;
}

a {
    text-decoration: none;
    color: #FFFFFF;
}



button {
    border: none;
    padding:20px;
    background-color: #3b7b8b;
    color: #FFFFFF;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
}

input, select {
    font-size: 16px;
    width: 100%;
    padding: 10px;
    border: none;
    margin: 5;
}

label,legend {
    font-size:70%;
    opacity: 0.7;
    margin: 5 0 0;
    z-index:1;
}

input[type=checkbox] {
    box-shadow: none;
}

input[type=submit]:hover , input:focus {
    background-color: #3b7b8b;
    color: #FFFFFF; 
}

footer{
    margin: 2px ;
    padding: 20 0 30;
}

table {
    border: none;
    width: 90%;
    margin: 0 5%;
    text-align: center;
}
td, th{
    padding: 2px 5px;
}

fieldset {
    border: none;
}



/* Typo */

.readex-pro {
    font-family: "Readex Pro", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 200,
  'opsz' 40;
  vertical-align: middle;
}

.leckerli-one-regular {
    font-family: "Leckerli One", cursive;
    font-weight: 400;
    font-style: normal;
  }




/* elements de class */  



.artist {
    width: 75%;
    box-shadow: 0px 4px 8px #00000080;
    border-radius: 100%;
}

.ticket ,input, select, .carte 
{
    background-color: #FFFFFF;
    box-shadow: 0px 4px 8px #00000080;
    color: #000000;
}

.left {
    display: none;
}

.logo {
    width: 40px;
    padding: 5px;
    margin: 20px 0 0;
    box-shadow: 0px 2px 8px #000000;
    border-radius: 50%;
    background-color:#FFFFFF ;
}

.logo:hover, button:hover {
    cursor: pointer;
    box-shadow: 0px 0px 15px #ed9b4c;
    border: 1px solid #865526;
}

.carte {
    width: 90%;
    height: 300px;
    margin: 10px 5%;
    border: none;
}



/* responsive col */
.col1, .col2,.col3, .col4 {
    display: inline-block;
}


@media (min-width: 800px){
    .col1 {width: 90%;margin:auto}
    .col2 {width: 40%;margin:0% 2.5%}
    .col3 {width: 25%;margin:0% 2%}
    .col4 {width: 20%;margin:0% 2%}
    .material-symbols-outlined {font-size: smaller;}
    .navbar { margin:0 10%;}
}

@media (max-width: 800px){
    .col1, .col2, .col3 {width: 90%;margin:10px 5%}
    .col4 {width: 20%;margin:0px 0.5%}
    nav span { margin: 0 2% 5px;}
    .none {display:none}
    .logo { margin:2px 5px;}
    section {margin: 20px 5%;}
    .navbar {margin:0 5%;}
}