body {
	font-family: 'Ysabeau', sans-serif;
	text-align: justify;
	line-height:2;
	font-size:14pt;
	background-color:#eee;
	color:#1a1514;
}
a {
	text-decoration:none;
		color:#1a1514;
    font-weight: 300;
}
table {
	color:#1a1514;
}
#biocontent {
	width:70%;
	height:auto;
	padding: 0 15%;
	line-height:1.5;
}
#biocontent img {
	width:50%;
	height:auto;
	border-radius:3px;
	padding: 0 5%;
	float:left;
}
#titles {
	width:30%;
	opacity:0.85;
	padding:5% 20%;
	margin:0 15%;
}
.stuff {
	width: 50%;
	padding: 0 25%;
}
#workscontent {
	width: 60%;
	padding: 0 20% 10% 20%;
}
/* works chart style */
#stuff {
	padding-top:10%;
}
.workscontent table {
	padding:10% 0 0 0;
}
.piece {
    display: block;
    padding-bottom: 20px;
    border-bottom: solid;
    border-bottom-width: 0.5px;
    border-color: #bbb9b7;
}
.work {
	font-size: 25px;
	text-align: left;
	width: 30%;
	vertical-align: top;
}
.workdescription {
	padding-left: 7%;
	text-align:justify;
	font-size:14pt;
}
/* video content */
#videocontent {
    width: 90%;
	display:block;
	column-count: 2;
	padding:5% 5%;
	grid-row-gap: 30px;
}
/*#multimedia {*/
/*    padding-top:10%;*/
/*	column-count: 2;*/
/*	column-gap:15px;*/
/*}*/
/*.video {*/
/*	position: relative;*/
/*}*/
/*.video iframe {*/
/*        display: block;*/
/*}*/
iframe {
	object-fit: cover;
	width:100%;
	aspect-ratio: 560 / 315;
}

.esp  {
    object-fit: cover;
}

.esp iframe {
     aspect-ratio: 800 / 930;
}
#vivre {
    padding:0 40%;
    align-self: center;
}
#vivre button {
    padding: 20px;
    font-family: 'Pixelify Sans';
    font-size:20px;
    border-radius: 5px;
}
#vivre button:hover {
    background-color: #e4007ccf;
}
/* lookbook */
#gallerycontent {
	width:70%;
	padding: 0 15%;
}
#gallery {
	padding-top:10%;
	column-count: 2;
	column-gap:15px;
}
#gallery img {
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}
.art {
	position:relative;
}
.art img {
	display: block;
}
.overlay {
	position: absolute;
    top: 0;
    left: 0;
    background:#FAFAFA;
    color: #271a15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
	width:100%;
	height:100%;
	font-family: 'Ysabeau', sans-serif;
	text-align: center;
	line-height: 2.5;
}
.overlay:hover {
	opacity:0.9;
}
.overlay:hover p {
	opacity: 1;
	line-height: 2.5;
}
/* teaching */
.cover img {
	border-radius:3px;
	opacity:0.8;
	height:auto;
	display: block;
	width: 100%;
}
.cover {
	position: relative;
	padding: 0 10%;
	width:80%;
}

#teachingword {
    color: #FAFAFA;
}
#overlay {
	position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.25s;
	width:100%;
	height:100%;
	font-family: 'Ysabeau', sans-serif;
	text-align: center;
	line-height: 2.5;
}
#buttons {
	margin: 5px 30%;
    float: inline-start;
    width: 100%;
}
#buttons button {
	padding:20px 40px;
	margin:10px;
	background-color:#c7bfb1;
	border:solid #678772;
	border-radius:5px;
	color:#0d0a04;
	font-size:14pt;
	font-family:'Ysabeau', sans-serif;
}

#buttons button:hover {
	transition-duration:2s;
	background-color: #3c5b46;
	color:#f2f2f2;
}

