/* Page Set up */
body {margin:0;}
header {text-align:center;}
header img {width:12%;}
.contentImg{border-radius:10px;}

/* Homepage/Demo Columns */
.homePage {
	display:flex;
	flex-wrap:wrap;
	margin-left:25%;
	margin-right:25%;
}
.column1 {
	flex:60%;
	text-align:center;
	padding-bottom:5%;}
.column2 {
	flex:30%;
	padding-top:3%;
	padding-bottom:5%;}
	
	
/* Credit Page Columns */
.creditPage {
	display:flex;
	flex-wrap:wrap;
	margin-left:30%;
	margin-right:30%;
	gap:5%;}
.column3 {
	flex:15%;
	padding-top:5%;
	padding-bottom:5%;
	justify-content:right;
	text-align:right;}
.column3 img {width:50%;}
.column4 {
	flex:20%;
	padding-bottom:5%;}
	
	
/* Home Studio Page Columns */

.studioPage {
	margin-left:25%;
	margin-right:25%;
	display: flex;
	flex-wrap:wrap;
	padding-bottom:2%;}
	
	
/* Contact Page Columns */
.contactPage {
	display:flex;
	flex-wrap:wrap;
	margin-top:1%;
	margin-left:30%;
	margin-right:30%;
	gap:0%;}
.column5 {
	flex:40%;
	padding-top:1%;
	padding-bottom:5%;}
.column6 {
	flex:60%; 
	padding-bottom:5%;}	

/* Font styling */
body{font-family:Open Sans};

.title {text-align:center;
        color: #C00F0C;}
    
h1 {font-weight:400;
	font-size: 300%;
	color: #C00F0C;
	margin-bottom:0;}
	
h2 {font-weight:400;}
h3 {font-weight:400; }
h4 {font-weight:400;}
h5 {font-weight:400;}
aside h2 {color: #C00F0C; font-weight:600;}

a {color:#C00F0C;}
a:hover{color:#525252;}

/* Navigation Style*/
nav {display:flex; justify-content:center;}


/* Style the menu links */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;}


/* Change the color of menu links on mouse-over */
.pill-nav a:hover {
  background-color: #C00F0C;
  color: white;
  }


/* social-bar on top */
.social-bar {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:center;
align-content:center;
justify-content:stretch;
gap:5px;
margin-left:85%;
margin-right:3%;}
.social-bar img {max-width:100%;}


/* Audio/Video players */
audio {width:62%;}
.visualPlayer {border-radius:10px; width:80%;}

button {
    background-color:#f1f3f4;
    padding:15px 20px;
    vertical-align:1.5em;
	border-radius:40px;
	text-decoration:none;
	border:none;

}
	
button:hover {
	background-color:#C00F0C;
	color:white;
}


/* Footer set up */
footer {
	background-color:#D9D9D9;	
	text-align:center;
	padding:20px;
	}


/* Footer social bar */
.social-bar-foot{
display:flex;
flex-direction:row;
align-items:center;
align-content:center;
justify-content:center;
gap:5px;
margin-left:44%;
margin-right:44%;
}
.social-bar-foot img {max-width:100%;}


/* Gallery Style */
/* The grid: Four equal columns that floats next to each other */
.column {
  width: 25%;
  float:left;
  box-sizing: border-box;
  padding: 5px;}


/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
  width: 100%;
  height: auto; }
  
.column img:hover {
  opacity: 1;}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}