/*$bg-color:#475841;
$nav-color:#3F403F;
$footer-color:#9FB8AD;
$main-font-color:#3F403F;
$btn-font-color:#CED0CE;
$accent-color:#9FB8AD;
$heading-font-color:#575841;*/
/*#about{
	grid-area: about;
}

#work{
	grid-area: work;
}
*/
#wrapper-body {
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); }

#about {
  grid-column: span 3;
  grid-row: 1/2; }

#work {
  grid-column: span 3;
  grid-row: 2/3; }

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
  color: #f26419;
  font-size: initial; }

#slider {
  width: 100%;
  max-width: 600px;
  margin: 0 auto; }

.navToggle {
  z-index: 999;
  order: 1;
  padding: 15px;
  display: block;
  width: 30px;
  height: 35px;
  margin: 5px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  cursor: pointer; }
  @media (min-width: 475px) {
    .navToggle {
      display: none; } }

.navToggle span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #f26419;
  /*border-radius: 25px;*/
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out; }

.navToggle.open span {
  background-color: #86bbd8; }

/* Icon 3 */
.navToggle span:nth-child(1) {
  top: 0px; }

.navToggle span:nth-child(2), .navToggle span:nth-child(3) {
  top: 10px; }

.navToggle span:nth-child(4) {
  top: 20px; }

.navToggle.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%; }

/*#navbarLinks.open{
  height:300px;
}
*/
.navToggle.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }

.navToggle.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.navToggle.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%; }

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 25px; }

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 25px; }

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 25px; }

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 25px; }

:focus {
  outline: none;
  outline-color: none;
  outline-style: none;
  outline-width: 0; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: 1px solid #86bbd8;
  background: #33404F;
  font-weight: normal;
  color: #555555; }

#photoBlock {
  margin: 0 auto;
  data-height: 100%; }

