/* Setup
*********************************************************************************************/
html {
  font-size: 16px;
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  font-family: 'Lora', serif;
  font-size: 62.5%;
  background: url("../images/natural-paper.png");
  /* 1em = 32px */ }

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

a {
  color: inherit; }

.bold {
  font-weight: bold; }

.parent_of_vertical_centered {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.vertical_centered {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%); }

/*@font-face {
  font-family: 'ArchitectsDaughter';
  src: url('../fonts/ArchitectsDaughter.ttf');
}


.ad-font {
  font-family: 'ArchitectsDaughter';
}

@font-face {

  //font-family: 'Amethysta-Regular';
  //src: url('../fonts/Amethysta-Regular.ttf');
}*/
/*.ar-font {
  font-family: 'Lora', serif;
  //font-family: 'Amethysta-Regular';
}*/
/* Sections
*********************************************************************************************/
section {
  width: 100%;
  position: relative;
  overflow: hidden; }

footer p {
  font-family: 'Lora', serif;
  font-size: 1.5em;
  text-align: center;
  color: #6DD3CE; }

/* Clearfix
*********************************************************************************************/
.group {
  zoom: 1;
  /* IE6&7 */ }
  .group:before {
    content: "";
    display: table; }
  .group:after {
    content: "";
    display: table;
    clear: both; }

/* Typography
*********************************************************************************************/
a {
  text-decoration: none;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s; }

p a, strong {
  font-weight: 700; }

/*p a {
    border-bottom: 1px solid;
}*/
/* Header
*********************************************************************************************/
#header {
  width: 100%;
  height: 70px;
  line-height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  /* overflow: hidden; */
  z-index: 10; }
  #header #logo {
    background: top left no-repeat;
    background-size: 60px;
    width: 60px;
    height: 120px;
    position: absolute;
    top: 20px;
    left: 40px; }

/* Header Logo
*********************************************************************************************/
.top #header #logo, .services #header #logo {
  background-image: url("../images/logo.png"); }

.about #header #logo, .contact #header #logo {
  background-image: url("../images/logo-dark.png"); }

/* Header Menu
*********************************************************************************************/
#header ul {
  position: absolute;
  top: 0;
  right: 40px;
  background: url("../images/natural-paper.png");
  background-color: white;
  padding-bottom: 16px;
  opacity: 0.8; }
  #header ul li {
    float: left;
    position: relative;
    margin-left: 20px; }
    #header ul li a {
      float: left;
      position: relative;
      font-family: 'Lora', serif;
      font-size: 2.5em;
      -webkit-transition-duration: 0.25s;
              transition-duration: 0.25s;
      color: #F28179; }
    #header ul li.current a::before, #header ul li a:hover::before {
      border-radius: 50%;
      position: absolute;
      width: 12px;
      height: 12px;
      top: -6px;
      left: 50%;
      margin-left: -6px;
      content: '';
      background-color: #B4EBCA; }
    #header ul li a:hover {
      color: #B4EBCA; }

.top #header ul li {
  /*&.skills a {
    color: $skill_color;
  }
  &.work a {
    color: $work_color;
  }
  &.projects a {
    color: $projects_color;
  }
  &.activities a {
    color: $activities_color;
  }
  &.resume a {
    color: $resume_color;
  }*/ }
  .top #header ul li a {
    height: 50px; }

#ferromenu-controller-0 {
  visibility: hidden; }

#nav {
  /*.menu-icon-top {
    color: #137565;
  }
  .menu-icon-skills {
    color: #ff823c;
  }
  .menu-icon-work {
    color: #3c96c8;
  }
  .menu-icon-projects {
    color: #f03c96;
  }
  .menu-icon-activities {
    color: #78e66e;
  }
  .menu-icon-resume {
    color: #FF7C72;
  }*/ }
  #nav .icon-sh {
    background-image: url(../images/logo.png); }

.top #header ul li.current a::before, .top #header ul li a:hover::before {
  border-color: #ffffff; }

.services #header ul li.current a::before, .services #header ul li a:hover::before {
  border-color: #ffffff; }

.about #header ul li a, .contact #header ul li a {
  color: rgba(0, 0, 0, 0.65); }

.about #header ul li.current a::before, .about #header ul li a:hover::before {
  background-color: rgba(0, 0, 0, 0.65); }

.contact #header ul li.current a::before, .contact #header ul li a:hover::before {
  background-color: rgba(0, 0, 0, 0.65); }

