/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/raleway-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/raleway-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/raleway-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/raleway-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/raleway-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/raleway-v19-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/raleway-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/raleway-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/raleway-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/raleway-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/raleway-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/raleway-v19-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

html                  { min-height: 100%;}
body					        {margin:0; padding:0; font-family: 'Raleway', sans-serif; color:#333; background: linear-gradient(75deg, #3d9692 0%, #50a3a2 60%, #42a67c 100%); hyphens: auto;}

header					      {text-align:center; padding:1.5em 3em; height:100px; position:relative;}
header #logo					{width:70px;  filter: drop-shadow(2px 2px 6px #333);}
header h1             {color:#FFF; font-size:1.0em; margin:1em;}

main                  {background:#FFF; padding:2em 2em 4em 2em; max-width: 990px; margin:auto; position: relative;}
main header           {height: auto;}

footer                {color: #FFF;}
footer nav ul			    {list-style:none; padding:3em 0; text-align:center;}
footer nav ul li a		{font-size:0.7em;}
footer .social        {align-items: center; display: flex; gap: 1em 1.0em; flex-wrap: wrap; justify-content: center; margin-top: 4em;}
footer .social svg    {width:3.4em; height:3.4em;}

h2						        {margin:3em auto 1em auto; font-size: 1.5em; text-transform: uppercase; letter-spacing: 0.1em;}
p                     {line-height: 1.6em; letter-spacing: 0.1em; margin:0 0 2em 0;}

video                 {max-height: 300px; max-width: 100%; margin:auto; display: block;}
audio                 {width: 200px; height:35px; margin-left:1em; background: #3d9692; border-radius: 1em;}

.language             {position:absolute; right:2em; z-index: 2;}

.fb2                  {display: flex; gap: 2em; flex-wrap: wrap;}
.fb2 > *              {width: 100%; flex-basis: 350px; flex-grow: 1;}
.fb2 > * *            {max-width: 100%;}

.tracklist            {margin: 0; background: #3d9692; padding:0; list-style: none; color:#FFF;}
.tracklist li         {border-bottom:1px solid #FFF; padding:0.6em 0.5em;}
.tracklist li p       {margin:0 120px 0 0; line-height: 35px;}
.tracklist audio      {float:right; margin: 0; width: 250px;}

.linklist			        {list-style:none; padding:0; line-height: 35px;}
.linklist .download:before   {display: inline-block; content: '▼'; width:25px; height: 24px; background: linear-gradient(75deg, #3d9692 0%, #50a3a2 60%, #42a67c 100%); border-radius: 100%; color:#FFF; line-height: 25px; text-align: center; margin-right: 1em; filter:  drop-shadow(2px 2px 2px #666)}

.mar_top             {margin-top: 2em;}
.mar_bot              {margin-bottom: 2em;}
.center               {text-align: center;}

a.button				{display:inline-block; border:1px solid #FFF; border-radius:35px; padding:1em 4em; color:#FFF; text-decoration:none; overflow:hidden; position:relative;}
/*a.button:visited		{color:#FFF;}*/
a.button:active			{transform:scale(0.9); transition: all 0.1s ease;}
a.button:hover::before 	{bottom: 0px;}
a.button::before 		{content: ''; background: rgba(255,255,255,0.3); margin: -0.3em -0.8em; position: absolute; bottom:80px; transition: all 0.1s cubic-bezier(0.42, 0, 0.58, 1); display: block; width: 100%; height: 100%; filter:blur(1em);}

a	 					          {color:#000; font-weight:bold; text-decoration:none;}
a:hover	 					    {color:#222; text-decoration:underline;}
a:visited				      {color:#CCC;}

@media (max-width: 550px) {
  body						{font-size:0.75em;}
}