/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 06.11.2014, 12:18:56
    Author     : frankklomfas
*/
/* #1F3FA1 */
/* #5271D0 */
/*#6C80BB */
@font-face {
  font-family: 'icomoon';
  src: url('../libs/fonts/icomoon.eot?-cj15oc');
  src: url('../libs/fonts/icomoon.eot?#iefix-cj15oc') format('embedded-opentype'), url('../libs/fonts/icomoon.woff?-cj15oc') format('woff'), url('../libs/fonts/icomoon.ttf?-cj15oc') format('truetype'), url('../libs/fonts/icomoon.svg?-cj15oc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
* {
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 100%;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222222;
  letter-spacing: 0.1em;
  letter-spacing: 0.02em;
  line-height: 1.7;
}
body {
  /* 12 px = 0.750em */
  font-size: 0.8rem;
}
img {
  max-width: 100%;
  height: auto;
}
.btn {
  display: inline-block;
  padding: 0.2rem 1rem;
  margin-top: 0.1rem;
  border: 1px solid #1f3fa1;
  text-decoration: none;
  font-size: 1rem;
  text-shadow: 0px 0px 1px rgba(200, 200, 250, 0.9);
  letter-spacing: 0.05rem;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.btn-action {
  background: #1f3fa1;
  color: #dddddd;
}
.btn-action:hover,
.btn-action:active,
.btn-action:focus {
  background: #ef7d15;
  border: 1px solid #ef7d15;
}
.textlink {
  font-weight: bold;
  color: #ef7d15;
}
*[class*="site"] {
  /* 20px = 1.250rem */
  padding: 1.250rem 0;
  width: 100%;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.padding {
  padding: 1.25rem 1.25rem 0 1.25rem;
}
.paddingTop {
  padding-top: 2rem;
}
.no-list {
  list-style: none;
  padding-left: 0;
}
.break {
  margin-bottom: 1rem;
}
/* ***
**
* Fonts
**
*
*/
h1,
h2,
h3,
h4 {
  font-family: 'Lora', serif;
  font-weight: 700;
  color: #EF7D15;
  margin-top: 0px;
  margin-bottom: 0.1em;
  text-shadow: 0px 1px 1px #EF7D15, 0px 1px 1px #666;
}
h1,
h2 {
  font-size: 1.313rem;
  /* 21px */
}
h2 + p,
h1 + p {
  margin-top: 0;
}
h3 {
  text-shadow: 0px 1px 1px #666;
  font-size: 1.500rem;
  /* 24 px */
}
h4 {
  font-size: 0.8rem;
}
.portfolio-headline span {
  color: #222222;
  font-size: 1.4rem;
  display: block;
  margin-top: -0.9rem;
}
@media screen and (min-width: 600px) {
  body {
    font-size: 1rem;
  }
  h1,
  h2 {
    font-size: 2rem;
  }
  h4 {
    font-size: 1.2rem;
  }
}
.container {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}
.row {
  width: 100%;
}
.columns {
  /* 20px = 1.250rem */
  padding: 0 1.250rem;
}
@media screen and (max-width: 400px) {
  .small-1 {
    width: 25%;
  }
  .small-2 {
    width: 50%;
  }
  .small-3 {
    width: 75%;
  }
  .small-4 {
    width: 100%;
  }
}
@media screen and (max-width: 962px) and (min-width: 500px) {
  .medium-1 {
    width: 12.5%;
  }
  .medium-2 {
    width: 25%;
  }
  .medium-3 {
    width: 37.5%;
  }
  .medium-4 {
    width: 50%;
  }
  .medium-5 {
    width: 62.5%;
  }
  .medium-6 {
    width: 75%;
  }
  .medium-7 {
    width: 87.5%;
  }
  .medium-8 {
    width: 100%;
  }
}
/* 890px = 55.625rem */
@media screen and (min-width: 962px) {
  /* 12 spaltiges Raster in der großen Layout-Version */
  .large-1 {
    width: 8.33333333%;
  }
  .large-2 {
    width: 16.66666667%;
  }
  .large-3 {
    width: 25%;
  }
  .large-4 {
    width: 33.33333333%;
  }
  .large-5 {
    width: 41.66666667%;
  }
  .large-6 {
    width: 50%;
  }
  .large-7 {
    width: 58.33333333%;
  }
  .large-8 {
    width: 66.66666667%;
  }
  .large-9 {
    width: 75%;
  }
  .large-10 {
    width: 83.33333333%;
  }
  .large-11 {
    width: 91.66666667%;
  }
  .large-12 {
    width: 100%;
  }
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* ***
**
* Header
**
*
*/
.site-header {
  margin-top: 0;
  padding: 0;
  padding-top: 2rem;
  background: #222222;
}
.header-logo {
  width: 240px;
  padding-left: 2rem;
}
.site-header .container {
  position: relative;
  border-bottom: 2px solid #ef7d15;
  box-shadow: 0px 0px 1px 0px #000000, 0px 1px 1px 0px rgba(239, 125, 21, 0.2);
}
/* ***
**
* Navigation und Footer
**
*
*/
.mainnav li,
.site-footer li {
  list-style: none;
}
.mainnav ul,
.site-footer ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.mainnav a,
.site-footer a {
  padding: 1.2rem 2.2rem;
  display: block;
  border: 1px solid #000;
  background: #222222;
  background: -moz-linear-gradient(top, #222222 0%, #333333 40%, #333333 60%, #222222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(40%, #333333), color-stop(60%, #333333), color-stop(100%, #222222));
  background: -webkit-linear-gradient(top, #222222 0%, #333333 40%, #333333 60%, #222222 100%);
  background: -o-linear-gradient(top, #222222 0%, #333333 40%, #333333 60%, #222222 100%);
  background: -ms-linear-gradient(top, #222222 0%, #333333 40%, #333333 60%, #222222 100%);
  background: linear-gradient(to bottom, #222222 0%, #333333 40%, #333333 60%, #222222 100%);
  color: #dddddd;
  font-weight: 700;
  text-decoration: none;
}
.mainnav a:active,
.mainnav a:hover,
.mainnav a:focus,
.site-footer a:active,
.site-footer a:hover,
.site-footer a:focus {
  outline: 0;
  background: #333333;
  color: #ef7d15;
}
/* ***
**
* Header
**
*
*/
@media screen and (min-width: 455px) {
  .site-header {
    padding-top: 3rem;
  }
  .mainnav {
    width: 100%;
    padding-bottom: 1rem;
  }
  .mainnav li {
    float: left;
  }
  .mainnav a {
    background: transparent;
    border: none;
    padding: 0.9rem 0.9rem 0rem 0.9rem;
    color: #dddddd;
  }
  .mainnav a:hover,
  .mainnav a:active,
  .mainnav a:focus {
    background: transparent;
  }
  a.nav-show {
    opacity: 1;
  }
  a.nav-show,
  a.nav-hide {
    display: none;
    opacity: 0;
  }
}
@media screen and (max-width: 455px) {
  /* Slider */
  .mainnav .nav-hide,
  .nav-slider {
    display: none;
    opacity: 0;
  }
  /*
    #nav-open:target .nav-slider, 
    #nav-open:target a.nav-hide {
        display: block;
    }
    #nav-open:target a.nav-show {
        display: none;
    }
    */
}
@media screen and (min-width: 700px) {
  .header-logo {
    position: absolute;
    bottom: -8px;
    padding-left: 0rem;
  }
  .header-logo,
  .header-logo {
    float: left;
  }
  .mainnav ul {
    float: right;
  }
}
/* ***
**
* Footer
**
*
*/
.site-footer p {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 580px) {
  .site-footer p,
  .site-footer a {
    background: transparent;
    border: none;
    padding: 0.9rem 0.9rem 0rem 0rem;
    color: #dddddd;
    display: block;
  }
  .site-footer a:hover,
  .site-footer a:active,
  .site-footer a:focus {
    background: transparent;
  }
  .site-footer p,
  .footer-nav {
    float: left;
  }
  .site-footer ul {
    float: right;
  }
  .site-footer li {
    float: left;
  }
  .site-footer p {
    padding-top: 0;
  }
}
.site-footer {
  background: #222222;
}
.social-link a:before {
  font-family: "icomoon";
  content: '\e614';
  color: #006567;
  padding-right: 0.5rem;
}
.teaser-show {
  -webkit-animation: slide 5s;
  /* Chrome, Safari, Opera */
  animation: slide 8s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Standard syntax */
@keyframes slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.site-teaser figure,
.site-content figure,
.site-header figure {
  margin: 0;
}
/* Teaser */
.site-teaser,
.site-portfolio {
  background: rgba(109, 219, 128, 0.2);
}
.teaser-img {
  float: left;
}
/* content-article */
.site-content {
  background: rgba(115, 139, 208, 0.2);
}
.content-article {
  float: left;
}
.content-article:first-child div {
  padding-right: 0.625em;
  /* 10 px*/
}
.content-article:last-child div {
  padding-left: 0.625em;
  /* 10 px*/
}
.teaser-content {
  position: relative;
}
.teaser-text {
  position: absolute;
  background-color: #fff;
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.9);
  top: 1rem;
  left: 1rem;
  padding: 1rem;
  width: 80%;
  max-width: 352px;
}
.no-js .jsSliderNavBar {
  display: none;
}
@media screen and (min-width: 877px) {
  .teaser-text {
    position: static;
    float: left;
    background-color: transparent;
    margin-top: -3%;
    /* 7% */
  }
}
/* Index */
.introPic {
  border: 1px solid #EF7D1D;
  border-radius: 0.5rem;
}
/*.image-gib {
    width: 9999em;
    position: relative;
}*/
/* Portfolio Images */
.image-gib {
  margin-top: 2rem;
}
.portfolio-figure {
  margin: 0;
}
.image-gib div {
  margin: 0;
  margin-bottom: 2rem;
  float: left;
}
.image-gib-thum {
  /*max-width: 400px;*/
  height: auto;
  padding: 1.250em;
  background-color: #fff;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.image-gib-thum:hover {
  box-shadow: none;
}
.img-nav {
  width: 100px;
  height: auto;
  position: fixed;
  top: 35%;
  background: rgba(255, 255, 255, 0.4);
}
@media screen and (min-width: 400px) {
  .image-gib-thum {
    max-width: 300px;
    margin-right: 1rem;
  }
}
@media screen and (min-width: 800px) {
  .image-gib-thum {
    max-width: 400px;
  }
}
/* Details Liste */
figure.portfolio-img {
  overflow: hidden;
  max-height: 200px;
  margin: 0 0 1.2rem 0;
}
.portfolio-details,
.portfolio-text {
  float: left;
}
.portfolio-details {
  list-style: none;
}
.portfolio-details li {
  font-size: 1.1rem;
  list-style-type: none;
}
.portfolio-details li:before {
  content: "\e618";
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  padding-right: 0.4rem;
  color: #ef7d15;
}
/* accordion */
.site-accordion {
  background: rgba(109, 219, 128, 0.2);
}
.accordion-Menu {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.accordion-Menu li {
  color: #ef7d15;
}
.accordion-Menu li span {
  color: #222222;
  display: inline-block;
}
.accordion-Menu h3 {
  font-family: "Roboto Condensed", sans-serif;
  margin: 0;
  padding: 0;
}
.accordion-Menu h3 a {
  font-size: 1rem;
  display: block;
  font-weight: normal;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0.625rem /*10px*/;
  background: #60709F;
  background: rgba(28, 51, 118, 0.7);
  /*  #1C3376 */
  border: 1px solid #6c80bb;
  /*background: rgb(144, 144, 144);
    background: rgba(255, 255, 255, 0.3);*/
}
.accordion-Menu h3 a:hover,
.accordion-Menu h3 a:active,
.accordion-Menu h3 a:focus {
  background: #EBA153;
  background: rgba(239, 125, 21, 0.7);
  /* #EF7D15 */
}
.accordion-Menu :not(:target) h2 a {
  background: #3b3b3b;
  background: rgba(0, 0, 0, 0.4);
}
.accordion-Menu :not(:target) ul {
  padding: 0;
  margin: 0;
  height: 0;
  opacity: 0;
  visibility: visible;
  overflow: hidden;
}
.accordion-Menu ul {
  height: 17rem /* 272 px */;
  opacity: 1;
  -webkit-transition: transition: height 1.5s ease, opacity 0.5s 0.5s ease, background 0.2s ease;
  transition: height 1.5s ease, opacity 0.5s 0.5s ease, background 0.2s ease;
}
.accordion-Menu :not(:target) {
  -webkit-transition: transition: height 1.5s ease, opacity 0.5s 0.5s ease, background 0.2s ease;
  transition: height 1.5s ease, opacity 0.5s 0.5s ease, background 0.2s ease;
}
.accodion-content {
  margin: 1rem 0;
}
.accordion-Menu h3:before {
  content: '\f05b';
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: left;
  margin-right: 0.625rem /*10px*/;
  padding-top: 0.938rem;
  /* 15px */
  padding-left: 0.625rem /*10px*/;
  font-size: 1.2rem;
  color: #ef7d15;
}
.accordion-Menu :not(:target) h3:before {
  content: '\f05a';
}
@media screen and (min-width: 600px) {
  .accordion-h {
    float: left;
  }
  .accodion-p {
    overflow: hidden;
    padding: 1rem;
  }
}
/* Vita */
.site-vita {
  padding: 0;
}
.vita-pic {
  margin: 0;
  display: none;
}
.vita-pic img {
  max-height: 164px;
}
.vita-h {
  font-size: 1.1rem;
}
.vita-h span {
  color: #222222;
}
.vita-p {
  padding: 0px ;
  margin-top: 0;
}
.vita-p p:first-child {
  margin-top: 0;
}
.vita-container {
  padding-top: 2rem;
}
.vita-container:nth-child(odd) {
  background: rgba(109, 219, 128, 0.2);
}
.vita-container:nth-child(even) {
  background: rgba(115, 139, 208, 0.2);
}
@media screen and (min-width: 600px) {
  .vita-article,
  .vita-p,
  .vita-h {
    float: left;
  }
  .vita-h {
    font-size: 1.29rem;
  }
  .vita-p {
    overflow: hidden;
    padding: 0px 2rem 1.5rem 2rem;
    margin-top: 0;
  }
}
@media screen and (min-width: 962px) {
  .vita-pic {
    float: right;
    display: block;
  }
}
/* Impressum */
.impressum {
  padding-top: 2rem;
}
.impressum p {
  float: left;
  margin-bottom: 0rem;
}
.impressum a {
  color: #ef7d15;
}
.impressum a:hover {
  color: #1f3fa1;
}
.datenschutz {
  font-size: 0.7rem;
}
.site-contact {
  background: rgba(109, 219, 128, 0.2);
}
fieldset {
  border: none;
}
legend {
  border: 0px none;
  display: block;
  width: 100%;
  border-radius: 0.3rem 0.3rem 0px 0px;
  padding: 0.5rem 0px 0.5rem 1rem;
  font-weight: bold;
  background-color: #ef7d15;
  color: #fff;
  letter-spacing: 0.05rem;
}
label {
  display: block;
  margin-bottom: 0.2rem;
  cursor: pointer;
}
.form-box {
  margin: 1rem 0;
}
textarea,
input {
  padding: 0.3rem;
  background-color: #fff;
  color: 000;
  outline: none;
  border: 1px solid #ef7d15;
  box-shadow: 1px 1px 2px #e2e2e2, inset 1px 1px 2px #e2e2e2;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  width: 100%;
  display: block;
}
textarea:focus,
textarea:active,
textarea:hover,
input:focus,
input:active,
input:hover {
  box-shadow: 0 0 5px rgba(23, 149, 190, 0.75);
  border: 1px solid #1795be;
  border: 1px solid rgba(23, 149, 190, 0.1);
}
textarea {
  height: 6rem;
}
.btn-form {
  background: #ef7d15;
  color: #fff;
}
.btn-form:hover {
  background: #1f3fa1;
}
.btn-cancel,
.btn-send {
  margin: 0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.btn-send {
  float: right;
}
.error {
  background-color: rgba(255, 0, 0, 0.2);
  color: #ff0000;
  margin-bottom: 1rem;
  border: 1px solid #ff0000;
}
.error li {
  list-style: none;
}
@media screen and (min-width: 740px) {
  .form {
    max-width: 65%;
  }
}
@media screen and (min-width: 570px) {
  label {
    float: left;
    margin-bottom: 0rem;
  }
  .btn-cancel {
    margin-left: 16.6667%;
  }
  .btn-cancel,
  .btn-send {
    width: 20%;
  }
}