/* Allgemein
    -------------------------------------------------------------------------------------------------------------------*/

html {
    background-color: #FFF;
}

* {
    padding: 0;
    margin: 0;
}

/* Hier brauche ich nicht rechnen */

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

/* Will die horizontale Scrollbar raushaben */

.row {
    margin: 0 0 0 0;
}

/* Inhalt wird der Hoehe angepasst */

#wrapper {
    position: relative;
    width: 100%;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0 !important;
}

body  {
    width: 100%;
    height: 100%;
    font-weight: lighter;
    background-color: #FFF;
    /*overflow-x: hidden;*/
}

#navi {
    font-family: "GloberBook", sans-serif, Helvetica;
    text-decoration: none;
}

a {text-decoration: none;}
li {list-style: none}

img {
    max-width: 90%;
}


/* ---------------------------------------------------------------------------------------------------------------------
    MediaQuery Min Width 480px
----------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 600px) {

    .container {width: 100%;
    }
    /* Header
    -------------------------------------------------------------------------------------------------------------------*/
    header {
        width: 200px;
        height: 96px;
    }

    header a {
        font-family: GloberBook, sans-serif, "Helvetica Neue";
    }

    /* Hamburger Menu
    -------------------------------------------------------------------------------------------------------------------*/

    #menuLink {
        display: none;
        float: left;
        width: 100px;
        height: 48px;
        padding: 8px 0 0 0;
        background: #444444;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        position: fixed;
        top:0;
        right:0;
    }

    .menuLink ul {
        position: relative;
        float: left;
        left: 50%;
        margin: 0 auto;
    }

    .menuLink li {
        position: relative;
        float: left;
        right: 50%;
        margin:0 0 0 0;
        padding:0 0 0 2px;
        list-style: none;
    }

   .hamburgerIconImpl {
        background-image: url("../img/common/hamburgerIcon.svg");
        background-repeat: no-repeat;
        float: left;
        width: 24px;
        height: 24px;
        margin: -2px 0 0 0;

   }

   .hamburgerIconText {
       font-family: thirstyroughregular, sans-serif, "Helvetica Neue";
       font-size: 16px;
       color:#edebdd;
   }

    /* End of Hamburger Menu
    -------------------------------------------------------------------------------------------------------------------*/

    .headerContent {
        width: 200px;
        height: 96px;
        display: block;
        left: 0;
        padding: 32px 0 0 14px;
    }
     /* Index Header*/

    .headerContentIndex {
        width: 200px;
        height: 96px;
        display: block;
        left: 0;
        padding: 32px 0 0 14px;
    }

    .headerTypePureIndex h1 {
        font-family: GloberBlack, sans-serif, "Helvetica Neue";
        font-size: 18px;
        color: #edebdd;

    }

    .headerTypePureIndex h1 a{
        font-family: GloberBlack, sans-serif, "Helvetica Neue";
        font-size: 18px;
        color: #edebdd;
        text-decoration: none;
    }

    /* End Index Header */

    .headerTypePureIndex {
        opacity: 1;
        position: absolute;
        margin: -115px 8px -5px 40px;
        color: #edebdd;
    }

    #navi:hover .headerTypePureIndex {
        opacity: 0.8;
    }

    .headerSignetPure {
        position: relative;
        display: block;
        float: left;
        width: 32px;
        height: 32px;
        left: 0;
        margin: 0 8px 0 0;
    }

    .headerSignetPure a {
        text-decoration: none;
    }

    .headerTypePure {
        opacity: 0;
        position: absolute;
        margin: -115px 8px -5px 40px;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        color: #edebdd;
    }

    .headerTypePure h1 {
        font-family: GloberBlack, sans-serif, "Helvetica Neue";
        color: #FFF;
        font-size: 18px;
        display: block;
    }

    .headerTypePure h1 a {
        font-family: GloberBlack, sans-serif, "Helvetica Neue";
        color: #edebdd;
        font-size: 18px;
        text-decoration: none;
    }

    .subHeadline {
        opacity: 0.8;
        position: relative;
        font-family: Book, sans-serif, "Helvetica Neue";
        color: #edebdd;
        font-size: 12px;
        z-index: 9997;
        margin: -11px 0 0 0;
    }

    #navisub01:hover .headerTypePure {
        opacity: 1;
    }

    #navisub02:hover .headerTypePure {
        opacity: 1;
    }

    #navisub03:hover .headerTypePure {
        opacity: 1;
    }

    .headerContentSignet {
        width: 50px;
        height: 96px;
        margin: 0 0 0 0;
    }

    /* Content Index
    ----------------------------------------------------------------------------------------------------------------------*/
    #indexContent {
        width: 50%;
        height: 100%;
        position: relative;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        text-align: center;
        margin: 0 25% 0 25%;
    }

    .indexContentLogo {
        width: 800px;
        float: left;
        margin: 60px 0 16px -16px;
    }

    .indexContentClaim {
        float: left;
        font-family: brushup-webfont, sans-serif, "Helvetica Neue";
        font-size: 40px;
        color: #444444;
        padding:0 0 0 0;
        margin: 0 0 0 30px;
    }

    .indexContentImage {
        float: left;
        margin: 48px 0 48px 7px;
    }

    .bigLink:hover a{
        color: #e7553c;
        text-decoration: none;
    }

    .bigLink a{
        color: #444444;
        text-decoration: none;
    }

    ul.unsortedListIndex {
        width: 100%;
        height: 100%;
        clear: both;
        font-size: 24px;
        margin: 0 0 80px 30px;
    }

    ul.unsortedListIndex li:first-child {
        float: left;
        clear: both;
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        color: #444444;
    }

    ul.unsortedListIndex li:last-child {
        width: 30px;
        height: 30px;
        float: left;
        list-style: none;
        display: inline;
        margin: 3px 0 0 16px;
        cursor: pointer;
    }

    .listIndexIcon {
        background-image: url("../img/indexStuff/pfeil1.svg");
        background-repeat: no-repeat;
    }
    .listIndexIcon:hover {
        background-image: url("../img/indexStuff/pfeil2.svg");
        background-repeat: no-repeat;
    }

    .unsortedListIndex:hover .bigLink a {
        color: #e7553c ;
    }

    .linkToWork:hover {
        width: 30px;
        height: 30px;
        text-decoration: none;
    }

    .unsortedListIndex:hover .listIndexIcon {
        background-image: url("../img/indexStuff/pfeil2.svg");
        background-repeat: no-repeat;
    }

    #stoerer {
        background-image: url("../img/indexStuff/stoerer.svg");
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        position: absolute;
        right: 5px;
        bottom: 48px;
        z-index: 10000;
    }

    .stoererText {
        margin: 0 0 0 18px;
        font-family: thirstyroughregular, sans-serif, "Helvetica Neue";
        font-size: 14px;
        line-height: 18px;
        color: #F1F1F1;
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }

    .stoerer_02 {
        position: absolute;
        right: 0;
        top: 0;
        width: 184px;
        height: 184px;
        z-index: 10999;
        background-image: url("../img/common/stoerer.png");
    }

    /* Common Sub Pages - gilt fuer alle Seiten
    ------------------------------------------------------------------------------------------------------------------*/
    #subPageHead {
        padding: 22px 0 0 128px;
    }

    #container {
        padding: 22px 0 0 128px;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
    }

    /* Immer das !Important im Nachhinein hinzufuegen, sonst klappt es nicht*/
    .containerExpanded {
        padding: 22px 0 0 240px !important;
    }

    #pageTitlePort {
        position: absolute;
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        float: left;
        font-size: 3em;
        color: #626262;
        margin: 26px 0 10px 100px;
    }

    .titleIcon {
        position: relative;
        float: left;
        margin: 5px 0 0 0;
        padding: 1px;
    }

    /* Content Sub About
    ------------------------------------------------------------------------------------------------------------------*/
    /* Logo und Ueberschrift */
    #pageTitleAbout {
        position: absolute;
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        float: left;
        font-size: 3em;
        color: #3698ab;
        margin: 26px 0 10px 100px;
    }

    #aboutContent {
        padding: 22px 0 0 128px;
        padding: 22px 0 0 128px;
        -webkit-transition: 0.8s all;
        -moz-transition: 0.8s all;
        -ms-transition: 0.8s all;
        -o-transition: 0.8s all;
        transition: 0.8s all;
        transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
        -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
    }

    .aboutContentExpanded {
        padding: 22px 0 0 240px !important;
    }

    #aboutTitle {
        position: absolute;
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        float: right;
        font-size: 2em;
        color: #3698ab;
        padding: 0 0 10px 50px;
    }

    .aboutIntroduction {
        width: 100%;
        height: 100%;
    }

    .aboutPhoto {
        padding: 48px 0 0 16px;
    }

    .aboutIntroductionName {
        font-family: GloberSemiBold, sans-serif, "Helvetica Neue";
        font-size: 40px;
        color: #444444;
        float: left;
        position: relative;
        margin: -366px 0 0 400px;
    }

    .aboutIntroductionSubline{
        font-family: GloberBook, sans-serif, "Helvetica Neue";
        font-size: 26px;
        float: left;
        position: relative;
        margin: -306px 0 0 404px;
        color: #3698ab;
    }

    .aboutSubHeadline {
        margin: 8px 0 16px 0;
        font-family: GloberBook, sans-serif, "Helvetica Neue";
        font-size: 26px;
        color: #3698ab;
    }

    .aboutHeadline {
        margin: 32px 0 16px 0;
        font-family: GloberBook, sans-serif, "Helvetica Neue";
        font-size: 26px;
        color: #444444;
    }

    .aboutTopics {
        margin: 16px 0 0 0;
        font-family: GloberSemiBold, sans-serif, "Helvetica Neue";
        font-size: 16px;
        color: #3698ab;
    }

    .aboutTopics a{
        text-decoration: underline;
        font-size: 16px;
        color: #3698ab;
    }

    .aboutHeadlineDistances {
        margin: 8px 0 0 0;
    }

    .indentation:first-child {
        margin: 0 0 4px 8px;
    }

    .indentation {
        margin: 0 0 0 16px;
    }

    .indentation a{
        text-decoration: underline;
        color: #444444;
    }

    .aboutContactList li{
        display: inline;
        list-style: none;
    }

    .aboutContactList li:first-child{
        padding: 8px 8px 0 0;
    }


    /* Content Sub Impressum
    ----------------------------------------------------------------------------------------------------------------------*/
    /* Logo und Ueberschrift */

    #container {
        -webkit-transition: 0.8s all;
        -moz-transition: 0.8s all;
        -ms-transition: 0.8s all;
        -o-transition: 0.8s all;
        transition: 0.8s all;
        transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
        -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
    }


    #pageTitleImpressum {
        position: absolute;
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        float: left;
        font-size: 3em;
        color: #ff9d00;
        margin: 26px 0 10px 100px;
    }

    #impressumContent {
        padding: 22px 0 0 128px;
        -webkit-transition: 0.8s all;
        -moz-transition: 0.8s all;
        -ms-transition: 0.8s all;
        -o-transition: 0.8s all;
        transition: 0.8s all;
        transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
        -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
    }

    #impressumLogoPosition{
        display: block;
        float:left;
        margin: 6px 0 0 15px;
    }

    .impressumContentExpanded {
        padding: 0 0 0 240px !important;
    }
    
   .container section:first-child {
        padding: 20px 0 48px 0;
    }

    .container article {
        padding: 24px 0 0 0;
    }

    .container article:first-child {
        padding: 16px 0 0 0;
        position: relative;
    }

    .impressumheadline {
        font-family: GloberBook, sans-serif, "Helvetica Neue";
        font-size: 20px;
        margin: 50px 0 0 -3px;
    }

    .iconTitle {
        position: relative;
        float: left;
        margin: 28px 0 0 -16px;
    }

    .impressumTitle {
        position: absolute;
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        float: right;
        font-size: 2em;
        color: #ff9d00;
        padding: 0 0 10px 50px;
    }

    /* Angaben */

    .impressumtext {
        font-family: GloberBook, sans-serif, "Helvetica Neue";
        float: left;
        color: #444444;
        margin: 16px 0 0 0px;
    }

    .paragraphHeadline {
        font-family: GloberSemiBold, sans-serif, "Helvetica Neue";
        font-size: 16px;
        color: #ff9d00;
    }

    .rechtliches {
        font-family: GloberLight, sans-serif, "Helvetica Neue";
        font-size: 14px;
    }

    section:last-child {
        padding: 0 0 48px 0;
    }

    .ausrichtung {
        padding: 0 0 0 -20px;
    }

    .wolken {
        padding: 9px 0 0 0;
    }

    /* Navigation
    ----------------------------------------------------------------------------------------------------------------------*/
    #navi {
        background: url("../img/BGAlt.svg");
        background-repeat: no-repeat;
        width: 200px;
        height: 100%;
        float: left;
        overflow: hidden;
        margin-right: 20px;
        cursor: default;
        position: fixed;
        left: 0;
        z-index: 9998;
    }

    #navisub01 {
        background: url("../img/bgAlt_sub_01.svg");
        background-repeat: no-repeat;
        background-position: left -112px top;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        width: 88px;
        height: 100%;
        float: left;
        overflow: hidden;
        margin-right: 20px;
        cursor: default;
        position: fixed;
        left: 0;
        z-index: 9998;
    }

    #navisub02 {
        background: url("../img/bgAlt_sub_02.svg");
        background-repeat: no-repeat;
        background-position: left -112px top;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        width: 88px;
        height: 100%;
        float: left;
        overflow: hidden;
        margin-right: 20px;
        cursor: default;
        position: fixed;
        left: 0;
        z-index: 9998;
        opacity: 1;
    }

    #navisub03 {
        background: url("../img/bgAlt_sub_03.svg");
        background-repeat: no-repeat;
        background-position: left -112px top;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        width: 88px;
        height: 100%;
        float: left;
        overflow: hidden;
        margin-right: 20px;
        cursor: default;
        position: fixed;
        left: 0;
        z-index: 9998;
    }

    #navi:hover {
        background: url("../img/BGAlt.svg");
        background-repeat: no-repeat;
        width: 200px;
    }

    #navisub01:hover {
        background: url("../img/BGAlt.svg");
        background-repeat: no-repeat;
        width: 200px;
    }

    #navisub02:hover {
        background: url("../img/BGAlt.svg");
        background-repeat: no-repeat;
        width: 200px;
    }

    #navisub03:hover {
        background: url("../img/BGAlt.svg");
        background-repeat: no-repeat;
        width: 200px;
    }

    .naviTab {
        width: 200px;
        height: 48px;
        color: #bac4c6;
    }

    .naviTab:hover {
        color: #F1F1F1;
    }

    .naviTabActive {
        width: 200px;
        height: 48px;
        background-color: transparent;
    }

    .naviTabStatic:hover {
        background-color: rgb(240, 240, 240);
        color: rgb(95, 95, 95);
    }

    .naviTab:hover a {
        text-decoration: none;
        cursor: hand;
    }

    .navSensitive:hover {
        cursor: hand;
        background-color: #f9eeda;
        /* cursor:url(cursor.gif), move; */
    }

    .navGraphic {
        float: left;
        width: 50px;
        height: 48px;
        display: block;
        padding: 12px 0 0 26px;
        opacity: 0.8;
    }

    /* Index OnDefault Color */

    .navTextIndex {
        opacity: 0.8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        overflow: hidden;
        color: #fff8ed;
        padding: 14px 0 0 17px;
        font-family: Globerbook, 'open-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .navTextIndex:hover {
        opacity: 1;
        color: #e7553c !important;
    }

    .navText {
        opacity: 0;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        overflow: hidden;
        color: #fff8ed;
        padding: 14px 0 0 17px;
        -webkit-transition: 0.2s all linear;
        -moz-transition: 0.2s all linear;
        -ms-transition: 0.2s all linear;
        -o-transition: 0.2s all linear;
        transition: 0.2s all linear;
        font-family: Globerbook, 'open-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .navText:hover {
        color: #e7553c !important;
    }

    #navi:hover .navText {
        opacity: .8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 17px;
        color: #fff8ed;
    }

    #navisub01:hover .navText {
        opacity: .8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 17px;
        color: #fff8ed;
    }

    #navisub02:hover .navText {
        opacity: .8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 17px;
        color: #fff8ed;
    }

    #navisub03:hover .navText {
        opacity: .8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 17px;
        color: #fff8ed;
    }

    .navTextActive {
        opacity: 0;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 17px;
        color: #fff8ed;
        font-family: Globerbook, 'open-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    }

    #navi:hover .navTextActive {
        opacity: 0.8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 8px;
        color: #444444;
    }

    #navisub01:hover .navTextActive {
        opacity: 0.8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 16px;
        color: #fff8ed;
    }

    #navisub02:hover .navTextActive {
        opacity: 0.8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 16px;
        color: #fff8ed;
    }

    #navisub03:hover .navTextActive {
        opacity: 0.8;
        height: 36px;
        width: 142px;
        float: left;
        display: block;
        padding: 14px 0 0 16px;
        color: #fff8ed;
    }
    /* Hamburger Meu
   ---------------------------------------------------------------------------------------------------------------*/

    /* Links zu Skype/Facebook etc.
       -------------------------------------------------------------------------------------------------------------------*/
    .getContact {
        width: 200px;
        height: 100px;
    }

    .getContact:hover .jellyfish {
        opacity: 0.1;
        cursor: hand;
    }

    .jellyfish {
        -webkit-transition: .2s all linear;
        -moz-transition: .2 all linear;
        -ms-transition: .2 all linear;
        -o-transition: .2 all linear;
        transition: .2 all linear;
        height: 66px;
        width: 23px;
        background-image: url("../img/icns/jellyfish.png");
        background-repeat: no-repeat;
        margin: 8px 0 0 26px;
        cursor: hand;
    }

    .tooltipServices {
        position: absolute;
        -webkit-transition: .2s all linear;
        -moz-transition: .2 all linear;
        -ms-transition: .2 all linear;
        -o-transition: .2 all linear;
        transition: .2 all linear;
        width: 48px;
        height: 126px;
        opacity: 0;
        background-color: #555553;
        margin: -65px 0 0 60px;
        padding: 4px 4px 4px 4px;
        border-radius: 3px;
    }

    .tooltipServices li {
        margin: 8px 0 16px 9px;
    }

    .tooltipServices p {
        line-height: 16px;
        padding: 3px 0 0 0;
        font-family: GloberSemi, sans-serif, "Helvetica Neue";
        font-size: 14px;
    }

    .tooltipServices a:hover {
        text-decoration: none;
        opacity: 0.5;
    }

    .getContact:hover .tooltipServices {
        opacity: 1.0;
    }

    /* Footer
    ----------------------------------------------------------------------------------------------------------------------*/
    #box {
        position: fixed;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 -15px 0px;
        z-index: 10500;
        -webkit-transition: 0.1s all;
        -moz-transition: 0.1s all;
        -ms-transition: 0.1s all;
        -o-transition: 0.1s all;
        transition: 0.1s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
    }

    .boxZeroDegree {
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
    }

    .boxDefault {
        -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
    }

    .head {
        height: 32px;
        background-color: rgba(68, 68, 68, 1);
        width: 100%;
        -webkit-transition: 0.6s all;
        -moz-transition: 0.6s all;
        -ms-transition: 0.6s all;
        -o-transition: 0.6s all;
        transition: 0.6s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        cursor: pointer;
        padding: 2px 0 0 0;
    }

    .head:hover span {
        color: #e7553c;
        -webkit-transition: 0.6s all;
        -moz-transition: 0.6s all;
        -ms-transition: 0.6s all;
        -o-transition: 0.6s all;
        transition: 0.6s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
    }

    .head:hover #iconImpressum {
        background-image: url("../img/icns/contactOpenIconRed.svg");
        background-repeat: no-repeat;
        width: 12px;
        height: 12px;
        float: right;
        margin: 3px 0 0 8px;
        -webkit-transition: 0.6s all;
        -moz-transition: 0.6s all;
        -ms-transition: 0.6s all;
        -o-transition: 0.6s all;
        transition: 0.6s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
    }

    .boxContent h1 {
        font-family: GloberSemiBold, sans-serif, "Helvetica Neue";
        font-size: 12px;
        width: auto;
        height: auto;
        color: #edebdd;
        margin: 24px 0 0 0;
        opacity: 0.7;
    }
    .ContactLink {
        font-family: thirstyroughregular, sans-serif, "Helvetica Neue";
        color: #edebdd;
        font-size: 13px;
        position: absolute;
        right: 0;
        margin: 1px 8px 0 0;
    }
    #iconImpressum {
        background-image: url("../img/icns/contactOpenIcon.svg");
        background-repeat: no-repeat;
        width: 12px;
        height: 12px;
        float: right;
        margin: 3px 0 0 8px;
        -webkit-transition: 0.6s all;
        -moz-transition: 0.6s all;
        -ms-transition: 0.6s all;
        -o-transition: 0.6s all;
        transition: 0.6s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
    }

    .iconImpressumKlasse {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .iconImpressumKlasseRotated {
        -moz-transform: rotate(180deg) !important;
        -ms-transform: rotate(180deg) !important;
        -o-transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
    }

    .head span a {
        text-decoration: none;
        color: #edebdd;
    }

    .head span a:hover {
        text-decoration: none;
        color: #e7553c;
    }

    .boxContent {
        opacity: 0;
        height: 0;
        overflow: hidden;
        background-color: rgba(68, 68, 68, 1);
        padding: 0 0 0 88px;
    }

    ul.IconListFooter {
        text-align: left;
    }

    ul.IconListFooter li:last-child {
        opacity: 1;
    }
    
    ul.IconListFooter li {
        opacity: 0.7;
        list-style: none;
        display: inline;
        padding: 0;
        margin: 0 8px;
    }

    ul.IconListFooter li:hover {
        opacity: 1;
    }
    /* Get in Touch & Icon */
    .tile_1 {
        position: relative;
        float: left;
        width: 49%;
        height: 400px;
        min-width: 10%;
        background-color: red;
        margin: 8px;
    }

    .tile_2 {
        position: relative;
        float: left;
        width: 49%;
        height: 400px;
        min-width: 10%;
        background-color: blue;
        margin: 8px;
    }

    .tText {
        color: #269abc;
        margin: 0 4px 0 0;
    }

    .linktoOldWebsite{
        color: #edebdd;
        font-family: thirstyroughregular, sans-serif, "Helvetica Neue";
        font-size: 16px;
        cursor:pointer;
        text-decoration: none;
    }

    .linktoOldWebsite a{
        text-decoration: none;
        color: #edebdd;
    }

    /* Pixelsektor Logo Animation auf Impressums - gilt für alle Auflösungen
    -------------------------------------------------------------------------------------------------------------------*/

    #animation {
        margin: 20px 0 0 0px;
        width: auto;
        height: 60px;
    }

    #ps_1 {
        opacity: 0.1;
        position: absolute;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/01_ps_p.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        z-index: 9999;
    }

    .ps_1_animate {
        opacity: 1 !important;
    }

    #ps_2 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/02_ps_i.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.1s all;
        -moz-transition: 0.1s all;
        -ms-transition: 0.1s all;
        -o-transition: 0.1s all;
        transition: 0.1s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        z-index: 9998;
    }

    .ps_2_animate {
        position: absolute;
        left: 44px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_3 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/03_ps_x.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.2s all;
        -moz-transition: 0.2s all;
        -ms-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9997;
    }

    .ps_3_animate {
        left: 88px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_4 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/04_ps_e.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.3s all;
        -moz-transition: 0.3s all;
        -ms-transition: 0.3s all;
        -o-transition: 0.3s all;
        transition: 0.3s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9996;
    }

    .ps_4_animate {
        left: 132px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_5 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/05_ps_l.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.4s all;
        -moz-transition: 0.4s all;
        -ms-transition: 0.4s all;
        -o-transition: 0.4s all;
        transition: 0.4s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9995;
    }

    .ps_5_animate {
        left: 176px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_6 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/06_ps_s.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -ms-transition: 0.5s all;
        -o-transition: 0.5s all;
        transition: 0.5s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9994;
    }

    .ps_6_animate {
        left: 220px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_7 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/04_ps_e.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.6s all;
        -moz-transition: 0.6s all;
        -ms-transition: 0.6s all;
        -o-transition: 0.6s all;
        transition: 0.6s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9993;
    }

    .ps_7_animate {
        left: 264px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_8 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/08_ps_k.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.7s all;
        -moz-transition: 0.7s all;
        -ms-transition: 0.7s all;
        -o-transition: 0.7s all;
        transition: 0.7s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9992;
    }

    .ps_8_animate {
        left: 308px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_9 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/09_ps_t.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.8s all;
        -moz-transition: 0.8s all;
        -ms-transition: 0.8s all;
        -o-transition: 0.8s all;
        transition: 0.8s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9991;
    }

    .ps_9_animate {
        left: 352px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_10 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/10_ps_o.svg");
        background-repeat: no-repeat;
        -webkit-transition: 0.9s all;
        -moz-transition: 0.9s all;
        -ms-transition: 0.9s all;
        -o-transition: 0.9s all;
        transition: 0.9s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9990;
    }

    .ps_10_animate {
        left: 396px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    #ps_11 {
        opacity: 0.1;
        position: absolute;
        float: left;
        width: 40px;
        height: 40px;
        left: 0;
        background-image: url("../img/animation/11_ps_r.svg");
        background-repeat: no-repeat;
        -webkit-transition: 1s all;
        -moz-transition: 1s all;
        -ms-transition: 1s all;
        -o-transition: 1s all;
        transition: 1s all;
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        z-index: 9989;
    }

    .ps_11_animate {
        left: 440px !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

}

/* CSS Changes regarding Bootstrap
----------------------------------------------------------------------------------------------------------------------*/



/* Clearfix by Nicolas Gallagher
   -------------------------------------------------------------------------------------------------------------------*/

.clearfix:before,
.clearfix:after {
    content:" ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix:before {
    *zoom: 1;
}

/* Progress Bar Loading Page
    -------------------------------------------------------------------------------------------------------------------*/

.pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;

    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

.pace-inactive {
    display: none;
}