@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";

html,body {
  scroll-behavior: smooth;
}

h6.showdec {
	color: #800000;
    font-style: italic;
    font-size: 30px;
    font-family: Georgia, Times, 'Times New Roman', serif;
  	text-shadow: 1px 1px #18191a;
}

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.showcol {
  float: left;
  width: 33.33%;
  text-align: center;
  padding: 5px;
}

.headercol {
  float: left;
  width: 100%;
  text-align: center;
 }

.showrow {
align-items: center;
 }
 
 .lyricrow {
align-items: center;
 }
 
 .lyriccol {
  float: left;
  width: 33.33%;
  text-align: center;
  
  background-color: #EBEBEB;
  }



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

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
 .showcol {
    width: 100%;
  }
}

@media only screen and (max-width: 472px) {
  /* For mobile phones: */
 .showcol {
    width: 100%;
  }
}

/*Floating Back-To-Top Button*/
.top {
  offset: 50px; 
  position: sticky;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}

	
/* AIMS TABLE STYLING*/
	
.awards-table {
  border-radius: .4em;
  overflow: hidden;
    margin-left: auto;
  margin-right: auto;
  min-width: 300px;
}

.awards-table tr {
  border-color: #fff;
  border-top: 0px solid #ddd;
  border-bottom: 0px solid #ddd;
}

.awards-table th {
  display: none;
}

.awards-table td {
  display: block;
}

.awards-table td:first-child {
  padding-top: .2em;
}

.awards-table td:last-child {
  padding-bottom: .2em;
}

.awards-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}

.awards-table th, .awards-table td {
  margin: .2em 1em;
}

.awards-table tr:nth-child(odd) {
  background-color: #e6e6fa;
}

@media (min-width: 480px) {
  .awards-table td:before {
    display: none;
  }

.awards-table th, .awards-table td {
  text-align: left;
}

  .awards-table th, .awards-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .awards-table th:first-child, .awards-table td:first-child {
    padding-left: 0;
  }
  .awards-table th:last-child, .awards-table td:last-child {
    padding-right: 0;
  }
  .awards-table th, .awards-table td {
    padding: 1em !important;
  }

.awards-table th, .awards-table td:before {
  color: #004080;
}
}
.awards-body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
text-align:center;
  color: #444;
  background: #eee;
}

.lyrics-body {
width: 75%;
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
text-align:center;
  color: #444;
  background: #eee;
}

/*Accordion*/

h3 {
  color: #fff;
  font-weight: normal;
  font-size: 2.5rem;
  text-align: center;
}

/*_________________  Accordion
________________________________________
.accordion, .second-accordion {
  position: relative;
  margin: 60px auto;
  width: 80%;
}

[id*="open-accordion"], [id*="close-accordion"], [id*="open-second-accordion"], [id*="close-second-accordion"] {
  background: #00a486;
  border-bottom: 1px solid #fff;
  line-height: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
  position: relative;
  width: 99%;
}

[id*="close-accordion"], [id*="close-second-accordion"] {
  display: none;
}

.accordion a, .second-accordion a {
  color: #fff;
  font-size: 1.25em;
  font-weight: normal;
  padding-left: 2%;
  text-decoration: none;
  text-shadow: none;
}

[id*="open-accordion"]:after, [id*="close-accordion"]:after, [id*="open-second-accordion"]:after, [id*="close-second-accordion"]:after {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 5px;
  top: 15px;
  z-index: 999;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}

.accordion-content {
  background: #fff;
  height: 0;
  margin: -1px auto 0;
  padding: 0 2.5%;
  position: relative;
  overflow: hidden;
  width: 90%;
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
}

.accordion span:target ~ .accordion-content, .second-accordion span:target ~ .accordion-content {
  display: block;
  height: auto;
  padding-bottom: 25px;
  padding-top: 10px;
}

.accordion span:target ~ [id*="close-accordion"], .second-accordion span:target ~ [id*="close-second-accordion"] {
  display: block;
}

.accordion span:target ~ [id*="open-accordion"], .second-accordion span:target ~ [id*="open-second-accordion"] {
  display: none;
}

.accordion span:target ~ [id*="close-accordion"]:after, .second-accordion span:target ~ [id*="close-second-accordion"]:after {
  border-top: 10px solid #333;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

*/

.accordion {
position: relative;
margin: 10px auto;
width: 100%;
}

[id*="open-accordion"], [id*="close-accordion"] {
background: #9b9b9b;
border-bottom: 1px solid #fff;
line-height: 40px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
width: 99%;
}

[id*="close-accordion"] {
display: none;
}

.accordion a {
color: #d00045;
font-size: 1.25em;
font-weight: normal;
padding-left: 2%;
text-decoration: none;
text-shadow: none;
}

[id*="open-accordion"]:after, [id*="close-accordion"]:after {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(255, 255, 255, 0.6);
position: absolute;
right: 5px;
top: 15px;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}

.target-fix {
display: block;
top: 0;
left: 0;
position: fixed;
}

.accordion-content {
background: #fff;
height: 0;
margin: -1px auto 0;
padding: 0 2.5%;
position: relative;
overflow: hidden;
width: 90%;
transition: all 0.1s ease;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
}

.accordion span:target ~ .accordion-content {
display: block;
height: auto;
padding-bottom: 25px;
padding-top: 10px;
}

.accordion span:target ~ [id*="close-accordion"] {
display: block;
}

.accordion span:target ~ [id*="open-accordion"] {
display: none;
}

.accordion span:target ~ [id*="close-accordion"]:after {
border-top: 10px solid #FFFFFF;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}

.accordion.blue [id*="open-accordion"],.accordion.blue [id*="close-accordion"] {background: #87C3D3;}
.accordion.red [id*="open-accordion"],.accordion.red [id*="close-accordion"] {background: #D38791;}
