/* -------------------------------------------------------------------*/
/* General & Basic Styles
/* -------------------------------------------------------------------*/

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    padding-top: 166px;
}


/* -------------------------------------------------------------------*/
/* Navbar
/* -------------------------------------------------------------------*/

nav {
    position: relative;
    width: 100%;
    height: 166px;
}

.navbar-fixed-top {
    border: 0;
}

.navbar-brand {
    height: 166px;
}

.navbar-header a {
    outline: none;
}

.nav > li > a {
    outline: none;
}

@media (min-width: 1200px) {
    .nav > li > a {
        font-size: 18px;
        padding: 74px 15px;
    }
    nav.shrink .nav > li > a {
        padding: 40px 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav > li > a {
        padding: 40px 15px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .nav > li > a {
        padding: 40px 10px;
    }
    nav.shrink .nav > li > a {
        padding: 40px 10px;
    }
}

@media (max-width: 767px) {
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

nav.shrink {
    height: 100px;
    box-shadow: inset 0 1px #fff, 0 1px 2px rgba(34,25,25,0.4);
    -moz-box-shadow: inset 0 1px #fff, 0 1px 2px rgba(34,25,25,0.4);
    -webkit-box-shadow: inset 0 1px #fff, 0 1px 2px rgba(34,25,25,0.4);
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}

nav.shrink .navbar-brand {
    height: 100px;
}

@media (min-width: 1200px) {
    nav.shrink .navbar-brand img {
        width: 50%;
    }
}

@media (max-width: 1199px) {
    body {
        padding-top: 100px;
    }

    nav {
        height: 100px;
    }

    .navbar-brand {
        height: 100px;
    }
}


/* -------------------------------------------------------------------*/
/* Header Carousel
/* -------------------------------------------------------------------*/

header.carousel,
header .carousel-inner,
header .item,
header .active {
    height: 100%;
}

header .carousel-caption {
    background-image: url(../img/carousel/bg-carousel.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    border-radius: 6px;
}

header .carousel-caption .btn {
    margin-top: 20px;
    margin-bottom: 20px;
}

header .full-page-img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


/* -------------------------------------------------------------------*/
/* Section / Content Basic Styles
/* -------------------------------------------------------------------*/

section {
    position: relative;
    width: 100%;
}

section .container {
    position: relative;
    background-color: #FFF;
    padding: 30px;
}

.bg-light-gray {
    background-color: #eee !important;
}

p {
    line-height: 1.5em;
}

.page-header {
    padding-bottom: 0;
    margin-top: 0;
    border: none;
}

hr {
    clear: both;
    float: none;
    width: 100%;
    height: 1px;
    margin: 20px 0 0 0;
    border: none;
    /* fallback */
    background-color: #333;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#333), to(#fff));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #333, #fff);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #333, #fff);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #333, #fff); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

/* Sub-Section */
.sub-section {
    position: relative;
    padding: 15px 30px;
    margin: 30px 0;
    background-color: #e6e6e6;
    border-radius: 6px;
}

.sub-section-header {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0;
}

.sub-section-header h2 {
    text-align: center;
    color: #444;
}

.sub-section-header h4 {
    text-align: center;
}

.sub-section-header hr {
    /* fallback */
    background-color: #444;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#444), to(#e6e6e6));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #444, #e6e6e6);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #444, #e6e6e6);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #444, #e6e6e6); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

@media (max-width: 1199px) {
    .sub-section {
        padding: 10px 30px;
    }
}

/* Technologien */
ul.skills {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

ul.skills li {
    display: inline-block;
    padding: 0 10px;
    height: 100px;
}

@media (max-width: 1199px) {
    ul.skills li {
        height: 50px;
    }

    ul.skills li img {
        height: 50px;
    }
}

/* Projekte */
.project-item {
    position: relative;
    max-width: 250px;
    margin-bottom: 20px;
    box-shadow: 1px 2px 4px rgba(170,170,170,0.4);
    -moz-box-shadow: 1px 2px 4px rgba(170,170,170,0.4);
    -webkit-box-shadow: 1px 2px 4px rgba(170,170,170,0.4);
}

.project-info {
    position: relative;
    background-color: #ddd;
    padding: 10px;
    text-align: center;
}

.img-hover:hover {
    opacity: 0.8;
}


/* -------------------------------------------------------------------*/
/* Software Entwicklung
/* -------------------------------------------------------------------*/

#softwareentwicklung .btn-default {
    color: #FE6510;
    background-color: transparent;
    border-color: #FE6510;
}
#softwareentwicklung .btn-default:hover,
#softwareentwicklung .btn-default:focus,
#softwareentwicklung .btn-default.focus,
#softwareentwicklung .btn-default:active,
#softwareentwicklung .btn-default.active,
#softwareentwicklung .open > .dropdown-toggle.btn-default {
    color: #fff;
    background-color: #FE6510;
    border-color: #FE6510;
}

.page-header.softwareentwicklung h1,
.page-header.softwareentwicklung h4 {
    text-align: center;
}

.page-header.softwareentwicklung h1 {
    color: #FE6510;
}

.page-header.softwareentwicklung hr {
    /* fallback */
    background-color: #FE6510;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#FE6510), to(#eee));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #FE6510, #eee);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #FE6510, #eee);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #FE6510, #eee); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

#softwareentwicklung-content {
    position: relative;
    padding-bottom: 20px;
}

#software-projects {
    margin-top: 0;
}

#software-projects .row {
    margin-right: -10px;
    margin-left: -10px;
}

#software-projects .col-xs-12, #software-projects .col-sm-6, #software-projects .col-md-3 {
    padding-right: 10px;
    padding-left: 10px;
}


/* -------------------------------------------------------------------*/
/* Webauftritte
/* -------------------------------------------------------------------*/

#webauftritte .btn-default {
    color: #51AE26;
    background-color: transparent;
    border-color: #51AE26;
}
#webauftritte .btn-default:hover,
#webauftritte .btn-default:focus,
#webauftritte .btn-default.focus,
#webauftritte .btn-default:active,
#webauftritte .btn-default.active,
#webauftritte .open > .dropdown-toggle.btn-default {
    color: #fff;
    background-color: #51AE26;
    border-color: #51AE26;
}