.fotorama__wrap--slide .fotorama__stage__frame {
  background-color: #0f0f0f; }

* {
  box-sizing: border-box; }

body {
  background-color: #33404F;
  font-family: "Comfortaa", cursive;
  font-size: 10px; }

h1, h2 {
  font-family: "Arvo", serif;
  letter-spacing: .35rem;
  font-weight: normal;
  text-transform: lowercase; }

h1 {
  font-size: 2.5rem; }

h2 {
  font-size: 1.85rem; }

p {
  font-size: 1rem; }

.sectionTitle {
  color: #f6ae2d;
  /*background-color: $title-bg-color;*/
  text-align: center;
  padding: 3rem 0 1rem;
  margin: 2rem 1rem 1rem;
  /*	border-top: .05rem solid $accent-color3;*/
  border-bottom: 0.05rem solid #86bbd8; }

hr {
  margin: 200px 0 50px; }

.overlayTitle {
  font-size: 8rem;
  outline-color: invert;
  color: #f6ae2d;
  text-align: center;
  padding: 0;
  margin: 0;
  /*	border-top: .05rem solid $accent-color3;*/ }

.sectionSubHeading {
  color: #86bbd8;
  margin: 1rem;
  text-align: center; }

.sectionSubTitle {
  color: #f6ae2d;
  /*background-color: $title-bg-color;*/
  text-align: center;
  padding: 3rem 0 1rem;
  margin: 2rem 1rem 1rem; }

.heading-description {
  text-align: center;
  font-size: .85rem;
  font-family: "Comfortaa", cursive;
  letter-spacing: initial;
  line-height: 1.5;
  font-weight: normal;
  text-transform: none;
  color: #86bbd8; }

.big-text {
  font-size: 1.25rem;
  margin-bottom: 10px;
  display: inline-block; }
  @media (min-width: 768px) {
    .big-text {
      font-size: 1.75rem; } }

.liSeperator {
  border-left: none;
  width: 100%;
  height: 1px; }
  .liSeperator hr {
    display: block;
    width: 80%;
    border: solid 1px #86bbd8; }
  @media (min-width: 475px) {
    .liSeperator {
      width: 2px;
      height: 25px;
      border-left: solid 1px #86bbd8; }
      .liSeperator hr {
        display: none; } }

.code {
  font-family: monospace;
  background-color: rgba(230, 232, 230, 0.3);
  border-radius: 25px;
  padding: 0 .15rem; }
  @media (min-width: 768px) {
    .code {
      padding: .15rem .35rem;
      border: solid 0.15rem #f6ae2d; } }

.subPage {
  padding: 0 20px;
  color: #E6E8E6;
  line-height: 1.5rem;
  /*@include big-text;*/ }
  @media (min-width: 768px) {
    .subPage {
      font-size: 1rem;
      padding-bottom: 1rem;
      line-height: 2rem; } }
  .subPage .titleImage {
    display: block;
    margin: 1rem auto;
    max-width: 300px; }
  .subPage img {
    width: 50%; }
  .subPage #patsyColorChangeDiv {
    background-color: black;
    width: 100%;
    max-width: 500px;
    height: 400px;
    margin: 0 auto; }
    .subPage #patsyColorChangeDiv img {
      display: block;
      height: 100%;
      margin: 0 auto; }
  .subPage .tutorialSteps img {
    margin: 0 auto;
    padding: 5px; }
  .subPage .captionBox {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 600px; }
    .subPage .captionBox p {
      margin: 0 auto;
      width: 60%;
      padding: 0 1rem;
      /*font-size: .85rem;*/
      text-align: center; }
  .subPage li {
    margin-top: 2rem;
    background-color: #353535;
    padding: 1rem 0 1rem .5rem;
    border-radius: .5rem; }
  .subPage li img {
    width: 90%;
    display: block;
    margin: 1rem 0; }
    @media (min-width: 475px) {
      .subPage li img {
        width: initial;
        margin: .5rem 0; } }

/*.stickyNav {
  position: fixed;
  top: 0px;
  max-height: 70px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  background: none;
  overflow: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  top: -100px;
  padding-bottom: 6px;
  font-family: $heading-font;
}

.stickyNavPanel {
  width: 100%;
  
  margin: 0 auto;
  padding:0 50px;
  position: relative;
  padding: 0 2%;
}



.sticky {
  background-color: $nav-color;
  opacity: 1;
  top: 0px;
  border-bottom: $accent-color3 1px solid;
}

.logo {
  width: 50px;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
  padding:5px;
}
@media only screen and (max-width: 766px) {
  .logo {
    float: none;
  }
}*/
/*
nav {
  float: right;
  width: 60%;
}
@media only screen and (max-width: 766px) {
  nav {
    width: 100%;
  }
}*/
/*@media only screen and (max-width: 766px) {
  nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
  }
}*/
/*nav ul li {
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5;
}
@media only screen and (max-width: 766px) {
  nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }
}*/
/*nav ul a {
  
  text-decoration: none;
  text-transform: lowercase;
  font-size: 12px;

}*/
/*
.menuOpen-sticky{
  position: absolute;
  right: 22px;
  top: 0;
}
*/
/*@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}
*/
/*#brand-logo-div{
	display: flex;
	justify-content: center;
	align-items: center;
	height: $standard-height;
	background-color: $nav-color;
	@media(min-width: $bp-medium){
		height: $standard-height-md;
	}
}

#brand-logo{
	height: $brand-height;
	width: 90%;
}*/
/*#nav - containing grid item
#navbarLinks - div containing ul for nav
.navLink - individual li containing link for nav

*/
/*.sticky{
	display: none;
	position: fixed;
	top:0;
	left:0;
	z-index: 11111;
	height: 5rem;
}*/
/*#navbarLinks{
	display: hidden;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: initial;

	@media(min-width: $bp-xsmall){
		display: flex;
		height: $standard-height;
	}
	

	ul{
		display: none;

		@media(min-width: $bp-xsmall){
			display: flex;
			width:100%;
			flex-direction: row;
			justify-content: space-evenly;
			list-style-type: none;
			
			padding: 0;
		}
	}

}*/
/*#navbarLinks-mobile{
	ul{
		display: none;
		flex-direction: column;
		list-style-type: none;
		margin:0 0 1rem 0;
		padding: 0;
		li{
			padding: .5rem 0;
		}
		@media(min-width: $bp-xsmall){
			display: none;
		}
	}
	@media(min-width: $bp-xsmall){
		display: none;
	}
}*/
.navBrandPanel {
  height: initial;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  -webkit-transition: all 1s;
  transition: all 1s; }
  @media (min-width: 970px) {
    .navBrandPanel {
      height: 100px;
      flex-direction: row; } }

.brandDiv {
  order: 0; }

.brand {
  height: 70px;
  margin: 10px;
  max-width: 90%; }
  @media (min-width: 970px) {
    .brand {
      margin: 30px; } }

.miniBrand {
  height: 35px;
  float: left;
  padding-left: 30px; }
  @media (min-width: 475px) {
    .miniBrand {
      height: 40px;
      padding: 10px 0 0 30px; } }

.nav {
  display: none;
  z-index: 1000;
  order: 2;
  flex-grow: 2;
  width: 100%;
  background-color: #33404F; }
  @media (min-width: 475px) {
    .nav {
      display: flex;
      justify-content: flex-end; } }

.nav ul {
  flex-direction: column;
  width: 100%;
  padding: 0;
  list-style-type: none; }
  @media (min-width: 475px) {
    .nav ul {
      display: flex;
      flex-direction: row;
      justify-content: space-around; } }
  @media (min-width: 970px) {
    .nav ul {
      width: 90%; } }
  @media (min-width: 1200px) {
    .nav ul {
      width: 80%; } }

.navLink {
  text-align: center;
  align-self: center;
  padding-bottom: 20px; }
  .navLink a {
    text-decoration: none;
    font: 1.3rem "Arvo", serif;
    text-transform: lowercase; }
  .navLink a:visited, .navLink a:link {
    color: #f26419;
    text-decoration: none; }
  .navLink a:hover, .navLink a:active {
    color: #f6ae2d;
    transition: .5s;
    text-decoration: none; }
  @media (min-width: 475px) {
    .navLink {
      align-self: flex-end; }
      .navLink a {
        font-size: .8rem;
        padding: 5px; } }
  @media (min-width: 768px) {
    .navLink a {
      font-size: 1rem; } }
  @media (min-width: 970px) {
    .navLink {
      /*margin-top: 80px;*/ }
      .navLink a {
        font-size: 1.3rem; } }

.sticky {
  display: hidden;
  opacity: 1;
  top: 0px; }
  .sticky ul {
    max-width: 900px; }
  @media (min-width: 475px) {
    .sticky {
      display: flex; } }

.navBrandPanelSticky {
  /*display: flex;*/
  flex-direction: row;
  background-color: #33404F;
  position: fixed;
  /*max-height: 150px;*/
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  /*overflow: hidden;*/
  -webkit-transition: all 1s;
  transition: all 1s;
  padding-bottom: 6px;
  border-bottom: #86bbd8 1px solid; }

.navBrandPanelSticky.unstuck {
  top: -100px;
  opacity: 0;
  background: none;
  -webkit-transition: all .3s;
  transition: all .3s; }

.navBrandPanelSticky.brandDiv.sticky {
  position: fixed;
  top: 20px; }

.navBrandPanel.open {
  height: 270px;
  -webkit-transition: all 1s;
  transition: all 1s; }

.navBrandPanelSticky.sticky.open {
  flex-direction: column; }

/*.navBrandPanelSticky.open{
	height:470px;
}*/
@media (min-width: 475px) {
  .navBrandPanelSticky .navLink a {
    font-size: .8rem;
    /*padding:2px;*/ } }
@media (min-width: 768px) {
  .navBrandPanelSticky .navLink a {
    font-size: 1rem; } }
@media (min-width: 970px) {
  .navBrandPanelSticky .navLink {
    /*margin-top: 80px;*/ }
    .navBrandPanelSticky .navLink a {
      font-size: 1.3rem; } }

#me {
  width: 250px;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: solid #f26419 3px; }
  @media (min-width: 970px) {
    #me {
      float: right;
      margin: 0 20px 0 50px; } }

#aboutText {
  margin-bottom: 100px; }

#about p {
  padding: 0 20px;
  color: #E6E8E6;
  line-height: 1.5rem;
  font-size: .75rem; }
  @media (min-width: 768px) {
    #about p {
      font-size: 1rem;
      padding-bottom: 1rem;
      line-height: 2rem; } }
  @media (min-width: 768px) {
    #about p {
      font-size: 1rem; } }

#skillBlock {
  /*@include skillBlock-border;*/
  margin: 0 20px; }
  #skillBlock ul {
    font-size: 1.25rem;
    list-style-type: none;
    width: 100%;
    margin: 25px 0;
    padding: 0; }
    #skillBlock ul li {
      margin: 2px 0; }
      @media (min-width: 475px) {
        #skillBlock ul li {
          margin: 10px 0; } }

