@charset "UTF-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	font-family: 'Roboto', sans-serif; /* font-vekter: 100,300,400,500,700,900 */
	font-weight: 300;
	font-style: normal;
	line-height: normal;
	color: #333;
	font-size: 10px;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

article, aside, canvas, figure, figcaption, footer, header, hgroup, #menu, nav, section, address, main, img {  
	display: block;
	padding: 0;
	margin: 0;
}

/* ========================= General imaging ======================= */

img {
	width: 100%;
}

a, a:active, a:focus, img, img a, a img {
	outline: none;
	outline: 0;
}

img, a img {
	border: none;
	border: 0;
}

a.clickable {
    text-decoration: none;
    width: auto;
    margin: 0 auto;
}

a.entry, a.addressinfo {
	color: #333;
	text-decoration: none;
}

.link-color {
    color: #7DA637;
}

:focus {
    outline: none !important;
}

figure, figcaption {
	margin: 0;
	padding: 0;
	clear: none;
}

/* ============================== CSS3 animations ============================= */

header, footer, .clickable, .entry img, .no-touchdevice header li a, #close-button, .addressinfo, header li a, #logo, #contacttrigger, #navtrigger {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

/* =============================== type "reset" ============================= */

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
	padding: 0;
	margin: 0;
}

/* =============================== Type ============================= */

p, li, h4 {
	font-size: 1.5em;
}

p, li, h4, h5, h6 {
	line-height: 1.6em;
}

p, li {
    font-weight: 300;
}

p, ul {
	margin-bottom: 1.6em;
}

ul, ol {
padding-left: 25px;
}

p.semibold {
    font-weight: 500;
}

@media screen and (max-width: 500px) {
    h1 {
        font-weight: 300;
        font-size: 3em;
        line-height: 1.4em;
        margin-bottom: .5em;
        clear: both;
    }
    #banner h1 {
        font-size: 3.6em;
        margin-bottom: 1em;
        margin-top: 1em;
        color: #FFF;
    }
}

@media screen and (min-width: 501px) and (max-width: 767px) {
    h1 {
        font-weight: 100;
        font-size: 4em;
        line-height: 1.4em;
        margin-bottom: .5em;
        clear: both;
    }
    #banner h1 {
        font-size: 4.6em;
        margin-bottom: 1em;
        margin-top: 1em;
        color: #FFF;
    }
}

@media screen and (min-width: 768px) {
    h1 {
        font-weight: 100;
        font-size: 5em;
        line-height: 1.4em;
        margin-bottom: .5em;
        clear: both;
    }
    #banner h1 {
        font-size: 6em;
        margin-bottom: 1em;
        margin-top: 1em;
        color: #FFF;
    }
}


h1 strong {
	font-weight: 500;
}


h2, h3, .excerpt p {
	font-size: 2.2em;
	line-height: 1.6em;
}

.excerpt p {
	line-height: 1.6em;
}

h2, h3 {
	line-height: normal;
}

h2 {
	font-weight: 500;
    color: #444;
}

h3 {
    font-weight: 700;
}

h5, h6, .clickable {
	font-size: 1.3em;
}

