/*!
MG3_css.css v0.0.6
27 Sep 2025
Copyright Michel Griffin

Class and id naming conventions:
1. No Capital letters
2. Multiple word names separated by hyphen -  NOT underline _ (quicker!!)

z-index levels:
  default: 0
  nav bar: 2 but nav .animation: 1
  overlay: 3
  any div to display in front of overlay: 4

Styles are arranged in near-alphabetical order within the following sections

 1.  Link & Site-wide styles
 1a. MEDIA Query styles
 2.  Audio related styles
 3.  Button Styles 
 4.  Flippable Card styles	
 5.  General DIV styles
 6.  Hamburger (Vertical) Menu styles
 6a.  Hamburger Site Menu styles	
 6b.  Hamburger Section Menu styles	
 7.  Header styles
 8.  Horizontal Navbar styles 
 9.	 Horizontal Navbar media queries
 10. Horizontal Navbar Dropdown styles  
 11. News item styles
 12. Page Layout styles
 12a. Signup Form styles
 13. Social Link styles
 14. Video-related styles 

*/

*{
	padding:0;
	border:0;
	outline:none;
}
a{ 
	text-decoration: none; 
}
body {
	background:#ccc;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}

ul {
	list-style-type: none; 
}
/*           Music-player styles                            */

#mg-trackplayer-container {
    display:flex;
    margin-top:-5px;
    width:92.5%;
    height:80px;
    border-radius:0.75rem;
    background-color:#1f1f1f;
}

#mg-album-pic-wrapper {
    display: flex;
    align-items: center;
    padding:8px;
}

.mg-album-pic {    
    width:64px;
    height:64px;
    border-radius: 8px;
}
.mg-controls {
   display:grid;
   width:100%;
   height:100%;
   grid-template-columns: calc(100% - 47px) 47px;
   background-color:#121212;
   border-radius:0.75rem;
}

.mg-track-name {
  grid-row: 1;
  line-height:1px;
  display:none;
}

@media (min-width: 600px) {
.mg-track-name {
  display: grid;
  line-height:24px;
  font-weight:bold;
  font-size:0.9rem; 
  color:#eee;
}
}

#mg-track-waveform {
  grid-row: 2;
  margin-top:0px;
  height:54px;
  background-color:#121212;
  z-index:0 !important;
}

#mg-play-button {
  grid-column: 2;
  grid-row: 2;
  width:47px;
  height:47px;
  margin-top:3px;
}

