/**
Theme Name: Dorpsraad Losser Theme
Author: Designstudio Twente
Author URI: https://designstudiotwente.nl
Description: Custom theme for Dorpsraad Losser based on the Astra Theme by Brainstorm Force
Version: 1.0.0
License: Copyrighted
License URI: https://designstudiotwente.nl
Text Domain: dorpsraad-losser-theme
Template: astra
*/

/* Logo */
#page #masthead .site-branding {
	display:block;
	background: none;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999;
	padding:0;
	width: 280px;
	padding:0;
}
#page #masthead .site-branding .site-logo-img, #page #masthead .site-branding .custom-logo-link {
	padding:0;
	margin:0;
}
/* Logo icon */
#page #banner-icon, #page #mobile-banner-icon {
	position: absolute;
	display:block;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 998;
}
#page #mobile-banner-icon img { 
	width: calc((100vw - 50px) * 0.6048);
}
#page #mobile-banner-icon {
	left: -45px;
}
#page .site-header-primary-section-left {
	padding-left: 50px;
}
@media only screen and (min-width: 500px)  and (max-width: 639px)   {
	#page #mobile-banner-icon {
		left: calc((80vw - 400px) * -1.4);
		left: -50px;
	}
}
@media only screen and (min-width: 640px)   {
	#page #mobile-banner-icon img { 
		width: calc((17.8vw + 90px) * 1.080) ;
	}
	#page #mobile-banner-icon {
		left: 0;
	}
	#page .site-header-primary-section-left {
		padding-left: 0px;
	}
} 
#page #banner-icon img {
	width: calc((17.8vw + 80px) * 1.081);
}
/* Header Slogan */
#page .site-below-header-wrap  .ast-builder-grid-row {
	display: block;
}
#page .site-header-below-section-left {
	display:none;
}
#page #masthead #ast-desktop-header .ast-below-header-wrap  .ast-container  {
	padding-right: 20px;
}
#page  #ast-desktop-header .site-header-below-section-right {
	width: 100%;
	padding-left: 120px;
}
#page  #ast-mobile-header .site-header-below-section-right {
	width: 100%;
	padding-left: 21vw;
}
@media only screen and (min-width: 1340px)   {
	#page #banner-icon  {
		left: calc(((17.8vw + 80px) * -1.081) + 350px) ;
	}
}
@media only screen and (min-width: 1100px)   {
	#page #masthead .site-branding {
		width: 320px;
	}
	#page .ast-builder-menu-1 .menu-item > .menu-link { 
		font-size: 17px;
	}
	/* Header slogan */
	#page  #ast-desktop-header .site-header-below-section-right p {
		font-size: 15px;
	}
}
@media only screen and (min-width: 1200px)   {
	#page #masthead .site-branding {
		width: 360px;
	}
	#page .ast-builder-menu-1 .menu-item > .menu-link { 
		font-size: 18px;
	}
	#page .ast-below-header-wrap  .ast-builder-html-element, #page .ast-below-header-wrap .ast-builder-html-element p {
		font-size: 18px;
	}
	/* Header slogan */
	#page  #ast-desktop-header .site-header-below-section-right p {
		font-size: 16px;
	}	
}
@media only screen and (min-width: 1440px)   {
	#page .ast-builder-menu-1 .menu-item > .menu-link { 
		font-size: 19px;
	}
	#page .main-header-menu .menu-link, .main-header-menu>a {
		padding: 0 1.5em;
	}
	/* Header slogan */
	#page  #ast-desktop-header .site-header-below-section-right {
		justify-content: center;
	}	
	#page  #ast-desktop-header .site-header-below-section-right p {
		font-size: 18px;
		margin-right: 0;
		text-align: center !important;		
	}	
}
@media only screen and (min-width: 1600px)   {
	/* Header slogan */
	#page  #ast-desktop-header .site-header-below-section-right p {
		font-size: 19px;
	}	
}
#page #masthead .site-primary-header-wrap {
	padding:0;
}
#page #masthead .site-primary-header-wrap .ast-builder-grid-row {
    grid-column-gap: 0px;
	display:block;
}
#page #masthead .site-primary-header-wrap .header-widget-area-inner {
	padding:0;
}
#page .site-header-primary-section-left .widget {
	margin:0;
	padding:0;
}
#page #dekstop-banner-widget img, #page #media_image-8 img, #page #tablet-banner-widget img, #page .mobile_banner {
	width:100%;
	min-width: 100%;
	max-width: 10%;
}
.site-header-primary-section-left  {
	width: 100%;
	min-width: 100%;
	display:block;
}
.site-header-primary-section-right {
	display:none;
}
#page .ast-below-header-bar .ast-builder-html-element {
	padding: 20px;
}
/* Hide mobile banner for tablet and desktop */ 
@media only screen and (min-width: 640px) and (max-width: 1024px)  {
	#media_image-8, #page .mobile_banner, #text-7 {
		display:none;
	}
}
/* Hide banner quote for news archives and search page */ 
@media only screen and (min-width: 640px)  {
	.blog .ast-below-header-wrap, .search .ast-below-header-wrap {
		display:none;
	}
}
/* Hide desktop banner for mobile */ 
@media only screen and (max-width: 639px) {
	#tablet-banner-widget {
		display:none;
	}
}
/* Content */
body:not(.single-post):not(.blog) #main .post-thumb  {
	display:none;
}
#main a.su-button {
	border:none;
	margin-top: 10px;
	margin-bottom: 40px;
	padding: 15px 15px	
}
#main a.su-button span {
	border:none;
}
#content a, #colophon a {
	font-weight:bold;
}
#content a:hover, #colophon a:hover {
	text-decoration:underline;
}
#content h3 {
	margin-bottom: 8px;
}
#primary blockquote {
	color: #178434;
	border-color: #fae505;
	padding-left: 30px;
	font-size: 1.3em;
	margin-top: 2em;
}
#primary blockquote p {
	margin:0;
}
#primary ul {
	list-style: none;
	margin:0 0 30px 0px;
	padding:0;
}
#primary ul li {
	padding-left: 30px;
	background: url(img/bg-list-item.png) top left no-repeat;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.page-id-49 #main a.su-button i {
	display:none;
}
.home #primary,  .page-template-page-big-sidebar #primary, .ast-separate-container #primary {
	padding-top: 30px;
	margin-top:0;
}
@media only screen and (max-width: 639px) {
	.home #primary {
		padding-top: 0px;
	}	
}
@media only screen and (max-width: 1023px) {
	.ast-single-post-featured-section + article {
		margin-top:0;
	}
	#content {
		padding-top: 70px;
		padding-bottom: 70px;
	}
	#page .site-content .ast-container {
		padding-left: 36px;
		padding-right: 36px;
	}
	#content .about-logo {
		display: none;
	}	
	#content .about-img {
		margin-bottom: 30px;
	}
	#content .entry-content img.size-medium {
		clear:both;
		display:block;
		float:none !important;
	    margin-left: 0;
	    margin-right: 0;		
	}
	#content .entry-content img.size-medium:after {
 content: '';
    display: block;
    clear: both;		
	}	
}
@media only screen and (min-width: 1024px) {
	.home #primary {
		margin-top: 4em;
		padding-top:0;
	}
	#content {
		padding: 30px 20px 30px 20px;
	}
	#content .about-logo {
		margin-right: 200px;
	}		
	#content .about-img {
		width: 420px;
		margin: 20px 100px 20px 20px;
	}
	.blog #content .post .ast-no-thumb {
		padding-left: 25%;
	}
}
@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}
/* Sidebar Right */
@media (min-width: 1024px) {
	.ast-right-sidebar #primary, .ast-right-sidebar #secondary {
		border: 0px;
	}
	.ast-right-sidebar #secondary {
		padding-left: 30px;
	}
	.ast-separate-container.ast-two-container.ast-right-sidebar #secondary {
		padding-left: 50px;
	}
	
	.page-template-page-big-sidebar  #primary {
		width: 50%;
		border: 0px;
	}	
	.page-template-page-big-sidebar  #secondary {
		width: 50%;
		border: 0px;
	}	
}

