/*
Theme Name: Wilder als man denkt
Author: Frank W. Hempel
Author URI: https://www.frank-hempel.de
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diy
Domain Path: /languages
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-header, custom-menu, custom-logo, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('inc/fonts/raleway-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('inc/fonts/raleway-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('inc/fonts/raleway-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('inc/fonts/raleway-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('inc/fonts/raleway-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('inc/fonts/raleway-v18-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* cookie-regular - latin */
@font-face {
  font-family: 'Cookie';
  font-style: normal;
  font-weight: 400;
  src: url('inc/fonts/cookie-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('inc/fonts/cookie-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('inc/fonts/cookie-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('inc/fonts/cookie-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('inc/fonts/cookie-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('inc/fonts/cookie-v12-latin-regular.svg#Cookie') format('svg'); /* Legacy iOS */
}




/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('inc/fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('inc/fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('inc/fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('inc/fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('inc/fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('inc/fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


body, html {
    height: 100%;
}

/* Basic formatting */

div {
    box-sizing: border-box;
}

h1 {
    font-size: 2em;
    margin: 0 0 0.5em 0;
}
h2 {
    font-size: 1.7em;
    margin: 0 0 0.5em 0;
}
h3 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
}
h4 {
    font-size: 1.3em;
    margin: 0 0 0.5em 0;
    color: rgba(102, 102, 102, 1);
}

h1, h2, h3, h4 {
    font-family: 'Cookie';
    font-weight: normal;
    color: #333;
}

main, header, nav, div, section, article, dl, dt, footer {
    box-sizing: border-box;
}

p {
    margin: 0.5rem 0 1rem 0;
}

ul, ol {
    margin-left: 1em;
    margin-top: 0.5em;
    margin-bottom:0.5em;
}
ul ul, ul ol, ol ol, ol ul {
    margin-top: 0;
    margin-bottom:0;
}

nav ul {
    margin:0;
}
nav a {
    text-decoration: none;
}

nav a[href=""], nav a[href=""]:hover {
    color: #333;
    cursor: text;
}

nav .menu .menu-item-has-children  a{
    cursor: default;
}
nav .menu .sub-menu a {
    cursor: pointer;
}


img {
    max-width: 100%;
    height:auto;
    display: block;
}

.iframe-wrapper
 {
    position: relative;
    padding-bottom: 56.10%;
    height: 0;
    overflow: hidden;
}

.iframe-wrapper iframe,
.iframe-wrapper object,
.iframe-wrapper embed
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





pre {
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;
}
sup {
    font-size: 0.6em;
    font-weight: bold;
    vertical-align: super;
}

blockquote {
    background: #f9f9f9;
    border-left: 7px solid #ccc;
    margin: 1em;
    padding: 0.5em;
    line-height: 1em;
    quotes: "\201C""\201D";
}
blockquote:before {
    content: open-quote;
}
blockquote p {
    display: inline;
}
blockquote:after {
    content: close-quote;
}

hr {
    height: 1em;
    border:none;
    border-bottom: 1px solid #bbb;
    clear:both;
    float:none;
    display:block;
}

figcaption {
    text-align:center;
    line-height: 1.2em;
    font-size: 0.85em;
}

.clearfloat {
    clear: both;
    display:block;
    float:none;
}
.klein {
    font-size: 0.85em;
}


/* Wordpress Formatierungen */

.aligncenter,
div.aligncenter,
a img.aligncenter {
    display: block;
    margin: auto;
}

.alignright,
a img.alignright,
.wp-caption.alignright {
    float:right;
    margin: 0 0 1em 1em;
}

.alignleft,
a img.alignleft,
.wp-caption.alignleft,
.wp-post-image {
    float: left;
    margin: 0 1em 1em 0;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

article::after {
    content: "";
    float:none;
    clear:both;
    display:block;
    height:1px;
}

/* Back to top  */

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:30px;
right:5%;
text-indent:-9999px;
display:none;
background: url("inc/pics/top_icon.png");
background-size: 100%;
opacity: 1;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
outline: none;
border-bottom: none;
}

#smoothup:hover {
/* -webkit-transform: rotate(360deg); */

}

.notice {
    max-width: 25em;
    margin:auto;
    border: 3px double #bb0000;
    padding: 1em 2em;
    box-shadow: 0 0 10px #aaa;
    border-radius: 1em;
    font-style: italic;
    margin: 0 auto 2em auto;
}
.zentriert {
    text-align:center;
}



/* styling */

body {
    font-size: 1.1rem;
    border-bottom: 1px solid transparent; /* display always vertical scrollbar */
  font-family: Arial, Helvetica, sans-serif;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffb76b+0,ffa73d+23,ff7c00+59,ff7f04+100 */
background: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 23%, #ff7c00 59%, #ff7f04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 23%,#ff7c00 59%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 23%,#ff7c00 59%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */


   background-color: #FF7D01;
   background-attachment: fixed;
}

body, a {
    color: #333;
}

a {
    text-decoration: none;
    border-bottom: 1px dotted #333;
}

a:hover {
    border-bottom: 1px solid;
}

#wrapper {
    width:96%;
    max-width: 1600px;
    margin:auto;
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
    background-color: rgba(255, 255, 255, 1) ;
    padding: 0;
    border-left: 1px solid #775E37;
    border-right: 1px solid #775E37;
    box-shadow: 0 0 5px #888;
    }



header {
border-bottom: 1px solid #666;
box-shadow: 0 8px 8px rgba(0,0,0,0.1);
}


.headings-container {
    background-color: #fff;
    padding: 0.8rem 1rem 0 1rem;
    border-bottom:1px solid #666;
    position: relative;
}

header a, header a:hover, header h2 {
    border-bottom: none;
    color: #ff7f04;
}
header h1 {
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 4em;
    margin: 0 0 -0.1em 0;
    padding:0;
    font-weight: bold;
    text-shadow: 0 0 6px #999;
}

header h2 {
    font-family: 'Cookie';
    margin: 0 0 0 5em;
    padding:0;
    font-size: 3em;
    line-height: 1;
    font-weight: normal;
    font-style: italic;
 }


header ul, header li {
    margin:0;
    padding:0;
}


.metaslider .caption-wrap {
    background: transparent !important;
    padding:0;
    margin:0;
}
.metaslider .caption {
    background: rgba(0,0,0,0.5);
    display:inline;
    position:absolute;
    right: 1em;
    padding:0;
    line-height: 1em;
    bottom: 0.5em;
    font-size: 0.75em;
    color:#fff;
    border-radius:0.5em;
}



/* Sprachauswahl */

.sprachen {
    position: absolute;
    top:1em;
    right: 1em;
    }
.sprachen li {
    list-style: none;
    float: left;
    padding-left:0.5em;
}




/* Top Menu */

.top-menu {
    font-size: 1.3em;
    font-weight: normal;
    display: inline-block;
    margin:auto;
    text-align:left;
    z-index: 10000 !important;
    }

.top-menu.sticky-element-fixed {
    z-index: 1000;
}

.top-menu ul.menu {
    display: flex;
}

.top-menu a {
    padding: 0 0.5em;
    display: block;
    border-bottom: none;
    height: 1.5em;
    line-height: 1.5em;
    color: #555;
/*    transition:background-color 1s; */
}
.top-menu a:hover {
    color: #164DAB;
    background-color: #eee;
}
.top-menu  .sub-menu {
    position: absolute;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #ccc;
}


.top-menu .menu > li:last-child {

}


.top-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.top-menu  .sub-menu .sub-menu {
    position: absolute;
    left: 96%;
    margin-top: -1.2em;
    white-space: nowrap;
}

.top-menu .menu > li:last-child  .sub-menu .sub-menu .sub-menu{
left: -50%;
}

.top-menu .menu-item-has-children {

}


/* mobiles Menue Plugin */

.slicknav_menu a, .slicknav_menu a:hover {
    border:none;
}


.breadcrumbs {
    margin: 0.5em 0;
    padding: 0.5em 0;
    font-size: 0.8em;
    text-align: left;
}

.breadcrumbs a[href*="#"] {
border-bottom: none;
cursor: text;

}



main {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0 1em;
    width: 100%;
}

.blog .articles {
    padding-top:2em;

}
.blog main, .single main {
    max-width: 1068px;margin:auto;
}

article {
    line-height: 1.3em;
    border-bottom:  1px solid #aaa;
    margin-bottom: 2em;
    padding-bottom: 1em;
}
.page article, .single-post article {
    border-bottom: none;
    max-width: 1068px;
    margin:auto;
}

.blog p {
    margin-top:0;
}

.content {
 /* max-width: 700px;
margin:auto; */
}


.home h1.article-headline {

}


h1.article-headline {
    font-size: 3em;
    line-height: 1em;
    font-weight: normal;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 0.3em 0 0 0;
    font-style: italic;
}
.article-headline a {

}

h1.article-headline, article h3, article h2 {
    font-weight: normal;
    font-style: italic;
}
article h2 {
    line-height: 1em;
    font-size: 2em;
}

.article-date {
    font-size: 0.8em;
    margin:0 0 0.5em 0;
    text-align: right;

}

.read-more {
    margin: 0 0 1em 0;
    font-size: 0.95em;
    text-align: left;
}
.read-more a {

}


/* G㲴ebuch */

.gb-author-info {
    font-size: 0.9em;
    margin-bottom: 1em;
}
textarea.gwolle_gb_content {
  font-family: Helvetica, sans-serif;
}



/* Galerie */
.blocks-gallery-item__caption {
    display: none;
}



/* Very simple events */


#vsel {
    margin-top:2em;
}

#vsel h3 {
    font-size: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
}

.vsel-meta-date, .vsel-meta-single-date {
    margin:0 !important;
    padding:0 !important;
}



/* Tabellen */

table {
    margin: auto;

}

tr:nth-of-type(odd) {
  background-color: #F5F5F5 ;
} {

}

td, th {
    padding: 0.3em 2em;
}

th {
    text-align: left;
    font-weight: normal;
    font-size: 1.1em;
    border-bottom: 1px solid #999;
}


ol li {
    margin: 0.5em 0;
}


.comments-link {
    font-size: 0.9em;
}
.comments-link a {
    color: rgba(102, 102, 102, 1);
}

.next-previous-post {
    font-size: 0.8em;
}

.next-previous-post a {
    display: inline-block;
    padding: 0;
    margin:0;
}

.next-post {
    float: right;
}
.previous-post {
    float: left;
}

/* Comment form */

.comment-form label {
    display: block;
}

.comment-form-comment label {
    vertical-align: top;
}

.comment-form textarea#comment {
    max-width:90%;
}

