<?xml version="1.0" encoding="utf-8"?>
body {
  margin: 0;
}

/* ---------------------- START NAV HEADER  ---------------------*/
header {
  display: flex;
  margin: 0 auto;
  background: linear-gradient(130deg,#41536b, #667588);
}

header > * {
/*   flex-grow: 1; */
}

header h1 {
  margin: 1rem 2rem 1rem 2rem;
}

header a {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color:white !important;
	white-space: nowrap;
}
header a:hover {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color: #e2e2e2 !important;
	white-space: nowrap;
}

/* header img {
		width: 75%;
		height: auto;
}*/

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
  position: absolute;
  top: -100%;
  left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
  visibility: hidden;
}

nav {
	margin:0;
}
.menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 2em;
  width: 100%;
}
/* ---------------------- END NAV HEADER  ---------   ------------*/

/* ---------------------- START PAGE HEADER  ---------------------*/
.header2 {
	display: flex;
	width: 100%;
	background: linear-gradient(130deg,#41536b, #667588);
}
.header2 h1 {
	margin: 0;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 300;
	font-size: 1.75em;
	text-transform: uppercase;
	letter-spacing: .2ch;
	color: #fff;
	text-align: center;
}
.header2 h2 {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 100;
		font-size: 1.25em;
		text-transform: uppercase;
		letter-spacing: .2ch;
		color:#fff;
		text-align: center;
}
	.subnav {
		font-family: 'Anek Odia', sans-serif;
		color: white;
		letter-spacing: 0.2ch;
		text-transform: uppercase;
		line-height: 2em;
		text-align:center;
}
.caption {
		font-family: 'Anek Odia', sans-serif;
		font-size: .90rem;
		font-weight: 400;
		font-style:italic;
		letter-spacing: 0.2ch;
		color: #262626;
		text-align: center;
}
	.responsive {
		width: 100%;
		height: auto;
}
	 .gallery {
		 margin: 0em;
		 float: left;
		 width: 100%;
}
	 .gallery img {
		width: 100%;
		height: auto;
}
/* ------------   ---------- END PAGE HEADER  ---------------------*/


	.item1 {
		margin: 0 8em;
}	
	p.note {
		margin-left: 2em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 300;
		font-size: .98em;
		font-style: normal;
		color: #262626;
		line-height: 160%;
		text-align: left;
		text-decoration: none;
}
	p.title {
		font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		font-size: 0.95em;
		color: #262626;
		line-height: 125%;
		text-align: center;
}
	p.desc {
		font-family: 'Anek Odia', sans-serif;
		font-size: 1.25em;
		font-weight: 300;
		color: #262626;
		line-height: 140%;
		text-align: left;
}
	p.album-pic {
		 margin: 0 auto;
		 padding-top: 4%;
		 width: 70%;
		 border: 0px solid black;
}
	p.band-members {
		padding:0 1em;
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 400;
		text-align: left;
		color: #262626;
}
	p.audiotrack {
		text-align:center; 
		font-family: 'Anek Odia', sans-serif;
		font-weight: 400;
		font-size: .85rem;
		line-height: 130%;
		border-bottom:1px solid #e1e1e1;
}	
	a {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		color: #41536b;
		text-decoration: none;
}
	a:hover {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		color: #E59400;
		text-decoration: none;
}
/*	a:visited {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		color: #8c4ea3;
		text-decoration: none;
}*/
	.footer {
		font-family:  'Anek Odia', sans-serif;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: .05rem;
		color: #262626;
		line-height: 175%;
		text-align: center;
}
	 .caption {
		 font-family: 'Anek Odia', sans-serif;
		 font-size: .90rem;
		 font-weight: 400;
		 font-style:italic;
		 color: #262626;
		 text-align: center;
}

/*  ----------------------------------   START FLIP-CARD STYLES   ------------------   */
	h3.flipcard {
		margin: .05em .05em 0 .05em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 700;
		font-size: .95em;
		text-transform: uppercase;
		text-align: center;
		color:#FFF;
}
	p.flipcard {
		margin: 2em 1em 0 1em;
		font-family: 'Anek Odia', sans-serif;
		font-size: 14px;
		font-weight: 400;
		text-align: center;
		line-height: 110%;
		color: #41536b;
}
	p.flipcard a {
		font-weight: 500;
		text-align: center;
		line-height: 110%;
		color: #41536b;
		text-decoration: underline;
	}
	p.flipcard a:hover {
		font-weight: 500;
		text-align: center;
		line-height: 110%;
		color: #ffa500;
		text-decoration: underline;
	}
	p.flipcard a:visited {
		font-weight: 500;
		text-align: center;
		line-height: 110%;
		color: #ffa500;
		text-decoration: underline;
	}
	.flip-card {
		text-align: center;
		width: 130px;
		height: 118px;
		margin: 0 auto;
		padding: 0.25em 0 0.25em 0;
}
	.flip-card-inner {
		width: 100%;
		height: 100%;
		margin: .05em .05em;
		position: relative;
		transition: transform 1.0s;
		transform-style: preserve-3d;
		perspective: 1000px;
	}
	.flip-card-inner img {
		vertical-align: middle;
		width: 100%;
		height: 100%;
		border: 0;
	}
	.flip-card-back {
		transform: rotateY(180deg);
		z-index: 1;
	}
	.flip-card-back,
	.flip-card-front {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #e2e2e2;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	}
	.box {
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap:wrap;
		margin: 0 auto;
		max-width: 600px;
	}
/*  ----------------------------------   END FLIP-CARD STYLES   ------------------   */

/*  __________________________________   START CONTACT FORM STYLES   -------------   */ 

		form {
		width: 80%;
		margin: 0 auto;
		display: inline-block;
		}

		form * {
			font-family: 'Lato', sans-serif;
			font-size: 20px;
			letter-spacing: 0.075em;
			font-weight: 300;
			cursor: pointer;
			text-decoration: none;
		}

		form .field {
			width: 80%;
			position: relative;
			margin-bottom: 15px;
		}

		form .field label {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 64px;
			text-align: center;
			padding: 18px 0;
		}

		form .field input[type="text"] {
			border: 1px solid #484848;
			width: 100%;
			height: 64px;
			margin: 0;
			padding-left: 19.5%;
			color: #262626;
		}
		form .field textarea {
			border: 1px solid #484848;
			width: 100%;
			height: 64px;
			margin: 0;
			padding-left: 19.5%;
			color: #262626;
		}
		form #message {
			height: 64px;
			resize: none;
			padding-top: 18px;
		}
		form textarea:focus#msg,
		form textarea:not(:placeholder-shown)#msg {
			height: 200px;
		}
		form input[type="text"]:focus + label,
		form input[type="text"]:not(:placeholder-shown) + label,
		form textarea:focus + label,
		form textarea:not(:placeholder-shown) + label,
		form .field:hover label {
			width: 18%;
		}
		form input[type="submit"] {
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			
			border: none;
			position: relative;
			padding: 13px 50px;
		}
		form input[type="submit"]:hover,
		form input[type="submit"]:focus {
			background: #fff;  
		}

