#content.blogs-page {padding:0; overflow:hidden; }
#content.blogs-page .inner{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; padding: 0 2%; }
#content.blogs-page .leftsection{width:calc(100% - 350px - 4%); display:inline-block; padding:20px 4% 20px 0; }
#content.blogs-page .rightsection{width:350px; background:#f9f9f9; display:inline-block; padding-bottom:32767px; margin-bottom:-32767px; }
#content.blogs-page .rightsection .widget-title{display:block; background:#42a2d6; color:#ffffff; padding:10px; margin:0 0 20px 0; font-size: calc(12pt + .65vw); font-family: "Lato"; font-weight: 400; text-transform: none;}
#content.blogs-page .rightsection p{padding:0 10px; }
#content.blogs-page .rightsection ul{width:calc(100% - 60px); }
#content.blogs-page .rightsection .tagcloud{padding:0 10px 10px 10px; }
#content.blogs-page .rightsection .tagcloud a{display:inline-block; }
#content.blogs-page .rightsection .sponsor{margin:10px 0 0; padding:10px; border:1px solid #e2e2e2; background:#ffffff; }
#content.blogs-page .rightsection .sponsor .pic{line-height:0px; }
#content.blogs-page .rightsection .sponsor .pic img{display:block; margin:0 auto; }

