@font-face {
    font-family: police1;
    src: url(fonts/Satoshi-Regular.otf);
}

@font-face {
    font-family: police2;
    src: url(fonts/UnormativeFraktur.ttf);
}





body {
    background-color: black;
    color:white;
    font-family: police1;
}

#menu {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#menu a {
    font-family:police2;
    font-size: 1.6vw;
    background-color:#f1899c;
    color:black;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    font-weight: lighter;
}


h1 {
    font-family: police2;
    color: #f1899c;
    font-size: 6vw;
    line-height: 1;
    margin: 0px;
    font-weight: bold;

}

h2 {
    color: #f1899c;
    font-size: 2vw;
    margin-top: 8%;

}

h3 {
    color: #f1899c;
    font-size: 2vw;
    margin-top: 8%;

}

h4 {
    color: #f1899c;
    font-size: 1.2vw;
    margin-top: 20px;
    margin-bottom: 0;

}

#liste_events img {
    max-width: 3.5%;
    margin-right: 1%;
}
img {
    width: 100%;
}
#intro {
    font-size: 1.2vw;
    text-align: justify;
}


       #sidebar a {
       text-decoration: none;
      }


hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

i {
    color: #f1899c;
}


#left {
    display: inline-block;
    vertical-align: top;
    width: 28%;
    position: fixed;
    top:0;
    left: 1%;
}

#right {
    display: inline-block;
    vertical-align: top;
    width: 38%;
    margin-left: 35%;
    
    
}


a {
    color: #f1899c;

}

#sidebar {
    display: inline-block;
    position: fixed;
    top:0;
    right: 1%;
    vertical-align: top;
    width: 22%;
    margin-left: 5%;
    text-align: right;
}

iframe {
    width: 100%;
}


#liste_events p {
    margin-bottom: 0px;
    margin-top: 0px;
}



@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#newsletter {

    background-color: #f1899c;
    color: black;
    animation: blink 1.5s infinite; 
    padding-left: 2px;
    padding-right: 2px;
}

/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {

    #left {
        display: block;
       
        width: 98%;
        position:static;
        top:0;
        left: 1%;
    }
    
    #right {
        display: block;
        vertical-align: top;
        width: 98%;
        margin-left: 1%;
                
    }

    #sidebar {
        display: block;
        position: static;
        top:0;
       
        vertical-align: top;
        width: 98%;
        margin-left: 1%;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: right;
        border-top: #f1899c solid 2px;
        border-bottom: #f1899c solid 2px;
        padding-bottom: 5px;
    }

    h1 {
               font-family: police2;
        color: #f1899c;
        font-size: 200px;
        text-align: justify;
        line-height: 1;
        font-weight: bold;
      }

      h2 {
        font-size: 35px;
      }

      
      h3 {
        font-size: 35px;
      }

      h4 {
        font-size: 35px;
      }

      #menu {
        position: relative;
  z-index: 1000;
      }

      #menu a {
            font-family:police2;
    font-size: 1.6vw;
        font-size: 45px;
        background-color: #f1899c;
        color: black;
        padding-left: 4px;
        padding-right: 2px;
        padding-top: 2px;
        font-weight: lighter;
      }
    
    p,a, i {
         font-size: 30px;
    }

    #gigs {
        position: relative;
  top: 20px;
    }

      #gigs p {
               font-size: 30px;
        margin-left: 1%;
      }

      #gigs span{

        color: #f1899c;
      }

      #gigs br {
        display: none;
      }

      #sidebar h1 {
        text-align: right;
      }

    
       #sidebar a {
        font-size: 45px;
      }

      #intro {
       font-size: 35px;
      }
   
    
    #liste_events p {
   font-size: 30px;
}
    
    iframe {
    width: 100%;
    height: 500px;
}

}