:root {
  --main-blue-color: #92A2D8;
}

* {
	margin: 0;
	padding: 0;
	/* border: solid #f58718 1px; */
}


body {
	background-color:#FFF;
	font-family: 'Quicksand', sans-serif;
	color: #222222;
	margin: 2em;
}

p {
	

	margin-bottom:.8em;
	font-size: 1rem;
	
}

h1, h2, h3, #banner_name {
	
	font-family: 'Roboto', sans-serif;
	letter-spacing: 1px;

}

h1 {
	font-size: 2.4em;
	font-weight: 300;
	padding: 0.2em 0 0 0px;
	color: #666;
	clear:both;
}
#home h1 , #music_home h1{
	text-align: right;
	
}

h2 {
/*	font-family: 'Quicksand', sans-serif;
	text-align:center;*/
	font-size: 1.2em;

	color: var(--main-blue-color);
	margin: 0 0 0.2em 0;
	padding: 0px;
}
.superscript{
	
    font-size: xx-small;
    vertical-align: top;
    color: #626c8e;
	
}
a, a:link, a:visited, a:active
{
	color: #3625c5; 
/*	text-decoration: none;
*/}

a:hover
{
	color: #e2641a;

}
#footer a
{
	color: #b7b0f5; 
}


#top_page {
	
	width: 100%; 
	border-bottom: #ccc8c8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	z-index: 1;
	background-color: white;
	position: fixed;
}
#top_page img {
	width: 20%;
	float: left;
}


#facebook {
	position: relative;
    top: -34px;
    right: 1.7em;
    float: right;
    height: 0;
	
}
/*#facebook img {
bottom: 0;
}*/
#topnav {
	/* width: 100%; 
	height: 70px;
	/* padding: 1em 0 0 0; */
	background-color: #e5eaf5;
	
}
#menu {
	 display: flex;
	 height: 4em;
	 align-items: center;
}

#topnav li {

	flex: 1 1;
	text-align: center;
	/* width: 33%; */
	list-style: none;
	
}


#topnav li a {
 color: #292929;
 text-transform: uppercase;
 text-decoration: none;
 letter-spacing: 0.15em;
 /* display: block; */
 font-size: 1em;
 position:relative;
 /*  display: inline-block;
  padding: 15px 20px;
  position: relative;*/
}
/* UNDERLIING */
#topnav li a:after {
  bottom: -3px;
  content: "";
  /* display: block; */
  height: 1px;
  left: 50%;
  position: absolute;
  background: #584dc7;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
#topnav li a:hover { 
	color: #584dc7;
}
#topnav li a:hover:after { 
  width: 100%; 
  left: 0; 
}

@keyframes slidedown {
  from {
	  top: -4em;
	  opacity: 0;
  }

  to {
   	opacity: 1;
	top: 0;
  }
}
@keyframes in_from_left {
  from {
    left: -4em;
	 opacity: 0;
  }
  to {
   left: 0;
    opacity: 1;
  }
}
@keyframes in_from_right {
  from {
    left: 4em;
	 opacity: 0;
  }
  to {
   left: 0;th
    opacity: 1;
  }
}
/*@keyframes underliner {
  from {
   transform: scaleX(0);
  }
  to {
   transform: scaleX(1);
  }
}*/

#banner 
{
	
}
			
#banner img
{
	width: 100%;
}

	
#banner_name {
	color: #fff;
	
	background-color: #6684d8d4;
	padding: 0.3em 55% 0.4em 0;
	font-size: 2rem;
	text-align:right;

}

.banner_smaller {

 font-size: 1.3rem;
 font-variant:	small-caps;
}
#me img{
 float: right;
 width: 30%;
 margin-top: 2em;
 margin-right: 20%;
}
img.fl{
	margin-right: 4%;
	float: left;
	width: 39%; 
 max-width: 300px;
	margin-bottom: 1em;
}

.clear{
	clear:both;
}
	