/* Footer */
#colophon .site-above-footer-wrap  {
	background: #198937 url(img/bg-footer-groen.jpg) bottom center no-repeat;
	background-size: 100%;
	padding: 100px 40px 350px 40px;
	padding-bottom: calc(((100vw - 10px) * 0.125) + 100px);
}
#colophon .site-primary-footer-wrap {
	background: url(img/bg-footer-wit.png) top center no-repeat;
	background-size: 100%;
	padding: 110px 0 90px 0;
	position: relative;
	margin-top: -190px;
	margin-top: calc((100vw - 10px) * -0.125);
}
#colophon .site-above-footer-wrap .textwidget h3 {
	margin-bottom: 20px;
	font-size: 2vw;
}
@media only screen and (min-width: 1600px) {
	#colophon .site-above-footer-wrap .textwidget h3 {
		font-size: 30px;
	}
}
@media only screen and (max-width: 1023px) {
	#colophon .site-above-footer-wrap .textwidget h3 {
		font-size: 30px;
	}
}
@media only screen and (max-width: 639px) {
	#colophon .site-above-footer-wrap  {
		background-position: bottom right;
		background-size: 1600px;
		padding: 80px 30px 150px 30px;
	}	
}
#colophon .site-below-footer-wrap {
	padding: 0;
}
#colophon .site-below-footer-wrap .site-below-footer-inner-wrap  {
	border-top: 1px solid #ddd;
	padding: 40px 0;
}
@media only screen and (max-width: 1023px) {
	#colophon .ast-header-break-point .site-above-footer-wrap[data-section="section-above-footer-builder"] {
		display:block;
	}
	#colophon .site-above-footer-wrap .ast-builder-grid-row {
		display:block;
		width: 100%;
	}
	#colophon .site-footer-above-section-1 {
		margin-bottom: 60px;
	}
}
@media only screen and (min-width: 1024px) {
	#colophon .site-above-footer-wrap, #colophon .site-primary-footer-wrap, #colophon .site-below-footer-wrap   {
		padding-left: 6vw;
		padding-right: 6vw;
	}	
}
/* Footer socials and info */ 
.site-footer-primary-section-2  {
	padding-top: 85px;
}
.site-footer-primary-section-2 a {
	color: #222;
	font-weight:bold;
}
.site-footer-primary-section-2 a:hover {
	text-decoration: underline;
}
span.divider {
	padding: 0 20px;
	color: #999;
}

