/* suez.css */
/*@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,700);*/

@font-face {
	font-family: helsinki;
	src: url(../fonts/Helsinki-Extralight.otf) format("opentype");
	font-weight: 200;
	}
@font-face {
	font-family: helsinki;
	src: url(../fonts/Helsinki-Thin.otf) format("opentype");
	font-weight: 300;
	}
@font-face {
	font-family: helsinki;
	src: url(../fonts/Helsinki-Medium.otf) format("opentype");
	font-weight: 500;
	}


/* normalize */
* {
	box-sizing: border-box;
	outline: 0;
	}

html,body {
	padding: 0;
	margin: 0;
	}

article,
aside,
audio,
blockquote,
footer,
form,
header,
iframe,
main,
video {
	display: block;
	}

h1,h2,h3,h4,h5,h6,p {
	margin: 0;
	}
*+h1,*+h2,*+h3,*+h4,*+h5,*+h6 {
	margin-top: 2rem;
	line-height: 1.25em;
	}
*+p {margin-top: .5rem}
p {line-height: 1.4}

img {max-width: 100%; height: auto}

/* layout */
#wrapper {
	max-width: 1600px;
	margin: auto;
	background: #fff;
	overflow: hidden;
	}

.content {
	max-width: 1400px;
	margin: auto;
	padding: 20px;
	}
.content.medium {max-width: 900px}

.al-l {text-align: left}
.al-c {text-align: center}
.al-r {text-align: right}

.fix {position: fixed}
.abs {position: absolute}
.rel {position: relative}

.pad-40 {padding: 40px}
.pad-30 {padding: 30px}
.pad-20 {padding: 20px}
.pad-10 {padding: 10px}
.pad-5 {padding: 5px}

/*[class*="grid--"] {display: flex; flex-wrap: wrap}
.grid--5>* {width: 20%}
.grid--4>* {width: 25%}
.grid--3>* {width: 33.3333%}
.grid--2>* {width: 50%}

.gutt-30 {padding: 15px 0; margin: 0 -15px}
.gutt-30>* {padding: 15px}
.gutt-20 {padding: 10px 0; margin: 0 -10px}
.gutt-20>* {padding: 10px}
.gutt-10 {padding: 5px 0; margin: 0 -5px}
.gutt-10>* {padding: 5px}*/

[class*="grid--"] {display: grid}
.grid--5 {grid-template-columns: repeat(5, 1fr)}
.grid--4 {grid-template-columns: repeat(4, 1fr)}
.grid--3 {grid-template-columns: repeat(3, 1fr)}
.grid--2 {grid-template-columns: repeat(2, 1fr)}

.gutt-30 {grid-gap: 30px}
.gutt-20 {grid-gap: 20px}
.gutt-10 {grid-gap: 10px}


/* flex */
.flex {display: flex}
.flex.row {flex-direction: row}
.flex.col {flex-direction: column}
.flex.aic {align-items: center}
.flex.ais {align-items: flex-start}
.flex.aie {align-items: flex-end}
.flex.jcs {justify-content: flex-start}
.flex.jce {justify-content: flex-end}
.flex.jcc {justify-content: center}
.flex.jca {justify-content: space-around}
.flex.jcb {justify-content: space-between}
.flex1 {flex: 1}

/* font */
html,body,button,input,textarea {
	font: 300 18px helsinki;
	color: #000;
	}

.norm {font-family: helsinki}
.cond {font-family: helsinki}
.smaller {font-size: .875em}
.bigger {font-size: .875em}

h1,h2,h3,h4 {
	font-weight: 500;
	}

h1 {font-size: 2.6rem}
h2 {font-size: 1.8rem}
h3 {font-size: 1.5rem}
h4 {font-size: 1.1rem}
h5 {font-size: 1rem}
h6 {font-size: 1rem}

p {font-weight: 300}

.articles article h1 {font-size: 1.8rem}

b,strong,.bold {
	font-weight: 500;
	}

a {
	font-weight: 500;
	color: #003cc1;
	text-decoration: underline;
	transition: color .3s;
	}