.skillIcon {
  display: inline-block;
  font-size: 1rem;
  color: #E6E8E6;
  width: 25px;
  text-align: center; }
  @media (min-width: 475px) {
    .skillIcon {
      width: 40px;
      font-size: 2rem; } }
  .skillIcon img {
    margin: 0 auto;
    width: 20px; }
    @media (min-width: 475px) {
      .skillIcon img {
        width: 30px; } }

.skillLevelDiv {
  width: 75%;
  display: inline-block;
  background-color: #86bbd8;
  margin: 5px;
  border-radius: 25px;
  line-height: 1;
  font-size: .75rem; }
  @media (min-width: 475px) {
    .skillLevelDiv {
      font-size: 1rem; } }

.skillLevel {
  background-color: #f6ae2d;
  display: inline-block;
  font-size: .75rem;
  font-weight: bold;
  line-height: 1;
  padding: 3px 0 0 6px;
  border-radius: 25px;
  /*border-bottom-left-radius: 25px;*/
  border-right: solid 5px #f26419; }
  @media (min-width: 475px) {
    .skillLevel {
      padding: 4px 0 2px 10px; } }

.siteInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
  border-bottom: 1px solid rgba(230, 232, 230, 0.3); }
  @media (min-width: 768px) {
    .siteInfo {
      flex-direction: row; } }

