@charset "UTF-8";

/*********************
GENERAL
**********************/

* {
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
}
html, body {
	height: 100%;
	margin:0;
}

body {
	color:	black;
	background-color:	white;
	/* line-height: 1.5em; */
	/* font-family: 'Arimo', sans-serif; */
	font-family: 'Darker Grotesque';
	font-size: 22px;
	/* display: flex;
	flex-direction: column; */
}


.page {
	margin:	0px auto;
	padding-top: 2px;
	position:	relative;
	flex: 1 0 auto;
	min-height: 100%;
}

h1 {
	font-size: 2em;
	margin-bottom:10px;
	padding: 0;
	color:	#8565DA;
	text-align: center;
	position: relative;
	z-index: 1;
	font-weight: normal;

} 

h2 {
	font-size: 1.7em;
	color:		#5C5D66;
	position: relative;
	z-index: 1;
}

.indexH2 {
	font-size: 1.5em;
	text-align: center;
	color:		#5C5D66;
	position: relative;
	margin-top: -12px;
}

h3 {
	font-size:	1.2em;
	margin: 0 0 1em 0;
	text-align:center;
	font-weight: normal;
}

.blogPost h3 {
	text-align: left;
}

.blog-post h3 {
	text-align: left;
}

p {
	margin-bottom: 10px;
	color: #333;
}

a {
	color:	yellow;
}

.pageLink {
	color: #8565DA;
}

a:hover {
	color:	#B3B5C7;
}

.pageLink:hover {
	color:	#B3B5C7;
}

.clear {
	clear:	both;
	line-height: 5px;
}

.button {
	padding: 1em;
}

.caption {
	text-align: center;
	font-size: .75em;
}

/**********************
colors
**********************/
 .blue {
	background-color:	#CACDE0;
	background-image: url("images/webtexture1.png");
}

/**********************
HEADER
**********************/

header {
	/* height: 43px; */
	width:	100%;
}

/*********************
NAV
**********************/

#logo {
	width:100px;
	margin: 5px 0 0 5px;

}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
	overflow: hidden;
	background-color: #8565DA;
	/* background-color:	#43AED9; */
    border-bottom: 3px solid #000;
    margin-top: -2px;
    position: fixed;
    top: 0;
    z-index: 2000;
	width: 100%;
	opacity: 0.9;
}

/* Float the list items side by side */
ul.topnav li {
	float: left;
	line-height: .7em;
	text-align: left;
}
ul.topnav li span {
		font-size: 19px;
		padding: 0px;
}
/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
	color: #F2E205;
	/* font-weight: bold; */
    padding: 14px 20px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 25px;
    /* text-shadow: 0 1px 1px rgba(0,0,0,.8) */
	letter-spacing: 2px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
background-color: #7056BA;
color:	yellow;
text-shadow: none;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:740px) {

  ul.topnav li:not(:first-child) {
  	display: none;
  }

  ul.topnav li.icon {
    float: right;
    display: inline-block;

  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:740px) {
  ul.topnav.responsive {
  position: fixed;
    top: 0;
    z-index: 2000;
    width: 100%;  
  }

  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.topnav.responsive li {
    float: none;
    display: inline;
  }

  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

}

.navLink {
	width: 30px;
	margin: 11px 0 0 15px;
	padding: 3px;
	opacity: .9;
}

.navLink:hover {
	background-color: #59767F;
	color:	#B2ECFF;
	text-shadow: none;
}



/********************************
Index Nav bar
*********************************/
/* Remove margins and padding from the list, and add a black background color */
ul.indextopnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
	overflow: hidden;
	background-color:	#8565DA;
    border-bottom: 3px solid #000;
    margin-top: -2px;
    /* position: fixed; */
    top: 0;
    z-index: 2000;
	width: 100%;
	opacity: 0.9;
}

