/* CSS Document f�r Kesselhaus Schorndorf */

@import url(fundament.css);

/* roboto-300 - latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v30-latin-300.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg');
    /* Legacy iOS */
}


/* roboto-regular - latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v30-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg');
    /* Legacy iOS */
}


/* roboto-500 - latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v30-latin-500.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v30-latin-500.svg#Roboto') format('svg');
    /* Legacy iOS */
}


/* roboto-700 - latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v30-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg');
    /* Legacy iOS */
}

html,
body {
    font-size: 20px;
    font-family: font-family: 'Roboto', Arial, Helvetica, Verdana, sans-serif;
    line-height: 1.8;
    color: #ffffff;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

#supersized li {
    margin-left: 0;
}


/*
direkt in html-seite !
background: url(images-background/04-DasSindWir/GeschichteKesselhaus_2970-1920x2880RGB.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
*/


/*################## DESIGN ####################*/

iframe {
    min-height: 500px;
    width: 100%;
    border: 0px;
    z-index: auto;
    outline: none;
}

.social {
    display: none;
}

.popup {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.85);
    color: #b77b37!important;
    z-index: 500000;
}

.popup-inner h4 {
    /*color: #f49e00;*/
    color: #b77b37!important;
    font-size: 2.0em;
    font-weight: normal;
    padding-bottom: 10px;
}


/* Inner */

.popup-inner {
    max-width: 760px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
    border-radius: 3px;
    background: #000000;
    color: #b77b37!important;
    z-index: 500000;
    padding: 30px;
    text-align: left!important;
}

.popup-inner a {
    color: #fff!important;
}

.popup-inner p {
    font-size: 1.0em;
    line-height: 1.2em;
    color: #b77b37!important;
    text-align: left!important;
}


/* Close Button */

.popup-close {
    width: 50px;
    height: 50px;
    padding-top: 0px;
    display: inline-block;
    position: absolute;
    top: -20px;
    right: -25px;
    transition: ease 0.25s all;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    border-radius: 1000px;
    background: rgba(0, 0, 0, 0.8);
    font-size: 40px;
    text-align: center;
    line-height: 100%;
    color: #b77b37!important;
}

.popup-close:hover {
    -webkit-transform: translate(50%, -50%) rotate(180deg);
    transform: translate(50%, -50%) rotate(180deg);
    background: rgba(0, 0, 0, 1);
    text-decoration: none;
}

h5 {
    color: #fff;
    font-weight: normal!important;
    font-size: 5.0em!important;
    text-align: center;
    display: block;
}

#wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.mm-page {
    height: 100%;
}

#wrapper {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#header {
    margin: 0;
    padding: 0;
    padding-left: 240px;
    width: auto;
    height: 74px;
    background: #1d1d1b;
    text-align: left;
    overflow: hidden;
}

#header p {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: 100%;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.3;
}

#header p a {
    color: #aea59f;
    text-decoration: none;
}

#header p a.active {
    color: #b57a3e !important;
    font-weight: bold;
}

#header p a:hover {
    color: #aea59f;
}

#header p a:visited {
    color: #aea59f;
}

#header p a:active {
    color: #aea59f;
}

#header p.tel {
    float: left;
    padding: 32px 0.5% 0 0.5%;
    width: 17%;
    height: 26px;
    border-right: 1px solid #ffffff;
}

#header p.oeffnungszeiten {
    float: left;
    padding: 32px 0.5% 0 0.5%;
    width: 51%;
    height: 26px;
    border-right: 1px solid #ffffff;
}

#header p.impressionen {
    float: left;
    padding: 32px 0.5% 0 0.5%;
    width: 13%;
    height: 26px;
    border-right: 1px solid #ffffff;
}

#header p.rundgang {
    float: left;
    padding: 32px 0.5% 0 0.5%;
    width: 13%;
    height: 26px;
}

#headermobile,
#headermobilesmartphone {
    display: none;
}

#logo {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    padding: 19px 20px;
    width: 200px;
    height: 230px;
    background: #000000;
}

#navigation {
    position: absolute;
    z-index: 20;
    left: -999;
    top: 270px;
    padding: 19px 20px;
    width: 200px;
    background: #1d1d1b;
    text-align: left;
    overflow: hidden;
}

#menu {
    position: absolute;
    /*z-index:20*/
    ;
    left: 0px;
    top: 270px;
    padding: 0;
    width: 50%;
    text-align: left;
}

#menumobile {
    visibility: hidden;
}

#herzlichwillkommen {
    position: absolute;
    z-index: 2;
    left: 282px;
    top: 320px;
    width: auto;
    right: 80px;
    overflow: hidden;
    background: rgba(29, 29, 29, 0.9) none repeat scroll 0 0;
}

#herzlichwillkommen h5 {
    margin: 0;
    padding: 10px;
}


