/*--------------------------Begin the CSS--------------------------*/
html {
	font-size: 62.5%;
}
body {
	font: 1.6rem/1.5 Arial, san-serif;
	background: #333333;
	color: #EAEAEA;
}
/*Classes*/
.wrapper {
	max-width: 110rem;
	margin: 0 auto;
}
.button {
	position: relative;
	display: inline-block;
	padding: 0.5rem 1rem;
	background: #9B59B6;
	border-bottom: 0.2rem solid #783C90;
	color: #EEEEEE;
}
.button::before, .button:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #9c59b6 transparent transparent transparent;
}
.button::before {
	top: 0;
	left: 100%;
	border-width: 3.6rem 3.6rem 0 0;
}
.button::after {
	bottom: 0;
	left: calc(100% + 1.8rem);
	border-width: 1.4rem 1.4rem 0 0;
	transform: rotate(45deg);
}
/*--------------------------Header Section--------------------------*/
header {
	height: 50rem;
}
header .wrapper {
	position: relative;
}
h1 {
  padding: 5rem 0rem 0rem 0rem;
}
header nav ul {
  padding: 0rem;
  list-style-type: none;
}
header nav a {
	font-size: 2rem;
  text-decoration: none;
  font-weight: bold;
  color: #AAAAAA;
  text-transform: uppercase;
}
nav a:hover {
  color: #EEEEEE;
}
header, #tourDates {
  background-image: url("../images/band.jpg");
  background-position: left center;
}
header p a, #tourDates p a, #about p a {
  text-decoration: none;
}
.latestSingle {
	width: 30rem;
	float: right;
	background: #222222;
	padding: 0 5rem 0 5rem;
}
.latestSingle h3, .latestSingle p:not(:nth-of-type(2)) {
	font-weight: bold;
	text-transform: uppercase;
}
.latestSingle h3 {
	font-size: 3rem;
	line-height: 1;
}
.latestSingle p:not(:nth-of-type(2)) {
	position: absolute;
	display: block;
	width: 7rem;
	top: 5.5rem;
	right: 21rem;
	font-size: 1rem;
	line-height: 1;
}
.latestSingle::after {
	content: "";
	width: 0;
	position: absolute;
	bottom: 0;
	right: 40rem;
	height: 0;
	border-style: solid;
	border-width: 0 0 19rem 10rem;
	border-color: transparent transparent #222222 transparent;
}
/*--------------------------News Section--------------------------*/
.wrapper::after {
	content: "";
	display: block;
	clear: both;
}
#news {
	background: #fff;
	color: #333333;
}
#news article {
	width: calc(25% - 2rem);
	height: 15rem;
	float: left;
	margin-bottom: 2rem;
	position: relative;
	box-sizing: border-box;
  overflow: hidden;
}
#news article:not(:nth-of-type(2n+3)), #about img:not(:nth-of-type(2n+3)) {
	margin-right: 2rem;
}
#news article::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 2rem;
	margin-top: 1rem;
	width: 40%;
	height: 0.5rem;
	background: rgba(0,0,0,0.1);
	z-index: 1;
}
#news article:nth-of-type(1)::after {
	bottom: 5rem;
}
#news article:hover::after {
	background: #9B59B6;
}
#news article:nth-of-type(1) {
	width: 50%;
	height: 32rem;
	padding-top: 5rem;
}
#news h2 {
  padding: 2rem 0rem 0rem 0rem;
  line-height: 1;
  font-size: 1.5rem;
  font-weight: bold;
  color: #888888;
  text-transform: uppercase;
}
#news h2 span {
  color: #444444;
  font-size: 3rem;
  font-weight: bold;
  display: block;
	text-transform: uppercase;
}
#news h2 span::before, #about h3 span::before {
  content: "";
  padding-left: 0.3rem;
  border-left: 0.3rem solid #cccccc;
}
#news h2::before, #about h3::before {
  content: "";
  padding-left: 0.3rem;
  border-left: 0.3rem solid #cccccc;
}
#news article h3, #news article time {
	display: block;
	position: absolute;
	background: #333333;
	padding-left: 2rem;
	width: calc(100% - 4rem);
	text-transform: uppercase;
	z-index: 1;
}
#news article h3 {
	font-size: 1.8rem;
	top: 7rem;
  color: #E5E5E5;
}
#news article time {
	top: 6.5rem;
	left: 0rem;
  color: #888888;
}
#news article img {
	position: absolute;
  top: 0;
  left: 0;
	height: 100%;
  width: 100%;
	z-index: 0;
}
#news article:nth-of-type(1) h3 {
	position: absolute;
	top: 20rem;
}
#news article:nth-of-type(1) h3 {
	top: 19rem;
	font-size: 2.5rem;
}
#news article:nth-of-type(1) time { top: 19.5rem; }
/*--------------------------Tour Dates Section--------------------------*/
#tourDates {
	position: relative;
	padding: 8rem 0;
}
#tourDates .wrapper {
	position: relative;
}
#tourDates::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
	z-index: 0;
}
#tourDates table {
	float: right;
	width: 75%;
	color: #CCCCCC;
	padding-left: 2rem;
}
#tourDates h2, #tourDates h3 {
	text-transform: uppercase;
	font-weight: bold;
  line-height: 1;
}
#tourDates h2 {
	padding: 2rem 0rem 0rem 0rem;
	line-height: 1;
	font-size: 1.5rem;
	color: #888888;
	text-align: right;
	border-right: 0.3rem solid #CCCCCC;
	padding-right: 0.5rem;
}
#tourDates h2 span {
	color: #EEEEEE;
  font-size: 3rem;
  font-weight: bold;
  display: block;
	text-transform: uppercase;
}
#tourDates h3 {
	position: relative;
	background: #9B59B6;
	padding: 1.5rem;
	text-align: right;
	float: left;
	font-size: 2rem;
	color: #EEEEEE;
}
#tourDates h3::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top: 0;
	right: 15rem;
	border-style: solid;
	border-width: 0 6.55rem 6.55rem 0;
	border-color: transparent #9c59b6 transparent transparent;
}
#tourDates h3 span {
	display: block;
  font-size: 1.5rem;
	color: #EEEEEE;
}
#tourDates table + p {
	width: 75%;
	float: right;
}
#tourDates thead {
	display: none;
}
#tourDates a[href*="google"], #tourDates td:nth-of-type(5n) a {
	display: block;
	background-repeat: no-repeat;
	text-indent: -999rem;
	height: 5rem;
	width: 5rem;
}
#tourDates a[href*="google"] {
	background-image: url("../images/location.png");
	padding: 0 1.5rem 0 0;
}
#tourDates tr td:nth-of-type(5) a {
	background-image: url("../images/ticket.png");
	background-repeat: no-repeat;
}
#tourDates tr td:nth-of-type(1) abbr ,#tourDates tr td:nth-of-type(2), #tourDates tr td:nth-of-type(3){
	font-weight: bold;
	display: block;
}
#tourDates tr td:nth-of-type(1) abbr, #tourDates tr td:nth-of-type(2) {
	line-height: 1;
	text-transform: uppercase;
	font-size: 2.5rem;
	text-decoration: none;
}
#tourDates tr td:nth-of-type(1), #tourDates tr td:nth-of-type(3) {
	font-size: 1.8rem;
}
#tourDates tr td:nth-of-type(1) {
	padding: 0 5rem 0.5rem 0;
}
#tourDates tr td:nth-of-type(2) {
	padding-right: 15rem;
}
#tourDates tr:nth-of-type(odd) {
	background: rgba(0,0,0,0.3);
}
/*--------------------------About Section--------------------------*/
.info {
	float: left;
		width: 50%;
}
.quote {
	font-style: italic;
}
#about h3, #about h3 span {
	line-height: 1;
	text-transform: uppercase;
}
#about h3 {
	color: #888888;
	font-size: 1.5rem;
}
#about h3 span {
	color: #EEEEEE;
	font-size: 3rem;
	display: block;
}
#about ul {
	padding: 0;
	float: right;
	width: 30%;
}
#about li {
	float: left;
	width: 50%;
	list-style-type: none;
}
#about img {
	padding: 0.5rem;
	width: 100%;
}
#about p:not(:nth-of-type(3)) {
	font-size: 1.5rem;
	padding: 0 10rem 0 0;
}
/*--------------------------Footer Section--------------------------*/
footer {
	background: #EEEEEE;
	color: #666666;
	padding: 2rem;
	text-align: center;
}
footer li {
	list-style-type: none;
	display: inline-block;
	padding: 0rem 0.5rem 0rem 0rem;
}
footer li a {
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}
footer a[href^='http'] {
	display: block;
	width: 3rem;
	height: 3rem;
	text-indent: -9999px;
}
footer a[href*='facebook.com'], footer a[href*='google.com'], footer a[href*='twitter.com'], footer a[href*='youtube.com'],footer a[href*='instagram.com'] {
	background: url("../images/social.png");
	background-size: 15rem;
	top: 0;
}

footer a[href*='facebook.com']:hover, footer a[href*='google.com']:hover, footer a[href*='twitter.com']:hover, footer a[href*='youtube.com']:hover, footer a[href*='instagram.com']:hover {
	background-position-y: bottom;
}
footer a[href*='google.com'] {
	background-position-x: 3rem;
}
footer a[href*='instagram.com'] {
	background-position-x: 6rem;
}
footer a[href*='youtube.com'] {
	background-position-x: 9rem;
}
footer a[href*='twitter.com'] {
	background-position-x: 12rem;
}