/* Float the list items side by side */
ul.indextopnav li {
	float: left;
	line-height: .7em;
	text-align: left;
}
ul.indextopnav li span {
		font-size: 19px;
		padding: 0px;
}
/* Style the links inside the list items */
ul.indextopnav li a {
    display: inline-block;
	color: #F2E205;
	
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 25px;
	letter-spacing: 2px;

}

/* Change background color of links on hover */
ul.indextopnav li a:hover {
	background-color: #7056BA;
	color:	yellow;
text-shadow: none;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.indextopnav li.icon {display: none;}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:740px) {

  ul.indextopnav li:not(:first-child) {
  	display: none;
  }

  ul.indextopnav li.icon {
    float: right;
    display: inline-block;

  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:740px) {
  ul.indextopnav.responsive {
  position: fixed;
    top: 0;
    z-index: 2000;
    width: 100%;  
  }

  ul.indextopnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.indextopnav.responsive li {
    float: none;
    display: inline;
  }

  ul.indextopnav.responsive li a {
    display: block;
    text-align: left;
  }

}

.navclear {
	float: none;
	min-height: 0px;
}

/*********************
Article
**********************/

article {
	margin:		0px 0px 33px 0px;
	top:	0px;
	left:	0;
	width:	100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.article-inside {
	padding-bottom: 25px;
  }


article a {
	color: yellow;
}

/*********************
MAIN CONTENT
**********************/

	.blogPost {
		border-bottom: 2px solid white;
		width: 95%;
		margin: auto;
		margin-bottom: 1.5em;
		line-height: 1.7em;
		padding-bottom: 19px;
	}

	#pagealbum {
		width: 300px;
		height: 300px;
	}

/*********************
INDEX PAGE
**********************/

.posters {
	margin: 0px auto;
	display: flex;
  	justify-content: center;
  	width: 100%;
	background-color: black;
}
#posterspan {
	width: 14.2%;
	height: 14.2%;
	display: inline-block;
}

#gameposterspan {
	width: 25%;
	height: 25%;
	display: inline-block;
}
#posterHeader {
	width: 100%;
}

#posterIMG {
	width: 100%;
}

#indexP {
	margin-left: 10px;
	padding-left: 10px;
	font-size: large;	
}

#indexImg {
	width: 90%;
	box-shadow: 3px 6px 9px #666;
	padding-top: 60px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 80px;
	margin: 5%;
}

#tagline {
	margin-top: -54px;
	padding: 5px;
	opacity: .7;
	color: white;
	background: #333;
	width: 100%;
	height: 50px;
	text-align: center;
	font-size: medium;
}

.playlist {
	width: 97%;
	margin-left: auto;
	margin-right: auto;
}

/***********************************
Project Pages
************************************/

.gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-gap: 1px;
}

.commGallery {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto;
	grid-gap: 1px;
	margin:auto;
}

.gamesGallery {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    grid-gap: 1px;
}
.gallery__img {
    width: 100%;
	max-height: 100%;
	object-fit: cover;
	box-shadow: 3px 6px 9px #666;

}

.button1 {
	background-color: #8565DA;
	width: 250px;
	color: yellow;
	border: none;
	font-size: 25px;
  	padding: 15px 32px;
	display: inline-block;
  	text-decoration: none;
	margin: auto;
 	margin-top:10px;
  	margin-bottom: 50px;
  	cursor: pointer;
	display: flex;
  	justify-content: center;
}

	a {
	text-decoration: none;
}

.button1:hover {
	background-color: #7056BA;
}

#projectPagePoster {
	display: block;
	width: 50%;
	margin: auto;
	box-shadow: 3px 6px 9px #666;
}

.projectP {
	font-size: large;
	font-weight: normal;
	margin: 0 6px;
	margin-left: 20px;
}
 
.testimonialDiv {
	/* border: #000;
	border-style: solid; */
	background-color: #C6B6F0;
	width:97%;
	margin: auto;
	box-shadow: 3px 6px 9px #666;
	
}
.testimonialP {
	font-size: large;
	font-weight: normal;
	margin: 0 6px;
	margin-left: 20px;
	color: white;
	
	

}