h5 {
	font-weight: 300;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.excerpt p {
	margin-bottom: 0;
	font-weight: 100;
	color: #111;
}

ul {
	padding-left: 20px;
}

.centered-content {
    text-align: center;
}

strong {
    font-weight: 700;
}

/* ============================== Content blocks ============================= */

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

header {
	position: fixed;
}

header.scrolled, header.open {
	background: #333;
}

header, .content-bg, section, .fullwidth, footer, #banner, .topicimage, div.clickable,
.bannerfilter, .textwidth, .addressinfo, .articlerow {
	width: 100%;
	float: left;
	clear: both;
}

section {
	padding-top: 60px;
	padding-bottom: 60px;
}

.content-width-limit {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.content-bg, header {
	background: #F4F4F4;
}

.bannerfilter {
	background: rgba(153, 153, 153, .6);
}

.textwidth {
	max-width: 1000px;
}

.darkgrey-bg {
background: #555;
}

.flex-stretch {
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	flex-wrap: wrap;
}

@media screen and (max-width: 499px) {
	.servicelisting {
		width: 100%;
		clear: both;
	}
}

@media screen and (min-width: 500px) and (max-width: 1023px) {
	.servicelisting {
		width: 50%;
	}
}

@media screen and (min-width: 1024px) {
	.servicelisting {
		width: 33.33%;
	}
}

/* ======= columns ======= */

.column-1-2, .column-2-2, .column-1-3, .column-2-3, .column-3-3, .column-1-4, .column-2-4, .column-3-4, .column-4-4, .externalarticle {
    float: left;
    margin-bottom: 30px;
}

.listingimage, .listingtext, .column-1-2, .column-2-2 {
	float: left;
}

.step-by-step {
    margin-bottom: 0;
}

/* === 3 columns === */

@media screen and (max-width: 768px) {
	.column-1-3, .column-2-3, .column-3-3, .column-1-2, .column-2-2, .listingimage, .listingtext {
		width: 100%;
		clear: both;
	}
	.listingimage, .listingtext {
		float:left;
		clear:none;
	}
}

@media screen and (min-width: 769px) {
	.column-1-3, .column-2-3, .column-3-3, .listingimage {
		width: 33.33%;
	}
	.listingtext {
		width: 66.67%
	}
	.column-1-3 {
		clear: left;
	}
	.column-1-2, .column-2-2 {
		width: 50%;
	}
	.column-2-3, .column-1-2, .column-2-2, .listingimage, .listingtext {
		clear: none;
	}
	.column-3-3 {
		clear: right;
	}
	.flexcontainer {
		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
		display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	}
	.equalheight {
		display: stretch;
	}
	.columnized {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
		-moz-column-gap: 40px; /* Firefox */
		column-gap: 40px;
	}
}

/* === 4 columns === */

@media screen and (max-width: 500px) {
	.column-1-4, .column-2-4, .column-3-4, .column-4-4 {
		width: 100%;
		clear: both;
	}
}

@media screen and (min-width: 501px) and (max-width: 1000px) {
	.column-1-4, .column-2-4, .column-3-4, .column-4-4 {
		width: 50%;
	}
	.column-1-4, .column-3-4 {
		clear: left;
	}
	.column-2-4, .column-4-4 {
		clear: right;
	}
}

@media screen and (min-width: 1001px) {
	.column-1-4, .column-2-4, .column-3-4, .column-4-4 {
		width: 25%;
	}
	.column-2-4, .column-3-4 {
		clear: none;
	}
	.column-1-4 {
		clear: right;
	}
}

/* ========================== Artikkel-/forsikringsliste ========================== */

.articleimage {
	background-repeat: no-repeat;
    background-position: center center;
	background-size: cover;
}

@media screen and (max-width: 599px) {
	.oneof2, .articleimage, .articletext {
		width: 100%;
		float: left;
		clear: both;
	}
	.articleimage {
		min-height: 280px;
	}
}

@media screen and (min-width: 600px) {
	.oneof2, .articleimage, .articletext {
		width: 50%;
		float: left;
		clear: none;
	}
	.articlerow.odd, .articlerow.even {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		align-items:stretch;
	}
	.articlerow.odd .articletext, .articlerow.even .articletext {
		max-width: 700px;
	}
}

.articlerow.even {
	flex-direction: row-reverse;
}

.articlerow.white {
background: #FFF;
}


/* ============================== Icons ============================ */

.topicimage {
	padding: 0 20% 20px 20%;
}

.topicimage img, .topicimage .inner, #close-button {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}

.entry img {
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
	filter: grayscale(100%);
}

.entry:hover img {
	-webkit-filter: none; /* Chrome, Safari, Opera */
	filter: none;
}

.topicimage .inner {
	padding: 2px;
}

.numberwrapper {
	width:20%;
	float:left;
}

.numberwrapper img {
	opacity: 0.1;
}

/* ============================== Header elements =============================== */


@media screen and (max-width:600px) {
header > .content-width-limit > .fullwidth {
		height: 50px;
	}
	#largescreennav {
		display: none;
	}
	#icon-container {
		display: block;
		width: 100px;
		height: 50px;
		clear: none;
position: absolute;
right: 0;
	}
    #smallscreennav {
        display: none;
    }
    header #logo {
        width: 80px;
        height: 50px;
        float: left;
        clear: none;
        background: url(https://norins.no/images/common/norins-logo-pos-80.svg) no-repeat left center;
        background-size: contain;
    }
    header.scrolled #logo, header.open #logo {
        height: 50px;
        float: left;
        clear: none;
        background: url(https://norins.no/images/common/norins-logo-neg-80.svg) no-repeat left center;
        background-size: contain;
    }
}

