/*
Theme Name: Barfinfo.de Theme
Version: 2019
Author: Florian Wahr
Author URI: https://webtooltime.com/
*/

@import 'css/resets.css';

html, body {
    min-width: 100%;
    height: 100%;
}

*, *::before, *::after, html {
    -webkit-appearance: none;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    -webkit-border-radius:0; 
    border-radius:0;
    
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    -ms-transition: all 0.35s; 
    -o-transition: all 0.35s; 
    transition: all 0.35s;  
}

body {
    margin: 0; 
    padding: 0;        
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility; 
    background-color: #fff;
    color: #444;     
}


.screen-reader-text, .assistive-text { display: none; }

hr {
    height: 1px;
    background: transparent;
    border: none;
    border-bottom: 3px solid #f2f2f2; 
}


/* Positioning */
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter, .center { margin: auto; text-align: center; }
.alignnone { float: none; display: block; }

.ta-left { text-align: left; }
.ta-right { text-align: right; }
.ta-center, .center { text-align: center; }

.block { display: block; }
.inline-block { display: inline-block; }

.clear { clear: both; }

img.alignleft, iframe.alignleft, .wp-caption.alignleft { margin: 10px 15px 10px 0; }
img.alignright, iframe.alignright, .wp-caption.alignright { margin: 10px 0px 10px 15px; }


/* Captions */
.wp-caption .wp-caption-text, .gallery-caption {
    margin: 0;
    padding: 5px 15px 15px;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
}
.wp-caption {
    background: transparent;    
    max-width: 100%;    
    margin: 10px auto 20px;
    text-align: center;    
}
.wp-caption img {
    padding: 2px;
}

.wp-caption.alignleft, .wp-caption.alignright {
    float: none;
    display: inline-block;
}

@media all and (max-width: 480px) {
    .gallery-caption {
        font-size: 14px;
    }
}