li .desktop {
  position: fixed !important; }

/* Top
*********************************************************************************************/
#top {
  width: 100%;
  height: 100%; }
  #top::before, #top::after {
    width: 100%;
    height: 100%; }
  #top::before, #top::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    content: ''; }
  #top::before {
    background-size: cover; }
  #top .top {
    text-align: center;
    position: absolute;
    z-index: 1;
    width: 100%; }
  #top h1 {
    font-family: 'Lora', serif;
    font-weight: bold;
    font-size: 10em;
    line-height: 100px;
    color: #FF491A;
    margin-bottom: 27px; }
  #top p {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 28px;
    line-height: 10px;
    color: #FF491A; }
  #top span.icons {
    font-size: 40px;
    position: absolute;
    bottom: 15%;
    color: #ce7354;
    left: 50%;
    margin-left: -45px; }

/* Top Text
*********************************************************************************************/
/* Top Icons
*********************************************************************************************/
a.icon-githb, a.icon-lkedin {
  color: #F7B2AD !important; }
a.icon-down {
  color: #F7B2AD; }
a.icon-githb:hover, a.icon-lkedin:hover {
  color: #B4EBCA !important; }
a.icon-down:hover {
  color: #B4EBCA; }

/* Top Icon-down
*********************************************************************************************/
.icon-down {
  font-size: 4em;
  position: absolute;
  margin-left: 46.5%;
  bottom: 10px;
  color: #ce7354;
  font-size: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px; }

/* Top Bounce Animation from http://daneden.github.io/animate.css/
*********************************************************************************************/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s; }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px); } }
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

/* Greetings
*********************************************************************************************/
#greetings {
  height: 100vh;
  width: 65%;
  float: left; }
  #greetings .horizontall_centered {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto; }
  #greetings .content {
    color: #878787;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.4em; }
  #greetings .link {
    color: #646464;
    text-decoration: none; }
  #greetings #greetings_div {
    overflow: scroll;
    font-size: 2em;
    height: inherit;
    padding-top: 15%;
    line-height: 1.4em; }

/* Skills
*********************************************************************************************/
#skills {
  height: 100vh;
  width: 35%; }
  #skills .skills_image {
    position: absolute;
    min-height: 100%;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    background: url(../images/skills.png) no-repeat center center;
    background-size: contain; }

/* Common Functions
**********************************************************************************************/
.content_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay {
  opacity: 0;
  position: absolute;
  font-size: 1.8em;
  color: #6DD3CE;
  top: 10%;
  left: 2%; }

.content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
  width: 70%;
  margin: auto; }

.gen_summary_name, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_name, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_name {
  text-align: center;
  font-size: 2.5em;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #6DD3CE;
  margin-top: 4%; }

.gen_summary_time, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_time, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_time, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_time, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_time {
  font-size: 1.5em;
  color: #00797F;
  font-style: italic;
  text-align: center;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2%; }

.gen_content_title, #work .content_wrap .content_row1 .content_row1_col1_title, #work .content_wrap .content_row1 .content_row1_col2_title, #work .content_wrap .content_row2 .content_row2_col1_title, #work .content_wrap .content_row2 .content_row2_col2_title {
  width: 50%;
  height: 100%;
  float: left;
  padding: 60px;
  position: relative; }

.gen_content_image, #work .content_wrap .content_row1 .content_row1_col1_title .content_sf_image, #work .content_wrap .content_row1 .content_row1_col2_title .content_sf_image, #work .content_wrap .content_row2 .content_row2_col1_title .content_image, #work .content_wrap .content_row2 .content_row2_col2_title .content_image {
  width: 100%;
  margin-left: auto;
  margin-right: auto; }

.content_hover_basic:hover, .content_sf_hover_basic:hover, #work .content_row1 .content_row1_col1_title:hover, #work .content_row1 .content_row1_col2_title:hover, .content_other_hover_basic:hover, #work .content_row2 .content_row2_col1_title:hover, #work .content_row2 .content_row2_col2_title:hover {
  display: block;
  opacity: 1;
  background: url("../images/natural-paper.png");
  display: block; }
  .content_hover_basic:hover .content_text, .content_sf_hover_basic:hover .content_text, #work .content_row1 .content_row1_col1_title:hover .content_text, #work .content_row1 .content_row1_col2_title:hover .content_text, .content_other_hover_basic:hover .content_text, #work .content_row2 .content_row2_col1_title:hover .content_text, #work .content_row2 .content_row2_col2_title:hover .content_text {
    visibility: hidden; }