@media screen and (min-width:601px) {
	header > .content-width-limit > .fullwidth {
		height: 80px;
display: block;
	position: relative;
	}
	#icon-container {
		display: none;
	}
    #smallscreennav {
        display: none !important;
    }
    header #logo {
        width: 100px;
        height: 80px;
        float: left;
        clear: none;
        background: url(https://norins.no/images/common/norins-logo-pos.svg) no-repeat left center;
        background-size: contain;
    }
    header.scrolled #logo, header.open #logo {
        height: 80px;
        float: left;
        clear: none;
        background: url(https://norins.no/images/common/norins-logo-neg.svg) no-repeat left center;
        background-size: contain;
    }
}

#navtrigger, #contacttrigger {
	width: 50px;
	height: 50px;
	float: right;
	clear: none;
/*border-left: 1px solid #CCC;*/
cursor: pointer;
}


#navtrigger {
	background: url(https://norins.no/images/common/navtrigger-icon.svg) no-repeat center center;
}

#contacttrigger {
background: url(https://norins.no/images/common/contacttrigger-icon.svg) no-repeat center center;
}


header.scrolled #navtrigger, header.open #navtrigger, header.scrolled #contacttrigger, header.open #contacttrigger {
border-color: #666;
}

header ul {
	margin-bottom: 0;
}

ul#largescreennav {
    clear: none;
	position: absolute;
	right: 0px;
	bottom: 18px;
}

ul#largescreennav li {
	float: left;
	list-style: none;
	line-height: normal;
}

ul#largescreennav li a {
    line-height: normal;
	margin-left: 30px;
	font-size: 1.3rem;
}


header a {
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    color: #333;
}

header.scrolled #largescreennav a {
    color: #F4F4F4;
}

.no-touchdevice header a:hover {
    color: #7DA637;
}

ul#smallscreennav {
padding-left: 0;
}

ul#smallscreennav, ul#smallscreennav li {
list-style: none;
}

ul#smallscreennav li a {
font-weight: 300;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #CCC;
display: block;
}

/* ============================== Padding/borders ============================ */

.bottom-border {
	border-bottom: 1px solid #CCC;
}

@media screen and (max-width: 400px) {
	.halfpadding {
		padding-left: 5px;
		padding-right: 5px;
	}
	.fullpadding, ul#smallscreennav li a {
		padding-left: 10px;
		padding-right: 10px;
	}
	.halfpaddingaround {
		padding: 5px 5px 5px 5px;
	}
	.fullpaddingaround {
		padding: 10px 10px 10px 10px;
	}
	footer {
		padding-top: 20px;
	}
		.full-bottommargin {
		margin-bottom: 20px;
	}
}

@media screen and (min-width: 401px) and (max-width: 700px) {
	.halfpadding {
		padding-left: 10px;
		padding-right: 10px;
	}
	.fullpadding, ul#smallscreennav li a {
		padding-left: 20px;
		padding-right: 20px;
	}
	.halfpaddingaround {
		padding: 10px 10px 10px 10px;
	}
	.fullpaddingaround {
		padding: 20px 20px 20px 20px;
	}
	footer {
		padding-top: 40px;
	}
    .full-bottommargin {
        margin-bottom: 40px;
    }
}

@media screen and (min-width: 701px) and (max-width: 1000px) {
	.halfpadding {
		padding-left: 20px;
		padding-right: 20px;
	}
	.fullpadding {
		padding-left: 40px;
		padding-right: 40px;
	}
	.halfpaddingaround {
		padding: 20px 20px 20px 20px;
	}
	.fullpaddingaround {
		padding: 40px 40px 40px 40px;
	}
	footer {
		padding-top: 60px;
	}
		.full-bottommargin {
		margin-bottom: 40px;
	}
}

@media screen and (min-width: 1001px) {
	.halfpadding {
		padding-left: 30px;
		padding-right: 30px;
	}
	.fullpadding {
		padding-left: 60px;
		padding-right: 60px;
	}
	.halfpaddingaround {
		padding: 30px 30px 30px 30px;
	}
	.fullpaddingaround {
		padding: 60px 60px 60px 60px;
	}
	footer {
		padding-top: 60px;
	}
		.full-bottommargin {
		margin-bottom: 60px;
	}
}