#intro {
	width: 70%;
    font-style: italic;
    font-size: 1.2em;
    text-align: center;
    margin: 1em auto;
}

.strip, .strip_blue {
	float: left;
	width: 100%;
	margin-bottom: 2em;
}
.strip_blue {
	background-color: hsl(224 43% 93% / 1);
}

.strip_left {
	
	width: 30%;
	padding: 2%;
	float: left;
}

.strip_right {
	width: 58%;
	padding: 4%;
	float: left;
}
.strip_blue img {
	float: left;
/*	width: 100px;
*/	margin-right: 1em;
}
audio {

	height: 2.3em;
	
}
#player_container{
	width: 40%;
	margin:0 auto;
}

.row {
	width: 91%;
	float:left;
	margin: 0 4%;
}
.thirds_box {
	float:left;
	padding: 2%;
	width: 30%;
}
.thirds_box:nth-child(1) {
	min-width: 123px;
	text-align:right;
}
.thirds_box:nth-child(3) {
	min-width: 340px;

}
.thirds_box img {
	
	width: 100%;
	
}
.half_box {
	padding-left: 2%;
	width: 52%;
	float: left;
}
.half_box:nth-child(1)  {
	width: 40%;
	text-align: right;
	padding: 0 3%;
}
.half_box img.preview {
	
	width: 100%;
	
}
.see_hear{
  
    vertical-align: top;
	padding-left: 10px;
    color: #3b618e;
    font-size: .6em;
    text-transform: uppercase;
}
.float_img {
	float:left;
	padding: 0 1em 2em 0;
}
/*img.play_arrow{
	
	width: 2em;
	
}
img.pdf_icon {
	width: 2em;
}
a.play:before{
	content: "Play";
	  color: #3b618e;
    font-size: .6em;
    text-transform: uppercase;
}*/
#thumbnails_box  {
 display: flex;
 flex-wrap: wrap;
  justify-content: center;
 
}
#thumbnails_box img {

	height: 150px;
	flex: 1 1;
	margin:  0 5px 5px 0;
}
 
#footer a:hover{
    color: #fff;
}

#footer{
	font-size: 1em;
	clear: both;
	padding: 2em 0 2em 0;
	color: #fff;
	/* margin: 2em; */
	background-color: #808080;
	margin: 2em 0 0 0;
	/* margin: 2; */
	}



.large {
	font-size: 18px;
}

.small {
	font-size: 11px;
}

.red{
	color: #cc1111;

}
.green{
	color: #33CC00;

}

.slicknav_menu {
	display:none;
}	
/* Contact form ****/
label {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 0.4em 0;
	padding: 0px;
	color: #617ac0;
}
input[type=text] {
  width: 100%;
  padding: 5px 8px;
  margin: 3px 0 0.5em 0;
/*  display: inline-block;
*/  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
}
textarea {
  width: 100%;
  height:5em;
  padding: 3px 9px;
  margin: 4px 0 0.5em 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.3em;
  resize: none;
}
input[type=submit] {
  width: 100%;
  background-color: #617ac0;
  color: white;
  padding: 9px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.3em;
}
#contact  input[type=text].captcha {
	width: 176px;
}

input[type=submit]:hover {
  background-color: #2b6f02;
}

.email {
 display:none;
}
#error_box {
color:#C00;
}
.thirdbox {
	float:left;
	width: 25%;
    padding: 0 4% 0 4%;
}	
@media screen and (max-width: 800px) {
/*body {
font-size: 110%;
}*/
#topnav li {
	
}
#topnav li a {
	/* letter-spacing: 0; */
}


}
@media screen and (max-width: 420px) {


 body {
font-size: 110%;
/*background-image:none;*/
}

.half_box {
	
	width: 90%;
	
}
.half_box:nth-child(1)  {
	width: 90%;
	text-align: left;
}
audio {

	height: 2.3em;
	margin: 0 0 1em 3%;
}

}