/*@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700,300|Port+Lligat+Sans|Wire+One);*/
/***** Palette: My creation *****/
/* #009b77 Esmerald: Pantone Color of 2013; */
/* #e6e6e6 Light gray */
/* #f5f5f5 Lighter gray */
/* #ffffff White */
/* #9b9b9b Medium gray */
/* #4d4d4d Dark gray */
/* For Playground */
/* 'Lucida Sans Unicode', 'Lucida Grande' */
/* Oxygen / Port Lligat Sans */
@font-face {
  font-family: 'Playfair';
  src: url("../fonts/playfairdisplay-regular-webfont.eot");
  src: url("../fonts/playfairdisplay-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-regular-webfont.woff") format("woff"), url("../fonts/playfairdisplay-regular-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-regular-webfont.svg#playfair_displayregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PT Sans';
  src: url("../fonts/PTS55F-webfont.eot");
  src: url("../fonts/PTS55F-webfont.eot?iefix") format("eot"), url("../fonts/PTS55F-webfont.woff") format("woff"), url("../fonts/PTS55F-webfont.ttf") format("truetype"), url("../fonts/PTS55F-webfont.svg#webfont") format("svg"); }

/*@font-face {
    font-family: 'District Thin';
    src: url('../fonts/distproth-webfont.eot');
    src: url('../fonts/distproth-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/distproth-webfont.woff') format('woff'),
         url('../fonts/distproth-webfont.ttf') format('truetype'),
         url('../fonts/distproth-webfont.svg#district_prothin') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
body, html {
  background: white url("../img/bg_stone.png") scroll repeat 0 0;
  color: rgba(77, 77, 77, 0.9);
  font-family: PT Sans, sans-serif;
  font-size: 14px;
  line-height: 17px; }

a, img, fieldset {
  border: 0 none; }

a {
  -webkit-transition: all 800ms "easeInOutQuad";
  -o-transition: all 800ms "easeInOutQuad";
  -ms-transition: all 800ms "easeInOutQuad";
  -moz-transition: all 800ms "easeInOutQuad";
  transition: all 800ms "easeInOutQuad";
  font-family: PT Sans, sans-serif;
  position: relative; }
  a:active {
    color: rgba(155, 155, 155, 0.9); }
  a:link, a:visited {
    border-bottom: 1px dashed rgba(77, 77, 77, 0.9);
    color: #009b77;
    text-decoration: none; }
  a:hover {
    border-bottom-style: dotted;
    border-bottom-color: #009b77;
    color: #009b77; }
  a img {
    border: 0 none; }

button, a.button, input.button {
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  /*@include sonar_effect;*/
  background-color: transparent;
  border: 1px solid #009b77;
  box-shadow: none;
  font-size: 0.85em;
  color: #009b77;
  padding: 1em 1.5em;
  position: relative;
  text-transform: uppercase; }
  button:active, a.button:active, input.button:active {
    /*background-color: $clr4;
     *color: $clr3;*/ }
  button:active, button:focus, button:hover, a.button:active, a.button:focus, a.button:hover, input.button:active, input.button:focus, input.button:hover {
    background-color: #009b77;
    border-color: white;
    color: white; }
  button.disabled, a.button.disabled, input.button.disabled {
    background-color: transparent;
    border-color: rgba(155, 155, 155, 0.9);
    color: rgba(77, 77, 77, 0.9);
    opacity: 1; }
    button.disabled:hover, a.button.disabled:hover, input.button.disabled:hover {
      background-color: transparent;
      color: rgba(77, 77, 77, 0.9); }

footer {
  position: relative; }
  footer #copyright {
    background-color: rgba(230, 230, 230, 0.9);
    padding: 1em 0 3em; }
    footer #copyright .columns {
      font-size: 0.8em; }
  footer #social_media {
    background-color: rgba(245, 245, 245, 0.9);
    padding: 1em 0; }
    footer #social_media .columns:first-of-type a {
      border: 0 none;
      float: left;
      margin-right: 0.5em; }
    footer #social_media .columns:last-of-type {
      line-height: 48px;
      text-align: right; }
    footer #social_media .columns a {
      /*@include sonar_effect;*/ }

header {
  background: rgba(245, 245, 245, 0.9) url("../img/bg_header.jpg") fixed repeat 0 0;
  padding: 1em 0; }