.content_sf_hover_basic .content_sf_image, #work .content_row1 .content_row1_col1_title:hover .content_sf_image, #work .content_row1 .content_row1_col2_title:hover .content_sf_image {
  visibility: hidden; }

.content_other_hover_basic .content_image, #work .content_row2 .content_row2_col1_title:hover .content_image, #work .content_row2 .content_row2_col2_title:hover .content_image {
  visibility: hidden; }

/* Work
*********************************************************************************************/
#work {
  min-height: 100vh; }
  #work .horizontall_centered {
    width: 20.7%;
    display: block;
    margin-left: auto;
    margin-right: auto; }
  #work .title {
    font-size: 7em;
    color: #CCCCCC;
    padding-top: 55px;
    margin-bottom: 2%;
    height: 80px;
    text-align: center; }
  #work .title_wrap {
    width: 100%;
    padding-bottom: 30px;
    max-height: 150px !important; }
  #work .icon-work {
    font-size: 1em;
    margin-right: 30px; }
  #work .content_wrap {
    padding: 2%; }
    #work .content_wrap .content_row1 {
      height: 63%; }
    #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay {
      top: 2%; }
  #work .content_row1 .content_row1_col1_title:hover .content_r1c1_overlay {
    opacity: 1; }
  #work .content_row1 .content_row1_col2_title:hover .content_r1c2_overlay {
    opacity: 1; }
  #work .content_row2 .content_row2_col1_title:hover .content_r2c1_overlay {
    opacity: 1; }
  #work .content_row2 .content_row2_col2_title:hover .content_r2c2_overlay {
    opacity: 1; }

/* Projects
*********************************************************************************************/
#projects {
  min-height: 100vh;
  padding-bottom: 20px; }
  #projects .icon-projects {
    margin-right: 30px;
    font-size: 1em; }
  #projects .horizontall_centered {
    width: 27.5%;
    display: block;
    margin-left: auto;
    margin-right: auto; }
  #projects .title {
    padding-top: 60px;
    margin-bottom: 2%;
    font-size: 7em;
    color: #CCCCCC;
    height: 15%;
    max-height: 150px !important;
    text-align: center; }
  #projects .content {
    height: 79.3%; }
  #projects li {
    width: 33.3333333333333333%;
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-top: 25px; }

.pro_wrap_image {
  width: 180px;
  height: 180px;
  overflow: hidden;
  vertical-align: middle;
  display: block;
  margin: auto; }

.round_image_corner {
  border-radius: 20%; }

#projects .content_col .content_image {
  width: 180px;
  height: 180px; }
#projects .content_col .summary_name {
  font-size: 3em;
  color: #6DD3CE;
  padding: 20px 0 10px 0;
  text-align: center; }
#projects .content_col .summary_time {
  font-size: 1.5em;
  color: #00797F;
  font-style: italic;
  text-align: center; }
#projects .content_col .project_content_description {
  font-size: 1.5em;
  color: #19ABB2;
  padding: 10px 5px 0 5px;
  line-height: 1.3em;
  text-align: center;
  width: 70%;
  margin-left: auto;
  margin-right: auto; }

/* Activites
*********************************************************************************************/
#activities {
  min-height: 100vh;
  padding-bottom: 20px; }
  #activities .icon-activities {
    margin-right: 30px; }
  #activities .horizontall_centered {
    width: 28.4%;
    display: block;
    margin-left: auto;
    margin-right: auto; }
  #activities .title {
    padding-top: 60px;
    margin-bottom: 2%;
    font-size: 7em;
    height: 15%;
    color: #CCCCCC;
    text-align: center; }
  #activities li {
    width: 33.3333333333%;
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-top: 25px;
    height: 350px; }

.act_wrap_image {
  width: 180px;
  height: 180px;
  vertical-align: middle;
  display: block;
  margin: auto; }

.swe_icon {
  margin-left: -3px;
  margin-top: -3px; }

.gk_icon {
  margin-left: -3.21px;
  margin-top: -3.5px; }

.dei_icon {
  margin-left: -3px;
  margin-top: -3px; }

#activities .content_col .content_image {
  width: 180px;
  height: 180px; }
