/* 
Title:		Main Stylesheet
Author: 	Pixelschupser - Mediendesign
URL:        http://www.pixelschupser-nw.de
*/

/* ==== Reset / Preset ==== */

* { padding : 0; margin : 0; }
html, body, div, span, ul, ol, li, h1, h2, h3, h4, h5, h6, p, a, strong, em, small, img, form, fieldset, label, legend, input, textarea, select, option, button, table, caption, thead, tbody, tfood, tr, td, th, iframe {
    font-family : inherit;
    font-size : 100%;
    font-weight : normal;
    font-style : normal;
    text-align : left;
    text-transform : none;
    text-decoration : none;
    list-style : none;
    background : transparent;
    padding : 0;
    margin : 0;
    border : 0 none;
    outline : 0 none;
    vertical-align : baseline;
}
img { -ms-interpolation-mode : bicubic; }
:focus { outline : 0 none; }
::-webkit-selection { color : #fff; text-shadow : none !important; background : #009999; }
::-moz-selection { color : #fff; text-shadow : none !important; background : #009999; }
::selection { color : #fff; text-shadow : none !important; background : #009999; }

/* ==== Base ==== */

html, body {
    width : 100%;
    height : 100%;
}
html {
    background : #fff;
    min-width : 320px;
    overflow-y : scroll;
    overflow-x : hidden;
    -webkit-font-smoothing : antialiased;
    -webkit-text-size-adjust : 100%;
    -ms-text-size-adjust : 100%;
}
body { font-family : "Proxima Nova", "ProximaNova", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", "LucidaGrande", sans-serif; }

/* ==== Static Grid ==== */

.row {
    width : 960px;
    margin : 0 auto;
}
.row:before, .row:after, .clearfix:before, .clearfix:after {
    content : "";
    display : table;
}
.row:after, .clearfix:after { clear : both; }
.row, .clearfix { zoom : 1; }
.row .column, .row .columns {
    padding : 0 20px;
    float : left;
    position : relative;
}
.row .one { width : 40px; }
.row .two { width : 120px; }
.row .three { width : 200px; }
.row .four { width : 280px; }
.row .five { width : 360px; }
.row .six { width : 440px; }
.row .seven { width : 520px; }
.row .eight { width : 600px; }
.row .nine { width : 680px; }
.row .ten { width : 760px; }
.row .eleven { width : 840px; }
.row .twelve { width : 920px; }

/* ==== Fluid Grid ==== */

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

    .row, .row .column, .row .columns {
        -webkit-box-sizing : border-box;
        -moz-box-sizing : border-box;
        -o-box-sizing : border-box;
        -ms-box-sizing : border-box;
        box-sizing : border-box;
    }
    .row {
        width : 90%;
        max-width : 1280px;
        min-width : 320px;
    }
    .row .one { width : 8.33%; }
    .row .two { width : 16.66%; }
    .row .three { width : 25%; }
    .row .four { width : 33.33%; }
    .row .five { width : 41.66%; }
    .row .six { width : 50%; }
    .row .seven { width : 58.33%; }
    .row .eight { width : 66.66%; }
    .row .nine { width : 75%; }
    .row .ten { width : 83.33%; }
    .row .eleven { width : 91.66%; }
    .row .twelve { width : 100%; }

}
@media only screen and ( max-width: 640px ) { .row .one, .row .two, .row .three, .row .four, .row .five, .row .seven, .row .eight, .row .nine, .row .ten, .row .eleven { width : 100%; } }
@media only screen and ( max-width: 480px ) { .row .six { width : 100%; } }

/* ==== Type & related ==== */

h1 {
    width : 240px;
    height : 160px;
    margin : 0 auto;
}
h1 a {
    text-indent : -9999px;
    background : #fff url(../images/logo.png) no-repeat center bottom;
    width : 200px;
    height : 110px;
    padding : 30px 20px 20px;
    display : block;
    position : relative;
    top : 0;
    z-index : 100;
    -webkit-border-radius : 0 0 4px 4px;
    -moz-border-radius : 0 0 4px 4px;
    -o-border-radius : 0 0 4px 4px;
    -ms-border-radius : 0 0 4px 4px;
    border-radius : 0 0 4px 4px;
    -webkit-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -moz-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -o-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -ms-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    box-shadow : 0 2px 8px rgba(0,0,0,0.3);
}
h1 a:hover, h1 a:active { top : -10px; }
h1 a:after {
    content : "";
    background : transparent url(../images/logo_shadow.png) no-repeat 0 0;
    width : 100%;
    height : 20px;
    position : absolute;
    bottom : -20px; left : 0;
    z-index : 100;
}
h2, h3, h4, h5, h6, p { margin : 0 0 20px; }
h2, h3, h4, h5 {
    color : #222;
    font-weight : bold;
}
h2 {
    font-size : 60px;
    line-height : 72px;
    letter-spacing : -2px;
}
h3 {
    font-size : 48px;
    line-height : 60px;
    letter-spacing : -1px;
}
h4 {
    font-size : 36px;
    line-height : 48px;
}
h5 {
    font-size : 24px;
    line-height : 36px;
}
h6 {
    color : #888;
    font-size : 12px;
    line-height : 24px;
}
p {
    color : #666;
    font-size : 16px;
    line-height : 28px;
}
a {
    color : #ff4000;
    font-weight : bold;
    -webkit-transition : all 0.2s ease;
    -moz-transition : all 0.2s ease;
    -o-transition : all 0.2s ease;
    -ms-transition : all 0.2s ease;
    transition : all 0.2s ease;
}
a:hover, a:active { color : #222; }
.textcols {
    -webkit-column-count : 2;
    -moz-column-count : 2;
    -o-column-count : 2;
    -ms-column-count : 2;
    column-count : 2;
    -webkit-column-gap : 40px;
    -moz-column-gap : 40px;
    -o-column-gap : 40px;
    -ms-column-gap : 40px;
    column-gap : 40px;
}

/* ==== Type - Media Queries ==== */
@media only screen and ( max-width: 800px ) {

    .textcols {
        -webkit-column-count : 1;
        -moz-column-count : 1;
        -o-column-count : 1;
        -ms-column-count : 1;
        column-count : 1;
        -webkit-column-gap : 0;
        -moz-column-gap : 0;
        -o-column-gap : 0;
        -ms-column-gap : 0;
        column-gap : 0;
    }

}
@media only screen and ( max-width: 640px ) {

    h2 {
        font-size : 48px;
        line-height : 60px;
        letter-spacing : -1px;
    }
    h3 {
        font-size : 36px;
        line-height : 48px;
        letter-spacing : 0;
    }
    h4 {
        font-size : 24px;
        line-height : 36px;
    }
    h5 {
        font-size : 16px;
        line-height : 28px;
    }

}
@media only screen and ( max-width: 480px ) {

    h2 {
        font-size : 36px;
        line-height : 48px;
        letter-spacing : 0;
    }
    h3 {
        font-size : 24px;
        line-height : 36px;
    }
    h4 {
        font-size : 16px;
        line-height : 28px;
    }

}

/* ==== Header ==== */

#header {
    background : #009999 url(../images/header_bg.jpg) no-repeat top center;
    position :relative;
    z-index : 90;
    -webkit-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -ms-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
}
#header:after {
    content : "";
    background : transparent url(../images/arrow_turquois.png) no-repeat 0 0;
    width : 20px;
    height : 10px;
    margin : 0 -10px;
    position : absolute;
    bottom : -10px; left : 50%;
    z-index : 90;
}
#header .row #title { padding : 10% 20px; }
#header .row #title h2, #header .row #title h4 { text-align : center; }
#header .row #title h2 { text-shadow : 0 1px 0 rgba(255,255,255,0.3); }
#header .row #title h4 {
    color : #fff;
    text-shadow : 0 1px 1px rgba(0,0,0,0.3);
}

/* ==== General ==== */

.section { position :relative; }
.section .row { padding : 10% 0; }
.section .row .container {
    background : #fff;
    padding : 40px;
    position :relative;
    z-index : 100;
    -webkit-border-radius : 4px;
    -moz-border-radius : 4px;
    -o-border-radius : 4px;
    -ms-border-radius : 4px;
    border-radius : 4px;
    -webkit-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -moz-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -o-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -ms-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    box-shadow : 0 2px 8px rgba(0,0,0,0.3);
}
.section .row .container:after {
    content : "";
    background : transparent url(../images/arrow_white.png) no-repeat 0 0;
    width : 20px;
    height : 10px;
    margin : 0 -10px;
    position : absolute;
    bottom : -10px; left : 50%;
    z-index : 100;
}
.section .row .container h3 { color : #009999; }

/* ==== General - Media Queries ==== */

@media only screen and ( max-width: 1280px ) {

    .section {
        background-attachment : scroll !important;
        -webkit-background-size : auto !important;
        -moz-background-size : auto !important;
        -o-background-size : auto !important;
        -ms-background-size : auto !important;
        background-size : auto !important;
    }

}
@media only screen and ( max-width: 960px ) {

    .section .row .container { width : 100%; }

}
@media only screen and ( max-width: 640px ) {

    .section { background-image : none !important; }

}
@media only screen and ( max-width: 480px ) {

    .section .row .container { padding : 20px; }

}

/* ==== Firma ==== */

#firma {
    background : #222 url(../images/firma_bg.jpg) no-repeat top center fixed;
    z-index : 70;
    overflow : hidden;
    -webkit-background-size : cover;
    -moz-background-size : cover;
    -o-background-size : cover;
    -ms-background-size : cover;
    background-size : cover;
    -webkit-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -ms-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
}
#firma .row .container h3 { background : transparent url(../images/ico_firma.png) no-repeat right 0; }

/* ==== Leistungen ==== */

#leistungen {
    background : #eee url(../images/leistungen_bg.jpg) no-repeat top center;
    z-index : 80;
    -webkit-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -ms-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
}
#leistungen:after {
    content : "";
    background : transparent url(../images/arrow_grey.png) no-repeat 0 0;
    width : 20px;
    height : 10px;
    margin : 0 -10px;
    position : absolute;
    bottom : -10px; left : 50%;
    z-index : 90;
}
#leistungen .row #headline { padding : 0 20px; }
#leistungen .row #headline h3, #leistungen .row #headline h5 {
    text-align : center;
    text-shadow : 0 1px 0 rgba(255,255,255,1);
}
#leistungen .row #headline h5 { color : #888; }
#leistungen .row .entry, #leistungen .row .entry .box { padding : 20px; }
#leistungen .row .entry .box {
    background : #fff;
    height : 400px;
    -webkit-border-radius : 4px;
    -moz-border-radius : 4px;
    -o-border-radius : 4px;
    -ms-border-radius : 4px;
    border-radius : 4px;
    -webkit-box-shadow : 0 1px 4px rgba(0,0,0,0.1);
    -moz-box-shadow : 0 1px 4px rgba(0,0,0,0.1);
    -o-box-shadow : 0 1px 4px rgba(0,0,0,0.1);
    -ms-box-shadow : 0 1px 4px rgba(0,0,0,0.1);
    box-shadow : 0 1px 4px rgba(0,0,0,0.1);
}
#leistungen .row .entry .box .icon {
    background : #009999;
    width : 70%;
    max-width : 240px;
    margin : 0 auto;
    position : relative;
    top : -40px;
    -webkit-border-radius : 50%;
    -moz-border-radius : 50%;
    -o-border-radius : 50%;
    -ms-border-radius : 50%;
    border-radius : 50%;
    -webkit-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -moz-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -o-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    -ms-box-shadow : 0 2px 8px rgba(0,0,0,0.3);
    box-shadow : 0 2px 8px rgba(0,0,0,0.3);
}
#leistungen .row .entry .box .icon img { width : 100%; }
#leistungen .row .entry .box h5, #leistungen .row .entry .box p { text-align : center; }