/* Text Styling */
small { font-size: 0.875em; }
strong, .b, .bold { font-weight: 400; }
em, i { font-style: oblique; }
.tt-uc { text-transform: uppercase; }
.tt-lc { text-transform: lowercase; }
.brd-btm { border-bottom: 1px solid #ccc; }


/* Colors */
.black { color: #000 !important; }
.blue { color: #005ca9 !important; }



/* Headings */
h1, h2, h3, h4, h5, h6, .title {    
    margin-bottom: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 21px;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h4, h5, h6 {
    font-size: 18px;
    line-height: 24px;
}
h1 { 
    font-size: 24px; 
    line-height: 30px;
    font-weight: 600;
}
.title { display: block; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a.title, .title a { 
    text-decoration: none; 
}
p + h2, p + h4, p + h5, p + h6, p + .title { margin-top: 20px; }



@media all and (max-width: 600px) {
    h1, h2, h3, h4, h5, h6, .title, .comment-reply-title {
        margin: 0 0 10px;
    }
}


/* Hyperlinks */
a { 
    color: #005ca9;
    text-decoration: none;
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    -ms-transition: all 0.35s; 
    -o-transition: all 0.35s; 
    transition: all 0.35s;  
}
a:hover, a:focus { 
    text-decoration: none;
    color: #004f91; 
}

a.show-all {
    text-transform: uppercase;
    font-weight: 400;
}
a.show-all::after {
    content: " ›";
}


/* Lists */
ul, ol {
    padding: 0 0 0 20px; 
    margin: 0 0 15px; 
}
ul {
    list-style-type: square;
}
ul.no-lst { 
    list-style-type: none; 
    padding: 0; 
}

.icon-list {
    padding: 0 0 0 2px;
    margin: 0 0 15px;
}
.icon-list i {
    display: inline-block; 
    margin-right: 5px;
}


/* Paragraphs */
p { margin: 0 0 10px; }




/* Media */
img, iframe { max-width: 100%; }
img { height: auto; }

.embed-container {
    position: relative;
    height: 0;
    overflow: hidden;
    width: 100%;
    height: 550px;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media all and (max-width: 978px) {
    .embed-container { height: auto; }
    .embed-container.ratio16x9 { padding-bottom: 56.25%; } /* ratio 16x9 */
    .embed-container.ratio4x3 { padding-bottom: 75%; } /* ratio 4x3 */
}


.gallery-item img {
    padding: 5px;
    border: none !important;
}


@media all and (max-width: 480px) {
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item 
    {
        width: 50% !important;
    }
}
@media all and (max-width: 300px) {
    .gallery .gallery-item {
        float: none;
        margin: 0 auto 10px !important;
        width: 100% !important;
    }
    .gallery .gallery-item img {
        padding: 0; 
    }
}


/* Forms */
form input[type=text], form input[type=email], form textarea {
    padding: 3px 5px;
    border: 1px solid #000;
    padding: 5px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.25em;
    line-height: 1.5em;
    border: 1px solid #000;    
}
form input[type=text], form input[type=email], form textarea {
    width: 100%;    
}
form input[type=submit] {
    margin: 10px 0 25px;
}


/* Misc. */
.credits {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 16px;
    color: #999;
}


/* Structure */
.innerwrap {
    width: 1024px;
    margin: auto;
}
aside .innerwrap, .post .innerwrap {
    width: auto !important;
} 


@media all and (max-width: 1216px) {
    .innerwrap {
        width: 1024px;
    }
}
@media all and (max-width: 1088px) {
    .innerwrap {
        width: 960px;
    }
}
@media all and (max-width: 1024px) {
    .innerwrap {
        width: 832px;
    }
}
@media all and (max-width: 960px) {
    .innerwrap {
        width: 768px;
    }
}
@media all and (max-width: 832px) {
    .innerwrap {
        width: 90%;
    }
}



/* Header */
header {
    margin: 0 auto 15px;
}

/* Header Site-Stripe */
.site-stripe {
    padding: 10px 0 0;
    overflow: hidden;
    background-color: #f2f2f2;
}
.site-stripe .hotline {    
    margin-top: -5px;
    float: right;
    color: #6b6c6d;
    text-transform: uppercase;
    word-spacing: 3px;
    letter-spacing: 1px;
}
.site-stripe .info-text {
    position: relative;    
    top: -5px;
}
.site-stripe .info-text .info-shop-mobile {
    display: none;
}
@media all and (max-width: 1024px) {
    .site-stripe {
        padding: 10px 0;
        font-size: 14px;
        line-height: 22px;
    }
    .site-stripe .hotline {
        margin-top: 0;
    }
    .site-stripe .info-text {
        position: static;    
        top: 0;
    }
}
@media all and (max-width: 768px) {
    .site-stripe .info-text .info-mag {
        display: none;
    }
}
@media all and (max-width: 480px) {
    .site-stripe .info-text .info-shop {
        display: none;
    }
    .site-stripe .info-text .info-shop-mobile {
        display: inline;
    }
}




/* Header Content */
.header-content {
    padding: 20px 0 0;
}


/* Header Logo */
header .logo {
    display: block;
    margin: auto;
    float: left;
}
header .banner {
    float: right;
}

@media all and (max-width: 680px) {
    header {
        text-align: center;
    }
    header img.logo, header .banner {
        float: none;
        margin: 0 auto;
    }
    header img.logo {
        margin-bottom: 10px;
    }
}


/* Navigation */
header nav {
    margin: 10px 0 0;
    background-color: #283891;
    color: #fff;        
    text-align: left;
}
header nav ul {
    display: inline-block;
    vertical-align: middle;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
header nav ul li {
    display: inline-block;
    vertical-align: top;
}
header .navi-visible ul li {
    display: block !important;        
}

header nav ul li a {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
}
header nav ul li a:visited,
header nav ul li a:active,
header nav ul li a:focus {
    color: #fff;
}
header nav ul li:hover a {
    text-decoration: none;
    color: #fff;
    background-color: #6876c2;
}

header nav ul li.navi-toggle-btn {
    display: none;
    font-size: 20px;
}
header nav ul li.navi-toggle-btn span {
    padding: 0 5px; 
    text-transform: uppercase;
    font-weight: 600;
}
header .navi-visible nav ul li.navi-toggle-btn i.fa::before {
    content: "\f00d" !important;
    color: red;
}
header nav ul li.navi-toggle-btn:hover {
    cursor: pointer; 
    color: #fff;
}


@media all and (max-width: 960px) {
    header nav ul {
        display: block;
    }
    header nav ul li {
        display: none;
    }
    header nav ul li.mobile {
        display: inline-block;        
    }
    header nav ul li a {
        padding: 5px 23px;
    }
}


/* Content Section */
#content {
    width: 70%;    
    display: inline-block;
    vertical-align: top;
}
body.page #content {
    float: right;
}

/* Sidebar */
#sidebar {
    width: 28%;    
    display: inline-block;
    vertical-align: top;
    float: right;
}

body.page #sidebar {
    float: left;
}



#sidebar .box {
    margin: 0 auto 20px;
    background-color: #E6E9FF;
    border-bottom: 3px solid #283891;
}
#sidebar .box.widget_media_image {
    border: none;
    background: transparent;    
}

#sidebar .box .innerwrap {
    padding: 10px 15px 5px;
}
#sidebar .box.widget_media_image .innerwrap {
    padding: 0;
}