@media screen and (max-width: 600px) {
    main {
        padding-top: 50px;
    }
}

@media screen and (min-width: 601px) {
    main {
        padding-top: 80px;
    }
}

/* =============================== Footer eleents ================================ */

.addressinfo {
	padding-left: 80px;
}

.no-touchdevice .addressinfo.streetaddress {
    background: url(https://norins.no/images/common/streetaddress-outline.svg) no-repeat 0px 6px;
}
.no-touchdevice .addressinfo.streetaddress:hover, .touchdevice .addressinfo.streetaddress {
    background: url(https://norins.no/images/common/streetaddress-outline-green.svg) no-repeat 0px 6px;
}

.no-touchdevice .addressinfo.mail {
    background: url(https://norins.no/images/common/mail-outline.svg) no-repeat 0px 6px;
	font-size: 2em;
    line-height:70px;
}
.no-touchdevice .addressinfo.mail:hover, .touchdevice .addressinfo.mail {
    background: url(https://norins.no/images/common/mail-outline-green.svg) no-repeat 0px 6px;
}

.no-touchdevice .addressinfo.phone {
    background: url(https://norins.no/images/common/phone-outline.svg) no-repeat 0px 6px;
    font-size: 2em;
    line-height:70px;
}
.no-touchdevice .addressinfo.phone:hover, .touchdevice .addressinfo.phone {
    background: url(https://norins.no/images/common/phone-outline_green.svg) no-repeat 0px 6px;
}

.no-touchdevice .formwrapper .addressinfo.mail {
    background: url(https://norins.no/images/common/mail-outline.svg) no-repeat 0px 6px;
    font-size: 2em;
    line-height:70px;
}
.no-touchdevice .formwrapper .addressinfo.mail:hover, .touchdevice .formwrapper .addressinfo.phone {
    background: url(https://norins.no/images/common/mail-outline-green.svg) no-repeat 0px 6px;
}

/* ================================= Buttons and forms =============================== */


.clickable {
	display: table;
	height: 50px;
	text-align: center;
	padding: 0 40px;
	cursor: pointer;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
border: 2px solid #7DA637;
background: #7DA637;
}

.clickable span {
	display: table-cell;
	vertical-align: middle;
}

button {
border: 2px solid #7DA637;
}

#close-button {
	background: #7DA637;
cursor: pointer;
}

.clickable.inverse, button {
	background: transparent;
color: #7DA637;
}

.clickable:hover {
background: #333;
border-color: #333;
}

.clickable.inverse:hover, button:hover {
	background: #7DA637;
border-color: #7DA637;
color: #FFF;
}

.darkgrey-bg .clickable.inverse {
border-color: #FFF;
color: #FFF;
}

.darkgrey-bg .clickable.inverse:hover {
background: #FFF;
color: #444;
}

#contact {
    width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll !important;
    background: rgba(0,0,0,.6);
    padding-top: 100px;
    padding-bottom: 100px;
    /*opacity:0;*/
    display: none;
}

#contact .form-background {
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
    background: #FFF;
    margin: 0 auto;
    width: 90%;
    max-width: 600px;
}

#close-button {
    width:40px;
    height:40px;
    float:right;
    margin-top: -20px;
    margin-right: -20px;
}

input[type=text] {
    border:0;
    border: none;
    border-bottom: 1px solid #CCC;
    padding: 8px 0;
    font-size: 1.7em;
    font-weight: 400;
    margin-bottom: 30px;
    width: 100%;
    clear: both;
}

#firstDigit, input#mathfirstnum, #secondDigit, input#mathsecondnum, #humanCheckCaptchaInput {
    width: 30px;
    clear:none;
    display: inline-block;
    text-align: center;
}

#humanCheckCaptchaInput {
	width: 50px;
}

input#mathfirstnum, input#mathsecondnum {
	border-color:transparent;
}

input[type=submit] {
    float:none;
    clear:both;
    width: 100%;
    border: none;
    margin:0;
border: 2px solid #7DA637;
}

.formwrapper .clickable {
    margin-top: 30px;
}

.errorclass {
	color: #CC3333;
}

input[type=text].errorclass {
    color: #993333;
	border-color: #993333;
}


.formwrapper {
	width: 100%;
	clear: both;
	padding: 10px 30px 30px 30px;
}

.formwrapper:after {
    content: "";
    display: table;
    clear: both;
}

#contact-thanks {
	display: none;
}