/*
Theme Name: Hjerteforeningen
Theme URI: http://julekalender.hjerteforeningen.dk
Author: Webko
Author URI: https://webko.dk/
Description: Tema udviklet for Hjerteforeningen.
Version: 1.0.0
Template: pro
*/

/* ELEMENTS */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin-top: 0;
}
h2.h2, h2, .h2 {
	margin-bottom: 30px;
}
h3, .h3 {
	font-size: 31px;
}
h4, .h4 {
	font-size: 24px;
}
input:not([type=submit]) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.featherlight-next span, .featherlight-previous span{
	 display: none !important;
}
.featherlight-next {
	right: 25px;
	top: 0;
	left: auto;
	bottom: auto;
 	height: 100%;
	width: 50px;
}
.featherlight-next:hover {
	background-position: center;
	background-repeat: no-repeat;
    background-image: url(assets/images/carousel-next.png);
 }
 .featherlight-previous {
 	left: 25px;
	top: 0;
	right: auto;
	bottom: auto;
 	width: 50px;
 	height: 100%;
 }
 .featherlight-previous:hover {
	background-position: center;
	background-repeat: no-repeat;
    background-image: url(assets/images/carousel-prev.png);
 }
.show-below-980 {
	display: none;
}
.x-root {
	display: block !important;
}
.popup {
	display: none;
}
.right {
	float: right !important;
}
.x-container.offset {
	margin-top: 20px;
}
.x-main {
	opacity: 0;
	transition: opacity .3s ease;
}
.x-img {
	margin-bottom: 0;
}
.x-text p:empty {
	display: none !important;
}
.x-btn, .gform_button {
	font-size: 1rem;
	font-weight: bold;
	border-radius: 5px;
	text-shadow: none !important;
	display: block;
	float: none;
	clear: both;
	padding: 15px 30px;
}
.popup .gform_button {
	float: right;
}
.x-btn.white {
	background: #fff;
	color: #6ea0bf;
}
.x-btn.auto-width {
	width: auto;
	display: inline-block;
}
.x-btn.medium {
	font-size: 16px;
}
.x-btn.transparant {
	background: transparent;
}
.x-btn.border {
	margin: 0 auto;
}

#sf-lottery-form .x-btn.border {
	margin: 0 !important;
}
.featherlight-content, .popup {
	max-width: 100%;
}
.featherlight-iframe .featherlight-content {
	overflow: hidden !important;
}
.featherlight-iframe .featherlight-close {
	top: 0;
	right: 0;
}
.featherlight-content iframe {
	width: 90vw !important;
	height: 50.57vw !important;
}
a.x-img {
	opacity: 1 !important;
	display: inline !important;
}
.video-thumbnail, .full-height {
	position: relative;
}
.video-thumbnail:hover a:after {
	opacity: 1;
}
.video-thumbnail a:after {
	cursor: pointer;
	transition: opacity .5s ease;
	content: '';
	background: url(assets/images/play-button.png);
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	top: 0;
	opacity: .8;
	width: 100%;
	height: 100%;
}
.video-thumbnail img, .full-height img {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
	object-position: top;
}
.equal-heights .x-container {
	display: flex;
}
/* END ELEMENTS */

/* TOPBAR */
.x-topbar {
	background: #f8f8f8;
	min-height: 32px;
	line-height: 32px;
	color: #4e4e4e;
	font-size: 12px;
	border-bottom: 0;
}
.x-topbar .menu-topbar-menu-container ul {
	padding: 0;
	margin: 0;
	float: right;
}
.x-topbar .menu-topbar-menu-container ul li {
	list-style: none;
	display: inline-block;
	margin-left: 15px;
}
.x-topbar .menu-topbar-menu-container ul li a {
	color: inherit;
}
/* TOPBAR END */

/* NAVIGATION DESKTOP */
.x-navbar {
	border: 0;
	box-shadow: 0px 1px 0.99px 0.01px rgba(7, 1, 3, 0.03);
}
.x-navbar .desktop .x-nav > li:last-child > a {
	padding-right: 0 !important;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
	box-shadow: none !important;
}
/* END NAVIGATION DESKTOP */

/* NAVIGATION MOBILE */
.x-btn-navbar {
	box-shadow: none !important;
	color: #999 !important;
	background: transparent !important;
	border-radius: 0;
	padding: 0;
	margin-top: 25px !important;
	font-size: 35px !important;
}
/* END NAVIGATION MOBILE */

/* FOOTER */
.x-colophon {
	border: 0;
}
/* END FOOTER */

