/*
 * Traumstübchen
 * Homepage: http://www.traumstübchen-fehmarn.de/
 * Copyright 2018 
/* ---------------------------------------------- /*
 * FONTS
/* ---------------------------------------------- */


/* Text Font */

@font-face {
    font-family: "Raleway-Light";
    src: url("../fonts/raleway/raleway-light/Raleway-Light.eot"); /* IE9 Compat Modes */
    src: url("../fonts/raleway/raleway-light/Raleway-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("../fonts/raleway/raleway-light/Raleway-Light.otf") format("opentype"), /* Open Type Font */
      url("../fonts/raleway/raleway-light/Raleway-Light.svg") format("svg"), /* Legacy iOS */
      url("../fonts/raleway/raleway-light/Raleway-Light.ttf") format("truetype"), /* Safari, Android, iOS */
      url("../fonts/raleway/raleway-light/Raleway-Light.woff") format("woff"), /* Modern Browsers */
      url("../fonts/raleway/raleway-light/Raleway-Light.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

/* Font Headline */
@font-face {
    font-family: "Merriweather-Regular";
    src: url("../fonts/merriweather/merriweather-regular/Merriweather-Regular.eot"); /* IE9 Compat Modes */
    src: url("../fonts/merriweather/merriweather-regular/Merriweather-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("../fonts/merriweather/merriweather-regular/Merriweather-Regular.otf") format("opentype"), /* Open Type Font */
      url("../fonts/merriweather/merriweather-regular/fonts/Merriweather-Regular.svg") format("svg"), /* Legacy iOS */
      url("../fonts/merriweather/merriweather-regular/fonts/Merriweather-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
      url("../fonts/merriweather/merriweather-regular/fonts/Merriweather-Regular.woff") format("woff"), /* Modern Browsers */
      url("../fonts/merriweather/merriweather-regular/fonts/Merriweather-Regular.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

/* Logo "Traumstübchen" Text */ 

    
@font-face {
    font-family: "Kilsonburg";
    src: url("../fonts/kilsonburg/kilsonburg.eot"); /* IE9 Compat Modes */
    src: url("../fonts/kilsonburg/kilsonburg.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("../fonts/kilsonburg/kilsonburg.otf") format("opentype"), /* Open Type Font */
      url("../fonts/kilsonburg/kilsonburg.svg") format("svg"), /* Legacy iOS */
      url("../fonts/kilsonburg/kilsonburg.ttf") format("truetype"), /* Safari, Android, iOS */
      url("../fonts/kilsonburg/kilsonburg.woff") format("woff"), /* Modern Browsers */
      url("../fonts/kilsonburg/kilsonburg.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
  

.font-Kilsonburg {
    font-family: 'Kilsonburg';
    font-weight: 400;
}

.font-Merriweather {
    font-family: 'Merriweather-Regular', serif;
    font-weight: 400;
}

:root {
    -default-color: #565656; /*gray */
    -accent-color: #789dad; /*petrolblau  RGB 0/78/55 */
    -main-color: rgba(240, 130, 105, 1);/*coral*/    
   
    -second-color: #FFFFFF; /*white*/
    -third-color : #FCFCFC; /*lightbeige */
    -four-color: #DDDDDD;
    -six-color: #383838; /*text shadow darkgray */
    -seven-color: #FCFCFC; /*textLightBeige*/
    -eight-color: #454545; /*textGray*/
    -nine-color: #6E6E6E; /*textLightGray*/
    -ten-color: #416E85 ; /*textCyan*/
    -eleven-color: #82B2B2; /*textLightCyan*/
    -twelve-color: #416E85; /*Cyan*/
    -thirteen-color: #ccccccc; /*text shadow light gray */
    -fourteen-color: #666666; /*middle gray text-shadow*/

  
    /*Link Color*/
    -main-link-color: #004e37; /*.Darkgreen */  
  
    /*Navigation Color */  
    
    -nav-link-color: #005F69; /*.petrol */
    -nav-link-hover-color: #f48b52; /*.coral */
       
    
}

/* ==========================================================================
BODY
========================================================================== */
body {
    background: rgb(252, 252, 252);
    font-family: 'Raleway-Light',sans-serif;
    font-weight: 300;
    font-size: 12px;
    position: relative;    
    color: #565656;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

.grap {
    padding: 0px 15px 60px 15px;
}
.grap-header{
    /*padding: 130px 0px 0px 0px;*/
}

.grapMiddle {
    padding: 0px 15px 15px 15px;
}

.grapSmall {
    padding: 15px 15px;
}

.grapTop {
    padding-top: 90px;
}
.posAbsolute {
    position: absolute;
    
}
.posRelative {
    position: relative; 
    width: 100%;
    height: 100%;
}

.grap-margin-lg {
    margin: 40px 0px 100px 0px;
}
/* ==========================================================================
Scroll to top
==================================================================================================================================================== */

.scrolltop {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    border-radius: 10%;
    background: #416E85;
    color: #FFFFFF;
    text-align: center;
    font-size: 24px;
}

.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
    background: rgba(240, 130, 105, 1) !important; 
    color: #565656;
}

.scrolltop span {
    margin-top: 7px;
}

/* ==========================================================================
equal Height for one ROW
========================================================================== */

.row .is-flex {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row .is-flex > [class*='col-'] {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;  
}


/* ==========================================================================
Navigation
========================================================================== */
#nav-top {
    padding: 5px 0px;
}

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
}

.custom-navbar {
    background-color: transparent;
    margin-bottom: 0;
    
}
.custom-navbar.nav-change, .subpage .custom-navbar {
    background-color: #ECECEC;
    box-shadow: 0px 0px 4px #565656;
    transition: background-color 400ms ease-in;
}
.subpage .webtitle {
    display: block!important;
}
.mainpage .webtitle {
    display: none;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
}

.custom-navbar  .navbar-brand  {     
    font-size: 2.0em;
    letter-spacing: 0.09em;
    font-weight: bold;
    padding: 15px 0;
    font-weight: bold;        
}

.navbar-header .logo {
    margin-top: 10px;
    height:30px; 
    width: auto;    
    float:left;
}  

.navbar-toggle .icon-bar {
    background: #f48b52;
}

.titlePart1 {
    margin-right: 4px;
    text-shadow: 3px 2px 0px  #789dad;
}

.titlePart2 {
    margin-left: 7px;
    text-shadow: 3px 2px 0px  #789dad;
}

.navbar-nav > li > a {
    color: #005F69;
    font-size: 1.8em;      
}

.navbar-nav > li > a:hover {
    color: #f48b52;    
}

.nav > li > a:hover, .nav > li > a:active {
    background: #FCFCFC;
}



/* ==========================================================================
Basic  Styles
========================================================================== */

h1, h2, h3{
    font-weight: bold;
    letter-spacing: 2px;    
}

h2 {
    font-size: 2.2em;   
    line-height: 1.3em;
    text-shadow: 1px 1px 2px #666666;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.6em;   
    line-height: 1.0em;    
}

h4 {
    text-shadow: 0.05em 0.05em 0.05em #838383;
    font-size: 1.8em;  
    margin-top: 0px;
    margin-bottom: 0px;
    letter-spacing: 0.05em;
    padding: 5px 0px 0px 0px;
    line-height: 1.4em;
}
.BGColorOpaGray  h4 {
    padding: 25px 15px;
}
.headlineText {
    font-size: 1.8em;
    padding: 15px 0px;
    display: block;
}

.text-hyphens {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
} 

.text-normal {
    font-size: 1.6em;   
    display: block;
}

.text-small {
    font-size: 1.4em;    
    display: block;
}

.text-thin {
    font-weight: 200;
}

.bold {
    font-weight: bold;
}

p {
    line-height: 1.4em;
    margin-bottom: 8px;
}

.text-padding {
    margin-bottom: 5px;
}

.text-shadow {
    text-shadow: 1px 1px 2px #383838;
}

.text-shadow-light {
    text-shadow: 0.02em 0.03em 0.05em gray;
}

.inlineBlock {
    display: inline-block;
}


/* Text - Colors */

.textWhite {
    color: #FFFFFF;
}
.textLighterGray {
    color: #DDDDDD;
}

.textLightBeige {
    color: #FCFCFC;
}
.textCoral {
    color: rgba(240, 130, 105, 1);
}

.textGray {
    color:  #454545;
}

.textLightGray {
    color: #6E6E6E;
}
.textCyan {
    color: #416E85;
}

.textLightCyan {
    color:#82B2B2;
}

.textRight {
    text-align: right;
}
.verticalBottom {
    vertical-align: bottom;
}
 

/* Background -Color */ 


.BGColorOpaWhite {
    background: rgba(255, 255, 255, 0.3);
}

.BGColorOpaWhite2 {
    background: rgba(255, 255, 255, 0.5);
}

.BGColorOpaCoral {
    background: rgba(240, 130, 105,0.95);
    
}
.BGColorOpaCyan {
    background: rgba(65, 110, 133, 0.5);    
}
.BGColorOpaCyanLight {
    background: rgba(65, 110, 133, 0.3);   
}

.BGColorOpaGray {
    background: rgba(102, 102, 102, 0.1);
}

.BGColorOpaDarkGray {
    background: rgba(102, 102, 102, 0.6);
}
.BGColorOpaDarkWhite {
    background: rgba(255, 255, 255, 0.8);
}
.BGColorOpaWhiteGradient {    
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    
}

.BGColorOpaDarkGrayGradient  {    
    background: -moz-linear-gradient(top, rgba(255,102,102,0.6) 0%, rgba(102,102,102,0.95) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(102,102,102,0.6) 0%,rgba(102,102,102,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(102,102,102,0.6) 0%,rgba(102,102,102,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99666666', endColorstr='#e6666666',GradientType=0 ); /* IE6-9 */
}



.BGColorCoral {
    background: rgba(240, 130, 105, 1);
}

.BGColorWhite {
    background: #FFFFFF;
}

.BGColorCyan {
    background: #416E85;
}

.BGColorGray {
    background: #a8a8a8;
}

/* Links */

a {
    outline: none !important;
    text-decoration: none;
   -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; 
    color: rgba(240, 130, 105, 1);
}

a:hover {
    color: #789dad;
    text-decoration: none;
}

/* ==========================================================================
Listen Styles
========================================================================== */

.list-group-item {
    background-color: transparent;
    border: 0px;
    font-size: 1.2em;
}

ul {
    padding-left: 25px;
}

.listsymbol li {
    list-style-type: "✓  ";
}

.list-point li {
    list-style-type: "›  ";
}

.check-sign:before {
  content: "\2713";  
}
.check-sign {
    padding: 0px 5px 0 10px;
    text-shadow: 1px 1px 2px #ccccccc;
}
/* ==========================================================================
Buttons Styles
========================================================================== */


/* ==========================================================================
Tables  Styles
========================================================================== */

.table {    
    line-height: 1.42857143;
    color: #565656;
    font-family: "Raleway-Light", sans-serif;
}
.table-responsive {  
    border: 0px solid #ddd;
}

.table > thead > tr > th {
    border-bottom: 1px solid #ddd;
    font-family: "Merriweather-Regular";
    text-shadow: 1px 1px 1px #666666;
    font-size: 1.5em;
    letter-spacing: 0.05em;
    line-height: 1.4em; 
}

.table > tbody > tr > td {
    font-size: 1.3em;
    padding: 10px 8px;
    border-top: 0px solid #ddd;
}



/* ==========================================================================
Lightbox Image Gallerie - PopUp Picture
========================================================================== */
.lb-data .lb-details {
    width: 90%;
}

.lb-data .lb-caption {
    font-size: 1.5em;
    letter-spacing: 0.05em;
    display: inline-block;
    padding-top: 5px;
}

.lb-data .lb-number {
    display: inline-block;
    clear: left;
    padding-bottom: 1em;
    font-size: 12px;
    color: #999999;
    padding-top: 8px;
    float: right;
}
/* ==========================================================================
Header Section
========================================================================== */


.BGHeader {
    background:url("../images/bg/header.jpg");
    background-attachment: fixed;
}

.BGHeader .BGColorOpaDarkGray {
    background: transparent;
}

.welomeText01 {   
    font-size: 2.7em;
    font-weight: 300;
    line-height: 74px;
}
.welomeText02 {   
    font-size: 3.4em;
    font-weight: 300;
    line-height: 60px;
    padding-left: 55px;
    text-shadow: 0.01em 0.01em 0.02em #FCFCFC;
}

.welomeText03 {    
    font-size: 3.7em;
    line-height: 40px;
    text-shadow:  0.09em 0.08em 0em rgba(65, 110, 133, 0.7);
    
}
.welomeText04 {    
    font-size: 3.5em;
    font-weight: 200;    
}

.headlineLogo {
    margin: 25px 0 0px 25px;
    height: 103px;
    width: auto;    
}

.welcomeText {
    background: rgba(255, 255, 255, 0.7);
    padding: 25px;
    border-radius: 3px;    
}

/* ==========================================================================
Section facilitiesBanner 
========================================================================== */
#facilitiesBanner {
    margin-bottom: 50px;
}

#facilitiesBanner .fa{
    font-size: 3.0em;
    padding-bottom: 10px;    
}

.facilitiesText {
    font-size: 16px;
}

@media(max-width: 576px) {
    
    #facilitiesBanner .fa{
        font-size: 2.0em;
        padding-bottom: 0px;    
    }
}

/* ==========================================================================
Section #fewo 
========================================================================== */

.BG_FEWO_01 {
    background:url("../images/bg/fewo_01.jpg");      
    background-attachment: scroll;     
}

.BG_FEWO_02 {
    background:url("../images/bg/BG_Strand.jpg");  
    background-position: 0%!important;      
    background-attachment: scroll;
    /*
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;   
    
    width: 100%;       
    color: #ffffff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    background-position-y: 65%;*/
    
}
.BG_FEWO_03 {
    background:url("../images/wohnzimmer/wohnzimmer_001.jpg");      
    background-attachment: scroll; 
    height:250px;   
    background-size: 314% !important;
    background-position: 5% !important;
}
.BG_FEWO_04 {
    background:url("../images/kueche/kueche_004.jpg");      
    background-attachment: scroll; 
    height:250px;    
}
.BG_FEWO_05 {
    background:url("../images/bad/bad_003.jpg");      
    background-attachment: scroll; 
    height:250px;    
}
.BG_FEWO_06 {
    background:url("../images/bg/schmetterlinge.png");      
    background-attachment: scroll;       
    
    background-position: 16% 24% !important;
    background-size: 61% !important;
    background-repeat: no-repeat;
}

.BG_FEWO_07 {
    background:url("../images/bg/fewo_001_trans_1.png");      
    background-attachment: scroll;
    background-position: 100% 28% !important;
    background-size: 60% !important;
    background-repeat: no-repeat;
}
.BG_FEWO_08 {
    background:url("../images/bg/beach.png");      
    background-attachment: scroll;
    background-position: 100% 100% !important;
    background-size: 100% !important;
    background-repeat: no-repeat;
}

.box-shadow {
    -webkit-box-shadow:2px 2px 5px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 2px 2px 5px rgba(159, 141, 140, 0.5);
   box-shadow: 2px 2px 5px rgba(159, 141, 140, 0.5);
}

/* ==========================================================================
section Spruch
========================================================================== */ 
#spruch .spruchMobilePortrait {
    display: none;
}
#spruch .spruchDesktop {
    display: block;
}

#spruch h2 {
    padding: 30px 0;
    font-size: 1.8em;
}
#spruch h2 .textLighterGray {
    font-size: 1.6em;
}
/* ==========================================================================
section Rooms
========================================================================== */ 
.thumbnailsArea {
    bottom: 23px;
    right: 15px;   
    border-radius: 15px 0px 0px 15px;
}

#rooms .fa-image {
    color: #416E85;
    text-shadow: 0.02em 0.02em 0.01em #454545;
    font-size: 2.3em; 
     -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; 
}


#rooms .fa-image:hover {
    color: rgba(240, 130, 105,1);
}

#rooms .fa_with_bg{
    position: relative;
    z-index: 1;
}


.fa_with_bg::after{
    position: absolute;
    content: '';
    background: rgba(255, 255, 255, 0.8);
    z-index: -1;
    top: 3px;
    left: 2px;
    width: 26px;
    height: 22px;
}
/* ==========================================================================
Preisliste Rooms
========================================================================== */ 
#preisliste .panel , #impressum .panel {
    background-color: transparent;
    border-radius: 0px!important;
    border: 0px solid transparent;
    font-family: "Raleway-Light", sans-serif;
    margin-bottom: 20px;
}

   
#preisliste h4 , #impressum h4{
    padding: 10px 8px;
    text-shadow: 1px 1px 1px #666666;
    font-size: 1.15em;
}


