/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* General */

body {
    background: #FFFFFF url('../img/rapport.jpg') repeat;
    color: #333333;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    margin: 0px;
    padding: 0px;
    text-align: center;
    width: 100%;
}

a {
    color: #336699;
    text-decoration: none;
}

a:hover, h1 a, a h1, a.active {
    color: #CC3300;
}

p, ul {
    margin: 0px;
    padding: 0px;
}

img {
    width: 100%;
}

dt, strong {
    color: #CC3300;
    font-weight: 700;
}

.h100 {
    height: 100px;
}

.float-off {
    float: none !important;
}

/* Headlines */

h1 {
    color: #CC3300;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

h2 {
    color: #CC3300;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 10px 0px 5px;
    text-transform: uppercase;
}
* + html h2 {
    padding: 0px;
    margin: 0px;
}

h3 {
    color: #CC3300;
    font-size: 16px; 
    font-weight: 400;
    text-align: left;
}

h4 {
    color: #CC3300;
    font-size: 12px; 
    font-weight: 700;
    text-align: center;
    margin: 0;
}

/* Fonts */

.marker {
/*    font-family: 'Permanent Marker', cursive !important;*/
}

.school {
/*    font-family: 'Pacifico', cursive !important;*/
}


/* Header */

header {
    height: 90px;
    margin: 80px auto 40px;
}

.logo {
    display: none;
}


/* Navigation */

.navbar-default {
    border: none;  
}

nav.navbar.navbar-default.navbar--header {
    background: none;
}

.navbar-default .navbar-toggle {
    border: none;
    background-color: #CC3300;
}

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

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

nav.navbar.navbar-default.navbar-fixed-top.navbar--header {
    background-color: transparent;
}

.navbar-default .navbar-nav>li>a {
    color: #336699;
    display: block;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover {
    background-color: transparent;
    color: #CC3300;
}

.navbar-nav {
    float: none;
    margin: auto;
}

ul#pages.nav.navbar-nav {
    display: table;
    float: none;
    margin: auto;
}

.navbar-nav>li {
    display: table-cell;
    /*font-family: 'Permanent Marker', cursive !important;*/
    float: none;    
    padding: 10px 5px 0px;
    vertical-align: middle;
}

.navbar-nav>li:first-child {
    padding: 25px 10px 10px;
}

.navbar-nav>li>a {
    padding: 0;
}

nav ul {
    /*font-family: 'Shadows Into Light', cursive;*/
    /*font-family: 'Shadows Into Light Two', cursive;*/
    /*font-family: 'Nothing You Could Do', cursive;*/
    /*font-family: Georgia, Times, serif;*/
    font-weight: normal;
    /*font-weight: 600;
    letter-spacing: 1px;*/
    line-height: 1.2;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

nav ul li {
    background: #F6F3F1 url('../img/reisszwecke-weiss.png') center 5px no-repeat;
    background-size: 16px 16px;
    box-shadow: 1px 1px 6px #666666;
    float:left;
    height: 20px;
    margin: 0px 5px;
    padding: 22px 0px;
    width: 78px;
}

nav ul li.active {
    background: #F6F3F1 url('../img/reisszwecke.png') center 5px no-repeat;
    background-size: 16px 16px;
}

nav ul li:hover a, nav ul li.active a {
    color: #CC3300;
}

nav ul li:nth-child(4n+3) {
    transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -webkit-transform: rotate(3deg);
}

nav ul li:nth-child(4n+0), nav ul li:nth-child(4n+1) {
    transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -webkit-transform: rotate(-3deg);
}

nav ul li:first-child {
    background-image: url('../img/reisszwecke-weiss.png');
    height: 42px;
    transform: rotate(-9deg);
      -moz-transform: rotate(-9deg);
      -ms-transform: rotate(-9deg);
      -o-transform: rotate(-9deg);
      -webkit-transform: rotate(-9deg);
    width: 90px;
}

nav ul li:first-child img {
    height: 55px;
}

nav ul li a {
    display: block;
}

.navbar-default .navbar-nav > li > a.inline,
nav ul li a.inline {
    display: inline;
}

nav ul li a span.hover {
    display: none;
}

nav ul li a:hover span.hover {
    display: inline;
}

aside.navigation {
    float: left;
    margin: 0px 20px 20px;
    width: 190px;
}

aside.navigation .award a h2 {
    color: #336699;
    text-transform: none;
}

aside.navigation .award.active a h2, aside.navigation .award a:hover h2 {
    color: #CC3300;
}

/* Content elements */

.teaser {
    padding-left: 40px;
    text-align: left;
}

.infonote .teaser h1 {
    text-align: left;
}

.infonote h2 a {
	color: #336699;
}

.infonote h2 a:hover,
.infonote h2 a:focus,
.infonote h2 a.active {
	color: #CC3300;
	text-decoration: none;
}

.aktuell {
    background: #CC3300 url('../img/reisszwecke-weiss.png') center 5px no-repeat;
    background-size: 24px 24px;
    box-shadow: 1px 1px 6px #666666;
    color: #FFF;
    margin: 0 auto 40px;
    padding: 20px;
    text-align: center;
}

.aktuell h1 {
    color: #FFF;
    text-align: center;
}

.aktuell a {
    color: #FFF;
    font-weight: 700;
    text-decoration: underline;    
}

.text {
    background: #F6F3F1 url('../img/stecknadel.png') center 5px no-repeat;
    background-size: 203px 25px;
    box-shadow: 1px 1px 6px #666666;
    margin: 0px auto 40px auto;
    padding: 40px 60px;
    text-align: left;
}

.menu {
    background: #F6F3F1 url('../img/reisszwecke.png') center 5px no-repeat;
    background-size: 20px 20px;
    box-shadow: 1px 1px 6px #666666;
    /*font-family: 'Permanent Marker', cursive !important;*/
    margin: 0px auto 20px auto;
    padding: 30px 20px 20px;
}

.menu.active > a {
    color: #CC3300;
}

.image {
    background-image: url('../img/galerie_quer.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 360px;
    height: 280px;
    float: left;
    margin: 0 10px 20px;
    padding: 35px 35px 25px 35px;
    text-align: center;
}

.imagehigh {
    background-image: url('../img/galerie_hoch.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    height: 360px;
    float: left;
    margin: 0 10px 20px;
    padding: 35px 30px 35px 30px;
    text-align: center;
}

.calender h1 {
    /*font-family: 'Pacifico', cursive !important;*/
    font-size: 36px;
    /*font-weight: normal;
    letter-spacing: 0.04em;
    */
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center;
}

.calender dd {
    margin-bottom: 10px;
    padding-left: 74px;
}

.guestbook {
    background: #F6F3F1 url('../img/stecknadel.png') center 5px no-repeat;
    background-size: 203px 25px;
    box-shadow: 1px 1px 6px #666666;
    margin: 0px auto 20px;
    padding: 60px 60px 20px 60px;
    text-align: left;
    width: 680px;
}

.businesscard {
    background: #F6F3F1 url('../img/reisszwecke.png') center 5px no-repeat;
    background-size: 24px 24px;
    box-shadow: 1px 1px 6px #666666;
    display: table;
    float: left;
    height: 185px;
    margin: 0px 20px 40px;
    padding: 0px 20px;
    text-align: center;
    width: 290px;
}

.businesscard > div {
    display: table-cell;
    vertical-align: middle;
}

.businesscard > .tinymcewysiwyg > h1 {
    margin: 10px auto;
    text-align: center;
}

.businesscard > .tinymcewysiwyg > p {
	margin-bottom: 0;
}

.award {
    background: #F6F3F1 url('../img/reisszwecke.png') center 5px no-repeat;
    background-size: 20px 20px;
    box-shadow: 1px 1px 6px #666666;
    float: left;
    height: 123px;
    margin: 0px 0px 20px 20px;
    padding: 25px 20px 25px;
    width: 185px;
}

.award img {
    width: auto;
}

.newspaper {
    background: #F6F3F1 url('../img/pinnadel.png') center 5px no-repeat;
    background-size: 26px 26px;
    box-shadow: 1px 1px 6px #666666;
    float: left;
    height: 285px;
    line-height: 1.2;
    margin: 0px 10px 20px;
    padding: 20px 30px 35px 30px;    
    text-align: left;
    width: 310px;
}

.newspaper:nth-child(even), .download:nth-child(even), .businesscard:nth-child(even), 
.award:nth-child(even), .menu:nth-child(even) {
    transform: rotate(1deg);
      -moz-transform: rotate(1deg);
      -ms-transform: rotate(1deg);
      -o-transform: rotate(1deg);
      -webkit-transform: rotate(1deg);
}

.newspaper:nth-child(odd), .download:nth-child(odd), .businesscard:nth-child(odd), 
.award:nth-child(odd), .menu:nth-child(odd) {
    transform: rotate(-1deg);
      -moz-transform: rotate(-1deg);
      -ms-transform: rotate(-1deg);
      -o-transform: rotate(-1deg);
      -webkit-transform: rotate(-1deg);
}

.newspaper:nth-child(3n+3), .download:nth-child(3n+3), .businesscard:nth-child(3n+3),
.text:nth-child(even) {
    margin-right: 0px;
}

.newspaper p, .download p {
    font-size: 12px;
}

.download {
    background: #FDFCFA url('../img/pinnadel.png') center 5px no-repeat; /* #F6F3F1 */
    background-size: 26px 26px;
    box-shadow: 1px 1px 6px #666666;
    float: left;
    height: 285px;
    margin: 0px 10px 20px;
    padding: 35px 30px 35px 30px;
    text-align: center;
    width: 310px;
}

.download > figure {
}

.download > figure > div {
    display: table;
    height: 190px;
    width: 250px;
}

.download > figure > div a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.download figcaption {
    /*font-family: 'Pacifico', cursive !important;*/
    font-size: 14px;
    letter-spacing: 0.02em;
    margin-top: 16px;
}

.download > figure img {
    height: auto; 
    max-height: 190px;
    max-width: 250px;
    object-fit: contain;
    width: auto; 
}

.infonote {
    background: #F6F3F1 url('../img/pinnadel.png') center 5px no-repeat;
    background-size: 26px 26px;
    box-shadow: 1px 1px 6px #666666;
    float: left;
    margin: 10px 10px 20px;
    max-width: 240px;
    overflow: hidden;
    padding: 25px 20px 25px;
}

.infonote.fixed {
    height: 185px;
    width: 220px;
}

.infonote:nth-child(even) {
    transform: rotate(2deg);
      -moz-transform: rotate(2deg);
      -ms-transform: rotate(2deg);
      -o-transform: rotate(2deg);
      -webkit-transform: rotate(2deg);
}

.infonote:nth-child(odd) {
    transform: rotate(-2deg);
      -moz-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
      -o-transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
}

.infonote h1 {
    /*font-family: 'Pacifico', cursive !important;*/
    font-weight: normal;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-align: center;
    width: 200px;
}

.infonote.float-off h1 {
    margin-bottom: 0;
    margin-top: 10px;
    width: inherit;
}

.infonote h1.title,
.infonote.float-off h1.title,
h1.title {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: inherit;
}


/* Newsletter */

.infonote label, #mc-embedded-subscribe {
    color: #333333;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    text-transform: none;
}

#mc_embed_signup_scroll {
	text-align: center !important;
}

#mc_embed_signup .button {
	background-color: #CC3300 !important;
}

#mc_embed_signup .button:hover {
	background-color: #336699 !important;
}