.play-pause-btn {
  box-sizing:content-box !important;
  grid-column: 2;
  grid-row: 2;
  margin-top:16px;
  margin-left:9px;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
        
.play-pause-btn:hover {
  transform: scale(1.10);
}
        
.play-pause-btn:active {
  transform: scale(0.90);
}

.play-icon, .pause-icon {
  box-sizing:content-box !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  transition: all 0.3s ease;
}
        
.play-icon {
  border-width: 7px 0 7px 10px; /*  10px 0 10px 16px;     */
  border-color: transparent transparent transparent #000;
  margin-left: 2px;
}

.pause-icon {
  border-width: 0;
  border-left: 4px solid #000; /*  6px;     */
  border-right: 4px solid #000; /*  6px;     */
  height: 15px;
  width: 4px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
        
 /* Playing state */
 
.playing .play-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
    
.playing .pause-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/**  ************************************************************ **/
/**   					      1.  Link & Site-wide styles 				                 **/
/** ************************************************************* **/


@font-face {
    font-family: "quicksand-light";
     src: url('../fonts/Quicksand-Light.otf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "quicksand-regular";
     src: url('../fonts/quicksand-regular.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}
html, body {
  margin: 0;
  min-height: 100vh;
}

a:link, a:visited {
text-decoration : none;
}

a.FolkClubVideo:link {
text-decoration : none;
color : #ccc;
outline : 0;
}
a.FolkClubVideo:hover {
color : rgba(143, 197, 99, 1);
text-decoration : none;
outline : 0;
}
a.FolkClubVideo:visited {
text-decoration : none;
color : #ccc;
outline : 0;
}
a.FolkClubVideo:visited:hover {
color:rgba(143, 197, 99, 1);
text-decoration : none;
outline : 0;
}

.BlueLink {
 color: blue;
 text-decoration: none;
}

a.BlueLink:hover {
 color:#0016A5; /** dark blue **/
 text-decoration: underline;
  }

body {  
  font-family: "quicksand-regular";
  font-size: calc(15px + 0.390625vw);
  background:silver;
  -webkit-text-size-adjust:none;
}

  @media only screen and (min-width:1024px) {    
  body{
  min-height: 100vh;
  overflow-y: hidden !important;   
  }
  }  

.arial-medium {
 font-family:arial;
 font-size:1.1rem; 
}
.bold-italic {
 font-weight:bold;
 font-style:italic; 
}

caption {
 font-size:1rem;
 color:red;
 padding-bottom:5px;
}

div { 
  padding:0px;
}

*,
*:before,
*:after {
box-sizing: border-box;
}
h1 {
 padding:30px;
}

img {
 border:0;
}

.nctiny {
font-size : 0.8rem;
}

p a:link, p a:visited, span a:link, span a:visited {
color : blue;
text-decoration : none;
line-height : inherit;
}
p a:hover, p a:focus, p a:active, span a:hover, span a:focus, span a:active {
color:#0016A5; /** dark blue **/
text-decoration: underline;
}

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

.row {
 display:flex;
 flex-direction: row;
 padding:2px 0px;
 line-height:32px;
}

/* Scrollbar style */
::-webkit-scrollbar {
    width: 7px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #F0EADC; 
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:moz-window-inactive {
	background: #222; 
}

 #mg-scroll-hint{
  width:150px;
  margin:auto;
  line-height:32px; 
  text-align:center; 
 }
 #mg-scroll-hint-text{
  width:200px;
  margin:auto;
  background-color:#333;
  color:white;
  font-size:1.0rem;
  line-height:32px;
  padding:0 15px;
  border-radius:12px;
 }

ul {
 margin:0;  /* Avoid lists getting bumped down the page */
}

.mg-white-link {
color:#f9f9f9;
}

a.mg-white-link:link {color:#f9f9f9;}
a.mg-white-link:visited {color:#f9f9f9;}
a.mg-white-link:hover {color:rgba(143, 197, 99, 1);}

.underline {
 text-decoration:underline !important;
}

/****************************************************************/
/*                  1a.  MEDIA Query styles                    **/
/****************************************************************/

.block-on-small {
display : block;
margin-left : auto;
margin-right : auto;
}
@media only screen and (min-width:47.9375em) {
.block-on-small {
display : inline-block;
}
}
.block-on-tiny {
display : block;
margin-left : auto;
margin-right : auto;
}
@media only screen and (min-width:28.9375em) {
.block-on-tiny {
display : inline-block;
}
}
.hide-on-small {
display : none;
}
@media only screen and (min-width:47.9375em) { /* 768 px */
.hide-on-small {
display : inherit;
}
}

.hide-on-tiny-screens {
display : none;
}
@media only screen and (min-width:28.9375em) { /* 464 px */
.hide-on-tiny-screens {
display : inherit;
}
}

.hide-day-on-tiny-screens {
display : none;
}
@media only screen and (min-width:28.9375em) { /* 464 px */
.hide-day-on-tiny-screens {
display : inline-block;
}
}

.hide-CD-cover-on-tiny {
display : none;
}
@media only screen and (min-width:28.9375em) {
.hide-CD-cover-on-tiny {
display : inline-block;
}
}
.show-for-medium-up {
display : none;
}
@media only screen and (min-width:63.9375em) { /* 1024 px */
.show-for-medium-up {
display : block;
}
}
.show-from-768-up {
display : none;
}
@media only screen and (min-width:47.9375em) {
.show-from-768-up {
display : inherit;
}
}
.show-for-large-only {
display : none;
}
@media only screen and (min-width:118.9375em) {
.show-for-large-only {
display : inherit;
}
}
.show-for-small-only {
display : block;
}
@media only screen and (min-width:47.9375em) {  /* 767 px */
.show-for-small-only {
display : none !important ;
}
}
.show-for-tiny-only {
display : inherit;
}
@media only screen and (min-width:28.9375em) {
.show-for-tiny-only {
display : none;
}
}.show-from-tiny-up {
display : none;
}
@media only screen and (min-width:28.9375em) {
.show-from-tiny-up {
display : inherit;
}
}
.hide-lt-612 { 
display : none;
}
@media only screen and (min-width:612px) {
.hide-lt-612 {
display : inline-block;
}
}
.from-835-up {
 display:none;
}
@media only screen and (min-width:835px) {
.from-835-up {
display: block;
}
}
.from-900-high { 
 display:none;
}
@media only screen and (min-height:900px) {
.from-900-high {
display: block;
}
}
.gt-1640 { 
display: none;
}
@media only screen and (min-width:1640px) {
.gt-1640 {
display: inline-block;
}
}
.gt-768 { 
display : none;
}
@media only screen and (min-width:768px) {
.gt-768 {
display : block;
}
}

/****************************************************************/
/*                  2.  Audio related styles                   **/
/****************************************************************/

.MG_Play_Button {
height : 24px;
display : inline-block;
padding-left : 2px;
padding-bottom : 4px;
font-size : 0.7rem;
color : navy;
}

.MG_Centred {
margin-left : auto;
margin-right : auto;
}
.MG_Static {
display : inline-block;
height : 24px;
width : 24px;
background : url('../Images/Buttons/Audio.gif') 0 0;
background-repeat : no-repeat;
}
.MG_Static:hover {
background : url('../Images/Buttons/Audio.gif') 0 -48px;
background-repeat : no-repeat;
}
.MG_In_Play {
display : inline-block;
height : 24px;
width : 24px;
margin-left : auto;
margin-right : auto;
background : url('../Images/Buttons/Audio.gif') 0 -24px;
background-repeat : no-repeat;
text-decoration : none;
}
.MG_In_Play:hover {
background : url('../Images/Buttons/Audio.gif') 0 -72px;
background-repeat : no-repeat;
text-decoration : none;
}
.MG_Loading {
display : inline-block;
height : 24px;
width : 24px;
margin-left : auto;
margin-right : auto;
background : url('../Images/Buttons/loader.white.gif');
background-repeat : no-repeat;
background-size : 24px 24px;
}
	
/**  ************************************************************ **/
/**   					      3.  Button Styles 	 				                         **/
/** ************************************************************* **/

.mg-close-button {
    position: absolute;
    right: 0px;
    width: 42px;
    height: 42px;
    z-index: 5;
    border-radius: 50%;
    padding: 2px;
}
.mg-close-button:hover {
background-color: #444;
}

.mg-black-close-button {
color:#f9f9f9;
top: -20px;
float:right;
left: 15px;
width: 21px;
height:21px;
z-index : 4;
}

.MG_Darken_BG:hover {
background : #333333;
}

.button-32 {
display:block;
width : 32px;
height : 32px;
margin-top:0px;
margin-bottom:15px;
border-radius:100%;
box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 10px;
}

.two-buttons {
display:flex;
flex-direction:column;
}

.button-wrapper {
clear:both;
display:flex;
flex-direction:row;
font-family: "quicksand-regular";
justify-content: center;
align-items:center;
color:#f9f9f9;
border-radius:10px;
width:96%; 
margin:0px auto 0px;
height:135px;
font-size:1.2rem;
padding:5px;
}

@media only screen and (min-width:440px) {
.button-wrapper {
/* max-width:432px; */
max-width:700px;
height: 45px;
border: 1px solid #333;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.two-buttons {
flex-direction:row;
}
}

 .info-button {
  display: flex;
  height: 50px;
  padding: 5px;
  cursor: pointer;
 }

.mg-button {
padding-top : 5px;
padding-bottom : 5px;
padding-left : 3px;
padding-right : 3px;
z-index : 0;
margin:auto;
cursor: pointer;
display:flex;
max-width:106px;	
}



/**  ************************************************************ **/
/**   					       4.  Flippable Card styles	 				                 **/
/**    N.B. Needs a JS snippet at bottom of page where used       **/ 
/** ************************************************************* **/

.cards { 
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  perspective: 1000px;
  justify-content: center;
}

@media (min-width: 450px) {
  .cards {
  display: flex;
  flex-direction: row !important;
  flex-flow: row wrap;
  width: 95%;
  justify-content: space-around;
  position: relative;
  perspective: 1000px;
  }
}

.cards__single {
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  -webkit-transition: transform 0.6s;
}

.cards__image {
  text-align: center;
  width: 100%;
  border-radius: 16px;
}

.cards__single.flip {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.cards__front img {
  margin: 0;
  height: 200px;
  width:200px;
}

.cards__front,
.cards__back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.cards__front {
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

.cards__back {
  font-size:0.9em;
  border-radius: 16px;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  color: black;
  width:100%;
  height:100%;
}

.listen_button {
  position:absolute;
  top:150px;
  left:57px;
  border-radius:12px;  
  background-color: #333;
  border: none;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9rem;
  margin-top: 6px;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
  border: 2px solid #555555;
}

.listen_button:hover {
  background-color: #eee;
  color: black;  
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.Album_Thumb {
max-width:200px;
margin-top:20px;
color:black;
font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:0.9rem;
}

.filler {
height:25px;
}

.MG_Tiny_albums_Review {
width : 100%;
height: 90px !important;
clear: both;
overflow : hidden;
}

@media only screen and (min-width:37.9375em) {
.MG_Tiny_albums_Review {
height: 83px !important;
}
}

/**  ************************************************************ **/
/**   					      5.  General DIV styles	 				                     **/
/** ************************************************************* **/

.arrow {
width:22px;
height:35px;
}
.ex {
width:24px;
height:24px;
}
@media only screen and (min-width:1366px){ 
.arrow {
width:29px;
height:46px;
}
.ex {
width:32px;
height:32px;
}
}

.central {
 display: flex;
 justify-content: center;
 align-items: center;
}

.container{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 200px;
 font-size:3rem;
 z-index:0;
}

div.slideshow { 
    text-align: center; position: absolute; color:white;top:0;bottom:0;left:0;right:0;padding:5px;z-index:4;
    background-color: rgba(0,0,0,0.9);
    }
   
    div.slideshow a.previous { top: 60%; left: 5px;
      display: block; 
      color: white;
      opacity:0.9;
      position: absolute; 
	  height:23px;
	  width:14.5px;
	  }
    div.slideshow a.next { top: 60%; right: 5px;
      display: block; 
      color: white !important;
      opacity:0.9;
      position: absolute; }
    div.slideshow a.close {top: 1.5%; right:5px;
      display: block; 
      color: white !important;
      opacity:0.9;
      position: absolute;}
	div.slideshow a:hover { opacity:1.0; }
	
@media only screen and (min-width:31.6em){
div.slideshow a.previous { top: 45%; left: 25px;}
div.slideshow a.next { top: 45%; right: 25px;}
div.slideshow a.close {right:25px;}
}

.fc-background {
background-image: url("../Images/Backgrounds/FC_Background_PC.jpg"); 
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.hide-on-small {
display : none;
}
@media only screen and (min-width:47.9375em) { /**  from 768 px wide and up  **/
.hide-on-small {
display : inherit;
}
}

.image-div {
	vertical-align:bottom;
	display:block;
	width:300px;
	height:auto;
	margin:auto;
	}
 
.image-div a:link {
text-decoration:none;
color:black;
}
  
.image-div a:hover {
text-decoration:underline;
color:#0016A5; /** dark blue **/
}
 .image-thumb {
	vertical-align:bottom;
	display:block;
	margin:auto;
	max-width:300px;
	}
	@media only screen and (min-width:28.9375em) {
	.image-div {
	vertical-align:bottom;
	display:inline-block;
	width:auto;
	margin:1px !important;
	}
	.image-thumb {
	display: block;
	margin-left:auto;
	margin-right:auto;
	}}
	
	@media only screen and (min-width:47.9375em) {
	.image-div {
	margin:4px !important;
	}}
	
.inverse {
width : 200px;
height:24px;
text-align : center;
line-height :18px;
margin-bottom : 8px;
background-color : #DBF0F9;
border-color : #45ADE4;
border-style : solid;
border-width : 1px;
font : normal normal 13px Tahoma;
color : #444;
text-decoration : none;
}
	
.mg-lozenge {
 display:flex;
 flex-direction: column;
 justify-content: center;
 align-items: center; 
 width:100%;
 border-radius:8px;
 border: solid 2px #594B9B;
 background:#e0ebeb;
 margin-bottom:22px;
 padding:5px 0px;
}

.mg-centred {
 margin:auto;
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  60% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.press-img {
 display:block;
 width:100%;
 padding:5px;
}

#mg-photo-pane {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom:10px;
    color:#e2e2d0;
    background-color: #141414;
    border-radius: 5px;
    text-align: center;
    z-index: 4; /* 1 higher than the overlay layer */
    display:none; 
}

.msg-text {
 position:absolute;
 margin-top:50vh;
 right:0;
 width:50%;
 margin:auto;
 display:block;
 padding:10px;
 color:red;
 background:white;
 border:black solid 2px;
 border-radius:8px;
 z-index:4;
}

.music-player {
display : block;
max-width : 280px;
max-height : 22px;
margin-top : 0px;
margin-bottom : 0px;
}
@media only screen and (min-width:28.9375em) {
.music-player {
width : 80%;
max-width : 400px;
max-height : 32px;
}
}

.ScrollableList {
width : 100%;
max-height : 500px;
margin-right : auto;
margin-left : auto;
overflow : auto;
font-size:1rem;
}

.transparent {
  background:transparent;
}

.videobutton {
width: 30px;
float:right;
margin-right:5px;
}

/**  ************************************************************ **/
/**   					6.  Hamburger (Vertical) Menu styles	   	              **/
/** ************************************************************* **/

/**   					6a.  Hamburger Site Menu styles	   	              **/

.hamburger-menu { 
  opacity: 1.0;
}
#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: absolute;
  top:123px;
  left:12px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 2;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: absolute;
  top: 150px;
  left: -100%;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  list-style: none;
  text-align:center;
  background:#555;
  transition-duration: .75s;
  z-index:3;
}
.menu__item {
 width:100%;
 font-family:"quicksand-light";
 font-size:1.1rem;
 font-weight:bold;
 border-radius:8px;
 border:solid 1px white; 
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
 display: block;
 margin:5px auto;
 padding: 12px 24px;
 color:#edeae1;
}
.menu__item:hover {
 color: white;
}
.menu__box li { 
 width:90%;
 max-width:300px;
 margin:auto;
	border-radius: 8px;
}
.menu__box li:nth-child(1){ 
background-color: rgba(64, 149, 65, 1);
}
.menu__box li:nth-child(2){ 
background-color:rgba(60, 95, 99, 1);
}
.menu__box li:nth-child(3){ 
background-color: rgba(64, 104, 172, 1);
}
.menu__box li:nth-child(4){ 
background-color: #5F4F9F;
}
.menu__box li:nth-child(5){ 
background-color: #e67e22;
}
.menu__box li:nth-child(6){ 
background-color: #CC9C50;
}


/**   					6b.  Hamburger Section Menu styles	   	              **/ 
 
 
#page-menu {
  display: block;
}

.page-menu a { 
	display: block; 
 text-decoration :none;
 text-align:center;
 color:#edeae1;
	font-family: sans-serif;
	line-height: 30px;
	height: 100%;
	font-size: 0.9rem;
 z-index:1;
 padding: 0px 15px;
}

@media only screen and (min-width:835px) { /**  from 835 px - up **/

#page-menu {
 display:none;
}
}

:root{
    --white: #f9f9f9;
    --black: #36383F;
    --gray: #85888C;
} /* variables*/

/* Nav menu */
.nav-bar{
    width: 100%;
    position: absolute;
    background:#555;
    overflow: hidden;
    display:block;
    max-height: 0;
    transition: max-height .5s ease-out;
    z-index:2;
}
.menu-list a{
    display: block;
    padding: 15px;
    color: var(--white);
}
ul.menu-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
/* Menu Icon */
.hamb{
    cursor: pointer;
    float: right;
    padding: 23px 20px;
    margin-top:-50px;
}/* Style label tag */

.hamb-line {
    background: var(--white);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background: var(--white);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 8px;
}
.hamb-line::after{
    top: -8px;
}

.side-menu {
    display: none;
} /* Hide checkbox */

/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}
 
.page-hamburger-menu { 
  opacity: 1.0;  
  color:#edeae1 !important;
  z-index:4;
}

.menu-list-item {
 width:90%;
 font-family:"quicksand-light";
 font-size:1.1rem;
 font-weight:bold;
 border-radius:8px;
 border:solid 1px white; 
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
 display: block;
 margin:5px auto;
 padding: 12px 24px;
 color:#edeae1;
 z-index:4;
}
.menu-list-item:hover {
 color: white;
}
#page-tit {
 font-family:"quicksand-light";
 font-size:1.1rem;
 font-weight:bold;
 line-height:50px;
 text-align:center;
 text-transform:uppercase;
 color:#f9f9f9;
}


/**  ************************************************************ **/
/**   					     7.  Header styles	 				                           **/
/** ************************************************************* **/

 #header {
    display: flex;
    align-items: stretch;
    width:100%;
    height:150px;
    color:#f9f9f9;
    background:#333;
}

 .col-1 {
    display:flex;
    flex-direction: column;
    flex-grow: 1;
  }
.col-2 {
    display:flex;
    flex-grow: 0;
  }  
.row-1 {
    width:100%;
    height:100px;
  }
.row-2 {
    height:50px;    
    flex-wrap: nowrap;
  }
  
#logo {
    flex-grow: 10;
    font-family: "quicksand-light";
    padding: 1rem 0;
    font-size:2rem;
    line-height:2rem;
    color:#ccc;
    text-align:center;
    }

@media only screen and (min-width:600px) { /**  from 600 px - up **/
  
#logo {
font-size:3rem;
line-height:3rem;  
}
}

@media only screen and (min-width:960px) { /** from 960px and up  **/
 
#logo {
font-size:4rem;
line-height:4rem;  
}
}

@media only screen and (min-width:1300px) { /** from 1360 px wide and up  **/

#logo {
font-size:5rem;
line-height:5rem;  
}
}


