@charset "UTF-8";


:root {
	--lightestBackground: #E8EEF3;
	/*--lightBackground: #9BAEBF;*/
	--lightBackground: transparent;
	--mainBackgroundTop: #DFD6D0;
	--mainBackgroundMiddle: #C4A984;
	--mainBackgroundBottom: #AF9572;
	
	--lightGradient: #9BAEBF;
	--lightestGradient: aliceblue;
	--darkestGradient: black;
	--darkGradient: #2E3D50;
	
	--lightestText: aliceblue;	
	--lightText: #E1DCBF;	
	--mainText: #C3463E;
	--darkestText: black;
	
	--shadowText: #333;
	
	--mainFont: 'Lato', sans-serif;
}

body {

			background-size: contain;
			background-image: url("/images/Beach-chairs.jpeg"), linear-gradient(#DFD6D0, #DFD6D0,#DFD6D0,#C4A984, #AF9572);
			z-index: 10;
			background-position:top;
			align-content: center;
			background-repeat: no-repeat;
			font-family: var(--mainFont);
			width: auto;
			height: auto;
			color: var(--mainText);
			margin-top: 75px;
			overflow-x: hidden;
			padding: 15% 0;
}
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-bottom-width: 0px;
	padding: 10px;
	display: inline-block;
}


.container .playlist-container{
	display: inline-grid;
	float: left;
	/*width: 48%;*/
}

.playlist-container{
	width: 48%;
	float:left;
}

.nav_menu {
	width: 100%;
	padding-top: 0;
/*	padding-bottom: 50px;
*/	background-color:transparent;
	clear: inherit;
	color: var(--navText);
	text-shadow: 1px  1px  0 nav(--shadowText);
} 
.container .nav_menu ul {
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
/*	padding-bottom: 15px;
*/	padding-left: 0px;
	width: 100%;
	color: var(--navText);
	text-shadow: 1px  1px  0 nav(--shadowText);
}
.nav_menu ul li {
	
	list-style: none;
	float:left;
	margin-right: auto;
	margin-top: 0px;
	font-family: Arial;
	font-weight: bold;
	font-size-adjust: auto;
	color: var(--navText);
	text-shadow: 1px  1px  0 nav(--shadowText);
	letter-spacing: 1px;
	margin-left: auto;
	text-align: center;
	width: 16%;

}
	a:link { text-decoration: none;
				color: var(--navText);
				text-shadow: 1px  1px  0 var(--shadowText);}
	a:visited { text-decoration: none; 
				color:var(--navText);
				text-shadow: 1px  1px  0 var(--shadowText);}
	a:hover { text-decoration: none; 
				color: var(--navText);
				cursor: pointer;
				text-shadow: 1px  1px  0 var(--shadowText);}

	a:active { text-decoration: none;
				color: var(--navText);
				text-shadow: 1px  1px  0 var(--shadowText);}


.header-wrapper{
	padding: 0;
	flex: auto;
	flex-direction: column;
	float:center;
	flex-flow: wrap;
}

.logo_header {
	width: 100%;
	padding: 70px 0 0 0;
	clear:left;
	text-align:center;
	background-color: transparent;
	color: var(--mainText);
	text-shadow: var(--shadowText);
} 

.logo_header h2 {
	font-family: dynalight;
	color: var(--mainText);
	text-shadow: 1px 1px 0 var(--shadowText);
	font-size: 60px;
	font-style: oblique;
	font-weight: 1000;
	letter-spacing: 15px;
	text-align: center;
}