#web {
  padding: 15px; }
  #web a:visited, #web a:link {
    color: #f26419;
    text-decoration: none; }
  #web a:hover, #web a:active {
    color: #f6ae2d;
    transition: .5s;
    text-decoration: none; }

.siteTitle {
  font: 1.5rem "Arvo", serif;
  color: #f6ae2d;
  margin: 0;
  text-align: center; }

.siteImg {
  max-width: 200px; }
  @media (min-width: 475px) {
    .siteImg {
      max-width: 400px; } }
  @media (min-width: 970px) {
    .siteImg {
      max-width: 600px; } }

.siteDescription {
  font: 0.75rem "Comfortaa", cursive;
  line-height: 1.75;
  color: #E6E8E6;
  margin: 0 1rem; }
  .siteDescription a:visited, .siteDescription a:link {
    color: #f26419;
    text-decoration: none; }
  .siteDescription a:hover, .siteDescription a:active {
    color: #f6ae2d;
    transition: .5s;
    text-decoration: none; }
  @media (min-width: 475px) {
    .siteDescription {
      font-size: .85rem; } }

.languageIcons {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  /*width:100%;*/
  font-size: 2rem;
  color: #E6E8E6; }
  @media (min-width: 768px) {
    .languageIcons {
      justify-content: center; } }
  .languageIcons li {
    display: block;
    margin: 5px .2rem;
    padding: 10px 0;
    align-self: center;
    line-height: 0; }
    @media (min-width: 475px) {
      .languageIcons li {
        margin: 0 .5rem; } }
  .languageIcons img {
    width: 30px; }
  .languageIcons .languageIconDescription {
    padding-top: 15px;
    display: block;
    font-size: .7rem;
    text-align: center; }

#contact p {
  padding: 0 20px;
  color: #E6E8E6;
  line-height: 1.5rem; }
  @media (min-width: 768px) {
    #contact p {
      font-size: 1rem;
      padding-bottom: 1rem;
      line-height: 2rem; } }