#preisliste .panel-body {
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.5);
}

#preisliste .panel-group .panel {
    margin-bottom: 30px;
}
   
#preisliste .panel-group .panel-heading {
    border-bottom: 0px solid #ddd;
    background:  rgba(102, 102, 102, 0.1);
    padding: 0px 0px;
}

#Zusatzleistungen .col-sm-5 {
    padding-top:0px;
}


/* ==========================================================================
Kontaktformular
========================================================================== */


#kontakt .fa-user {
    font-size:20px;
}

.input-group {
    margin: 15px 0px;
    
} 
#kontakt .form-control {   
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important; 
    font-size: 1.3em;
}

label {
    font-size:12px;
    line-height: 21px;
}

input {
    border-radius: 4px !important;
}

input[type="submit"] {
    box-shadow: 1px 1px 5px #ccc;
    border-radius:  4px !important;
    font-size: 1.4em;
    height: 42px;
    width: 200px;
    color: #565656;
    border: 0.01em #acacac solid!important;
    font-family: 'Raleway-Light',sans-serif
}
input[type="submit"]:hover {
     border: 0.01em #416E85 solid!important;
}
.form-control {   
    border-radius: 0!important;
}

.checkboxtext {
    display: flex;
    font-size: 1.1em;
}

.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}

.radio label, .checkbox label {    
    padding-left: 0px;
}
.mailkopie {
    font-size: 14px;
}
.intro-text {
    font-size: 1.6em;
}
.error {
    font-size: 1.3em;
}
input::placeholder { 
  color: #ededed;
}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ededed;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ededed;
}
input::-ms-input-placeholder { /* IE 10+ */
  color: #ededed;
}
input::-moz-placeholder { /* Firefox 18- */
 color: #ededed;
}