.boldP {
	font-weight: bolder;
}


.festivalText {
	margin-left: 10px;
	margin-top: 0px;
}


.bandcampPlayer {
	margin: 0 10px;
	width: 100%;
}



.reeldiv {
	width: 95%;
	margin: auto;
}

.reeldiv img {
	display: block;
	width: 66%;
	margin:  auto;
}

/* Changes space between items in the grid by increasing or decreasing the image margin */
figure.”gallery__item {
	margin: 15px;
}
/*********************
PAGE: Albums
**********************/

.store {
padding: 3px;
border-style:solid;
border-color:black;
margin: 0px;
border-width: 1px;
text-decoration: none;
}

.store:hover {
	border-color: #B2ECFF;;
}
/************************
About PAGE
**********************/

#bioImg	{
	width: 90%;
	margin-left: 5%;
	margin-top: 10px;
	box-shadow: 3px 6px 9px #666;	
}

#bioP {
	margin: 0 10px;
	padding-top: 10px;
	text-decoration: none;
}

#bioQ {
	margin: auto;
	padding-top: 10px;
	text-decoration: none;
	background-color: #C6B6F0;
	padding: 5px;
	/* border-radius: 2%; */
	width: 90%;
	box-shadow: 3px 6px 9px #666;	
}

/******************
CONTACT PAGE
*******************/

.mailing_list {
	margin: 2% 5% 2% 30%;
	padding: 1%;
	width: 50%;
}

.contactImg {
	display: block;
	width: 90%;
	margin: auto;
	box-shadow: 3px 6px 9px #666;
}
#contactP {
	padding:		0;
	margin:			0;
	margin-left:		20px;
	margin-bottom:		5px;
}

.emailForm {
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 0 auto;
}

 form {
	 margin-bottom: 60px;
	 padding: 10px;
 }

.emailButton {
	display: flex; 
	justify-content: center; 
	text-align: center;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */ 
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 0px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: none;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {

	background-color: #7056BA;
  }

  #emailForm {
	  width: 90%;
	  margin: auto;
	  margin-bottom: 30px;
  }
  
/*********************
FOOTER
**********************/
.push {
	height: 50px;
}

footer {
	display: block;
	text-align: center;
	font-size: .85em;
	color:	white;
	background-color:	#8565DA;
	padding:	10px 0 50px;
	height: 175px;
	border-top: 3px solid #000;
	width: 100%;
	flex-shrink: 0;
	margin-top: -50px;
}

footer p {
	display: inline;
	padding-left: 10px;
	color: white;
}

footer p a:hover {
	color:	white;
}

/************************
Music Players
************************/


.song {
	color: white;
	border-radius: 1%;
	margin-bottom: 60px;
	margin-left: 5px;
	margin-right: 5px;
	border: 1px solid white;
	border-radius: 5px;
	padding: 2px;
	background: white;
	/* opacity: .8; */
}

.songalbum {
	color: white;
	border-radius: 1%;
	margin-bottom: 0px;
	margin-left: 5px;
	margin-right: 5px;
	border: 1px solid white;
	border-radius: 5px;
	padding: 2px;
	background: white;
	/* opacity: .8; */
}


.song p {
	font-size: large;
	color: black;
	background: white;
	/* text-shadow: 1px 1px grey; */
	font-weight: normal;
	margin-top: 0;
	width: 100%;
	padding-bottom: 2px;
	padding-left: 5px;
	margin-bottom: 0px;
	/* opacity: .6; */
}

.playerPic {
	width: 33%;
}

