@charset "UTF-8";
/* CSS Document */

#gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray1 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray1:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray2 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray2:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray3 {
    filter: brightness(80%);
}

#gray3:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray4 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray4:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray5 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray5:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

/*Desktop / Global View*/



body {
 	font-family: 'Josefin Sans', sans-serif;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
}

.col {
	float: left;
	padding: 1%;
}


.col-lrg {
	width: 31.3%;
}


.col-lrg img {
	width: 100%;
	height: auto;
	display: block;
}

.Logo {
	width: 12%;
	height: 12%;
}
.slicknav_menu {
  display: none;
}
#menu {
  float: right;
}
#menu li {
  display: inline-block;
}
#menu li a {
  text-decoration: none;
  color: #5f9ea0;
  padding: 8px;
  font-size: 18px;
font-weight: 200;
}
header {
  padding: 10px 20px 20px 20px;
}


.hero {
	background-image: url(img/hero.jpg);
	padding: 52px 0px 52px 0px;
	background-size: cover;

}

.subheading {
	color: #91aaaa; 
	font-weight: 400px; 
	font-size: 25px; 
	padding-left: 40px; 
	padding-top: 10px;
	margin-bottom: -40px;
}

h1 {
	color: #91AAAA;
	font-weight: 300;
	font-size: 45px;
	padding-left: 9px;
	padding-right: 30%;
	padding-top: 25px;
	margin-bottom: -10px;
	
}

.aboutme h1 {text-align: center;padding-bottom: 10px; padding-left: 20%; padding-right: 20%;
}

.albumcover h1 {text-align: center;padding-bottom: 10px; padding-left: 20%; padding-right: 20%;
}

.insideout h1 
	{text-align: left;padding-bottom: 10px;  padding-right: 20%;}

.inquiries h1 
	{text-align: center;padding-bottom: 10px; padding-left: 20%; padding-right: 20%;}

.heading-body-copy {
	color: #91aaaa;
	font-weight: 100px;
	font-size: 20px;
	padding-left: 10px;
	padding-top: 20px;
	margin-right: 20%;
	line-height: 150%

}

.aboutme.heading-body-copy

    {text-align:left; 
		text-padding-left: 50%; 
		margin-left: auto; 
		margin-right: auto;
}

.inquiries.heading-body-copy

    {text-align:center; 
		text-padding-left: 50%; 
		margin-left: auto; 
		margin-right: auto;
		color: #91aaaa;
}

.text-body

	{text-align: justify;
	padding-left: 150px;
	margin-right: auto;
	
	color: #7D9A9A; 
	line-height: 130%;
}

.text-body2

	{text-align: justify; 
	padding-left: 10px;
	padding-right: 55px;
	
	color:#7D9A9A;
	line-height: 130%}

.inquiries {
	color: #FFFFFF;
	background-color: #FFFFFF;
	padding: 10px 25px;

	text-decoration: none;
}

.space {display: none;} 

.gradient {background: linear-gradient(90deg, #C8D4D4, #fff);}

.Logofooter {
	width: 7%;
	height: 7%;
	
}

.inquiries p {
	text-align: center;
}

.inquiries a {
	text-align: center;
}

.email {
	text-align: center;
}

#video {
	
	width: 235px;
}

/*smaller screen*/

@media (max-width: 1006px)

{
	.portrait { padding-bottom: 25px;}
	.text-body

	{text-align:justify;
	padding-left: 10px;
	
	color: #7D9A9A; 
	line-height: 130%;
	
	}
	
	.text-body2
	{padding-right: 190px;}
}

/*Tablet View*/

@media (max-width: 768px) {

#menu li {
	display: block;
	text-align: right;
}

	.col-md {
		width: 48%;
	}
	
	.aboutme h1 {
		font-size: 35px; padding-left: 20%; padding-right: 20%}
	
	.aboutme .flex {height: 20%; width: 20%;}
	
	.aboutme .heading-body-copy {text-padding-left: 5%; float: left;}
	
	.text-body {padding-left: 5%; padding-right: 5%;} 
	
	.parent-container {
				  display: flex;
				  flex-direction: row;
				  flex-wrap: wrap;
				}
	
	.text-body .albumcover {margin-top: 0px;}
	
	.space {display: contents;} 
	
}
	
	




/*Mobile View*/

@media (max-width: 400px) {


	.slicknav_menu {
		display: block;
	}

	#menu {
		display: none;
	}
	
	.col-sm {
		width: 100%;
	}

	.col {
		padding: 0%;
	}
	
	
	.aboutme .flex {height: 10%; width: 10%; justify-content: center; align-items: center}
	
	.text-body {text-align: left;}
}