/* ==========================================================================
Buchungskalender 
========================================================================== */
.auswahl input[type="submit"] {    
    height: 33px;
    width: 152px;
    background: rgba(65, 110, 133, 0.3);
    border: 0.05em #fff solid !important;
}
.buchungform button[type="submit"] {
    box-shadow: 1px 1px 5px #ccc;
    border-radius: 4px !important;
    font-size: 1.4em;
    height: 42px;
    width: 310px;
    margin: 15px 0px;
    color: #565656;
    border: 0.1em #fff solid !important;
    font-family: 'Raleway-Light',sans-serif;
    background: rgba(65, 110, 133, 0.3);
    border: 0.05em #fff solid !important;
}
.buchungform input {
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
/*    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);*/
/*    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
    width: 80%;
}
.buchungform select {
    margin: 0 0 0 2px;
    width: 80%;
}

.buchungform  label {
    font-size: 1.1em;
    line-height: 21px;
    color: #999;
    font-weight: 100;
    margin: 17px 0px 2px 3px
}
.buchungform label.create {
    float:none;
}
form .buchungform  textarea {
    width: 100%;
}
form .buchungform  select {
   font-size:13px;
}
form.buchung {
    font-family: 'Raleway-Light',sans-serif;
}
table .monatskalender, tr, th {

    border: 1px solid rgba(102, 102, 102, 0.1);
}
.monatskalender tr td{
    border: solid 0.01em #ddd;
}
.monatskalender th {
    font-size: 1.2em;
    padding: 5px;
    color: rgb(65, 110, 133);
    background-color: rgba(102, 102, 102, 0.1);
    text-align: center;
}
.monatskalender tbody tr td {
    background-color: #ffffff;
    padding: 4px 1px;
}

.monatskalender tbody tr:first-child td {
    background-color: rgba(65, 110, 133, 0.3);
    color: #686868;
    border: solid 0.01em rgba(183, 213, 227, 0.3);
}
.monatskalender a {
    color: rgb(86, 86, 86);
}
.monatskalender a:hover {
    color: rgb(86, 86, 86);
}
form select{    
    margin: 0.4em;
    height: 30px;
    padding: 5px 11px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    font-weight: 100;
}
form textarea {
     margin: 0em;
     padding: 5px 11px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    font-weight: 100;
    width:80%;
}
footer .copy-cal {
    margin-right: 40px;
}
footer .copy-cal a{
    color: rgb(191, 191, 191);
}
.mkalender {
    height:100%;
    margin: 0em;
    margin-bottom: 50px;
    min-height: 230px;
}
.auswahl {
    margin: 1em 1em 2em 1em;
}
.back {
    margin-top:30px;
}
.hinweistext {
    font-size: 1.4em;
    text-align: center;
}
/* ==========================================================================
Footer Section
========================================================================== */
.shadow-inset {
    -webkit-box-shadow: inset 0 11px 11px -15px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 11px 11px -15px rgba(0,0,0,0.5);
    box-shadow: inset 0 11px 11px -15px rgba(0,0,0,0.5);
    
}
#footer .footerLinks {
    margin: 26px 7px;
    text-align: right;
}
#footer .footerLinks .naviPoint:first-child  a:before {
  content: "";
}

