/*
Theme Name: VANLIFE Magazin
Theme URI: https://vanlifemagazin.eu
Template: Extra
Author: CeeQoo
Author URI: https://www.ceeqoo.com
Description: WordPress Template für das VANLIFE Magaziin
Version: 4.0.3.1575642192
Updated: 2021-05-03 14:50:12
*/

/* Start your custom CSS bellow this comment
============================================ */
/* Schriftdefinitionen */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-light-webfont.woff2') format('woff2'),
         url('fonts/opensans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/opensans-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
         url('fonts/opensans-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/opensans-semibolditalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('fonts/opensans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-extrabold-webfont.woff2') format('woff2'),
         url('fonts/opensans-extrabold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-extrabolditalic-webfont.woff2') format('woff2'),
         url('fonts/opensans-extrabolditalic-webfont.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-thin-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-thin-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-thinitalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-thinitalic-webfont.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-extralight-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-extralight-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-extralightitalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-extralightitalic-webfont.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-light-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-regular-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-italic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-medium-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-mediumitalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-mediumitalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-semibold-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-semibolditalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-bold-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-extrabold-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-extrabold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-extrabolditalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-extrabolditalic-webfont.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-black-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-black-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/sairasemicondensed-blackitalic-webfont.woff2') format('woff2'),
         url('fonts/sairasemicondensed-blackitalic-webfont.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}


body {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: rgb(0 0 0 / 85%);
  	-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}
a {
	color: #46aaaa;
}
a:hover {
	color: #348282;
} 

/* Headlines */
h1, h2, h3, h4, h5, h6 {
	font-family: "Saira SemiCondensed",Helvetica,Arial,Lucida,sans-serif;
}

h1 {
    font-size: 40px;
	text-align: left;
    padding-bottom: 10px; 
    line-height: 1.2em;
    font-weight: 500;
}
/* h2 {
    font-size: 18px!important;
    line-height: 1.3em!important;
    font-weight: 500!important;
}*/
h3 {
    font-size:22px;
	font-weight: 600!important;
}
h4{
    font-weight: 600!important;
    font-size: 20px;
} 
/*
h5 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.8em;
} 
 h6 {
font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.8em;*/

/* Startseite */
/* h2 .entry-title {
    font-size: 18px!important;
    line-height: 1.3em!important;
    font-weight: 500!important;
}*/

/*keine Abteilungen*/
.nowrap{
  	-webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

/*=========================== Menüanpassungen ===========================*/
#logo {
    opacity: 0.8;
}
/* Hauptmenü */
@media only screen and (min-width: 768px){
#et-menu li {
	font-family: "Saira SemiCondensed",Helvetica,Arial,Lucida,sans-serif;
	font-size: 1.4em;
	padding-bottom: 18px;
	}
#et-menu > li > a {
		padding-bottom: 0px !important;
	}
}

/* Hamburger anpassen */
.show-menu-button {
    background: none;
	padding-left: 0px !important;
}
.show-menu-button span {
    background: rgb(255 255 255 / 75%);
	width: 32px;
    height: 4px;
	margin-bottom: 6px !important;
}
.show-menu-button.toggled span {
	width: 32px;
    height: 4px;
	margin-bottom: 1px !important;
}
#et-mobile-navigation nav {
/*	padding-top: 0px !important;*/
    background-color: #ffffffee !important;
}
/* Menü wird auch auf mobilen Geräten fixiert, die Höhe angepasst und das Dropdown-Menü scrollbar gemacht */
@media (max-width: 980px) {
    .et_non_fixed_nav.et_transparent_nav #main-header,
    .et_non_fixed_nav.et_transparent_nav #top-header,
    .et_fixed_nav #main-header, .et_fixed_nav #top-header {
        position: fixed !important;
		width: 100%;
        } 
    }

.et_mobile_menu {
    overflow: scroll !important;
    max-height: 83vh;
    }
/* Menü auf Mobil anpassen */

@media (max-width: 980px) {
  #main-content {
    padding-top: 150px !important;
    }
  }

/* stop menu from overlapping logo on mobile */

@media all and (max-width: 768) {
    header .logo_container {
        position: relative !important;
        padding-top: 15px;
    }
    header div#et-top-navigation {
        padding-left: 0 !important
    }
}
#et-trending-button {
	display: none !important;
}

@media (max-width: 374px) {
#logo {
    width: 72vw;
	height: unset;
    }
  }
/*=========================== Ende Menüanpassungen ===========================*/