.navigation:after {
    content:'';
    clear:both;
    float:none;
    display:block;
}

.comment-meta {
    text-align: right;
    font-size: 0.8em;
}
.comment-meta a {
    border-bottom: none;
    cursor: default;
}

#reply-title {
    margin-top:2em;
}

/* Kontaktformular */

.wpforms-container textarea {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;

}






.sidebar-right {
    font-size: 0.8em;
    color: #888;
    margin-left: 3em;
    margin-top:3em;
}

.sidebar-right > div {
    padding: 0.5em 0;
    border-bottom: 1px solid #aaa;
}

.sidebar-right a {
    color: #888;
    line-height: 1.3em;
}

.sidebar-right li {
    list-style: none;
}
.sidebar-right h2 {
    margin: 0;
}
.sidebar-right ul {
    margin-top: 0.2em;
}



.social-media {

}
.social-media  a {
 text-decoration: none;
  border-bottom: none;
  margin: 0 1em;
}
.social-media img {
    margin:0;
    padding:0;
    display:inline;
}
.social-media p {
    text-align:center;

}




footer {
    font-size: 0.9rem;
    line-height: 2rem;
    color: #999;
}

footer ul {
    margin:0 0 0 1em;
}

footer li {
    float: left;
    list-style: none;
    margin-right: 1em;
}