.page_title_header {
	width: 100%;
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 7px;
	clear:right;
	text-align:center;
	color: var(--mainText);
	text-shadow: var(--shadowText);
	background-color: transparent;
} 
.page_title_header h1 {
	font-family: dynalight;
	color: var(--mainText);
	font-size: 30px;
	font-weight: 1000;
	letter-spacing: 25px;
}
.gallery-container{
	background-color: transparent;
}
.gallery {
	float:left;
	clear: both;
	display: flex;
	flex:auto;
	flex-direction: row;
	flex-basis: auto;
	flex-flow: wrap;
	width: 100%;
	background-color: transparent;
	padding-bottom: 35px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
	justify-content: center;
	align-items: center;
	text-align: center;

}
.audio_thumbnail{
	width: 30%;
	text-align: center;
	align-content: center;
	float: left;
	margin-top: 25px;
	background: transparent;
	padding-bottom: 10px;
	margin-left: 1%;
	margin-right: 1%;
	padding-top: 15px;
	
}
.gallery .audio_thumbnail  {
	margin: 1%;
	object-position: left;
	position: relative;
	color:var(--darkText);
	display: inline-flex;
	flex-basis: auto;
	font-weight: 1000;
	text-align: center;
	padding-left: 20px;
	
}
.thumbnail {
	width: 23%;
	text-align: center;
	float: left;
	margin-top: 35px;
	padding-bottom: 20px;
	margin-left: 1%;
	margin-right: 1%;
	border-radius: 15px;
	padding-top: 20px;
	background-image: linear-gradient(var(--lightestBackground), var(--lightestText));
	box-shadow: 10px 5px 5px black;
	font-family: var(--mainFont);
}

.gallery .thumbnail h4 {
	margin-top: 5px;
	margin-bottom: 5px;
	color: var(--darkestText);
	text-align: center;
	font-family: var(--mainFont)
}
.gallery .thumbnail p {
	margin: 0;
	color: var(--darkText);
	font-weight: 1000;
	text-align: center;
	padding-left: 20px;
}
.thumbnail_33 {
	width: 30%;
	text-align: center;
	align-content: center;
	justify-content: center;
	align-items: center;
	float: left;
	margin-top: 35px;
    background-image: linear-gradient(var(--lightestBackground), var(--lightestText));	
	padding-bottom: 20px;
	margin-left: 2%;
	margin-right: 1%;
	border-radius: 15px;
	padding-top: 20px;
}
.thumbnail_33 img{
	align-self: center;
	max-width: inherit;
}
.gallery .thumbnail_33 h4 {
	margin-top: 5px;
	margin-bottom: 5px;
	color: var(--darkestText);
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}
.gallery .thumbnail_33 p {
	margin: 0;
	color: var(--mainText);
	font-weight: 1000;
	text-align: center;
	padding-left: 20px;
}
.thumbnail_50 {
	 background-image: linear-gradient(var(--lightestBackground), var(--lightestText));
	border-radius: 15px;
	width: 40%;
	text-align: center;
	align-content:flex-end;
	float: left;
	margin-top: 35px;
	padding: 20px;
	margin-left: 5%;
	margin-right: 1%;
	padding-top: 20px;
}
.gallery .thumbnail_50 {
	background-color:  transparent;
	margin: 0;
	color: var(--darkestText); 
	font-weight: 1000;
	text-align:center;
	padding: 20px;
	
}

.thumbnail_66 {
	width: 60%;
	text-align: center;
	align-content: center;
	float: left;
	margin-top: 35px;
	/*background: radial-gradient( var(--lightText), #9EAEC5,#2E3D50 ,black, black,transparent, transparent );*/
	background-color: transparent;
	padding-bottom: 20px;
	margin-left: 2%;
	margin-right: 1%;
	border-radius: 15px;
	padding-top: 20px;
}
.gallery .thumbnail_66 h2 {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 20px;
	color: var(--mainText);
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;	
}
.thumbnail_100{
	display: block;
	align-content: center;
	width: 98%;
	text-align: center;
	float: left;
	margin-top: 35px;
	background-color: transparent;
	padding-bottom: 20px;
	margin-left: 1%;
	margin-right: 1%;
	border-radius: 15px;
	padding-top: 20px;
}
.gallery .thumbnail_100 h2 {
	margin-top: 5px;
	margin-bottom: 5px;
	color: var(--mainText);
	text-align: center;
}
.text_column {
	width: 90%;
	margin: 0;
	padding: 20px;
	text-align: center;
}
.text_column p {
	color: var(--darkText)
}
.text_column_33 {
	width: 90%;
	margin: 0;
	padding: 10px;
	text-align: center;
}
.gallery .text_column_33 p{
	font-family: "Arial";
	text-align: center;
	font-size: 20px;
	color:var(--darkText);
}
.text_column_100 {
	width: 100%;
	margin: 0;
	padding: 10px;
	text-align: center;
}
.gallery .text_column_100 p{
	font-family: "Arial";
	text-align: center;
	font-size: 50px;
	color:var(--darkText);
}
.control {
	width: 290px;
	height: 20px;
	align-content: center;
	align-self: center;
	align-items: center;
}