/*  __________________________________   END CONTACT FORM STYLES   -------------   */   
  
/*  ----------------------------------   END LAPTOP LAYOUT   ------------------   */


/* ----------------------   MOBILE  MOBILE  MOBILE  MOBILE  ----------------------- */

/* -----------------   Set width for mobile/smaller screen size. ----------------   */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 1000px) {
  
/* ---------------------- START MOBILE NAV HEADER  ---------------------*/
  header {
    display: grid;
    grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
  }
  
	header h1 {
  	margin: 1rem 2rem 1rem 2rem;
}

header a {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color:white !important;
	white-space: nowrap;
}
header a:hover {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color: #e2e2e2 !important;
	white-space: nowrap;
}
/* header img {
		width: auto;
		height: auto;
} */
  h1 {
    grid-area: title;
    margin: 0 0 0 0.5em;
  }
  
  .menu-btn {
    display: block;
  }

  .menu-icon {
    grid-area: hamburger;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 35px 40px 30px 0;
    position: relative;
    user-select: none;
    visibility: visible;
  }

  .navicon {
    background: white;
    display: block;
    height: 2px;
    width: 22px;
    position: relative;
  }

  .navicon:before {
    top: 10px;
  }

  .navicon:after {
    top: -10px;
  }

  .navicon:before, .navicon:after {
    background: white;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    transition: all 0.2s ease-out;
}

  .menu {
    grid-area: nav;
    max-width: unset;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
  .menu a:link {
    padding: 20px;
    width: 100%;
    border-top: 1px dotted white;
    font-size: 1.1rem;
    text-align: center;
}
  .menu a:hover {
    padding: 20px;
    width: 100%;
    border-bottom: 1px dotted white;
    font-size: 1.1rem;
    text-align: center;
}
  .menu-btn:checked ~ .menu {
    max-height: 450px;
}

  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }

  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:before,
  .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
  }
/* ---------------------- END MOBILE NAV HEADER  ---------------------*/
	.header2 h1 {
		margin: 0;
		padding-top: 6px;
		font-family: 'Anek Odia', sans-serif;
		font-size: 1.25em;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.1ch;
		color: #fff;
		text-align: center;
}
	.header2 h2 {
		margin: 0;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 300;
		font-size: 1em;
		text-transform: uppercase;
		letter-spacing: .2ch;
		color:#fff;
		text-align: center;
	}
		
/*  -------------------------   START MOBILE FLIP-CARD STYLES   ------------------   */
	h3.flipcard {
		margin: .05em .05em 0 .05em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 700;
		font-size: .95em;
		text-transform: uppercase;
		text-align: center;
		line-height: 120%;
		color:#FFA500;
	}
	p.flipcard {
		padding:0 .35em;
		font-family: 'Anek Odia', sans-serif;
		font-size: 13px;
		font-weight: 300;
		text-align: center;
		line-height: 110%;
		color: #41536b;
	}	
	.box {
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	flex-wrap:wrap;
	margin: 0 auto;
}
	
	.flip-card {
	text-align: center;
  width: 130px;
  height: 118px;
  margin: 0 auto;
}
/*  -------------------------------   END FLIP-CARD STYLES   ------------------   */

	.subnav {
		font-family: 'Anek Odia', sans-serif;
		color: white;
		letter-spacing: 0.2ch;
		text-transform: uppercase;
		text-align:center;
}
	.item1 {
		margin: 0 1em;
}	
	p.desc {
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 300;
		color: #262626;
		text-align: left;
		line-height: 140%;
		width: 80%:
	}
	p.note {
		margin-left: 0.5em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 300;
		font-size: .98em;
		font-style: normal;
		color: #262626;
		line-height: 160%;
		text-align: left;
		text-decoration: none;
}
	.responsive {
		width: 50%;
		height: auto;
}
	.footer {
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: .05rem;
		color: #262626;
		line-height: 175%;
		text-align: center;
}

  /*  ------------------------------- GRID LAYOUT STARTS   -----------------------   */


	.parent {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
}

/*  ---------------------------------- GRID LAYOUT ENDS   -----------------------   */

}