/*
**	----------------------------------------------------------------------
**	Global styles
**  ----------------------------------------------------------------------
**  Default styles are mobile-first for XS screens
*/

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

*,
*::before,
*::after {
    -webkit-box-sizing: inherit; 
       -moz-box-sizing: inherit;
            box-sizing: inherit;
}
body {
	font-family: 'Arial', sans-serif;
	color: #333333;
	background-color: #978eb4;
	margin: 0;
}
#wrapper {
	position: relative;
	width: 100%;
	min-width: 20em;
	margin: 0;
	padding: 0;
	padding-bottom: 12em;
	background-color: #ffffff;
height: auto !important;                                                                     
  display: flex;  
  height: 100%;                                                                         
  min-height: 100vh;
  flex-direction: column;
}

header, main, footer {
	width: 100%;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'PT Sans', sans-serif;
}
h1 {
	font-size: 1.5em;
	margin: 0;
}

h2 {
	font-size: 1.4em;
	margin: 0;
	color: #a1c8ab;
}
h3 {
	font-size: 1.3em;
	color: #554488;
}
h4 {
	font-size: 1.1em;
	color: #377a47;
	margin-top: 0;
	margin-bottom: 0;
}
h5 {
	font-size: 1em;
	font-weight: bold;
	color: #554488;
	margin-bottom: 0;
}
.tagline {
	padding-top: 1em;
	padding-bottom: 0.5em;
	margin: 0;
	font-family: 'PT Sans', sans-serif;
	font-size: 1.1em;
	font-style: italic;
	color: #554488;
}

.whitespace {
	margin-top: 2em;
}
p {
	line-height: 1.3em;
}
p.bmw {
	font-size: 0.9em;
	font-style: normal;
	font-weight: 700;
	color: #74a781;
}
ul {
	list-style-type: none;
}
ol li {
	padding-bottom: 1em;
}
a {
	text-decoration: none;
	display: block;
     width: 100%;
     height: 100%;
}
a.policy {
	padding-top: 0.25em;
	text-decoration: underline;
}
a.company {
	color: #74a781;
	text-decoration: underline;
	display: inline;
	width: auto;
}
.indProjectLabel a {
	font-weight: bold;
	color: #7156c4;
	font-size: 1.1em;
}
.clrfix {
	clear: both;
}
/*
**	----------------------------------------------------------------------
**	Top navigation section styles
**  ----------------------------------------------------------------------
*/

nav {
	position: fixed;
	top: 0px;
	margin: 0;
	background-color: #ffffff;
	border-bottom: 1px solid #e2e2e2;
	z-index: 1;

/*	color: #511694; */
/*	background-color: #ffffff; */
	width: 100%;
	min-width: 20em;
}
#logosvg {
	float: left;
	width: 40px;
	height: 40px;
	margin-top: 0.2em;
	margin-left: 0.3em;
}
#logosvg:hover {
}

nav ul {
	list-style-type: none;
	padding-left: 0;
	padding-right: 0.5em;
}
nav ul li {
	font-family: 'PT Sans', sans-serif;
	padding-left: 0.4em;
	padding-right: 0;
	padding-bottom: 0.4em;
}
a, nav ul li a {
	text-decoration: none;
	color: #554488;
}
a:hover, nav ul li a:hover {
	color: #b1d9bb;
}

a:active, nav ul li a:active {
	color: #377a47;
}
.menu-horiz {
	font-family: 'PT Sans', sans-serif;
	display: none;
}
#logoText {
	float: left;
	width: 200px;
	text-align: left;
	font-size: 2em;
}
nav ul li#logoText a:hover {
	color: #b1d9bb;
}
nav ul li#logoText a:active {
	color: #377a47;
}
#hamburger {
	float: right;
	margin-right: 0.5em;
	width: 40px;
	text-align: center;
	font-size: 2em;
}
nav ul li#hamburger a:hover {
	color: #b1d9bb;
}
nav ul li#hamburger a:active {
	color: #377a47;
}
nav ul li ul {
	width: 100%;
	display: none;
}
nav ul li:hover ul {
	display: block;
	position: absolute;
	top: 2em;
	right: 0;

}
nav ul li ul li {
	width: 100vw;
	background-color: #ffffff; 
	text-align: right;
	padding: 0.5em 1em 0.5em 0.5em;
	display: block;
	border-top: 1px solid #e2e2e2;
	font-size: 0.7em;
}
nav ul li ul li a {
	padding-right: 0.3em;
}