.musicPage {
	/* background: url('http://bryanchristophersaylor.com/Media/musicplayer/pexels-stas-knop-6571015.jpg') no-repeat center center fixed; */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.contactPage {
	/* background: url('http://bryanchristophersaylor.com/Media/comtact/recordbackgroundblue.jpg') no-repeat center center fixed; */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.thanksPage {
	/* background: url('http://bryanchristophersaylor.com/Media/comtact/recordbackgroundblue.jpg') no-repeat center center fixed; */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	min-height: 100%;

}

#thanksP {
	width: 33%;
	margin: auto;
}

audio controls {
	margin: 0 0 3px 4px;
	padding: 0 2% 2%;
}

.player {
	margin: 2%;
}

.cue_player {
	margin: auto;
	max-width: 90%;
	border-top: 6px solid #4798B2;
	border-radius: 3px;
	padding-bottom: 20px;
	box-shadow: 5px 5px 5px #555;
}

.cue_player p {
	display: inline;
	float: left;
	text-shadow: -1px 2px 1px rgba(0,0,0,.8)
}

.musicGallerytest {
	width: 90%;
	margin: auto;
	/* background-image: url('http://bryanchristophersaylor.com/Media/musicplayer/mosaic1.jpg'); */
	padding: 9px;
	/* box-shadow: 3px 6px 9px #666; */
	margin-bottom: 30px;
	background-repeat: round;	
 }


/*****************************
MAiling List
*******************************/

.mailList {
	background: #333;
	width: 90%;
	padding: 20px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	
}

input[type=text],
input[type=email] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
	box-sizing: border-box;
	margin-top: 0;
}

input[type=button], input[type=submit], input[type=reset] {
    background-color: #8565DA;
	border: none;
	border-radius: 1px;
    color: yellow;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
	font-size: 1em;
	display: block;
	margin: auto;
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: left;
    width: 140px;
   color: black;
}

.mailList h3 {
	font-size: 1.3em;
}

/* for page content to clear header */
.headerClear {
	display: block;
	min-height: 43px;
}


/************************
Media Queries
************************/

/*************************************************************
Medium Screens
**************************************************************/

@media (min-width: 600px) {

	body{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	a:hover {
		color:	yellow;
	}

	header{ 
		/* height: 43px; */
	}
	
	.page {
		min-height: 100%;
	}

	.navclear {
		min-height: 150px;
	}

	/*******************
	Index Page
	********************/

	#indexImg {
		display: block;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 60px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 80px;
		margin-top: 2px;
	}

	/*****************
	Nav
	********************/

	ul.topnav li a {
		padding: 14px 4px;
		font-size: 22px;
	}
    
    .floatRight {
  	float: right;
  }

	/***************************
	Project
	****************************/

	.projectImage {
		margin-right: 2.5%;
	}

	#projectPagePoster {
		width: 40%;
	}

	.projectP {

		max-width: 95%;
	}

	.testimonialP {

		max-width: 95%;
	}

	.testimonialDiv {

		max-width: 95%;
	}

	.bandcampPlayer {
		margin: 0 10px;
		width: 100%;
	}

	.gallery {
		display: grid;
		grid-template-columns: auto auto auto auto;
		grid-template-rows: auto auto auto;
		grid-gap: 1px;
	}	

	.gamesGallery {
		display: grid;
		grid-template-columns: auto auto auto;
		grid-template-rows: auto auto auto;
		grid-gap: 1px;
	}	

	.commGallery {
		display: grid;
		grid-template-columns: 33% 33% 33%;
		grid-template-rows: auto auto auto;
		grid-gap: 1px;
	}

	.musicGallerytest {
		width: 80%;
	 }

	.youtubeVideoClip {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		height: 0;
	}

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

	#bioImg	{
		display: block;
		width: 75%;
		margin: auto;
	}

	#pagealbum {
		width: 400px;
		height: 400px;
	}

	/**************************
	CONTACT PAGE
	**************************/

	.emailForm {
		width: 50%;
	}

	/************************
	Nav bar
	************************/

	ul.topnav {
		padding: 0 0 0 0;
	}

	.filmReelClip {
		float: left;
	margin: 5%;
		width: 90%;
		}

	#contactP {
		padding:		0px;
		float:			left;
		margin-left:	20%;
		text-align:     center;
		font-size:		1.25em;
	}
	
}	