a:hover {
	color: #00343d;
	}

/* text colors */
.blue-d {color: #00343d}
.blue-l {color: #eef2f3}
/*.green-d {color: #507316}
.green-m {color: #8fcb18}
.green-l {color: #9bcd41}*/
.white {color: #fff}

/* bg colors */
.bg-blue-d {background-color: #00343d}
.bg-blue-l {background-color: #eef2f3}
.bg-green-d {background-color: #8fcb18}
.bg-green-l {background-color: #9bcd41}
.bg-white {background-color: #fff}


/* buttons */
button,
a.button {
	border: 0;
	padding: 15px 40px;
	background: #fff;
	border-radius: 30px;
	cursor: pointer;
	transition: box-shadow .3s;
	color: initial;
	font-weight: 500;
	text-decoration: none;
	}
button.shadow, a.button.shadow {box-shadow: 0 0 4px rgba(0,0,0,.2)}
button.blue, a.button.blue {background-color: #00343d; color: #fff}
button.green, a.button.green {background-color: #8fcb18; color: rgba(255,255,255,.9)}
button:hover, .button:hover {box-shadow: 0 0 8px rgba(0,0,0,.4)}


/* MEDIA */

/* desk */
@media only screen and (min-width:1025px) {

.desk-unflex {display: block !important}

/*.grid--desk-5>* {width: 20%}
.grid--desk-4>* {width: 25%}
.grid--desk-3>* {width: 33.3333%}
.grid--desk-2>* {width: 50%}
.grid--desk-1>* {width: 100%}*/
.grid--desk-5 {grid-template-columns: repeat(5, 1fr)}
.grid--desk-4 {grid-template-columns: repeat(4, 1fr)}
.grid--desk-3 {grid-template-columns: repeat(3, 1fr)}
.grid--desk-2 {grid-template-columns: repeat(2, 1fr)}
.grid--desk-1 {grid-template-columns: 1fr}


.desk-hide {display: none !important}

}

/* ipad */
@media only screen and (min-width:767px) and (max-width:1024px) {

.pads-unflex {display: block !important}

/*.grid--pads-5>* {width: 20%}
.grid--pads-4>* {width: 25%}
.grid--pads-3>* {width: 33.3333%}
.grid--pads-2>* {width: 50%}
.grid--pads-1>* {width: 100%}*/
.grid--pads-5 {grid-template-columns: repeat(5, 1fr)}
.grid--pads-4 {grid-template-columns: repeat(4, 1fr)}
.grid--pads-3 {grid-template-columns: repeat(3, 1fr)}
.grid--pads-2 {grid-template-columns: repeat(2, 1fr)}
.grid--pads-1 {grid-template-columns: 1fr}


.pads-hide {display: none !important}

}

/* mobi */
@media only screen and (max-width:767px) {

.mobi-unflex {display: block !important}

/*.grid--mobi-5>* {width: 20%}
.grid--mobi-4>* {width: 25%}
.grid--mobi-3>* {width: 33.3333%}
.grid--mobi-2>* {width: 50%}
.grid--mobi-1>* {width: 100%}*/
.grid--mobi-5 {grid-template-columns: repeat(5, 1fr)}
.grid--mobi-4 {grid-template-columns: repeat(4, 1fr)}
.grid--mobi-3 {grid-template-columns: repeat(3, 1fr)}
.grid--mobi-2 {grid-template-columns: repeat(2, 1fr)}
.grid--mobi-1 {grid-template-columns: 1fr}


.mobi-hide {display: none !important}

}

















/* blog.css */
body {
	background: #f3f4f7;
	}

/* header */
#header {
	position: relative;
	z-index: 100;
	transition: box-shadow .3s;
	}
#header.shadow,
#header.sticky {
	box-shadow: 0 0 30px rgba(0,0,0,.4);
	}
#header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	animation: sticky .5s;
	}
/*#header .primary,
#header .secondary {
	margin-right: 20px;
	}
#header .secondary,
#header.sticky .primary {
	display: none;
	}
#header.sticky .secondary {
	position: relative;
	display: block;
	left: -4rem;
	animation: logo .5s .3s forwards;
	}
@keyframes logo {
	from {left:-4rem}
	to {left:0}
	}
#header.sticky .logo {
	width: 50px;
	}*/
@keyframes sticky {
	from {top:-100px}
	to {top:0}
	}
body.sticky {
	padding-top: 148px;
	}
#header nav ul {
	text-align: right;
	padding-right: 3rem;
	}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
nav a {
	position: relative;
	text-decoration: none;
	font-weight: 300;
	color: #00343d;
	font-size: 1rem;
	letter-spacing: -.02em;
	}
nav a:hover {
	color: #00343d;
	}
nav .current_page_item a::after {
	position: absolute;
	content: '';
	height: 2px;
	width: 0;
	left: 50%;
	transform: translateX(-50%);
	bottom: -5px;
	background: #00343d;
	animation: underline .5s .3s forwards;
	}
@keyframes underline {
	from {width: 0}
	to {width: 100%}
	}

.logo {
	/*width: 170px;*/
	height: 42px;
	}
.logo.small {
	width: 120px;
	}

nav ul li {
	display: inline-block;
	}
nav li:not(:only-child) {
	margin-left: 20px;
	}
nav .current_page_item a {
	font-weight: 500;
	}

nav.cat a {
	color: #fff;
	margin-right: 2rem;
	}

/* search */
input[type="search"] {
	border:0;
	background: #eef2f3;
	border-radius: 4px;
	padding: 0 10px;
	height: 50px;
	}

#search {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-50%);
	background: url(../img/search.svg) left 10px center / 22px no-repeat;
	width: 40px;
	transition: top .3s .5s, width .3s .15s, background-color .3s .5s, box-shadow .3s .5s;
	cursor: pointer;
	}
#search:focus {
	top: 3rem;
	width: 320px;
	background-color: #eef2f3;
	padding-left: 40px;
	transition: top .3s, width .3s .3s, background-color .3s, box-shadow .3s;
	cursor: auto;
	box-shadow: 0 0 40px rgba(0,0,0,.3);
	}


/* frontpage */
.bar-heading {
	padding-top: 0;
	padding-bottom: 0;
	}
.bar-heading h2 {
	}

.intro {
	background: url(../../dev/blad.jpg) center center / cover no-repeat;
	min-height: 500px;
	margin-bottom: 2rem;
	}
.intro__content {
	width: 1400px;
	margin: auto;
	padding: 20px;
	max-width: 100%;
	}
.intro__content__box {
	max-width: 700px;
	color: #fff;
	}

.intro h1 {
	font-size: 3rem;
	}
.intro p {
	font-size: 1.3rem;
	line-height: 1.5em;
	font-weight: 300;
	}

.fade {
	position: relative;
	text-shadow: 0 0 10px rgba(0,0,0,.2);
	}
.fade::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom right, rgba(0,0,0,.8), rgba(0,0,0,.1));
	}
.fade>div,
.video>div {
	position: relative;
	z-index: 1;
	}

.latest {
	margin-bottom: 3rem;
	}
.latest article {
	/*display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	color: #fff;*/
	}
.latest .article-img {
	display: block;
	background: #fff center center / cover no-repeat;
	padding-bottom: 60%;
	}
.latest .article-pre {
	
	}
.latest article h1 {
	font-size: 1.5rem;
	padding: 0rem;
	margin-top: 2rem;
	}
.latest article h1 a {
	text-decoration: none;
	color: inherit;
	}
.latest article p {
	font-size: 1rem;
	/*font-weight: 400;
	line-height: 1.5em;*/
	padding-top: 0;
	margin-top: .5rem;
	}

/* frontpage feed */
.feed article {
	position: relative;
	width: 100%;
	}
.feed-item-img {
	display: block;
	position: relative;
	background: center center / cover no-repeat;
	padding-bottom: 60%;
	}
.feed-item-cont {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #fff;
	padding: 1rem;
	background: linear-gradient(to bottom, rgba(3,15,65,0), rgba(0, 53, 61, 1));
	}
article .feed-item-cont h1 {
	font-size: 1.25rem;
	}
.feed-item-cont p {
	font-weight: 300;
	}
.feed-item-read {
	display: block;
	text-align: center;
	padding: 1rem;
	background: rgba(0,0,0,.4);
	color: #fff !important;
	transition: background-color .3s;
	}
.feed-item-read:hover {
	background: rgba(0,0,0,.6);
	}

.the-feed>div {
	display: flex;
	}
/*@media only screen and (min-width:768px) {
.the-feed>:nth-child(2),
.the-feed>:nth-child(6) {
	width: 66.6666%;
	}
}*/

.latest .video::after,
.the-feed .video .feed-item-img::after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.4) url(../img/film.svg) left 20px top 20px / 22px no-repeat;
	}

