@import url('https://fonts.googleapis.com/css?family=Roboto:500,700');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker:400,700');

:root {
  --content-padding: 1.5em;
}

body {
  opacity: 1;
  transition: 1s opacity;
  background: #000 url("../assets/img/edwt-bkg-m@50.jpg") no-repeat top;
  background-size: contain;
  font-family: 'Roboto', sans-serif;
  color: #fff;
}

body.fade-out {
  opacity: 0;
  transition: none;
}

h2,
h3 {

  color: #f30c1a;
  text-transform: uppercase;
}

h2 {
  font-family: 'Permanent Marker', sans-serif;
  font-size: 3em;
  text-align: center;
}

#base-content-grid {
  display: grid;
  margin: auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "blockRightArea"
    "logoArea"
    "featureArea"
    "newsArea"
    "tourArea"
    "promoArea"
    "footerspan";
}

@media only screen and (orientation: portrait) {
  #freespace {
    height: 65vh;
  }

  body::before {
    background: none;
  }
}

@media only screen and (orientation: landscape) {
  body {
    background: none;
  }

  body::before {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #000 url("../assets/img/edwt-bkg-m-ls.jpg") no-repeat top;
    background-size: cover;
    z-index: -1;
  }

  #base-content-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "logoArea logoArea blockRightArea blockRightArea"
      "featureArea featureArea . ."
      "newsArea newsArea . ."
      "tourArea tourArea . ."
      "promArea promoArea . ."
      "footerspan footerspan footerspan footerspan";
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 996px) and (orientation: landscape) {
  body {
    background: none;
  }

  body::before {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #000 url("../assets/img/edwt-bkg@50.jpg") no-repeat top;
    background-size: cover;
    z-index: -1;
  }

  #base-content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "logoArea logoArea blockRightArea blockRightArea"
      "featureArea featureArea blockRightArea blockRightArea"
      "newsArea newsArea blockRightArea blockRightArea"
      "tourArea tourArea blockRightArea blockRightArea"
      "promoArea promoArea blockRightArea blockRightArea"
      "footerspan footerspan footerspan footerspan";
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 768px) and (orientation:portrait) {
  body {
    background: #000 url("../assets/img/edwt-bkg-m@50.jpg") no-repeat top;
    background-size: contain;
  }

  #base-content-grid {

    display: grid;
    margin: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "blockRightArea blockRightArea"
      "logoArea logoArea"
      "featureArea featureArea"
      "newsArea newsArea"
      "tourArea tourArea"
      "promoArea promoArea"
      "footerspan footerspan";
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  body::before {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #000 url("../assets/img/edwt-bkg@75.jpg") no-repeat top;
    background-attachment: fixed;
    background-size: cover;
    z-index: -1;
  }


}


/* CONTENT BLOCKS */
#freespace {
  padding: var(--content-padding);
  grid-area: blockRightArea;
  display: grid;
}

#logo {
  padding: var(--content-padding);
  grid-area: logoArea;
  display: grid;
  justify-content: center;
}

#feature {
  grid-area: featureArea;
  padding: var(--content-padding);
  flex-direction: column;

}

#news {
  padding: var(--content-padding);
  grid-area: newsArea;
  display: grid;
}

#tour {
  padding: var(--content-padding);
  grid-area: tourArea;
  display: grid;
  align-items: top;
  justify-content: center;
}

#promo {
  padding: var(--content-padding);
  grid-area: promoArea;
  display: grid;
}

#footer {
  padding: var(--content-padding);
  grid-area: footerspan;
  display: grid;
  align-items: center;
  border-top: 4px solid #f30c1a;
  color: #f30c1a;
  background-color: rgba(0, 0, 0, .85);
  margin-top: 50px;
}

/* news */

.news-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "image title"
    "image desc";
  align-items: start;
  margin-bottom: 20px;
}

#news h2 {
  margin-bottom: 1.5em;
}

.news-item:nth-child(even) {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "title image"
    "desc image";
}

.news-image {
  padding-right: var(--content-padding);
  grid-area: image;
}

.news-item:nth-child(even) .news-image {
  padding-left: var(--content-padding);
  padding-right: 0;
}

.news-title {
  grid-area: title;
  align-items: start;
  margin: 0;
}

.news-desc {
  grid-area: desc;
  align-items: start;
}

.news-title>h3 {
  margin: 0;
}


/* OTHER STYLES */


.content_titles h3,
.content_titles h4,
.content_titles h5 {
  text-align: center;
  text-transform: uppercase;
}

.content_titles h3 {
  font-weight: 700;
}

#second-leg-title {
  grid-area: secondleg;
  display: grid;
  justify-content: center;
}

#leg-2-left {
  grid-area: leg2left;
  display: grid;
  align-items: top;
  justify-content: center;
}

#leg-2-right {
  grid-area: leg2right;
  display: grid;
  align-items: top;
  justify-content: center;
}

#tour-listing-left {
  grid-area: featureArea;
  display: grid;
  align-items: top;
  justify-content: center;
}

#tour-listing-right {
  grid-area: tourlistright;
  display: grid;
  align-items: top;
  justify-content: center;
}


#logo h1,
#logo h2 {
  text-align: center;
  padding: 0;
  margin: 0;
}

.tickets-now {
  display: grid;
  justify-content: center;
  margin-top: 15px;
}

.tickets-now a,
.tickets-now a:visited,
.tickets-now a:active {
  border: 3px solid #f30c1a;
  padding: 10px;
  font-weight: bold;
  font-size: 25px;
  color: #f30c1a
}

.tickets-now a:hover,
.tickets-now a:focus {
  text-decoration: none;
  border: 3px solid #f30c1a;
  color: #f30c1a;
}

.tour-buynow {
  display: grid;
  justify-content: center;
}

.tour-buynow a,
.tour-buynow a:visited,
.tour-buynow a:active {
  border: 2px solid rgba(246, 0, 0, .75);
  padding: 5px;
  font-weight: bold;
  font-size: 15px;
  color: #f30c1a;
}

.tour-buynow a:hover,
.tour-buynow a:focus {
  text-decoration: none;
  border: 2px solid #f30c1a;
  color: #f30c1a;
}

.tourlogo2 {
  max-width: 50vw;
  padding: 75px 0 35px 0;
}

.artist-title {
  max-width: 80%;
  text-align: center;
}

.artist-subtitle {
  max-width: 70%;
}

#socials {
  font-size: calc(1em + 2vmin);
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  /* overflow: hidden;*/

}

#socials a {
  text-decoration: none;
  /*padding-left: 40px;*/
  margin-right: 15px;
}

.feature-container {
  max-width: 80%;
  /* Maximum width of 70% */
  margin: auto;
  /* Centering horizontally */
  margin-bottom: 20px;
}

.feature-container img {
  max-width: 100%;
  margin-top: 50px;
  margin-bottom: 20px;
}

.wrap-element {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  /* Maintain 16:9 aspect ratio */
}

.wrapped-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 80%;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}