html {
	font-size: 16px;
}
body {
	font-family: 'Quattrocento', serif;
	
					/* olivedrab rosybrown sandybrown seagreen #80ff80-verdeClaro1 #66ff66-verdeClaro2 
					darkolivegreen darkkhaki linen bisque lightsalmon aliceblue #660000 verdeEscuro-#4a8c4a */
					
	/* background-color: olivedrab; */
	background-color: seagreen;
	
			
	color: darkolivegreen;
	
	
	
	width: 100%;
	max-widht: 980px;
}

.todo {
	background-color: #589a58; /* #589a58 #4a8c4a */
	
	
	width: 95%;
	
	border-radius: 15px 15px 15px 15px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}
.flex-direction { flex-direction: column; }
.flex-around { justify-content: space-around; }
.flex-between { justify-content: space-between; }
/*.flex-start { justify-content: flex-start; }*/

.clearfix { content: ""; display: table; clear: both; }

.coralSinging {
	font-family: 'Courgette', cursive;
	font-size: 1rem;
	font-weight: bold;
	color: lightsalmon;
	
	margin-top: 10px;
	margin-right: 75px;
		
}

.social1 ul, .social2 ul {
	list-style: none;
	padding-left: 0;
	
}
.social1 ul {
	margin-top: 10px; padding-right: 5px; margin-right: 5px;
}
.social1 li, .social2 li {
	display: inline;
	
	
	float: right;
}
.social1 li {
	padding: 0 5px 0 5px;
}
.social2 li {
	padding-right: 10px; 
}
.social1 img, .social2 img {
	box-shadow: 0 0 1px 1px aliceblue;
}

header {
	background: linear-gradient(linen, aliceblue, darkkhaki);
	
	border-radius: 15px 15px 0 0;
}
header h1, header h2 {
	font-family: 'Courgette', cursive;
	
	font-weight: bold;
	padding-left: 5px;
	
	text-align: center;
	
	
}
header h1 {
	font-size: 2.4rem;
	
	margin-top: 10px;
	margin-bottom: 0;
	padding: 5px;
	margin-bottom: 10px;
}
header h2 {
	font-size: 1.3rem;
	
	margin-top: 0;
	margin-bottom: 20px; 
}
header small {
	visibility: hidden;
}


.procura {
	display: none;
}