.read-more {
	margin: 3rem 0;
	}

.paginate:not(:empty) {
	border-top: 4px solid #eef2f3;
	margin-top: 20px;
	padding-top: 30px;
	}
.paginate a,
.paginate span {
	text-decoration: none;
	padding: 10px;
	background: #eef2f3;
	color: #00343d;
	}

a.tax {color: #909294}
a.tax:hover {color: #606163}

/* page */
section.page {
	display: flex;
	padding: 4rem 20px;
	}
.page-pad {	
	padding: 4rem 20px;
	}
.page-left {
	flex: 1;
	padding-right: 2rem;
	margin-right: 2rem;
	border-right: 2px solid #eef2f3;
	}
.page-right {
	flex-basis: 380px;
	}
.page-left img {
	display: block;
	margin: 2rem auto;
	max-width: 600px;
	width: 100%;
	}
.page-left p {
	font-weight: 300;
	}
.preamble {
	font-size: 1.25rem;
	font-weight: 300;
	margin: 1rem 0;
	}

.sharing {
	margin-top: 1rem;
	text-align: right;
	}
.sharing .icon {
	display: inline-block;
	margin-left: .25rem;
	cursor: pointer;
	}
.sharing svg {
	fill: #00343d;
	stroke: #00343d;
	}
.icon--mail svg {
	fill: transparent;
	}

.vid {
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 56.25%;
	margin: 1rem 0;
	}
.vid iframe {
	position: absolute;
	background: #f2f2f2;
	border: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}


/* related */
.rel-article h1 {
	font-size: 1.25rem;
	}
.rel-article h1 svg {
	display: inline-block;
	width: 26px;
	height: 26px;
	vertical-align: text-top;
	stroke-width: 3px;
	}
.rel-articles article {
	margin-top: 2rem;
	}
.rel-article:not(:first-child) {
	border-top: 2px solid #eef2f3;
	padding-top: 2rem;
	}
.rel-article a {
	color: #00343d;
	text-decoration: none;
	}





/* newsletter */
.nl-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

.newsletter {
	position: relative;
	color: #fff;
	flex: 1;
	margin-left: 2rem;
	}

.newsletter__title {
	margin-bottom: 1rem;
	}

.newsletter__email {
	display: block;
	background: #fff;
	height: 60px;
	border: 0;
	border-radius: 0;
	width: 100%;
	padding: 0 1rem;
	}

.newsletter__robots {
	position: absolute;
	left: -2000px;
	}

.newsletter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 2rem;
	margin-left: 1rem;
	background: transparent;
	color: #00343d;
	border: 3px solid #00343d;
	border-radius: 0;
	cursor: pointer;
	}

.newsletter__confirm {
	font-size: .875rem;
	font-weight: 500;
	background: url(../img/info--white.svg) left .75rem center/1.75rem no-repeat;
	background-color: #030e40;
	padding: 1rem;
	padding-left: 3rem;
	}


.sidebar-box h2 {
	font-size: 1.25rem;
	margin-bottom: .5rem;
	}

.sidebar-box {
	padding: 1rem;
	margin-top: 2rem;
	}

.sidebar-box .nl-flex,
.sidebar-box form {
	flex-direction: column;
	}
.sidebar-box .newsletter,
.sidebar-box form>* {
	width: 100%;
	}

.sidebar-box .newsletter,
.sidebar-box .newsletter__btn {
	margin: 1rem 0 0 0;
	}







/* footer */
#footer {
	padding: 3rem 0;
	font-size: .875rem;
	}