.thumbnail_33 .control {
	float:center;
	flex:auto;
	width:100%;
	width: 290px;
	padding-top:  20px;
	padding-bottom: 50px;
	align-content: center;
	align-self: center;
	align-items: center;
}


.thumbnail_50 .control {
	clear:both;
	width: 290px;
	padding-top:  20px;
	padding-bottom: 50px;
	align-content: center;
	align-self: center;
	align-items: center;
}

.home_contact_info {
	padding-top: 10px;
	padding-bottom: 20px;
	margin-top: 0px;
	text-align: center;
	color: var(--mainText);
	text-shadow: var(--shadowText);
}
.home_contact_info h2 {
	color: var(--mainText);
	font-size: 25px;
	font-family: dynaset;
	font-style: normal;
	text-shadow: var(--shadowText);}

.home_contact_info p {
	color: var(--mainText);
	font-size: 20px;
	font-family: var(--mainFont);
	font-style: normal;
	}


.see_more {
	padding-top: 0px;
	padding-bottom: 20px;
	text-align:  center;
	
}
.see_more h2{
	color: var(--darkText);
	font-size: 30px;
	font-family: dynalight;
	font-style: italic;
	text-shadow: var(--shadowText);

}
.container .social{
	text-align: center;
}
.copyright p{
		font-family: Arial;
		font-size: 20px;
		font-style: oblique;
		font-weight: 700;
		color: var(--lightestText);
		text-shadow: 1px  1px grey;
		text-align: center;
	/*	background: radial-gradient(var(--lightText), skyblue,#9EAEC5, #2E3D50, var(--darkText) );*/
		margin-top: 55px;	
		margin-bottom: 55px;
	    width: 100%;
	}	
.copyright{
		color: var(--lightestText);
		margin-top: 55px;
		margin-bottom: 55px;
		text-align: center;
		height:20px;
		width:100%;
		padding-bottom: 50px;
	
	}


