@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

html {  
  font-size:16px;
  scroll-padding-top:8rem; /* added this because smooth-scroll.js is turned off */
}

@media screen and (min-width:768px) {
	html { 
	  scroll-padding-top:4rem; /* added this because smooth-scroll.js is turned off */
	}
}

body {
  font-family:'Roboto', sans-serif;
	color:#333;
}

a.back-button:active,
a.back-button:link,
a.back-button:visited {
	color:#333;
	padding:10px;degr
	text-decoration:none;
	border-radius:5px;s
	border:1px solid #FFF;
}

a.back-button:hover {
	border:1px solid;
	text-decoration:none;
}



ol li,
ul li {
	/*margin-bottom:10px;*/
}

p {
	margin-bottom:1.25rem;
}

.container {
  margin-left:auto;
  margin-right:auto;
  display:block;
	position:relative;
}

@media screen and (min-width:576px) {
  .container {
    max-width: 540px;
  }
}

@media screen and (min-width:768px) {
  .container {
    max-width: 720px;
  }
}

@media screen and (min-width:992px) {
  .container {
    max-width: 960px;
  }
}

@media screen and (min-width:1200px) {
  .container {
    max-width: 1140px;
  }
}

h1, h2, h3, .h1, .h2, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h1 {
	font-size:2rem;
	color:#333;	
}

h2 {
	font-size:1.5rem;
	color:#333;
}

h3 {
	font-size:1.25rem;
	font-weight:bold;
	color:#333333;
}