.footer-socials {
	display:block;
	float:left;
}
.footer-socials a {
	display:block;
	float:left;
	width: 50px;
	height: 50px;
	margin-right: 28px;
}
#colophon .footer-socials a:hover {
	text-decoration:none;
}
.footer-socials a.facebook {
	background: url(img/facebook-logo.png) center center no-repeat;
	background-size: contain;
	
}
.footer-socials a.insta {
	background: url(img/insta-logo.png) center center no-repeat;
	background-size: contain;
	margin-right: 30px;
}
.site-primary-footer-wrap .ast-builder-footer-grid-columns {
	grid-column-gap: 30px;	
}
@media only screen and (min-width: 1140px) {
	.site-primary-footer-wrap .ast-builder-footer-grid-columns {
		grid-column-gap: 50px;	
	}
	.footer-socials a.facebook {
		margin-right: 36px;
	}
	.footer-socials a.insta {
		margin-right: 80px;
	}
}
@media only screen and (max-width: 1023px) {
	#colophon .site-primary-footer-wrap {
		padding-left: 40px;
		padding-right: 40px;
	}
	.footer-socials a.facebook {
		margin-right: 30px;
	}
	.footer-socials a.insta {
		margin-right: 40px;
	}		
}
@media only screen and (max-width: 639px)  {
	.footer-socials a.insta {
		margin-right: 0px;
	}
	#colophon .footer-socials, #colophon .footer-info {
		display:block;
		clear:both;
		float:none;
		margin: 0 auto;
	}
	#colophon .footer-socials {
		width: 160px;
	}
	#colophon .footer-info {
		padding-top: 50px;
	}
	#colophon .footer-socials:after {
		clear:both;
	}
	 #colophon span.divider {
		display:block;
		height: 10px;
		visibility:hidden;
		width: 100%;
		clear:both;

	}
	#colophon .site-footer-primary-section-2, #colophon .site-footer-primary-section-2 p {
		text-align:center;		
	}
	.footer-socials a.facebook {
		margin-right: 50px;
	}	
}
/* Recent Post with Thumbnail */
#secondary .recent-posts-widget-with-thumbnails {
	background: #ececec url(img/bg-latest-news.png) top right no-repeat;
	border-radius: 20px;
	padding: 30px 40px 10px 40px;
}
#secondary .recent-posts-widget-with-thumbnails h2.widget-title {
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
	border-bottom: 1px solid #f14c23;
	width: auto;
	padding-bottom: 10px;
	display: inline-block;
	margin-bottom: 30px;
}
#secondary .recent-posts-widget-with-thumbnails .rpwwt-post-title {
	font-size: 18px;
	line-height: 26px;
	display:block;
	width: 100%;
}
#secondary .recent-posts-widget-with-thumbnails .rpwwt-post-date, .blog .ast-article-post .entry-meta span.published,  .ast-article-single .entry-meta span.published {
	color: #666;
	display:inline-block;
	font-size: 15px;
	font-style: italic;
	background: url(img/bg-calendar.png) center left no-repeat;
	padding-left: 30px;
	margin-top: 8px;
	font-weight: 400;
}
.home #secondary .recent-posts-widget-with-thumbnails .rpwwt-post-date {
	margin-top: 14px;	
}
#secondary .recent-posts-widget-with-thumbnails img.wp-post-image {
	border-radius: 10px;
	margin-bottom: 20px;
}
#secondary .recent-posts-widget-with-thumbnails ul li {
	margin-bottom: 30px;
}
/* News page */
.wp-singular  .post-thumb img, .ast-separate-container .site-content .ast-single-post-featured-section + article {
	border-radius: 20px 20px 0 0;
}
.wp-singular .entry-meta .posted-on span {
	color: #999;
}
.post-navigation {
	display:none;
}
.ast-blog-layout-5-grid .ast-article-post {
    margin-bottom: 3em;
}
#secondary .recent-posts-widget-with-thumbnails {
	max-width: 560px;
}