/* small mobile */
@media (max-width: 350px){
.nav_menu ul li {
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	width: 100%;
	padding-bottom: 5%;
	margin-bottom: 50px;
}

.logo_header {
	width: 100%;
	padding-top: 25px;
	text-align: left;
 	display: flex;
 	flex-direction: row;
	flex-wrap: wrap;
} 
.logo_header h2 {
	font-size: 25px;
	letter-spacing: 1px;
	text-align: center;
}
.page_title_header {
	width: 100%;
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 12px;
	text-align: center;
} 
.page_title_header h1 {
	font-size: 15px;
	font-weight: 1000;
	letter-spacing: 7px;
}
.thumbnail {
	float: left;
	width: 100%;
}
.audio_thumbnail{
		float: left;
		width: 100%;
	}
.thumbnail_33 {
	float: left;
	width: 100%;
	height: 100%;
}
.thumbnail_66{
 	float: left;
 	width: 100%;
	}

	
.copyright p{
		font-family: Arial;
		font-size: 10px;
		/*color: var(--lightText);*/
	}	
.copyright{
		float: left;
		margin-top: 35px;
		/*background: radial-gradient(var(--lightText), #9EAEC5, #2E3D50, var(--darkText) );*/
		text-align: center;
		height:10px;
	}	
}
/* mobile */
@media (min-width: 351px) and (max-width: 450px) {

.nav_menu {
	width: 100%;
	padding-bottom: 50px;
	clear: left;
}
.container .nav_menu ul {
	padding-bottom: 20px;
	width: 100%;
}
.nav_menu ul li {
	margin-top: 0px;
	margin-left: 0px;
	width: 33%;	
	padding-bottom: 5px;
	margin-bottom: 0;
	font-size: 15px;
}
	
.header-wrapper{
	padding: 0;
	margin: 0;
	}	
.logo_header {
	width: 100%;
	padding-top: 5%;
	text-align:left;
	margin-left: 0;
	flex-wrap: wrap;
	display: flex;
	
	
} 
.logo_header h2 {
	font-size: 25px;
	letter-spacing: 4px;
	
}
.page_title_header {
	width: 100%;
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 12px;
	text-align:center;
} 
.page_title_header h1 {
	font-size: 25px;
	font-weight: 1000;
	letter-spacing: 25px;
}
.thumbnail {
	float: left;
	width: 100%;
}
.thumbnail_33 {
	float: left;
	width: 100%;
}	

.audio_thumbnail{
		float: left;
		width: 50%;
	}

.container .nav_menu ul {	
	padding-bottom: 0px;
	width: 100%;
}
.nav_menu ul li {
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	width: 33%;	
	padding-bottom: 5px;
	margin-bottom: 0;
	font-size: 15px;
}	
.logo_header h2 {
	padding-top: 5%;
	font-size: 45px;
	letter-spacing: 4px;
	text-align: center;
}

.thumbnail_66 {
	width: 100%;
	float: left;
}
	
	
	
}
	/* tablets  small desktops */
@media (min-width: 451px) and (max-width: 750px){
	
	.logo_header h2,
	.logo-header h2{
		letter-spacing: 5px;
		
	}
.nav_menu {
	float: left;
	width: 100%;
	padding-bottom: 5%;
	clear: inline;
}
.nav_menu ul li {
	margin-top: 0px;
	margin-left: 0px;
	width: 33%;	
	padding-bottom: 5px;
	margin-bottom: 0;
	font-size: 15px;
}

.thumbnail_33{
		float: left;
		width: 100%;
	}
.thumbnail {
	float: left;
	width: 100%;
}
.audio_thumbnail{
		float: left;
		width: 100%;
	}
.thumbnail_66 {
	width: 100%;
	float: left;
}
.copyright p{
		float: left;
		/*background: radial-gradient(var(--lightestGradient), #9EAEC5, #2E3D50, (var(--darkestGradient), var(--darkestGradient) );*/
		font-family: Arial;
		font-size: 15px;
		padding-top: 10px;
		margin-top: 45px;
		/*color: var(--lightText);*/
	}
.copyright{
		margin-top: 15px;
		margin-bottom: 55px;
		text-align: center;
		height: 35px;
		padding-bottom: 55px;
}
}
@media (min-width: 751px) and (max-width: 850px) {
.nav_menu ul li {
	margin-top: 0px;
	margin-left: 0px;
	
	padding-bottom: 5px;
	margin-bottom: 0;
	font-size: 13px;
	}
	.thumbnail_33 {
	float: left;
	width: 100%;
	height: 100%;
}
.audio_thumbnail{
		float: left;
		width: 48%;
	}
.thumbnail{
		float: left;
		width: 48%;
	}
.thumbnail_66 {
	width: 100%;
	float: left;
}
}
@media (min-width: 851px)and (max-width:1000px) {
.thumbnail_33 {
	float: left;
	width: 100%;
	height: 100%;
}

.thumbnail_66 {
	width: 100%;
	float: left;
}	
}
@media (min-width: 1001px){
}