#footer a {
	color: #fff;
	font-size: .9rem;
	text-decoration: none;
	}

#footer-nav {
	width: 40%;
	}
#footer-nav ul {
	columns: 2;
	padding: 0;
	margin: 0;
	}
#footer-nav ul li {
	display: block;
	margin: 0;
	margin-bottom: .75rem;
	}

.footer-posts {
	flex: 1;
	}
.footer-posts article {
	margin-top: 1rem;
	}
.footer-posts article h1 {
	font-size: 1rem;
	}

.footer-social {
	display: inline-block;
	margin-left: .5rem;
	}
.footer-social svg {
	width: 20px;
	height: 20px;
	fill: #fff;
	}


/* MEDIA */


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

.page-right {
	flex-basis: 260px;
	}

.page-right .feed-item-img {
	padding-bottom: 100%;
	}

}


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

body.sticky {
	padding-top: 82px;
	}

h1 {font-size: 2.2rem}
h2 {font-size: 1.3rem}
h3 {font-size: 1.1rem}
h4 {font-size: 1rem}

.logo {
	width: 150px;
	}

.intro h1 {
	font-size: 2.25rem;
	}
.intro p {
	font-size: 1.1rem;
	}
.intro>div {
	padding: 1rem;
	}

.latest article h1 {
	font-size: 1.25rem;
	}