#footer .footerLinks .naviPoint  a:before {
 /* content: "\0040";  @Zeichen*/ 
    content: "|";
    margin-right: 4px;
    color: #FFFFFF;
}

#footer a {
    font-size: 1.4em;   
    color: #FFFFFF;
    text-shadow: 2px 2px 1px #565656;
}


#footer a:hover {   
    color: rgba(240, 130, 105, 1);
    text-shadow: 2px 2px 1px #565656;
}



#footer .copyright {
    font-size: 1.5em;
    margin: 26px 0px;
    color: #222222;
    text-shadow:1px 0px 0px #929292;
    text-align: left;
}

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

#haftung .headlineText {
    margin: 15px 0px;
    padding: 0px 15px;
}

#haftung .panel-body {
    font-size: 1.4em;    
}
#haftung .panel-group .panel {
    margin-bottom: 10px;
}
   
#haftung .panel-group .panel-heading {
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
    padding: 2px 15px 6px 15px;
}
#haftung .panel-title {  
    font-size: 1.4em;
}
#haftung h4 {
    text-shadow: 0em 0em 0em #838383;
}

.kontakt-sign:before {
  content: "\0040";
}


#haftung a:focus{
     text-decoration: none;
}

/* ==========================================================================
Datenschutz  Section
========================================================================== */
#datenschutz {
    font-size: 1.3em;
}
#datenschutz h2 {    
    font-family: 'Merriweather-Regular', serif;
    font-weight: 400;
    margin-bottom: 60px;
}
#datenschutz h3 { 
    font-size: 1.5em;
    padding: 15px 0px;
    display: block;
    font-family: 'Raleway-Light',sans-serif;
}
/* ==========================================================================
BG Images Styles
========================================================================== */
/* BG Image Style*/