[class*='nav'] a { 
	color: black;
	text-decoration: none;
}
button.nav, .nav-collapsible { font-size: 15px; background-color: aliceblue; color: black; text-shadow: 0 0 0.3px lightsalmon; padding: 18px; width: 100%; border: none; text-align: left; outline: none; cursor: pointer; text-transform: uppercase; }
.nav-collapsible-primary { margin-top: 16px; }
button.nav, .nav-collapsible-secundary { 
	margin-top: 80px;
	position: relative;
	bottom: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .nav-collapsible:hover { background-color: #4a8c4a; }

.nav-collapsible:after {
	content: '\02795'; /*Unicode character for "plus" sign (+)*/
	font-size: 13px;
	color: black;
	float: right;
	margin-left: 5px;
}
.active:after { 
	/*Unicode character for "minus" sign (-)*/
	content: '\2796'; 
}

.nav-principal, .nav2 {	
		/* aliceblue-#f0f8ff honeydew-#f0fff0 */
	background: aliceblue; 
	
	line-height: 30px;
	
			/* text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; */
	text-shadow: 0 0 0.2px lightsalmon;
	
	/*
		Preparação para o nav-collapse:
		1. Com a propriedade display = "none"
		2. com as propriedades max-height, overflow/hidden e transition (animado)
	*/
	/*display: none;*/
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}
.nav-principal ul, .nav2 ul {
	list-style-type: none; 
	margin: 0;
	padding-left: 15px;
}
.nav-principal ul:first-of-type, .nav2 ul:first-of-type {
	/*margin-top: 16px;*/ 
	margin-bottom: 10px; 
} 

.nav-principal li, .nav2 li {
	display: inline;
	
	padding: 2px; 
}
.nav-principal a, .nav2  a {
	color: black;
	text-decoration: none;
}
.nav-principal a:hover, .nav2 a:hover {
	text-decoration: underline;
}
.nav2 {
	/*margin-top: 80px;*/
	position: relative;
	bottom: 15px;
	
	/*clear: left;*/
}

@media only screen and (min-width: 48em) {/*768*/
	.nav-collapsible { display: none; }
	.flex-direction { flex-direction: row; }
	.nav-principal, .nav2 { 
		max-height: none;
	}
	.nav-principal { margin-top: 16px; }
	.nav-principal ul:first-of-type {
		margin-top: 16px; 
	}
}

.div-menu { margin-top: 15px; }
.div-menu figure {
	display: inline;
	margin-left: 10px;
	margin-bottom: 0;
}
.div-menu img {
	opacity: 0.8;
	position: relative;
	top: 5px;
}
.div-menu img:hover {
	box-shadow: 0 0 3px 3px darkkhaki;
}
.div-menu figcaption {
	font-family: 'Courgette', cursive;
	color: #525249; /* #660000 #66ff66 #655e0b #525249*/
	text-shadow: 0 0 4px lightsalmon;
	
	position: relative;
	bottom: 23px; 
	left: 23px;
	
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1rem;
	z-index: 10;
	/* opacity: 0.7; */
	
}



aside {
	background: #589a58; /* seagreen #589a58 cadetblue */
	
	position: relative;
	bottom: 35px;
	left: 65px;
	
	width: 230px;
	
	display: none;
}
aside ul {
	list-style: none;
	margin-top: 0;
	margin-bottom: 0;
}
aside a {
	font-family: 'Courgette', cursive;
	color: darkkhaki;
	font-weight: bold;
	text-decoration: none;
	
	text-shadow: 0 0 4px lightsalmon;
}

main {
	color: black;
}
main div {
	width: 285px;
	
	float: left;
	margin: 0 15px 80px 10px;
	
}
main p {
				/* #45434c #374054 #474b54 #42320e #4c0d0df5 #3e331c*/
	color: darkkhaki; 
	font-weight: bold; 
	
	text-shadow: 0.5px 0.5px darkolivegreen;
	
	text-align: justify;
}
main p a {
	color: black;
	text-decoration: none;
}
main figure {
	margin: 16px 15px 16px 0; 
}
main figure img {
	width: 100%;
}
main figure a {
	color: black;
	text-decoration: none;
}
main video {
	width: 100%;
}
main audio {
	width: 100%;
}
main blockquote {
	color: darkkhaki;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	line-height: 30px;
	
	text-shadow: 0.5px 0.5px aliceblue;
	
}
.bach h1, .vivaldi h1, .beethoven h1 {
	margin-top: 0;
}

.captionlinks {
	color: black;
	text-decoration: none;
}


footer p {
	color: darkkhaki;
	font-size: 0.7rem;
}

@media only screen and (min-width: 480px) {
	main div {
		width: 430px;
	}
		
	.coralSinging {
		margin-right: 235px;
	}
}

@media only screen and (min-width: 690px) {
	main div {
		width: 295px;
	
	}
	
	.coralSinging {
		margin-right: 435px;
	}
	
	.nav-principal li, .nav2 li {
		margin: 0 25px 0 10px; 
	}
}

@media only screen and (min-width: 870px) {
	main div {
		width: 380px;
	}
	
	.coralSinging {
		margin-right: 615px;
	}
	
	.nav-principal li, .nav2 li {
		margin: 0 25px 0 45px; 
		
	}
	
}

@media only screen and (min-width: 1030px) {
	main div {
		width: 295px;
	}
	.beethoven h1 { font-size: 1.79em; margin-bottom: 27px; }
	
	.coralSinging {
		margin-right: 770px;
	}
	
	.nav-principal li, .nav2 li {
		margin: 0 25px 0 90px; 
	}
}

@media only screen and (min-width: 1210px) {
	main div {
		width: 350px;
	}
	
	.coralSinging {
		margin-right: 940px;
	}
	
	.nav-principal li, .nav2 li {
		margin: 0 25px 0 120px; 
	}
}

@media only screen and (min-width: 1490px) {
	main div {
		width: 420px;
		margin: 0 15px 80px 30px;
	}
	.bach h1 { padding-bottom: 30px; }
	.vivaldi h1 { padding-bottom: 65px; }
	.beethoven h1 { padding-bottom: 30px; }
	
	.coralSinging {
		margin-right: 1230px;
	}
	
	.nav-principal li, .nav2 li {
		margin: 0 25px 0 150px; 	
	}
}