h1, h2, h3 {
  color: rgba(77, 77, 77, 0.9);
  font-family: Playfair, serif;
  line-height: 1em;
  margin: 0.5em 0; }
  h1 b, h2 b, h3 b {
    color: #009b77; }

h1 {
  /*font-size: 3em;*/ }

h2 {
  font-family: PT Sans, sans-serif;
  font-weight: normal;
  /*font-size: 2em;*/ }

h3 {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
  /*font-size: 1em;*/
  padding-bottom: 0.3em; }

p {
  margin-bottom: 1em; }

#about, #contact {
  box-shadow: 0 1em 1em 0 rgba(255, 255, 255, 0.2);
  padding: 5em 0;
  text-align: center;
  z-index: 99; }
  #about .button, #contact .button {
    margin: 0.25em 0; }

#gallery li {
  padding: 1em; }
  #gallery li .bwWrapper {
    filter: alpha(opacity=0);
    opacity: 0; }
    #gallery li .bwWrapper img {
      margin-bottom: 0.5em;
      width: 100%; }
  #gallery li a {
    background: white url("../img/gifs/loader.gif") no-repeat scroll center center;
    display: block;
    position: relative; }
  #gallery li div {
    position: relative; }
    #gallery li div:first-of-type img {
      display: block;
      opacity: 1; }
    #gallery li div:first-of-type span {
      -webkit-border-radius: 50px 50px 50px 50px;
      -moz-border-radius: 50px 50px 50px 50px;
      border-radius: 50px 50px 50px 50px;
      -webkit-transition: all 800ms "easeInOutQuad";
      -o-transition: all 800ms "easeInOutQuad";
      -ms-transition: all 800ms "easeInOutQuad";
      -moz-transition: all 800ms "easeInOutQuad";
      transition: all 800ms "easeInOutQuad";
      background: rgba(0, 0, 0, 0.8) url("../img/icons/zoom.png") scroll no-repeat center center;
      display: none;
      height: 50px;
      opacity: 0.6;
      position: absolute;
      right: 8%;
      top: 10%;
      width: 50px; }
      #gallery li div:first-of-type span:hover {
        opacity: 1; }
  #gallery li p {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    color: white;
    display: none;
    left: 0;
    line-height: 1.2em;
    height: auto;
    margin: 0;
    padding: 0.5em;
    position: absolute;
    text-align: center;
    width: 100%; }

#top_nav {
  box-shadow: 0 1em 1em 0 rgba(255, 255, 255, 0.2);
  background-color: rgba(230, 230, 230, 0.9); }
  #top_nav nav.top-bar {
    background-color: transparent;
    min-height: 100px;
    line-height: 100px;
    margin-bottom: 0; }
    #top_nav nav.top-bar.expanded .title-area {
      background-color: rgba(230, 230, 230, 0.9); }
    #top_nav nav.top-bar.expanded .top-bar-section ul {
      background-color: rgba(245, 245, 245, 0.9); }
      #top_nav nav.top-bar.expanded .top-bar-section ul li {
        border-top: 1px solid rgba(155, 155, 155, 0.9); }
        #top_nav nav.top-bar.expanded .top-bar-section ul li.active {
          background-color: rgba(77, 77, 77, 0.9) !important; }
          #top_nav nav.top-bar.expanded .top-bar-section ul li.active a {
            color: white; }
        #top_nav nav.top-bar.expanded .top-bar-section ul li:hover {
          background-color: white; }
        #top_nav nav.top-bar.expanded .top-bar-section ul li a {
          line-height: 48px;
          padding: 0 1em;
          text-align: right; }
    #top_nav nav.top-bar .name {
      min-height: 100px; }
    #top_nav nav.top-bar .title-area img {
      height: 72px;
      margin-top: 14px; }
    #top_nav nav.top-bar .toggle-topbar.menu-icon a {
      color: rgba(155, 155, 155, 0.9); }
      #top_nav nav.top-bar .toggle-topbar.menu-icon a:hover {
        color: rgba(77, 77, 77, 0.9); }
        #top_nav nav.top-bar .toggle-topbar.menu-icon a:hover span {
          box-shadow: 0 10px 0 1px rgba(77, 77, 77, 0.9), 0 16px 0 1px rgba(77, 77, 77, 0.9), 0 22px 0 1px rgba(77, 77, 77, 0.9); }
      #top_nav nav.top-bar .toggle-topbar.menu-icon a span {
        box-shadow: 0 10px 0 1px rgba(155, 155, 155, 0.9), 0 16px 0 1px rgba(155, 155, 155, 0.9), 0 22px 0 1px rgba(155, 155, 155, 0.9); }
    #top_nav nav.top-bar .top-bar-section ul {
      background-color: transparent; }
      #top_nav nav.top-bar .top-bar-section ul li.active a {
        color: #009b77;
        font-weight: bold; }
      #top_nav nav.top-bar .top-bar-section ul li a {
        -webkit-transition: all 800ms "easeInOutQuad";
        -o-transition: all 800ms "easeInOutQuad";
        -ms-transition: all 800ms "easeInOutQuad";
        -moz-transition: all 800ms "easeInOutQuad";
        transition: all 800ms "easeInOutQuad";
        background-color: transparent;
        color: rgba(155, 155, 155, 0.9);
        font-weight: normal;
        line-height: 100px; }
        #top_nav nav.top-bar .top-bar-section ul li a:hover {
          color: rgba(77, 77, 77, 0.9); }
  #top_nav nav a:link, #top_nav nav a:visited {
    border: 0 none; }