nav ul li ul li.last {
	border-bottom: 1px solid #e2e2e2;
}
nav ul li ul li:hover {
	background-color: #e1f3e5;
}
nav ul li#hamburger ul li a:hover {
	color: #511694;
}
nav ul li#hamburger ul li a:active {
	color: #377a47;
}
/*
**	----------------------------------------------------------------------
**	Main section styles
**  ----------------------------------------------------------------------
*/
main {
	display: block;
	margin-top: 4em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 1.5em;
	clear: both;
}
#title {
	padding-top: 1em;
	padding-bottom: 3em;
	clear: both;
}
#title1, #title2 {
	display: inline-block;
	float: left;
}
#title1 {
	width: 100%;
}
#title2 {
	width: 100%;
}
#pageTitle {
	padding-top: 2em;
	padding-bottom: 1em;
}
/*.thumb {
	width: 280px;
	margin-left: auto;
	margin-right: auto;

} */

/*
**	----------------------------------------------------------------------
**	Footer section styles
**  ----------------------------------------------------------------------
*/
footer {
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	clear: both;
	background-color: #978eb4;
	color: #d4d4d4;
}
footer ul {
	margin: 0;
	padding: 0.5em;
	list-style-type: none;
}
footer a {
	color: #ffffff;
}
footer a:focus {
	color: #ffffff;
}
footer a:hover {
	color: #a6b9ad;
}
footer a:active {
	color: #567863;
}

#footerLinks {
	width: 100%;
	float: left;
	text-align: left;
}
#footerContacts {
	width: 100%;
	float: left;
	text-align: left;
	
}
#footerText {
	width: 100%;
	text-align: left;
	padding: 0.5em;
	/* background-color: #504965; */
	clear: both;
}


/*
**	----------------------------------------------------------------------
**	Portfolio Page main section styles
**  ----------------------------------------------------------------------
*/
.project {
	width: 100%;
	max-width: 350px;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
}
.thumb {
	width: 100%;
}
p.projectLabel {
	margin: 0;
	font-size: 0.9em;
	font-style: italic;
}



/*
**	----------------------------------------------------------------------
**	About page main section styles
**  ----------------------------------------------------------------------
*/
.container {
	width: 100%;
	padding: 0.5em;
}
.sketchContainer {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
img.sketch {
	width: 100%;
	border: 3px solid #554488;
	border-radius: 50%;
}
.summaryContainer {
	width: 100%;
}
p.summary {
	font-size: 1.1em;
}
/* 
#skillsTextContainer {
	width: 100%;
	max-width: 500px;
}
*/
#skillsDiagramContainer {
	width: 100%;
	max-width: 500px;
}
#skillsDiagram {
	max-width: 100%;
}
.column3up {
	width: 100%;
}
div.column3up p {
	margin-top: 0.5em;
}


/*
**	----------------------------------------------------------------------
**	Individual project page main section styles
**  ----------------------------------------------------------------------
*/
.projContainer {
	width: 100%;
	padding-right: 2em;
}
img.proj {
	width: 100%;
	box-shadow: 5px 5px 5px 3px #7c7c7c;
	outline: 0;
}
.smscrn {
	display: block;
}
.lgscrn {
	display: none;
}
p.indProjectLabel {
	margin: 0.5em 0 0 0;;
	font-size: 0.9em;
	font-style: italic;
}

.projSummaryContainer {
	width: 100%;
}
p.projSummary {
	font-size: 1.1em;
}

.projImageContainer {
	width: 100%;
	padding: 1em;
	text-align: center;
}
.smImageContainer {
	width: 100%;
	padding: 1em;
	text-align: center;
}
.indProject {
	width: 100%;
	max-width: 350px;
	margin-top: 3em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
}




/*
**	----------------------------------------------------------------------
**	Wiz Kidz Math Storyboard page main section styles
**  ----------------------------------------------------------------------
*/
/*.slideContainer, .narrativeContainer {
	width: 80%;
	max-width: 60em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;

}

.slide {
	width: 100%;
}

.narrative {
	
}*/

/* Slide container */
.slideContainer {
	width: 80%;
	max-width: 45em;
	margin: auto;
}
.narrativeContainer {
	width: 90%;
	max-width: 50em;
	margin: auto;
}

.slides {
    display: none;
    border-radius: 0.5em;
}