/**  ************************************************************ **/
/**   					8.  Horizontal Navbar styles	 	                        **/
/** ************************************************************* **/

nav.top-nav {
 display:none;
	position: relative;
	height: 50px;
	background-color:#333; 
}
nav.top-nav a {
	font-family: sans-serif;
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 12;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
 color:#f9f9f9;
}

/**  ************************************************************ **/
/**   			      	9.  Horizontal Navbar media queries 	             **/
/** ************************************************************* **/

@media only screen and (min-width:835px) { /**  from 835 px - up n.B. must be the same value as for the hamburger menu **/
	
	nav.top-nav {
		display:block;
	}	
	.hamburger-menu {
  opacity:0;
	}
 .menu__box {
  width:300px;
 }
}

/**  ************************************************************ **/
/**   			  10. Horizontal Navbar Dropdown styles                  **/
/** ************************************************************* **/  

#menu {
  display: block;
  position:relative;
  padding-left:0px !important;
}
.dropdown {  
	font-family: sans-serif;
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
  padding: 0px 14px;
  width:auto;  
  display: inline-block;
  background: #333;
  position: relative;
  perspective: 1000px;
  z-index: 2;
}
.dropdown:hover {
  cursor: pointer;
}
.dropdown_menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200%;
  max-width:182px;
  perspective: 1000px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.dropdown_menu li {
  color: #fff;
  padding: 0px 5px;
  font-size: 15px;
  opacity: 0;
  transform: translateZ(290px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown_menu,
.dropdown.open .dropdown_menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 1000;
}

/* Show dropdown items with staggered delay */
.dropdown:hover .dropdown_menu li,
.dropdown.open .dropdown_menu li {
  opacity: 1;
  transform: translateZ(0);
}

/* Stagger the transitions for each dropdown item */
.dropdown_menu-3 .dropdown_item-1 {
  transition-delay: 60ms;
}
.dropdown_menu-3 .dropdown_item-2 {
  transition-delay: 120ms;
}
.dropdown_menu-3 .dropdown_item-3 {
  transition-delay: 180ms;
}
.dropdown_menu-3 .dropdown_item-4 {
  transition-delay: 240ms;
}
.dropdown_menu-3 .dropdown_item-5 {
  transition-delay: 300ms;
}
.dropdown_menu-3 .dropdown_item-6 {
  transition-delay: 360ms;
}
   
.mg-words:hover {
 background-color: rgba(64, 149, 65, 1) !important;  /* ;  #15A445 */
 transition: background-color 0.5s 0s linear;
  } 
.mg-words-drop {
 background-color: #00b446; 
 border:1px solid rgba(60, 95, 99, 1);
}
.mg-music:hover {
	background-color:rgba(60, 95, 99, 1) !important;
 transition: background-color 0.5s 0s linear;
}
.mg-music-drop {
 background-color: #5E7C89 !important; 
 border:1px solid rgba(60, 95, 99, 1);
}
.mg-video:hover {
 background-color: rgba(64, 104, 172, 1) !important;
 transition: background-color 0.5s 0s linear;
}
.mg-video-drop {
 border:1px solid rgba(64, 104, 172, 1);
 background-color: #7d9bcf !important; 
}
.mg-folkclub:hover {
 background-color: #5F4F9F !important;
 transition: background-color 0.5s 0s linear;
}
.mg-folkclub-drop {
 border:1px solid #5F4F9F;
 background-color: #8B71FF !important; 
 transition: background-color 0.5s 0s linear;
}
.mg-press:hover {
	background-color: #e67e22;
 transition: background-color 0.5s 0s linear;
}
.mg-contact:hover {
	background-color: #CC9C50;
 transition: background-color 0.5s 0s linear;
}

/* Mobile-specific styles */
@media (hover: none) {
  .dropdown_menu {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  
  .dropdown.open .dropdown_menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/****************************************************************/
/*                  11.  News item styles                      **/
/****************************************************************/

.NewsHeadline {
margin : 0;
margin-bottom : 4px;
margin-top : 10px;
font-family : Georgia, serif;
font-size : 1.5rem;
font-weight : bold;
color : black;
}
.NewsText, .NewsText p {
display : block;
text-align : justify;
margin-top : 10px;
}
.pic-left {
float : left;
margin : 0;
margin-right : 12px;
margin-top : 15px;
max-width : 58%;
}
.pic-right {
float : right;
margin : 0;
margin-top : 5px;
margin-left : 12px;
max-width : 58%;
}
.mg-press-pane {
 margin:20px auto 10px;
 background:silver;
 padding:10px;
 overflow:auto;
 width:96%;
}

/* Portrait smartphones*/

@media only screen 
  and (min-width: 320px) 
  and (max-width: 568px)
  and (orientation: portrait) { /* Portrait iPhone 5/SE (mine) */
   .mg-press-pane {
 overflow: visible; /*  no scrolling in window */
 padding:2px;
}
#mg-scroll-hint {
 display:none;
}
}

@media only screen and (orientation: portrait) and (max-width: 712px) and (min-height:800px) { /* Portrait  Pads and kindles */
   .mg-press-pane {
 height:calc(100vh - 410px);
}
}

@media only screen and (orientation: portrait) and (min-width: 713px) { /* Portrait  Pads and kindles */
   .mg-press-pane {
 height:calc(100vh - 390px);
}
}

@media only screen and (orientation: landscape) and (min-width: 768px) and (min-height:600px) { /* Landscape  Pads and kindles */
   .mg-press-pane {
 height:calc(100vh - 390px);
}

}.white-on-dark {
clear : both;
display : block;
padding : 3px;
margin-top:10px;
font-family: "quicksand-regular";
font-size: 1.0rem;
background:#444;
color:#ccc;
border:1px solid #3e3e3e;
border-radius:8px;
}

/**  ************************************************************ **/
/**   					       12. Page Layout styles	 				                    **/
/** ************************************************************* **/

#amazon-container {
width:300px;
margin:auto;
background:#CACACA;
font-size:1.0rem;
font-family:verdana;
}
@media only screen and (min-width:38.75em) {
#amazon-container {
width:620px;
}
}
.am-block-on-small {
display : block;
margin-left : auto;
margin-right : auto;
}
@media only screen and (min-width:38.75em) {
.am-block-on-small {
display : inline-block;
}
}
.left-pane {
 display:none;
}