.BG-Image {
    background-repeat: no-repeat;    
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;   
    background-position: center;
    width: 100%; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
}


/* ==========================================================================
media quires for mobile
========================================================================== */

/* Tables  */
@media only screen 
    and(min-width: 768px) 
    and(max-width: 1024px) { 
     
    /* Navigation */    
    .navbar-header {
        padding-left: 0px;
        font-size: 1.1em;        
    }
    
    .custom-navbar .navbar-brand {        
        padding: 17px 0;        
    }
    
    .navbar-header .logo {
        margin-top: 12px;
        height:31px;        
    }
    
    .titlePart1 {       
        text-shadow: 2px 2px 0 #82b2b2;        
    }
    
    .titlePart2 {     
        text-shadow: 2px 2px 0 #82b2b2;        
    }
    
    /*Header */
    .BGHeader {              
        background-position: 60%;       
    } 
    .grap-header{
        /*padding: 120px 0px 0px 0px;*/
    }  
    /*facilitiesBanner*/
    #facilitiesBanner {
        margin-bottom: 60px;
    } 
    /* Generals */  
    .BG-Image  {
        background-attachment: scroll;
    } 
    
    
    .grap {
        padding: 0px 15px 30px 15px;
    }
    
    .grapCols {
        padding: 15px 15px;
    }
    
    .h1, .h2, .h3, h1, h2, h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    h2 {
        font-size: 2.1em;
    }
    
    h4 {    
        font-size: 1.5em;
    }
    
    .headlineText {
        font-size: 1.6em;
    }
    
    .text-normal {
        font-size: 1.4em;
    }
    
    .text-small {
        font-size: 1.3em;
    }
    
    .BG_FEWO_03 {   
        background-size: 363% !important;
        background-position: 12% !important;
    }
     
    /* Spruch */
    
    .BG_FEWO_06 {
        background:url("../images/bg/schmetterlinge.png");      
        background-attachment: scroll!important;       
        background-position: center center !important;
        background-position: -2% 27% !important;
        background-size: 60% !important;
        background-repeat: no-repeat!important;        
    }
    
    #spruch h2 {
       font-size: 1.7em;
    }
    
    #spruch .textLighterGray {
        font-size: 1.8em;
    }
    
    /* Footer */
    
    #footer .footerLinks {
        padding-right: 35px;
    }
   
}
 /* Tables  - portrait*/
