/* * {
  border: 1px dashed pink;
  min-height: 10px;
} */

html {
  box-sizing: border-box;
  text-align: center;
  /* height: 100%; */
  /* overflow:hidden; */
  /* margin: 0; */
  /* width: 100vw; */
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
}

header {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  opacity: 1;
  text-align: center;
  z-index: 1;
  /* overflow: auto; */
}
menu {
  color: white;
  display: inline-block;
  margin: 0;
  padding-inline-start: 0;
}

td {
  border-right: solid;
  padding: 0px 10px;
  margin: 0px;
  line-height: 1em;
}

#border {
  border-bottom: 1px solid #000000;
}

#no-border {
  border-right: none;
}

.star {
  position: relative;
  bottom: 40px;
  animation: spin 500ms linear 3;
}
@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

#logo {
  width: 600px;
  height: 122px;
}

.table-style {
  font-family: "Bangers", sans-serif;
  color: #ffffff;
  -webkit-text-stroke: 0px;
  font-size: 35px;
  margin: 1px;
  padding: 0px 10px 0px 0px red;
  /* border-color: red; */
}

/*----styling for menu links------*/

.table-style a:link {
  color: #ffffff;
  text-decoration: none;
}
.table-style a:visited {
  color: #ffffff;
}
.table-style a:hover {
  color: #e21c21;
  -webkit-text-stroke: 1px #ffffff;
}
.table-style a:active {
  color: white;
}

/* ----------------BODY BEGINS HERE--------------------- */
/* #background-img {
  background-image: url("../images/crowd1.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100%; 
  margin-top: 2000px;
  position: absolute;
  top: 200px;
} */

.index-body {
  background-image: url("../images/crowd1.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 150%;
  background-color: #000000;
  position: relative;
  font-family: "Anton", sans-serif;
  color: #e21c21;
  -webkit-text-stroke: 1px #ffffff;
  font-size: 49px;
  line-height: 1em;
  margin-top: 4em;
  clear: both;
}
.index-body h1 {
  font-size: 91px;
  -webkit-text-stroke: 0.5px #ffffff;
  margin-bottom: 0;
  text-align: center;
  line-height: 100px;
}
.venue-body {
  font-family: Special Elite, "Anton", sans-serif;
  color: blanchedalmond;
  font-size: 25px;
  margin-top: 6em;
  clear: both;
  text-align: center;
  background-color: rgb(22, 7, 7);
}
.venue-body p {
  font-size: inherit;
  -webkit-text-stroke: 0.5px #000000;
  margin: 1em 0;
}
.venue-body h1 {
  font-family: "Anton", sans-serif;
  font-size: 91px;
  line-height: 100px;
  -webkit-text-stroke: 0.5px #000000;
  padding: 25px 0 0 0;
  margin-bottom: 0;
  border-bottom: 1px solid #9b9b9b;
}

/* ----------------CALENDAR BEGINS HERE--------------------- */

.shows-body {
  text-align: center;
  /* width: 1000px; */
  /* margin: 0 25% 0; */
  /* margin: 0; */
  margin: 200px 5px 0 5px;
  background-color: rgb(22, 7, 7);
  position: static;
  display: grid;
  place-items: center;
}

/* .shows-body {
  display: grid;
  place-items: center;
  margin: 200px 5px 0 5px;    
} */

#header-clear {
  margin-top: 230px;
}

.shows-body * {
  margin: 0;
}

.flyer-thumb {
  text-align: left;
  width: 147px;
  /* height: 220px; */
  height: 100%;
}
.calendar-block {
  width: 734px;
  height: 225px;
  /* height: auto; */
  background-color: #000000;
  position: relative;
  display: inline-block;
  border-style: solid;
  text-align: left;
  margin: 0;
}

.event-details {
  font-family: "Montserrat", sans-serif;
  color: blanchedalmond;
  text-align: left;
  padding: 1px 0 0 20px;
  display: inline-block;
  position: absolute;
  /* vertical-align: middle; */
}
.event-details h1 {
  font-size: 32px;
}

.btn {
  display: none; /* THIS HIDES THE TICKET BUTTON */
  color: blanchedalmond;
  background: #fa2424;
  text-decoration: none;
  padding: 5px 15px;
  border-radius: 4px;
  /* float: right; */
  margin: 80px 30px auto auto;
  font-family: "Montserrat", sans-serif;
}

section:hover {
  border-style: solid;
  border-color: blanchedalmond;
}

.event-details:hover {
  color: rgb(248, 248, 100);
}

.shows-region {
  color: #ffffff;
  font-weight: 100;
  padding: 20px 0;
  /* scroll-margin-top: 250px; */
  vertical-align: middle;
}

.region-container {
  font-family: "Special Elite", sans-serif;
  font-size: 1em;
  background-color: #e21c21;
  height: 77px;
  width: 734px;
  display: inline-block;
  border-style: solid;
  border-color: #ffebcd;
  text-align: center;
  scroll-margin-top: 215px;
}