@media only screen and (min-width: 851px){ 
.left-pane {
 display:block;
}
}

@media only screen and (min-width: 1024px){ 
.left-pane {
width:24%;
}
}

.right-pane {
 display:block;
 width:100%;
}

@media (min-width: 835px) and (max-width:1279px) {
 .right-pane {
 margin-top:-50px;
}
}

@media only screen and (min-width: 1280px){
 .right-pane {
  display:inline-block !important;  
  margin-top:0px !important;
  width:75%;
 }
}

.page-title {
  text-align:center;
  text-transform:uppercase;
  color:#edeae1;
  font-family:"quicksand-light";
  font-size:1.0rem;
  border-radius:8px;
  border:solid 1px white; 
  padding:15px;
  width:80%;
  margin:auto;
  margin-top:20px;
  font-weight:bold;
}

.page-title {
 display:none;
}
@media only screen and (min-width:835px) { /**  from 835 px - up  - i.e when horizontal navbar is displayed**/
.page-title {
 display:block;
 font-size:1.2rem;
}
}

@media only screen and (min-width:1280px) { /**  from 1280 px - up **/
.page-title { 
  padding:25px;
  width:85%;
  font-size:2rem;
  font-weight:normal;
}
}

.pure-g {
 display:table-row;
}

.site {
  display: flex;
  flex-direction: column;  
}
@media only screen and (min-width: 64em){ /** approx 1024px **/
.site {
 height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
}

#footer {
	display:none; /* Not displayed on phones at all , nor on horizontal pads */
}

