@charset "UTF-8";
/* #00002d #010147 midnightBlue dimGray */
/* #87a9b5 #a8d9ea #c3e9f7 deepSkyBlue */
/* #5454d8 #5757a5 #212160 */
/* #a38484 #a59696 #a08282 */
/* ivory #ceb504 #afad9e #968e54 #594f08 #16b1ba */
html {
  font-size: 16px; }

body {
  font-family: 'Quattrocento', serif;
  background-color: mintCream;
  color: #4848f9;
  width: 100%;
  /* max-width: 980px; */ }

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

.todo {
  background-color: #87a9b5;
  width: 95%;
  border-radius: 15px 15px 15px 15px; }

.flex {
  display: flex;
  flex-wrap: wrap; }
  .flex .coral-singing {
    font-family: 'Courgette', cursive;
    font-size: 1rem;
    font-weight: bold;
    color: #516b51;
    /* lightsalmon */
    margin-top: 10px;
    margin-right: 75px; }
  .flex .social1 ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    padding-right: 5px;
    margin-right: 5px; }
  .flex .social1 li {
    display: inline;
    float: right;
    padding: 0 5px 0 5px; }
  .flex .social1 img {
    box-shadow: 0 0 1px 1px aliceBlue; }

.flex-direction {
  flex-direction: column; }

.flex-around {
  justify-content: space-around; }

.flex-between {
  justify-content: space-between; }

/*.flex-start { justify-content: flex-start; }*/
.social2 ul {
  list-style: none;
  padding-left: 0; }
.social2 li {
  display: inline;
  float: right;
  padding-right: 10px; }
.social2 img {
  box-shadow: 0 0 1px 1px aliceBlue; }