.narrative {
	display: none;
	margin-top: 1em;
}
.ctr {
	text-align: center;
}
.prevnext {
	padding: 0.5em;
	margin: 0.5em;
	border: 1px solid #a1c8ab;
	border-radius: 0.5em;
	background-color: transparent;
	outline: none;
	color: #a1c8ab;
}
.prevnext:hover {
	background-color: #a1c8ab;
	color: #ffffff;
}
.prevnext:active {
	background-color: #74a781;
	color: #ffffff;
}
.slidenav {
	width: 2em;
	height: 2em;
	font-size: 0.8em;
	padding: 0.3em;
	margin: 0.1em;
	border: 1px solid #a1c8ab;
	border-radius: 50%;
	background-color: transparent;
	outline: none;
	color: #a1c8ab;
}
.slidenav:hover {
	background-color: #a1c8ab;
	color: #ffffff;
}
.slidenav:active {
	background-color: #74a781;
	color: #ffffff;
}

.bookmark {
	background-color: #a1c8ab;
	color: #ffffff;
	outline: none;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
ul.bullet {
	list-style-type: disc;
}
.sun {
	float: right;
	width: 50%;
	max-width: 6em;
}
.sunFace {
	width: 100%;
}

/*
**	----------------------------------------------------------------------
**	Contact page main section styles
**  ----------------------------------------------------------------------
*/
label {
	display: block;
}
#contactInfo {
	width: 100%;	
}
#formContainer {
	width: 100%;
	
}
form {
	border: 3px solid #b1d9bb;
	border-radius: 0.5em;
	padding: 0.5em;
	margin-bottom: 2em;
}
input, select, textarea {
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}
form h4 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 0.7em;
	border-bottom: 1px solid #b1d9bb;
}
p.contact {
		margin-top: 0;
		margin-bottom: 0;
	}
select, input[type="text"], input[type="email"], textarea, input[type="submit"] {
	width: 100%;
	outline-color: #b1d9bb;
}

.special {
	font-weight: bold;
	color: #377a47;
}
input[type="submit"] {
	padding: 0.5em;
	border: 2px solid #a1c8ab;
	border-radius: 0.3em;
	background-color: #a1c8ab;
	outline: none;
	color: #ffffff;
}
input[type="submit"]:hover {
	background-color: #74a781;
	border-color: #74a781;
	color: #ffffff;
}
input[type="submit"]:active {
	background-color: #c8dece;
	border-color: #c8dece;
	color: #377a47;
}
select {
	background-color: rgba(177, 217, 187, 0.2) !important;
}
.instruction {
	font-size: 0.9em;
	font-style: italic;
	color: #377a47;
}
.alert {
	
	margin-top: 0;
	padding: 0.3em;
	border-radius: 0.3em;
	color: #554488;
	background-color: #d9cdfd;
	font-size: 0.9em;
	font-style: italic;

}
#sendmail {
	width: 100%;
	display: none;
}

/*
**	----------------------------------------------------------------------
**	Thanks page main section styles
**  ----------------------------------------------------------------------
*/
#thanks {
	text-align: center;
	padding-top: 2em;
	padding-bottom: 6em;
	background: url('../images/sendmail.svg') no-repeat top center;
	background-size: contain;
	
}
.bigThanks {
	font-size: 1.5em;
	color: #554488;
}


/*
**	----------------------------------------------------------------------
**	Graphics page main section styles
**  ----------------------------------------------------------------------
*/

.darkBG {
	background-color: #685b98;
}


/*
*****************************************************************************
**	---------------------------------------------------------------------- **
**	Media Query - Small screen - min 480px at 16px base em                 **
**  ---------------------------------------------------------------------- **
*****************************************************************************
*/

@media only screen and (min-width: 30em) {
	
	/* About Page main section styles */
	.sketchContainer {
		display: inline-block;
		vertical-align: middle;
		width: 29%;
		max-width: 180px;
	}
	.summaryContainer {
		display: inline-block;
		vertical-align: middle;
		width: 69%;
		max-width: 600px;
		padding-left: 1em;
	}
	#skillsDiagramContainer {
		float: right;
		width: 48%;

	}
	/*
	#skillsTextContainer {
		float: left;
		width: 48%;
		padding-right: 1em;
	}
	*/
	
	/* Individual project pages main section styles */

	.projImageContainer {
		float: right;
		width: 60%;
		max-width: 350px;
	}
	.smImageContainer {
		float: right;
		width: 50%;
		max-width: 250px;
	}
		.lgscrn {
		display: block;
	}
		.smscrn {
		display: none;
	}
	
	/* Thanks page main section styles */
	
	#thanks {
		padding-bottom: 7em;
	}
	.bigThanks {
		font-size: 2em;
	}

}



/*
*****************************************************************************
**	---------------------------------------------------------------------- **
**	Media Query - Medium screen - min 640px at 16px base em                **
**  ---------------------------------------------------------------------- **
*****************************************************************************
*/