#mc_embed_signup .mc-field-group input {
	border: 1px solid #333333;
	background-color: transparent !important;
	font-size: 16px !important;
	text-align: center !important;
	text-indent: 0 !important;
}

#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
	border: 2px solid #CC3300 !important;
}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
	background-color: transparent !important;
	color: #CC3300 !important;
}

#mc_embed_signup #mce-success-response {
	color: #336699 !important;
	font-weight: 300;
}

input#mc-embedded-subscribe.button {
	margin: auto !important;
}

input#mce-EMAIL.email {
	margin: 0 auto 10px !important;
}

#mc_embed_signup input.email {
	color: #333333 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    text-align: center;
}

.newsletter-form {
	width: 240px;
}

/* Guestbook */

.hcb-comment-tb,
.home-desc,
.home-desc + a,
.hcb-link.del,
small {
	display: none !important;
}

.hcb-mod b {
	color: #333 !important;
}

.home-desc + a {
	color: #F6F3F1 !important;
	text-shadow: none !important;
}

.hcb-shadow-r {
	width: 620px !important;
	border-radius: 3px !important;
	min-height: 32px !important;
	padding: 0 0.4em !important;
	border: 1px solid #ccc !important;
	background-color: #fff !important;
	color: #333333 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

#hcb_form_content {
	width: 620px !important;
	border-radius: 3px !important;
	padding: 0 0.4em !important;
	border: 1px solid #ccc !important;
	background-color: #fff !important;
	color: #333333 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

#hcb_submit {
	color: #ffffff !important;
	background-color: #CC3300 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;
}

