/*!
 Design and developement by Proud Bird Studios 2016.
 www.pb-studios.com
 */

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

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

/* Fonts */

p {
    margin: 0 0 0px;
}

body {
    font-family: BrandonGrotesqueWeb-Regular;
    font-size: 20px;
    color: #078C7F;
    }

h1, h2, h3, h4, h5 {
	font-family: BrandonGrotesqueWeb-Regular;
	font-weight: normal;
	font-style: normal;
}

.h2, h2 {
    font-size: 20px;
}

.logotext {
    font-size: 26px;
    margin-top: 20px;
    color: #078C7F;
}

.logotextsmall {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
}


.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.bold{
    font-family: BrandonGrotesqueWeb-Bold;
}

.regular{
    font-family: BrandonGrotesqueWeb-Regular;
}

.italic{
    font-family: BrandonGrotesqueWeb-Italic;
}

.bigfont {
    font-size: 54px;
}

.midfont {
    font-size: 40px;
}

.green {
    color: #078C7F;
}

.lightgreen {
    color: #a9d2c0;
}

.white {
    color: #ffffff;
}

.points {
    font-size: 22px;
}

a {
    color: #078C7F;
    text-decoration: none;
}

a:focus, a:hover {
    color: #078C7F;
    text-decoration: underline;
}


/* The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */

/* intro Section */

.intro-section {
    padding-top: 40px;
    text-align: center;
    background: #fdfdfd;
}

.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.image-bg-fluid-height {
	background: url('../img/walther_topimage.jpg') no-repeat center center scroll;
    padding: 244px 0;
/*    width: 1920px;*/
    margin-left: auto;
    margin-right: auto;
}

.image-bg-fixed-height {
	background: url('../img/walther_topimage.jpg') no-repeat center center scroll;
    height: 450px;
}

.img-center {
    margin-top: -407px;
    min-width: 200px;
}

.logosymbol {
    width: 165px;
    margin-left: -10px;
}


/* about Section */
.about-section {
    padding-top: 60px;
    text-align: center;
    background: #ffffff;
}


/* krankheiten Section */
.krankheiten-section {
    padding-top: 60px;
    text-align: center;
    background: #fff;
}

.krankheientextbox {
    color: #ffffff;
    background-color: #078C7F;
    padding: 5px;
    text-transform: uppercase;
}

.texttop{
    font-size: 26px;
}

.darkgreen {
    background-color: #0d6962;

}

.krankheitencontent {
    margin-top: 30px;
    padding-left: 28px;
    padding-right: 28px;
    min-height: 167px;
}

.krankheitenimage {
    width: 100%;
}

.icon {
    width: 40px;
}

.icondiv {
    padding: 25px;
    height: 75px;
    padding-top: 0px;
    padding-bottom: 0px;

}