@media only screen and (min-height: 950px) and (orientation:portrait) { /** on portrait pads and kindles **/
#footer {
	display:inherit; 
}
}

@media only screen and (min-height: 900px) and (min-width:1280px) and (orientation:landscape) { /** on lndscape laptops and desktops **/
#footer {
	display:inherit; 
}
}

.site-header,
.site-footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari letting these items get smaller than their content's default minimum size. */
}

.site-content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari letting these items get smaller than their content's default minimum size. */
}

.site-footer {
    display:none;
    text-align:center;
    width:100%;
    color: white;
    background:#555;
    height:50px;
}

.footer-content {
 display:flex;
 align-items:baseline !important;
 width:auto;
 justify-content:center;
}

.footer-content a:link {color:white;text-decoration: none;}
.footer-content a:visited {color:white;text-decoration: none;}
.footer-content a:hover {color:rgba(143, 197, 99, 1);text-decoration: none;}

@media only screen and (min-width:540px) { /**  from 540 px - up **/
  
.site-footer {
display:flex;
flex-direction:column;
height:120px;
padding-top:20px;
}
}
@media only screen and (min-width:1362px) { /**  from 1362 px - up **/
  
.site-footer {
flex-direction:row;
height:50px;
padding:0px;
}
.footer-content {
 margin:10px auto !important;
}
}
/****************************************************************/
/*                   13. Signup Form styles                    **/
/****************************************************************/

    .signup-container {
      width: 300px;
						margin:auto;
      height: auto;
      background-color: #e0ebeb;
      padding: 20px;
      box-sizing: border-box;
						font-size:1rem !important;
    }
    .signup-container h2 {
      font-weight: normal;
						font-size:1.5rem !important;
    }
    .signup-container label {
      display: block;
      margin: 10px 0 5px;
      font-weight: bold;
    }
    .signup-container input[type="text"],
    .signup-container input[type="email"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      background-color: #c8dfe2;
    }
    .signup-container .language {
      margin-top: 10px;
    }
    .signup-container .language label {
      display: inline-block;
      font-weight: normal;
      margin-right: 10px;
    }
    .signup-container .choices label {
      display: block;
      font-weight: normal;
      margin: 5px 0;
    }
    .signup-container button {
      margin-top: 20px;
      width: 100%;
      padding: 10px;
      background-color: black;
      color: white;
      border: none;
      font-weight: bold;
      cursor: pointer;
    }

