/* !BANNER */
.banner { 
  width: 100%; 
  display: block; 
  text-align: center; 
  background-color: #fff; 
}

.banner.festival { background-color: var(--first-color); }
.banner.festival a h1,
.banner.festival a h2,
.banner.festival a h3 { color: #fff; }

.banner.concerts { background-color: #00D3D7; }
.banner.concerts a h1,
.banner.concerts a h2,
.banner.concerts a h3 { color: #fff; }

.banner.black { background-color: #000; }
.banner.black a h1,
.banner.black a h2,
.banner.black a h3 { color: #fff; }
.banner.black:hover { background-color: #fff; }
.banner.black:hover a h1,
.banner.black:hover a h2,
.banner.black:hover a h3 { color: #000; }

.banner.red { background-color: var(--third-color); }
.banner.red a h1,
.banner.red a h2,
.banner.red a h3 { color: var(--second-color); }
.banner.red:hover { background-color: var(--second-color); }
.banner.red:hover a h1,
.banner.red:hover a h2,
.banner.red:hover a h3 { color: var(--third-color); }

.banner.orange { background-color: var(--third-color); }
.banner.orange a h1,
.banner.orange a h2,
.banner.orange a h3 { color: var(--second-color); }
.banner.orange:hover { background-color: var(--second-color); }
.banner.orange:hover a h1,
.banner.orange:hover a h2,
.banner.orange:hover a h3 { color: var(--third-color); }

.banner.pink { background-color: var(--second-color); }
.banner.pink a h1,
.banner.pink a h2,
.banner.pink a h3 { color: var(--first-color); }
.banner.pink:hover { background-color: var(--first-color); }
.banner.pink:hover a h1,
.banner.pink:hover a h2,
.banner.pink:hover a h3 { color: var(--second-color); }

.banner.second-color { background-color: var(--second-color); }
.banner.second-color a h1,
.banner.second-color a h2,
.banner.second-color a h3 { color: var(--first-color); }
.banner.second-color:hover { background-color: var(--first-color); }
.banner.second-color:hover a h1,
.banner.second-color:hover a h2,
.banner.second-color:hover a h3 { color: var(--second-color); }

.banner.blue { background-color: var(--first-color); }
.banner.blue a h1,
.banner.blue a h2,
.banner.blue a h3 { color: var(--second-color); }
.banner.blue:hover { background-color: var(--second-color); }
.banner.blue:hover a h1,
.banner.blue:hover a h2,
.banner.blue:hover a h3 { color: var(--first-color); }

.banner:hover { background-color: #000; }
.banner a { 
	text-decoration: none; 
	text-transform: uppercase; 
	margin: 0 auto; 
	padding: 0;
	display: block; 
	text-align: left; 
	max-width: 1470px;
	width: 100%;
}

.banner.nomaxwidth a{
	max-width:none;
	text-align: center;
}

.banner:hover a {
	text-decoration: none; 
	text-transform: uppercase; 
	color: #fff; 
}

.banner a h1 { 
/* 	font-family: 'apercu-black', sans-serif; */
	letter-spacing: 4px;
	font-size: 55px;
	line-height: 76px;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}

.banner a h2 { 
	font-family: 'apercu-regular', sans-serif;
	font-size: 30px;
	line-height: 32px;
	margin: 0;
	padding: 0;
}

.banner a h3 { 
	margin: 0;
	padding: 0;
}

.banner:hover a h1,
.banner:hover a h2 { 
	color: #fff; 
}

	  @media all and (max-width: 1535px){
		.banner a h1 {
		  font-size: 45px;
		  line-height: 60px;
		  text-align: center;
		}
	  }
	  
	  @media all and (max-width: 960px){
		.banner a h1 {
		  font-size: 30px;
		  line-height: 30px;
		}
	  }
	  
	  @media all and (max-width: 799px){
		.banner a h1 {
		  font-size: 24px;
		  line-height: 24px;
		}
		
	  }