.contact-title {
  font-size: 1rem;
  display: block; }

#contact p {
  padding: 0 20px;
  color: #E6E8E6;
  line-height: 1.5rem; }
  @media (min-width: 768px) {
    #contact p {
      font-size: 1rem;
      padding-bottom: 1rem;
      line-height: 2rem; } }
  #contact p a:visited, #contact p a:link {
    color: #f26419;
    text-decoration: none; }
  #contact p a:hover, #contact p a:active {
    color: #f6ae2d;
    transition: .5s;
    text-decoration: none; }
#contact #contactListDiv {
  display: flex;
  justify-content: center; }
#contact #contactList {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style-type: none;
  padding: 0;
  width: 50%; }
  @media (min-width: 1200px) {
    #contact #contactList {
      width: 100%; } }
  #contact #contactList li {
    display: inline;
    font-size: 2.5rem;
    text-align: center;
    margin: 10px;
    /*.contactDesc{
    	font-size: .6rem;
    }*/ }
    #contact #contactList li a:visited, #contact #contactList li a:link {
      color: #f26419;
      text-decoration: none; }
    #contact #contactList li a:hover, #contact #contactList li a:active {
      color: #f6ae2d;
      transition: .5s;
      text-decoration: none; }
    @media (min-width: 475px) {
      #contact #contactList li {
        font-size: 2.75rem;
        margin: 15px; } }
    @media (min-width: 768px) {
      #contact #contactList li {
        margin: 20px; } }
    @media (min-width: 970px) {
      #contact #contactList li {
        font-size: 3.5rem;
        margin: 30px; } }

#footer {
  background-color: #242325;
  padding-bottom: 150px;
  margin-top: 150px; }
  #footer p {
    color: #E6E8E6;
    text-align: center; }
    #footer p a:visited, #footer p a:link {
      color: #f26419;
      text-decoration: none; }
    #footer p a:hover, #footer p a:active {
      color: #f6ae2d;
      transition: .5s;
      text-decoration: none; }
  #footer p {
    padding: 0 20px;
    color: #E6E8E6;
    line-height: 1.5rem; }
    @media (min-width: 768px) {
      #footer p {
        font-size: 1rem;
        padding-bottom: 1rem;
        line-height: 2rem; } }
  #footer #contactListDiv {
    display: flex;
    justify-content: center; }
  #footer #contactList {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style-type: none;
    padding: 0;
    width: 50%; }
    @media (min-width: 1200px) {
      #footer #contactList {
        width: 100%; } }
    #footer #contactList li {
      display: inline;
      font-size: 2.5rem;
      text-align: center;
      margin: 10px;
      /*.contactDesc{
      	font-size: .6rem;
      }*/ }
      #footer #contactList li a:visited, #footer #contactList li a:link {
        color: #f26419;
        text-decoration: none; }
      #footer #contactList li a:hover, #footer #contactList li a:active {
        color: #f6ae2d;
        transition: .5s;
        text-decoration: none; }
      @media (min-width: 475px) {
        #footer #contactList li {
          font-size: 2.75rem;
          margin: 15px; } }
      @media (min-width: 768px) {
        #footer #contactList li {
          margin: 20px; } }
      @media (min-width: 970px) {
        #footer #contactList li {
          font-size: 3.5rem;
          margin: 30px; } }

/*# sourceMappingURL=style.css.map */