.button {  
  -webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

.button-primary {
	clear:both;
}

.button-primary,
.button-primary:visited {
  text-decoration:none !important;
  border:1px solid #C84800;
  color:#FFF !important;
  width:160px;
  /*background:#ffa700;*/
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa700+0,ff7800+100 */
  background: #C84800; /* Old browsers */
  background: -moz-linear-gradient(top, #C84800 0%, #C84800 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #C84800 0%,#C84800 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #C84800 0%,#C84800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa700', endColorstr='#ff7800',GradientType=0 ); /* IE6-9 */
}

.button-primary:hover
{
  text-decoration:none;
  color:#FFF;
}

@media screen and (min-width:576px)
{
	.button-primary:hover
	{
  	width:180px;
	}
}

header {
	position: fixed;
	width:100%;
	z-index: 1;
	background-color:rgba(0,0,0,0.8);
  	font-size:0.875rem;
}

header a {
	border:none !important;
}

/*
header.desktop {
  background-color:rgba(0,0,0,0.8);
  font-size:0.875rem;
  width:100%;  
  display:none;
}

@media screen and (min-width:768px) {
	header.desktop {
		display:block;
	}
}

header.mobile {
  background-color:rgba(0,0,0,0.8);
  font-size:0.875rem;
  width:100%;  
  display:block;

}

@media screen and (min-width:768px) {
	header.mobile {
		display:none;
	}
}

header.mobile .container {
	max-width:100%;
	padding:0;
}*/

a.brand:active,
a.brand:link,
a.brand:visited,
a.brand:hover {
	text-decoration:none !important;
}

header.mobile .branding {
	padding:20px 20px 0 20px;
}

header.mobile .navigation-container {
	background-color:rgba(0,0,0,0.8);
}

.branding .name {
  color:#FFF;
  /*font-family: 'Crimson Text', serif;*/
  font-family: 'Architects Daughter', cursive;
  /*margin-bottom:0;*/
  margin-top:0;
  margin-bottom:0;
  text-align:center;
  font-size:1.8em;
	text-align:center;
	display:block;
}

@media screen and (min-width:768px)
{
  .branding .name {
    text-align:left;
  }
}

.branding .slogan
{
  color:#FFF;
  display:block;
  font-size:1.25em;
  text-align:center;
  margin-bottom:0;
	line-height:1em;
}

@media screen and (min-width:768px)
{
  .branding .slogan {
    text-align:left;
  }
}

nav {
  text-align:center;
}

@media screen and (min-width:768px) 
{
  nav {
    text-align:right;
    margin-top:0;
	background-color:transparent;
  }
}

ul.menu {
  margin:0;
  padding:15px 0;
  font-size:1.25em;
}

@media screen and (min-width:768px) {
	ul.menu {
		padding:0;
	}
}

.menu li {
  display:inline-block;
}

.menu li a {
	cursor: pointer;
  color:#FFF;
  padding:5px 10px;
  display:block;
  text-decoration:none !important;
  border-radius:5px;
  
  -webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

.menu li a:hover {
  color: #333;
  background:#FFF;
}

.menu li a.current {
	color: #333;
	background:#FFF;
	pointer-events:none;	
}

.main-container {
  display:block;
  position:relative;
  padding-top:125px;
}

@media screen and (min-width:768px) {
	.main-container {
	  padding-top:70px;
	}
}

.projects {
  padding:0 0 3em 0;
  background-color:#f1f1f1;
}

.projects .project
{
  text-align:center;
}

.projects .project img.display {
	max-width:90%;
	margin:auto;
}

@media screen and (min-width:768px) {
	.projects .project img.display {
		max-width:80%;
	}
}

.projects .page-title {
	text-align:center;
	text-transform:uppercase;
	/*font-family: 'Architects Daughter', cursive;*/
}

.about {
  /*background-color:#E9E9E9;*/
	padding:2em 0;
}

.about .page-title {
	text-align:center;
	text-transform:uppercase;
	/*font-family: 'Architects Daughter', cursive;*/
}

.skill .range {
	background:#eee;
	border:1px solid #666;
	width:100%;
	float:none;
	clear:both;
}

.skill .level {
	/*background:#49fff4;*/
	background:#24A9A7;
	width:90%;
}

.skill .range-labels {
	font-size:0.75rem;
	color:#333;
}

.skill .range-labels .beginner {
	float:left;
}

.skill .range-labels .advanced {
	float:right;
}

.education .history {
	margin-top:15px;
	margin-bottom:15px;
	font-size:0.875rem;
}

.education .history .location {
	color:#333;
}

.education .history .degree {
	font-weight:bold;
	font-size:1.15em;
}

.contact {
	background-color:#EEEEEE;
  /*background-color:#FFA700;*/
	padding:2em 0 1em 0;
	border-top:5px solid #FFF;
}

section {
	padding-top:2rem;
	padding-bottom:2rem;
}

.section-title {
  color:#0D8180;
}

.contact-content {
	width:100%;
	max-width:260px;
	margin:auto;
}

.contact .photo {
	margin:40px 0;
	border-radius:5px;
	overflow:hidden;
}

.contact .photo img {
	border-radius:5px;
}

.contact .icon {
	font-size:1.25em;
	vertical-align:middle;
}

.contact .links {
	list-style-type: none;
	padding:0;
	text-align:center;
	font-size:2em;
}

.contact .links li {
	display:inline-block;
}

.contact a {
	display:block;
	font-weight:bold;
	text-decoration:none;	
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

.contact a:active,
.contact a:link,
.contact a:visited {
	display:block;
	padding:10px 10px;
	color:#333333;
	border:1px solid #EEEEEE;
}

.contact a:hover {
	color:#FF8100;
	text-decoration:none;
}

.contact img {
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

.contact a:hover img {
	-webkit-transform:scale(1.25,1.25);
	-ms-transform:scale(1.25,1.25);
	-moz-transform:scale(1.25,1.25);
	transform:scale(1.25,1.25);
}

.contact a.image-link:active,
.contact a.image-link:link,
.contact a.image-link:visited {
	padding:0;
	border:none;
}

footer a:active,
footer a:link,
footer a:visited {
	color:#EEE;
	text-decoration:underline;
}

footer a:hover {
	color:#EEE;
	text-decoration:none;
}

/*
footer #contact .links {
	list-style-type: none;
	padding:0;
	text-align:center;
	font-size:2em;
}


@media screen and (min-width:768px) {
	footer #contact .links {
		text-align:right;
	}
}

footer #contact .links li {
	display:inline-block;
}

footer #contact .links a {
	display:block;
	text-decoration:none;	
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

footer #contact a:active,
footer #contact a:link,
footer #contact a:visited {
	display:block;
	padding:0px 10px;
	color:#FFF;
}

footer #contact a:hover {
	color:#EEE;
	text-decoration:none;
	font-size:1.5rem;
}
*/

.quote {
  padding:3em 0 3em 0;
	text-align:center;
	font-size:1rem;
	color:#999;
	position:relative;
}

@media screen and (min-width:576px) {
	.quote {
		font-size:1.25rem;
	}
}

@media screen and (min-width:768px) {
	.quote {
		font-size:1.5rem;
	}
}

.quote .text-large {
	font-size:2.5em;
}

.quote .text-medium {
	font-size:1.5em;
}

.quote .text-color {
	color:#24A9A7;
}

.quote .author {
	text-transform: uppercase;
	font-size:1rem;
	margin-top:1em;
}

.quote-content {
	position:relative;
	z-index:9999;
	font-weight:bold;
}

.quote-bg {
	z-index:999;
}

.quote .icon {
	font-size:3rem;
	position:absolute;
	color:#EEE;
}

@media screen and (min-width:768px) {
	.quote .icon {
		font-size:5rem;
	}
}

@media screen and (min-width:992px) {
	.quote .icon {
		font-size:10rem;
	}
}

.icon-quote-left {
	top:0;
	left:0;
}

.icon-quote-right {
	bottom:0;
	right:0;
}

.overview {
	padding:3em 0em;
}

.overview img {
	border:1px solid #CCC;
	width:auto;
	max-height: 800px;
	margin:auto;
	display:block;
}


.overview .copyright {
	color:#999;
	font-size:0.875rem;
	margin-top:20px;
	text-align:center;
}


footer {
  background-color:#333;
	padding:2.25em 0;
}

footer .copyright {
	color:#FFF;
	text-align:center;
}

@media screen and (min-width:768px) {
	footer .copyright {
		text-align:left;
	}
}

.bold {
	font-weight:bold;
}

.center {
	text-align:center;
}

.invisible {
	visibility:hidden;
}

/***** Project Page *****/

@media screen and (min-width: 1200px)
{
	.overview .container {
			max-width: 960px;
	}
}

.project-title {
	text-transform:uppercase;
	/*font-family: 'Architects Daughter', cursive;*/
}

.process {
	padding:3em 0;
	background-color:#E3F6F3;	
}

.process img {
	max-width:768px;
	margin:auto;
	text-align:center;
	border:1px solid #ccc;sk
	display:block;
}

@media screen and (min-width: 1200px)
{
	.process .container {
			max-width: 960px;
	}
}

a.skip-to-main {
	/*position:absolute;*/
	/*white-space: nowrap;
    margin: 1em auto;
    top: 0;
    position: fixed;
    left: 50%;
    margin-left: -72px;
    opacity: 0;*/
	display: block;
    position: absolute;
    left: -999px;
    top: -999px;
}

a.skip-to-main:focus {
	/*opacity: 1;
    color: #000000;
    background: #FFFFFF;
    z-index: 999;
    padding: 5px;*/
	z-index: 999;
	left: 0;
    top: 0;
    padding: 3px;
	color:#000000;
    background-color: #FFFFFF;
    border:1px solid #990000;
}

.hidden {
/*position:absolute;*/					
	visibility: hidden;
	padding:0;
	margin:0;
	font-size:1em;
}

/*
.slick-slide:focus {
  outline:#FF0000 solid 2px !important;
}*/

.slick-slide a:focus > img {
  outline:#000000 solid 2px !important;
}

.fslightbox-container a:focus {
	outline:#FFFFFF solid 2px !important;
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

/*
	Use in conjunction with .sr-only to only display content when it's focused.
	@note Useful for skip links 
	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
	@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
		@author Sylvain Pigeard
		@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
		clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}