@import url("reset.css");
@import url("fonts.css");

body	{
    font-family: 'hknova_regular', Arial, sans-serif;
    font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #000;
	background-color: #FFF;
}	

/* --------------- FONT SIZES --------------- */


h1, .printbox-intro h2, .referanser h2	{
	font-family: 'hknova_bold', Arial, sans-serif; 
	font-style: normal;
	font-size: 42px; 
	line-height: 1.4;
	max-width: 900px;
	padding-bottom: 40px;
}

h2	{
	font-family: 'hknova_semibold', Arial, sans-serif; 
	font-style: normal;
	font-size: 36px; 
	line-height: 1.4;
	max-width: 500px;
	padding-bottom: 40px;
}

.ingress, .ansatt p, .printbox-intro p	{
	font-family: 'hknova_semibold', Arial, sans-serif; 
	font-style: normal;
	font-size: 25px; 
	line-height: 1.55; 
	max-width: 1100px; 
	padding-bottom: 20px;
}

p	{
	font-family: 'hknova_regular', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 22px; 
	line-height: 1.65; 
	padding-bottom: 20px; 
	max-width: 700px;
}

nav ul	{
	font-family: 'hknova_bold', Arial, sans-serif; 
	font-style: normal;
	font-size: 40px; 
	line-height: 1.55; 
}
.icon-menu-wrapper p	{font-family: 'hknova_semibold', Arial, sans-serif; font-size: 18px;}

.front-top h1, .front-top p	{
	display: inline;
	font-family: 'hknova_semibold', Arial, sans-serif; 
	font-style: normal;
	font-size: 40px; 
	line-height: 1.5;
}

.intro .ingress, .ansatt p	{font-size: 25px; padding: 0;}
.printbox-intro h2 	{max-width: 1100px;}

.content-blocks h1	{max-width: 700px; width: 90%; margin: 0 auto;}
.content-blocks h2	{font-size: 25px; max-width: 700px; width: 90%; margin: 0 auto; padding: 40px 0 10px 0;}
.content-blocks h3	{font-size: 25px; max-width: 700px; width: 90%; margin: 0 auto; padding: 0 0 10px 0;}
.content-blocks p, .content-blocks ul, .printbox-intro a	{font-size: 19px; max-width: 700px; width: 90%; margin: 0 auto; font-family: 'hknova_regular', Arial, sans-serif;}
.content-blocks figcaption	{font-size: 19px; max-width: 700px; margin: 0 auto;}
.content-blocks ul	{list-style-position: inside; padding-bottom: 20px;}

.printbox-intro h2	{font-size: 42px; font-family: 'hknova_bold', Arial, sans-serif; max-width: 1100px; padding-bottom: 40px;}
.printbox-intro p	{font-size: 25px; font-family: 'hknova_semibold', Arial, sans-serif; max-width: 1100px; padding-bottom: 20px;}

footer p, .referanser p.fade	{font-size: 19px;}
.referanser p.fade	{line-height: 1.5;}
.icons-4 p	{font-size: 17px; line-height: 1.3; max-width: none; width: auto; padding: 0;}
.instapost p	{font-size: 14px; line-height: 1.5;}
 
.bold, strong	{font-family: 'hknova_bold', Arial, sans-serif;}
.fade, figcaption	{opacity: .4;}



/* --------------- MENUS --------------- */

.nav-drop	{
	max-height: 0px;
	width: 80%;
	padding-left: 10%;
	padding-right: 10%;
	overflow: hidden;
	opacity: 0;
	background: rgba(0,0,0,.05);
}

.nav-show	{
	max-height: 600px;
	padding-top: 140px;
	padding-bottom: 120px;
	opacity: 1;
	transition: all .8s ease-out;
}
.nav-hide	{
	max-height: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	opacity: 0;
	transition: all .4s ease-out;
}

nav ul	{list-style-type: none;}
nav ul li	{float: left; width: 50%; text-align: center; margin-bottom: 30px;}