.authorblock {display:flex; justify-content:flex-start; }
.authorblock .pic-wrapper {background: #42a2d6;  width:94px; height:94px; margin-top:-47px; display:flex;  justify-content:center;  align-items:center;  border-radius:50%;  z-index:1000;  position:relative;  box-shadow:4px 4px 12px rgba(0,0,0,.4); }
.authorblock .pic-wrapper figure {width:88px; height:88px; display:block; overflow:hidden; border-radius:50%; border:0px; box-shadow:none; }
.authorblock .pic-wrapper figure img {-webkit-filter:grayscale(100%); filter:grayscale(100%); transition:all 0.4s; }
.authorblock a:hover .pic-wrapper figure img {transform:scale3d(1.1,1.1,1); -webkit-transform:scale3d(1.2,1.2,1); -webkit-filter:grayscale(0); filter:grayscale(0); }
.authorblock .text-wrapper {display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; }
.authorblock .postdate {color:#0b0a07; width:100%; margin-left:10px; font-size:.7em; margin-top:-18px;  font-style:italic; font-weight:bold; }
.authorblock .postdate span{display:none; }
.authorblock .nickname{margin-left:10px; width:100%; font-size:.8em; }

.blogs-page .ab_title {width: 100%}
.blogs-page .ab_content {width: 100%}
.allblogwrapper {display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;  margin-top: 5px; width: 100%}

.backtoall {width: 100%; margin: 40px 0 0 0; padding-bottom:1px;}
.backtoall .backlink {font-size: .8em; background: #42a2d6;  color: #ffffff; border-radius: 12px 0 0 12px; padding: 3px 30px; display: inline-block; @include childfonts-portfolio-arrow-left(); transition: all 0.3s; position: relative;}
.backtoall .backlink:after {content: ' ';width: 25px; height: 25px; display: inline-block; position: absolute;right: -12px; top: -1px; border-radius: 50%; background: #ffffff;}

.backtoall .backlink .text {display: inline-block; transition: all 0.3s;}
/*.backtoall .backlink:hover {background-color: #ffffff; border-color: #42a2d6 ; color: #42a2d6;}*/
.backtoall .backlink:hover .text {transform: translateX(-20px);}
.backtoall .backlink:before {position: relative;top: 2px; transition: all 0.3s;}
.backtoall .backlink:hover:before {transform: translateX(-20px);}

.blog-teaser {width:31%; margin: 0 3.5% 40px 0;  font-family:'Arial';  display:inline-block;  padding-bottom:0;  border-bottom:0; }
.blog-teaser:nth-of-type(3n+3) {margin-right: 0}

/* USED FOR 4 COLUMNS DISPLAY */
/*.blog-teaser {width:23%; margin: 0 2.6% 40px 0;  font-family:'Arial';  display:inline-block;  padding-bottom:0;  border-bottom:0; }
.blog-teaser:nth-of-type(4n+4) {margin-right: 0}*/

.blog-teaser .teaser-image{border:1px solid #818285; box-shadow:0px 4px 12px rgba(0,0,0,.4); line-height:0px; width:calc(100% - 2px); height:100%; display:block; overflow:hidden; position:relative; z-index: 200;}
.blog-teaser .teaser-image a {display:block; width:100%; height:100%; top:0; left:0; position:absolute;z-index: 400; }
.blog-teaser .teaser-image img{width:100%; max-width:100%; height:100%; display:block; transition:all 0.3s; }
.blog-teaser .teaser-image:hover img{transform:scale3d(1.1,1.1,1); -webkit-transform:scale3d(1.2,1.2,1); }
.blog-teaser .teaser-image .overlaytext {color: #ffffff; font-family: "Lato"; font-weight: 700; font-size: calc(12px + 1.2vw); background: rgba(0,0,0,.2); position: absolute; top: 0; left: 0; width: 100%; padding: 30px 20px 50px 20px; height: 100%; display: flex; justify-content: flex-start; align-items: center; z-index: 300; transition: background-color 2s;}
.blog-teaser:hover .teaser-image .overlaytext {background-color: rgba(0,0,0,.8);}
.blog-teaser .teaser-image .catwrapper {display: block;  width: 50px;  height: 50px;   transition-delay: 5.5s;  transition: all .75s;  position: absolute;  top:0;  left: 0; z-index: 400;}
.blog-teaser .teaser-image:hover .catwrapper {transform: translateX(50px) translateY(50px); }
.blog-teaser .teaser-image .catwrapper a {width: 200px; height: 26px; font-size: .85em; display: flex; justify-content: space-around; align-items: center; transform: translateX(-100px) translateY(-13px) rotateZ(-45deg);  position: relative; }
.blog-teaser p {line-height:1.4em; }
.blog-teaser a.button.more-link {background: #42a2d6; border: 1px solid #42a2d6; color: #ffffff; width: 150px; height: 45px; display: flex; justify-content: space-around; align-items: center; padding:0; text-align:center; white-space:nowrap; transition: all 0.3s; }
.blog-teaser a.button.more-link:hover {background-color: #1c272d; border-color: #1c272d; box-shadow:4px 4px 12px rgba(0,0,0,.4); }

.blog-teaser .bottomwrapper {padding: 0 30px 30px 30px; background: #f9f9f9;}


/* Full Node View */
.single.single-post figure img {float: none; margin: 0 0 0 0; max-width: 100%;} 
.single-post .allblogwrapper {margin-top: 5px; } 
.single-post .backtoall {margin: 0; }
.single-post .blog-teaser{width:100%; padding-bottom:35px; border-bottom:4px dotted #bbb7ab; }
.single-post .blog-teaser:nth-last-child(1){padding-bottom:0; border-bottom:0; }
.single-post .blog-teaser .teaser-image:hover img {transform: none; -webkit-transform: none;}
.single-post .blog-teaser.noimage .authorblock{margin-top:47px; }
.single-post .blog-teaser .floatwrapper {width:45%; margin:6px 0 3% 3%; float:right; }
.single-post .blog-teaser .floatwrapper .authorblock {margin-top: 0;}
.single-post .blog-teaser .teaser-image .overlaytext {font-weight: 400; font-size: calc(16pt + 3vw); justify-content: space-around; text-align: center; width: 100%; padding: 30px 3.1vw 50px 3.1vw; height: 100%;}
.single-post .blog-teaser .teaser-image.smallarea .overlaytext {font-weight: 400; font-size: calc(16pt + 2vw); justify-content: space-around; text-align: center; width: calc(100% - 4vw); padding: 30px 2vw 50px 2vw; height: calc(100% - 80px);}
.single-post .authorblock {margin-left: 15px;}
/*.single-post .atthebottom .catwrapper a {padding: 5px 15px; border-radius: 5px; margin: 0 10px 0 0; display: inline-block;}*/

.single-post .atthebottom .catwrapper a  {padding: 7px 20px 7px 30px; border-radius: 0 17px 17px 0; border: 0;  display: inline-block; margin: 0 -14px 20px 0px;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; }
.single-post .atthebottom .catwrapper a:hover {background-color: #0c0c0c !important; color: #ffffff !important; -webkit-box-shadow: 10px 18px 30px -10px rgba(0, 0, 0, 0.39); box-shadow: 10px 18px 30px -10px rgba(0, 0, 0, 0.39);}
.single-post .atthebottom .catwrapper a:after {content: ' '; width: 33px;height: 33px; display: inline-block; position: absolute; left: -17px; top: -1px; border-radius: 50%; background: #ffffff;}

#content.is-author .ab_title {display: none;}

#content.blogs-page .rightsection ul#bfm-category-post-widget-list {width: 100%;}
#bfm-category-post-widget-list  {padding: 0; margin: 0 0 15px 0; overflow: hidden;}
#bfm-category-post-widget-list  li {list-style: none; padding: 0;}

#bfm-category-post-widget-list .toplevel-category {padding: 3px 0; line-height: 0px;}
#bfm-category-post-widget-list .toplevel-category > .text-wrapper {background: #42a2d6; color: #ffffff; width: max-content; padding: 7px 20px 7px 750px; transform: translateX(-740px); border-radius: 0 17px 17px 0; border: 0;  display: inline-block; margin: 0 -14px 0 0;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; }
#bfm-category-post-widget-list .toplevel-category.active > .text-wrapper {background-color: #0c0c0c; width: max-content; box-sizing: border-box; transform: translateX(0px);}
#bfm-category-post-widget-list .toplevel-category > .text-wrapper .innerwrap {transition: all 0.8s;}
#bfm-category-post-widget-list .toplevel-category.active > .text-wrapper .innerwrap {transform: translateX(-740px);}
#bfm-category-post-widget-list .toplevel-category > .text-wrapper span {margin-left: 10px; font-size: .8em; font-weight: bold;}
#bfm-category-post-widget-list .toplevel-category > .text-wrapper:hover {background-color: #0c0c0c; cursor: pointer;}
#bfm-category-post-widget-list .toplevel-category.active > .text-wrapper:hover {background-color: #42a2d6; cursor: pointer;}

.browser-edge #bfm-category-post-widget-list .toplevel-category > .text-wrapper .innerwrap {min-width: 220px;}
.browser-ie-trident #bfm-category-post-widget-list .toplevel-category > .text-wrapper .innerwrap {min-width: 220px;}

#content.blogs-page #bfm-category-post-widget-list .child {padding: 10px; margin: 0; width: calc(100% - 20px);}

#bfm-category-post-widget-list .child li a {display: flex; justify-content: flex-start; align-items: center; background: #ffffff; margin-bottom: 10px; border: 1px solid transparent; box-sizing: border-box;}
#bfm-category-post-widget-list .child li a .image-wrapper {display: inline-block; width: 30%; line-height: 0px; padding: 0;}
#bfm-category-post-widget-list .child li a .text-wrapper {display: inline-block; width: 70%; padding: 5px 15px; box-sizing: border-box; font-size: .85em; line-height: 1.3em;}
#bfm-category-post-widget-list .child li:hover a {border-color: #0c0c0c; box-shadow: 4px 4px 10px rgba(0,0,0,.4);}
#bfm-category-post-widget-list .child li:hover a .text-wrapper {display: inline-block; width: 70%; padding: 5px 15px; box-sizing: border-box; font-size: .85em; line-height: 1.3em;}
#bfm-category-post-widget-list .child .view-all-link {background: transparent; margin-top: 10px;}
#bfm-category-post-widget-list .view-all-link a.button.more-link { width: inherit; padding: 7px 20px; /* border-radius: 0 17px 17px 0;*/ border: 0;  display: inline-block; margin: 0 -14px 0 0;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; }
#bfm-category-post-widget-list .view-all-link a.button.more-link:hover {background-color: #0c0c0c !important; color: #ffffff !important; -webkit-box-shadow: 10px 18px 30px -10px rgba(0, 0, 0, 0.39); box-shadow: 10px 18px 30px -10px rgba(0, 0, 0, 0.39);}
 /*#bfm-category-post-widget-list .view-all-link a.button.more-link:after {content: ' '; width: 33px;height: 33px; display: inline-block; position: absolute; left: -17px; top: -1px; border-radius: 50%; background: #f9f9f9;}*/



/* USED FOR 4 COLUMNS DISPLAY */
/*@media only screen and (max-width:1600px) {
	.blog-teaser:nth-of-type(4n+4) {margin-right: 3.5%}
	.blog-teaser {width:31%; margin: 0 3.5% 40px 0;}
	.blog-teaser:nth-of-type(3n+3) {margin-right: 0}
}*/


.navigation.pagination {width: 100%; position: relative;padding: 1px 0; clear: both; margin-bottom: 20px; display: flex; justify-content: space-around; align-items: flex-start;}
.navigation.pagination h2 {display: none;}
.navigation.pagination .nav-links {position: relative;}
.navigation.pagination .nav-links .page-numbers {font-size: .9em; background: #42a2d6; color: #ffffff; position: relative; width: inherit; padding: 7px 11px; border-radius: 17px; border: 0;  display: inline-block; margin: 0 ;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; z-index: 100;}
.navigation.pagination .nav-links .page-numbers.current {background: #034366;}
.navigation.pagination .nav-links .page-numbers:hover {background-color: #0c0c0c;}
.navigation.pagination .nav-links .next {font-size: .9em; background: #42a2d6; color: #ffffff; position: relative; width: inherit; padding: 7px 20px 7px 30px; border-radius: 0 17px 17px 0; border: 0;  display: inline-block; margin: 0 0 0 -12px;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; z-index: 1;}
.navigation.pagination .nav-links .next:hover {background: #0c0c0c}
.navigation.pagination .nav-links .next:after {content: ' '; width: 33px;height: 33px; display: inline-block; position: absolute; left: -17px; top: -1px; border-radius: 50%; background: #ffffff;}
.navigation.pagination .nav-links .prev {font-size: .9em; background: #42a2d6; color: #ffffff; position: relative; width: inherit; padding: 7px 30px 7px 20px; border-radius: 17px 0 0 17px; border: 0;  display: inline-block; margin: 0 -12px 0 0;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; z-index: 1;}
.navigation.pagination .nav-links .prev:hover {background: #0c0c0c;}
.navigation.pagination .nav-links .prev:after {content: ' '; width: 33px;height: 33px; display: inline-block; position: absolute; right: -17px; top: -1px; border-radius: 50%; background: #ffffff;}


@media only screen and (max-width:1200px) {
	.blog-teaser:nth-of-type(3n+3) {margin-right: 6%}
	.blog-teaser {width:47%; margin: 0 6% 40px 0;}
	.blog-teaser:nth-of-type(2n+2) {margin-right: 0}
	.blog-teaser .teaser-image .overlaytext {font-size: calc(20px + 1.2vw);}

	.single-post .blog-teaser .teaser-image .overlaytext {font-size: calc(16pt + 2vw);}

	.single-post .blog-teaser .floatwrapper {width: 100%; float: none; margin: 0;}
}

@media only screen and (max-width:1000px) {
	.single-post .blog-teaser .teaser-image .overlaytext {font-size: calc(16pt + 1.5vw);}
}

@media only screen and (max-width:800px) {
	.blog-teaser:nth-of-type(2n+2) {margin-right: 0}
	.blog-teaser:nth-of-type(3n+3) {margin-right: 0}
	.blog-teaser {width:100%; margin: 0 0 50px 0;}
	.blog-teaser .teaser-image .overlaytext {font-size: calc(26px + 1.2vw);}

	#content.blogs-page .leftsection{width: 100%; padding:20px 0 0 0; }
	#content.blogs-page .rightsection{width:100%; padding-bottom:0; margin-bottom: 40px;}

	.single-post .blog-teaser .teaser-image .overlaytext {font-size: calc(16pt + 2vw);}
	
}
@media only screen and (max-width:480px) {
    .blog-teaser .teaser-image .overlaytext {font-size: calc(26px + 1.0vw);}
}