/*#herzlichwillkommen img {
	width: 100%
}*/

#herzlichwillkommen p {
    color: #fff;
    font-size: 130%;
    text-align: center;
    padding: 0 32px 0 32px;
}

#containerraum {
    position: absolute;
    z-index: 2;
    left: 242px;
    top: 270px;
    width: 36%;
    overflow: hidden;
    padding-bottom: 60px;
}

#container {
    width: 94%;
    padding: 3%;
    overflow: hidden;
    background: rgba(29, 29, 29, 0.9);
}

#container h1 {
    position: relative;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    padding: 11px 4% 10px 0;
    width: 94%;
    font-size: 120%;
    color: #b77b37;
    font-weight: normal;
    text-align: left;
    border-top: 1px solid #aea59f;
    border-bottom: 1px solid #aea59f;
}

#container #close {
    position: absolute;
    top: 26px;
    right: 6%;
}

#container h2 {
    margin: 0;
    margin-bottom: 0.6em;
    padding: 0;
    width: 100%;
    font-size: 120%;
    color: #ffffff;
    font-weight: normal;
    text-align: left;
}

#container h3 {
    margin: 0;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    padding: 0;
    width: 100%;
    font-size: 105%;
    color: #b77b37;
    font-weight: bold;
    text-align: left;
}

#container h4 {
    margin: 0;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    padding: 0;
    width: 100%;
    font-size: 105%;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
}

#container h5 {
    margin: 0;
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    padding: 0;
    width: 100%;
    font-size: 91%;
    color: #b77b37;
    font-weight: bold;
    text-align: left;
}

#container h6 {
    margin: 0;
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    padding: 0;
    width: 100%;
    font-size: 91;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
}

#container p {
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
    width: 99%;
    text-align: left;
    font-size: 91%;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.3;
}

#container p a {
    color: #ffffff !important;
}

#container p a:hover {
    color: #b77b37;
}

#container p a:visited {
    color: #ffffff;
}

#container p a:active {
    color: #ffffff;
}

#container p.blocksatz {
    text-align: justify;
}

#container p.linksbuendig {
    text-align: left !important;
}

#container ul {
    margin: 0;
    padding: 0;
    list-style-type: bullet;
}

#container ul li {
    list-style-type: circle;
    margin: 0;
    margin-left: 13px;
    margin-bottom: 0em;
    padding: 0;
    width: 100%;
    text-align: left;
    font-size: 91%;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.3;
}

#container ol li {
    list-style-type: decimal;
    margin: 0;
    margin-left: 23px;
    margin-bottom: 0em;
    padding: 0;
    width: 100%;
    text-align: left;
    font-size: 91%;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.3;
}


/* ########### SONSTIGES ################# */

img {
    border: 0;
}

.gold {
    color: #b77b37;
}

.nowrap {
    white-space: nowrap;
}

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.margintop {
    margin-top: 8px;
}

.clearing {
    margin: 0;
    padding: 0;
    clear: both;
    width: 100%;
    height: 0;
}


/* ################## Newsletter Anmeldung ******************/

.tx-sremailsubscribe-pi1 .wrapGender {
    float: left;
}

.tx-sremailsubscribe-pi1 .inputRow {
    margin: 0 0 5px 0;
    float: left;
    width: 100%;
}

.tx-sremailsubscribe-pi1 input {
    color: #666;
    padding: 2px;
    float: left;
}

.tx-felogin-pi1 input {
    color: #666;
    padding: 2px;
}

.tx-sremailsubscribe-pi1 label,
.tx-fp-newsletter .form-group label {
    display: block;
    width: 140px;
    flex-shrink: 0;
}

.tx-sremailsubscribe-pi1 label.gender {
    width: 50px;
    padding-left: 5px;
}

.tx-fp-newsletter .form-group {
    display: flex;
    margin-bottom: 0.5rem;
}

.tx-sremailsubscribe-pi1 input.tx-sremailsubscribe-pi1-submit,
.tx-fp-newsletter .btn {
    cursor: pointer;
    color: #b57a3e;
    border: 1px solid #b57a3e;
    padding: 0.3rem;
    background-color: transparent;
    margin-left: 140px;
}

.tx-fp-newsletter .form-control-checkbox {
    font-size: 12px;
    line-height: 1.3;
}

.tx-felogin-pi1 input[type="submit"] {
    cursor: pointer;
    color: #b57a3e;
    border: none;
    background-color: transparent;
    margin-left: 140px;
}

#container .tx-sremailsubscribe-pi1 p.editAccount {
    margin-top: 20px;
    margin-left: 100px;
}

#container .tx-sremailsubscribe-pi1 p.editAccount a {
    color: #b57a3e !important;
    ;
    text-decoration: none;
}

.tx-sremailsubscribe-pi1 form.update p {
    padding-top: 10px;
}