#sidebar .box .title {
    margin: 0 0 5px;
    font-weight: 400;
    text-transform: uppercase;
}



@media all and (max-width: 767px) {
    #content, body.page #content, #sidebar {
        width: auto;        
        display: block;
        float: none;
        clear: both;
    }
    #sidebar .box {
        display: inline-block;
        vertical-align: top;
        width: 49%;
        margin-right: 1%;
    }
}
@media all and (max-width: 600px) {
    #content img.alignright, #content img.alignleft {
        max-width: 50%;
    }
}
@media all and (max-width: 480px) {
    #sidebar .box {
        display: block;        
        width: 100%;
        margin: 0 auto 10px;
    }
}
@media all and (max-width: 300px) {
    #content img.alignright, #content img.alignleft {
        float: none;
        width: auto;
        max-width: 100%;
        max-height: 250px;        
        margin: 0 auto 5px;
    }
}


/* Pagination */
.barfinfo-pagination, .wp-pagenavi {
    margin: 15px auto;    
}


/* Posts */
#p-none {
    margin-bottom: 40px;
}

.post.single hgroup {
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 3px solid #283891;
}
.post hgroup .title {
    margin-bottom: 0;    
    text-transform: uppercase;
    font-weight: 600;
}

.post.overview {
    padding: 0;
    margin-bottom: 15px;
    border: 1px solid #e6e9ff;
    border-left: 3px solid #e6e9ff;        
}
.post.overview:hover {
    border-color: #283891;
}
.post.overview .innerwrap {
    padding: 10px;
}

.post.overview hgroup {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e6e9ff;
}

.post.overview .title {    
    color: #333;
    font-size: 21px; 
    line-height: 23px;    
}
.post.overview .post-meta {
    float: right;   
    margin: 5px 0 0; 
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
}
.post.overview .post-image-wrap {
    float: left;
    margin: 0 15px 10px 0;
}
.post.overview .more-link {
    display: block;
    clear: both; 
    background-color: #e6e9ff;    
    font-weight: 600;
    font-size: 16px;
    text-align: right;
}
.post.overview .more-link:hover {
    background-color: #283891;
    color: #e6e9ff;
}
.post.overview .more-link span {
    padding: 0 10px;
}
.post.overview .more-link span::after {
    content: " ›";
}


.post.overview .post-content {    
    font-size: 18px;
    line-height: 24px;
}

.post-meta .schema { display: none; }
.post-meta .post-date, .post-meta .category {         
    font-weight: 400;    
}

