/*
	Theme Name: ATG Drömfond
	Theme URI: https://www.effectreklam.se
	Description: Blankt (v2) Wordpress-tema av Effect Reklambyrå
	Version: 1964.1.8
	Author: Erik Wallberg, Marcus Andersson
	Author URI: http://www.effectreklam.se
	Tags: Effect
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

header{position:absolute;}

body{margin:0px;}
.hero-inner-block{position:absolute !important;}
.lity{background:rgba(0,0,0,0.5) !important;}
.engagemang-bild{background-size:cover;}
.cc-revoke, .cc-window{font-size:13px !important;}
/*
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
*/


/*
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}
*/

/*------------------------------------*\
    MENY
\*------------------------------------*/

/*nav a{color:white; text-decoration:none;}
nav a:hover{}*/

#menu{width:100%; display:flex; justify-content:center;}

#menu-huvudmeny li{border-bottom:0px !important;}

#menu-huvudmeny li a{
	display: inline-block;
    color: white;
	font-weight: 900;
	text-decoration:none;
	border-bottom: 3px solid #fff;
	position:relative;
	line-height:90px;
	width:100%;
}
 
#menu-huvudmeny li a::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background:#FFDD00;
    transition: width .75s;
	position:absolute;
}
#menu-huvudmeny li a:hover::after {
    width: 100%;
}
#menu-huvudmeny li a:hover {
	text-decoration:none;
	color:#FFDD00;
	transition: color 1s;
}


.menu-overlay {
  position: fixed;
  z-index: 10000;
  display: none;
  overflow: scroll;
  width: 100%;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  background-color: rgba(31, 64, 122, 0.98);
}

#menu-overlay nav {display: flex; width:50%;}

#menu-huvudmeny li {
  font-size: 30px;
  line-height: 32px;
}

#menu-inner-block {
  width: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
  color: #fff;
}
#menu-huvudmeny{padding:0px; margin:0px; list-style-type:none;}
#menu-huvudmeny li {
  width: 100%;
  border-bottom: 2px solid #fff;
  color: #fff;
  text-decoration: none;
}

.jury-grid {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}



/*------------------------------------*\
    VIDEO
\*------------------------------------*/

.vimeo-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 90vh;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


/*
.wrapper {
	max-width:1280px;
	width:100%;
	margin:0 auto;
	position:relative;
}

.header {

}

.logo {

}
.logo-img {

}
.nav {

}
.sidebar {

}
.footer {

}
*/
/*------------------------------------*\
    EFFECTER
\*------------------------------------*/
.footer-socials a:hover{opacity:0.7;}


/*------------------------------------*\
    KOD
\*------------------------------------*/

.project-wrapper{padding-top:10px !important; padding-bottom:30px !important;}

.dromfond-menu-wrapper{
-webkit-transition: background-color 400ms ease-out;
  -moz-transition: background-color 400ms ease-out;
  -o-transition: background-color 400ms ease-out;
  transition: background-color 400ms ease-out;	
}