.tx-sremailsubscribe-pi1 form.update input.tx-sremailsubscribe-pi1-submit {
    margin-left: 10px;
}

.tx-sremailsubscribe-pi1 .kesselhaus_confirmation {
    padding-left: 5px;
    width: 70%;
}

#tx-sremailsubscribe-pi1-kesselhaus_confirmation {
    margin-top: 3px;
}

div.clear {
    clear: both;
}

table.tx_kesselhausnl th {
    font-weight: normal;
    text-align: left;
    padding: 0 15px 5px 0;
}

table.tx_kesselhausnl td {
    padding: 0 15px 5px 0;
}

.tx-kesselhausnl a.print {
    display: block;
    padding: 5px 0 15px 0;
}


/* ########################################################################*/


/* ################## WEITERE DESKTOP VERSION ########################*/

@media all and (max-device-width: 1080px),
all and (max-width: 1080px) {
    #header p.tel {
        padding: 32px 0.5% 0 0.5%;
        width: 21%;
    }
    #header p.oeffnungszeiten {
        padding: 13px 0.5% 0 0.5%;
        width: 38%;
        height: 45px;
    }
    #header p.impressionen {
        padding: 32px 0.5% 0 0.5%;
        width: 17%;
    }
    #header p.rundgang {
        padding: 32px 0.5% 0 0.5%;
        width: 17%;
    }
    #containerraum {
        width: 44%;
    }
    #herzlichwillkommen {
        left: 5%;
        top: 320px;
        right: 5%;
    }
}

@media all and (max-device-width: 940px),
all and (max-width: 940px) {
    #herzlichwillkommen p {
        font-size: 200%;
    }
    #header p {
        font-size: 92%;
    }
    #header p.tel {
        padding: 32px 0.5% 0 0.5%;
        width: 25%;
    }
    #header p.oeffnungszeiten {
        padding: 14px 0.5% 0 0.5%;
        width: 32%;
        height: 52px;
    }
    #header p.impressionen {
        padding: 32px 0.5% 0 0.5%;
        width: 18%;
    }
    #header p.rundgang {
        padding: 32px 0.5% 0 0.5%;
        width: 18%;
    }
    #containerraum {
        width: 52%;
    }
}


/* ########################################################################*/


/* ################## TABLET VERSION ########################*/

@media all and (max-device-width: 768px),
all and (max-width: 768px) {
    .popup-inner h4 {
        padding-bottom: 15px;
    }
    .popup {
        z-index: 90000!important;
    }
    .popup-inner {
        width: 80%;
        height: auto !important;
        padding: 10px;
    }
    .distanceTxtClose {
        padding-bottom: 30px;
    }
    .popup-inner p {
        font-size: 0.6em;
        padding: 5px 5px 5px 5px;
        line-height: auto!important;
    }
    .popup-close {
        top: -10px;
        right: 15px;
    }
    #header {
        display: none;
    }
    #headermobile {
        display: block;
        margin: 0;
        padding: 0;
        padding-left: 36%;
        width: auto;
        height: 78px;
        background: #1d1d1b;
        text-align: left;
        overflow: hidden;
    }
    #headermobile p {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        text-align: center;
        font-size: 94%;
        color: #ffffff;
        font-weight: normal;
        line-height: 1.3;
    }
    #headermobile p.tel {
        float: right;
        padding: 0;
        margin-right: 5%;
        padding-top: 20px;
        width: 41px;
        height: auto;
    }
    #headermobile p.oeffnungszeiten {
        float: right;
        padding: 0;
        margin-right: 5%;
        padding-top: 20px;
        width: 41px;
        height: auto;
    }
    #headermobile p.impressionen {
        float: right;
        padding: 0;
        margin-right: 5%;
        padding-top: 20px;
        width: 41px;
        height: auto;
    }
    #headermobile p.rundgang {
        float: right;
        padding: 0;
        margin-right: 20px;
        padding-top: 20px;
        width: 41px;
        height: auto;
    }
    #logo {
        position: absolute;
        z-index: 20;
        left: 0;
        top: 0;
        padding: 19px 3%;
        width: 200px;
        height: auto;
        background: #000000;
    }
    #containerraum {
        position: absolute;
        z-index: 4;
        left: 40%;
        top: 160px;
        width: 51%;
        overflow: hidden;
        padding-bottom: 60px;
    }
}

@media only screen and (max-width:1000px) {
    #herzlichwillkommen {
        font-size: 50%;
    }
    #navigation,
    #menu {
        display: none;
    }
    #navigationmobile {
        display: block;
        margin: 0;
        margin-top: 5px;
        padding: 17px 20px 17px 36%;
        width: auto;
        background: #1d1d1b;
        text-align: right;
        overflow: hidden;
    }
    #menumobile {
        visibility: visible;
    }
    #menumobile .mm-listview li a.active {
        color: #b57a3e !important;
        font-weight: bold !important;
    }
    #closemmmenu {
        position: absolute;
        z-index: 99999;
        top: 15px;
        right: 20px;
        width: 10px;
        height: 10px;
    }
}