/****************************************************************/
/*                   13. Social Link styles                    **/
/****************************************************************/

.socials {
display:flex;
flex-direction:row;
align-items:baseline;
position:absolute;
left:50px;
top:110px;
}

.amazon {
/*Top Right Bottom Left*/
padding:3px 2px 2px 2px;
opacity:0.8;
fill:#fff;
}
.amazon:hover {
opacity:1.0 !important;
background: #f8981d;
border-radius:5px;
}

.apple {
/*Top Right Bottom Left*/
padding:3px 2px 2px 2px;
opacity:0.8;
}
.apple:hover {
opacity:1.0 !important;
background: #666;
border-radius:5px;
}

.facebook {
/*Top Right Bottom Left*/
padding:3px 7px 2px 7px;
opacity:0.8;
}
.facebook:hover {
opacity:1.0 !important;
background: #3e5b98;
border-radius:5px;
}

.spotify {
/*Top Right Bottom Left*/
padding:3px 5px 2px 5px;
opacity:0.8;
}
.spotify:hover {
opacity:1.0 !important;
background: #7ac701;
border-radius:5px;
}

.youtube {
/*Top Right Bottom Left*/
padding:4px 5px 2px 5px;
opacity:0.8;
}
.youtube:hover {
opacity:1.0 !important;
background: red;
border-radius:5px;
}    
@media only screen and (min-width:768px) { /**  from 768 px - up **/
.socials {
display:none;
}
}@media only screen and (min-width:992px) { /**  from 992 px - up **/
.socials {
display:inherit;
top:110px;
}
}


