@font-face {
 font-family: "Grotex";
 src: url("../fonts/GrotexBETA-Regular.otf") format("truetype");
}
/*@font-face {
 font-family: "Blimey";
 src: url("../fonts/Blimey-0.1-200.otf") format("truetype");
}*/
@font-face {
 font-family: "Blimey";
 font-weight: bold;
 src: url("../fonts/Blimey-0.1-300.otf") format("truetype");
}


a,
a:focus,
a:hover {
  color: #fff;
}

.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}

html,
body {
  height: 100%;
  background-color: #171717;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
	font-family: "Grotex", "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.7);
          box-shadow: inset 0 0 100px rgba(0,0,0,.7);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: middle;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
  height: 100%;
}

.masthead {
  background-color: #fafafa;
  color: #171717;
  text-shadow: none;
  height: 5.6vh;
}
.masthead-brand {
    float: left;
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 2%;
  font-family: "Blimey";
  font-size: 6.5em;
  font-size: 4.0vh;
  font-weight: bold;
  text-transform: uppercase;
}
.masthead-nav {
  margin-top: 1.8%;
  margin-bottom: 16px;
}
.masthead-nav > li {
  display: inline-block;
/*    float: right;
    margin-right: 1%;*/
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
    padding-right: 2em;
    padding-left: 2em;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: .9em;
    color: #171717;
    border: 2px solid #171717;
    border-radius: 100%;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;

}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}

.progwrapper {
	display: block;
}

.btn-spb {
	position: relative;
	top: 0;
    padding-right: 2em;
    padding-left: 2em;
    padding-top: 5px;
    padding-bottom: 6px;
    font-size: 1.1em;
    color: #fafafa;
    border: 2px solid #fafafa;
    border-radius: 100%;
    white-space: nowrap;
    background-color: #171717;
    transition: top 1s ease-in-out,  background-color .5s ease-in-out;
}
.btn-spb:hover, .btn-spb:active, .bnt-spb:focus, .btn-spb:visited, .btn-spb:focus-within {
	text-decoration: none;
}

.dayrow {
  display: flex;
  align-items: center;
  justify-content: center;
	width: 100%;
	height: 20vh;
	padding: 0 4vw;
}
.lineday {
	position: relative;
	top: 2.0vh;
    height: 3px;
    background-color: #fafafa;
    width: 0%;
}
.lineday:after {
	font-family: sans-serif;
    content: "\2716";
    color: #171717;
    background-color: #fafafa;
    border-radius: 100%;
    padding: 3px 8px 6px 8px;
    text-shadow: none;
    font-size: 1.8em;	
    position: relative;
    top: -16px;
    left: 52%;
    cursor: pointer;
    opacity: 0;
}

.lineday.animateLineIn:after {
	opacity: 1;
}
h3.venue {
  font-family: "Blimey";
  font-size: 6.5em;
  font-size: 5vh;
  margin-bottom: 0;
  text-transform: uppercase;
}
.progday {
  cursor: pointer;
  outline: none;
  transition: background-color .5s ease-in-out;
}
.progday:not(.active):hover {
	background-color: #222222;
}
.progday:not(.active):hover .btn-spb {
	background-color: #222222;
} 
.progday.active {
	cursor: default;
}
.progday .progcontent {
  padding: 0 4vw;
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease-out;
  overflow-y: scroll;
}
.progday p.addinfo {
	margin-top: 15px;
	font-size: 1.1em;
    color: #d8d8d8;
    /*font-weight: 200;*/
}
.progday p.addinfo::first-line {
	font-size: 1.2em;
    text-decoration: underline;
    font-weight: bold;
    color: #fafafa;
}
.progday .progcontent h3 {
	font-family: "Blimey";
	letter-spacing: 1px;
	font-size: 3em;
	text-transform: uppercase;
	margin-bottom: 25px;
}
.progday .progcontent .expandabledesc h3:hover {
	cursor: pointer;
	text-decoration: underline;
}
.progday .progcontent .expandabledesc .band-content {
	display: none;
}
.progday .progcontent p.desc {
	margin-top: 15px;
	text-align: left;
	font-size: 1.1em;
}
.progday .progcontent a {
	text-decoration: underline;
	font-size: 1.1em;
	margin-bottom: 25px;
}