@media only screen 
    and(min-width: 768px) 
    and(max-width: 1024px)
    and (orientation: portrait) { 
    
    .BG_FEWO_03 {  
        background-size: 236% !important;
        background-position: 5% 45% !important;
    }
    .BG_FEWO_04 {  
        background-position: center 63% !important;
    }
    .BG_FEWO_06 {  
        background-position: -10% 50% !important;
        background-size: 75% !important;        
    }
    
    #spruch h2 {
       font-size: 1.7em;
    }
    .spruchTablet {
        display: none;
    } 
    
    /* Footer */
    
    #footer .footerLinks {
        padding-right: 40px;
    }
}
@media only screen 
    and (max-width: 991px) { 
        .buchungform input {
            width:100%;
        }
        .buchungform select {    
            width: 100%;
        }
    }
/* Mobile Phones - Portrait*/
@media only screen 
    and (max-width: 767px) { 
   
    /* Navigation */  
    .navbar-header {   
        margin-left: -5px !important;
    }   
    .naviPoint {
        margin-left: 10px;
    }
    .titlePart1 {
        margin-right: 3px;       
        letter-spacing: 0.05em; 
        font-size: 0.9em;
        text-shadow: 0.1em 0.1em 0 #82b2b2; 
    }
    
    .titlePart2 {
        margin-left: 5px;       
        letter-spacing: 0.05em;
        font-size: 0.9em;
        text-shadow: 0.1em 0.1em 0 #82b2b2; 
    }
    
    /*Header */  
    .BGHeader {                   
        background-position: 40%; 
        background-attachment: scroll;       
    } 
    .grap-header{
        /*padding: 100px 0px 0px 0px;*/
    }  
    
    .welomeText01 {
        font-size: 2.0em;
        font-weight: 300;
        line-height: 51px;
    }
    
    .welomeText02 {
        font-size: 2.1em;
        font-weight: 300;
        line-height: 45px;
        padding-left: 10px;
        text-shadow: 0.01em 0.01em 0.02em #fcfcfc;
    }
    .headlineLogo {
        margin: 15px 0 0px 9px;
        height: 70px;
        width: auto;
        
    }
    .welomeText03 {
        font-size: 1.9em;
        line-height: 45px;
        text-shadow: 0.09em 0.08em 0em rgba(65, 110, 133, 0.7);
        letter-spacing: 2px;
    }
    .welomeText04 {
        font-size: 2.5em;
        font-weight: 200;
    }
    /* facilitiesBanner*/ 
    #facilitiesBanner {
        margin-bottom: 20px;
    }
    
    /* Basic */
    .grap {
        padding: 0px 15px 15px 15px;
    }
    
    .grapCols {
        padding: 15px 15px;
    }
    
    h2 {
        font-size: 1.8em;
    }
    
    h4 {    
        font-size: 1.5em;
    }
    
    .headlineText {
        font-size: 1.5em;
    }
    
    .text-normal {
        font-size: 1.3em;
    }
    
    .text-small {
        font-size: 1.31em;
    }
    
     /* #fewo */
    .BG_FEWO_01 {        
        height: 200px;
    }
    
    
    
    /* #Spruch */
    
    .BG_FEWO_06 {  
        background-position: 0% 87% !important;
        background-size: 90% !important;       
    }
    
    #spruch .container-fluid {
        padding-right: 0px;
        padding-left: 0px;
    } 
    
    #spruch h2 {      
        font-size: 1.5em;
        margin: 0px 0px;
        padding: 0px;
    }
    
    #spruch .textpart {
        text-align: left;
    }
    
    #spruch .textLighterGray {
        font-size: 1.7em;
    }
    
    /* #Footer */
    
    #footer .copyright {
        padding-left: 15px;
        text-align: center;
    }
    
    #footer .footerLinks {
        padding-right: 55px;
    }
    
    #footer .naviPoint {
        margin-left: 0px;
    }
    
    #Zusatzleistungen .col-xs-12 {
        padding-top:15px!important;
    }
    
}    
   