/**  ************************************************************ **/
/**   					             14. Video styles     	                    **/
/** ************************************************************* **/

#mg-overlay {
display : none;
position : absolute;
top : 0%;
left : 0%;
width : 100%;
height : 6000px;
background-color : black;
z-index: 3;
}

#mg-video-Aspect_Ratio {
padding-top : 56.25%;
}

#mg-video-Frame {
z-index : 4;
border : 0;
margin : 0 2.5% 5% 2.5%;
}
@media only screen and (min-width:28.9375em) {
#mg-video-Frame {
margin : 0% 2.5% 1% 2.5%;
}
}
@media only screen and (min-width:47.9375em) {
#mg-video-Frame {
margin : 0% 2.5% 0 2.5%;
}
}
@media only screen and (min-width:62em) {
#mg-video-Frame {
margin :  1.5% 2% 1% 2.5%;
}
}
#mg-video-Container {
color : #ccc;
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
z-index : 4;
max-height : 100%;
max-width : 100%;
}
#mg-video-Links {
display : table-row;
width : 100%;
height : 150px;
background : white;
margin-top : 50px;
}

#mg-video-Pane {
z-index : 5;
display : none;
border : silver solid 5px;
background : black;
position : fixed;
width : 95%;
left : 2.5%;
top : 25%;
box-shadow : 0 0 5px #444444;
border-radius : 15px;
}
@media only screen and (min-width:28.9375em) { /*  464px */
#mg-video-Pane {
width : 80%;
left : 10%;
top : 15%;
}
}
@media only screen and (min-width:47.9375em) { /*  768px */
#mg-video-Pane {
width : 80%;
left : 10%;
top : 10%;
}
}
@media only screen and (max-height:430px) and (orientation:landscape) { /* up to 430px */
 #mg-video-Pane {
  height: 100vh;
  top: 0;
  }
}
@media only screen and (min-width:62.9375em) {
#mg-video-Pane {
width : 70%;
left : 15%;
top : 20%;
}
}
@media only screen and (min-width:88.9375em) {
#mg-video-Pane {
width : 80%;
left : 10%;
top : 14%;
}
}
@media only screen and (min-width:118.9375em) {
#mg-video-Pane {
width : 60%;
left : 20%;
}
}
.VideoBG {
display:block;
width :98%;
margin:auto;
margin-top : 0px;
font-size : 1.0rem;
}
@media only screen and (min-width:47.9375em) {
.VideoBG {
margin-top : 30px;
}
}

@media only screen and (min-width:80em) {
.VideoBG {
margin-top : 8px;
}
}