#hcb_submit:hover {
	background-color: #336699 !important;
}

blockquote {
	padding: 0 0 10px 0 !important;
	margin: 10px 20px 40px 0 !important;
	font-size: 20px !important;
	border-bottom: 1px solid #cc0000 !important;
	border-left: none !important;
}

#comments_list {
	margin-top: 20px !important;
}

#HCB_comment_box div.comment {
	border-top: none !important;
}


/* Blocks */

.blocks .infonote p + p {
    padding-top: 20px;
}

.center-block {
    margin: 30px auto;
    text-align: center;
}

.w480 {
    max-width: 480px !important;
}

.w300 {
    max-width: 300px !important;
}

.w100 {
    max-width: 100% !important;
}

.product-image {
    border: 10px solid white;
    margin-top: 20px !important;
    transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -webkit-transform: rotate(-3deg);
}

.product-text {
	margin: auto;
}

.note { width: 210px; height: 160px; float: left; margin-right: 10px; margin-bottom: 20px; }

.video { float: left; margin: 10px 20px 10px 20px; }

.text.newsletter {
    float: none;
    margin: 0px auto 60px;
    width: 700px;
}

.text-images > img {
	width: inherit;
}

.text-video-inside {
	margin: 20px auto;
}

.tinymcewysiwyg > p {
	margin-bottom: 10px;
}

