/*
	Theme Name: Rockme
	Author: Infesto
	Version: 1.0
*/

/* RESETS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -- GLOBAL -- */

body {
  background: #000;
  color: #fff;
  font-family: 'Vollkorn', sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
}

p {
	font-family: 'Vollkorn', sans-serif;
	font-size: 1rem;
	line-height: 1.25rem;
}

ul {
	list-style-type: none;
	/*padding-left: 0;*/
}

h2 {
	font-size: 1.5rem;
	font-weight: 400;
	text-transform: uppercase;
	padding: 1rem 0;
}

h3 {
	font-size: 1.125rem;
	padding: 0.5rem 0;
}

h4, h5, h6 {
	font-size: 1rem;
	padding: 0.5rem 0;
	
}

@media all and (min-width: 600px) {
	h2 {
		font-size: 2rem;
	}
}

@media all and (min-width: 768px) {
	p {
		font-size: 0.9375rem;
	}
}

@media all and (min-width: 992px) {
	h2 {
		font-size: 3rem;
		font-weight: 200;
	}
}

/* -- HELPER AND SPECIAL CLASSES -- */

.container {
	max-width: 80%;
	margin: 0 auto;
	padding: 0.5rem;
}

@media all and (min-width: 1366px) {
	.container {
		max-width: 1170px;
	}
}

.card {
	margin: 0 auto 1rem auto;
	max-width: 370px;
	padding: 1rem;
}

.card img {
	border: 1px solid #b29c7f;
	box-sizing: border-box;
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.card-container {
	background-color: #000;
	height: auto;
	max-width: 370px; 
	margin: 0 auto;
}

.card-title a {
	color: #b29c7f;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: normal;
}

.card-content {
	font-size: 1rem;
	line-height: normal;
}

.card-title a:focus, 
.card-title a:hover {
	color: #fff;
}

.current-menu-item a {
  color: #b29c7f;
}

.fp-margin {
	margin-top: 100px;
}

.add-margin-top {
	margin-top: 2rem;
}

.add-margin-bottom {
	margin-bottom: 2rem;
}

.centered {
	text-align: center;
}

.generic-page-content p {
	margin: 0 0 2rem 0;
}

.responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.section-title {
	padding: 2rem 0;
}

.section-title img {
	display: block;
	margin: 0 auto;
}

.time {
	font-size: 0.9375rem;
	font-weight: bold;
	color: #a3a3a3;
	padding: 1rem 0;
}

@media all and (min-width: 768px) {
	#homepage {
		background: #000 url(img/background.jpg) center top no-repeat;
	}

	#otherpage {
		background: #000 url(img/background-pages.jpg) center top no-repeat;
	}
	
	.fp-margin {
		margin-top: 700px;
	}
	
	.card {
		padding: 0;
	}
	
	.card-title a {
		font-size: 1.375rem;
	}

	.card-container {
		padding: 1rem;
	}
	
	.card-content {
		font-size: 0.9375rem;
	}
	
	.time {
		max-height: 1rem;
	}
}

@media all and (min-width: 992px) {
	.card-container {
		padding: 1.5rem;
	}
}

/* -- BUTTONS & LINKS -- */

.btn {
  color: #fff;
  font-size: 0.857em;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
}

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

.button-container {
	box-sizing: border-box;
}

.button-block {
  background-color: #2b1d0e;
  text-align: center;
	padding: 1rem 1rem;
	cursor: pointer;
	display: block;
}

.button-block:hover,
.button-block:focus {
  background-color: #b29c7f;
}

.button-link {
	background-color: #a84815;
	display: inline-block;
	height: auto;
	padding: 1rem 2rem;
	margin: 1rem auto 0 auto;	
	cursor: pointer;
}

.button-link:hover,
.button-link:focus {
  background-color: #b29c7f;
}

/* MAIN NAVIGATION - MOBILE VIEW */

nav {
	font-size: 1.25rem;
	overflow: hidden;
	position: fixed; 
	top: 0; 
	width: 100%;
	z-index: 10;
}

.bg-change {
  background-color: rgba(0,0,0,0.9); 
}