/* Mobile Phones - Portrait*/
@media only screen 
    and (max-width: 767px)
    and (orientation: portrait) { 
        
    #spruch .spruchMobilePortrait {
        display:block;
        margin: 20px 0;
    }
    
    #spruch .spruchDesktop {
        display: none;
    }
    
     /* #Footer */
           
    #footer2 .footerLinks {
        padding-right: 60px;
    }
     #footer .footerLinks {
        padding-right: 0px;
        margin: 26px 7px 0px;
        text-align: center;
    }
    #footer .footerLinks .naviPoint  a:before {
        margin-right: 2px;   
    }
    #footer .footerLinks .naviPoint  a:before {
        margin-right: 0px;   
    }
 
    #footer a {
        font-size: 1.4em;   
    }
}


/* Mobile Phones - Landscape*/
@media only screen 
    and (max-width: 767px) 
    and (orientation: landscape) { 
        
    /*Header */   
    
    .BGHeader {                
       background-position: 60%;        
    } 
    .grap-header{
       /* padding: 30px 0px 0px 30px;*/
    } 
    
    /* #fewo */    
    
    .BG_FEWO_01 {        
        height:250px;
    }
    
    .BG_FEWO_03 {    
        background-size: 200% !important;
        background-position: 3% 46% !important;
    }
    /* #Spruch */     
     
    #spruch .textpart {
        text-align: right;
    }
    
    #spruch .spruchMobilePortrait {
        display: none;       
    }    
    
    #spruch .spruchDesktop {
        display: block;        
    }
    
    /* #Footer */
           
    
    #footer .footerLinks {
        padding-right: 0px;
        margin: 26px 7px 0px;       
        text-align: center;
    }
    .lb-nav a.lb-next,
    .lb-nav a.lb-prev {
        opacity: 1;
    }
}
    
    #footer .footerLinks .naviPoint  a:before {
        margin-right: 2px;   
    }
    #footer .footerLinks .naviPoint  a:before {
        margin-right: 0px;   
    }
