@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
button, .button {
  background: #4B434C !important; }
  button:hover, .button:hover {
    background: #807382 !important; }

div.clear {
  clear: both; }

/* Start Navigation */
#nav_toggle:checked + nav {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%); }

.nav_toggle {
  background: #4B434C;
  width: 100%;
  z-index: 1;
  position: relative;
  text-align: right; }

nav {
  margin: 0 auto;
  position: fixed;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s; }
  @media only screen and (min-width: 40.063em) {
    nav {
      position: relative;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      -webkit-transition: none;
      transition: none;
      display: block; } }
  @media only screen and (min-width: 64.063em) {
    nav {
      position: relative;
      width: 64em; } }

.nav_icon {
  color: #fff;
  font-size: 1.5rem;
  padding-right: 10px;
  padding-bottom: 2px; }

.nav_wrap {
  position: fixed;
  z-index: 10;
  width: 100%;
  background: #4B434C;
  border-bottom: 1px solid #FFFFFF; }
  @media only screen and (min-width: 40.063em) {
    .nav_wrap {
      text-align: center; } }

.nav_list {
  margin: 0;
  list-style: none;
  border-top: 1px solid #FFFFFF; }
  @media only screen and (max-width: 760px) and (min-width: 40.063em) {
    .nav_list {
      margin: 0 0 0 15px; } }
  @media only screen and (min-width: 40.063em) {
    .nav_list {
      border-top: none; } }

.nav_logo {
  background-image: url("../img/logo_100.png");
  background-size: 30px 30px;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 30px;
  z-index: 1;
  margin-left: 3px;
  cursor: pointer; }

.nav_item {
  background: #4B434C;
  padding: 6px 10px;
  -webkit-transition: background 1s;
  transition: background 1s; }
  @media only screen and (max-width: 40em) {
    .nav_item {
      border-bottom: 1px solid #7F7A7A; }
      .nav_item:last-of-type {
        border-bottom: none; } }
  @media only screen and (min-width: 40.063em) {
    .nav_item {
      padding: 6px 4px;
      width: 25%;
      float: left;
      border-left: 1px solid #fff; }
      .nav_item:first-of-type {
        border-left: none; } }
  .nav_item:hover {
    background: #807382; }
  .nav_item > a {
    display: block;
    color: #fff; }
  .nav_item i.fa {
    margin-right: 7px; }

.clear_both {
  clear: both; }

/* Ende Navigation */
.main {
  background: #fff;
  top: 100%; }

.btt_button {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: transform 0.75s;
  transition: transform 0.75s;
  position: fixed;
  bottom: 45px;
  right: 0px;
  border: 1px solid;
  padding: 7px; }
  .btt_button.btt_show {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
    @media only screen and (min-width: 40.063em) {
      .btt_button.btt_show {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%); } }
  .btt_button:hover {
    -webkit-animation: bttAnimSmall 1.5s;
    -moz-animation: bttAnimSmall 1.5s;
    -ms-animation: bttAnimSmall 1.5s;
    -o-animation: bttAnimSmall 1.5s;
    animation: bttAnimSmall 1.5s; }
    @media only screen and (min-width: 40.063em) {
      .btt_button:hover {
        -webkit-animation: bttAnim 1.5s;
        -moz-animation: bttAnim 1.5s;
        -ms-animation: bttAnim 1.5s;
        -o-animation: bttAnim 1.5s;
        animation: bttAnim 1.5s; } }

@-webkit-keyframes bttAnim {
  0% {
    transform: translateY(0%) translateX(-100%); }
  25% {
    transform: translateY(-10%) translateX(-100%); }
  50% {
    transform: translateY(0%) translateX(-100%); }
  75% {
    transform: translateY(-10%) translateX(-100%); }
  100% {
    transform: translateY(0%) translateX(-100%); } }
@-moz-keyframes bttAnim {
  0% {
    transform: translateY(0%) translateX(-100%); }
  25% {
    transform: translateY(-10%) translateX(-100%); }
  50% {
    transform: translateY(0%) translateX(-100%); }
  75% {
    transform: translateY(-10%) translateX(-100%); }
  100% {
    transform: translateY(0%) translateX(-100%); } }
@-ms-keyframes bttAnim {
  0% {
    transform: translateY(0%) translateX(-100%); }
  25% {
    transform: translateY(-10%) translateX(-100%); }
  50% {
    transform: translateY(0%) translateX(-100%); }
  75% {
    transform: translateY(-10%) translateX(-100%); }
  100% {
    transform: translateY(0%) translateX(-100%); } }
@-o-keyframes bttAnim {
  0% {
    transform: translateY(0%) translateX(-100%); }
  25% {
    transform: translateY(-10%) translateX(-100%); }
  50% {
    transform: translateY(0%) translateX(-100%); }
  75% {
    transform: translateY(-10%) translateX(-100%); }
  100% {
    transform: translateY(0%) translateX(-100%); } }
@keyframes bttAnim {
  0% {
    transform: translateY(0%) translateX(-100%); }
  25% {
    transform: translateY(-10%) translateX(-100%); }
  50% {
    transform: translateY(0%) translateX(-100%); }
  75% {
    transform: translateY(-10%) translateX(-100%); }
  100% {
    transform: translateY(0%) translateX(-100%); } }
@-webkit-keyframes bttAnimSmall {
  0% {
    transform: translateY(0%) translateX(-50%); }
  25% {
    transform: translateY(-10%) translateX(-50%); }
  50% {
    transform: translateY(0%) translateX(-50%); }
  75% {
    transform: translateY(-10%) translateX(-50%); }
  100% {
    transform: translateY(0%) translateX(-50%); } }
@-moz-keyframes bttAnimSmall {
  0% {
    transform: translateY(0%) translateX(-50%); }
  25% {
    transform: translateY(-10%) translateX(-50%); }
  50% {
    transform: translateY(0%) translateX(-50%); }
  75% {
    transform: translateY(-10%) translateX(-50%); }
  100% {
    transform: translateY(0%) translateX(-50%); } }
@-ms-keyframes bttAnimSmall {
  0% {
    transform: translateY(0%) translateX(-50%); }
  25% {
    transform: translateY(-10%) translateX(-50%); }
  50% {
    transform: translateY(0%) translateX(-50%); }
  75% {
    transform: translateY(-10%) translateX(-50%); }
  100% {
    transform: translateY(0%) translateX(-50%); } }
@-o-keyframes bttAnimSmall {
  0% {
    transform: translateY(0%) translateX(-50%); }
  25% {
    transform: translateY(-10%) translateX(-50%); }
  50% {
    transform: translateY(0%) translateX(-50%); }
  75% {
    transform: translateY(-10%) translateX(-50%); }
  100% {
    transform: translateY(0%) translateX(-50%); } }
@keyframes bttAnimSmall {
  0% {
    transform: translateY(0%) translateX(-50%); }
  25% {
    transform: translateY(-10%) translateX(-50%); }
  50% {
    transform: translateY(0%) translateX(-50%); }
  75% {
    transform: translateY(-10%) translateX(-50%); }
  100% {
    transform: translateY(0%) translateX(-50%); } }
.fa-arrow-up {
  font-size: 1.25rem; }

/* Start Inhaltsboxen */
.block_headline > h2 {
  font-size: 1.5rem;
  font-weight: 500; }
.block_headline:hover > .hdl_line {
  border-color: #FFFFFF; }
.block_headline i.fa {
  margin-right: 10px; }

.hdl_line {
  width: 140px;
  height: 5px;
  -webkit-transition: border-bottom 0.5s;
  transition: border-bottom 0.5s;
  border-bottom: 2px solid #4B434C; }

.content {
  margin-top: 15px;
  font-weight: 300; }

.inner_ctn_block {
  padding: 0.625rem;
  margin: 0 auto; }
  @media only screen and (min-width: 40.063em) {
    .inner_ctn_block {
      padding: 1.25rem; } }
  @media only screen and (min-width: 64.063em) {
    .inner_ctn_block {
      width: 64em; } }

#about {
  background: #fcf4e3;
  color: #4B434C; }

#portfolio {
  background: #fbf0da;
  color: #4B434C; }

.tab-title a {
  background: #4B434C !important;
  color: #fff !important; }
  .tab-title a:hover {
    background: #807382 !important; }
.tab-title.active a {
  background: #161316 !important; }

/* Ende Inhaltsboxen */
/* Start Splashscreen */
.start_button {
  width: 100%;
  text-align: center;
  bottom: 80px;
  position: relative;
  font-size: 2.8125rem; }

.sb_icon {
  -webkit-transition: color 0.5s;
  transition: color 0.5s; }
  .sb_icon:hover {
    color: #fcf4e3;
    cursor: pointer; }
    .sb_icon:hover:before {
      text-shadow: 0px 0px 1px black; }

.splashscreen, .splashscreen_overlay {
  height: 100%;
  width: 100%;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background: url("../img/hintergrund_xl.jpg") #fcf4e3 no-repeat center center; }
  @media only screen and (min-width: 120.063em) {
    .splashscreen, .splashscreen_overlay {
      background: url("../img/hintergrund_xxl.jpg") #fcf4e3 no-repeat center center; } }

div.splashscreen_overlay {
  background: rgba(255, 255, 255, 0.6);
  display: table; }

.background_overlay {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%; }
  @media only screen and (min-width: 40.063em) {
    .background_overlay {
      text-align: left;
      width: 600px; } }
  .background_overlay h1 {
    margin: 20px 20px 0px 20px;
    position: relative;
    display: block;
    color: #4B434C;
    background: rgba(252, 244, 227, 0.9);
    border: 1px solid #fff;
    padding: 11px;
    font-weight: bold;
    font-size: 1.5rem; }
    @media only screen and (min-width: 40.063em) {
      .background_overlay h1 {
        float: left;
        border-left: none;
        font-size: 1.875rem;
        margin: 0px;
        position: absolute;
        width: 450px;
        display: inline-block; } }

.splashscreen_vertical {
  display: table-cell;
  vertical-align: middle; }
  @media only screen and (min-width: 40.063em) {
    .splashscreen_vertical {
      text-align: center; } }

.splash_img {
  position: relative;
  display: inline-block;
  max-width: 100px; }
  .splash_img > img {
    position: relative;
    z-index: 4; }
  @media only screen and (min-width: 40.063em) {
    .splash_img {
      float: left;
      max-width: 150px; } }

.splash_img_border_box {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  display: none;
  background: rgba(252, 244, 227, 0.9);
  z-index: 2; }
  @media only screen and (min-width: 40.063em) {
    .splash_img_border_box {
      display: block; } }

.splash_img > img:hover + .splash_anim {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }

.splash_anim {
  background: #807382;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease; }

.splash_bg {
  z-index: 2;
  background-color: #fff;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%; }

/* Ende Splashscreen */
/* Start Über mich */
.timeline {
  margin-left: 20px; }

.tl_prefix_el {
  margin: 3px 0px;
  width: 4px;
  height: 4px;
  background-color: #000000;
  border-radius: 2px; }

.tl_element {
  border-left: 2px solid;
  margin-left: 1px;
  padding-bottom: 10px; }
  .tl_element:hover .tl_el_node {
    background-color: #4B434C; }

.tl_el_header {
  border-bottom: 2px solid;
  display: inline-block;
  padding-left: 5px;
  font-weight: 500; }

.tl_el_content {
  position: relative;
  padding-left: 5px; }

.tl_el_node {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border-radius: 6px;
  border: 1px solid inherit;
  left: -6px;
  border: 1px solid;
  top: -6px;
  -webkit-transition: background-color 0.75s;
  transition: background-color 0.75s; }

/* Ende Über mich */
/* Start Portfolio */
.prtf_teaser_item {
  display: inline-block;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  max-width: 100%; }

.prtf_teaser_icon > img {
  -webkit-transition: transform 1s;
  transition: transform 1s;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }
.prtf_teaser_icon:hover > img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05); }
.prtf_teaser_icon:hover + .prtf_teaser_txt {
  background: white; }

.prtf_teaser_txt {
  position: absolute;
  width: 100%;
  bottom: 0px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.85);
  -webkit-transition: background 1s;
  transition: background 1s;
  border-top: 1px solid #4B434C; }
  @media only screen and (max-width: 400px) {
    .prtf_teaser_txt {
      position: relative; } }

ul[class*="block-grid-"] {
  margin: 0; }
  ul[class*="block-grid-"] > li {
    text-align: center; }
    @media only screen and (max-width: 400px) {
      ul[class*="block-grid-"] > li {
        clear: both !important;
        width: 100% !important; } }

.prtf_layer {
  -webkit-transition: background 0.75s;
  transition: background 0.75s;
  visibility: hidden;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 11; }
  .prtf_layer.show_layer {
    background: rgba(0, 0, 0, 0.5);
    visibility: visible; }

.prtf_layer_wrap {
  position: absolute;
  background: #fcf4e3;
  height: 100%;
  width: 100%;
  overflow-y: auto; }
  @media only screen and (min-width: 40.063em) {
    .prtf_layer_wrap {
      border: 1px solid #000000;
      border-radius: 4px;
      left: 10%;
      top: 5%;
      width: 80%;
      height: 90%; } }
  @media only screen and (min-width: 76.8756em) {
    .prtf_layer_wrap {
      left: inherit;
      position: relative;
      width: 64.063em;
      margin: 0 auto; } }

.prtf_layer_close {
  font-size: 1.25rem;
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 10px;
  cursor: pointer;
  z-index: 10; }

.project {
  background: #fcf4e3;
  color: #4B434C;
  display: none;
  padding: 10px; }
  .project.active {
    display: block; }
  @media only screen and (min-width: 40.063em) {
    .project {
      padding: 20px; } }

.prtf_btns {
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 100%;
  z-index: 10; }
  @media only screen and (min-width: 40.063em) {
    .prtf_btns {
      bottom: 5%;
      position: absolute;
      width: 80%;
      left: 10%; } }
  @media only screen and (min-width: 76.8756em) {
    .prtf_btns {
      left: inherit;
      width: 100%; } }

.prtf_previous {
  text-align: left; }
  @media only screen and (min-width: 40.063em) {
    .prtf_previous > button {
      border-bottom-left-radius: 4px; } }

.prtf_next {
  text-align: right; }
  @media only screen and (min-width: 40.063em) {
    .prtf_next > button {
      border-bottom-right-radius: 4px; } }

.prtf_btn {
  float: left;
  width: 50%; }
  .prtf_btn button {
    margin-bottom: 0px !important; }

.prtf_btns_wrap {
  position: absolute;
  bottom: 0px;
  width: 100%; }
  @media only screen and (min-width: 76.8756em) {
    .prtf_btns_wrap {
      width: 64.063em;
      margin: 0 auto;
      position: relative; } }

.prtf_dyn_close_btn_wrap {
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateY(100%) translateX(-50%);
  -ms-transform: translateY(100%) translateX(-50%);
  transform: translateY(100%) translateX(-50%);
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  margin-bottom: 0px; }
  .prtf_dyn_close_btn_wrap.show {
    -webkit-transform: translateY(0%) translateX(-50%);
    -ms-transform: translateY(0%) translateX(-50%);
    transform: translateY(0%) translateX(-50%); }

.prtf_loader {
  font-size: 40px;
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  display: none; }
  .prtf_loader.showLoader {
    display: table; }
  .prtf_loader i.fa {
    display: table-cell;
    vertical-align: middle; }

.prtf_slider {
  margin: 0 auto; }

.prtf_layer_title {
  margin-bottom: 15px; }
  .prtf_layer_title h3 {
    display: inline-block;
    margin: 0px 0px 8px 0px;
    font-size: 1.125rem;
    font-weight: bold;
    position: relative;
    padding-left: 35px;
    padding-right: 20px; }
  .prtf_layer_title:hover > .hdl_line {
    border-bottom: 2px solid #fff; }
  .prtf_layer_title i.fa {
    position: absolute;
    left: 0; }
  .prtf_layer_title i.fa-gamepad {
    font-size: 1.5rem;
    top: -2px; }
  .prtf_layer_title i.fa-mobile {
    font-size: 1.375rem;
    top: 2px;
    left: 10px; }
  .prtf_layer_title i.fa-film {
    top: 4px; }
  .prtf_layer_title i.fa-code {
    font-size: 1.5rem; }

.prtf_info {
  margin-bottom: 37px; }
  @media only screen and (min-width: 40.063em) {
    .prtf_info {
      margin-bottom: 27px; } }

.prtf_date {
  padding: 10px; }
  .prtf_date .fa-calendar {
    margin-right: 7px; }
  .prtf_date .fa-arrow-right {
    margin: 0px 10px; }

.accordion-navigation .fa-chevron-down {
  display: inline-block; }
.accordion-navigation .fa-chevron-up {
  display: none; }
.accordion-navigation .fa-chevron-down, .accordion-navigation .fa-chevron-up {
  font-size: 1.25rem;
  float: right; }
.accordion-navigation.active .fa-chevron-down {
  display: none; }
.accordion-navigation.active .fa-chevron-up {
  display: inline-block; }
.accordion-navigation .content {
  margin: 0px; }
  @media only screen and (min-width: 40.063em) {
    .accordion-navigation .content {
      -webkit-column-count: 2;
      /* Chrome, Safari, Opera */
      -moz-column-count: 2;
      /* Firefox */
      column-count: 2;
      -webkit-column-gap: 30px;
      /* Chrome, Safari, Opera */
      -moz-column-gap: 30px;
      /* Firefox */
      column-gap: 30px; } }

.prtf_sub_headline {
  margin-bottom: 15px; }
  .prtf_sub_headline h4 {
    font-size: 1rem;
    font-weight: bold;
    margin: 15px 0 6px; }
  .prtf_sub_headline:hover > .hdl_line {
    border-bottom: 2px solid #fff; }

.prtf_keywords {
  font-weight: bold;
  padding: 0px 10px 10px 10px; }

/* Ende Portfolio */
/* Start Kontakt */
@media only screen and (min-width: 450px) {
  input[type="text"] {
    width: 70% !important; } }

.form_loader {
  font-size: 1.75rem;
  display: none; }

#contact {
  background: #fcf4e3;
  color: #4B434C !important; }

.social_icon {
  font-size: 1.25rem;
  font-weight: normal;
  display: inline-block;
  width: 31.3333%; }
  @media only screen and (min-width: 40.063em) {
    .social_icon {
      display: block;
      width: 100%; }
      .social_icon:first-of-type {
        margin-top: 20px; } }

.social_footer_icons {
  position: absolute;
  right: 20px;
  top: 20px; }
  @media only screen and (max-width: 450px) {
    .social_footer_icons {
      position: relative;
      display: block;
      text-align: center;
      top: inherit;
      right: inherit;
      padding-top: 10px; } }

.social_footer {
  margin-left: 15px;
  display: inline-block; }
  @media only screen and (min-width: 40.063em) {
    .social_footer {
      float: left; } }

.social_footer_link {
  font-size: 1.25rem;
  font-weight: normal;
  color: #FFFFFF; }
  .social_footer_link:hover, .social_footer_link:visited, .social_footer_link:focus {
    color: #FFFFFF; }

.social_link {
  color: #FFFFFF;
  width: 100%; }
  .social_link .fa {
    width: 30px; }
  .social_link:hover, .social_link:visited, .social_link:focus {
    color: #FFFFFF; }
  @media only screen and (min-width: 40.063em) {
    .social_link {
      text-align: left;
      width: 170px; } }
  @media only screen and (max-width: 40em) {
    .social_link {
      padding-left: 0;
      padding-right: 0; } }

/* Ende Kontakt */
/* Start Impressum */
.impressum {
  padding-top: 48px; }

/* Ende Impressum */
/* Start Footer */
footer {
  position: relative;
  text-align: center;
  padding: 20px;
  background: #4B434C;
  color: #fff; }

/* Ende Footer */
@media only screen and (max-width: 40em) {
  .orbit-caption {
    display: none !important; } }
.accordion dd > a {
  font-weight: bold; }

.accordion-navigation {
  border-bottom: 1px solid #7F7A7A; }
  .accordion-navigation.active {
    border: none; }

@media only screen and (max-width: 40em) {
  .tabs .tab-title {
    width: 33.33333%;
    text-align: center; } }

@media only screen and (max-width: 450px) {
  .tabs .tab-title > a {
    padding-left: 0px;
    padding-right: 0px; } }