.tinymcewysiwyg > h1 {
	margin-bottom: 30px;
}

.tinymcewysiwyg > h2,
.tinymcewysiwyg > h3 {
	margin-bottom: 15px;
}

.tinymcewysiwyg > h4 {
	margin-bottom: 5px;
}

.press .tinymcewysiwyg > h1 {
	margin-bottom: 10px;
}

.news {
    background: #F6F3F1 url('../img/stecknadel.png') center 5px no-repeat;
    background-size: 203px 25px;
    box-shadow: 1px 1px 6px #666666;
    font-size: 16px;
    margin: 0px auto 40px auto;
    padding: 40px 20px;
    text-align: left;
}

.news p, .news figure, .news h1, .news h2, .news h3 {
    margin: auto;
    width: 80%;
}

.news h1 {
    font-size: 36px;
}

.news h1, .news h2, .news h3, .news figure {
    line-height: 1.2;
    margin: 20px auto 40px;
    text-align: center;
}

.news > .tinymcewysiwyg {
	margin-bottom: 80px;
}

.left {
	float: left;
	margin: 0px 20px;
}

.column-left, .column-right {
	width: 200px;	
}

.column-center {
	width: 660px;
}

table tr td {
    vertical-align: top;
}

/* Slider */

.slider {
    background-image: url('../img/slider.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 380px;
    margin: 0px 100px 40px;
    padding: 60px 60px 20px;
    text-align: center;
    width: 480px;
}

.slide .item {
    max-height: 260px;
	max-width: 360px;
}

/* Form */
label { text-transform: uppercase; font-size:11px; }
input { border: 1px solid #999999; font-size: 11px; margin: 0px; margin-bottom: 2px; width: 40px; }
textarea { border: 1px solid #999999; font-size: 11px; margin: 0px; margin-bottom: 2px; width: 240px; font-family:Helvetica, Arial, sans-serif; }
.submit { border: 0px solid #999999; margin: 0px; margin-bottom: 2px; width: 91px; }
.address { width: 240px; }
.unit { width: 80px; border: 1px solid #999999; font-size: 11px; }
	

/* Footer */

footer {
    font-size: 11px;
    margin: 60px 0px 0px;
}

footer a {
    color: #CC3300;
}

footer > footer-nav,
div.footer-nav.navbar.navbar-default {
    background-color: #FDFCFA; 
    box-shadow: 0 0 6px #666666;
    color: #CC3300;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    padding-top: 15px;
    text-align: right;
}


/* Media Queries */

@media (max-width:767px) {
    
    header {
        margin-top: 0px;
    }
    
    .logo {
        display: block;
    }
    
    .navbar-brand > img {
        height: 50px;
        transform: rotate(-9deg);
          -moz-transform: rotate(-9deg);
          -ms-transform: rotate(-9deg);
          -o-transform: rotate(-9deg);
          -webkit-transform: rotate(-9deg);
        width: auto;
    }
    
    .navbar-toggle {
        z-index: 100;
    }
    
    div.navbar-collapse {
        background: #F6F3F1;        
        box-shadow: 1px 1px 6px #666666;
        left: 0px;
        position: absolute;
        top: 0px;
        width: 100vw;
        z-index: 10;
    }

    div.navbar-collapse ul#pages.nav.navbar-nav,
    div.navbar-collapse .navbar-nav>li {
        display: block;
    }
    
    div.navbar-collapse ul#pages.nav.navbar-nav {
        padding-bottom: 40px;
        padding-top: 40px;
    }
    
    div.navbar-collapse ul#pages.nav.navbar-nav li,
    div.navbar-collapse ul#pages.nav.navbar-nav li.active {
        background:none;
        box-shadow: none;
        font-size: 24px;
        height: initial;
        margin: 0px 5px;
        padding: 18px 0px;
        width: initial;
    }
    
    .slider {
	    height: 210px;
        width: 300px;
        margin: 0 auto 40px;
        padding: 30px 50px 30px 30px;
    }
	
	.slide .item {
	    max-height: 150px;
		max-width: 200px;
	}


    footer > footer-nav,
    div.footer-nav.navbar.navbar-default {
        text-align: center;
    }
    
    .w100,
    .news {
	    max-width: 90% !important;
		margin: auto;
    }
    
    .infonote.infodates {
		margin-bottom: 20px;
	    transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
    }
    
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {

}