@charset "UTF-8";
/* Sasha Parrott
   05/28/24
   styles.css*/
/*css reset*/
body, header, nav, main, footer, img, h1, ul, section, aside, figure, figcaption {margin:0;padding: 0;border: 0;}

/*style rules for images*/
img{max-width: 100%;display: block;}
week2{padding: 100px,100px,100px,100px;}
/* Style rule for box sizing, applies to all elements */
*{box-sizing: border-box;}
/*style rules for header content*/
header{text-align: center;font-size: 1.5em;color:#ffffff; background-color: #365d4a}
header h1{font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif" "Franklin Gothic Bold", "Arial Black", "sans-serif";}

/*style rules for navigation area*/
nav{background-color: #070707;text-align: center;}
nav ul{list-style: none;text-align: center;}
nav li{display: block;font-size: 1em; border-top: 1px solid #e5e9fc;}
nav li a{display: block;color: #FFFFFF;text-align: center;padding: 0.5em 1em;text-decoration: none;}

/*style rules for mobile viewport*/
info{background-color: #c0caf7;padding: 1% 2%;}
info ul{margin-left: 10%}
.round{border-radius: 8px;}
aside{text-align: center;font-size: 1.5em;font-weight: bold;color: #FFFFFF;padding-bottom: 15px;}
figure{position: relative;max-width: 275px;margin: 2% auto;border: 8px solid #000000;vertical-align: bottom;}
figcaption{position: absolute;bottom: 0;background: rgba(55,54,132,0.70);color: #FFFFFF;width: 100%;padding: 5% 0;text-align: center;font-family: Verdana, Arial, sans-serif;font-size: 1.5em; font-weight: bold;}
signup{align-content: center;}
#message {
  clear: left;
  background-color: #FFF;
  color: #1e1b1e;
  max-width: 100%;
  padding: 18px 30px;
  text-align: left;
  align-content: center;}


/* Mutation */
#list, #list2 {
  margin-bottom: 10px;}
div.button {
  height: 65px;
  padding-right: 10px;}

/*hide tab-desk class*/
.tab-desk{display: none;}
/*style rules for main content*/
main{padding: 2%;background-color: #365d4a;overflow: auto;font-family: 'Roboto', sans-serif;}
main p{font-size: 1.25em; text-align: center; color: #ffffff}
main h2{text-align: center; padding-top: 10px; color:#ffffff}
main h3{text-align: center;}
hero{text-align: center;}
.action {font-size: 1.25em;color:#373684;font-weight: bold;}
#piano, #guitar,#violin {margin: 0 2%;}
#contact{text-align: center; color: #FFFFFF}
.tel-link{background-color: #000000;padding: 2%;margin: 0 auto;width: 80%;text-align: center;border-radius: 5px;}
.tel-link a{color: #FFFFFF;text-decoration: none;font-size: 1.5em; display: block;}
#contact .email-link{color: #ffffff;text-decoration: none;font-weight: bold;}
.map{border: 5px solid #373684;width: 95%; height: 50%;}
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
/*style rules for footer content*/
footer{text-align: center;font-size: 0.65em;clear: left;}
footer a {color: #4645a8;text-decoration: none;}

/* Media Query for tablet viewport */
@media screen and (min-width:480px), print{
	/*tablet viewport: show tab-desk class, hide mobile class */
	.tab-desk{display: block;}
	.mobile{display: none;}
	/*tablet viewport: style rule for header content */
	span.tab-desk{display: inline;}
	/*tablet viewport: style rules for nav area */
	nav li{border-top: none;display: inline-block;font-size: 1.5em;border-right: 1px solid #e5e9fc;}
	nav li a{padding-bottom: .25em; padding-left: .5em; padding-right: .5em;}
	.grid{display: grid;grid-template-columns: auto auto;grid-gap: 20px;}
	.grid-item4{grid-column: 1 / span 2;}
}
@media screen and (min-width:769px), print{
	/*desktop viewport:style rule for header */
	header{padding: 2%;}
	/*desktop viewport: style rules for nav area */
	nav li a{padding-top: .5em;padding-bottom: .5em;padding-right: 1.5em;padding-left: 1.5em;}
	nav li a:hover{color: #000000;background-color: #e5e9fc}
	/*desktop viewport: style rules for main content*/
	#info ul{margin-left: 5%;}
	h3{font-size: 1.5em;}
	#piano, #guitar, #violin{width: 29%;float: left;margin: 0 2%;}
	.grid{display: grid;grid-template-columns: auto auto auto auto;grid-gap: 20px;}
	.grid-item4{grid-column: 1 / span 4;}
	figcaption{font-size: 1em;}
}
@media print{
	body{background-color: #FFFFFF;color: #000000;}
}
.photoRate {
}
/********** SLIDER **********/
.slider {
  max-width: 1000px;
  margin: 0px auto 30px auto;}

.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 480px;
object-fit: cover;}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;
object-fit: cover;}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
object-fit: cover;}

.slide:first-child {
    display: block;}


/********** BUTTONS **********/
.slide-buttons {
  text-align: center;}

.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;}
/* Filter and search options */
#buttons, #search {
	text-align: center;
	margin-bottom: 30px;}

/* Filter buttons */
button {
	background-color: #fff;
	border: none;
	padding: 3px 10px 4px 10px;
	border-radius: 4px;
	color: #333;
	font-family: 'Karla', sans-serif;
	font-size: 100%;}

button:hover, button.active {
	background-color: #000000;
	color: #fff;
	cursor: pointer;}
/* Gallery of images */
#gallery {
	text-align: center;
	align-content: center;
	max-width: 100%;
	margin: 0 auto;
object-fit: contain;
display: flex;
	flex-wrap: wrap;
  align-items: center;
justify-content: center;}

#gallery img {
	background-color: #FFFFFF;
	width: 480px;
	height: 100%;
	border-radius: 3px;
	border: 8px solid #fff;
	margin: 6px;
    -webkit-box-shadow: 0 0 3px 3px #ebebeb;
    box-shadow: 0 0 3px 3px #ebebeb;
	float:left;
	align-content: center;
object-fit: contain;}

#gallery2 {
	text-align: center;
	align-content: center;
	width: 100%;
	margin: 0 auto;
object-fit: contain;
display: flex;
	flex-wrap: wrap;
  align-items: center;
justify-content: center;}

#gallery2 img {
	background-color: #FFFFFF;
	width: 960px;
	height: 100%;
	border-radius: 3px;
	border: 8px solid #fff;
	margin: 6px;
    -webkit-box-shadow: 0 0 3px 3px #ebebeb;
    box-shadow: 0 0 3px 3px #ebebeb;
	float:left;
	align-content: center;
object-fit: contain;}


.one-third, .two-thirds {
  background-color: #996699;
  border: 12px solid #fff;
  float: left;
  padding: 10px;
  margin: 10px;
  color: #996699;
  overflow: hidden;}

.one-third {width: 250px}
.two-thirds {width: 500px}
.one-third fieldset {border: none; margin: 0.5em;}
.two-thirds fieldset {border: none; margin: 2.5em;}

.container .one-third, .container .two-thirds {height: 35em;}
.login .one-third, .login .two-thirds { height: 20em;}

#logo {
  width: 220px;
  height: 220px;
  margin: 1em auto 2em auto;
  display: block;}