/*    #footer .copyright {
        padding-left: 0px;
        font-size: 1.3em;  
        text-align: center;
    }*/
    #footer a {
        font-size: 1.4em;   
    }


/*
@media(max-width: 576px) {  
    .welomeText01 {
        font-size: 2.0em;
        font-weight: 300;
        line-height: 51px;
    }
    
    .welomeText02 {
        font-size: 2.1em;
        font-weight: 300;
        line-height: 45px;
        padding-left: 10px;
        text-shadow: 0.01em 0.01em 0.02em #fcfcfc;
    }
    .headlineLogo {
        padding: 10px 0 0px 9px;
        height: 76px;
        width: auto;
        position: absolute;
        bottom: 125px;
    }
    .welomeText03 {
        font-size: 1.9em;
        line-height: 45px;
        text-shadow: 0.09em 0.08em 0em rgba(65, 110, 133, 0.7);
    }
    .welomeText04 {
        font-size: 2.5em;
        font-weight: 200;
    }
}
@media(max-width: 360px) {
    
    .BGHeader {    
        min-height: 470px;    
    }
    .BGHeader .grap {
        padding: 320px 0 0;
    }
   
    
    .welomeText01 {
        font-size: 2.0em;
        font-weight: 200;
    }
    
    .welomeText02 {
        font-size: 1.8em;
        font-weight: 400;
        padding-left: 3px;
    }
    
    .welomeText03 {
        font-size: 2em;
        line-height: 22px;
        text-shadow: 0.1em 0.1em 0em #416E85;
    }
    .welomeText04 {
        font-size: 2.4em;
        font-weight: bolder;
        line-height: 54px;
    }
    .welcomeText {
        background: transparent;
        padding: 0px;
        border-radius: 0px;
    
        }
    .headlineLogo {
        height: 117px;
        padding: 28px 0 0px 4px;
        width: auto;
    }
   
     .BGHeader .BGColorOpaDarkGray {
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255,0.95) 100%); 
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255,0.95) 100%); 
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255,0.95) 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99666666', endColorstr='#e6666666',GradientType=0 ); 
        border-bottom: inset 3px #1F1F1F;
    }
    
}
*/
@media(max-width: 480px) {  
    
    .table > thead > tr >  th{
        font-size: 1.0em;
    }
    
    .table > tbody > tr > td {
        font-size: 1.1em;
    }
    
    #preisliste .panel-title h4 {
        font-size: 0.85em;
    }
    #preisliste .text-normal {
        font-size: 1.1em;
    }
    
    
    #datenschutz h3 {
        font-size: 1.2em;
    }
    
    #footer .copyright{
        text-align: center;
    }
    .lb-nav a.lb-next,
    .lb-nav a.lb-prev {
        opacity: 1;
    }
}

@media only screen
    and (device-width: 360px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 3) {     
         
}