#activities .content_col .summary_name {
  font-size: 3em;
  color: #6DD3CE;
  padding: 20px 0 10px 0;
  text-align: center; }
#activities .content_col .summary_time {
  font-size: 1.5em;
  color: #00797F;
  font-style: italic;
  text-align: center; }
#activities .content_col .activity_content_description {
  font-size: 1.5em;
  color: #19ABB2;
  padding: 10px 5px 0 5px;
  line-height: 1.3em;
  text-align: center;
  width: 70%;
  margin-left: auto;
  margin-right: auto; }

/* Loading Overlay
*********************************************************************************************/
#overlay {
  background-color: #EFF7F6;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001; }
  #overlay img {
    width: 150px;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -120px; }

/* Loading Indicator
*********************************************************************************************/
.loading {
  -webkit-animation: fade-in .25s linear;
  animation: fade-in .25s linear;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  background-color: rgba(0, 0, 0, 0.075);
  position: fixed;
  z-index: 10003;
  top: 50%;
  left: 50%;
  padding: 0.625em;
  margin: -1.25em 0 0 -1.25em;
  /* 20 */ }
  .loading div {
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-animation: loading .5s ease infinite;
    animation: loading .5s ease infinite; }

@-webkit-keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes loading {
  from {
    opacity: .5;
    -webkit-transform: scale(0.75); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1); }
  to {
    opacity: .5;
    -webkit-transform: scale(0.75); } }
@keyframes loading {
  from {
    opacity: .5;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
  to {
    opacity: .5;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); } }
/*Responsive
*********************************************************************************************/
/* Rsp - Menu
*********************************************************************************************/
@media (max-width: 670px) {
  #logo, #navigation {
    display: none; }

  #ferromenu-controller-0 {
    visibility: visible; }

  #projects .title {
    padding-top: 20px; }

  #work .title {
    padding-top: 30px; }

  #activities .title {
    padding-top: 20px; }

  #header {
    width: 0; }

  .top #header ul li.current a::before, .top #header ul li a:hover::before {
    visibility: hidden; } }
/* Rsp - Activities & Projects & Work Float
*********************************************************************************************/
@media (max-width: 1060px) {
  #activities li {
    width: 50%; } }
@media (max-width: 1000px) {
  #projects li {
    width: 50%; } }
@media (max-width: 800px) {
  #activities li, #projects li {
    width: auto;
    float: none; }

  #work .content li {
    width: auto;
    float: none; }
  #work ul li .content_row1_col1_title .summary_name, #work ul li .content_row1_col2_title .summary_name {
    font-size: 2.5em; }
  #work ul li .content_row1_col1_title .summary_time, #work ul li .content_row1_col2_title .summary_time {
    font-size: 1.8em; }
  #work .content_col1_description, #work .content_col2_description {
    font-size: 2em;
    width: 100%; } }
/* Rsp - Activities & Projects & Work Title
*********************************************************************************************/
@media (max-width: 1090px) {
  #activities .horizontall_centered {
    width: 33.5%; }

  #projects .horizontall_centered {
    width: 41.8%; }

  #work .horizontall_centered {
    width: 24.1%; } }
@media (max-width: 850px) {
  #activities .horizontall_centered {
    width: 43%; }

  #projects .horizontall_centered {
    width: 32.8%; }

  #work .horizontall_centered {
    width: 31.1%; } }
@media (max-width: 800px) {
  #activities .horizontall_centered {
    width: 46%; }

  #projects .horizontall_centered {
    width: 44.8%; }

  #work .horizontall_centered {
    width: 33.1%; } }
@media (max-width: 690px) {
  #activities .horizontall_centered {
    width: 53%; }

  #projects .horizontall_centered {
    width: 51.8%; }

  #work .horizontall_centered {
    width: 38.1%; } }
@media (max-width: 610px) {
  #activities .horizontall_centered {
    width: 53%; }

  #projects .horizontall_centered {
    width: 51.8%; }

  #work .horizontall_centered {
    width: 38.1%; } }
@media (max-width: 550px) {
  #activities .horizontall_centered {
    width: 63.5%; }

  #projects .horizontall_centered {
    width: 61.8%; }

  #work .horizontall_centered {
    width: 46.1%; }

  #activities .title, #projects .title, #work .title {
    font-size: 6em;
    margin-bottom: 0; } }