/*************************************************
Large Screens
**************************************************/

@media (min-width: 900px) {

	#tagline {
		font-size: large;
	}

	.content {
	width: 100%;
	margin: 0;	
	}

	ul.topnav {
		padding: 0 5% 0 5%;
	}

	ul.topnav li a {
		padding: 14px 10px;
		font-size: 25px;
	}

	
	article {
		width: 100%;
	}

	.navclear {
		min-height: 0px;
	}

	header {
		height: 0;
	}

	h1 {
		font-size: 3em;
	}
	/**********************************************
	Index PAGE
	*******************************************/
	


	blockquote {
		width: 66%;
		margin-bottom: 20px;
	}

	.testimonials span {
       height: 300px;
	}

	.testQuote {
		width: 47%;
	}

	#indexP {
		line-height: 2em;	
	}

	#indexImg {

		width: 40%;
		padding-top: 60px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 80px;
		
	}
	.playlist {
		width: 50%;
		padding-right: 10px;
	}

	.posters {
		margin-top: 0px;
		width: 100%;
	}

	#tagline {
		padding: 10px 40px;
		margin-top: -59px;
		display: block;
		width: 50%;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
	}	

/***************************
Project
****************************/

.gallery {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0px;

}

.gamesGallery {
	display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0px;
}

.commGallery {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-template-rows: auto auto auto;
	grid-gap: 1px;
}

.musicGallery {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 5px;
}

.musicGallerytest {
   width: 55%;
   margin: auto;
   /* background-image: url('http://bryanchristophersaylor.com/Media/musicplayer/mosaic1.jpg'); */
   /* background-repeat:round; */
   padding: 9px;
   /* box-shadow: 3px 6px 9px #666; */
   margin-bottom: 30px; 
}

#pagealbum {
	width: 500px;
	height: 500px;
}



.filmReelClip {
	
	width: 90%;
	}

	.projectImage {
		margin-right: 2.5%;
	}

	.playerPic {
		width: 33%;
	}

	#projectPagePoster {
		width: 40%;
		margin-bottom: 20px;
	}

	.project{
		position: relative;
		width: 46%;
		height: 433px;
		float: left;
		margin: auto;
		margin-left: 2%;
		margin-bottom: 10px;
	}

	.filmClip {
		position: absolute;
		bottom: 2%;
		left:15%;
		width: 75%;
		max-width: 285px;
		padding: 0; 
		margin: auto;
		margin-top: 20px;
	}
	
	
.album {
		height: 300px;
	}

	.projectP {
		font-size: x-large;
		text-align: left;
		width: 40%;
		margin: auto;
		

	}
	.testimonialDiv {
		width: 40%;
	}

	.testimonialP {
		font-size: x-large;
		text-align: left;

		margin: auto;
		

	}

	.projectReel {
		width: 40%;
		margin: auto;
	}

	.festivalText {
		text-align: left;
		width: 40%;
		margin: auto;
	}

	.bandcampPlayer {
		width: 100%;
		margin-left: 30% ;
	}
	
	.reeldiv {
		width: 60%;
		margin: auto;
	
	}

	.reeldiv img {
		display: block;
		width: 80%;
		margin:  auto;
	}

	#bioImg	{
		width: 45%;
		margin: auto;
		margin-bottom: 33px;
	}

		/***********************
	Contact Page
	***********************/
	.contactImg {
		width: 33%;
	}
	.emailForm {
		width: 33%;
	}

	#emailForm {
		width: 45%;
		margin: auto;
	}

	#bioP {
		width: 45%;
		color: #444;
		margin: auto;
	}

	#bioQ {
		width: 40%;
		color: #444;
		margin: auto;
		
	}
	
	
}