body,
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  font-family: "Muli", sans-serif;
}

body {
  background: #000;
}

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

h1 {
  font-size: 60px;
  font-weight: 200;
  padding: 1em;
}

.blog .performances {
  margin-top: 200px;
}

/*----------------------
    NAVIGATION GENERAL
------------------------*/

.container {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 90%;
  margin: 0 5%;
}

header {
  width: 100%;
  z-index: 0;
}

nav ul {
  display: flex;
  list-style: none;
}

/*---------------
    LANG MENU
-----------------*/

.lang__menu nav {
  flex-basis: 100%;
  /*Play with this*/
}

.lang__menu {
  display: flex;
  margin-top: 1em;
}

.lang__menu nav ul {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
}

.lang__menu nav ul li {
  padding: 0 1em;
  opacity: 0.5;
}

.lang__menu nav ul li {
  text-transform: uppercase;
}

.lang__menu nav ul li.active {
  opacity: 1;
  color: #fff;
}

/*-------------------
    MENU NAVIGATION
---------------------*/
.main__menu {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.main__menu nav ul li {
  margin: 0 0.8em;
  padding: 0.8em 0.2em;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}

.main__menu nav ul li:hover {
  border-bottom: 2px solid #fff;
}
.main__menu nav ul {
  margin: 0 0 0 2em;
  padding: 0;
}
.icons {
  margin-right: 1em;
}
.icons div a {
  padding-left: 0.5em;
}

/*--------------
    MENU ICON
----------------*/
.menu-icon {
  line-height: 30px;
  box-sizing: border-box;
  margin: 1em 2em 1em 0;
  cursor: pointer;
  display: none;
}

/*--------------------
    MAIN MENU SCROLL
----------------------*/
.container.black {
  background: #000;
  padding: 0 5%;
  width: 90%;
  margin: 0 0%;
}

/*-----------------
    VIDEO HEADER
-------------------*/
.video-container {
  position: relative;
}

.video-container .image-author__tag {
  right: 50px;
}

.video-container::before {
  position: relative;
  z-index: 1;
}

#video-bg {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  /*Respnosive vid*/
}

/*---------------
    TESTIMONIAL
-----------------*/
.testimonial {
  background: #000;
  color: #fff;
  justify-content: center;
  padding: 3em;
  z-index: 0;
}

.testimonial .text__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
  color: #fff;
  background: #000;
  margin: 1% 30%;
  text-align: center;
}

.testimonial__image {
  position: relative;
  display: flex;
  justify-content: center;
}

#testimonial__image {
  position: relative;
}
.testimonial__image--band--members {
  width: 100%;
  height: auto;
}
/*.image-author__tag p{
    display: none;
}*/

/*.image-author__tag:hover p{
    display: block;
}*/

.image-author__tag {
  position: absolute;
  display: flex;
  bottom: 5%;
  right: 0%;
  color: #fff;
}
.image-author__tag img {
  padding-left: 10px;
}

.image-author__tag p {
  /*display: none; */
  margin: 0;
  opacity: 0;
  transition: all 0.3s ease-in;
}

.image-author__tag:hover p {
  /* display: block; */
  opacity: 1;
}
/*-----------------
    PERFORMANCES
-------------------*/
.performances {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../media/fotod/night_bg.jpg");
  background-size: cover;
  color: #fff;
  padding: 5%;
}

.performances h1 {
  text-align: center;
}

.performances div {
  display: flex;
  margin: 1em 10em;
  padding: 0.5em 2em;
  align-items: center;
}

.performances__upcoming a {
  color: #10f1f5;
}

.performances__upcoming {
  background: #000;
}

.performances__past {
  background: #000;
  opacity: 0.5;
}

.performances__date {
  font-size: 24px;
  flex-basis: 10%;
}

.performances__name {
  flex-basis: 75%;
}

.performances__btn--section {
  text-align: center;
  padding: 1em;
}

.performances__btn {
  border: 2px solid #fff;
  background: Transparent;
  padding: 0.8em 2em;
  border-radius: 50px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.1s ease-in-out;
}
.performances__btn:hover {
  box-shadow: 2px 5px 20px #000;
}
.performances .image-author__tag {
  margin: 1em;
  padding: 0;
}
.more__performances {
  transition: all 0.2s ease-in-out;
}
.more__performances:hover {
  color: aquamarine;
}

/*----------
    MEDIA
------------*/
.media {
  text-align: center;
  background: #000;
  color: #fff;
}

.media__video--and--music {
  display: flex;
  justify-content: center;
}

.media__video--and--music iframe {
  border: none;
  padding: 0 1em;
}