@media (max-width: 450px) {
  #activities .horizontall_centered {
    width: 60.5%; }

  #projects .horizontall_centered {
    width: 58.8%; }

  #work .horizontall_centered {
    width: 44.1%; }

  #activities .title, #projects .title {
    font-size: 5em; }

  #work .title {
    font-size: 5em;
    padding-top: 20px;
    height: 35px; } }
@media (max-width: 400px) {
  #activities .horizontall_centered {
    width: 50.5%; }

  #projects .horizontall_centered {
    width: 50%; }

  #work .horizontall_centered {
    width: 36.1%; }

  #activities .title, #projects .title, #work .title {
    font-size: 4em; }

  #activities .icon-activities, #projects .icon-projects, #work .icon-work {
    margin-right: 10px; } }
@media (max-width: 300px) {
  #activities .horizontall_centered {
    width: 67.5%; }

  #projects .horizontall_centered {
    width: 66%; }

  #work .horizontall_centered {
    width: 47.5%; }

  #activities .title, #projects .title, #work .title {
    font-size: 4em; } }
@media (max-width: 250px) {
  #activities .horizontall_centered {
    width: 67.5%; }

  #projects .horizontall_centered {
    width: 60%; }

  #work .horizontall_centered {
    width: 44.5%; }

  #activities .title, #projects .title, #work .title {
    font-size: 3em; } }
/* Rsp - Activities & Projects & Work Content
*********************************************************************************************/
@media (max-width: 1680px) {
  .gen_summary_name, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_name, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_name {
    font-size: 2em; }

  .content_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay {
    font-size: 1.6em; } }
@media (max-width: 1340px) {
  .content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
    width: 85%; } }
@media (max-width: 1250px) {
  .content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
    width: 90%; }

  .content_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay {
    font-size: 1.5em; } }
@media (max-width: 1182px) {
  .gen_summary_name, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_name, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_name {
    font-size: 1.8em; } }
@media (max-width: 1150px) {
  .content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
    width: 95%; } }
@media (max-width: 1000px) {
  .content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
    width: 100%; } }
@media (max-width: 930px) {
  .gen_summary_name, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_name, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_name {
    font-size: 1.7em; } }
@media (max-width: 880px) {
  .gen_content_title, #work .content_wrap .content_row1 .content_row1_col1_title, #work .content_wrap .content_row1 .content_row1_col2_title, #work .content_wrap .content_row2 .content_row2_col1_title, #work .content_wrap .content_row2 .content_row2_col2_title, #work .content_wrap .content_row1 .content_row1_col1_title, #work .content_wrap .content_row1 .content_row1_col2_title, #work .content_wrap .content_row2 .content_row2_col1_title, #work .content_wrap .content_row2 .content_row2_col2_title {
    width: 100%; }

  .gen_content_title, #work .content_wrap .content_row1 .content_row1_col1_title, #work .content_wrap .content_row1 .content_row1_col2_title, #work .content_wrap .content_row2 .content_row2_col1_title, #work .content_wrap .content_row2 .content_row2_col2_title, #work .content_wrap .content_row1 .content_row1_col1_title, #work .content_wrap .content_row1 .content_row1_col2_title, #work .content_wrap .content_row2 .content_row2_col1_title, #work .content_wrap .content_row2 .content_row2_col2_title {
    height: auto; }

  #work .content_wrap .content_row1 {
    height: auto; }

  .content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
    width: 80%; } }
@media (max-width: 700px) {
  .gen_summary_name, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_name, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_name {
    font-size: 1.6em; } }
@media (max-width: 500px) {
  .content_row, #work .content_wrap .content_row1, #work .content_wrap .content_row2, #work .content_wrap .content_row1, #work .content_wrap .content_row2 {
    width: 100%; } }
@media (max-width: 435px) {
  .gen_summary_name, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_name, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_name, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_name {
    font-size: 1.2em; }

  .gen_summary_time, #work .content_wrap .content_row1 .content_row1_col1_title .content_text .summary_time, #work .content_wrap .content_row1 .content_row1_col2_title .content_text .summary_time, #work .content_wrap .content_row2 .content_row2_col1_title .content_text .summary_time, #work .content_wrap .content_row2 .content_row2_col2_title .content_text .summary_time {
    font-size: 1.2em; } }
@media (max-width: 525px) {
  .gen_content_description, #work .content_r1c1_description, #work .content_r1c2_description, #work .content_r2c1_description, #work .content_r2c2_description {
    font-size: 0.8em; } }