iframe {
	margin-top: 25px;
}
.progday .trame .trameday {
	display: none;
	opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.progday .trame:hover .trameday {
	/*opacity: 1;*/
}

.progday .trame {
	content: "";
	background-repeat: repeat;
	background-size: auto 4vh;
	height: 3.6vh;
	width: 	100%;
}
.progday[data-id="1"] .trame {
	background-color: #fafafa;
	background-image: url("../img/tram1.svg");
}
.progday[data-id="2"] .trame {
	background-image: url("../img/tram2.svg");
}
.progday[data-id="3"] .trame {
	background-image: url("../img/tram3.svg");
}

.mastfoot {
	font-family: "Grotex", "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    position: fixed;
    bottom: 0;
	color: #171717;
	background: #fafafa;
	text-shadow: none;
	text-align: center;
	font-size: .7em;
	padding-left: 4%;
	padding-right: 4%;
    padding-top: 4px;
	height: 5.6vh;
}
.mastfoot a {
	color: #171717;
	text-decoration: none;
}
.mastfoot a:hover {
	text-decoration: underline;
}

.marginbottom {
	margin-bottom: 2em;
}

#info-modal {
	z-index: 2;
	display: none;
	background-color: #fafafa;
	position: absolute;
	top: 14.6vh;
    left: 0;
    opacity: 0;
    height: 81.3vh;
    width: 100vw;
    border: 5px solid #171717;
    color: #171717;
    text-shadow: none;
    overflow-y: scroll;
}
.modal-inner {
	height: 100%;
	width: 100%;
	padding: 0 4%;
/*  display: flex;
  align-items: flex-start;*/
  justify-content: center;
}

#info-modal h3 {
	font-family: "Blimey";
	letter-spacing: 1px;
	font-size: 3em;
	color: #171717;
	text-transform: uppercase;
	margin-bottom: 25px;
}
#info-modal h4 {
 font-weight: lighter;
	font-size: 2em;
	margin-bottom: 15px;
	margin-top: 15px;
}
#info-modal p {
 font-weight: lighter;
	margin-bottom: 25px;
}
#closeinfo {
    color: #fafafa;
    background-color: #171717;
    border-radius: 100%;
    padding: 0px 10px 6px 10px;
    text-shadow: none;
    font-size: 1.8em;	
    position: absolute;
    top: 4%;
    right: 4%;
    cursor: pointer;
    z-index: 3;
}

@media (min-width: 768px) {
.masthead-nav > li > a {
	padding-right: 3em;
    padding-left: 3em;
    padding-top: 2px;
    padding-bottom: 4px;
    font-size: 1.2em;
}

.masthead-nav > li {
    float: right;
    margin-right: 2%;	
}
.lineday:after {
    padding: 4px 8px 5px 8px;
}

	.masthead {
		height: 8.6vh;
	}
	.mastfoot {
		/*text-align: left;*/
		font-size: 1em;
		height: 3.6vh;
	}
  .masthead-brand {
	  margin-left: 2%;
	 font-size: 6.8vh;
  }
  .site-wrapper-inner {
    vertical-align: middle;
  }
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
  }
  .btn-spb {
    padding-right: 4em;
    padding-left: 4em;
    padding-top: 10px;
    padding-bottom: 18px;
    font-size: 1.5em;
    color: #fafafa;
    border: 4px solid #fafafa;
	}

	.progday .trame .trameday {
		display: inline-block;
		font-size: .8em;
		background-color: #171717;
		padding: 4px 9px 0px 9px;
		border-radius: 100%;
		border: 1px solid #fafafa;
	}
}


@media (min-width: 992px) {
.masthead-nav > li > a {
    padding-right: 3.5em;
    padding-left: 3.5em;
    padding-top: 2px;
    font-size: 1.5em;
}
.masthead-nav > li {
    float: right;
    margin-right: 4%;	
}
	.masthead {
		height: 10.6vh;
	}
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
  }

	.masthead-brand {
	  margin-left: 4%;
	  font-size: 8.8vh;
	}

	h3.venue {
	  font-size: 9vh;
	}
	#info-modal {
		left: 12%;
	    width: 75vw;
	}
}

@media (min-height: 500px) {
	.dayrow {
		height: 25vh;
	}
}
.inner .lead {
	margin-top: 20px; 
	font-family: "Grotex", "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}


.animateIn {
     animation: accordionIn 0.45s normal ease-in-out both 1;
}
.animateOut {
     animation: accordionOut 0.75s alternate ease-in-out both 1;
}
.animateLineIn {
     animation: lineIn 1s normal ease-in-out both 1;
}

@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
    0% {
       opacity: 1;
       transform:scale(1);
     }
     50% {
          opacity:0;
           transform:scale(0.9) rotateX(-60deg);
       }
       100% {
          opacity:0;
           width: 0;
       }
}
@keyframes lineIn {
  0% {
    width: 0;
  }
  100% {
    width: 96%;
  }	
}

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fafafa; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #171717; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #212121; 
}


/* TEMP PAGE */
.logo {
	max-width: 100%;
	display: inline-flex;
}

@media (min-width: 992px) {
	.logo {
		max-width: 50%;
	}
}

.temppage {
    display: flex;
    align-items: center;
}

.btn-fb {
	text-decoration: underline;
}