.wrapper{
	padding:0 15%;
}

@media all and (max-width: 550px) {
	.wrapper{
	padding:0 5%;
}
}

#hero {
	height:auto;
	flex-flow: row nowrap;
}

@media all and (max-width: 1000px) {
	#hero {
		flex-flow: row wrap;
	}
}

#definition{
	width:50%;
	font-family: 'Mordecai', sans serif;
}

#definition h1 {
	text-align:justify;
	width:100%;
}

@media all and (max-width: 1600px) {

	#definition h1 {
		font-size:5vw;
	}
}

@media all and (max-width: 1000px) {
	
	#definition{
		width:100%;
		margin-bottom: -30px;
	}

	#definition h1 {
		font-size:8vw;
	}
}

#definition p, ul {
	margin-left:30px;
	font-family: 'Mordecai', sans serif;
	font-size:16pt;
	text-align:justify;
}

.line{
	display: inline-block;
}

#blurb{
	width:50%;
	background-color:white;
}

@media all and (max-width: 1000px) {
	
	#blurb{
	width:100%;
	}
}

.herobox{
	margin:30px 15px;
	padding:30px;
}

#content {
	flex-wrap:nowrap;
	background-color:white;
}

@media all and (max-width: 1000px) {
	#content {
		flex-wrap:wrap;
	}
}

#wwd{
}

#wwdgrid{
}

#wwd h2{
	text-align:center;
	margin:25px 15px 5px;
}

.wwdbox{
    position: relative;
	display:flex;
	align-items:center;
	justify-content:left;
	background-color:A480AF;
	margin:15px 15px 30px;
	padding: 30px 0;
	height: 140px;
	width:100%;
	overflow:hidden;
}
.wwdbutton{
    position: relative;
	z-index:2;
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-evenly;
	align-items:center;
	padding: 30px 0;
	height: 140px;
	width:100%;
}

.wwdbutton h1{
	margin:auto 0;
	margin-bottom:0.6em;
	vertical-align:middle;
	font-family: 'Coolvetica', sans serif;
}
.wwdbutton p{
	float:left;
	opacity: 0;
	max-width:50%;
	margin-bottom:0;
	text-align:justify;
    -webkit-transition: .55s ease-out;  
    -moz-transition: .55s ease-out;  
    -o-transition: .55s ease-out;  
    transition: .55s ease-out;
}

.wwdbox img{
	position: absolute;
	top: 0;
	left: 0;
	z-index:1;
	max-height:100%;
	width:auto;
}
@media all and (max-width: 1600px) {	
	.wwdbutton {
	flex-flow: row wrap;
	}
	.wwdbutton h1{
		margin:0 30px;
		text-align:center;
		-webkit-transition: .55s ease-out;  
		-moz-transition: .55s ease-out;  
		-o-transition: .55s ease-out;  
		transition: .55s ease-out;
	}
	
	.wwdbutton p{
		width:80%;
		position: absolute;
		z-index:1;
		max-width:80%;
		margin: auto;
		max-height:100%;
		width:auto;
	}
	
	.wwdbutton:hover h1{
		opacity:0;
		-webkit-transition: .55s ease-out;  
		-moz-transition: .55s ease-out;  
		-o-transition: .55s ease-out;  
		transition: .55s ease-out;
	}
	
}

@media all and (max-width: 1000px) {	
	.wwdbutton {
		flex-flow: row nowrap;
	}
	
	.wwdbutton p{
		width:50%;
	}
}

#wwd1{
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(109,196,151,1) 55%, rgba(109,196,151,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(109,196,151,1) 55%,rgba(109,196,151,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(109,196,151,1) 55%,rgba(109,196,151,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6dc497',GradientType=1 );

    -webkit-transition: background .55s ease-out;  
    -moz-transition: background .55s ease-out;  
    -o-transition: background .55s ease-out;  
    transition: background .55s ease-out;
}
#wwd1:hover{background-color:var(--accent-2);}
#wwd1:hover p{opacity:1;}
#wwd1 h1{color:var(--main-1d);}

#wwd2{
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(172,91,229,1) 55%, rgba(172,91,229,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(172,91,229,1) 55%,rgba(172,91,229,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(172,91,229,1) 55%,rgba(172,91,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#ac5be5',GradientType=1 );

    -webkit-transition: background .55s ease-out;  
    -moz-transition: background .55s ease-out;  
    -o-transition: background .55s ease-out;  
    transition: background .55s ease-out;
}
#wwd2:hover{background-color:#bd82f1;}
#wwd2:hover p{opacity:1;}
#wwd2 h1{color:white;}
#wwd2 p{color:white;}

#wwd3{
background: -moz-linear-gradient(-45deg, rgba(255,233,140,0) 0%, rgba(255,233,140,0.5) 30%, rgba(255,233,140,1) 60%, rgba(255,233,140,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(255,233,140,0) 0%,rgba(255,233,140,0.5) 30%,rgba(255,233,140,1) 60%,rgba(255,233,140,1) 100%);
background: linear-gradient(135deg, rgba(255,233,140,0) 0%,rgba(255,233,140,0.5) 30%,rgba(255,233,140,1) 60%,rgba(255,233,140,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffe98c', endColorstr='#ffe98c',GradientType=1 );

    -webkit-transition: background .55s ease-out;  
    -moz-transition: background .55s ease-out;  
    -o-transition: background .55s ease-out;  
    transition: background .55s ease-out;
}
#wwd3:hover{background-color:#FFE266;}
#wwd3:hover p{opacity:1;}
#wwd3 h1{color:var(--main-1d);}

@media all and (min-width: 1230px) {	
	#sidebar{
		min-width: 500px;
	}
}

#sidebar
{
	max-width: 700px;
	flex:5 3 auto;
	margin:30px 15px;
}

#sidebar h3
{
	text-align:center;
	margin-bottom:0;
	color:white;
}

#sidebar h4
{
	margin-bottom:0;
}

#feed
{	
	position: relative;
	background-color:var(--main-1);
	margin-bottom:30px;
	padding:15px;
}

#feed > p
{
	text-align:center;
	color:white;
}

#feed .post
{
	margin:15px 15px;
	padding:15px 15px;
	background-color:white;
	text-align:left;
	max-height:315px;
	overflow:auto;
}

#feed .post h3
{	
	color:var(--accent-2);
}

#feed .post h2
{	
	font-size:1.33em;
}

#feed img
{
	object-fit: none; /* Do not scale the image */
	object-position: center; /* Center the image within the element */
	width: 100%;
	height: auto;
	margin-bottom:15px;
}

#timestamp
{
	font-style: italic;
}

#bloglink
{
	text-align:center;
}

#bloglink a {
	color:var(--accent-2); 

    -webkit-transition: .55s ease-out;  
    -moz-transition: .55s ease-out;  
    -o-transition: .55s ease-out;  
    transition: .55s ease-out;
}

#bloglink a:hover {
	color:var(--accent-1);
}

#soc
{
	margin-top:44px;
}

#soc h3{
	background-color:var(--main-1);
	padding:15px;
}

#smicons{
	margin-top:15px;
	justify-content:space-between;
}

#smicons a {
	height:auto;
	width: 23%;	
}

#smicons img {
	max-width:100%;	
}