[class*='block-grid-'] {
  text-align: center; }

#about_page > section, #home > section, #portfolio > section, #workproduct > section, #contact_page > section {
  padding: 5em 0; }

/***** About *****/
#about_page #my_skills {
  background-color: rgba(230, 230, 230, 0.9); }
  #about_page #my_skills > div {
    /* class=row */ }
    #about_page #my_skills > div:nth-of-type(even) {
      background-color: rgba(230, 230, 230, 0.9); }
      #about_page #my_skills > div:nth-of-type(even) > div {
        /* class=columns */
        padding: 2em; }
        #about_page #my_skills > div:nth-of-type(even) > div:nth-of-type(odd) {
          background-color: rgba(245, 245, 245, 0.9); }
    #about_page #my_skills > div:nth-of-type(odd) {
      background-color: rgba(245, 245, 245, 0.9); }
      #about_page #my_skills > div:nth-of-type(odd) > div {
        /* class=columns */
        padding: 2em; }
        #about_page #my_skills > div:nth-of-type(odd) > div:nth-of-type(odd) {
          background-color: rgba(230, 230, 230, 0.9); }
    #about_page #my_skills > div:nth-of-type(1) {
      background-color: transparent !important; }
      #about_page #my_skills > div:nth-of-type(1) > div {
        background-color: transparent !important;
        padding: 0; }
  #about_page #my_skills h1 {
    margin-top: 0;
    text-align: center; }
  #about_page #my_skills h3 {
    min-height: 2em;
    margin: 0 0 1em; }
  #about_page #my_skills li {
    padding: 1em; }
    #about_page #my_skills li div {
      height: 48px;
      margin: 0 auto 5px;
      width: 48px; }
      #about_page #my_skills li div[class*='fi-']:before {
        display: block; }
#about_page #my_style {
  background-color: rgba(245, 245, 245, 0.9); }
  #about_page #my_style h1 {
    margin: 0 0 1em;
    text-align: center; }
  #about_page #my_style h3 {
    padding-top: 0.5em; }
  #about_page #my_style .columns {
    position: relative;
    text-align: center; }
    #about_page #my_style .columns#responsive > div {
      min-height: 48px;
      position: relative;
      width: 100px; }
      #about_page #my_style .columns#responsive > div div {
        bottom: 0;
        left: 0%;
        position: absolute; }
        #about_page #my_style .columns#responsive > div div:nth-of-type(2) {
          bottom: 4px;
          left: 56%; }
        #about_page #my_style .columns#responsive > div div:nth-of-type(3) {
          bottom: 2px;
          left: auto;
          right: 0; }
    #about_page #my_style .columns > div {
      margin: 0 auto 5px; }

/***** END About *****/
/***** Homepage *****/
#home #banner {
  background: rgba(245, 245, 245, 0.9) url("../img/bg_header.jpg") fixed repeat 0 0;
  background-color: rgba(245, 245, 245, 0.9);
  opacity: 0.9;
  /* required to see shadow of top_nav */
  text-align: center; }
  #home #banner h1 {
    margin: 0 0 0.2em; }
    #home #banner h1 b {
      font-size: 1.4em;
      text-transform: capitalize; }
  #home #banner h2 b {
    font-size: 1.4em;
    font-weight: normal;
    text-transform: lowercase; }
#home #work {
  background-color: rgba(230, 230, 230, 0.9);
  z-index: 9; }
  #home #work > div:nth-of-type(2) a {
    border: 0 none; }
  #home #work > div:nth-of-type(3) {
    text-align: center; }
  #home #work h1 {
    margin-top: 0;
    text-align: center; }
  #home #work ul {
    margin-bottom: 1em; }

/***** END Homepage *****/
/***** Portfolio *****/
#portfolio #about {
  background-color: rgba(230, 230, 230, 0.9);
  text-align: left; }
  #portfolio #about h1 {
    margin-top: 0; }
#portfolio #my_portfolio {
  background-color: rgba(245, 245, 245, 0.9); }