.page-header.webauftritte h1,
.page-header.webauftritte h4 {
    text-align: center;
}

.page-header.webauftritte h1 {
    color: #51AE26;
}

.page-header.webauftritte hr {
    /* fallback */
    background-color: #51AE26;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#51AE26), to(#fff));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #51AE26, #fff);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #51AE26, #fff);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #51AE26, #fff); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

#web-projects {
    margin-top: 0;
}

#web-projects .row {
    margin-right: -10px;
    margin-left: -10px;
}

#web-projects .col-xs-12, #web-projects .col-sm-6, #web-projects .col-md-3 {
    padding-right: 10px;
    padding-left: 10px;
}

#web-projects .project-info {
    text-align: left;
}

#web-projects .project-info img {
    display: inline-block;
    height: 40px;
    margin-right: 10px;
}

#web-projects .project-info p {
    font-size: 12px;
    line-height: 1.2em;
}


/* -------------------------------------------------------------------*/
/* Coaching
/* -------------------------------------------------------------------*/

#coaching .btn-default {
    color: #130A0B;
    background-color: transparent;
    border-color: #130A0B;
}
#coaching .btn-default:hover,
#coaching .btn-default:focus,
#coaching .btn-default.focus,
#coaching .btn-default:active,
#coaching .btn-default.active,
#coaching .open > .dropdown-toggle.btn-default {
    color: #fff;
    background-color: #130A0B;
    border-color: #130A0B;
}

#coaching  .page-header h1,
#coaching  .page-header h4 {
    text-align: center;
}

#coaching  .page-header h1 {
    color: #130A0B;
}

#coaching .page-header hr {
    /* fallback */
    background-color: #130A0B;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#130A0B), to(#eee));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #130A0B, #eee);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #130A0B, #eee);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #130A0B, #eee); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

#coaching-projects {
}

#coaching-projects .row {
    margin-right: -10px;
    margin-left: -10px;
}

#coaching-projects .col-xs-12, #coaching-projects .col-sm-6, #coaching-projects .col-md-3 {
    padding-right: 10px;
    padding-left: 10px;
}


/* -------------------------------------------------------------------*/
/* Lösungen
/* -------------------------------------------------------------------*/

#loesungen  .page-header h1,
#loesungen  .page-header h4 {
    text-align: center;
}

#loesungen  .page-header h1 {
    color: #666;
}

#loesungen .page-header hr {
    /* fallback */
    background-color: #666;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#666), to(#fff));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #666, #fff);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #666, #fff);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #666, #fff); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

#loesungen .btn {
    width: 100%;
}

#loesungen .btn-primary {
    background-color: #FE6510;
    border-color: #b1470b;
}
#loesungen .btn-primary:focus,
#loesungen .btn-primary:hover,
#loesungen .btn-primary:active {
    background-color: #e45b0e;
    border-color: #b1470b;
}


/* -------------------------------------------------------------------*/
/* Neuigkeiten
/* -------------------------------------------------------------------*/

#neuigkeiten  .page-header h1,
#neuigkeiten  .page-header h4 {
    text-align: center;
}

#neuigkeiten  .page-header h1 {
    color: #666;
}