#main-nav {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 2rem;
	padding-top: 81px;
	}
#main-nav li {
	display: block;
	padding: 10px 0;
	margin: 0 !important;
	}
#main-nav.open {
	display: block !important;
	}
#header nav ul {
	text-align: center;
	padding: 0;
	}
#header a.bold::after {
	bottom: 2px;
	}

#search {
	right: 50px;
	}
#search:focus {
	top: 50px;
	width: 260px;
	}

.toggle-menu {
	position: absolute;
	z-index: 11;
	right: 0;
	top: -8px;
	display: block;
	width: 36px;
	height: 16px;
	cursor: pointer;
	}
#header.sticky .toggle-menu {
	}
.toggle-menu span {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	background: #00343d;
	}
.toggle-menu span:first-child {
	top:0;
	transition: transform .3s, top .3s .3s;
	}
.toggle-menu span:last-child {
	bottom:0;
	transition: transform .3s, bottom .3s .3s;
	}
.toggle-menu.open {
	position: fixed;
	top: 32px;
	right: 20px;
	}
.toggle-menu.open span:first-child {
	top: 7px;
	transform: rotate(45deg);
	transition: transform .3s .3s, top .3s;
	}
.toggle-menu.open span:last-child {
	bottom: 7px;
	transform: rotate(-45deg);
	transition: transform .3s .3s, bottom .3s;
	}

section.page {
	display: block;
	}
.page>* {
	padding: 0;
	margin: 0;
	border: 0;
	}
.page>.page-right {
	border-top: 2px solid #eef2f3;
	margin-top: 2rem;
	padding-top: 2rem;
	}

.feed-item-img {
	height: 200px;
	}

.newsletter {
	margin: 0;
	margin-top: 1rem;
	}
.newsletter form,
.nl-flex {
	flex-direction: column;
	}
.nl-flex>*,
.newsletter form>* {
	width: 100%;
	}
.newsletter__btn {
	margin: 1rem 0 0 0;
	}


#footer {
	text-align: center;
	}
#footer a {
	display: block;
	padding: 10px 0;
	}

#footer-nav,
.footer-posts {
	width: 100%;
	}
.footer-posts {
	border-top: 1px solid rgba(255,255,255,.2);
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding: 2rem 0;
	margin-top: 1rem;
	}

#footer span {
	display: block;
	margin: 0;
	}
#footer span+span,
#footer nav {
	margin-top: .75rem;
	}
.footer-social {
	margin: 0;
	}
.footer-social+.footer-social {
	margin-left: 1rem;
	}

}