footer a {
    color: #999;
}

.made-by {
    float: right;
    color: #bbb;
}
.made-by a {
    color: rgba(0, 132, 198, 1);
    border-bottom-color: rgba(0, 132, 198, 1);
}

/* Formular Presseanfragen */

label {
    display: block;
}
label.zustimmung {
    display: inline;
}



@media screen and (max-width: 1500px) {

.top-menu {
    position: relative;
    display: block;
    right:0;
}



{

}


@media screen and (max-width: 885px) {

.sidebar-right {
    margin:0;
}

.top-menu {
/*    display:none; */
margin:0;
}

.top-menu a {
    padding: 0 0.8em;
    display: block;
    border-bottom: none;
    height: 1.5em;
    line-height: 1.5em;
    color: #555;
/*    transition:background-color 1s; */
}

main {
     border-top:none;
     display:block;
}

header h1 {
    font-size: 4rem;
}

header h2 {
    margin-bottom: 0.5rem;
    font-size: 2.4rem;
}

.articles {
    padding-right: 0;
}

h1.article-headline {
    margin: 0.2em 0 0.2em 0;
}

td, th {
    padding: 0.3em 0.2em;
}

.sidebar-right {
    margin-left: 0;
}

.next-previous-post {
    clear:both;
    float:none;
    display: block;
    height: 2em;
    border-bottom: 1px solid #aaa;
 }


.alignright,
a img.alignright,
.wp-caption.alignright {
    float:none;
    margin: 0;
    display:block;
    margin:auto;
}

.alignleft,
a img.alignleft,
.wp-caption.alignleft,
.wp-post-image {
    float: none;
    margin: 0;
    display:block;
    margin:auto;
}


}


@media screen and (max-width: 662px) {

body {
    background-image: none;
}

#wrapper {
    box-shadow: none;
}

.top-menu {
    display: none;
}


header h1 {
    font-size: 3rem;

}

 header h2 {
     font-size: 2rem;
    margin-left: 0;
}

h1.article-headline {
    font-size: 2em;

}

.sidebar-right {
    margin-left: 0;
}

.sprachen {
    top:70%;
    }

}