.checkicon {
    width: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.lightgreybackground {
    background-color: #f3f3f3;
}

.darmkrank{
    font-size: 22px;
    padding: 8px;
}


/* solution Section */
.solutionsection {
    padding: 25px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 50px;
}

.solutionmargin {
    min-height: 130px;
}

.css_image_home{
    height: 100%;
    width: 100%;
    /*background:url('../img/background_solution.jpg') no-repeat bottom center;*/
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.css_about_home{
    height: 100%;
    width: 100%;
    /*background:url('../img/background_solution.jpg') no-repeat bottom center;*/
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.head {
    margin-top: 20px;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-size: 48px;
/*    font-family: BrandonGrotesqueWeb-Bold;*/
}

/* contact Section */
.contact-section {
    padding-top: 60px;
    text-align: center;
    background: #525252;
    padding-bottom: 22px;
}

.titel{
    font-size: 28px;
}

.portrett{
    width: 170px;
    border-radius: 5px;
    margin-top: -10px;
}

.signatur{
    width: 140px;
    margin-top: 20px;
}

.lineheight{
    line-height: 24px;
}

.borderleft{
    border-left: 1px solid #fff;
}

.vitabutton{
    font-size: 20px;
    width: 200px;
    margin-left: 25px;
}

.impressumbutton{
    font-size: 14px;
    width: 200px;
    margin-left: 25px;
    margin-top: 7px;
    background-color: #fff !important;
    color: #078C7F !important;
}

.underlined {
    text-decoration: underline;
}

.footerportrett{
        float: left;
        margin-right: 20px;
}

.h1mobile{
    font-size: 22px;
}

.marginpoints {
    text-align: left;
    height: 260px;
}

.phoneicon {
    width: 70px;
}

.about {
    margin-top: 20px;
    margin-left: 24px;
    color: #fff;
    font-family: BrandonGrotesqueWeb-Italic;
}


/* copyright Section */

.copyright-section {
    padding: 10px;
    background: #078C7F;
    text-transform: uppercase;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
}

.copyright-section a:link {color: #000;}
.copyright-section a:visited,
.copyright-section a:hover,
.copyright-section a:active {
  color: #cecece;
}



/* Modals */
.modal.modal-wide .modal-dialog {
  width: 1170px;
  margin-left: auto;
  margin-right: auto;

}
.modal-wide .modal-body {
  overflow-y: auto;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px solid #999;
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    padding: 100px;
}

.close {
    float: right;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #078c7f;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 1;
}

.dates {
    font-size: 17px;
    color: #807e7e;
    border-bottom: 1px solid #e5e5e5;
}

td, th {
    padding: 8px;
}


/* General CSS */
.nopadding {
    padding-right: 0px;
    padding-left: 0px;
}

.bordertopleft{
    border-top-left-radius: 15px;
}

.bordertopright{
    border-top-right-radius: 15px;
}


/* Navbar */

.navbar-nav {
    font-size: 17px;
    margin-top: 3px;
}

.navbar {
    height: 45px !important;
    min-height: 45px;
    border: 0px solid transparent;
}

.navbar-default {
    background-color: #078c7f;
    border-color: #078c7f;
}

.navbar-default .navbar-brand {
    color: #FFF;
}

.navbar-default .navbar-nav>li>a {
    color: #FFF;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    /*border-bottom: #efefef 4px solid;*/
    color: #FFFFFF;
}

.navbar-fixed-top {
    top: -5px;
    border-width: 0 0 0px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #FFFFFF;
    background-color: transparent;
    border-bottom: #078c7f 4px solid;
}

.navbar-default .navbar-toggle {
    border-color: rgba(255, 255, 255, 0);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #078C7F;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 19px 15px;
    font-size: 18px;
    line-height: 20px;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 12px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 2px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}


/* Buttons */

.btn-default {
    color: #FFF;
    background-color: #078C7F;
    border-color: #ccc;
    border-width: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 9px;
}

.btn-default.focus, .btn-default:focus {
    color: #FFF;
    background-color: #078C7F;
    border-color: #078C7F;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: #FFF;
    background-color: #A9A9A9;
    border-color: #8c8c8c;
}

.divider {
    position: absolute;
    left: -12px;
}

.dividerright {
    position: absolute;
    right: -12px;
}

.dividerstyle {
    width: 24px;
}

.arrow::after {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    margin-top: 25px;
    border-color: #078C7F transparent transparent transparent;
}

.arrow:hover::after {
    border-color: #A9A9A9 transparent transparent transparent;
}

.arrow2::before {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    margin-top: -30px;
    border-color: #078C7F transparent transparent transparent;
}

.arrow2darkgreen::before {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    margin-top: -30px;
    border-color: #0d6962 transparent transparent transparent;
}

.arrow3::after {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    border-color: #FFFFFF transparent transparent transparent;
    z-index: 1;
}

.arrow4::after {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    border-color: #F3F3F3 transparent transparent transparent;
    z-index: 1;
}

.btn-default:hover {
    color: #FFF;
    background-color: #A9A9A9;
    border-color: #adadad;
}


/* Google Maps */
.content-container {
    width: 100%; height: 450px;
}


/* MEDIA CHANGES */

 /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    .darmkrank {
    font-size: 19px;
}

.krankheitencontent {
    font-size: 18px;
}

        .krank1and2 {
    font-size: 21px;
}

.krankheitencontent {
    min-height: 152px;
}

.krankheientextbox {
    min-height: 127px;
}

.icondiv {
    padding-top: 15px;
}

.modal.modal-wide .modal-dialog {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.modal-content {
    padding: 15px;
}

.h1mobile{
    font-size: 18px;
}

.about {
    min-width: 300px;
    font-size: 16px;
}


}

/* Medium Devices, Desktops */
    @media only screen and (max-width : 991px) {

        .darmkrank {
    font-size: 14px;
}

.krank1and2 {
    font-size: 15px;
}

.krankheientextbox {
    min-height: 106px;
}

.points {
    font-size: 21px;
}

.krankheitencontent {
    min-height: 221px;
}

.vitabutton {
    width: 126px;
}

.impressumbutton {
    width: 126px;
}

.about {
    min-width: 210px;
    font-size: 16px;
    margin-left: 0px;
}

.head {
    font-size: 25px;
}

}

/* Small Devices, Tablets */
    @media only screen and (max-width : 767px) {

    .darmkrank {
    font-size: 22px;
}

        .krank1and2 {
    font-size: 26px;
}

.krankheitencontent {
    min-height: 0px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
    background-color: #078C7F;
    border-width: 0px;
}

.navbar {
    min-height: 50px;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 0px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.0);
}

.h1mobile{
    font-size: 20px;
}

.marginpoints {
    text-align: left;
    height: 110px;
    margin-top: 30px;
}

.footerportrett {
    float: left;
    margin-right: 20px;
    margin-bottom: 25px;
}

.impressumbutton {
    margin-left: 0px;
    width: 50%;
}

.vitabutton {
    margin-left: 0px;
    min-width: 126px;
}

.margintoppoints {
    margin-top: 272px !important;
}

.lessmarginmobile{
    margin-top: 30px !important;
}

.bordertopleft {
    border-top-left-radius: 0px;
}

.bordertopright {
    border-top-right-radius: 0px;
}

.margintoppoints {
    margin-top: 210px !important;
}

.lefttext {
    text-align: left !important;
}

.vitabutton {
    width: 50%;
}

.ibutton {
    width: 50%;
}

.img-center {
    margin-top: -432px;
    min-width: 200px;
}

.logotext {
    font-size: 19px;
    margin-top: 20px;
    color: #078C7F;
}

.logosymbol {
    width: 105px;
    margin-left: -10px;
}

.borderleft{
    border-left: 0px solid #fff;
}

    }




/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {



.vitabutton{
    font-size: 20px;
    width: 100%
}


.impressumbutton{
    font-size: 14px;
    width: 100%;
    margin-left: inherit;
    margin-top: 7px;
    background-color: #fff !important;
    color: #078C7F !important;
}

    .darmkrank {
    font-size: 18px;
}


.h1, h1 {
    font-size: 26px;
}

.bigfont {
    font-size: 28px;
}

        .krank1and2 {
    font-size: 21px;
}

.krankheiten-section {
    margin-bottom: -6px;
}

.points {
    margin-bottom: 17px;
}

.vitabutton{
    width: 100%;
}

.image-bg-fluid-height {
	background: url('../img/walther_topimage_mobile.jpg') no-repeat center center scroll;
    padding: 244px 0;
/*    width: 1920px;*/
    margin-left: auto;
    margin-right: auto;
}

.img-center {
    margin-top: -253px;
    margin-left: -41px;
    min-width: 200px;
}

.logotext {
    font-size: 19px;
    margin-top: 20px;
    color: #078C7F;
}

.logosymbol {
    width: 105px;
    margin-left: -10px;
}

.margintoppoints {
    margin-top: 270px !important;
}



}