/*----------------------------------------------------------------------------------------------------------------------
Color - Code:
------------------------------------------------------------------------------------------------------------------------
pink:   #EB108B
/*----------------------------------------------------------------------------------------------------------------------
    Global Styles for all resolutions go Here
----------------------------------------------------------------------------------------------------------------------*/
    /*--> Helper Classes <------------------------------------------------------------------------*/
    .clearfix{
        clear: both;
    }
    .display{
        display: block;
    }
    .display_none{
        display: none;
    }
    .visible{
        visibility: visible;
    }
    .invisible{
        visibility: hidden;
    }

    /*--> body / html <---------------------------------------------------------------------------*/
    body {
        font-family: 'Exo', sans-serif;
        color: #000;

        background: #ffffff; /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover,  #ffffff 52%, #fcfcfc 70%, #f2f2f2 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(52%,#ffffff), color-stop(70%,#fcfcfc), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 52%,#fcfcfc 70%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover,  #ffffff 52%,#fcfcfc 70%,#f2f2f2 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover,  #ffffff 52%,#fcfcfc 70%,#f2f2f2 100%); /* IE10+ */
        background: radial-gradient(ellipse at center,  #ffffff 52%,#fcfcfc 70%,#f2f2f2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

/*----------------------------------------------------------------------------------------------------------------------
    smallest
----------------------------------------------------------------------------------------------------------------------*/

    /*---------- Sidebar -------------------------------------------------------------------------*/
    nav a{
        display: block;
        height: 50px;
        width: 100%;
        border-bottom: 1px solid lightgray;
        text-decoration: none;

        background: #fcfcfc; /* Old browsers */
        background: -moz-linear-gradient(top,  #fcfcfc 0%, #f7f7f7 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #fcfcfc 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #fcfcfc 0%,#f7f7f7 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #fcfcfc 0%,#f7f7f7 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #fcfcfc 0%,#f7f7f7 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
    }

    nav a figure{
        margin: 0;
        padding: 10px 0 0 0;
    }

    nav a figure img {
        width: 20px;
        float: right;
        margin-right: 10px;
        
        -webkit-transition: width 0.3s;-moz-transition: width 0.3s;-ms-transition: width 0.3s;-o-transition: width 0.3s;transition: width 0.3s;
    }

    nav a figcaption{
        font-size: 1.4em;
        font-weight: 600;
        color: #3b3b3b;
        margin-left: 10px;
        
        -webkit-transition: font-size 0.3s;-moz-transition: font-size 0.3s;-ms-transition: font-size 0.3s;-o-transition: font-size 0.3s;transition: font-size 0.3s;
    }
    nav a:hover{
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 93%, #e8007f 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(93%,#ffffff), color-stop(100%,#e8007f)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 93%,#e8007f 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 93%,#e8007f 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 93%,#e8007f 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 93%,#e8007f 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8007f',GradientType=0 ); /* IE6-9 */
    }
    nav a:hover figure img{
        width: 30px;
    }

    nav a:hover figure figcaption{
        font-size: 1.5em;
    }

    /*---------- Footer -------------------------------------------------------------------------*/
    footer{
        color: gray;
        margin: 5px 0 0 5px;
    }

    footer a{
        color: gray;
    }

    /*---------- Home ----------------------------------------------------------------------------*/
    #home_container{
        display: none;
    }
    #logo_home{
        border: solid 1px #bdbdbd;
        border-top: none;
        border-left: none;
        width: 200px;
        height: 80px;
        border-bottom-right-radius: 10px;
        margin: 0;
        margin-top: -1px;
        margin-bottom: 20px;
        margin-left: -1px;
        overflow: hidden;
    }
    #home_teaser{
        background-color: lightgray;
        width: 100%;
        margin-top: 4px;
        border: solid 1px #bdbdbd;
        text-align: justify;
        font-size: 14px;
    }
    #home_teaser p{
        width: 94%;
        margin: auto;
        padding-bottom: 20px;
    }
    #anfahrt_home{
        padding: 0;
        width: 94%;
        margin: auto;
    }
    #anfahrt_home img{
        width: 100%;
    }
    /*---------- referenzen ----------------------------------------------------------------------*/
    #referenzen_h1{
        background-color: lightgray;
        width: 100%;
        padding: 20px;
    }
    #referenzliste{
        width: 100%;
        list-style-type: none;
        padding: 0;
        margin: auto;
        margin-top: 10px;
        border-top: solid 1px lightgray;
        border-bottom: solid 1px lightgray;
        background-color: #fff;
    }
    .referenz{
        border-bottom: solid 1px lightgray;
        width: 90%;
        margin: auto;
        padding: 6px;
        color: #EB108B;
        font-size: 16px;
        -webkit-transition: color 1s;-moz-transition: color 1s;-ms-transition: color 1s;-o-transition: color 1s;transition: color 1s;
    }
    .referenz:last-child {
        border-bottom: none;
    }
    .referenz:hover {
        background-color: #EB108B;
    }
    .referenz:hover .referenz_link{
        color: #fff;
    }
    .referenz:active{
        background-color: lightgray;
    }
    .referenz_titel{
        margin: 0px;
        margin-top: 4px;
        display: inline-block;
    }
    .referenz_link{
        display: block;
        color: #EB108B;
        height: 30px;
        padding: 2px;
    }
    .bubble_description{
        margin: 0;
        margin-right: 20px;
        margin-top: 4px;
        float: right;
        display: inline-block;
        color: darkgray;
    }
    .project_count{
        display: inline-block;
        margin: 0;
        padding: 6px;
        background-color: grey;
        color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        text-align: center;
        font-size: 14px;
        float: right;

        -webkit-transition: background-color 1s;-moz-transition: background-color 1s;-ms-transition: background-color 1s;-o-transition: background-color 1s;transition: background-color 1s;
    }
    .referenz:hover .project_count{
        background-color: #fff;
        color: #000;
    }
    .referenz:after{
        content: ".";
        clear: both;
        display: block;
        visibility: hidden;
        height: 0px;
    }
    /*---------- kontakt -------------------------------------------------------------------------*/
    #kontakt header{
        width: 60%;
        max-width: 300px;
        float: right;
        padding: 30px 10px 30px 30px;
        margin-top: 20px;
        margin-bottom: 5px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: lightgray;
        border: solid 1px #bdbdbd;
        text-align: right;
    }

    #kontakt h1{
        font-weight: 600;
        font-size: 2em;
        color: #EB108B;
        margin-top: 0;
        margin-bottom: 10px;
        text-shadow: 1px 1px #000;
    }

    #kontakt h2{
        font-weight: 400;
        font-size: 1.2em;
        color: #000;
        margin: auto;
    }

    #map{
        margin-top: 20px;
    }

    #anfahrt img{
        width: 100%;
    }

    #adress{
        font-size: 14px;
        width: 80%;
        max-width: 350px;
        background-color: lightgray;
        border: solid 1px #bdbdbd;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 4px;
    }

    #adress p{
        color: #000;
        margin-left: 4px;
    }

    #adress p a{
        text-decoration: none;
        color: #EB108B;
    }

    .bold{
        font-weight: bold;
    }
    /*---------- team ---------------------------------------------------------------------------*/
    .team {
        width: 100%;
        padding: 50px 0 50px 0;
    }
    .team:nth-of-type(odd) {
        border-top: solid 1px #EB108B;
        border-bottom: solid 1px #EB108B;
    }
    .team .polaroid_container {
        width: 250px;
        height: 304px;
        margin: auto;

        border: solid 1px #cdcdcd;
        -webkit-box-shadow: 1px 0px 14px 0px rgba(50, 50, 50, 0.63);
        -moz-box-shadow:    1px 0px 14px 0px rgba(50, 50, 50, 0.63);
        box-shadow:         1px 0px 14px 0px rgba(50, 50, 50, 0.63);
    }
    .team .polaroid_container:first-child{
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    .team .polaroid_container:nth-child(2){
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    .team .polaroid_container:last-child{
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    .team .polaroid_container:last-child {
        margin-bottom: 70px;
    }
    .bottom_logo{
        display: none;
    }
    /*mitarbeiter 1-----------------------------------------------------------------------------------*/
    #team_img_1_1{
        position: relative;
        z-index: 0;
        background-image: url('../bilder/team/Helium_01_01.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_1_2{
        position: relative;
        z-index: 2;
        background-image: url('../bilder/team/Helium_01_02.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_1_3{
        position: relative;
        z-index: 1;
        background-image: url('../bilder/team/Helium_01_03.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    /*mitarbeiter 2-----------------------------------------------------------------------------------*/
    #team_img_2_1{
        position: relative;
        z-index: 5;
        background-image: url('../bilder/team/Helium_02_01.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_2_2{
        position: relative;
        z-index: 4;
        background-image: url('../bilder/team/Helium_02_02.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_2_3{
        position: relative;
        z-index: 3;
        background-image: url('../bilder/team/Helium_02_03.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    /*mitarbeiter 3-----------------------------------------------------------------------------------*/
    #team_img_3_1{
        position: relative;
        z-index: 7;
        background-image: url('../bilder/team/Helium_03_01.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_3_2{
        position: relative;
        z-index: 6;
        background-image: url('../bilder/team/Helium_03_02.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_3_3{
        position: relative;
        z-index: 8;
        background-image: url('../bilder/team/Helium_03_03.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    /*mitarbeiter 4-----------------------------------------------------------------------------------*/
    #team_img_4_1{
        position: relative;
        z-index: 9;
        background-image: url('../bilder/team/Helium_04_01.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_4_2{
        position: relative;
        z-index: 10;
        background-image: url('../bilder/team/Helium_04_02.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #team_img_4_3{
        position: relative;
        z-index: 11;
        background-image: url('../bilder/team/Helium_04_03.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    /*---------- projekte ----------------------------------------------------------------------------*/
    .wrapper_projekte{
        max-width: 1024px;
        margin: auto;
    }
    .single_project{
        margin-bottom: 20px;
    }
    .project_caption{
        margin: 0;
        background-color: lightgray;
        width: 99.1%;
        height: 34px;
        padding-top: 10px;
        padding-left: 10px;
        color: #EB108B;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .accordeon{
        display: none;
    }
    .accordeon:nth-of-type(1){
        display: block;
    }
    .customer_name{
        color: #4d4d4d;
        border-bottom: solid 1px #d3d3d3;
        padding: 4px;
    }
/*----------------------------------------------------------------------------------------------------------------------
    start 480px
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 480px){

    /*---------- kontakt -------------------------------------------------------------------------*/
    #map{
        max-width: 600px;
        margin: auto;
        margin-top: 20px;
    }
}
/*----------------------------------------------------------------------------------------------------------------------
    ende 480px
----------------------------------------------------------------------------------------------------------------------*/

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

    /*---------- Home ----------------------------------------------------------------------------*/
    #home_teaser {
        margin-top: 25px;
    }
    /*---------- kontakt -------------------------------------------------------------------------*/
    nav{
        height: 280px;
    }
    nav a{
        width: 49.82%;
        height: 150px;
        float: left;
        border-right: solid 1px lightgray;
    }

    nav a figure img{
        width: 50px;
    }

    nav a figure figcaption{
        font-size: 1.8em;
    }

    nav a:hover figure figcaption {
        font-size: 2em;
    }

    nav a:hover figure img{
        width: 40px;
    }

    #kontakt header{
        float: none;
        border-radius: 0;
        margin-top: 26px;
        width: 100%;
        max-width: none;
        text-align: left;
    }

    #adress{
        border-radius: 0;
        width: 100%;
        max-width: none;
    }
    /*---------- referenzen ----------------------------------------------------------------------*/
    #iphone_body {
        background-image: url('../bilder/referenzen/iphone5.png');
        background-size: 582px;
        background-repeat: no-repeat;
        width: 592px;
        height: 1205px;
        margin: auto;
        margin-top: 40px;
    }
    #referenzliste{
        max-width: 480px;
        height:800px;
        position: relative;
        top: 200px;
        overflow: auto;
    }
    #referenzen_h1{
        margin: 0 !important;
        padding: 0;
        width: 200px;
        position: relative;
        top: 185px;
        left: 65px;
        background-color: #ffffff;
        font-size: 20px;
        font-weight: 600;
    }
    /*---------- team -------------------------------------------------------------------------*/
    .team {
        padding-top: 40px;
        padding-bottom: 280px;
        position: relative;
        background-color: #ffffff;
    }
    .team:after {
        content: ".";
        clear: both;
        display: block;
        visibility: hidden;
        height: 0;
    }
    .team .polaroid_container{
        width: 250px;
        height: 300px;
    }
    .polaroid_stopper{
        position:relative;
        max-width: 1100px;
        height: 300px;
        margin: auto;
    }
    /*---------- mitarbeiter 1 ------------------------*/
    #team_img_1_1 {
        position: absolute;
        top: 20%;
        left: 9%;
        z-index: 0;
        -ms-transform: rotate(7deg); /* IE 9 */
        -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
        transform: rotate(7deg)
    }
    #team_img_1_2 {
        position: absolute;
        top: 18%;
        left: 38%;
        z-index: 3;
        -ms-transform: rotate(-7deg); /* IE 9 */
        -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
        transform: rotate(-7deg)
    }
    #team_img_1_3 {
        position: absolute;
        top: 25%;
        left: 60%;
        z-index: 2;
        -ms-transform: rotate(4deg); /* IE 9 */
        -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
        transform: rotate(4deg)
    }
    /*---------- mitarbeiter 2 ------------------------*/
    #team_img_2_1 {
        position: absolute;
        top: 20%;
        left: 9%;
        z-index: 6;
        -ms-transform: rotate(-7deg); /* IE 9 */
        -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
        transform: rotate(-7deg)
    }
    #team_img_2_2 {
        position: absolute;
        top: 18%;
        left: 34%;
        z-index: 5;
        -ms-transform: rotate(7deg); /* IE 9 */
        -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
        transform: rotate(7deg)
    }
    #team_img_2_3 {
        position: absolute;
        top: 20%;
        left: 62%;
        z-index: 4;
        -ms-transform: rotate(-7deg); /* IE 9 */
        -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
        transform: rotate(-4deg)
    }
    /*---------- mitarbeiter 3 ------------------------*/
    #team_img_3_1 {
        position: absolute;
        top: 20%;
        left: 5%;
        z-index: 7;
        -ms-transform: rotate(-2deg); /* IE 9 */
        -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
        transform: rotate(-2deg)
    }
    #team_img_3_2 {
        position: absolute;
        top: 18%;
        left: 34%;
        z-index: 8;
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
        transform: rotate(5deg)
    }
    #team_img_3_3 {
        position: absolute;
        top: 20%;
        left: 62%;
        z-index: 9;
        -ms-transform: rotate(8deg); /* IE 9 */
        -webkit-transform: rotate(8deg); /* Chrome, Safari, Opera */
        transform: rotate(8deg)
    }
    /*---------- mitarbeiter 4 ------------------------*/
    #team_img_4_1 {
        position: absolute;
        top: 20%;
        left: 8%;
        z-index: 10;
        -ms-transform: rotate(-7deg); /* IE 9 */
        -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
        transform: rotate(-7deg)
    }
    #team_img_4_2 {
        position: absolute;
        top: 20%;
        left: 62%;
        z-index: 11;
        -ms-transform: rotate(-5deg); /* IE 9 */
        -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
        transform: rotate(-5deg)
    }
    #team_img_4_3 {
        position: absolute;
        top: 18%;
        left: 34%;
        z-index: 12;
        -ms-transform: rotate(8deg); /* IE 9 */
        -webkit-transform: rotate(8deg); /* Chrome, Safari, Opera */
        transform: rotate(8deg)
    }
}
/*----------------------------------------------------------------------------------------------------------------------
    ende 600px
----------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------
    Start 800px
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 800px){

    /*---------- Home ----------------------------------------------------------------------------*/
    #home_bg{
        background: rgb(255,255,255); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

        border-bottom: solid 1px #d3d3d3;
    }
    #sidebar_home{
        display: none;
    }
    #anfahrt_home{
        display: none;
    }
    #home_container{
        position: relative;
        display: block;
        height: 600px;
        width: 790px;
        margin: auto;
    }
    #home_container a{
        text-decoration: none;
    }
    #home_container div{
        display: none;
        visibility: hidden;
    }
    #home_teaser{
        margin-top: 4px;
    }
    /*-----homelink--------------------------------------------------*/
    #home_container #buecher{
        display: block;
        position: absolute;
        top:10px;
        left:10px;
    }
    #buecher img{
        width: 300px;
        -webkit-transition: width 0.5s;-moz-transition: width 0.5s;-ms-transition: width 0.5s;-o-transition: width 0.5s;transition: width 0.5s;
    }
    #home_text{
        margin: 0;
        width: 80px;
        font-size: 25px;
        font-weight: 600;
        color: #EB108B;
        position: absolute;
        top: 20px;
        left: 5px;
        opacity: 0.0;
        -webkit-transition: opacity 2s;-moz-transition: opacity 2s;-ms-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;
    }
    #buecher a:hover img{
        width: 320px;
    }
    #buecher a:hover p{
        opacity: 1.0;
    }
    /*-----kontaktlink--------------------------------------------------*/
    #home_container #visitenkarte{
        display: block;
        position: absolute;
        top:270px;
        left:50px;
    }
    #visitenkarte img{
        width: 170px;
        -webkit-transition: width 0.5s;-moz-transition: width 0.5s;-ms-transition: width 0.5s;-o-transition: width 0.5s;transition: width 0.5s;
    }
    #kontakt_text{
        margin: 0;
        width: 80px;
        font-size: 25px;
        font-weight: 600;
        color: #EB108B;
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0.0;
        -webkit-transition: opacity 2s;-moz-transition: opacity 2s;-ms-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;
    }
    #visitenkarte a:hover img{
        width: 200px;
    }
    #visitenkarte a:hover p{
        opacity: 1.0;
    }
    /*-----referenzenlink--------------------------------------------------*/
    #home_container #handy_item{
        display: block;
        position: absolute;
        top:300px;
        left:250px;
    }
    #handy_item img{
        width: 200px;
        -webkit-transition: width 0.5s;-moz-transition: width 0.5s;-ms-transition: width 0.5s;-o-transition: width 0.5s;transition: width 0.5s;
    }
    #referenzen_text{
        margin: 0;
        width: 80px;
        font-size: 25px;
        font-weight: 600;
        color: #EB108B;
        position: absolute;
        top: 300px;
        left: 25px;
        opacity: 0.0;
        -webkit-transition: opacity 2s;-moz-transition: opacity 2s;-ms-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;
    }
    #handy_item a:hover img{
        width: 210px;
    }
    #handy_item a:hover p{
        opacity: 1.0;
    }
    /*-----teamlink--------------------------------------------------*/
    #home_container #rahmen{
        display: block;
        position: absolute;
        top:300px;
        left:500px;
    }
    #rahmen img{
        width: 300px;
        -webkit-transition: width 0.5s;-moz-transition: width 0.5s;-ms-transition: width 0.5s;-o-transition: width 0.5s;transition: width 0.5s;
    }
    #team_text{
        margin: 0;
        width: 80px;
        font-size: 25px;
        font-weight: 600;
        color: #EB108B;
        position: absolute;
        top: 0px;
        left: 200px;
        opacity: 0.0;
        -webkit-transition: opacity 2s;-moz-transition: opacity 2s;-ms-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;
    }
    #rahmen a:hover img{
        width: 310px;
    }
    #rahmen a:hover p{
        opacity: 1.0;
    }
    /*-----projektelink--------------------------------------------------*/
    #home_container #skizze{
        display: block;
        position: absolute;
        top:20px;
        left:400px;
    }
    #skizze img{
        width: 320px;
        -webkit-transition: width 0.5s;-moz-transition: width 0.5s;-ms-transition: width 0.5s;-o-transition: width 0.5s;transition: width 0.5s;
    }
    #projekte_text{
        margin: 0;
        width: 80px;
        font-size: 25px;
        font-weight: 600;
        color: #EB108B;
        position: absolute;
        top: 200px;
        left: 200px;
        opacity: 0.0;
        -webkit-transition: opacity 2s;-moz-transition: opacity 2s;-ms-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;
    }
    #skizze a:hover img{
        width: 330px;
    }
    #skizze a:hover p{
        opacity: 1.0;
    }
    /*---------- team -------------------------------------------------------------------------*/
    .team .polaroid_container{
        width: 300px;
        height: 350px;
    }
}