/***** END Portfolio *****/
/***** Workproduct *****/
#workproduct #back {
  background-color: rgba(245, 245, 245, 0.9);
  padding: 2em 0 1em; }
  #workproduct #back .columns {
    text-align: center; }
    #workproduct #back .columns .button {
      margin: 0; }
#workproduct header {
  background: transparent none;
  position: relative; }
  #workproduct header div.columns:first-of-type {
    text-align: left !important; }
  #workproduct header div.columns:last-of-type {
    text-align: right; }
    #workproduct header div.columns:last-of-type .button {
      margin-top: 2em; }
  #workproduct header h1 {
    margin-bottom: 0.1em; }
  #workproduct header h2 {
    color: rgba(155, 155, 155, 0.9);
    margin: 0; }
  #workproduct header i {
    font-size: 0.7em;
    font-style: normal; }
#workproduct #info {
  padding: 5em 0; }
  #workproduct #info .columns {
    padding-bottom: 2em;
    padding-top: 2em; }
    #workproduct #info .columns:first-of-type {
      -webkit-border-radius: 20px 20px 20px 20px;
      -moz-border-radius: 20px 20px 20px 20px;
      border-radius: 20px 20px 20px 20px;
      background-color: rgba(230, 230, 230, 0.9);
      padding: 2em 2em 1em; }
      #workproduct #info .columns:first-of-type ul {
        margin: 0; }
        #workproduct #info .columns:first-of-type ul li {
          padding-left: 1.5em;
          position: relative;
          text-align: left; }
          #workproduct #info .columns:first-of-type ul li span {
            left: 0;
            position: absolute; }
    #workproduct #info .columns:nth-of-type(2) {
      /* Description */
      padding-right: 2em; }
    #workproduct #info .columns h2, #workproduct #info .columns h3 {
      margin: 0 0 0.5em; }
#workproduct #screenshots {
  background-color: rgba(230, 230, 230, 0.9);
  padding: 1em 0; }
  #workproduct #screenshots .columns {
    text-align: center; }
    #workproduct #screenshots .columns h3 {
      padding-top: 1em; }
    #workproduct #screenshots .columns img {
      margin-bottom: 2em; }
#workproduct #topbanner {
  background: rgba(245, 245, 245, 0.9) url("../img/bg_header.jpg") fixed repeat 0 0;
  height: 300px;
  padding-top: 80px;
  text-align: center; }

/***** END Workproduct *****/
/***** Contact *****/
#contact_page #about {
  background-color: rgba(245, 245, 245, 0.9);
  text-align: left; }
#contact_page #form {
  padding: 2em 0; }
  #contact_page #form #cform fieldset {
    padding: 0;
    margin: 0; }
    #contact_page #form #cform fieldset legend {
      display: none; }
    #contact_page #form #cform fieldset input[type='submit'].button {
      /*@include sonar_effect;*/
      margin-top: 0.5em; }
    #contact_page #form #cform fieldset input[type='email'], #contact_page #form #cform fieldset input[type='text'], #contact_page #form #cform fieldset textarea {
      font-size: 1em; }
    #contact_page #form #cform fieldset textarea {
      font-size: 1em;
      height: 7em; }
#contact_page #socialmedia a {
  border: 0 none;
  float: right;
  margin: 0 0.25em; }

/***** END Contact *****/
/***** For Abide Errors *****/
[data-abide] .error small.error, [data-abide] span.error, [data-abide] small.error {
  background: none repeat scroll 0 0 #C60F13;
  color: #FFFFFF;
  display: block;
  font-size: 0.75em;
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 0;
  padding: 0.375em 0.25em; }

[data-abide] span.error, [data-abide] small.error {
  display: none; }

span.error, small.error {
  background: none repeat scroll 0 0 #C60F13;
  color: #FFFFFF;
  display: block;
  font-size: 0.75em;
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: -1.3125em;
  padding: 0.375em 0.25em; }

.error input, .error textarea, .error select {
  background-color: rgba(198, 15, 19, 0.1);
  border-color: #C60F13;
  margin-bottom: 0; }