#neuigkeiten .page-header hr {
    /* fallback */
    background-color: #666;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#666), to(#eee));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #666, #eee);
    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #666, #eee);
    /* IE 10 */
    background: -ms-radial-gradient(circle, #666, #eee); 
    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

.neuigkeiten {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    max-height: 600px;
    overflow: hidden;
}
@media (min-width: 768px) {
    .neuigkeiten {
        min-height: 600px;
    }
}
.neuigkeiten > img,
.neuigkeiten a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}
a.neuigkeiten:hover,
a.neuigkeiten:focus,
a.neuigkeiten.active {
    border-color: #337ab7;
}
.neuigkeiten .caption {
    padding: 9px;
    color: #333;
}


/* -------------------------------------------------------------------*/
/* Kontakt
/* -------------------------------------------------------------------*/

#kontakt {
    background-image: url(../img/kontakt/bg-kontakt.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

#kontakt .container {
    background-color: transparent;
}

#kontakt  h1 {
    color: #ccc;
    margin-bottom: 50px;
}

#kontakt img {
    margin: 0 auto;
}

@media (max-width: 768px) {
    #kontakt .mike {
        margin-top: 25px;
    }
}

#kontakt .logo {
    margin: 25px 0;
}

#kontakt ul.contact-info{
    list-style: none;
    padding-left: 0;
    text-align: left;
    margin: 25px 0;
}

#kontakt ul.contact-info li {
    position: relative;
    display: block;
    margin-bottom: -1px;
}

#kontakt ul.contact-info li p {
    color: #ccc;
    font-size: 14px;
    font-weight: 300;
    padding-left: 30px;
    margin-bottom: 5px;
}

#kontakt ul.contact-info li a {
    display: inline-block;
    color: #ccc;
    font-size: 14px;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

#kontakt ul.contact-info li i {
    display: block;
    float: left;
    width: 30px;
    color: #ccc;
    font-size: 17px;
}

#kontakt ul.contact-info span.tab50 {
    display: block;
    float: left;
    width: 50px;
}

#kontakt ul.social-buttons {
    margin: 0;
    padding: 0;
    list-style: none;
}

#kontakt ul.social-buttons li {
    display: inline-block;
    padding: 0 5px;
}

#kontakt ul.social-buttons li a {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 40px;
    outline: 0;
    color: #ccc;
    background-color: #333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
}

#kontakt ul.social-buttons li a:hover {
    color: #FFF;
}

#kontakt ul.social-buttons li a.xing:hover {
    background-color: #026466 !important;
}

#kontakt ul.social-buttons li a.facebook:hover {
    background-color: #3b5998 !important;
}

#kontakt ul.social-buttons li a.googleplus:hover {
    background-color: #dd4b39 !important;
}

#kontakt .form-group input,
#kontakt .form-group textarea {
    background-color: #444;
    color: #ccc;
    padding: 15px;
}

#kontakt .form-group input.form-control {
    height: auto;
}

#kontakt .form-group textarea.form-control {
    height: 206px;
}

#kontakt .btn-default {
    color: #ccc;
    background-color: #333;
    border-color: #ccc;
}
#kontakt .btn-default:hover,
#kontakt .btn-default:focus,
#kontakt .btn-default.focus,
#kontakt .btn-default:active,
#kontakt .btn-default.active,
#kontakt .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #ccc;
}

#kontakt p.datenschutz {
    margin-top: 20px;
    color: #ccc;
}
#kontakt p.datenschutz a {
    color: #ccc;
}


/* -------------------------------------------------------------------*/
/* Footer
/* -------------------------------------------------------------------*/

footer {
    position: static;
    bottom: 0px;
    width: 100%;
    padding: 20px 0;
    background-color: #333;
    text-align: center;
}

footer .container-fluid {
    padding: 0;
}

footer p {
    font-size: 12px;
    color: #666;
}

footer a {
    color: #999;
}

footer a:hover,
footer a:focus {
    color: #999;
}


/* -------------------------------------------------------------------*/
/* Impressum / Datenschutz
/* -------------------------------------------------------------------*/

a.impressum-link-close,
a.datenschutz-link-close {
    display: none;
}

#impressum,
#datenschutz {
    display: none;
    background-color: #FFF;
}

#impressum .impressum-inner,
#datenschutz .datenschutz-inner {
    padding: 20px;
    text-align: left;
}

#impressum p,
#datenschutz p {
    font-size: 14px;
}

#impressum h5,
#datenschutz h5 {
    margin-top: 25px;
    margin-bottom: 5px;
}


/* -------------------------------------------------------------------*/
/* Back to top
/* -------------------------------------------------------------------*/

#back-to-top {
    position: fixed;
    right: -36px;
    bottom: 18px;
    background-color: #FE6510;  
    text-align: center;	
    text-decoration: none;
    outline: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    opacity: 0.8;    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    z-index: 9999999;
}

#back-to-top i {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #fff;
}

#back-to-top:hover { 
    background-color: rgba(254, 101, 16, 0.7);
}

#back-to-top.visible { 
    right: 18px;
}