/* HOW TO SECTION */
.how-to-image {
	object-position: left;
	left: -50px !important;
	width: calc(100% + 50px) !important;
	max-width: none !important;
}
.how-to-section {
	z-index: 10;
	position: relative;
	width: 100%;
}
.how-to-section .x-feature-box {
	margin-bottom: 50px;
}
.how-to-section .x-feature-box .x-feature-box-title {
	font-size: 16px;
}
.how-to-section .x-feature-box .x-feature-box-text {
	margin: 0;
}
.how-to-section-row {
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
}
@media screen and (min-width: 980px) {
	.how-to-section .x-feature-box {
		width: 30%;
		margin-right: 5%;
		float: left;
	}
	.how-to-section .x-feature-box:last-of-type {
		margin-right: 0 !important;
	}
}
/* END HOW TO SECTION */

/* FACEBOOK FEED */
.fb-wrapper {
	overflow: hidden;
	margin-bottom: 10px;
}
.fb-post-meta {
	position: relative;
	top: -9px;
	font-size: 12px;
}
.fb-message {
	position: relative;
	top: -12px;
}
.fb-post-meta a {
	color: inherit;
}
.fb-img-container {
	float: left;
	width: 47px;
}
.fb-read-more {
	position: relative;
	top: -30px;
	display: block;
}
.fb-content-container {
	float: right;
	width: calc(100% - 72px);
}
/* END FACEBOOK FEED */

/* FEATURED POSTS */
.featured-posts .h4 {
	position: relative;
	top: -5px;
}
.featured-posts .featured-post-read-more {
	float: right;
}
.featured-post-date {
	float: left;
} 
.featured-post-text {
	position: relative;
	top: -17px;
}
.frontpage-blog .featured-post-text {
    top: -7px;
}
.featured-posts img {
	width: 100%;
  	height: 212px;
  	object-fit: cover; /*magic*/
}
.featured-posts .featured-image {
	position: relative;
}
.featured-posts .featured-image:before {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	top: 50%;
	margin-top: -6px;
	width: 0; 
	height: 0; 
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent; 
	border-left: 12px solid #fff; 
}
.featured-posts .featured-image.left:before {
	left: auto;
	right: 0px;
	border-left: 12px solid transparent;
	border-right: 12px solid #fff;  
}
/* END FEATURED POSTS */

/* CAROUSEL POSTS */
.webko-carousel {
	height: 135px;
	overflow: hidden;
	list-style: none;
	margin: 0 !important;
}
.webko-carousel .slick-list {
	width: calc(100% - 95*2px) !important;
	position: relative;
	left: 95px;
}
.webko-carousel .slick-arrow {
	width: 95px;
	height: 100%;
	float: left;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	border: 0;
	position: absolute;
	outline: none !important;
}
.webko-carousel .slick-prev {
	left: 0;
	top: 0;
	border-right: 2px solid #f8f8f8;
	background-image: url(assets/images/carousel-prev.png);
}
.webko-carousel .slick-next {
	right: 0;
	border-left: 2px solid #f8f8f8;
	top: 0;
	background-image: url(assets/images/carousel-next.png);
}
.webko-carousel .slick-slide {
	text-align: center;
	border-right: 2px solid #f8f8f8;
	padding: 20px 0;
	outline: none !important;
}
.webko-carousel .slick-slide img {
	margin: auto;
}
/* END CAROUSEL POSTS */

/* FRONT PAGE SLIDER */
.webko-logo-slider {
	list-style: none;
	margin: 0;
	padding: 0;
}
.webko-logo-slider li {
	position: relative;
}
.webko-logo-slider li h2 {
	color: #fff;
	margin-bottom: 10px;
}
.webko-logo-slider .webko-slider-image {
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center;
	position: relative;
}
.webko-logo-slider .webko-slider-image:after, .lottery-image-header:not(.no-gradient):after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40%;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 67%, rgba(0,0,0,0.65) 68%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.64) 67%,rgba(0,0,0,0.65) 68%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.64) 67%,rgba(0,0,0,0.65) 68%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
	z-index: 2;
}
.webko-slider-overlay {
	position: absolute;
	background: transparent;
	bottom: 0px;
	left: 0;
	padding: 15px 0 15px 35px;
	color: #fff;
	width: 66%;
	line-height: 1.2;
	z-index: 3;
}
.webko-logo-slider .x-btn {
	position: absolute;
	right: 35px;
	bottom: 35px;
	z-index: 99;
}