.icon-menu {
	float: left;
	margin-right: -50px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}.cmn-toggle-switch{display:block;position:relative;overflow:hidden;margin:0;padding:0;width:95px;height:40px;font-size:0;text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:none;border:none;cursor:pointer;-webkit-transition:background .3s;transition:background .3s}.cmn-toggle-switch:focus{outline:0}.cmn-toggle-switch span{display:block;position:absolute;top:16px;left:2px;right:70px;height:2px;background:#fff}.cmn-toggle-switch span::after,.cmn-toggle-switch span::before{position:absolute;display:block;left:0;width:100%;height:2px;background-color:#fff;content:""}.cmn-toggle-switch span::before{top:-10px}.cmn-toggle-switch span::after{bottom:-10px}.cmn-toggle-switch__htx,.cmn-toggle-switch__htx.active{background-color:rgba(0,0,0,0)}.cmn-toggle-switch__htx span{-webkit-transition:background 0 .3s;transition:background 0 .3s}.cmn-toggle-switch__htx span::after,.cmn-toggle-switch__htx span::before{-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0;transition-delay:.3s,0}.cmn-toggle-switch__htx span::before{-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}.cmn-toggle-switch__htx span::after{-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}.cmn-toggle-switch__htx.active span{background:0 0}.cmn-toggle-switch__htx.active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.cmn-toggle-switch__htx.active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.cmn-toggle-switch__htx.active span::after,.cmn-toggle-switch__htx.active span::before{-webkit-transition-delay:0,.3s;transition-delay:0,.3s}


.hamburger-under .cmn-toggle-switch{display:block;position:relative;overflow:hidden;margin:0;padding:0;width:95px;height:40px;font-size:0;text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:none;border:none;cursor:pointer;-webkit-transition:background .3s;transition:background .3s}
.hamburger-under .cmn-toggle-switch:focus{outline:0}
.hamburger-under .cmn-toggle-switch span{display:block;position:absolute;top:16px;left:2px;right:70px;height:2px;background:#000}
.hamburger-under .cmn-toggle-switch span::after, .hamburger-under .cmn-toggle-switch span::before{position:absolute;display:block;left:0;width:100%;height:2px;background-color:#000;content:""}
.hamburger-under .cmn-toggle-switch span::before{top:-10px}
.hamburger-under .cmn-toggle-switch span::after{bottom:-10px}
.hamburger-under .cmn-toggle-switch__htx, .hamburger-under .cmn-toggle-switch__htx.active{background-color:rgba(0,0,0,0)}
.hamburger-under .cmn-toggle-switch__htx span{-webkit-transition:background 0 .3s;transition:background 0 .3s}
.hamburger-under .cmn-toggle-switch__htx span::after, .hamburger-under .cmn-toggle-switch__htx span::before{-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0;transition-delay:.3s,0}
.hamburger-under .cmn-toggle-switch__htx span::before{-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}
.hamburger-under .cmn-toggle-switch__htx span::after{-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}
.hamburger-under .cmn-toggle-switch__htx.active span{background:0 0}
.hamburger-under .cmn-toggle-switch__htx.active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.hamburger-under .cmn-toggle-switch__htx.active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.hamburger-under .cmn-toggle-switch__htx.active span::after, .hamburger-under .cmn-toggle-switch__htx.active span::before{-webkit-transition-delay:0,.3s;transition-delay:0,.3s}


.fixed-arrow	{
	position: fixed;
	top: 50px;
	right: 10%;
	width: 40px;
	transition: opacity .2s linear;
	opacity: 0;
	z-index: 999;
}
.fixed-arrow img	{display: block; width: 100%;}

/* --------------- HEADER --------------- */


header	{
	position: relative;
	z-index: 999;
	width: 90%;
	padding: 40px 5%;
	margin: 0 auto;
	z-index: 9999;
}

header.front	{color: #fff;}
header.under	{color: #000;}

.logo	{float: left; width: 160px;}
.logo img	{width: 100%;}

.icon-menu-wrapper	{float: right;}
.icon-menu-wrapper p	{padding: 0; float: right;}



/* --------------- FRONT CONTENT --------------- */


.front-top	{
	position: relative;
	width: 100%;
	margin: -120px auto 0 auto;
	height: calc(100vh + 3px);
	height: -o-calc(100vh + 3px);
	height: -webkit-calc(100vh + 3px);
	height: -moz-calc(100vh + 3px);
	background-size: cover !important;
	background-position: center center !important; 
	background-color: #000;
}

.front-top .text	{
	position: absolute;
	top: 60%;
	width: 60%;
	padding: 0 20%;
	transform: translateY(-60%);
	text-align: center;
	color: #fff;
}.front-top hr	{
	margin-top: 100px;
	width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-top: 55px solid #FFF;
	background-color: transparent;
}.front-top hr:hover	{border-top: 55px solid #141ED2;}

.front-section hr	{margin-bottom: 80px;}

.front-content	{
	width: 100%;
	margin: 0 auto;
	padding-top: 100px;
}


/*
.front-content img.left	{width: 95%; margin: 100px 0 100px 0;}
.front-content img.right	{width: 95%; margin: 100px 0 100px 5%;}
.front-content img.full	{width: 100%; margin: 100px 0 100px 0;}

.front-intro, .front-tjenester, .front-prosess	{
	max-width: 700px;
	width: 90%;
	margin: 0 auto;
}
*/


.front-section h2, .front-section p	{max-width: 700px; width: 90%; margin: 0 auto;}

.front-section figure	{width: 100%; padding-top: 100px; padding-bottom: 100px;}
.front-section figure img	{width: 100%;}

.front-section figure.x-small	{max-width: 700px; width: 90%; margin-left: auto; margin-right: auto;}
.front-section figure.small	{max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto;}
.front-section figure.full	img {width: 100%;}
.front-section figure.right img	{width: 95%; margin-left: 5%;}
.front-section figure.left img {width: 95%;}
.front-section figcaption	{padding-top: 5px;}

.front-kontakt	{
	width: 80%;
	margin: 0 auto;
	background: rgba(0,0,0,.08);
	padding: 50px 5%;
}

.front-instagram	{
	width: 90%;
	margin: 100px auto;
}
#instafeed	{margin-top: 20px;}
.instapost	{float: left; width: 25%;}
.instapost img	{width: 100%; margin-bottom: 10px;}
.instapost p	{padding: 0 10% 0 0;}

.kunder	img	{
	float: left;
	width: 33.333%;
}

.icons-4	{max-width: 700px; width: 90%; margin: 60px auto 0 auto;}
.icons-4 .icon	{
	float: left;
	width: 20%;
	padding-right: 5%;
}.icons-4 img	{width: 50%; margin-bottom: 20px;}
.icons-4 p	{width: 100% !important;}

.front-kontakt	{max-width: 1100px; margin: 0 auto;}
.front-kontakt .ingress	{padding-bottom: 50px;}
.front-kontakt .kontakt-bilde	{float: left; width: 400px; margin-right: 50px;}
.front-kontakt .kontakt-bilde img	{width: 100%;}

.front-kontakt .kontakt-info	{
	float: left; 
	width: calc(100% - 450px);
	width: -o-calc(100% - 450px);
	width: -webkit-calc(100% - 450px);
	width: -moz-calc(100% - 450px);
}

.front-instagram .ingress	{padding: 0;}


/* --------------- GENERAL CONTENT --------------- */


.under-content	{
	width: 100%;
	margin: 0 auto;
	padding-top: 50px;
}


hr	{
	border: none;
	background: #000;
	width: 75px;
	height: 75px;
}


.intro	{
	max-width: 1100px;
	width: 90%;
	margin: 0 auto 100px auto; 
}.intro h1, .intro .ingress	{color: #141ED2; max-width: none;}

.content-blocks figure	{width: 100%; margin-top: 50px; margin-bottom: 50px;}
.content-blocks figure img	{width: 100%;}

.content-blocks figure.x-small	{max-width: 700px; width: 90%; margin-left: auto; margin-right: auto;}
.content-blocks figure.small	{max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto;}
.content-blocks figure.full	img {width: 100%;}
.content-blocks figure.right img	{width: 95%; margin-left: 5%;}
.content-blocks figure.left img {width: 95%;}
.content-blocks figcaption	{padding-top: 5px;}

.logos-3	{max-width: 700px; width: 90%; margin: 0 auto 20px auto;}
.logos-3 img	{float: left; width: 33.333%;}
.logos-4	{max-width: 700px; width: 90%; margin: 0 auto 20px auto;}
.logos-4 img	{float: left; width: 33.333%;}

.under-content .kunder	{max-width: 1100px; width: 90%; margin: 0 auto;}
.under-content .kunder	img	{float: left; width: 20%;}

.referanser	{max-width: 1100px; width: 90%; margin: 100px auto 0 auto;}
.referanser .ref	{max-width: 700px; margin: 0 auto 50px auto;}
.referanser .ref img	{width: 300px;}
.referanser h2	{color: #141ED2;}
.referanser p	{padding: 0;}
.referanser p.fade	{padding-top: 20px;}


.max-wrapper	{max-width: 1100px; width: 90%; margin: 0 auto;}
.kontakt-1	{
	float: left;
	width: 40%;
	margin-bottom: 80px;
	color: #141ED2;
}
.kontakt-2	{
	padding-top: 15px;
	float: left;
	width: 60%;
	margin-bottom: 80px;
}
.kontakt-2 iframe	{width: 100%; height: 300px; margin-bottom: 40px;}

.ansatt	{
	width: 45%;
	margin: 0 5% 100px 0;
	float: left;
}
.ansatt:nth-child(even)	{margin: 0 0 100px 5%;}
.ansatt:nth-child(odd)	{clear: left;}
.ansatt p	{padding: 0; margin: 0; width: auto;}
.ansatt img	{width: 100%; margin-bottom: 30px;}

.printbox-intro	{margin-top: 100px;}

/* --------------- FOOTER --------------- */

footer	{
	background: #000;
	color: #fff;
	width: 80%;
	margin: 100px auto 50px auto;
	padding: 50px 5% 30px 5%;
}

.historie, .kontakt, .some, .go-top	{float: left; margin-bottom: 30px;}
.historie	{width: 55%; padding-right: 5%;}
.kontakt	{width: 25%;}
.some	{width: 15%;}

.signatur	{opacity: .3;}
.signatur:hover	{opacity: 1; transition: 0.3s opacity ease;}

/* --------------- LINKS --------------- */


a, a:visited, a:hover, a:active	{text-decoration: underline; color: #141ED2;}
a:hover	{text-decoration: none;}

footer a, footer a:visited, footer a:hover, footer a:active	{text-decoration: none; color: #fff;}
footer a:hover	{text-decoration: underline;}


a.first, a.first:visited, a.first:hover, a.first:active	{
  	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;
	position: relative;
	transition: 0.3s color ease;
	text-decoration: none;
	color: #141ED2;
	opacity: 1;
}

a.before:before, a.after:after	{
  	content: "";
  	transition: 0.3s all ease;
  	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	position: absolute;
}
a.before:before	{top: 0px;}
a.after:after	{bottom: -3px;}
a.before:before, a.after:after	{
  	height: 2px;
  	width: 100%;
  	background: #141ED2;
}
a.first:after	{left:0;}
a.before:hover:before, a.after:hover:after	{width: 0; opacity: 1;}

nav a.before:before, nav a.after:after	{width: 0; height: 4px;}
nav a.before:hover:before, nav a.after:hover:after	{width: 100%; opacity: 1;}



/* --------------- MEDIA QUERIES --------------- */

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

.ansatt, .ansatt:nth-child(even), .ansatt:nth-child(odd)	{
	max-width: 700px;
	width: 100%;
	margin: 0 auto 100px auto;
	float: none;
	clear: none;
}


}


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

.front-top h1, .front-top p	{font-size: 34px; }

.kontakt-1	{width: 100%; margin-bottom: 0;}
.kontakt-2	{padding-top: 0; width: 100%; margin-bottom: 100px;}
.kontakt-2 iframe	{height: 350px;}

.instapost	{width: 50%; margin-bottom: 40px;}
.instapost:nth-child(odd)	{clear: left;}

}

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

nav ul li	{width: 100%;}

header	{width: 90%; padding: 30px 5%;}
.logo	{width: 150px;}

.front-top	{margin: -100px auto 0 auto;}
.front-top .text	{width: 80%; padding: 0 10%;}

.front-top h1, .front-top p	{font-size: 30px;}

/*
.front-intro, .front-tjenester, .front-prosess	{
	max-width: 700px;
	width: 90%;
	margin: 0 auto;
}
*/

.front-kontakt, .front-instagram	{width: 90%;}

.front-kontakt .kontakt-bilde	{float: none; width: 50%; margin: 0 0 20px 0;}
.front-kontakt .kontakt-info	{width: 100%}


.under-content .kunder	img	{width: 25%;}


footer	{
	width: 80%;
	margin: 50px auto;
	padding: 50px 5% 30px 5%;
}
.historie	{width: 100%; padding-right: 0;}
.kontakt	{width: 45%; padding-right: 5%;}
.some	{width: 45%; padding-right: 5%;}



nav a.before:before, nav a.after:after	{height: 0px;}
nav a.before:before, nav a.after:after	{width: 100%;}
nav a.before:hover:before, nav a.after:hover:after	{width: 100%;}

}

@media only screen and (max-width: 640px) {
	
h1, .printbox-intro h2, .referanser h2	{font-size: 31px;}
h2	{font-size: 21px; padding-bottom: 20px;}
.ingress, .ansatt p, .printbox-intro p	{font-size: 21px;}
p, .icon-menu-wrapper p, footer p, .referanser p.fade	{font-size: 16px;}

nav ul	{font-size: 23px;}

.intro .ingress, .ansatt p	{font-size: 21px;}
.content-blocks h2	{font-size: 19px; width: 90%; padding: 40px 0 10px 0;}
.content-blocks h3	{font-size: 19px; width: 90%; padding: 0 0 10px 0;}
.content-blocks p, .content-blocks ul, .printbox-intro a	{font-size: 16px; width: 90%;}
.content-blocks figcaption, .content-blocks .small figcaption	{font-size: 14px;}

.icons-4 p, .instapost p	{font-size: 14px;}

.printbox-intro h2	{font-size: 31px;}
.printbox-intro p	{font-size: 21px;}

.front-top h1, .front-top p	{font-size: 20px;}



.nav-drop	{width: 90%; padding-left: 5%; padding-right: 5%;}
.nav-show	{padding-top: 60px; padding-bottom: 50px;}
nav ul li	{width: 100%; margin-bottom: 20px;}

header	{width: 90%; padding: 20px 5%;}
.logo	{width: 120px; padding-top: 2px;}
.icon-menu-wrapper p	{padding: 4px 0 0 0;}

.fixed-arrow	{top: 50px; right: 5%; width: 40px;}

.front-top	{margin: -80px auto 0 auto;}
.front-top .text	{top: 50%; transform: translateY(-50%);}
.front-top hr	{
	margin-top: 70px;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 40px solid #FFF;
}.front-top hr:hover	{border-top: 40px solid #141ED2;}

/*
.front-content img.left	{width: 95%; margin: 50px 0 50px 0;}
.front-content img.right	{width: 95%; margin: 50px 0 50px 5%;}
.front-content img.full	{width: 100%; margin: 50px 0 50px 0;}
*/


.front-section figure	{width: 100%; padding-top: 50px; padding-bottom: 50px;}

.front-section figure.x-small	{width: 95%;}
.front-section figure.small	{width: 90%;}
.front-section figure.right img	{width: 95%; margin-left: 5%;}
.front-section figure.left img {width: 95%;}

.front-kontakt .kontakt-bilde	{width: 100%;}
.front-instagram	{margin: 50px auto; padding: 0 5%;}
.instapost, .instapost:nth-child(odd)	{width: 100%; margin-bottom: 40px;}
.instapost p	{padding: 0;}

.intro	{margin: 0 auto 70px auto; padding: 0;}

hr	{width: 60px; height: 60px;}

.content-blocks figure.full	img {width: 100%;}
.content-blocks figure.right img	{width: 95%; margin-left: 5%;}
.content-blocks figure.left img {width: 95%;}
.content-blocks figcaption 	{width: 90%;}
.content-blocks .small figcaption, .content-blocks .x-small figcaption	{width: 100%;}

.icons-4 .icon	{width: 40%; padding-right: 10%; margin-bottom: 30px;}
.icons-4 .icon:nth-child(odd)	{clear: left;}
.icons-4 img	{width: 40%; margin-bottom: 10px;}
.logos-4 img	{float: left; width: 50%;}

.under-content .kunder	img	{width: 33.333%;}
.printbox-intro	{margin-top: 50px;}

.kontakt-2	{margin-bottom: 50px;}
.kontakt-2 iframe	{height: 250px;}


footer	{width: 90%; margin: 50px 0 0 0; padding: 50px 5% 30px 5%;}
.historie, .kontakt, .some, .go-top	{margin-bottom: 20px;}
.kontakt	{width: 100%; padding-right: 0;}
.some	{width: 100%; padding-right: 0;}


a.after:after	{bottom: -2px;}
a.before:before, a.after:after	{
  	height: 1px;
  	width: 100%;
  	background: #141ED2;
}


}