@media (max-width: 515px) {
  .gen_content_description, #work .content_r1c1_description, #work .content_r1c2_description, #work .content_r2c1_description, #work .content_r2c2_description {
    font-size: 0.7em; } }
@media (max-width: 325px) {
  .content_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay {
    font-size: 1.3em; } }
@media (max-width: 265px) {
  .content_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay, #work .content_wrap .content_row1 .content_row1_col1_title .content_r1c1_overlay, #work .content_wrap .content_row1 .content_row1_col2_title .content_r1c2_overlay, #work .content_wrap .content_row2 .content_row2_col1_title .content_r2c1_overlay, #work .content_wrap .content_row2 .content_row2_col2_title .content_r2c2_overlay {
    font-size: 1.2em; } }
@media (max-width: 985px) {
  #work .content_row1_col1_title .summary_time, #work .content_row1_col2_title .summary_time {
    font-size: 1.2em; } }
@media (max-width: 902px) {
  #work .content_row1_col1_title .summary_name, #work .content_row1_col2_title .summary_name {
    font-size: 1.9em; } }
@media (max-width: 837px) {
  #work .content_row1_col1_title .summary_name, #work .content_row1_col2_title .summary_name {
    font-size: 1.8em; }
  #work .content_row1_col1_title .summary_time, #work .content_row1_col2_title .summary_time {
    font-size: 1em; } }
@media (max-width: 655px) {
  #work ul li .content_row1_col1_title .summary_name, #work ul li .content_row1_col2_title .summary_name {
    font-size: 2.3em; }
  #work ul li .content_row1_col1_title .summary_time, #work ul li .content_row1_col2_title .summary_time {
    font-size: 1.6em; }
  #work .content_col1_description, #work .content_col2_description {
    font-size: 1.5em; } }
@media (max-width: 564px) {
  #work ul li .content_row1_col1_title .summary_name, #work ul li .content_row1_col2_title .summary_name {
    font-size: 2em; }
  #work ul li .content_row1_col1_title .summary_time, #work ul li .content_row1_col2_title .summary_time {
    font-size: 1.3em; }
  #work .content_col1_description, #work .content_col2_description {
    font-size: 1.5em; } }
@media (max-width: 457px) {
  #work ul li .content_row1_col1_title .summary_name, #work ul li .content_row1_col2_title .summary_name, #work ul li .content_row1_col1_title .summary_time, #work ul li .content_row1_col2_title .summary_time {
    width: 100%; } }
@media (max-width: 337px) {
  #work ul li .content_row1_col1_title .summary_name, #work ul li .content_row1_col2_title .summary_name {
    font-size: 1.5em; } }
@media (max-width: 255px) {
  #work ul li .content_row1_col1_title .summary_name, #work ul li .content_row1_col2_title .summary_name {
    font-size: 1.3em; } }
@media (max-width: 207px) {
  .content_row1 .content_row1_col1_title:hover .content_r1c1_overlay {
    visibility: hidden; }
  .content_row1 .content_row1_col1_title:hover .content_text {
    visibility: visible; }

  .content_row1 .content_row1_col2_title:hover .content_r1c2_overlay {
    visibility: hidden; }
  .content_row1 .content_row1_col2_title:hover .content_text {
    visibility: visible; }

  .content_row2 .content_row2_col1_title:hover .content_r2c1_overlay {
    visibility: hidden; }
  .content_row2 .content_row2_col1_title:hover .content_text {
    visibility: visible; }

  .content_row2 .content_row2_col2_title:hover .content_r2c2_overlay {
    visibility: hidden; }

  .content_other_hover_basic .content_image, #work .content_row2 .content_row2_col1_title:hover .content_image, #work .content_row2 .content_row2_col2_title:hover .content_image, #work .content_row2 .content_row2_col1_title:hover .content_image, #work .content_row2 .content_row2_col2_title:hover .content_image {
    visibility: visible; }

  .gen_content_image, #work .content_wrap .content_row1 .content_row1_col1_title .content_sf_image, #work .content_wrap .content_row1 .content_row1_col2_title .content_sf_image, #work .content_wrap .content_row2 .content_row2_col1_title .content_image, #work .content_wrap .content_row2 .content_row2_col2_title .content_image, #work .content_wrap .content_row1 .content_row1_col1_title .content_sf_image, #work .content_wrap .content_row1 .content_row1_col2_title .content_sf_image, #work .content_wrap .content_row2 .content_row2_col1_title .content_image, #work .content_wrap .content_row2 .content_row2_col2_title .content_image {
    visibility: visible; }

  .content_hover_basic:hover .content_text, .content_sf_hover_basic:hover .content_text, #work .content_row1 .content_row1_col1_title:hover .content_text, #work .content_row1 .content_row1_col2_title:hover .content_text, .content_other_hover_basic:hover .content_text, #work .content_row2 .content_row2_col1_title:hover .content_text, #work .content_row2 .content_row2_col2_title:hover .content_text, .content_sf_hover_basic:hover .content_text, #work .content_row1 .content_row1_col1_title:hover .content_text, #work .content_row1 .content_row1_col2_title:hover .content_text, #work .content_row1 .content_row1_col1_title:hover .content_text, #work .content_row1 .content_row1_col2_title:hover .content_text, .content_other_hover_basic:hover .content_text, #work .content_row2 .content_row2_col1_title:hover .content_text, #work .content_row2 .content_row2_col2_title:hover .content_text, #work .content_row2 .content_row2_col1_title:hover .content_text, #work .content_row2 .content_row2_col2_title:hover .content_text {
    visibility: visible; } }