.webko-logo-slider-control {
	margin: 0;
	padding: 0;
}
.webko-logo-slider-logo {
	cursor: pointer;
	background: #fff;
	outline: none !important;
	text-align: center;
	padding: 20px 0;
	border-right: 2px solid #f8f8f8;
	opacity: .6;
}
.webko-logo-slider-control .slick-list {
	overflow: visible !important;
}
.webko-logo-slider-logo.slick-current {
	opacity: 1;
	position: relative !important;
	top: -4px !important;
}
.webko-logo-slider-logo div {
	margin-top: 10px;
}
.webko-logo-slider-control .slick-list {
	width: calc(100% - 95*2px) !important;
	position: relative;
	left: 95px;
}
.webko-logo-slider-control-wrap {
	position: relative;
}
.webko-logo-slider-control-wrap .arrow {
	width: 95px;
	height: 122px;
	float: left;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	border: 0;
	position: absolute;
	outline: none !important;
	z-index: 99;
}
.webko-logo-slider-control-wrap .prev {
	left: 0;
	top: 0;
	border-right: 2px solid #f8f8f8;
	background-image: url(assets/images/carousel-prev.png);
}
.webko-logo-slider-control-wrap .next {
	right: 0;
	top: 0;
	background-image: url(assets/images/carousel-next.png);
}
.logo-img {
	display: block;
	width: 100%;
	height: 45px;
	border: 10px solid #fff;
	border-top: 0;
	border-bottom: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.webko-logo-slider-control-wrap .slick-current .logo-img {
	height: 55px;
}
.webko-logo-slider-wrap {
	overflow: hidden;
}
/* END FRONT PAGE SLDIER */

/* SOCIAL ICONS */
.webko-social-icons {
	position: fixed;
	left: 0;
	top: 27%;
	z-index: 9999;
	transform: translateX(-136px);
	-ms-transform: translate(-136px); /* IE 9 */
    -webkit-transform: translate(-136px); /* Safari */
}
.webko-social-icons > div {
	position: relative;
	width: 180px;
	height: 44px;
	margin-bottom: 8px;
	transition: transform .3s ease;
	border-radius: 0 4px 4px 0;
    overflow: hidden;
}
.webko-social-icons > div:hover {
	transform: translateX(136px);
}
.webko-social-icons p {
	margin: 0;
	padding: 0;
	line-height: 44px;
	color: #fff;
	font-weight: bold;
	padding-left: 13px;
}
.webko-social-icons > div:hover p {
	max-width: 180px;
}
.webko-social-icons > div span {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	background: #fff;
}
.webko-social-icons-linkedin {
	background: #0072b1;
}
.webko-social-icons-facebook {
	background: #3a559f;
}
.webko-social-icons-phone {
	background: #1f386b;
}
/* END SOCIAL ICONS */

/* BLOG ARCHIVE */
.blog-post {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
	background: #fff;
}
.blog-post > a {
	max-width: 50%;
}
.blog-post .blog-image {
	height: 100%;
	object-fit: cover;
}
.blog-post:nth-child(even) {
	flex-direction: row-reverse;
}
.blog-post .blog-content {
	flex: 1;
	display: block !important;
	padding: 35px 45px;
}
.blog-post .blog-content .x-btn {
	width: auto;
	display: inline-block;
	float: right;
	margin-top: 30px;
}
.blog-date {
	float: left;
	margin-top: 25px;
}
@media screen and (max-width: 979px) {
	.blog-post, .blog-post:nth-child(even) {
		flex-direction: column;
	}
.blog-post > a {
	max-width: 100%;
	width: 100%;
}
.blog-post .blog-image {
	width: 100%;
	max-height: 250px;
	object-fit: cover;
}
.blog-post .blog-content .x-btn {
	float: left;
	display: block;
	margin-top: 0px;
}
.blog-date {
	display: none;
}
}
/* BLOG ARCHIVE END */

@media screen and (min-width: 769px) {
	.x-column.x-1-5.fixed-width {
		width: 280px !important;
		display: block !important;
		float: right !important;
		right: 0;
	}
	.x-column.x-4-5.fixed-width {
		width: calc(100% - 280px) !important;
		display: block !important;
		float: left !important;
	}

}
@media screen and (max-width: 1310px) {
	.field_target_group input:checked + label, .field_target_group label {
		font-size: 14px;
	}
}
@media screen and (max-width: 1204px) {
	.field_target_group {
		width: 100%;
		height: 75px;
		padding: 0;
		margin-bottom: 0;
		margin-top: 15px;
	}
	.field_target_group input + label, .field_target_group input:checked + label {
		background-position: 20px center;
		padding-top: 0;
		line-height: 75px;
		text-align:left;
		padding-left: 80px;
	}
}
@media screen and (max-width: 768px) {
	.show-below-980 {
		display: block;
	}
	.field_target_group {
		width: 100%;
		height: 75px;
		padding: 0;
		margin-bottom: 0;
		margin-top: 15px;
	}
	.field_target_group input + label, .field_target_group input:checked + label {
		background-position: 20px center;
		padding-top: 25px;
		line-height: 1.4;
		padding-left: 55px;
	}
	.total-bar {
		padding-top: 10px !important;
		padding-bottom: 15px !important;
	}
	.total-bar h3 {
		display: none !important;
	}
	.total-bar .x-btn {
		display: block;
		position: relative;
		width: 100%;
		transform: none;
		margin-top: 10px;
	}
	.sf_lotteri {
		width: 100% !important;
		max-width: 100% !important;
	}
	.show-below-980 .lottery-gallery-full {
		margin-top: 0 !important;
		margin-bottom: 20px;
		display: block;
	}
	.single-sf_lotteri .zopim {
		display: none !important;
	}
	.single-sf_lotteri .x-3-5 {
		padding: 35px !important;
	}
	.single-sf_lotteri .x-2-5 {
		padding: 0 35px 35px 35px !important;
	}
	.full-height {
		min-height: 300px;
	}
	h2, .h2, h3, .h3 {
		font-size: 20px !important;
		margin-bottom: 10px;
	}
	.x-btn {
		font-size: 16px !important;
	}
	.lottery-image-header {
		display: flex;
		flex-direction: column-reverse;
		height: auto !important;
	}
	.lottery-image-header:after {
		display: none !important;
	}
	.lottery-image-header img {
		height: 190px;
		position: relative !important;
		max-width: none !important;
	}
	.single-sf_lotteri .lottery-image-header img {
		display: none !important;
	}
	.lottery-image-header .lottery-image-header-overlay {
		transform: none !important;
		color: #333 !important;
		display: block !important;
		background: #fff !important;
		left: 0;
		position: relative !important;
		width: 100% !important;
		line-height: 1.4;
	}
	.single-sf_lotteri .lottery-image-header .lottery-image-header-overlay {
		position: relative !important;
		left: 0px !important;
		width: 100% !important;
	}
	.lottery-image-header .lottery-image-header-overlay .h2 {
		color: #333 !important;
		margin-top: 20px;
	}
	.lottery-preview .x-btn {
		float: none !important;
		width: 100%;
		margin-bottom: 0 !important;
	}
	.lottery-preview .lottery-preview-logo {
		width: 134px !important;
		height: 73px !important;
	}
	.lottery-preview-logo img {
		margin-top: 15px !important;
	}
	#x-section-5 .x-container {
		width: 100% !important;
		max-width: 100% !important;
	}
	.webko-instagram-item {
		margin: 0 !important;
	}
	.webko-instagram-load-more {
		display: none;
	}
	.webko-instagram .slick-arrow {
		border: 0 !important;
		box-shadow: none !important;
		background-image: url(assets/images/carousel-next.png);
		background-repeat: no-repeat;
		background-position: center;
		background-color: transparent;
		text-indent: -9999px;
		width: 20px;
		height: 100%;
		position: absolute;
		z-index: 9999;
		outline: none !important;
	}
	.webko-instagram-item {
		display: block !important;
	}
	.webko-instagram .slick-prev {
		left: 10px;
		top: 0;
		background-image: url(assets/images/carousel-prev.png);
	}
	.webko-instagram .slick-next {
		right: 10px;
		top: 0;
	}
.webko-social-icons {
	display: none;
	position: fixed;
	left: 0;
	top: 27%;
	z-index: 9999;
	transform: translateX(-136px);
}
.webko-social-icons > div {
	position: relative;
	width: 160px;
	height: 24px;
	margin-bottom: 8px;
	transition: transform .3s ease;
}
.webko-social-icons > div:hover {
	transform: none;
}
.webko-social-icons p {
	margin: 0;
	padding: 0;
	line-height: 24px;
	color: #fff;
	padding-left: 13px;
}
.webko-social-icons > div:hover p {
	max-width: 160px;
}
.webko-social-icons img {
	vertical-align: top;
}
.webko-social-icons > div span {
	position: absolute;
	top: 0;
	right: 0;
	width: 24px;
	height: 25px;
	padding: 1px 1px 1px 0px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
	background: #fff;
}
	.webko-slider-overlay h2 {
		font-size: 20px !important;
		color: #333 !important;
	}
	.webko-logo-slider .webko-slider-image {
		height: 190px;
	}
	.webko-logo-slider .webko-slider-image:after {
		display: none;
	}
	.webko-slider-overlay {
		bottom: auto !important;
		top: 50%;
		left: 0 !important;
		padding: 10px 35px 10px 35px !important;
		transform: none !important;
		color: #333 !important;
		position: static !important;
		width: 100% !important;
		background: #fff;
	}
	.webko-slider-overlay p {
		margin-bottom: 0px;
	}
	.webko-logo-slider-wrap .x-btn {
		background: #6ea0bf !important;
		border-color: #6ea0bf !important;
		width: calc(100% - 70px) !important;
		margin: 0 auto 16px auto !important;
		position: static !important;
		display: block !important;
	}
	.webko-logo-slider li h2 {
		margin-bottom: 3px;
	}
	.webko-logo-slider-control-wrap .arrow, .webko-carousel .slick-arrow {
		width: 60px !important;
	}
	.webko-logo-slider-control .slick-list, .webko-carousel .slick-list {
		width: calc(100% - 60*2px) !important
	}
	.webko-logo-slider-control .slick-list, .webko-carousel .slick-list {
		left: 60px !important;
	}
	.x-container.marginless-columns {
		width: 100% !important;
		padding: 0 !important;
	}
	.fb-img-container {
		width: 20px;
		margin-top: -4px;
	}
	.featured-content h4 {
		margin-top: 15px;
	}
	.fb-content-container {
		width: calc(100% - 30px) !important;
	}
	.how-to-section-row, .featured-posts.reverse {
		display: flex !important;
		flex-direction: column-reverse !important;
	}
	.featured-posts .featured-image:before {
		display: none !important;
	}
	.equal-heights .x-container {
		display: block !important;
	}
	.video-thumbnail .x-img {
		min-width: 100%;
	}
	.video-thumbnail {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		display: block !important;
	}
	.video-thumbnail + .x-column {
		padding: 35px !important;
	}
	.x-btn {
		max-width: 100% !important;
	}
	.x-column.x-1-5.fixed-width {
		position: static !important;
		width: 100% !important;
		float: none !important;
		clear: both !important;
		display: block !important;
	}
	.x-column.x-4-5.fixed-width {
		display: block !important;
		width: 100% !important;
	}
	.x-topbar {
		display: none;
	}
}
.organization-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.organization-logos li {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 45%;
	height: 80px;
	margin-bottom: 10%;
}
@media screen and (max-width: 768px) {
	.responsive-split:after {
		content: '';
		width: calc(100% + 35px * 2);
		height: 35px;
		background: #f8f8f8;
		display: block;
		position: relative;
		left: -35px;
		margin-bottom: 35px;
	}
	.aspect-ratio {
    margin-top: 35px;
}

}
@media screen and (max-width: 1130px) {

		.cookie-notice-container {
		display: none;
	}

}
@media screen and (max-width: 769px) {

		.no-phone {
		display: none !important;
	}
}
@media screen and (min-width: 769px) {

		.only-phone {
		display: none;
		margin-bottom: 40px;
	}

}

 	.credits {
    font-style: italic !important;
  	font-size: 12px;
}

	.frontpage-blog h4.h-custom-headline.cs-ta-left.h4 {
		display: none;
	}


	.cookie-notice-container {
    padding: 7px;
}

#cookie-notice .button.wp-default {
	padding: 5px 25px;
    background: #e7402a;
    border-color: #e7402a;
    color: #fff;
    text-shadow: none;
    text-transform: uppercase;
}
#cookie-notice .button.wp-default:hover, #cookie-notice .button.wp-default:focus {
    border-color: #ed1e40;
    color: #fff;
    background: #ed1e40;
}

@media screen and (max-width: 1024px) {
.webko-logo-slider-logo div {
    margin-top: 10px;
    font-size: 0.9em;
}
}


.single-sf_lotteri .zopim {
		    bottom: 79px !important;
	}

 .webko-logo-slider .lykkenummer-head.webko-slider-image:after, .lykkenummer-head.lottery-image-header:not(.no-gradient):after {
	width: 0% !important;
}
.lykkenummer-head.lottery-image-header .h2, .lykkenummer-head.lottery-image-header p {
    color: #616161;
}



/* SMIIL OVERRIDES */ 
.x-navbar {
	background-color: #e7402a;
}