/*
Theme Name: Bernebeer
Theme URI: http://www.websitelatenmaken.website
Author: Gijs van Berne
Author URI: http://www.websitelatenmaken.website
Description: Bernebeer theme
Version: 1.0
License: Alle rechten voorbehouden.
License URI: http://www.websitelatenmaken.website
*/

/* Reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* Simple grid */
.col-1-1,.grid{width:100%}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0}[class*=col-]{float:left;padding-right:20px}.grid{max-width:1140px;min-width:755px;margin:0 auto;overflow:hidden}.grid:after{content:"";display:table;clear:both}.grid-pad{padding-top:20px;padding-left:20px;padding-right:0}.push-right{float:right}.col-2-3,.col-8-12{width:66.66%}.col-1-2,.col-6-12{width:50%}.col-1-3,.col-4-12{width:33.33%}.col-1-4,.col-3-12{width:25%}.col-1-5{width:20%}.col-1-6,.col-2-12{width:16.667%}.col-1-7{width:14.28%}.col-1-8{width:12.5%}.col-1-9{width:11.1%}.col-1-10{width:10%}.col-1-11{width:9.09%}.col-1-12{width:8.33%}.col-11-12{width:91.66%}.col-10-12{width:83.333%}.col-9-12{width:75%}.col-5-12{width:41.66%}.col-7-12{width:58.33%}.push-2-3,.push-8-12{margin-left:66.66%}.push-1-2,.push-6-12{margin-left:50%}.push-1-3,.push-4-12{margin-left:33.33%}.push-1-4,.push-3-12{margin-left:25%}.push-1-5{margin-left:20%}.push-1-6,.push-2-12{margin-left:16.667%}.push-1-7{margin-left:14.28%}.push-1-8{margin-left:12.5%}.push-1-9{margin-left:11.1%}.push-1-10{margin-left:10%}.push-1-11{margin-left:9.09%}.push-1-12{margin-left:8.33%}@media handheld,only screen and (max-width:767px){.grid{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:20px;padding-right:10px}[class*=col-]{width:auto;float:none;padding-left:0;padding-right:10px;margin:10px 0}[class*=mobile-col-]{float:left;padding-left:0;padding-right:10px;padding-bottom:0;margin:0 0 10px}.mobile-col-1-1{width:100%}.mobile-col-2-3,.mobile-col-8-12{width:66.66%}.mobile-col-1-2,.mobile-col-6-12{width:50%}.mobile-col-1-3,.mobile-col-4-12{width:33.33%}.mobile-col-1-4,.mobile-col-3-12{width:25%}.mobile-col-1-5{width:20%}.mobile-col-1-6,.mobile-col-2-12{width:16.667%}.mobile-col-1-7{width:14.28%}.mobile-col-1-8{width:12.5%}.mobile-col-1-9{width:11.1%}.mobile-col-1-10{width:10%}.mobile-col-1-11{width:9.09%}.mobile-col-1-12{width:8.33%}.mobile-col-11-12{width:91.66%}.mobile-col-10-12{width:83.333%}.mobile-col-9-12{width:75%}.mobile-col-5-12{width:41.66%}.mobile-col-7-12{width:58.33%}.hide-on-mobile{display:none!important;width:0;height:0}}
/* General */
body {}
html {font-size: 16px; font-family: 'Lato', sans-serif}
img {display: block;}
p {}
h1, h2, h3, h4, h5 {display: block}
a {text-decoration: none;}
.clearer {clear: both;}
.hide-on-desktop {display: none !important;}
pre, code{direction: ltr; text-align: left;}
pre {margin-bottom: 10px; font-family: Consolas, Monaco, "Courier New", Courier, monospace; font-size: 12px; font-weight: inherit; overflow-x: auto; white-space: pre-wrap; white-space: -moz-pre-wrap !important;  white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; background: #f3f3f7; border: 1px solid #dedee3; padding: 10px 12px; font-size: 0.9rem; line-height: 1.4em; overflow: auto;}
code {font-size:1.2em; color: #008099}
/* Header */
header {background: #330055; padding: 0px 0px 20px 0px; }
header #logo-container a img {max-width: 210px; height: auto;}
header #logo-container a:hover img {transition: all 0.8s; opacity: 0.3;}
header nav {}
header nav ul {float: right;}
header nav li {float: left; margin-left: 20px;}
header nav a {font-family: 'Lato', sans-serif; color: #fff; font-weight: 700; display: block; line-height: 1.5em; transition: all 0.5s; transition-timing: ease-in-out;}
header nav a:hover {color: rgba(193, 154, 107,0.85);}
#breadcrumb-container {padding-top: 10px; padding-bottom: 10px; font-family: 'Lato', sans-serif; font-size: 0.8rem; line-height: 1.3em; font-weight: 700}
#breadcrumb-container a {color: #330055; border-bottom: 1px dotted #330055;}
#breadcrumb-container .breadcrumb_last {}
ul#social li {float: left; color: #330055;}
section#bottom {background: #330055; padding-bottom: 20px;}
section#bottom .bottom-box {padding: 20px;}
section#bottom a {color: #fff; border-bottom: 1px dotted #fff; font-size: 0.9rem}
/* Animation logo */
#logo-menu-container {overflow: visible; font-family: 'Raleway', sans-serif}
#logo-animation-container {display: flex; align-items: center;}
#logo-animation-container:hover #rings {transform: rotate(180deg);}
#logo-animation-container:hover #logotext {}
#logo-animation-container span {display: inline-block;}
#logotext {font-weight: 900; text-transform: uppercase; color: #fff; font-size: 1.8rem;}
#rings {transition: all 1s; transition-timing: ease-in-out; background: url('images/rings.svg'); width: 36px; height: 36px; background-size: cover; margin-right: 10px;}
#logotext {transition: all 1s; transition-timing: ease-in-out; }
/* Posts & post */
/* Posts */
section#posts, section#post {background: #f9f9f9;}
article .entry-content {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: hidden}
body.home article, body.tag article  {margin-bottom: 20px; position: relative}
body.single article {margin-bottom: 20px}
#large-image-top {height: 200px; background-size: cover; background-position: center}
#left-right-column-container {margin-top: -120px}
#sidebar {margin-top: 120px}
article .megagiftron {position: absolute; top: 156px; left: 40px; z-index: 1000}
article figure, article img {max-width: 100%; height: auto; }
article img.alignleft {float: left; margin-right: 40px; margin-bottom: 40px}
article .thumbnail-container {position: relative;}
article .post-image {height: 325px; background-size: cover; background-position: center; display: block; }
article .entry-content {background: #fff; -webkit-box-shadow: 0px -8px 23px -11px rgba(0,0,0,0.15);
-moz-box-shadow: 0px -8px 23px -11px rgba(0,0,0,0.15);
box-shadow: 0px -8px 23px -11px rgba(0,0,0,0.15);}
article .post-text {padding: 20px 20px 20px 20px; }
article h3 a {font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 1px; min-height: 60px; line-height: 1.2em; margin-bottom: 10px; display: block; color: #330055;}
article.featured h3 a {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 1.3rem; color: #fff; background: #330055; line-height: 38px; padding: 0px 15px 0px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
article .post-main-text {min-height: 120px; }
body.single article .post-main-text {min-height: auto; }
article p {font-size: 0.9rem; line-height: 1.5em; color: #000;}
article.featured p {font-size: 1.15rem; font-weight: 500}
article .post-main-text p a, article .post-main-text li a {color: #330055; border-bottom: 1px dotted #330055;}
article a.read-more {font-weight: 900; white-space:nowrap; color: #330055; border-bottom: none; font-size: 1.05rem; display: block; margin-bottom: 10px}
article.featured a.read-more {font-weight: 900}
article a.read-more i {margin-right: 6px;}
article .post-meta {font-size: 0.9rem; margin-bottom: 6px;}
article .post-meta ul {padding-left: 0px;}
article .post-meta li {display: inline-block; color: #000; margin-right: 4px; font-weight: 700}
article .tag-container {font-size: 0.8rem;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;    }
article .tag-container a {color: #330055; font-size: 0.9rem; border-bottom: 1px dotted #330055; display: inline-block;}
#tag-wrapper {margin-bottom: 20px}
#tag-container {border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding-bottom: 4px}
#tag-container ul {text-align: left;}
#tag-container li {display: inline-block; margin: 4px 4px 0px 0px}
#tag-container li a {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: block; color: #fff; background-color: #330055; font-size: 0.75rem; padding: 4px 6px; font-weight: 700; transition: all 0.5s; transition-timing: ease-in-out;}
#tag-container li a:hover {background-color: rgba(193, 154, 107, 0.8);}
#pagination-wrapper {text-align: left; margin-bottom: 20px}
#pagination-container {text-align: center; font-size: 0.9rem; display: inline-block}
#pagination-container .page-numbers {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float: left; line-height: 30px; padding: 0px 12px; margin-right: 6px; margin-left: 0px; display: block; min-width: 30px}
#pagination-container span.page-numbers {background: #ccc;}
#pagination-container a.page-numbers {background: #330055; color: #fff; transition: all 0.5s; transition-timing: ease-in-out;}
#pagination-container a.page-numbers:hover {background: rgba(193, 154, 107,0.85); color: #fff;}
ul.social {position: absolute; top: 20px; left: 20px;}
ul.social li {display: inline-block; margin-right: 5px}
ul.social a {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 0.9rem; width: 30px; display: block; color: #fff; line-height: 30px; background-color: rgba(51,0,85,0.85); text-align: center; transition: all 0.5s; transition-timing: ease-in-out;}
ul.social i {}
ul.social li:hover a {background-color: rgba(193, 154, 107,0.85);}
ul.dogear {position: absolute; left: 20px; bottom: 10px; z-index: 2; font-size: 0.75rem;height: 30px ; text-align: left; display : flex; align-items : center; line-height: 1em;}
ul.dogear li {-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: rgba(193, 154, 107, 0.8); padding: 5px 7px; margin-right: 6px; display: inline-block;  white-space: nowrap; }
span.dogear-text {color: #fff; display: block; }
ul.dogear i {margin-right: 4px; }
.row-separator {margin-bottom: 20px;}
.image-for-google {display: none;}
article iframe {max-width: 100%;}
/* Post single */
body.single article p {font-size: 1.05rem; line-height: 1.7em; margin-bottom: 15px; }
body.single article .post-main-text {margin-bottom: 30px; }
body.single article .post-main-text ul, body.single article .post-main-text ol {line-height: 1.4em; color: #000; padding-left: 19px;  margin-bottom: 15px; font-size: 1.05rem}
body.single article li {list-style-type: square; margin-bottom: 6px;}
body.single article blockquote {padding: 15px; background-color: rgba(193, 154, 107, 0.15); margin-bottom: 10px; }
body.single article blockquote p {margin-bottom: 0px; font-size: 0.95rem; font-family: 'Lato', sans-serif; font-style: italic;}
article h1 {font-size: 2.4em; letter-spacing: 0px; font-weight: 900; margin-bottom: 15px; color: #000; line-height: 1.2em}
article h2 {font-size: 1.3rem; letter-spacing: 0px; font-weight: 900; margin-bottom: 15px; color: #000; line-height: 1.1em; padding-top: 5px}
article h3 {font-size: 1.15rem; letter-spacing: 0px; font-weight: 900; margin-bottom: 12px; color: #000; line-height: 1em; padding-top: 10px}
article h4 {font-size: 1.0rem; letter-spacing: 0px; font-weight: 900; margin-bottom: 12px; color: #000; line-height: 1em}
article em {font-family: 'Lato', sans-serif; font-style: italic}
article strong {font-family: 'Lato', sans-serif; font-weight: 800}
article .code-desc {padding: 10px 0px 10px 0px; border-bottom: 1px solid #dedee3; margin-bottom: 10px}
article .code-desc p:last-child {margin-bottom: 0px}
article .code-desc h4 {margin-bottom: 6px}
body.single article .code-desc p {font-size: 0.95rem}
article .gallery {margin-bottom: 20px; margin-top: 20px; text-align: center; border: 1px solid #fff; overflow: auto; width: auto; margin-right: -11px;}
article .gallery .gallery-item {float: left; margin-bottom: 0px; text-align: center; max-width: 25%; padding-right: 10px;}
article .gallery .gallery-item img {margin-bottom: 10px}
article .gallery figcaption, article figcaption {margin-top: -10px; background: #330055; color: #fff; font-family: 'Lato', sans-serif; font-style: italic; font-size: 0.8rem; padding: 8px;}
body.single article .ic-description {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: rgba(193, 154, 107, 0.15); padding: 12px; font-family: 'Lato', sans-serif; font-style: italic; position: relative}
body.single article .ic-description i {margin-right: 5px}
body.single article .ic-description blockquote {background-color: transparent; padding: 0px; margin-bottom: 0px}
body.single article .ic-description blockquote p {line-height: 1.4em; font-size: 1rem; margin-bottom: 0px;}
body.single article .ic-description h4 {display: inline; font-family: 'Lato', sans-serif; font style: normal; font-weight: 700; font-size: 1rem;}
body.single article .ic-description .ic-header-container {margin-bottom: 6px}
body.single article .ic-description a.ic-link {display: inline; color: #330055; border-bottom: 1px dotted #330055; }
.megafont {font-family: 'Lato', sans-serif; font-weight: 900; font-size: 4rem; line-height: 1.4em;}
/* Extensions */
#attach  {background: #f9f9f9; padding: 10px; margin-bottom: 10px;}
#OSHpark  {background: #f9f9f9; padding: 10px; margin-bottom: 10px;}
#attach ul {}
#attach li {list-style-type: none}
#attach h3, #OSHpark h3 { font-weight: 600; margin-bottom: 10px; color: #000; font-size: 1rem}
#attach a, #OSHpark a {color: #330055; border-bottom: 1px dotted #330055; font-size: 1rem; display: inline-block;}
#OSHpark a {margin-bottom: 6px;}
#comments-container {padding: 0px 20px 20px 20px;}
/* Asides */
aside h3 {font-weight: 600; margin-bottom: 10px; color: #000; font-size: 1.2rem}
aside section {margin-bottom: 30px; color: #000; padding-left: 20px; border-left: 1px solid #e8e8e8;}
aside h3:before {content: ''; display: block; width: 50px; height: 3px; background: #330055; margin-bottom: 10px}
aside li {margin-bottom: 10px; line-height: 1.4em;}
aside a {color: #330055; border-bottom: 1px dotted #af7cd2; font-size: 0.95rem}
aside .post-date {display: block; font-size: 0.75rem; font-weight: 700}
aside div.sidebar-thumbnail {width: 100%; height: 120px; background-size: cover !important; background-position: center; margin-bottom: 8px}
/* Widgets */
#bottom .widget {margin-bottom: 20px; color: #fff; font-size: 0.9rem}
#bottom .widget a {border-bottom: 1px dotted #631696;}
#bottom .widget li {line-height: 1.4em;}
aside p.dsq-widget-meta, aside p.dsq-widget-meta a {font-size: 0.8rem !important;  }
.dsq-widget-comment {display: block; font-size: 1rem; line-height: 1.3em}
.dsq-widget-comment p {margin-bottom: 4px; font-family: 'Lato', sans-serif; font-style: italic; display: inline-block !important;}
.dsq-widget-user {margin-bottom: 6px; display: inline-block;}
/* Footer */
footer {padding-bottom: 60px !important; background: #330055; color: #fff; border-top: 1px solid #631696;}
footer p {font-size: 1rem; font-family: 'Lato', sans-serif; font-style: italic}
section#bottom h3 {color: #fff; line-height: 1.2em; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 1px; margin-bottom: 15px;}
#logo-footer {text-align: center}
#logo-footer img {max-width: 25px; height: auto; margin: 0 auto;}
#logo-footer span {display: block; font-family: 'Raleway', sans-serif; font-weight: 700; margin-bottom: 6px; text-transform: uppercase}
-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#logo-footer img {
  -webkit-animation: rotating 10s linear infinite;
  -moz-animation: rotating 10s linear infinite;
  -ms-animation: rotating 10s linear infinite;
  -o-animation: rotating 10s linear infinite;
  animation: rotating 10s linear infinite;
}
#logo-footer-container {overflow: visible;}
/* Colours */
.yellow {color: #d5d46d;}
/* Forms */
.wpcf7 span {display: block;}
.wpcf7-form-control-wrap {margin-bottom: 20px;}
input, textarea {border: none; background: none; font-family: 'Lato', sans-serif;  font-style: italic; padding: 0px; font-size: 0.9rem; border-bottom: 1px dotted #631696; overflow:hidden; color: #fff; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 0.9rem; width: 100%;}
input {}
textarea {}
input[type="submit"] {cursor: pointer; display: block; width: auto; margin-bottom: 10px; margin-top: 10px; font-family: 'Lato', sans-serif; font-style: normal; padding: 8px 12px; background-color: rgba(193, 154, 107, 1); border-bottom: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
input[type="submit"]:before {content: "\f0e0"; font-family: 'fontawesome'}
.ajax-loader {max-width: 25px; height: auto;  background: none; -webkit-animation-name: spin; -webkit-animation-duration: 1000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin;
    -moz-animation-duration: 1000ms; -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 1000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear;}
@-ms-keyframes spin {from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); }}
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}
@-webkit-keyframes spin {from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}
@keyframes spin {from {transform:rotate(0deg); } to {transform:rotate(360deg);}}
.screen-reader-response {display: none;}
.wpcf7-form-control-wrap {position: relative;}
.wpcf7-not-valid-tip {position: absolute; left: 0px; bottom: -14px; font-size: 0.7rem; color: #fff;}
.wpcf7-response-output {color: #fff; line-height: 1.4em}
.success {color: #fff; line-height: 1.4em}
@media (max-width: 1100px) {
  article .megagiftron {display: none;}
}
/* Weergaves minder dan 768px */
@media (max-width: 767px) {
    html {font-size: 18px; }
    #logo-container {margin-bottom: 20px}
    .row-separator {margin-bottom: 0px;}
    .hide-on-desktop {display: inline-block !important;}
    #large-image-top {display: none}
    #left-right-column-container {margin-top: 0px}
    header nav ul {float: left;}
    header nav li {float: left; margin-left: 0px; margin-right: 20px;}
    article .post-meta li {display: block; margin-right: 4px; line-height: 1.3em;}
    ul.dogear {display: none;}
    article .post-main-text {min-height: 0px; }
    article h2 {font-size: 1.5rem; margin-bottom: 15px; line-height: 1.2em;}
    article h3 a {min-height: 0px;}
    body.single article p { font-size: 1rem; line-height: 1.5em; margin-bottom: 10px;}
    .read-more-container {margin-top: 20px;}
    article .gallery .gallery-item {float: none;  margin-bottom: 10px;  text-align: center; max-width: 100%; padding-right: 0px;}
    figcaption {max-width: 200px}
    iframe {max-width: 100%}
    #rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
}