/* Rsp - Top Title
*********************************************************************************************/
@media (max-width: 700px) {
  #top h1 {
    font-size: 9em;
    padding-bottom: 0px; }
  #top p {
    font-size: 25px; } }
@media (max-width: 655px) {
  #top h1 {
    font-size: 8em; }
  #top p {
    font-size: 2.5em; } }
@media (max-width: 600px) {
  #top h1 {
    font-size: 7em; }
  #top p {
    font-size: 2em; } }
@media (max-width: 525px) {
  #top h1 {
    line-height: 0px;
    padding-bottom: 40px; }
  #top p {
    line-height: 0px;
    font-size: 1.5em; } }
@media (max-width: 519px) and (min-height: 384.1px) {
  #top h1 {
    font-size: 6em;
    border-bottom: 0px; }
    #top h1::after {
      display: none; } }
@media (max-width: 400px) and (min-height: 384.1px) {
  #top h1 {
    font-size: 5em;
    margin-bottom: 0px; }
  #top p {
    font-size: 1.2em; } }
@media (max-width: 320px) and (min-height: 384.1px) {
  #top h1 {
    font-size: 4em;
    margin-bottom: 0px; }
  #top p {
    font-size: 1em; } }
@media (max-width: 280px) and (min-height: 384.1px) {
  #top h1 {
    font-size: 3em;
    margin-bottom: 0px; }
  #top p {
    visibility: hidden; } }
@media (max-width: 200px) and (min-height: 384.1px) {
  #top h1 {
    font-size: 2em;
    margin-bottom: 0px; }
  #top p {
    visibility: hidden; } }
@media (max-width: 150px) {
  #top h1 {
    font-size: 1.5em;
    margin-bottom: 0px; }
  #top p {
    visibility: hidden; } }
/*
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
    #top h1{
      font-size: 1.5em;
      margin-bottom: -45px;
    }
    #top p{
      font-size: 0.6em;
    }
}
*/
/* Rsp - Skills & Greetings
*********************************************************************************************/
/*@media (max-width: 1150px) {
  #skills .skills_img{
    margin-right:10px;
  }
}
@media (max-width: 970px) {
  #skills .skills_img{
    margin-top:30px;
  }
}
@media (max-width: 900px) {
  #skills .skills_img{
    margin-top:60px;
  }
}
@media (max-width: 780px) {
  #skills .skills_img{
    margin-top:85px;
  }
}
@media (max-width: 950px) {
  #greetings .content{
    font-size:1.3em;
    padding-top:80px;
  }
}
@media (max-width: 822px) {
  #greetings .content{
    font-size:1.2em;
  }
}
@media (max-width: 760px) {
  #greetings .content{
    font-size:1.1em;
  }
}
*/
@media (max-width: 700px) {
  #greetings {
    width: auto;
    float: none; }
    #greetings .content {
      font-size: 1.4em; }

  #skills {
    width: 100%; }
    #skills .skills_img {
      margin-top: 0;
      height: 67%;
      margin-left: 27%; } }
@media (max-width: 575px) {
  #greetings .content {
    font-size: 1.3em; }

  #skills .skills_img {
    margin-left: 22%; } }