/*======================== Beitrag/Post Anpassungen =========================*/
@media only screen and (min-width: 1025px){
.post-header {
	text-align: left;
	padding-top: 36px;
	padding-right: 60px;
	padding-bottom: 30px;
	padding-left: 60px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px){
.post-header {
	padding-right: 40px;
	padding-left: 40px;
}
}
@media only screen and (max-width: 768px){
h1 {
	font-size: 32px;
	}
.post-header {
	text-align: left;
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
}
.featured-image-caption {
    padding: 4px 20px 6px 20px !important;
	font-size: 12px !important;
    line-height: 1.4em;
}
.post-thumbnail {
		margin-bottom: 16px;
	}
.post-content {
	margin-top: 16px !important;
	}
}

.et_pb_extra_module .post-content h2 a {
    font-size: 1.2em;
    font-weight: 600!important;
}
.et_pb_extra_module .post-content p {
    line-height: 1.4em;
/*    font-size: 0.8em;*/
}
.post-category, .post-meta{
	text-align: left;
	font-size: 12px;
}
.featured-image-caption {
    font-size: 14px;
}
.wp-block-pullquote {
	margin: 0px!important;
	padding-top: 6px;
	padding-bottom: 12px;
}
blockquote {
    font-style: italic;
	text-align: left;
}

/* Bildtext unter Post-Bild */
p.featured-image-caption {
    padding: 4px 60px 6px 60px;
    height: auto;
    display: block;
    text-align: left;
    color: rgb(255, 255, 255);
    background: #274c3c;
}
/* Zusätzliche Bilder in Posts(die wie Polaroids aussehen) Bildtext linksbündig und dunkler */
.wp-caption {
    text-align: left;
	color: #000000;
}
/* Caption unter Block */
.wp-block-embed figcaption {
	text-align: left;
}
/* Farbanpassungen für den Post Module-Header(in module-posts) */
.entry-title a:hover, .module-head a:hover{
	-webkit-filter: brightness(0.5) !important;
	filter: brightness(0.5) !important;
}

/* Artikel Datum und Category-Link */
.post-header .event_data {
    font-size: 1.1em;
}
/*============================== Ende Beitrag/Post Anpassungen =============================*/

/* hover bei Gutenberg-Gallerie */
.wp-block-image.pluszeichen, .blocks-gallery-item {
    position: relative;
	width: 100%;
	height: auto;
}
.wp-block-image.pluszeichen:hover img, .blocks-gallery-item:hover img, .wp-block-image:hover img {
  filter: brightness(0.7);
}
.wp-block-image.pluszeichen a::after, .blocks-gallery-item a::after, .wp-block-image a::after {
	font-family: 'ET-Extra' !important;
	content: '\e050';
    font-size: 32px;
    line-height: 32px;
	color: white;
	text-align: center;
	position: absolute;
	top: 60%;
	left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   opacity: 0;
   -webkit-transition: .3s ease;
   transition: .3s ease;
}
.wp-block-image.pluszeichen:hover a::after, .blocks-gallery-item:hover a::after, .wp-block-image:hover a::after  {
  top: 45%;
  opacity: 1;
}
.wp-block-image figcaption{
	margin-top: 0em!important;
	line-height: 1.4em;
    font-size: 15px;
}
.media-credit-end {
    padding-top: 10px;
    font-size: 12px;
}
.wp-block-gallery figcaption{
	margin-top: 0em!important;
	padding-top: 0em!important;
	line-height: 1.4em;
	text-align: left !important;
}
/*======================= Related Extra Posts Anpassungen ======================*/
.related-post .featured-image {
	margin-bottom:0.4em;
}
/*====================Ende Related Extra Posts Anpassungen ======================*/
/*========================= Related Posts Anpassungen =========================*/
.crp_related {
	border-top-style: solid;
	border-top-color: #558b75;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #558b75;
	border-bottom-width: 1px;
	padding-top: 12px;
	margin-bottom: 36px;
}
.crp_related ul {
	padding: 0px 10px 0px 0px;
}
.crp_related ul li {
/*	padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;*/
	text-align: left;
}
.crp_related.crp-grid ul {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.crp_related.crp-grid ul {
	justify-items: left;
}
.crp_thumb {
    display: block;
    margin: 0 auto;
	float: left;
	padding-bottom: 6px;
	width: 100%;
}
.crp_title {
	line-height: 1.4em;
	padding-right: 10px;
/*	padding-top: 1em;*/
}
/*.crp_title::before, .after::after {
    content: "\A";
    white-space: pre;
}*/

/*====================== Ende Related Posts Anpassungen =======================*/

/*=========================== Bloom Anmeldeformular ===========================*/
/* OPTIN TITLE */
.et_bloom .et_bloom_form_header h2 { 
	font-family: "Saira SemiCondensed",Helvetica,Arial,sans-serif !important; 
	-webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}
/* OPTIN MESSAGE */
.et_bloom .et_bloom_form_header p { font-family: "Open Sans",Helvetica,Arial,sans-serif !important; }
/* Input Fields, i.e. Email Text */
.et_bloom .et_bloom_form_container input { font-family: "Open Sans",Helvetica,Arial,sans-serif !important; }
/* Button Text */
.et_bloom .et_bloom_form_container form button span { font-family: "Saira SemiCondensed",Helvetica,Arial,sans-serif !important; }
/* FORM FOOTER TEXT */
.et_bloom .et_bloom_form_footer p { font-family: "Saira SemiCondensed",Helvetica,Arial,sans-serif !important; }
/* Datenschutzcheck */
.et_bloom .et_bloom_custom_field_checkbox { font-family: "Saira SemiCondensed",Helvetica,Arial,sans-serif !important; } 
.et_bloom_custom_field_optin_4__0 { font-family: "Saira SemiCondensed",Helvetica,Arial,sans-serif !important; } 
/*=========================== Ende Bloom Anmeldeformular ===========================*/

/*=================================Widgets=================================*/
/* rechte Sidebar */
.et_pb_widget .widgettitle {
    background:  #274c3c;
}

.et_pb_widget.widget_media_image a {
	display: flex;
}
/* Vorschlag von Elegant Themes
 * #page-container .et_pb_extra_column_sidebar h4.widgettitle {
background: #000; #b9091c
}
*/
.et_pb_widget ul li {
	display: flex !important;
}
.et_pb_widget .widget_list img {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    margin: 0 10px 0 0;
    vertical-align: top;
}
.et_pb_widget ul li .textkasterl {
    margin-top: -4px !important;
}
.et_monarch .widget_monarchwidget .et_social_networks.et_social_circle ul li  {
	display: unset !important;
}

/* Postslisten */
.et_pb_widget ul li .post_info {
    margin-top: -6px;
}
.et_pb_extra_module .posts-list article .post-content  {
    margin-top: -10px;
}

.et_pb_widget a {
    color: rgba(0, 0, 0, 0.75);
}
.et_pb_widget a:visited{
    text-decoration: none;
    color: rgba(0, 0, 0, 0.75);
}

/* Sliderbild auch verlinkt */
.featured-posts-slider-module .post-content h3 a:before {
    content:"";
    position:absolute;
    top: -1000px;
    left: 0;
    width: 5000px;
    height: 5000px;
}

/* Slider Mobil */
@media only screen and (max-width: 480px) {
.featured-posts-slider-module .carousel-item .post-content-box {
	background: rgba(0, 0, 0, 0.6) !important;
}
.featured-posts-slider-module .carousel-item .post-content h3 a {
	color: #FFFFFF !important;
}
.featured-posts-slider-module .carousel-item .post-meta {
	display: block !important;
}
}


/* Sidebar-AD */
.et_pb_widget.widget_et_ads .etad {
	display: block;
}
.etad a {
	line-height: 0em;
}
.et_pb_widget.widget_et_ads .widget_content {
	margin: 0px;
	padding: 0px;
}
.et_pb_widget.widget_et_ads .etad {
	margin: 0px;
}

/* für den Livegang den Facebook-Button samt Monarch-Widget ausblenden */
.widget_monarchwidget {
	display: none;
}
/* Social Icons aus Header-element ausblenden */
ul.et-extra-social-icons {
	display: none !important;	
}
/* Search-Field breiter */
.et-top-search .et-search-field {
	width: 300px !important;
}
/* Search-Field text color visibility fix 05.06.2025 */
@media only screen and (max-width: 1024px) {
	.et-top-search .et-search-field {
		color: #999 !important;
	}
}

/* Style advanced ads sidebar widget */
/*.vanli-highlight-wrapper img { nicht notwendig wenn Sidebar max-width: 300px
	width: 100%;
} */
.et_pb_widget:has(.vanli-highlight-wrapper) { /* ignore error */
	background: none !important;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}
#block-2 {
	background: none !important;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}
    /*background: rgb(243, 246, 245);*/

/* Sidebar auf Desktop max 300px breit */
@media (min-width: 981px) { .et_pb_widget{ max-width: 300px } }

.vanli-adlabel {
  font-size: 0.7em;
  color: #888;
}
.vanli-vor-blogpost { padding: 20px 0 20px 0 }
.vanli-beitrag-nach-einem-absatz { padding: 20px 0 20px 0 }