.error input:focus, .error textarea:focus, .error select:focus {
  background: none repeat scroll 0 0 #FAFAFA;
  border-color: #999999; }

.error label, .error label.error {
  color: #C60F13; }

.error small.error {
  background: none repeat scroll 0 0 #C60F13;
  color: #FFFFFF;
  display: block;
  font-size: 0.75em;
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: -1.3125em;
  padding: 0.375em 0.25em; }

.error span.error-message {
  display: block; }

input.error, textarea.error {
  background-color: rgba(198, 15, 19, 0.1);
  border-color: #C60F13; }

input.error:focus, textarea.error:focus {
  background: none repeat scroll 0 0 #FAFAFA;
  border-color: #999999; }

.error select {
  background-color: rgba(198, 15, 19, 0.1);
  border-color: #C60F13; }

.error select:focus {
  background: none repeat scroll 0 0 #FAFAFA;
  border-color: #999999; }

label.error {
  color: #C60F13; }

/***** END For Abide Errors *****/
/***** For Black and White JS *****/
.bwWrapper {
  display: block;
  position: relative; }

/***** END For Black and White JS *****/
/***** For Foundation Fonts *****/
[class*='fi-'] {
  -webkit-transition: all 800ms "easeInOutQuad";
  -o-transition: all 800ms "easeInOutQuad";
  -ms-transition: all 800ms "easeInOutQuad";
  -moz-transition: all 800ms "easeInOutQuad";
  transition: all 800ms "easeInOutQuad"; }

.fi-annotate:hover {
  color: #009b77; }

.fi-comments:hover {
  color: #933; }

.fi-css3:hover {
  color: #1572B6; }

.fi-eye:hover {
  color: #6c9; }

.fi-foundation:hover {
  color: #2ba6cb; }

.fi-html5:hover {
  color: #e44d26; }

.fi-info:hover {
  color: #000; }

.fi-pencil:hover {
  color: #fc3; }

.fi-social-facebook:hover {
  color: #3b5998; }

.fi-social-google-plus:hover {
  color: #dd4a3a; }

.fi-social-twitter:hover {
  color: #00aced; }

.fi-universal-access:hover {
  color: #339; }

.fi-wrench:hover {
  color: #ccc; }

.size-16 {
  font-size: 16px; }

.size-18 {
  font-size: 18px; }

.size-24 {
  font-size: 24px; }

.size-36 {
  font-size: 36px; }

.size-48 {
  font-size: 48px; }

/***** END For Foundation Fonts *****/
/***** Small screens *****/
@media only screen and (max-width: 480px) {
  #about_page > section, #home > section, #portfolio > section, #workproduct > section, #contact_page > section {
    padding: 2em 0; }

  #about_page #bio h2 b {
    display: block; }

  #gallery li div:first-of-type span {
    display: none; }

  #top_nav nav.top-bar {
    min-height: 50px; }
    #top_nav nav.top-bar .name {
      min-height: 50px; }
    #top_nav nav.top-bar .title-area img {
      height: 40px;
      margin-top: 4px; }

  #workproduct #topbanner {
    display: none; } }
/***** Small & Medium screens *****/
@media only screen and (max-width: 768px) {
  #about_page #my_skills .row {
    /* class=row */ }
    #about_page #my_skills .row .columns {
      /* class=columns */
      background-color: rgba(230, 230, 230, 0.9); }
      #about_page #my_skills .row .columns:nth-of-type(even) {
        background-color: rgba(245, 245, 245, 0.9); }
      #about_page #my_skills .row .columns:nth-of-type(1) {
        background-color: rgba(230, 230, 230, 0.9); }
  #about_page #my_style .row:last-of-type .columns {
    margin-bottom: 1em; }

  /*.bwWrapper {
   *	canvas {
   *		display: none !important;
   *	}
  }*/
  footer #social_media .columns {
    text-align: left !important; }

  #workproduct header {
    position: relative; }
    #workproduct header div.columns:last-of-type {
      text-align: left; }
  #workproduct #info .columns:first-of-type {
    padding-left: 1em;
    padding-right: 1em; }
    #workproduct #info .columns:first-of-type ul li {
      padding-right: 2em; }
  #workproduct #topbanner {
    height: auto;
    padding: 1em 0; } }
/***** END Small & Medium screens *****/
/***** Large screens *****/
@media only screen and (min-width: 768px) {
  h2 {
    font-size: 2.1em; }

  h3 {
    font-size: 1.5em; }

  #workproduct #topbanner {
    height: 300px; } }
/***** END Large screens *****/
/***** sonarEffect animation *****/
@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0.3; }

  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3); }

  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1.5);
    opacity: 0; } }

@keyframes sonarEffect {
  0% {
    opacity: 0.3; }

  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3); }

  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.5);
    opacity: 0; } }

/***** sonarEffect animation *****/
/***** spinAround animation *****/
@-webkit-keyframes spinAround {
  from {
    -webkit-transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(360deg); } }

@keyframes spinAround {
  from {
    transform: rotate(0deg); }

  to {
    transform: rotate(360deg); } }

/***** END spinAround animation *****/