.shows-footer {
  height: 650px;
  width: auto;
}

/* ----------------VENUES BEGINS HERE--------------------- */

/* NEED TO CONVERT INLINE VENUE CSS TO MOVE HERE */

/* ----------------SUBMIT BEGINS HERE--------------------- */

.submit-button {
  color: #f7fff7;
  background: #e21c21;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
}
.submit-button:hover {
  color: #e21c21;
  background-color: #ffffff;
  border-color: #e21c21;
}

/* ----------MEDIA QUERIES/RESPONSIVE DESIGN---------------*/

/* @media (max-width: 420px) {
  
  .star {
    display: none;
  }
  
  .title-img {
    position: static;
    transform: rotate(0);
  }   
} */

/* ----------MEDIA QUERIES/RESPONSIVE DESIGN---------------*/
/**** Applies to screens 768px and up ****/
/**** Applies to screens 768px and up ****/
/**** Applies to screens 768px and up ****/
@media (min-width: 769px) {
  #hamburger {
    display: none;
  }

  .star {
    visibility: visible;
    position: relative;
    bottom: 40px;
    animation: spin 500ms linear 3;
  }
  /* .shows-body {
    display: grid;
    place-items: center;
    margin: 200px 5px 0 5px;    
  } */
}

/***** Applies to screens 768px and under *****/
/***** Applies to screens 768px and under *****/
/***** Applies to screens 768px and under *****/
@media (max-width: 768px) {
  /* body {
    margin: 0 auto;
  } */
  menu,
  #logo,
  .star {
    display: none;
  }
  html {
    width: 100vh;
    /* width: 500px; */
  }
  body {
    margin: 0;
    width: 100vw;
  }
  .index-body h1 {
    margin-top: 120px;
  }
  .venue-body {
    position: relative;
    margin: 9em 0 0 0;
    width: 100%;

    /* padding: 50px 0 0 0; */
    /* top: 500px; */
  }
  .shows-body {
    /* width: 100%; */
    width: 100vw;
    /* background-color: #000000; */
    /* display:inline; */
    /* display: grid;
    place-items: center; */
    margin: 0;
    /* font-size: 60%; */
    /* text-align: center; */
    position: absolute;
    top: 0;
    /* left: 0;
    right: 0; */
    /* width: auto; */
  }
  .region-container {
    font-family: "Special Elite", sans-serif;
    font-size: 1em;
    background-color: #e21c21;
    height: 77px;
    width: 100vw;
    display: block;
    border-style: solid;
    border-color: #ffebcd;
    text-align: center;
    scroll-margin-top: 215px;
  }
  .calendar-block {
    width: 100vw;
    /* height: 205px; */
    height: 275px;
    min-height: auto;
    /* height: max-content; */
    background-color: #000000;
    display: inline-block;
    border-style: solid;
    /* text-align: center; */
    margin: 0;
  }
  .flyer-thumb {
    display: 50%;
    position: relative;
    padding-right: 10px;
  }

  .event-details {
    /* width: 150%; */
    min-height: auto;
    text-align: left;
    padding: 0;
    font-size: 15px;
    /* font-size: clamp(1rem, 7vmin, 3rem); */
    overflow: hidden;
    text-overflow: unset;
    /* display: inline-block; */
    /* position: absolute; */
    /* margin: 0 0 0 50%; */
    /* max-width: 90%; */
  }

  #logo-small {
    width: 90%;
  }

  /*************** HAMBURGER MENU **************/
  /*************** HAMBURGER MENU **************/
  /*************** HAMBURGER MENU **************/

  #hamburger .topnav {
    overflow: hidden;
    background-color: #000;
    position: relative;
  }

  #hamburger .topnav #myLinks {
    display: none;
  }

  #hamburger .topnav a {
    font-family: "Special Elite", sans-serif;
    color: blanchedalmond;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
    display: block;
  }

  #hamburger .topnav a.icon {
    background: red;
    display: block;
    position: relative;
    /* position: absolute; */
    right: 0;
    top: 0;
    height: 75px;
  }

  #hamburger .topnav a:hover {
    background-color: red;
    color: black;
  }
  #hamburger #social-menu {
    display: inline-block;
  }
  /* TEST TO CLOSE MENU AFTER CLICK */
  /* #hamburger #show-location {
    display: none;
  } */
  .child {
    display: none;
  }

  .parent.clicked .child {
    display: block;
  }
}
/* *****************NOT SURE WHAT THIS IS********************** */
/* @media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
  
  html, body {
    width:100%;
    overflow-x:hidden;
  }

} */

/***** Applies to screens 425px and under *****/
/***** Applies to screens 425px and under *****/
/***** Applies to screens 425px and under *****/
@media (max-width: 425px) {
  .venue-body {
    position: relative;
    margin: 7em 0 0 0;
    width: 130%;
    padding: 10px 5px;
  }
  .venue-body h1 {
    font-size: 65px;
  }
}