@media only screen and (max-width: 1023px) {
	.ast-separate-container .site-content .ast-single-post-featured-section + article {
		margin-top:0;
	}	
}
@media only screen and (min-width: 1023px) {
	.ast-separate-container .ast-blog-layout-5-grid .post-content {
		padding-left: 3em;
	}
	#secondary .recent-posts-widget-with-thumbnails h2.widget-title {
		letter-spacing: 3px;	
	}
}
/* Search Page */
.search .entry-meta {
	display:none;
}
/* Forms */
.wpcf7 .field-wrapper p {
	margin-bottom:0;
}
.wpcf7 .field-wrapper {
	margin-bottom: 30px;
}
.wpcf7 .field-wrapper:after {
	content: "";
	display:table;
	clear:both;
}
.wpcf7  label {
	font-weight:bold;
	font-size: 16px;
}
.wpcf7 .field-wrapper input, .wpcf7 textarea {
	background: #e0e0e0;
	margin-top: 5px;
}
.wpcf7 .field-wrapper input[type="file"] {
	background:none;
	border:none;
	box-shadow: none;
}
.wpcf7 form .wpcf7-response-output {
	border: 0px;
	padding: 20px 30px;
	border-radius: 30px;
	background: #d54016;
	color: #fff;
	font-weight:bold;
	font-style:italic;
}
.wpcf7 form.sent .wpcf7-response-output {
	background: #178536;
}
.wpcf7 p.field-info {
	font-style: italic;
	color: #666;
	font-size: 0.9em;
}
.wpcf7 input[type="submit"] {
	padding: 20px 30px;
}
@media only screen and (min-width: 1023px) {
	.wpcf7 .field-wrapper input, .wpcf7 textarea {
		margin-top: 0px;	
	}
	.wpcf7  label {
		font-weight:bold;
		float:left;
		width: 36%;
		display:block;
		line-height: 40px;
		font-size: 16px;
	}
	.wpcf7  label.long {
		width: 100%;
	}
	.wpcf7 .formfield {
		display:block;
		float:left;
		width: 64%;
		padding-right: 30px;
	}
	.wpcf7  .field-wrapper.small { 
		width: 50%;
		float:left;
	}
	.wpcf7 span[data-name="your-amount"] {
		width: 150px;
	}

}

/* Shortcodes ultimate */
#content .su-spoiler-title {
	font-size: 18px;
	color: #5a286e;
}
#content .su-spoiler-title:hover {
	text-decoration: underline;

}