/*----------------------------------------------------------------------------------------------------------------------
    Ende 800px
----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------
    Start 1024px
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px){

    /*---------- kontakt -------------------------------------------------------------------------*/
    nav{
        float: right;
        margin-top: 162px;
        width: 14%;
        height: 350px;
    }

    nav a{
        float: none;
        width: 100%;
        height: 60px;
        padding-left: 10px;
        padding-top: 10px;
        margin-bottom: 10px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        border: solid 1px gray;
        background: none;
        background-color: #fff;
    }

    nav a figure{
        padding: 0;
    }

    nav a figure figcaption{
        font-size: 1.2em;
        margin: 0;
    }

    nav a figure img{
        width: 42px;
        float: right;
    }

    nav a:hover{
        background: none;
        border: solid 1px #EB108B;
    }

    nav a:hover figure figcaption{
        font-size: 1.5em;
    }

    #kontakt{
        padding-left: 10px;
        max-width: 1300px;
        margin: auto;
    }

    #kontakt header{
        width: 400px;
        float: left;
        padding-right: 20px;
        border-radius: 10px;
    }

    #map{
        float: left;
        width: 85%;
        max-height: 410px;
        max-width: 1050px;
        margin: 20px 0 0 0;
    }

    #map_container{
        position: relative;
        width: 49%;
        height: 400px;
        margin-right: 10px;
        border-radius: 10px;
        border: solid 1px #bdbdbd;
        float: left;
        overflow: hidden;
    }

    #map iframe{
        margin: 0;
        height: 400px;
    }

    #anfahrt{
        position: relative;
        float: right;
        width: 48%;
        max-width: 500px;
        max-height: 280px;
        border-radius: 10px;
        border: solid 1px #bdbdbd;
        overflow: hidden;
    }

    #adress{
        margin-left: -10px;
        max-width: 1290px;
    }
    /*---------- home -------------------------------------------------------------------------*/

    #home_container{
        width: 1020px;
        height: 800px;
    }
    /*---------- links ------------------------------------------------------------------------*/
    #home_container #rahmen{
        top:250px;
        left:720px;
    }
    /*---------- Schreibtisch Deko ------------------------------------------------------------*/
    #home_container #skizze{
        top: 180px;
        left: 220px;
    }
    #skizze img{
        width: 450px;
    }
    #skizze a:hover img{
        width: 455px;
    }
    #projekte_text{
        top: 230px;
        left: 290px;
    }
    #home_container #ral{
        display: block;
        position: absolute;
        top:580px;
        left:750px;
    }
    #ral img{
        width: 220px;
    }
    #home_container #kaffee{
        display: block;
        position: absolute;
        top:50px;
        left:790px;
    }
    #kaffee img{
        width: 190px;
    }
    #home_container #klammern{
        display: block;
        position: absolute;
        top:250px;
        left:240px;
    }
    #klammern img{
        width: 150px;
    }
    #home_container #schachtel{
        display: block;
        position: absolute;
        top:550px;
        left:10px;
    }
    #schachtel img{
        width: 240px;
    }
    #home_container #handy_item{
        top:460px;
        left:470px;
    }
    #home_container #redbull{
        display: block;
        position: absolute;
        top: 50px;
        left: 300px;
    }
    #redbull img{
        width: 200px;
    }
    #home_container #leder{
        display: block;
        position: absolute;
        top:10px;
        left:550px;
    }
    #leder img{
        width: 170px;
    }
    #home_container #post_it{
        display: block;
        position: absolute;
        top:620px;
        left:90px;
    }
    #post_it img{
        width: 120px;
    }
    #home_container #kuli{
        display: block;
        position: absolute;
        top:410px;
        left:160px;
    }
    #kuli img{
        width: 130px;
    }
    #home_container #stoff{
        display: block;
        position: absolute;
        top:440px;
        left:670px;
    }
    #stoff img{
        width: 200px;
    }
    #home_container #logo_item{
        display: block;
        position: absolute;
        top:230px;
        left:620px;
    }
    #logo_item img{
        width: 60px;
    }
    /*---------- referenzen ----------------------------------------------------------------------*/
    #wrapper_referenzen{
        width: 800px;
        height: 1230px;
        margin: auto;
    }
    #wrapper_referenzen nav{
        width: 25%;
        margin-right: -20px;
    }
    #wrapper_referenzen nav a {
        border-radius: 10px;
    }
    #wrapper_referenzen nav a:hover{
        background-color: #fff;
    }
    #iphone_body{
        position: absolute;
        top: 0;
    }
    /*---------- team -------------------------------------------------------------------------*/
    #wrapper_team {
        max-width: 1300px;
        margin: auto;
        border-right: solid 1px #d3d3d3;
    }

    #wrapper_team nav {
        width: 100%;
        height: 71px;
        margin: 0;
    }
    #wrapper_team nav a {
        width: 23.9%;
        float: left;
        border-radius: 0;
        border-top: 0;
        border-left: solid 1px lightgray;
        border-right: 0;
        border-bottom: solid 1px lightgray;
    }
    #wrapper_team nav a:first-child {
        border-left: 0;
    }
    .team::before{
        content: ' ';
        position: absolute;
        top: 0;
        left: -42px;
        width: 100px;
        height:100%;
        background-image: url('../bilder/spirale_einzeln_mit_schatten.png');
        background-repeat: repeat-y;
        background-position: left 0px top 0;
        background-size: 84px auto;
    }
    .bottom_logo{
        display: block;
        position: absolute;
        top: 530px;
        right: 10px;
    }
    .bottom_logo img{
        width: 70px;
    }
    /*-------------- projekte -------------------------------------------------------------------*/
    .wrapper_projekte{
        background-color: #ffffff;
        border-right: solid 1px #d3d3d3;
    }
    .camera_wrap::before{
        content: ' ';
        position: absolute;
        top: 0;
        left: -100px;
        width: 100px;
        height:100%;
        background-image: url('../bilder/spirale_einzeln_mit_schatten.png');
        background-repeat: repeat-y;
        background-position: left 0px top 0;
        background-size: 78px auto;
    }
    .wrapper_projekte nav {
        width: 100%;
        height: 71px;
        margin: 0;
    }
    .wrapper_projekte nav a {
        width: 23.9%;
        float: left;
        border-radius: 0;
        border-top: 0;
        border-left: solid 1px lightgray;
        border-right: 0;
        border-bottom: solid 1px lightgray;
    }
    .wrapper_projekte nav a:first-child {
        border-left: 0;
    }
    .fluid_container{
        padding-left: 60px;
        padding-right: 10px;
    }
}
/*----------------------------------------------------------------------------------------------------------------------
    Ende 1024px
----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------
    Start 1100px
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1100px){
    #wrapper_team nav a {
        width: 24%;
    }
}
/*----------------------------------------------------------------------------------------------------------------------
    Ende 1100px
----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------
    Start 1300px
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1300px){
    /*---------- kontakt -------------------------------------------------------------------------*/
    #kontakt{
        padding: 0;
    }

    #adress{
        border-radius: 10px;
        margin-left: 0;
    }

    nav{
        margin-right: 14px;
    }

    nav a{
        border-radius: 10px;
    }
    /*---------- team -------------------------------------------------------------------------*/
    #wrapper_team nav a {
        width: 24.15%;
    }
}
/*----------------------------------------------------------------------------------------------------------------------
    Ende 1300px
----------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------
    Retina specific content
----------------------------------------------------------------------------------------------------------------------*/
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
      
      /* Retina-specific stuff here */
    
    }