/*
Theme Name: Boafallsbacke – 2018
Theme URI: http://www.pixelbruket.se
Description: Balance
Author: Erik Östman
Author URI: http://www.pixelbruket.se
Tags: white
Version: 1.6
License: This theme is released under GPL
Text Domain: pxlbrk
*/

@media screen and (max-width: 720px) {
body {font-size: 12px !important; }
.tabletfull{width: 100% !important;}
.mobilefull{width: 100% !important; height: auto !important; float: left !important; position: relative !important;}
.nopaddingmobile{padding: 0 !important;}
.mobilehide{display: none !important;}
nav{display: none !important;}
.footer .absolutecontent{position: relative !important; float: left !important;}
header {height: 60px !important; }
.nav-up {top: -60px !important;}
.mobilebtn{display: block !important;}

a.logo{width: 100px !important; height: 11px !important; left:20px !important; top: 20px !important;}
a.mejla{width: 20px !important; height: 20px !important; right:20px !important; top: 20px !important;}
ul.ljuspunkter li img{width: 20px !important;}
.extrapadding{padding:30px !important;}
.fronttext p{margin: 0 !important; font-size: 1em !important; text-align: center !important;}
.toprightbracket{top:10px !important; right:10px !important;}
.bottomleftbracket{bottom:10px !important; left:10px !important;}
a.footerlogo{ top:15px !important; right:15px !important;}
.herotext{font-size: 3em !important;}
}
@media (min-width: 721px) and (max-width: 1023px) {
.tabletfull{width: 100% !important;}
}

@media (min-width: 1024px) and (max-width: 1200px) {
}

@media (min-width: 1441px) and (max-width: 9999999px) {

}