@media only screen and (min-width: 40em) {
	
	/* Header navigation styles */
	#wrapper {
		padding-bottom: 6em;
	}
	#logosvg {
		margin-top: 0.5em;
	}
	#hamburger {
		display: none;
	}
	#logoText {
		width: 200px;
		display: inline-block;
		vertical-align: middle;
		font-size: 1.5em;
		padding-top: 0.4em;
		padding-left: 0.3em;
	}
	.menu-horiz {
		display: inline-block;
		vertical-align: middle;
		font-size: 1.5em;
		padding-top: 0.4em;
		padding-right: 1.5em;
		
	}
	.tagline {
	padding-top: 0;
	font-size: 1.2em;
	}
	/* Portfolio Page main section styles */
	main {
		margin-top: 5em;
	}
	#title {
		padding-top: 1em;
		padding-bottom: 3em;
	}

	#title1 {
		width: 10em;
	}
	#title2 {
		width: 25em;
	}
	#pageTitle {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	#projectsContainer {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		align-items: flex-start;
	
	}
	.project {
		flex: 0 0 350px;
		margin: 1em 1em 1.5em 1em;
	}
	
	/* About Page main section styles */
	.sketchContainer {
		width: 24%;
		max-width: 200px;
	}
		
	#skillsDiagramContainer {
		float: right;
		width: 48%;
		max-width: 350px;
		margin-top: -4em;

	}
	/*
	#skillsTextContainer {
		float: left;
		width: 48%;
		padding-right: 1em;
	}
	*/
	.column3up {
		float: left;
		width: 33%;
		padding-right: 1.5em;
	}

	/* Individual project pages main section styles */

	.projImageContainer {
		width: 60%;
		max-width: 500px;
	}
	.smImageContainer {
		width: 40%;
		max-width: 350px;
	}
	.indProjectContainer {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: flex-start;
	
	}
	.indProject {
		flex: 0 1 350px;
		margin: 1em 3em 1.5em 0;
	}
	

	/* Footer section styles */
	#footerLinks {
		width: 48%;
		display: inline-block;
		vertical-align: middle;
	}
	#footerContacts {
		width: 48%;
		float: right;
		text-align: right;
		display: inline-block;
		vertical-align: middle;
		
	}
	#footerText {
		text-align: center;
	}

}

/*
*****************************************************************************
**	---------------------------------------------------------------------- **
**	Media Query - Medium screen - min 720px at 16px base em                **
**  ---------------------------------------------------------------------- **
*****************************************************************************
*/
/* Contact page/form styles */

@media only screen and (min-width: 45em) {
	#contactInfo {
		float: left;
		width: 30%;
		vertical-align: top;
		padding-right: 1em;
		
	}
	#sendmail {
		display: inherit;
		width: 40%;
		margin-left: auto;
		margin-right: auto;
	}
	#formContainer {
		float: left;
		vertical-align: top;
		padding-top: 0.8em;
		width: 70%;
		
	}
	.formFullWidth {
		width: 100%;
		display: block;
	}
	.formHalfWidth {
		width: 50%;
		float: left;
		padding-right: 0.3em;
	}
	select, input[type="text"], input[type="email"], textarea, input[type="submit"], .alert {
		width: 95%;
	}
	#thanks {
		text-align: left;
		padding-bottom: 7em;
	}

}




/*
**	----------------------------------------------------------------------
**	Large size screen media queries - 60em*16 = 960px
**  ----------------------------------------------------------------------
*/
@media only screen and (min-width: 60em) {
	/* Individual project page main section styles */
	.projContainer {
		display: inline-block;
		vertical-align: middle;
		width: 60%;
	}
	.projSummaryContainer {
		display: inline-block;
		vertical-align: middle;
		width: 39%;
		padding-left: 1em;
	}
	
	/* Contact page/form styles */
	#contactInfo {
		width: 25%;
	}
	#formContainer {
		width: 75%;
		
	}

}

/*
**	----------------------------------------------------------------------
**	X-large size screen media queries
**  ----------------------------------------------------------------------
*/

@media only screen and (min-width: 80em) {
	#footerContent, main, nav ul {
		max-width: 80em;
		margin-left: auto;
		margin-right: auto;
	}
	
}


/*
**	----------------------------------------------------------------------
**	WP Blog specific styles
**  ----------------------------------------------------------------------
*/


h2.comments-title {
	font-size: 1.1em;
	color: #554488;

}

.blogpost {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	box-shadow: 0px 24px 3px -24px #554488;
}

.entry {
	padding-bottom: 1em;
}