@charset "utf-8";
/* CSS Document */
/* --------------------------------------------------------------------
---- MAIN COLORS ----
TEAL = #0BB89B / ADA TEAL = #06846F / 065F4E
DARK PURPLE GRAY = #443548 / ADA RICH PURPLE = #310e3a
YELLOW GREEN = #D0DD28

---- SHARE GOOGLE FONT STYLES ----
font-family: 'Share', sans-serif;
font-style:italic;
font-weight:400;
font-weight:700;

font-family: 'Crimson Text', serif;
font-style:italic;
font-weight:400;
font-weight:700;

font-family: 'Roboto', sans-serif;
font-style:italic;
font-weight:400;
font-weight:500;
font-weight:700;

---- BOOTSTRAP MEDIA QUERIES ----

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

CUSTOM ADDED SIZE: Extra extra small devices (phones, less than 480px)
No media query setup yet

@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
 -------------------------------------------------------------------- */
 /* test top border */
.testlarge {display:block;height:10px;background-color:#443548;}
.testmedium {display:block;height:10px;background-color:#036151;}
.testsmall {display:block;height:10px;background-color:#0BB89B;}
.testextrasmall {display:block;height:10px;background-color:#443548;}
.testextraextrasmall {display:block;height:10px;background-color:#D0DD28;}
body {font-size:16px;line-height:30px;}
h1 {
	color: #FFF;
	font-family: 'Crimson Text', serif;
	font-size: 2.8em;
	font-weight: 400;
	text-transform: capitalize;
	margin-top:30px;
}
h2 {
	color:#D0DD28;
	font-family: "Roboto", sans-serif;
	font-size: 2.8em;
	margin:30px 0;
	margin-top:30px;
	font-weight: 700;
	font-style: italic;
	background-color: #443548;
	border-radius: 30px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0ab89b+0,443548+100&0.3+0,0.85+100 */
	background: -moz-linear-gradient(-45deg, rgba(10,184,155,0.3) 0%, rgba(68,53,72,0.85) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(10,184,155,0.3) 0%,rgba(68,53,72,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(10,184,155,0.3) 0%,rgba(68,53,72,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d0ab89b', endColorstr='#d9443548',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
h3 {
	color:#0BB89B;
	font-family: 'Crimson Text', serif;
	font-style:italic;
	font-weight:400;
	font-size:2em;
	}
h4 {
	color:#0BB89B;
	font-family: 'Share', sans-serif;
	font-style:italic;
	font-weight:700;
	font-size:1.8em;
}
p {
	color:#fff;
	font-family: 'Crimson Text', serif;
	font-weight:400;
	font-size:1em;
	line-height:30px;
	margin-bottom:40px;
}
li {
	color:#fff;
	font-family: 'Crimson Text', serif;
	font-weight:400;
}
a,p a:link {
	color: #cfdd27;
	text-decoration: underline;
	text-decoration-style: dashed;
}
p a:visited {
	color: #cfdd27;
	border-top:1px solid #cfdd27;
	text-decoration: underline;
	text-decoration-style: solid;
}
p a:hover {
	color: #0ab89b;
	text-decoration: none;
	background-color: #0BB89B;
	background: -webkit-gradient(linear,left top,right top,from(#0BB89B),to(#d0dd28));
	background: linear-gradient(to right,#0BB89B,#d0dd28);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-shadow: none;
	text-decoration: dashed underline;
 }
a:active {
	color: #D0DD28;
	background-color: #06846F;
}
a:focus {
	outline: 3px dashed #fff;
	-webkit-box-shadow: 0px 0px 17px -3px rgba(49,14,58,1);
	-moz-box-shadow: 0px 0px 17px -3px rgba(49,14,58,1);
	-ms-box-shadow: 0px 0px 17px -3px rgba(49,14,58,1);
	-o-box-shadow: 0px 0px 17px -3px rgba(49,14,58,1);
	box-shadow: 0px 0px 17px -3px rgba(49,14,58,1);
	padding: 3px;
}

/* ---- HEADER.PHP ---- */
a.skip-main {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
	color: #06846F;
	background: white;
}
a.skip-main:active, a.skip-main:focus {
	color: #08836E;
	background-color: #fff;
	left: auto;
	top: auto;
	width: 30%;
	height: auto;
	overflow: auto;
	margin: 10px 35%;
	padding: 5px;
	border-radius: 30px;
	border: 4px solid #0BB89B;
	text-align: center;
	font-size: 1.2em;
	z-index: 999;
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	-webkit-box-shadow: 3px 5px 10px -3px rgba(0,0,0,.44);
	-moz-box-shadow: 3px 5px 10px -3px rgba(0,0,0,.44);
	-ms-box-shadow: 3px 5px 10px -3px rgba(0,0,0,.44);
	-o-box-shadow: 3px 5px 10px -3px rgba(0,0,0,.44);
	box-shadow: 3px 5px 10px -3px rgba(0,0,0,.44);
}
/**********************************************************/
*,
*::after,
*::before {
	box-sizing: border-box;
}
#gl {
	width: 100%;
	height: 70vh;
	left: 0;
	top: 0;
	position: absolute;
}
canvas {
	display: block;
	/*border-bottom: 3px solid #D0DD28;*/
	width: 100% !important;
	height: 823px;
}
/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}
.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.frame > * {
	position: relative;
}
.frame a {
	text-transform: lowercase;
}
@media screen and (min-width: 53em) {
	.frame {
		position: fixed;
		text-align: left;
		z-index: 10000;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 2rem 3rem;
		pointer-events: none;
		grid-template-columns: 75% 25%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title links'
							'content content'
							'github demos';
	}
	.frame a {
		pointer-events: auto;
	}
}
/*******************************************************/
.header {
	height:575px;
	background-color:#D0DD28;
	display:block;
	margin-left:auto;
	margin-right:auto;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dae0bc+0,d9f07e+39,73d9bf+100 */
	background: #dae0bc; /* Old browsers */
	background: -moz-linear-gradient(left, #dae0bc 0%, #d9f07e 39%, #73d9bf 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #dae0bc 0%,#d9f07e 39%,#73d9bf 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #dae0bc 0%,#d9f07e 39%,#73d9bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dae0bc', endColorstr='#73d9bf',GradientType=1 ); /* IE6-9 */
	background-image: url('../images/jeannette-banner-zoomed.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 90%;
	border-bottom: 3px solid #D0DD28;
}
header a {
	margin-top: 70px;
	margin-bottom: 6px;
}
/*header a:hover .logo {
	padding-top:20px;
	padding-bottom:11px;
}*/
/*header a:hover {
	color: #443548;
	text-decoration: none;
	border-radius: 0px;
	border: 7px solid #f5f9bd;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f9bd+0,d0dd28+100 */
	background: rgb(245,249,189); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgba(245,249,189,1) 0%, rgba(208,221,40,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(245,249,189,1) 0%,rgba(208,221,40,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(245,249,189,1) 0%,rgba(208,221,40,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f9bd', endColorstr='#d0dd28',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	box-decoration-break:unset;
}*/
.logo {
	margin-top:70px;
	margin-bottom:6px;
	padding-top:27px;
	padding-bottom:17px;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.tagline {
	color:#443548;
	font-family: 'Share', sans-serif;
	font-size:25px;
	font-weight:400;
	font-style:italic;
	text-shadow:0px 0px 20px #e1f999;
}
.subline {
	color: #443548;
	font-family: 'Crimson Text', serif;
	font-size:20px;
	font-weight: 700;
	text-shadow: 0px 0px 20px #e1f999;
	line-height: 20px;
}
.dash {
	margin-top:15px;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
@media (min-width: 576px) {
	.header {padding-bottom:15px;}
	.logo {width:100%;padding-top:50px;}
	.subline {font-size:30px;text-align:center;margin-bottom:0px;}
	.dash {height:2px;margin-bottom:20px;}
}
@media (min-width: 768px) {
	.logo {
		margin-top:45px;
		margin-bottom:35px;
		width:90%;
		padding-top:27px;
		padding-bottom:17px;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	.tagline {
		font-size:29px;
		color:#443548;
		font-family: 'Share', sans-serif;
		font-weight:400;
		font-style:italic;
		text-shadow:0px 0px 20px #e1f999;
	}
	.subline {
		color: #443548;
		font-family: 'Crimson Text', serif;
		font-size:17px;
		font-weight: 700;
		text-shadow: 0px 0px 20px #e1f999;
		line-height: 12px;
	}
	.dash {height:2px;margin-bottom: 0px;}
}
@media (min-width: 992px) {
	.logo {
		margin-top:52px;
		margin-bottom:6px;
		width:90%;
		padding-top:27px;
		padding-bottom:17px;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	.tagline {
		font-size:29px;
		color:#443548;
		font-family: 'Share', sans-serif;
		font-weight:400;
		font-style:italic;
		text-shadow:0px 0px 20px #e1f999;
	}
	.dash {height:2px;margin-bottom: 0px;}
}
@media (min-width: 1200px) {
	.logo {
		margin-top:70px;
		margin-bottom:6px;
		width:90%;
		padding-top:27px;
		padding-bottom:17px;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	.tagline {
		font-size:36px;
		color:#443548;
		font-family: 'Share', sans-serif;
		font-weight:400;
		font-style:italic;
		text-shadow:0px 0px 20px #e1f999;
	}
	.subline {
		color: #443548;
		font-family: 'Crimson Text', serif;
		font-size:17px;
		font-weight: 700;
		text-shadow: 0px 0px 20px #e1f999;
		line-height: 12px;
	}
	.dash {height:2px;margin-bottom: 0px;}
}
/* ---- HEADER.PHP  END ---- */


/* ---- NAV.PHP ---- */
.nav {
	background:#06846F; /*0ab89b*/
	display:block;
	height:124px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	border-bottom: 3px solid #D0DD28;
}
.nav li {
	list-style:none;
	padding: 0;
	margin: 0;
}
.nav a {
	color:#FFF;
	font-family: 'Share', sans-serif;
	font-size:14px;
	font-weight:700;
	text-align:center;
	background-color:;
	height: 62px;
	display: block;
	padding: 15px 0 0;
	margin: 0;
	text-transform: uppercase;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	padding-left: 10px;
	padding-right: 10px;
}
@media (min-width: 576px) {.nav {height:124px;}.nav a{height: 62px;font-size:17px;}}
@media (min-width: 768px) {.nav {height:63px;}.nav a{height: 62px;font-size:17px;}}
@media (min-width: 992px) {.nav a{height: 62px;font-size:20px;}.nav a{height: 62px;font-size:17px;}}
@media (min-width: 1200px) {.nav a{font-size:20px;}}
.nav a:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #D0DD28;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 -10px;
}
.nav a:hover, .nav a:focus, .nav a:active {
	color: #065F4E;
}
.nav a:hover:before, .nav a:focus:before, .nav a:active:before {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}
/* ---- NAV.PHP END ---- */



.content {
	background:#310e3a;
	display:block;
	padding-bottom:40px;
}
@media (min-width: 1231px) {.content {background-size:100% 276px;}}


/* --- FOOTER.PHP START --- */
.social {font-weight:bold;}
.footer {
	background-color:#06846F;
	padding-top:20px;
	padding-bottom:20px;
	}
.footer p {
	color:#fff;
	font-family: 'Share', sans-serif;
	font-size:15px;
	font-weight:700;
	text-align:center;
	margin:0;
	}
	
@media (max-width: 768px) {.footer p {font-size:13px;}}
@media (max-width: 600px) {.footer p {font-size:11px;}}

#TopBtn {
	display: none;
	position: fixed;
	bottom: 5%;
	left: 0px;
	z-index: 99;
	cursor: pointer;
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
	padding-right: 7px;
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
	#TopBtn {
		display: none !important;
	}
}
#TopBtn p {
	color: white;
	font-family: "Open Sans", san-serif;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 20px;
	padding: 0 !important;
	margin: 0 !important;
}
#TopBtn div {
	border: none;
	outline: none;
	background-color: #D0DD28;
	color: #310e3a;
	padding: 15px;
	border-radius: 0 4px 4px 0;
	font-family: "Roboto", san-serif;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 19px;
}
#TopBtn .icon-mysinclair-icons_up-arrow {
	font-size: 20px;
}
#TopBtn:hover {
	background-color: transparent;
}
#TopBtn:hover div {
	padding-left: 30px;
	padding-right: 30px;
		-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-ms-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
}
/* --- FOOTER.PHP END --- */


/* ---------- index_content.php ---------- */
/* Progress Bars */
.cell-content {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.si-horizontal-bar .info-bar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	line-height: 1.5em;
}
.si-horizontal-bar .total-bar {
	width: 100%;
	height: 10px;
	margin: 2px 0 10px 0;
	background-color: #62426a;
	border-radius: 10px;
}
.si-horizontal-bar .total-bar .value-bar {position: relative;
	top: -1px;
	height: 12px;
	border-radius: 12px;
	-webkit-transition-property: background-color;
	transition-property: background-color;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.si-horizontal-bar .info-bar .total-value {
	font-size: 0.8em;
	color: #cfdd27;
}
.si-horizontal-bar .info-bar .larger-values {
	font-size: 0.8em;
}
.info-bar-values {
	color:#cfdd27;
}
.larger-values {
	color:#cfdd27;
	font-family: 'Crimson Text', serif;
	font-weight:400;
	font-size:0.8em;
}
.info-bar-title {
	color: #cfdd27;
	font-size: 1em;
	font-family: 'Share', sans-serif;
	font-style:italic;
	font-weight:700;
}
.expert {color: #cfdd27;}
.advanced {color: #90d14c;}
.intermediate {color: #53c670;}
.basic {color: #0ab89b;}

.cognito {
	top: -30px;
	position: relative;
}
form {
	top: 30px;
	position: relative;
}
form > .div {
	margin-bottom: 30px;
}
.about-print, .about-web, .about-code {
	display:block;
	margin-left:auto;
	margin-right:auto;
	background-size: 100%;
	background-repeat: no-repeat;
	color:#fff;
	text-shadow:0px 0px 25px #0BB89B;
	font-family: 'Share', sans-serif;
	line-height:40px;
	text-transform:uppercase;
	font-weight:700;
	font-size:0px !important;
	height:233px;
	padding:80px 0 0 0;
	border: 10px solid white;
	box-shadow: 0px 0px 9px #0BB89B;
	background-color: #06846F;
}
	
.about-print:hover, .about-web:hover, .about-code:hover {font-size:45px !important;color:#fff;text-shadow:0px 0px 25px #0BB89B;text-decoration:none;}
	
.about-print {background-image:url("../images/print-color.png");}
.about-web {background-image:url("../images/web-color.png");}
.about-code {background-image:url("../images/code-color.png");}

.about-print:hover {background-image:url("../images/print-teal.gif");}
.about-web:hover {background-image:url("../images/web-teal.gif");}
.about-code:hover {background-image:url("../images/code-teal.gif");}


@media (max-width: 576px)  {
	.header {
		height: 545px;
	}
	.xs-mobilelogo {
		max-width: 50%;
		flex: 0 0 50%;
	}
	.logop {
		margin-top: 50px;
		margin-bottom: 30px;
	}
	.tagline {
		margin-bottom: 40px;
	}
	.subline {
		margin-bottom: 5px;
	}
	.dash {
		margin-bottom: 25px;
	}
}
@media (max-width: 446px)  {
	.xs-mobilelogo {
		max-width: 70%;
		flex: 0 0 70%;
	}
}

/* ---------- index_content.php END ---------- */


/* ---------- portfolio_content.php ---------- */
.work-thumbnail, .photo-thumbnail {
	background: #310e3a;
	padding: 0px;
	padding-top: 10px;
	border: none;
	cursor: pointer;
}
.work-thumbnail p, .photo-thumbnail p {
	border: 0px solid white;
	box-shadow: 0px 0px 9px #000000;
	padding:0px;
	margin-bottom:0px
}
.work-thumbnail:hover, .photo-thumbnail:hover  {
	cursor: pointer;
	background: white;
	border-radius: 0px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	border: 6px solid #0bb89b;
	width: calc(100% - 6px);
}
.work-thumbnail:hover p, .photo-thumbnail:hover p {box-shadow: none;}
.modal-dialog {
	max-width: 90%;
}
.modal-header .close {
    margin: -1rem -1rem -1rem;
}
button.close {
    font-size: 3em;
    line-height: 25px;
}