.dromfond-menu-wrapper.active {
    background: #1f407a;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.peter-forklarar{display: flex;justify-content: center;align-items: center;}

.textblockOne{
	text-align: left;
    -webkit-column-count: 1;
    column-count: 1;
	max-width:800px; margin:auto;
}

.voteDiv .projekt-bild, .voteDiv .info-bild{display:flex; justify-content:center; align-items:center;}
.voteDiv .projekt-bild .playBtn{max-width:120px;}
.voteVideo{z-index:2 !important;}


.vara-med-white{}
.vara-med-white .heading-h3, .vara-med-white .w-richtext{color:black;}
.vara-med-white .wpcf7-submit{border:2px solid black; color:black;}
.vara-med-white .wpcf7-submit:hover{color:white; background-color:#1f407a;}

.engagemang-inner-section a{text-decoration:none;}
.engagemang-inner-section a:hover .engagemang-bild{opacity:0.8;}

.hero-inner-block{transition: all 0.3s ease;}
.hero-inner-link:hover{background:rgba(255,255,255, 0.5);}

/*------------------------------------*\
    FILTER
\*------------------------------------*/

.arkiv-projekt .projekt-section{
	max-height:100% !important;
}
.filter-section .is-checked{background-color:#1d3e7b; color:white;}

.filter-button:focus, .heart:focus{outline:0 !important;}

/*------------------------------------*\
    PROJEKT
\*------------------------------------*/
.block-projekt .projekt-section{justify-content:center; height:100% !important; max-height:100% !important;}

.projekt-v2{height:360px !important;}
.projekt-section .projektThree
{width:33.3333%;}

.grid .projektThree{height:360px !important;}
.projekt_margin_bottom{padding-bottom:60px;}

.form-field{width:100%;}

.active_voting {position:absolute; right:10px; top:10px; border:2px solid white; z-index:99; color:white; padding: 5px;
font-size: 14px;
box-shadow: 0px 0px 20px 0px #333;}


.heart {
  width: 100px;
	height: 100px;
  /* https://cssanimation.rocks/images/posts/steps/heart.png */
	background: url("../../uploads/2019/08/voting-heart.png") no-repeat;
	background-position: 0 0;
	background-position: 0 0;
	cursor: pointer;
	transition: background-position 1s steps(28);
	transition-duration: 0s;
	position:absolute; 
	z-index:3;
	right:0px; top:0px;
	transition: transform 200ms ease;
}
.heart:hover{/*background: url('../../uploads/2019/09/heart_hover.png');*/
transform: scale(1.10);
}			
.heart.is-active {
  transition-duration: 1s;
	background-position: -2800px 0;
}

.project-vote-button.selected { background: url('../../uploads/2019/08/heart_selected.png'); }			
.project-vote-button.static { position: static; vertical-align: middle; }

/*------------------------------------*\
    FORMS
\*------------------------------------*/

.wpcf7-form-control-wrap{width:49%;}
.form-field{width:100% !important;}

/*------------------------------------*\
    PROJEKTVISNING HOVER
\*------------------------------------*/
/*
.info-div{
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
padding: 9px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
cursor: pointer;
}
.info-block-v2{
z-index: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 60px;
padding-right: 20px;
padding-left: 20px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: hsla(0, 0%, 100%, 0.9);
color: #191919;
font-size: 17px;
font-weight: 500;
text-decoration: none;	
}

.info-bild-v2{
	display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
text-decoration: none;
height: 100%;
padding: 9px;
cursor: pointer;
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
transform-style: preserve-3d;
-webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;	
}

.projekt-v2:hover .info-bild-v2{
	transform: translate3d(0px, 0px, 0px) scale3d(1.08, 1.08, 1.08) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
}

.projekt-v2 .playBtn{
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
transform-style: preserve-3d;
-webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;		
margin-top:-10%;	
}
.projekt-v2:hover .playBtn{opacity:0.9; transform: translate3d(0px, 0px, 0px) scale3d(1.08, 1.08, 1.08) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);}

.info-block-v2:hover
{
	background-color:#1f407a;
	color:white;
	
}
*/
.info-bild{
	position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 1;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
	
	
}

/*------------------------------------*\
   SCROLL ANIMATION
\*------------------------------------*/

.scrollDown{
position: absolute;
  bottom: 110px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;	
	
}
.scrollDown span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 67px;
  height: 67px;
  margin-left: -23px;
  border: 3px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
	  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
	-webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;
  box-sizing: border-box;
}
.scrollDown:hover{opacity:0.5;}
.scrollDown span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 16px;
  height: 16px;
  margin: -9px 0 0 -7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  /*-webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);*/
  box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}
/*------------------------------------*\
    FOOTER MENY
\*------------------------------------*/

#menu-footer{
	display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
	list-style-type:none; padding:0px; margin:0px;
}
#menu-footer li{
	width: 100%;
padding-top: 21px;
padding-bottom: 21px;
border-bottom: 2px solid #fff;
color: #fff;
font-size: 22px;
text-decoration: none;
}
#menu-footer li a{padding-top:10px;
color: #fff;
font-size: 22px;
text-decoration: none;}

#menu-footer li:hover{
	border-bottom:2px solid #1f407a;
}
#menu-footer li:hover a{color:#1f407a;}

#menu-footer-container{
z-index: 1;
width: 100%;
background-color: transparent;
}



/*------------------------------------*\
    Engagemang
\*------------------------------------*/

.engagemang-box{flex-direction:column !important; height:auto !important;}
.engagemang-bild{height:290px !important;}
.info-block-2 {
    z-index: 2;
    display: flex;
    width: 100%;
    padding: 17px 20px 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1 1 0%;
    background-color: rgb(240, 240, 240);
    color: rgb(25, 25, 25);
    font-size: 17px;
    text-decoration: none;
}
/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {

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

	.block-projekt .projekt-section .projekt-v2{height:260px !important;}
	.projekt .playBtn{width:80px;}
}
@media only screen and (max-width:768px) {
	
	.projekt{height:300px !important;}
	.projekt-pil{display:none !important;}
	.projekt-section .projektThree{width:100% !important;}
	.info-block{margin-bottom:60px;}
	
	.wpcf7-form-control-wrap{width:100%;}
	
	.jury-grid{flex-wrap:wrap;}
	.jury-linkblock{flex-basis:50%;}
	
	.dromfond-hero-wrapper{height:85vh !important;}
	
}
@media only screen and (max-width:900px) {

	.project-movie .vimeo-movie{padding-bottom: 42.5%;}
}

@media only screen and (max-width:1024px) {

	.projekt-section .projektThree{width:50%}
}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}


/** SCROLL TO TOP **/
/****************************************
  IMPORTANT 
*****************************************/

.scrollTop {
  position: fixed;
  right: 10%;
  bottom: 10px;
  background-color: #1f407a;
  padding: 10px 15px;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
  z-index:99;	
}

.scrollTop a {
  font-size: 18px;
  color: #fff;
	text-decoration:none;
}