/* ==== Leistungen - Media Queries ==== */

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

    #leistungen .row .entry { width : 25%; }

}
@media only screen and ( max-width: 960px ) {

    #leistungen .row .entry { width : 50%; }

}
@media only screen and ( max-width: 640px ) {

    #leistungen .row .entry { width : 100%; }
    #leistungen .row .entry .box { height : auto; }

}

/* ==== Ansprache ==== */

#ansprache {
    background : #222 url(../images/ansprache_bg.jpg) no-repeat top center;
    z-index : 60;
    -webkit-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -ms-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
}
#ansprache:after {
    content : "";
    background : transparent url(../images/arrow_dark.png) no-repeat 0 0;
    width : 20px;
    height : 10px;
    margin : 0 -10px;
    position : absolute;
    bottom : -10px; left : 50%;
    z-index : 90;
}
#ansprache .row {
    position : relative;
    overflow : hidden;
}
#ansprache .row #text h3, #ansprache .row #text h5 { text-shadow : 0 1px 1px rgba(0,0,0,0.3); }
#ansprache .row #text h3 { color : #fff; }
#ansprache .row #text h5 { color : #009999; }
#ansprache .row #image {
    position : absolute;
    bottom : 40px; right : 0;
}
#ansprache .row #image img {
    width : 100%;
    max-width : 380px;
}