@media (max-width: 535px) {
  #greetings .content {
    font-size: 1.2em; } }
@media (max-width: 500px) {
  #greetings .content {
    font-size: 1em; }

  #skills .skills_img {
    margin-left: 15%; } }
@media (max-width: 495px) {
  #greetings .content {
    font-size: 1.1em; }

  #skills .skills_img {
    margin-left: 18%; } }
@media (max-width: 460px) {
  #greetings .content {
    font-size: 1em; }

  #skills .skills_img {
    margin-left: 14%; } }
/* Rsp Vertical - Top
*********************************************************************************************/
@media (max-height: 365px) {
  /*and (max-width: 540px) {*/
  #top h1 {
    font-size: 6em;
    border-bottom: 0;
    margin-bottom: 0;
    line-height: 50%; }
    #top h1::after {
      display: none; }
  #top p {
    font-size: 1.5em;
    line-height: 76px; } }
@media (max-height: 290px) {
  /*and (max-width: 540px) {*/
  #top h1 {
    font-size: 5em;
    /*line-height:55px;*/ }
  #top p {
    font-size: 1.3em; } }
@media (max-height: 250px) {
  /*and (max-width: 540px) {*/
  #top h1 {
    font-size: 4em;
    /*line-height: 39px;*/ }
  #top p {
    font-size: 1.1em; }
  #top span.icons {
    font-size: 30px;
    bottom: 20%;
    margin-left: -40px; }
  #top .icon-githb {
    padding-right: 10px; }
  #top .icon-down {
    font-size: 30px; } }
/* Rsp Vertical - Greetings
*********************************************************************************************/
@media (max-height: 316px) and (min-width: 1100px) {
  #greetings .content {
    font-size: 1.3em; } }
@media (max-height: 316px) and (min-width: 975px) {
  #greetings .content {
    font-size: 1.1em; } }
@media (max-height: 316px) and (min-width: 865px) {
  #greetings .content {
    font-size: 1em; } }
@media (max-height: 330px) and (max-width: 700px) {
  #greetings .content {
    font-size: 1.2em; } }
@media (max-height: 300px) and (max-width: 700px) {
  #greetings .content {
    font-size: 1.1em; } }
@media (max-height: 250px) and (max-width: 700px) {
  #greetings .content {
    font-size: 0.9em; } }
/* Rsp Vertical - Skills
*********************************************************************************************/
@media (max-height: 525px) and (min-width: 700.1px) {
  #skills .skills_img {
    margin-top: -5%; } }
@media (max-height: 464px) and (min-width: 700.1px) {
  #skills .skills_img {
    margin-top: -6%; } }
@media (max-height: 411px) and (min-width: 700.1px) {
  #skills .skills_img {
    margin-top: -8%; } }
@media (max-height: 372px) and (min-width: 700.1px) {
  #skills .skills_img {
    margin-top: -11%; } }
@media (max-height: 365px) and (min-width: 700.1px) {
  #skills .skills_img {
    margin-top: -15%; } }
@media (max-height: 316px) and (min-width: 700.1px) {
  #skills .skills_img {
    margin-top: -17%; } }
@media (max-height: 320px) and (max-width: 700px) {
  #skills .skills_img {
    margin-top: -4%; } }
@media (max-height: 220px) and (max-width: 700px) {
  #skills .skills_img {
    margin-top: -6%; } }
/* common */
.mark-water {
  color: #bbb; }

/* eof common */
/* node */
.node-content-wrapper {
  background-color: #fff; }
  .node-content-wrapper ul {
    border-left: 1px dotted #ccc;
    list-style: none;
    padding-left: 25px;
    margin: 0px; }
    .node-content-wrapper ul li {
      list-style: none;
      border-bottom: 0;
      padding-bottom: 0; }

.node-hgl-path {
  background-color: #fefbdf; }

.node-bracket {
  font-weight: bold;
  display: inline-block;
  cursor: pointer; }
  .node-bracket:hover {
    color: #999; }

/* eof node */
/* leaf */
.leaft-container {
  width: 100%;
  max-width: 300px;
  height: 100%; }

.title {
  color: #ccc; }

.string {
  color: #FF491A; }

.number {
  color: #ccaa00; }

.boolean {
  color: #1979d3; }

.date {
  color: #aa6655; }

.null {
  color: #ff5050; }

/* eof leaf */