/*-----------
    GALLERY
-------------*/
.gallery {
  display: flex;
  margin-top: 10em;
  width: 100%;
  height: 360px;
  white-space: nowrap;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}
.gallery div {
  display: inline-block;
}

/*----------
    PRESS
------------*/
.press {
  background: #000;
  color: #fff;
  text-align: center;
  margin: 5% 35%;
}

.press__quotes--border--line {
  display: inline-block;
  width: 15em;
  margin: 0 10% 0 10%;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    #df0002 0%,
    #c90074 13.4%,
    #e326f2 29.3%,
    #58a0f1 43.9%,
    #f6abfb 50.2%,
    #697ce9 57.3%,
    #df00e0 70.3%,
    #f48922 79.1%,
    #13d90a 90.4%,
    #13def3 100%
  );
  border-image-slice: 1;
}

.press__quotes--quoete {
  font-size: 24px;
}

.press__quotes--author {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 30px;
}

/*-----------
    CONTACT
-------------*/
.contact {
  position: relative;
  width: 100%;
  padding: 10em 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../media/fotod/oopus_ako_lehemets.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact div {
  text-align: center;
}

.contact p {
  font-size: 24px;
}

.contact__contact--info {
  padding: 1em 0 4em 0;
}

input[type="email"] {
  background: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  text-align: center;
  font-size: 22px;
  padding: 0.5em 2em;
  outline: none;
  color: #fff;
}

input::placeholder {
  color: #fff;
  font-size: 20px;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus:-moz-placeholder {
  color: transparent;
} /* Firefox 18- */
input:focus::-moz-placeholder {
  color: transparent;
} /* Firefox 19+ */
input:focus:-ms-input-placeholder {
  color: transparent;
} /* oldIE */

.contact__join--us--btn {
  border: 1px solid #fff;
  background: Transparent;
  margin: 2em 0;
  padding: 0.7em 1.2em;
  border-radius: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  outline: none;
  font-weight: 300;
  transition: all 0.1s ease-in-out;
  text-transform: uppercase;
}
.contact__join--us--btn:hover {
  box-shadow: 1px 3px 20px #000;
}

.contact .image-author__tag {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.contact .image-author__tag {
  margin: 1em;
  padding: 0;
}
.contact .image-author__tag p {
  font-size: 16px;
}

.mc-embedded-validation-message {
  margin-bottom: 20px;
}

@media (max-width: 990px) {
  h1 {
    font-size: 30px;
  }

  .blog .performances {
    margin-top: 100px;
  }

  /*-----------------
        VIDEO HEADER
    -------------------*/

  .video-container .image-author__tag {
    right: 15px;
  }
  .video-container {
    padding-top: 62px;
  }
  /*---------
        MENU
    -----------*/
  .container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    background: #000;
    padding: 0 5%;
    width: 90%;
    margin: 0 0%;
  }
  .main__menu {
    flex: 1 0 100%;
    order: 2;
    align-items: flex-start;
    display: none;
  }
  .lang__menu {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-end;
  }
  .main__menu nav ul {
    flex-flow: column;
  }
  .main__menu .icons div a {
    display: block;
    text-align: center;
    padding: 0.5em;
  }

  .menu-icon {
    flex: 1 0 100%;
    order: 1;
    display: block;
    text-align: right;
  }

  /*---------------
        TESTIMONIAL
    -----------------*/
  .testimonial {
    padding: 1em;
  }
  .testimonial .text__container {
    margin: 1% 5%;
  }

  /*-----------------
        PERFORMANCES
    -------------------*/
  .performances div {
    display: block;
    margin: 2em;
    padding-bottom: 1.5em;
    text-align: center;
  }

  /*---------
        MEDIA
    -----------*/
  .media {
    text-align: center;
    background: #000;
    color: #fff;
  }

  .media__video--and--music {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .media__video--and--music iframe {
    border: none;
    padding: 0 1em;
  }
  #media__video {
    order: 2;
    width: 90%;
    height: 310px;
  }
  #media__music {
    order: 1;
    margin-bottom: 3em;
  }

  /*---------------
        GALLERY
    -----------------*/

  .gallery {
    margin-top: 4em;
  }
  /*----------
        PRESS
    ------------*/
  .press {
    margin: 5% 7%;
  }
}

@media (max-width: 525px) {
  /*----------
        PRESS
    ------------*/
  .press__quotes--quoete {
    font-size: 20px;
  }
}
@media (min-width: 991px) {
  .main__menu {
    display: flex !important;
  }

  #hamburger_btn {
    display: none !important;
  }
}