/* ==== Ansprache - Media Queries ==== */

@media only screen and ( max-width: 640px ) {

    #ansprache .row div { width : 100%; }
    #ansprache .row #image {
        position : relative;
        top : 0; left : 0;
    }

}

/* ==== Kontakt ==== */

#kontakt {
    background : #009999 url(../images/kontakt_bg.jpg) no-repeat top center fixed;
    z-index : 40;
    overflow : hidden;
    -webkit-background-size : cover;
    -moz-background-size : cover;
    -o-background-size : cover;
    -ms-background-size : cover;
    background-size : cover;
    -webkit-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -ms-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
}
#kontakt .row .container { float : right; }
#kontakt .row .container h3 { background : transparent url(../images/ico_kontakt.png) no-repeat right 0; }
#kontakt .row .container p { padding : 0 0 0 40px; }
#kontakt .row .container .adress { background : transparent url(../images/ico_adress.png) no-repeat 0 4px; }
#kontakt .row .container .phone { background : transparent url(../images/ico_phone.png) no-repeat 0 4px; }
#kontakt .row .container .mail { background : transparent url(../images/ico_mail.png) no-repeat 0 4px; }

/* ==== Impressum ==== */

#impressum {
    background : #222;
    z-index : 20;
}
#impressum h3, #impressum h5, #impressum p  { text-shadow : 0 1px 1px rgba(0,0,0,0.3); }
#impressum h3 { color : #fff; }
#impressum h5 { color : #009999; }
#impressum p { color : #ccc; }

/* ==== Footer ==== */

#footer {
    background : #fff;
    position :relative;
    z-index : 50;
    -webkit-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    -ms-box-shadow : 0 0 10px rgba(0,0,0,0.5);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
}
#footer .row { padding : 20px 0; }
#footer .row div h6 { margin : 0; }
#footer .row div h6, #footer .row div h6 a { color : #888; }
#footer .row div h6 a:hover, #footer .row div h6 a:active { color : #222; }

/* ==== Footer - Media Queries ==== */

@media only screen and ( max-width: 800px ) {

    #footer .row div { width : 100%; }

}