/* ########################################################################*/


/* ##################### VERSION SMARTPHONE !! #########################*/

@media only screen and (max-width:891px) {
    .popup-inner h4 {
        font-size: 1.3em;
        line-height: auto;
        font-weight: bold;
        padding-bottom: 15px;
    }
    .popup {
        overflow-y: auto;
        overflow-y: scroll;
    }
    .popup-inner {
        width: 80%;
        height: auto !important;
        padding: 10px;
    }
    .distanceTxtClose {
        padding-bottom: 30px;
    }
    .popup-inner p {
        font-size: 1.0em;
        padding: 5px 5px 5px 5px;
        line-height: auto!important;
    }
    .popup-close {
        top: -10px;
        right: 15px;
    }
}

@media all and (max-device-width: 600px),
all and (max-width: 600px) {
    #containerraum {
        left: auto;
        right: 3%;
        top: 270px;
        width: 80%;
    }
    #prevslide,
    #nextslide {
        top: 200px !important;
    }
    #prevslide {
        left: 250px !important;
    }
}

@media all and (max-device-width: 480px),
all and (max-width: 480px) {
    #logo {
        width: 160px;
    }
    #headermobile p.tel {
        width: 32px;
    }
    #headermobile p.oeffnungszeiten {
        width: 32px;
    }
    #headermobile p.impressionen {
        width: 32px;
    }
    #headermobile p.rundgang {
        width: 32px;
    }
    #prevslide,
    #nextslide {
        top: 180px !important;
    }
    #prevslide {
        left: 200px !important;
    }
    #containerraum {
        left: auto;
        right: 3%;
        top: 230px;
        width: 80%;
    }
    #navigationmobile img {
        width: 32px;
    }
    #herzlichwillkommen {
        top: 280px;
    }
}

@media all and (max-device-width: 380px),
all and (max-width: 380px) {
    .tx-sremailsubscribe-pi1 input.tx-sremailsubscribe-pi1-submit {
        margin-left: 0px;
    }
    #container .tx-sremailsubscribe-pi1 p.editAccount {
        margin-left: 0px;
        margin-top: 20px;
    }
    #herzlichwillkommen {
        font-size: 30%;
    }
    #headermobile {
        display: none;
    }
    #headermobilesmartphone {
        display: block;
        margin: 0;
        padding: 0;
        padding-left: 200px;
        width: auto;
        height: auto;
        background: #1d1d1b;
        text-align: right;
        overflow: hidden;
    }
    #headermobilesmartphone .erstezeile {
        float: right;
        margin: 0;
        padding: 0;
        width: 95px;
        overflow: hidden;
    }
    #headermobilesmartphone .zweitezeile {
        float: right;
        margin: 0;
        padding: 0;
        padding-bottom: 20px;
        width: 95px;
        overflow: hidden;
    }
    #headermobilesmartphone p {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        text-align: center;
        font-size: 94%;
        color: #ffffff;
        font-weight: normal;
        line-height: 1.3;
    }
    #headermobilesmartphone p.tel {
        float: left;
        width: 32px;
        padding-top: 20px;
        margin-right: 10px;
    }
    #headermobilesmartphone p.oeffnungszeiten {
        float: left;
        width: 32px;
        padding-top: 20px;
        margin-right: 10px;
    }
    #headermobilesmartphone p.impressionen {
        float: left;
        width: 32px;
        padding-top: 10px;
        margin-right: 10px;
    }
    #headermobilesmartphone p.rundgang {
        float: left;
        width: 32px;
        padding-top: 10px;
        margin-right: 10px;
    }
    #navigationmobile {
        padding: 11px 20px 11px 36%;
    }
    #prevslide,
    #nextslide {
        top: 197px !important;
    }
    #prevslide {
        left: 190px !important;
    }
    #containerraum {
        left: auto;
        right: 3%;
        top: 230px;
        width: 88%;
    }
}


/***********************************
******* News  
************************************/

.news .article {
    margin-bottom: 10px;
    padding-bottom: 0;
}

.social {
    margin-top: 20px;
}

.no-media-element {
    display: none;
}

.more,
.news-backlink-wrap {
    padding: 5px 8px 5px 0px;
}


/***********************************
******* Druckversion  
************************************/

@media print {
    #header,
    #logo,
    #navigation,
    #headermobile,
    #headermobilesmartphone,
    #menu,
    #navigationmobile,
    .tx-kesselhausnl a.print {
        display: none;
    }
    #containerraum {
        left: 0px;
        top: 0px;
        width: 800px;
    }
}