header {
  /* lightyellow, aliceblue, bisque khaki */
  background: linear-gradient(paleGoldenRod, aliceblue, paleGoldenRod);
  border-radius: 15px 15px 0 0;
  color: #516b51; }
  header h1, header h2 {
    font-family: 'Courgette', cursive;
    font-weight: bold;
    padding: 10px;
    text-align: center; }
  header h1 {
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 5px; }
  header h2 {
    font-size: 1rem;
    margin-top: 0;
    padding-bottom: 25px; }

[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: #eff1ed; }

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

.active:after {
  /* Unicode character for "minus" sign (-) */
  content: '\2796'; }

.nav-principal, .nav2 {
  background: aliceblue;
  line-height: 30px;
  text-shadow: 0 0 0.3px 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.2s ease-out; }
  .nav-principal ul, .nav2 ul {
    list-style: none;
    margin: 0;
    padding-left: 15px;
    margin-bottom: 10px; }
    .nav-principal ul:first-of-type, .nav2 ul:first-of-type {
      /*margin-top: 16px;*/ }
  .nav-principal li, .nav2 li {
    display: inline;
    padding: 2px; }
  .nav-principal a, .nav2 a {
    color: black;
    text-decoration: none; }
  .nav-principal:hover, .nav2:hover {
    text-decoration: underline; }

.nav2 {
  position: relative;
  bottom: 15px;
  /*margin-top: 80px; 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 4px darkkhaki; }
  .div-menu figcaption {
    font-family: 'Courgette', cursive;
    color: #5f665f;
    /* , 0 0 4px #ba613b */
    text-shadow: 0 0 2px GoldenRod;
    position: relative;
    bottom: 23px;
    left: 23px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    z-index: 10;
    /* opacity: 0.7; */ }

.dropdown {
  background: #87a9b5;
  position: relative;
  bottom: 35px;
  left: 65px;
  width: 230px; }
  .dropdown ul {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0; }
  .dropdown a {
    font-family: 'Courgette', cursive;
    /* $color-header $color-body darkGray */
    color: #556055;
    font-weight: bold;
    text-decoration: none;
    /* mintCream orange #00005b oliveDrab GoldenRod */
    text-shadow: 0 0 8px GoldenRod, 0 0 16px #ba613b; }

main {
  display: flex;
  flex-wrap: wrap;
  color: black;
  /* $color-main-aux */ }
  main div {
    width: 285px;
    float: left;
    margin: 0 15px 80px 10px; }
  main h1 {
    color: #1b231b;
    text-align: justify;
    margin-top: 0; }
  main h2 {
    color: aliceBlue;
    text-align: justify;
    text-shadow: 0.2px 0.2px #4848f9; }
  main p {
    color: aliceBlue;
    font-weight: bold;
    text-shadow: 0.2px 0.2px #4848f9;
    text-align: justify; }
    main p a {
      color: aliceBlue;
      text-decoration: none; }
  main figure {
    margin: 16px 15px 16px 0; }
    main figure img {
      width: 100%; }
    main figure figcaption {
      font-size: 0.9rem;
      color: #516b51;
      font-weight: bold;
      text-shadow: 0.5px 0.5px burlyWood;
      text-align: justify; }
    main figure a {
      color: aliceBlue;
      text-decoration: none; }
  main video {
    width: 100%; }
  main audio {
    width: 100%; }
  main iframe {
    width: 100%; }
  main picture img {
    width: 100%; }
  main picture p {
    font-size: 0.9rem;
    color: #516b51;
    font-weight: bold;
    text-shadow: 0.5px 0.5px burlyWood;
    margin-top: 0; }
  main blockquote {
    color: #516b51;
    text-align: justify;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 30px;
    text-shadow: 0.5px 0.5px burlyWood;
    width: 235px;
    margin-left: 20px; }
  main dl {
    color: #516b51;
    font-weight: bold;
    text-shadow: 0.5px 0.5px burlyWood; }
    main dl dt {
      margin: 10px 0 10px 15px; }
      main dl dt:first-of-type {
        margin-top: 0; }
    main dl audio {
      margin-top: 5px;
      margin-bottom: 10px; }
  main .ary-barroso iframe {
    margin-top: 5px; }
  main .ary-barroso dd:nth-child(even) {
    margin-bottom: 15px; }
  main .david-junker h1 {
    font-size: 1.85em; }
  main .david-junker picture p {
    width: 90%;
    margin: auto; }
  main .david-junker #reduzir-pic img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%; }
  main .david-junker #junker-programa-2001 img {
    display: block;
    width: 40%;
    margin-left: auto;
    margin-right: auto; }
  main picture img:hover, main figure #figura-ampliar:hover {
    box-shadow: 0 0 2px 4px #516b51, 0 0 4px 8px burlyWood; }
  main picture img:active, main figure #figura-ampliar:active {
    background: AntiqueWhite;
    position: fixed;
    top: -15px;
    left: 45px;
    z-index: 100;
    width: 70%;
    height: 100%; }

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

/*Tooltip*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted burlyWood; }
  .tooltip h3 {
    display: inline; }
  .tooltip .tooltiptext-small {
    visibility: hidden;
    width: 240px;
    height: 20px;
    background-color: darkOliveGreen;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0.8;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    /* Positioning the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 140%;
    /*posicionando o tooltip em rel ao texto de ref*/
    left: 70%;
    margin-left: -125px; }
    .tooltip .tooltiptext-small::after {
      /*Criando (com a prop border) um elemt seta*/
      content: "";
      position: absolute;
      /*posicionando a seta em rel ao tooltip*/
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 7px;
      border-style: solid;
      border-color: darkOliveGreen transparent transparent transparent; }
  .tooltip .tooltiptext-medium {
    visibility: hidden;
    width: 290px;
    height: 25px;
    background-color: darkOliveGreen;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0.8;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    /* Positioning the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 140%;
    left: 60%;
    margin-left: -125px; }
    .tooltip .tooltiptext-medium::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 7px;
      border-style: solid;
      border-color: darkOliveGreen transparent transparent transparent; }
  .tooltip .tooltiptext-large {
    visibility: hidden;
    width: 220px;
    height: 50px;
    background-color: darkOliveGreen;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0.8;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    /* Positioning the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 140%;
    left: 70%;
    margin-left: -125px; }
    .tooltip .tooltiptext-large::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 7px;
      border-style: solid;
      border-color: darkOliveGreen transparent transparent transparent; }
  .tooltip:hover .tooltiptext-small {
    visibility: visible; }
  .tooltip:hover .tooltiptext-medium {
    visibility: visible; }
  .tooltip:hover .tooltiptext-large {
    visibility: visible; }

footer p {
  color: #516b51;
  font-size: 0.7rem; }

/* 
	Media Queries
*/
@media only screen and (min-width: 480px) {
  main div {
    width: 430px; }
  main blockquote {
    width: 358px;
    margin: 16px 30px; }

  .logo .coral-singing {
    padding-right: 150px; } }
@media only screen and (min-width: 690px) {
  main div {
    width: 295px; }
  main blockquote {
    width: 240px; }
  main .david-junker h1 {
    font-size: 1.50em; }

  .logo .coral-singing {
    padding-right: 350px; }

  .nav-principal li, .nav2 li {
    margin: 0 25px 0 10px; } }
@media only screen and (min-width: 870px) {
  main div {
    width: 380px; }
  main blockquote {
    width: 316px; }
  main .david-junker picture p {
    width: 80%; }
  main .david-junker #reduzir-pic img {
    width: 70%; }
  main .david-junker h1 {
    font-size: 1.706em;
    margin-bottom: 30px; }
  main .ary-barroso h1 {
    font-size: 2.2em;
    margin-bottom: 50px; }

  .logo .coral-singing {
    padding-right: 500px; }

  .nav-principal li, .nav2 li {
    margin: 0 25px 0 45px; } }
@media only screen and (min-width: 1030px) {
  main div {
    width: 295px; }
  main blockquote {
    width: 240px; }
  main .villa-lobos h1 {
    margin-bottom: 60px; }
  main .ary-barroso h1 {
    font-size: 2.1em;
    margin-bottom: 55px; }
  main .david-junker h1 {
    margin-bottom: 38px; }

  .logo .coral-singing {
    padding-right: 690px; }

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

  .logo .coral-singing {
    padding-right: 850px; }

  .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; }
  main blockquote {
    width: 350px; }
  main .villa-lobos h1 {
    padding-bottom: 0;
    margin-bottom: 50px; }
  main .ary-barroso h1 {
    padding-bottom: 40px;
    margin-bottom: 40px; }
  main .david-junker h1 {
    padding-bottom: 35px;
    margin-bottom: 23px; }
  main .david-junker picture p {
    width: 60%; }
  main .david-junker #reduzir-pic img {
    width: 50%; }

  .logo .coral-singing {
    padding-right: 1150px; }

  .nav-principal li, .nav2 li {
    margin: 0 25px 0 150px; } }

/*# sourceMappingURL=coral-brasilia-estilo.css.map */