@media all and (max-width: 768px) {
    .post.overview .post-image {
        width: 200px;
        height: auto;
    }
}
@media all and (max-width: 680px) {
    .post.overview .post-image {
        width: 150px;
        float: left;
        margin: 5px 10px 10px 0;
    }
    .post.overview .title {
        margin-top: 0;
        line-height: 30px;
    }
    .post.overview .post-content {
        clear: both;
    }
}
@media all and (max-width: 544px) {
    .post.overview hgroup {
        clear: both;
    }
}
@media all and (max-width: 288px) {
    .post.overview .post-image {
        width: 100%;
        height: auto;
    }
}

/* WP-PageNavi */
.wp-pagenavi a, .wp-pagenavi span {
    padding: 3px 8px;
    white-space: nowrap;
}

@media all and (max-width: 480px) {
    .wp-pagenavi span.pages {
        display: block; 
        margin-bottom: 10px;
        padding: 0;
        border: none;        
    }
    .wp-pagenavi a.last {
        display: block; 
        margin-top: 10px;
    }
}


/* Featured Section */
section#featured {
    clear: both;
    background-color: #e6e9ff;
}
section#featured .innerwrap {
    padding: 20px 0;    
}
section#featured .title {
    margin: 0 0 10px;
    font-weight: 600;
    text-transform: uppercase;
}
section#featured .show-all {
    display: block;
    margin: 15px auto;
}

section#featured .post.featured {
    display: inline-block;
    vertical-align: top;
    width: 25%;
}
section#featured .post.featured .innerwrap {
    margin: 3.33333px;
    padding: 0;
    background-color: #fff;
    border-bottom: 3px solid #283891;
}

.post.featured .title {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}
.post.featured hgroup {
    padding: 10px;
}
.post.featured .more-link::after {
    content: " ›";
}

@media all and (max-width: 768px) {
    section#featured .post.featured {
        width: 50%;
    }
    section#featured .post.featured img {
        width: 100%;
        height: auto;
    }
}
@media all and (max-width: 480px) {
    section#featured .post.featured {
        width: 100%;
        display: block;
        margin: 0 auto 10px;
    }
    section#featured .post.featured img {
        height: 105px;
        width: auto;
        float: left;
        margin-right: 15px;
    }
}
@media all and (max-width: 400px) {
    section#featured .post.featured img {
        height: auto;
        width: 40%;
        margin-right: 10px;
    }
    .post.featured hgroup {
        padding: 5px 10px;
    }
}
@media all and (max-width: 300px) {
    section#featured .post.featured img {
        height: auto;
        width: 100%;
        margin: 0 auto 5px;
    }
    section#featured .title {
        margin: 0;
    }
}



/* Footer */
footer {    
    padding: 20px 0;
    background-color: #293a93;
    color: #ccc;
}
footer a, footer a:focus, footer a:active, footer a:visited {
    color: #ccc;
    text-decoration: none;
}
footer a:hover {
    color: #fff;
    text-decoration: none;
}

footer .box {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    margin-right: 1%;   
    margin-bottom: 15px;
}
footer .box:last-of-type {
    margin-right: 0;
}
footer .box a {
    color: #333;
    text-decoration: underline;
}
footer .box a:hover {
    text-decoration: none;
}
footer .box .headline {
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 400;
    color: #333;
}
footer .box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
footer .box ul.links-special i {
    display: inline-block;
    width: 27px;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    background-color: #9c9d9e;
    color: #d5d6d7;
    font-size: 17px;
    line-height: 27px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 15px;
    position: relative;
}
footer .box ul.links-special li {
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 400;
}
footer .box ul.links-special li a {
    text-decoration: none;
}
footer .box ul.links-special li a:hover {
    text-decoration: underline;
}

@media all and (max-width: 1024px) {
    footer .box {
        width: 31%;
    }
    footer .box.klimadruck {
        display: none;
    }
}
@media all and (max-width: 864px) {
    footer .box {
        font-size: 16px;
        line-height: 22px;
    }
}
@media all and (max-width: 640px) {
    footer .box {
        width: 48%;
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 24px;
    }
}
@media all and (max-width: 480px) {
    footer .box {
        width: auto;
        display: block;
    }
}