/* purchase buttons */
#getbutton a {
	display:inline-block;
	align-content:left;
	border-radius: 100px;
	font-size: 18pt;
	color:#6AA37D;
	border:none;
	text-decoration: overline;
}
#getbutton a:hover {
	opacity:0.6;
	text-decoration: line-through;
}
#workscontent .words {
	padding: 5% 0;
}
/*contact*/
#form {
	line-height: 2;
	vertical-align: middle;
	width: 60%;
	padding: 5% 10% 10% 10%;
	margin: 0 10%;
	
	border:#c2ad9b;
	border-style:solid;
}
#social img {
	max-height: 25px;
	padding:25px 10px 0 10px;
	opacity:0.5;
}
#social {
	align-content: center;
}
#fcf-form {
    display:block;
}
.fcf-body {
	font-family: 'Ysabeau', sans-serif;
	color: #523107;
    padding: 30px;
    padding-bottom: 10px;
    max-width: 100%;
	margin-bottom:50px;
}
.fcf-form-group {
    margin-bottom: 40px;
}
.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
	border:none;
}
.fcf-form-control {
    display: block;
    width: 100%;
    padding:8px;
	font-family: 'Ysabeau', sans-serif;
    line-height: 3;
    color: #523107;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
    height: auto;
}
textarea.fcf-form-control {
	font-family: 'Ysabeau', sans-serif;
    height: auto;
}
/* page specific*/
.sounds {
  border-style:solid;
    border-color:#96ab94;
    color:#1a1514;
}
#maintitle.sounds {
	text-align:left;
	 border-style:none;
}
.lookbook {
	text-align: center;
	border:#c2ad9b;
	border-style: solid;
	padding: 0 5%;
}
.experiences {
	border:#c2ad9b;
	border-style:solid;
	text-align: center;
}
#maintitle.experiences {
	margin:0;
}
#titles.contact {
	width: 80%;
	padding: 0 10%;
	margin:0;
}
#titles.sounds {
    width:auto;
    margin: 0 10%;
    padding: 5% 20%;
}
#videoname {
    padding:20px 0 0 0;
    font-size:25pt;
    text-align:center;
    transition:2.5s;
}
#videoname a {
	text-decoration: none;
	color:#1a1514;
}
#videoname:hover {
    color:#839E8C;
    padding:10px 0 10px 0;
    transition:1s;
}
@media screen and (max-width: 935px) {
	table {
		padding:5%;
	}
	tr {
		padding-top: 20px;
	}
	table, td, tr {
		display: block;
	}
	.work {
		padding-bottom: 30px;
		width: 100%;
		font-size: 22px;
	}
	.workdescription {
		padding-left: 0;
	}
	#titles {
		padding:5% 10%;
		width: 80%;
		margin:0;
	}
	#content {
		width:90%;
		margin:0 5%;
	}
	#gallerycontent {
	    width:100%;
	    padding:0;
	}
	#content img {
		height:auto;
		border-radius:3px;
	}
	#workscontent {
		width:90%;
		padding:0 5%;
	}
	#videocontent {
    	display:block;
    	padding: 30px;
		}
	#videoname {
	    font-size:25px;
	    padding:10px 0 0 0;
	}
	#videoname:hover {
	    color:#839E8C;
	    padding:5px 0 5px 0;
	    transition:2.5s;
	}
	#titles.sounds{
	    width:auto;
	}
	.stuff{
	    width:80%;
	    padding:0 10%;
	}
	.cover img {
	    opacity:0.5;
	}
    iframe {
    	object-fit: cover;
    	width:100%;
    	aspect-ratio: 560 / 315;
		}
		#posts {
			padding: 20px 5%;
			width:90%;
		}
		.entry {
		    display:block;
		    padding:0;
		}
		.words {
		    padding:0;
		}
		.image img {
		    width:80%;
		    padding:5% 0;
		}
		#form{
		    width:90%;
		    padding: 0 5%;
		    margin:0;
		}
}
@media screen and (max-width: 500) {
    #overlay {
		    font-size:150pt;
		    color:red;
		}
}