body { margin: 0; padding: 0; font-family: 'fira_sans', sans-serif; font-weight: 400; color: #073655; background: #b0c9d8; font-size: 16px; width: 100%; float: left; font-variant-ligatures: normal;}


a img { border: none; }
p{ font-size: 1.1em; line-height: 1.6em; margin: 0 0 2.5em 0; letter-spacing: 0;}
h1 {font-family: 'rajdhani-light', sans-serif; font-weight: 600; font-size:3em; margin-bottom:5px; line-height: 1.2em; display:block; margin: 0 0 20px 0;  text-transform: none;}
h2 {font-family: 'rajdhani', sans-serif; font-weight: 600; font-size:2.5em; margin-bottom:25px; display:block; letter-spacing: 0.05em; margin-top: 0; }
h3 {font-family: 'rajdhani', sans-serif; font-weight: 600; font-size:1.3em;  margin-bottom:5px; text-align: left; display:block; margin-top: 0; letter-spacing: 1px; }

h1.ljuspunkter{text-transform: uppercase; color: #fff; text-align: center; padding: 150px 0 0 0; font-size:1.7em; letter-spacing: 10px;}


a { color: inherit; text-decoration: none; }
p a { color: inherit; text-decoration: underline; }

a:hover { text-decoration: none; }



/******** UNIVERSAL ********/

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-language-override: normal;
	font-feature-settings: "liga" 0;
}


[class*="col-"] {
    float: left;
    padding: 15px;
    position: relative;
}

[class*="col-"] img{
    width: 100%;
    height: auto;
    display: block;
}


.col-1 {width: 8.33%; position: relative;}
.col-2 {width: 16.66%; position: relative;}
.col-3 {width: 25%; position: relative;}
.col-4 {width: 33.33%; position: relative;}
.col-5 {width: 41.66%; position: relative;}
.col-6 {width: 50%; position: relative;}
.col-7 {width: 58.33%; position: relative;}
.col-8 {width: 66.66%; position: relative;}
.col-9 {width: 75%; position: relative;}
.col-10 {width: 83.33%; position: relative;}
.col-11 {width: 91.66%; position: relative;}
.col-12 {width: 100%; position: relative;}



.deadcenter{
	position: absolute;
	height: auto;
	right: 50%; 
	top: 50%;
	-webkit-transform: translate(50%,-50%);
	-moz-transform: translate(50%,-50%);
	-ms-transform: translate(50%,-50%);
	-o-transform: translate(50%,-50%);
	transform: translate(50%,-50%);
	}



.vitbg{background: #fff;}


.djupblabg{background-color: #073655;}
.mellanblabg{background-color: #6b8a9d;}
.askblabg{background-color: #e3ecf0;}
.ljusblabg{background-color: #b0c9d8;}
.gronbg{background-color: #80ab96;}
.orangebg{background-color: #ef814b;}

.vittext{color: #fff;}

.nopadding{padding:0;}
.center{text-align: center;}
.right{text-align: right;}
.caps{text-transform: uppercase;}
.shadow{box-shadow: 0px 0px 15px rgba(33, 33, 33, 0.1); }

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.absolutecontent{position: absolute; top:0; left:0;}
.extrapadding{padding:25% 15%;}
.extrapaddingsides{padding:5% 15%;}



header {width: 100%; height: 120px; padding:0; position: fixed; top:0; left:0; z-index: 10; transition: top 0.4s ease-in-out;}
.nav-up {top: -200px; transition: top 0.4s ease-in-out;}


.headspace{margin-top: 120px;}

a.logo{
	position: absolute;
	width: 200px;
	height: 22px;
	z-index: 100;
	left:60px;
	top: 49px;
	
}



a.mejla{
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: 10;
	right:60px;
	top: 45px;
	
}
a.mejla{
    background-color: #073655;
    -webkit-mask: url('images/mejla.svg') no-repeat center;
    mask: url('images/mejla.svg') no-repeat center;
}
a.mejla:hover{
    background-color: #ef814b;
}

a.footerlogo{
	width: 30px;
	height: 30px;
	position: absolute;
	top:50px;
	right:50px;
}

a.footerlogo img{
	width: 100%;
	height: auto;
	display: block;
}






ul.menu{
	font-family: 'rajdhani', sans-serif; 
	font-weight: 500;
	margin: 0; 
	list-style-type: none; 
	width: 100%; 
	display: block;
	box-sizing: border-box; 
	padding: 0 100px 0 270px !important;
	height: 120px;
	text-transform: lowercase; 
	text-align: center;
	z-index: 10;
	position: absolute; 
	left:0; 
	top:0;
	
	}
ul.menu li{display: inline-block; letter-spacing: 0.05em; font-size: 1.2em; margin:0; padding: 45px 20px;}
ul.menu li a{ color: #073655; padding-bottom: 10px;}

ul.menu li a:hover{color: #ef814b;}


.mobilemenu{
	font-family: 'rajdhani', sans-serif; 
	font-weight: 500;
	font-size: 1.3em;
	margin: 0; 
	list-style-type: none; 
	width: 100%; 
	display: block;
	box-sizing: border-box; 
	padding:20% 10%; 
	text-transform: uppercase; 
	text-align: center;
	z-index: 10;
}

ul.mobilemenu li{display: block; letter-spacing: 0.05em; font-size: 1.5em; margin:10px; width: 100%;}
ul.mobilemenu li a{ color: #073655; padding-bottom: 10px;}



@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}



.mobilebtn{ position: absolute; width:20px; height: 20px;  top:20px; right:60px; z-index: 1000; display: none; }
.mobilebtn img{position: absolute; top:0; right:0; width: 100%; height: auto; }
.overlay{ position: fixed; top: 0; left:0; height: 100%; width: 100%; padding: 50px 0 0 0;  background:#e3ecf0; overflow: auto; display: none; z-index: -1; }

.parallax-window {
    min-height: 100vh;
    background: transparent;
}

/********** FRONTPAGE **********/

.hero{width: 100%; height: 100vh; float:left; }

.herotext{
	width: 100%; 
	padding: 0 20% 0 10%;
	position: absolute; 
	left:0; 
	top: 50%; 
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #fff;
	font-family: 'rajdhani-light', sans-serif; 
	font-size: 3.75em;
	
	}

.wrapper { float: left; width: 100%; padding:0; position: relative;}

.ingresspost{padding: 15%;}
.post{padding: 8% 3% 3% 8%;}

.slider{
	width:100%;
	height: 56.25vw;
	overflow: hidden;
	margin: 0;
	position: relative;
}
.slide{
	width:100%;
	height: 56.25vw;
	position: relative;
	z-index: 1;
	background-size:100% auto;;
	background-position: right center;
	min-height: 56.25vw !important;
	background-repeat: no-repeat;
}


.toprightbracket{position: absolute; top:50px; right:50px; width: 20px; height: 36px; background-image: url('images/toprightbracket.svg'); background-size: 20px 36px;}
.bottomleftbracket{position: absolute; bottom:50px; left:50px; width: 20px; height: 36px; background-image: url('images/bottomleftbracket.svg'); background-size: 20px 36px;}
.vittoprightbracket{position: absolute; top:50px; right:50px; width: 20px; height: 36px; background-image: url('images/toprightbracket-vit.svg'); background-size: 20px 36px;}
.vitbottomleftbracket{position: absolute; bottom:50px; left:50px; width: 20px; height: 36px; background-image: url('images/bottomleftbracket-vit.svg'); background-size: 20px 36px;}
.innovation{background-image: url('images/innovation.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.question{position: absolute; bottom:0; right:0;}
.question a img{width: 70%; margin: 0 15%; height: auto; display: block;}

.konversation{background-color: #073655;}
.konversation:hover{background-color: #ef814b;}
.konversation:hover .pratbubbla{background-color: #073655;}
.pratbubbla{
	width: 50%;
	height: 50%;
    background-color: #B0C9D9;
    -webkit-mask: url('images/konversation-ljusbla.svg') no-repeat center;
    mask: url('images/konversation-ljusbla.svg') no-repeat center;
}


img.solglob:hover{
	-webkit-filter: drop-shadow( 0 0 15px rgba(255, 246, 215, 1) ); 
            filter: drop-shadow( 0 0 15px rgba(255, 246, 215, 1) );
}

/********** LJUSPUNKTER **********/

ul.ljuspunkter{list-style-type: none; padding:100px 15% 100px 15% !important; margin: 0; width: 100%; float: left; text-align: center;}
ul.ljuspunkter li{width: 20%; display: inline-block; float: left; position: relative;}
ul.ljuspunkter li img{
	width: 35px; 
	height: auto; 
	display: block;
	position: absolute;
	height: auto;
	right: 50%; 
	top: 50%;
	-webkit-transform: translate(50%,-50%);
	-moz-transform: translate(50%,-50%);
	-ms-transform: translate(50%,-50%);
	-o-transform: translate(50%,-50%);
	transform: translate(50%,-50%);

	}


ul.ljuspunkter li img:hover, li.ui-state-active img{
	-webkit-filter: drop-shadow( 0 0 15px rgba(255, 246, 215, 1) ); 
            filter: drop-shadow( 0 0 15px rgba(255, 246, 215, 1) );
	}

li.ui-state-active:focus {
    outline: none !important;
}	
	
.tabcontentwrapper{
	background-image: url('images/fatarrow.svg');
	background-size: 120px 30px;
	background-position: center top; 
	background-repeat: no-repeat;
	
}
.tabcontent{
	background:transparent; 
	color: #fff; 
	width: 100%; 
	text-align: center; 
	padding: 70px 20%; 
	float: left; 
	display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
	}


.prefooter{width: 100%; float: left; height: 80vh; position: relative;}

/********** PROJEKT **********/

.projektlogo{width: 100%; padding: 0 25%;}
.projektlogo img{width: 100%; height: auto;}

.karusell{margin: 5%; width: 90%; float: left; display: block;}

.karusellbild{width: 200px; text-align: center;}

.karusellbild img{height: 100px; width: auto; max-width: 200px; margin: 0 auto; opacity: 0.4;}

.slick-current img{opacity: 1 !important;}

button.slick-next::before{content: url('images/next.svg');}
button.slick-prev::before{content: url('images/prev.svg');}

/********** PERSONAL FLIP **********/
ul.personalflippers{width: 100%; float: left; padding: 0; margin: 0; list-style-type: none;}
ul.personalflippers li{display: block; float: left; width: 50%; position: relative;}

.kontaktwrapper{width: 80%; }
p.kontaktuppgifter{margin-bottom: 0; font-family: 'rajdhani', sans-serif;}
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container {
	width: 100%;
	
}
.flip-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;	
	
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	width: 100%;
}

.front img{
	width: 100%;
	height: auto;
	display: block;
}


/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	width: 100%;
}




/********** FORMULÄR **********/


.gform_wrapper input[type="text"] {
    background: transparent;
    border:2px dashed #7c6456;
	font-family: 'rajdhani', sans-serif; 
}

input.gform_button{color: #fff; padding:10px; background-color: #737b86; border-radius: 0; border:0; font-family: 'rajdhani', sans-serif; }

.acf-map {
    width: 100%;
    height: 200px;
    border: none;
    margin:  0;
}





.footer{float:left; width:100%; box-sizing: border-box; padding: 0; position: relative; font-family: 'rajdhani-medium', sans-serif; z-index: 10;}
.footer a{text-decoration: none;}
.footer p{margin: 0; padding: 0; font-weight: 300;}

.copyinfo{border-top: 2px solid #073655; }

.socialmenu{width: 100%; float: left; text-align: center; margin-bottom: 20px}
.socialfooter{width: 100%; float: left; text-align: left; margin-bottom: 20px}
.socialfooter .socialicon:before{color:#fff; font-size: 32px;}
.socialicon{position: relative; }

.socialicon:before {
font-family: 'Font Awesome 5 Brands';
display:inline-block;
font-size: 50px;
text-align: center;
line-height: 1em;
padding: 10px;

}

.facebook:before{content: '\f09a';}
.instagram:before{content: '\f16d';}



ul, menu, dir {
    display: block;
    -webkit-margin-before: 0 !important;
    -webkit-margin-after: 0 !important;
    -webkit-margin-start: 0 !important;
    -webkit-margin-end: 0 !important;
    -webkit-padding-start: 0 !important;
    font-size: inherit;
}