.nav-mobile {
	background-color: rgba(0,0,0,0.9);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-mobile img {
	max-width: 150px;
	padding-left: 0.5rem;
}

.menu-button i {
	padding: 1.5rem;
	cursor: pointer;
	font-size: 130%;
}

.nav-menu {
	flex-direction: column;
	align-items: stretch;
	display: none;
}

.logo {
	display: none;
}

.nav-menu li {
	text-align: center;
	background-color: rgba(0,0,0,0.7);
	padding: 1.5rem 0;
}

.nav-menu a:hover,
.nav-menu a:focus {
	text-decoration: none;
	color: #b29c7f;
}

.Navbar__ToggleShow {
	display: flex;
}	

/* MAIN NAVIGATION - DESKTOP VIEW */

@media all and (min-width: 900px) {
	.nav-mobile {
		display: none;
	}

	.nav-menu {
		display: flex; 
		flex-direction: row;
		max-width: 80%;
		justify-content: space-around;
		align-items: center;
		margin: auto;
	}

	.logo {
		display: inline-block;
		max-height: 150px;
	}
	
	.nav-menu li {
		background-color: transparent;
		font-size: 1rem; 
		padding: 0.5rem;
		font-family: 'UnifrakturMaguntia', cursive;
		font-size: 25px;
	}
}

@media all and (min-width: 1169px) {
	.nav-menu {
		max-width: 1170px;
	}
	
	.nav-menu li {
		font-size: 1.25rem;
	}
}

/* HEADER IMAGE */

.header-image-container {
	max-width: 100%;
	margin: 25% auto 1rem auto;
	height: auto;
}

@media all and (min-width: 768px) {
	.header-image-container {
		max-width: 80%;
		margin-top: 12%;
	}
}

@media all and (min-width: 800px) {
	.header-image-container {
		margin-top: 15%;
	}
}

@media all and (min-width: 1366px) {
	.header-image-container {
		margin-top: 12%;
		max-width: 1170px;
	}
}

@media all and (min-width: 1599px) {
	.header-image-container {
		margin-top: 10%;
	}
}


/* SOCIAL ICONS BAR */

.icon-bar {
	background-color: #130101;
	display: flex;
	justify-content: center;
  align-items: center;
	margin: auto;
}

.icon-bar i {
	padding: 0.8rem;
}

.icon-bar .fab {
	font-size: 1.5rem;
}

.icon-bar a:hover, 
.icon-bar a:focus {
	color: #b29c7f;
}
 
/* -- NEWS SECTION -- */

@media all and (min-width: 600px) {
	.news-section {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2rem;
	}
}

@media all and (min-width: 992px) {
	.news-section {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -- NEWS PAGE & POST -- */

.page-news-section {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

@media all and (max-width: 768px) {
	.news-main .card {
		margin-bottom: 2rem;
	}
}

@media all and (min-width: 769px) {
	.page-news-section {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-content: start;
		align-items: start;
		grid-gap: 2rem; 
	}
	
	.news-main {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
		align-content: start;
		align-items: start;
		grid-gap: 2rem;
	} 
}


@media all and (min-width: 1095px) {
	.page-news-section {
		grid-template-columns: 1fr 30%;	
	}
}

.post-section {
	margin: 2rem auto;
}

.post-title {
	color: #b29c7f;
	font-size: 1.375rem;
	font-weight: bold;
	margin: 1rem 0 2rem 0;
}

.news-post {
	box-sizing: border-box;
	background: #000;
	text-transform: none;
	padding: 0;
	margin-bottom: 1rem;
}

@media all and (min-width: 768px) {
	.news-post {
		padding: 2rem;
	}
}

.post-time {
	font-size: 0.9375rem;
	font-weight: bold;
	color: #a3a3a3;
	padding: 0.3rem 0;
}

.news-post img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.post-content {
	margin: 2rem 0 0 0;
}

.news-post iframe {
	max-width: 100%;
}

@media all and (min-width: 800px) {
	.post-section {
		display: grid;
		grid-template-columns: 1fr 30%;
		align-content: start;
		align-items: start;
		grid-gap: 1rem; 
	}
}

@media all and (min-width: 801px) and (max-width: 1199px) {
	.post-section {
		grid-template-columns: 1fr 40%;
	}
}

/* SIDEBAR */

.sidebar {
	background-color: #000;
	/*min-width: 250px;*/
	padding: 1rem;
	margin: 0 auto;
}

.side-heading {
	font-size: 1rem;
	color: #c0a349;
	margin: 1rem 0;
}

.side-text {
	font-size: 0.75rem;
	margin-top: 1rem;
}

.text-title a:hover,
.text-title a:focus {
	color: #b29c7f;
}

.side-title {
	font-size: 1.375rem;
	font-weight: 400;
	color: #a84815;
	margin: 2rem 0 0 0;
}

.side-time {
	font-size: 0.9375rem;
	font-weight: bold;
	color: #a3a3a3;
	padding: 0.3rem 0;
}

.sidebar .icons-row {
	margin: 0;
	padding: 0;
}

.sidebar .icons-row i {
	color: #fff;
}

.sidebar .icons-row i:hover, 
.sidebar .icons-row i:focus {
	color: #b29c7f;
}

.iframe-container {
	position: relative;
	padding-bottom: 56.25%;
	margin: 0 auto;
	width: 100%;
} 

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

@media all and (max-width: 768px) {
	.sidebar {
		display: none;
	}
}

/* PAGINATION */

.pagination-container {
	background-color: #2b1d0e;
	display: flex;
	justify-content: center;
}

.pagination-container .page-numbers {
	padding: 1rem;
}

.pagination-container .prev,
.pagination-container .next {
	display: none !important;
}

.pagination-container .current {
	background-color: #b29c7f !important;
}

.pagination-container .btn {
	margin: 1rem;
}

.pagination-container .button-link {
	background-color: transparent;
	width: 150px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pagination-container .button-link:hover,
.pagination-container .button-link:focus {
  background-color: #b29c7f;
}

@media all and (max-width: 768px) {
	.pagination-container .button-link {
		font-size: 0.6rem;
	}
}

/* TOURS SECTION */

.tour-section {
	padding: 1rem 0;
}

.bit-widget .bit-button {
	background-color: #000 !important;
}

/* -- NEW ALBUM SECTION -- */

.new-album-section {
	box-sizing: border-box;
	background: no-repeat;
	background-size: cover;
	padding: 3rem 0;
}

.new-album-container {
	text-align: center;
}

.new-album-img img,
.left-img img,
.side-img img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
	height: auto;
}

@media all and (min-width: 992px){
	.new-album-container {
		display: flex;
		justify-content: center;
	}
	
	.new-album-content {
		width: 40%;
		text-align: left;
		padding: 0 0.5rem;
	}
} 

.new-album-title {
	color: #b29c7f;
	font-size: 1.75rem;
	margin: 0 0 1rem 0;
}

img.label-logo {
	padding: 1rem 0;
}

.icons-row {
	margin: 2rem 0;
}

.icons-row i {
	padding: 0.4rem;
}

.icons-row a {
	color: #b29c7f;
	margin: 0 1rem 0 0;
}

.icons-row a:hover, 
.icons-row a:focus {
	color: #fff;
}

/* -- PROMO SECTION -- */

.promo-section {
	background: no-repeat center;
	background-size: cover;
	text-transform: uppercase;
	min-height: 530px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.promo-container {
	max-width: 60%;
	text-align: center;
}

.promo-title {
	color: #fff;
	font-weight: bold;
}

.promo-name {
	margin: 0 0 1rem 0;
}

/* -- MEDIA SECTION -- */

.media-section {
	padding: 3rem 0 4rem 0;
}

.media-section-alt {
	padding: 3rem 0 4rem 0;
}

.media-section h2 {
	text-align: center;
}

.section-video-container {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.section-video-container iframe {
	margin: 1rem;
}

@media all and (max-width: 839px) {
	.section-video-container {
		justify-content: center;
	}
}

@media all and (min-width: 840px) {
	.section-video-container {
		justify-content: space-between;
		flex-wrap: nowrap;
	}
}

/* -- DISCOGRAPHY & ALBUM -- */

.discography-section {
	margin-top: 2rem;
}

.discography-section .container {
	padding: 0;
}

.discography-main {
	background-color: #000;
	padding: 1rem;
}

@media all and (min-width: 768px) {
	.discography-main {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
		align-content: center;
		align-items: center;
	} 
}

.album-section {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

@media all and (max-width: 768px) {
	.card-album {
		margin-top: 2rem;
	}
}

.card-album img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.card-album-container {
	max-width: 270px; 
	margin: 0 auto;
	padding: 0.5rem;
}

.card-album-title {
	color: #b29c7f;
	font-weight: bold;
	font-size: 1rem;
	line-height: normal;
}

.card-album-title a {
	font-size: 1rem;
	font-weight: bold;
	color: #b29c7f;
}

.card-album-content {
	font-size: 1rem;
	line-height: normal;
}

.card-album-title a:focus, 
.card-album-title a:hover {
	color: #fff;
}

@media all and (min-width: 768px) {
	.card-album {
		padding: 0;
	}
	
	.card-album-title a {
		font-size: 0.9375rem;
	}

	.card-album-container {
		padding: 1rem;
	}
	
	.card-album-content {
		font-size: 0.9375rem;
	}
}

.album-container {
	text-align: center;
}

@media all and (min-width: 992px){
	.album-container {
		display: flex;
	}
}

.left-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.right-column {
	align-items: flex-start;
	max-width: 100%;
	margin: 0 0 0 1rem;
	text-align: left;	
	justify-content: flex-start;
}

.full-album-content {
	margin: 1rem 0 0 0;
}
	
@media all and (min-width: 600px) {
	.spotify-container {
		width: 460px;
	}
}
	
.spotify-container iframe {
	width: 100%;
	margin-top: 2rem;
}

/* -- THE BAND -- */

.text-content {
	background-color: #000;
	margin: 0 0 2rem 0;
	padding: 0;
}

.text-content p {
	font-size: 1rem;
	margin: 0 0 2rem 0;
}

.members-main {
	background-color: #000;
	padding: 1rem 1rem 5rem 1rem;
}

@media all and (min-width: 768px) {
	.members-main {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  	grid-auto-rows: minmax(150px, auto);
		grid-gap: 2rem;
	} 
	
	.text-content {
		padding: 1rem 2rem;
	}
}

/* -- MEDIA PAGE -- */

.page-media-section .page-video-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 4rem;
}

.page-media-section .page-video-container iframe {
	margin: 1rem 0;
}

@media all and (min-width: 992px) {
	.page-media-section .page-video-container {
		justify-content: space-between;
	}
}

.gallery-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-content: start;
	align-items: start;
	grid-gap: 2rem;
}

.gallery-main div img {
	display: block;
	margin: 0 auto;
}

/* -- FOOTER -- */

.top-footer-bg {
  background: url('img/footer.jpg') center center no-repeat;
  background-size: cover;
	max-height: 600px;
}

.top-footer-container {
	padding: 1rem;
}

.footer-col h3 {
	color: #b29c7f;
	font-weight: bold;
}

.footer-col {
	padding: 1rem 1rem 1rem 0;
}

.footer-col ul li {
	font-size: 0.9375rem;
	padding: 0.3rem 0;
}

.footer-col li a:hover, 
.footer-col li a:focus {
	color: #b29c7f;
}

.bottom-footer-container {
	color: #b29c7f;
	font-size: 0.875rem;
	padding: 1rem 0;
}

.copyright,
.rockmelogo {
  align-self: center;
}

.rockmelogo {
	padding-right: 0.5rem;
}

.footer-logo-container {
	display: flex;
	flex-wrap: wrap;
}

/* FOOTER DESKTOP VIEW */

@media all and (max-width: 768px) {
	.footer-logo-container {
		margin-top: 1rem;
	}
}

@media all and (min-width: 800px) {
	.top-footer-container, 
	.bottom-footer-container {
  	margin: auto;
		display: flex;
  	justify-content: space-between;
	}	
}