/*
Theme Name: ilmastonmuutos
Author: Labo
Version: 1.0
*/

html, body{

	min-height:100%;
	min-width:100%;
	font-size: 62.5%; 
	font-weight:400;
    font-family: 'Roboto Slab', serif;

	
}

body{

	background:#fff;
	color: rgba(0,0,0,0.7);
	line-height: 2.8rem;
	font-size:1.6rem

}

body.menu-open{
	overflow:hidden;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
.site-header {
	width:100%;
	background:#fff;
	padding: 0 4% 0%;
	position:relative;
	z-index:1000;
	height: 90px;
	z-index: 11000;
	border-bottom: 1px solid  #eaeaea;

}

.site-header.fixed {
position:fixed;
top:0;
}
.site-content{
	padding:0px 0 0 0;
}
.site-content.padded{
	padding:90px 0 0 0;
}

#site-branding{
	/*display:block;
	margin:0 auto;
	padding:0;
	text-align:center;
	position: relative;
	width: 130px;*/
	margin: 0 auto;
padding: 0;
text-align: center;
position: absolute;
width: 115px;
left: 0;
right: 0;
top: 15px;

}
	
#site-branding img{
	display:block;
	max-width:115px;
	margin: 0px auto 0;
}


#site-branding.small{
	/*display:block;
	margin:0 auto;
	padding:0;
	text-align:center;
	position: relative;
	width:80px;*/
	display: block;
margin: 0 auto;
padding: 0;
text-align: center;
position: absolute;
width: 80px;
left: 0;
right: 0;
top: 56px;
}
	
#site-branding.small img{
	display:block;
	max-width:80px;
	margin: -50px auto 0;
}



.content-wrapper {

    padding: 0 4%;
    max-width:1200px;
   	box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
}

.content-wrapper.single {

    padding: 0 4%;
    max-width:1000px;
   	box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
}






/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

#menutrigger{
	margin: 1.6em 0 0 0;
}
.main-navigation{
	height:auto;
}

#slidemenu{
	color:#000000;
	background:#fff;
	position: absolute;
	z-index: 12000;
	display:none;
	top: 90px;
	padding:2%;
	left: 0;
	right: 0;
	border-bottom:6px solid #56dafb;
	overflow-y:auto;
}

ul#primary-menu
{
	margin:0;
	padding:0;
	list-style:none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	justify-content: stretch;
	order: 1;
}
ul#primary-menu > li {
  /*  display: table-cell;
    width: 20%;
    border-right: 2px solid  #f1f1f1;
    padding: 0 20px;
    min-height: 160px;
    font-size: 1.3rem;
	counter-increment: index;
	list-style:none; */
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 15%;
	border-top: none;
	border-right: 1px solid #eaeaea;
	padding: 0rem 1em 0;
}

ul#primary-menu > li:last-child{
	border-right:none;
}

ul#primary-menu ul{
	padding:6px 0 0 0px;
	margin: 0 0 0 0.8em;
}

ul#primary-menu  li a{
	font-size:1.6rem;
	font-weight:600;
	
}

ul#primary-menu  ul li {
	display: block;
	margin: 0 0 14px 0;
	line-height: 1.6rem;
}

ul#primary-menu  ul li a{
	font-size:1.3rem;
	font-weight:400;
}
ul#primary-menu > li a{
	color:#000;
}

ul#primary-menu > li a:hover{
	color:#26606E;
}

ul#primary-menu li.current-menu-item a,
ul#primary-menu ul li.current-menu-item a{
	color:#26606E;
}
ul#primary-menu li.current-menu-item  ul li a,
ul#primary-menu ul li.current-menu-item ul li a{
	color:#000;
}


ul#primary-menu li.current-menu-item ul li a:hover{
	color:#26606E!important;
}

li.mobileitem{
	display:none;
}


#top-wrapper{
	background: #000;
    height: 45px;
}

ul#topmenu{
	margin: 0 110px 0 0;
    padding: 0;
    /* float: right; */
    padding: 9px 0 0 0;
    text-align: right;
 
	
}


ul#topmenu li{
	display:inline-block;
	padding: 0 0.2em;
}

ul#topmenu li a{
	color: #fff;
    font-size: 1.4rem;
	font-weight: 600;
}

ul#topmenu li a:hover,
ul#topmenu li.current_page_item a, 
.single-post ul#topmenu li.current_page_parent a {
	color:#ffed00;
}


/*

.main-navigation ul {
	margin: 20px auto 0;
	width: auto;
	text-align: center;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	margin: 0;
	padding: 1.6em 1em;
	position: absolute;
	top: 100%;
	left: -9999em;
	z-index: 99999;
	width:240px;
	text-align:left;
	background:#fff;
}


.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: 0;
}



.main-navigation li {
	display:inline-block;
	position: relative;
	padding: 0em;
	margin: 0;
	padding: 0 0.8em 0em;
}


.main-navigation li:first-child{
	padding: 0 0.8em 0em 0;
} 
.main-navigation li:last-child{
	padding: 0  0em 0 0.8em;
} 

.main-navigation li a {
	display: block;
	text-decoration: none;
	color: #000;
   font-weight: 400;
  letter-spacing: 0.08em;
  transition: all ease-in-out 0.4s;
  text-transform: uppercase;
  font-family: 'Roboto Slab', serif;
}



.main-navigation ul ul li {
	display: block;
    position: relative;
    padding: 0em 0 0.4em;
    margin: 0;

}

.main-navigation ul ul li a {
	display: block;
	text-decoration: none;
	color:#fff;
	font-weight: 400;
	letter-spacing: 0.06em;
	border:0;
 	 transition:all .4s ease-in-out;
	  padding: 0;
	  font-size: 1.2rem;
	  text-transform:none;
	  border:0;
	
}





.main-navigation ul li a::after {
    border-bottom: 3px solid #ffed00;
    content: "";
    display: block;
    position: relative;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out 0s;
    margin: 0px 0 0 0;
}

.main-navigation ul li a:hover::after {
    transform: scaleX(1);
}




.main-navigation ul li.current-menu-item a{
	color:#fff;
}

.main-navigation ul li.current-menu-item a::after {
    transform: scaleX(1);
}


*/


ul#helpermenu{
	margin: 35px 0px 0 0;
	padding: 0;
	float:right;
}


ul#helpermenu li{
	display:inline-block;
	padding: 0 0.2em;
}

ul#helpermenu li a{
	color:#000;
	font-size: 1.4rem;
}

ul#helpermenu li a:hover,
ul#helpermenu li.current_page_item a, 
.single-post ul#helpermenu li.current_page_parent a {
	color:#26606E;
}


#responsive-menu-additional-content a{
	color:#fff;
font-size: 1.3rem;
padding: 3px 5%;
display: block;
transition: background-color 0.5s, border-color 0.5s, color 0.5s;

}


#responsive-menu-additional-content a:hover{
	background:#3f3f3f;

}


#responsive-menu-container #responsive-menu-additional-content {
    padding: 0%!important;
}

@media screen and (max-width: 900px) {
	
	.main-navigation > ul {
		display: none;
	}
	#menutrigger,
	#slidemenu,
	ul#helpermenu{
		display:none!important;
	}
	li.mobileitem{
		display:block;
	}
	
}



.main-video {
    background-position: center center;
	height: 600px;
	overflow: hidden;
	position: absolute;
	width: 100%;
	top: 0;


}

.main-video video {
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: auto;
    z-index: -100;
}

#main-slider {
    background:#000;
    margin: 0 auto;
    width: 100%;
    padding: 0 ;
    position: relative;
    height:600px; 
    overflow:hidden;
}


#main-banner {
	margin: 0 auto;
	width: 100%;
	padding:  0;
	position: relative;
	text-align: center;
	overflow: hidden;
	height: 300px;
}

#main-banner h1,
#main-banner h2,
#main-banner h3,
#main-banner h4,
#main-banner h5{
	color:#000;

}


#main-banner h1{
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: 0.06rem;
    font-weight: 700;
}


.page-header{
	width:100%;
	margin:0 auto;
	position:relative;
	min-height: 220px;
	overflow:hidden;
	background-size:cover;
	padding:2% 0;
	background-position:center;
	background-repeat:no-repeat;
}
.page-header img {
    display: block;
    height: auto;
    width: 100%;
}

#page-slider {
    background:#f1f1f1;
    margin: 0 auto;
    width: 100%;
    padding: 0 ;
    position: relative;
    height:320px; 
    overflow:hidden;
}




.header-mask{
	background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}



.header-text {
    color: #000;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
   top: 55%;
    transform: translateY(-50%);
    width: 50%;
    z-index: 100;
    
}

.header-text h1,
.header-text h2,
.header-text h3{
	font-weight:600;
	
}

.header-text h1{
 	color: #000;
    font-size: 3.4rem;
    line-height: 1em;
    margin: 0 0 0.4em;

}

.header-text h2{
	font-size: 2rem;
	line-height: 1.2em;
    margin: 0em 0 0.2em 0;;
	padding:0;
	font-weight:400;
     color:#000;

}

.header-text img {
    display: block;
    max-width: 100px;
}





/*--------------------------------------------------------------
## Columns
--------------------------------------------------------------*/



.section {
	
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	clear: both;
	padding:2% 0%;
	margin: 0px;
	position: relative;
	white-space: nowrap;
	
}

.section.main-boxes{
	margin:0;
	padding:0;
	 border: 1px solid #fff;
}



.section.grey{
	background-color:#f1f1f1;
	margin:0;
	padding: 2% 0%;

}


.section.blue{
	background-color:#56dafb;
	margin:0;
	padding: 2% 0%;
	

}

.section.yellow{
	background-color:#ffed00;
	margin:0;
	padding: 2% 0%;

	
}



.section.footerlogos{
	background-color:#56dafb;
}

.section.footerlogos .span_1_of_3:last-child{
	text-align:right;
}

.section.bottomlinks .span_1_of_2:last-child{
	text-align:right;
}






.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark h4,
.section.dark h5{
  	color: #000!important;
}

.section.light,
.section.light h1,
.section.light h2,
.section.light h3,
.section.light h4,
.section.light h5{
	color:#fff!important;

}

.section.fullsection{
	padding: 0%;

}

.fullsection .col{
margin: 0%;

}

.fullsection .span_1_of_2{
	width:50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	min-height: 360px;

}


.span_1_of_2.lefttext{
  	padding:0 2% 0 0;
  	width:46%;
}




.colbg{
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    position: absolute;
    top: 0;
    left:0;
    right:0;
}


.colbg.imgleft {
    left: 0;
    right: 50%;
}

.colbg.imgright {
    left: 50%;
    right: 0;
}




.colbg-color{
    background-color:#fff;
    bottom: 0;
    position: relative;
    top: 0;
    left:0;
    right:0;
}

.colbg-color.beige{background-color:#fef5e3}
.colbg-color.white{background-color:#fff;}
.colbg-color.gray{background-color:#ebebeb;}


.col-wrap{
position: absolute;
top: 50%;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
    transform: translateY(-50%);
    width:70%;


}

.col-wrap-color{
	position: relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	text-align: center;
	padding:2% 0;
    width:70%;
}


.col {
	
	display: inline-block;
	margin: 1% 0 1% 4%;
	vertical-align:top;
	white-space: normal;
	
}

.section.imgblock .col{
	vertical-align:middle;
}
.col:first-child { margin-left: 0; }





.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

.group{
	margin:0;
}

:root {
	--col1of5: calc((100% - 4 * 4%) / 5);
	--col1of6: calc((100% - 5 * 4%) / 6);
}

.span_1_of_1{ width: 100%; }

.one-col{max-width:800px;margin:0 auto;}

.page-id-718 .entry-content > .section:first-child .one-col { max-width: none; }
.page-id-718 .entry-content .columns-header { text-align: center; }

/*  GRID OF TWO  */
.span_2_of_2 { width: 100%;}
.span_1_of_2 { width: 48%;}

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65.3333%; }
.span_1_of_3 { width: 30.6666%;}

/*  GRID OF FOUR  */
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 74%;}
.span_2_of_4 {width: 48%;}
.span_1_of_4 {width: 22%;}

/*  GRID OF FIVE  */
.span_5_of_5 {width: 100%;}
.span_4_of_5 {width: calc(var(--col1of5) * 4 + 4% * 3);}
.span_3_of_5 {width: calc(var(--col1of5) * 3 + 4% * 2);}
.span_2_of_5 {width: calc(var(--col1of5) * 2 + 4%);}
.span_1_of_5 {width: var(--col1of5);}

/*  GRID OF SIX  */
.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: calc(var(--col1of6) * 5 + 4% * 4);}
.span_4_of_6 {width: calc(var(--col1of6) * 4 + 4% * 3);}
.span_3_of_6 {width: calc(var(--col1of6) * 3 + 4% * 2);}
.span_2_of_6 {width: calc(var(--col1of6) * 2 + 4%);}
.span_1_of_6 {width: var(--col1of6);}


.main-boxes .span_1_of_3 {
	background-size:cover;
	background-position:center;
	margin:0;
	 padding: 3% 2%;
	color:#fff;
	min-height:380px;
	position:relative;
	width: 33.3333%;

}

.section.single-info{
	margin: 0 0 6%;
	padding:0;
}
.section.single-info .col{
	margin: 0;
	text-align:center;
	font-family: 'Roboto Slab', serif;
	text-transform:uppercase;
	font-weight:400;
}

.section.single-info .span_1_of_3 { 
	border-right:1px solid #000;
	width: 33.333%;
}

.section.single-info .span_1_of_3:last-child{
	border-right:0;

}


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

	:root {
		--col1of6: calc((100% - 2 * 4%) / 3);
	}
	
	.section {
		white-space: normal;
	}
	
	div[class*="_of_6"] {
		width: var(--col1of6);
	}

	div[class*="_of_6"]:nth-child(3n+1) {
		margin-left: 0;
	}

	div[class*="_of_6"]:nth-child(n+4) {
		margin-top: 3%;
	}

}


/*  GO FULL WIDTH BELOW 800 PIXELS */
@media only screen and (max-width: 800px) {
    .section{white-space: normal;}
	.col {  display:block;margin: 4% 0 4% 0%; }
	.span_1_of_2, .span_2_of_2 { width: 100%; }
	.span_1_of_3, .span_2_of_3, .span_3_of_3 { width: 100%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
	.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
	div[class*="_of_6"] { width: 100%; }
	.fullsection .span_1_of_2{ width: 100%; min-height:auto; }
	.span_1_of_2.lefttext{width: 100%;}

}


.leadtext{
	text-align:center;
	margin:0 auto;
	max-width:800px;
}


.leadtext p{
		font-size:1.3em;
		line-height: 1.8em;

}
.col-img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

.columns-header{
    
  	text-align: left;
	display: block;
    padding: 1% 0;
    
}


/************************
********* MAIN NEWS *****
************************/

#news-section{
	background: #ffed00;
	padding:2% 0%;
	margin: 0px;
	position: relative;
	white-space: nowrap;
	
}

ul#news-filter{
	margin: 2% 0 2%;
	padding:0;
	text-align:center;
	list-style:none;
}
ul#news-filter li{
	border: 2px solid transparent;
	margin: 0 0.4em;
	display: inline-block;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.4em 1em;
}

ul#news-filter li.active{
	border: 2px solid #000;
}

ul#news-filter li a,
ul#news-filter li a:hover{
	color:#000;
}

 
ul.gridlist.news {
    padding: 0 0 1em;
    margin: 0;
	overflow: hidden;
	list-style: none;
	text-align:center;
}


ul.gridlist.posts {
    padding: 0 0 1em;
    margin: 0 0 6% 0;
	overflow: hidden;
	list-style: none;
	text-align:center;
}


ul.gridlist.news li{
   /* float:left;*/
   display:inline-block;
    margin: 1% 1% 0 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 32.666%;
	transition:all ease 0.4s;
	vertical-align: bottom;
	text-align:center;
   
}




ul.gridlist.posts li {
	background:#f9f9f9;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
	display:inline-block;
    margin: 1% 1% 0 1%;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 22.666%;
	transition:all ease 0.4s;
	vertical-align: bottom;
	text-align:center;
}

ul.gridlist.news li:last-child{
	margin: 1% 0% 0 0;
}



ul.gridlist.news li .news-img,
ul.gridlist.posts li .news-img{
	background-size: cover;
    background-position: 50% center;
    background-repeat: no-repeat;
	display:block;
	height:220px;
}

ul.gridlist.news li .news-meta,
ul.gridlist.posts li .news-meta{
	text-transform: uppercase;
	font-weight:600;
	margin: 1em 0 1em;
	padding: 0 2%;
	white-space: normal;
	font-size:1.4rem;

}

ul.gridlist.news li .news-content,
ul.gridlist.posts li .news-content{
	display:block;
	font-size:1.8rem;
	font-weight:600;
	margin:0 0 1em;
	white-space:normal;
	padding: 0 4%;
	min-height: 70px;
}

ul.gridlist.news li .news-content > a,
ul.gridlist.posts li .news-content > a {
	color: inherit;
}

ul.gridlist.news li .news-content > a:hover,
ul.gridlist.posts li .news-content > a:hover {
	color: #000;
}

ul.gridlist.news li a.news-readmore,
ul.gridlist.posts li a.news-readmore{
	position: relative;
display: block;
color:#000;
font-size: 1.6rem;
margin: 0 0 1em;

padding: 0.2em 1.6em;
text-transform: uppercase;
font-weight: 600;

}

ul.gridlist.news li a.news-readmore:hover,
ul.gridlist.posts li a.news-readmore:hover{
	color:#5d5d5d;
}

ul li .news-box-link {
	color: inherit;
}

ul li .news-box-link:hover {
	color: #000;
}

 /************************************/
/************ INSTAGRAM **********/
/************************************/

#insta-section {
	position: relative;
	background: #fff;
	margin: 0;
	padding: 4% 0 0%;
}

ul.gridlist.insta {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

ul.gridlist.insta li {
	display: block;
	position: relative;
	width: calc((100% - 8px) / 5);
	background-size: cover;
	background-position: 50% center;
	background-repeat: no-repeat;
	margin: 0;
	padding-top: calc((100% - 8px) / 5);
	overflow: hidden;
	cursor: pointer;
	float: left;
	transition: all ease 0.4s;
}

ul.gridlist.insta li + li {
	margin-left: 2px;
}

ul.gridlist.insta li:hover {
	opacity: 0.7;
}

ul.gridlist.insta li a {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

ul.gridlist.insta img { 
	display: none;
}


@media (max-width: 800px) {



}	


@media (max-width: 480px) {
	
	ul.gridlist.insta li {
		width: calc((100% - 2px) / 2);
		padding-top: calc((100% - 2px) / 2);
	}
	
	ul.gridlist.insta li:nth-child(2n+1) {
		margin-left: 0;
	}

	ul.gridlist.insta li:nth-child(n+3) {
		margin-top: 2px;
	}

}




a.hilit-btn {
	margin: 0.6em auto;
	padding: 1em;
	font-weight: 600;
	line-height: 1rem;
	letter-spacing: 0.04em;
	background: #ffed00;
	color: #000;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6rem;
	transition: all ease 0.4s;
	min-width:180px;
	border-radius: 4px;
}

a.hilit-btn:after{
	font-family:'Fontello';
	content: "\E80F";
	margin:0 0 0 6px;
}
a.hilit-btn:hover{
	background-color: #ebda00;
}
/*************************
********** BOXES *********
*************************

.boxes-header{

 	display: block;
	font-size: 1.8em;
    font-weight: 400;
    margin: 0 0 0.6em;
    margin: 0;
    padding: 1% 0;

}

.box {
   display: block;
   float:left;
   width:49.5%;
   margin: 0% 1% 1% 0%;
   overflow: hidden;
   position: relative;
   text-align: left;
   background: #f5f6f7;
   white-space: normal; 
   height:332px;
   background-size:cover;
   background-repeat: no-repeat;
   
}

.box:nth-child(even){
	margin: 0% 0% 1% 0%;
}


.box.red{
	background-color:#B00303;
}


.box.purple{
	background-color:#9f6dc7;
}

.box.green{
	background-color:#40e38f;
}

.box.blue{
	background-color:#56dafb;
}

.box h2{

	color:#ffed00;
	font-weight:600;
	font-size:3rem;
}

.box-img{
 	height:200px;
 	background:#dddddd;
 	position:relative;
 	background-size:cover;
 	background-position:top center;
 	background-repeat:no-repeat;

}

.box-txt {
    padding: 6%;
	display: block;
	position: absolute;
	bottom: 0;
	color:#fff;
	max-width: 60%;
}


.box p{
	line-height: 1.6em;
	margin:0 0 1em;
}

.box-link{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	width:100%;
	height:100%;
}

.link-btn{
	background:#ffed00;
	position: absolute;
	bottom: 0.6em;
     right: 0.6em;
	border-radius: 50%;
	font-size: 4rem;
	line-height: 6rem;
	padding: 7px 8px;

}


*/



/*************************
********** BOXES *********
*************************/

.boxes-header{

	display: block;
   font-size: 1.8em;
   font-weight: 400;
   margin: 0 0 0.6em;
   margin: 0;
   padding: 1% 0;

}

.box {
	display: block;
	float: left;
	width: 32.333%;
	margin: 0% 0.5% 1% 0.5%;
	overflow: hidden;
	position: relative;
	text-align: left;
	background: #f5f6f7;
	white-space: normal;
	height: 260px !important;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left center;
	background-color:#000;
  
}


/*
.box.red{
   background-color:#B00303;
}


.box.purple{
   background-color:#9f6dc7;
}

.box.green{
   background-color:#40e38f;
}

.box.blue{
   background-color:#56dafb;
}
*/
.box h2 {
    color: #ffed00;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.2rem;
	margin: 0 0 0.4em;
}

.box-img{
	height:200px;
	background:#dddddd;
	position:relative;
	background-size:cover;
	background-position:top center;
	background-repeat:no-repeat;

}

.box-txt {
    padding: 4% 4% 0 4%;
    display: block;
    position: absolute;
    bottom: 0;
    color: #fff;
    max-width: 80%;
}


.box p{
   line-height: 1.2em;
   margin:0 0 1em;
}

.box-link{
   position:absolute;
   top:0;
   bottom:0;
   right:0;
   left:0;
   width:100%;
   height:100%;
 
}

.box-link span{
	display:none;
}

.link-btn {
    background: #ffed00;
    position: absolute;
    bottom: 0.6em;
    right: 0.6em;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 3rem;
    padding: 7px 8px;
}



.fadebg{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 70%;
	width: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
/*** FEED THEM ***/

.fts-jal-fb-header {
	display:none;
 }
 
 .fts-jal-single-fb-post .fts-jal-fb-user-name {
	 display:none;
 
 }
 
 .fts-jal-fb-user-thumb{
	 display:none;
 }
 
 

 
 .fts-jal-single-fb-post {
	 border: 1px solid rgba(184, 184, 184, 0.3);
	 line-height: 17px!important;
	 margin-bottom: 0!important;
	 overflow: hidden!important;
	 padding: 0!important;
	 position: relative!important;
	 width: 23.7%!important;
	 background: #fff;
	  margin: 0 0.5% 4%!important;
	  height: 400px!important;
	 position: relative!important;
 }

 
 .fts-jal-fb-link-wrap {
	 border-radius: 0;
	 display: block;
	 height: 250px;
	 margin-top: 10px;
	 overflow: hidden;
	 transition: all 0.3s ease-in-out 0s;
	 
 }
 
 .fts-jal-fb-post-time:before {
	   content: "\F30C";
	 font-family:'Fontello';
	 background-color: #ffed00;
	 border-radius: 20px;
	 color: #fff;
	 font-size: 1em;
	 line-height: 1.8em;
	 margin: 0 15px 0 0;
	 padding: 4px 8px;
	 vertical-align: middle;
 }

 .fts-jal-fb-top-wrap {

    margin-bottom: 0px;
    text-align: left;

}
 
 .fts-jal-fb-post-time {
	 color: #999;
	 display: block;
	 font-size: 12px;
	 line-height: 10px;
	 padding: 4%;
	  border-bottom: 1px solid rgba(184, 184, 184, 0.3);
	  margin: 0;
 }
   
   .fts-jal-fb-message {
	 line-height: 21px;
	 padding: 3% 6%;
	 word-wrap: break-word;
	 height: 110px;
	 position: absolute;
	 bottom: 40px;
	 overflow:hidden;
 }
 
 .fts-likes-shares-etc-wrap{
	position:absolute;
	bottom:15px;
	padding: 0 6%;

 }
 .fts-album-photos-wrap img{
	 display:none!important;
 }
 .fts-jal-fb-link-wrap{
	height:180px;
	 position:relative;
margin-top: 0;
background-position: top center;
background-size: cover;
 }
 
 
 
 
 .fts-jal-fb-picture {
	 display: block;
	 height: 180px;
	 left: 0;
	 margin: 0;
	 position: absolute;
	 right: 0;
	 top: 0;
	 width: 100%;
	 z-index:100;
	 overflow: hidden;
 }
 
 /* fb-video */
 .fts-fluid-videoWrapper-html5{
	 height: 250px;
	 margin-top: 0;
	 width: 100%;
 }
 
 .fts-fluid-videoWrapper-html5 video {
	 margin-bottom: 0 !important;
	 object-fit: cover !important;
	 width:100%!important;
	 height:100%!important;
 }
 
 .fts-jal-fb-description-wrap{
	 display:none!important;
 
 }
 

 /*****************************
 ******** CUSTOM SINGLE POST NAV
 *****************************/


 .nav-links{
	margin: 2em 0;
	display: inline-block;
	width: 100%;
	
}

.nav-links p{
	font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
	text-transform: uppercase;
	line-height: 2.4rem;
}


.nav-links a{
	font-size: 1.4rem;
	line-height: 1.2rem;
}

.nav-previous{
	float: left !important;
    width: 40% !important;
    text-align:left;
    
}

.nav-next{
	float: right !important;
    width: 40% !important;
    text-align:right;
    overflow:hidden;

}
.prev-date{
	
	font-size:1.2rem;
	font-weight:600;
	text-align:left;
	margin: 0;
	line-height: 1.4rem;

}

.next-date{
	font-size:1.2rem;
	font-weight:600;
	margin: 0;
	line-height: 1.4rem;

}

#archive-nav{
	   padding: 0 1%;
	   margin: 10px 0;
}

/*
#archive-nav .nav-previous a{
	  background: #fed500 none repeat scroll 0 0;
    border-radius: 1px;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-weight: 400;
    margin: 5px 0 20px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease 0s;
    font-size:13px;
    
}

#archive-nav .nav-next a{
	  background: #fed500 none repeat scroll 0 0;
    border-radius: 1px;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-weight: 400;
    margin: 5px 0 20px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease 0s;
    font-size:13px;
    
}
#archive-nav .nav-previous a:hover,
#archive-nav .nav-next a:hover{

	background: #eac400;
}

*/



/*--------------------------------------------------------------
## FOOTER
--------------------------------------------------------------*/
.site-footer{

	background:#fff;

}


p.instatitle{
	font-size:2rem; 
	font-weight:600;
	margin:0;
	color:#000;
}
.site-info{
	font-size: 1rem;
    letter-spacing: 0.02em;
	padding: 0 0 2% 0px;
	text-align:center;
}

a.madein{
	font-family:Arial, Helvetica, sans-serif; 
	font-weight:800;
	color:#8f8f8f;
	display: block;
	font-size: 1.2rem;

}


.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4{
	text-transform: uppercase;
    font-weight: 600;
	font-size:100%;
	margin: 0 0 1em 0;

}

ul#footermenu{
	list-style: none;
	margin: 0;
	padding: 0;
	float:right;

}

ul#footermenu li{
	margin: 0em;
   padding: 0 0 0 0;
   font-family: 'Roboto Slab', serif;
   text-transform:uppercase;
	
}

ul#footermenu li a{
	color:#000;
	font-weight: 600;
	font-size:1.4rem;
	
}

ul#footermenu li a:hover{
	color:#26606E;

}


ul#footermenu li.current-menu-item a{
	color:#26606E;
}




a > .icon-facebook,
a > .icon-instagram{
	display: inline-block;
	background-color:#26606E;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	vertical-align: middle;
	padding: 2px;
	color:#fff;
	font-size: 2.3rem;
	margin:0 0.3em 0 0;
	transition:background-color ease 0.4s;
}

a > .icon-facebook:hover,
a > .icon-instagram:hover{
	background-color:#4cc0dd;
}


/**********************************************
****************** LIGHTBOX *******************
**********************************************/
div.pp_overlay{
	z-index:11999!important;
}
div.pp_pic_holder {
    z-index:12000!important;
}

.wp-caption-text {
    text-align: center;
    font-size: 1.4rem;
    line-height: 2.2rem;
}

/****************************************************
************** POST PAGINATION **********************
*****************************************************/
ul#post-pagination{
	margin: 30px auto;
	text-align: center;
	text-align: center;
	padding: 0;


}
ul#post-pagination li{
	display:inline-block;
	margin:0 0 0 0;

}

ul#post-pagination li a{
	border-radius: 50%;
	color: #000;
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	height: 20px;
	line-height: 1.3em;
	text-align: center;
	transition: background 0.3s ease 0s;
	width: 20px;

}

ul#post-pagination li.active a {
    background-color:#B00303;
    color:#fff;
  
}

ul#post-pagination li a:hover{
	    background-color:#ebebeb;
}
ul#post-pagination li.active a:hover {
	background-color:#B00303;

}

.blog-entry{
	    margin: 0 0 0em;
}

.single-post-newsitems {
	border-top: 5px solid #26606E;
	margin: 40px 0 0;
	padding: 55px 0 0;
}


.people-boxes {
	display: flex;
	width: calc(100% + 24px);
	margin: 0 -12px;
	padding-bottom: 50px;
	flex-wrap: wrap;
}

.people-boxes .people-box {
	display: inline-block;
	width: calc((100% - 72px) / 3);
	margin: 0 12px;
	vertical-align: top;
	flex: 0 0 calc((100% - 72px) / 3);
}

.people-boxes .people-box:nth-child(n+4) {
	margin-top: 30px;
}

.people-boxes .people-box .people-box-photo {
	background-position: 50% 35%;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 12px;
	padding-top: 75%;
	cursor: pointer;
}

.people-boxes .people-box .people-box-photo[style="background-image: url();"] {
	background-color: #fafafa;
	background-image: url(_img/ilmastonmuutos-lukioihin-logo.png) !important;
	background-position: 50%;
	background-size: auto 75%;
}

.people-boxes .people-box h4 {
	background: url(_img/down.svg) calc(100% - 10px) 2px no-repeat;
	background-size: auto 16px;
	margin-bottom: 10px;
	padding-right: 34px;
	color: #28a8e5;
	cursor: pointer;
}

.people-boxes .people-box h4 + p {
	font-size: 14px;
	line-height: 21px;
	color: #000;
}


#people-box-details {
	position: relative;
	width: calc(100% - 24px);
	box-shadow: rgba(0,0,0,0.1) 0 0 18px;
	margin: 10px 12px 20px;
	padding: 35px 50px 40px;
	font-size: 15px;
	line-height: 23px;
	color: #000;
}

#people-box-details h4 {
	font-size: 17px;
	color: #28a8e5;
}

#people-box-details-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	background: #28a8e5 url(_img/close.svg) 50% no-repeat;
	background-size: 50%;
	cursor: pointer;
}


#site-search {
	position: absolute;
    right: 4%;
    top: 18px;
    width: 35px;
    height: 35px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#site-search-trigger {
	position: absolute;
    top: 13px;
    right: 9px;
    width: 18px;
    height: 18px;
    background: url(_img/haku-wht.svg) 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}

#site-search-form {
	display: none;
    position: absolute;
    top: 4px;
    right: 0;
    width: 300px;
    height: 36px;
    border: 1px solid #555;
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
}

#site-search-keyword {
	display: inline-block;
    width: calc(100% - 35px);
    height: 100%;
    border: 0;
    padding: 0 10px 0 20px;
    vertical-align: top;
    font-size: 1.5rem;
}


.sr-only{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
 }
#site-search-submit {
	display: inline-block;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 21px;
    background: #ffed00 url(_img/haku.svg) 50% no-repeat;
    background-size: 18px;
    margin: 0px 0px 0 0;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: top;
}

.search-result {
	margin-bottom: 70px;
}

.search-result .search-result-image {
	display: inline-block;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: url(_img/ilmastonmuutos-lukioihin-logo.png) 50% no-repeat;
	background-size: cover;
	margin-top: 5px;
	overflow: hidden;
	vertical-align: top;
}

.search-result .search-result-image[style="background-image: url();"] {
	background-image: url(_img/ilmastonmuutos-lukioihin-logo.png) !important;
}

.search-result .search-result-text {
	display: inline-block;
	box-sizing: border-box;
	width: calc(100% - 170px);
	padding-left: 50px;
	font-size: 15px;
	line-height: 23px;
	vertical-align: top;
}

.search-result .search-result-text h3 {
	margin-bottom: 12px;
}

.search-result .search-result-text h3 a {
	text-decoration: underline;
	color: inherit;
}

.search-result .search-result-text p {
	margin: 0 0 12px;
}

.search-result .search-result-text > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}


.search .search-form {
	margin: 0 0 30px;
	padding: 0;
}

.search .search-form > label {
	display: inline-block;
	box-sizing: border-box;
	width: calc(100% - 120px);
	padding-right: 20px;
	vertical-align: top;
}

.search .search-form > label .search-field {
	width: 100%;
	height: 43px;
	margin: 0;
}

.search .search-form > .search-submit {
	display: inline-block;
	box-sizing: border-box;
	width: 120px;
	height: 43px;
	background: #ffed00 url(_img/haku.svg) 15px 50% no-repeat;
	background-size: 22px;
	padding: 8px 15px 8px 55px;
	text-align: left;
	vertical-align: top;
}

.search-results .result-numbers {
	margin: 0 0 50px;
	padding: 0;
	font-weight: 700;
}


.search-results .navigation.pagination {
	border-top: 2px solid #ffed00;
	margin: 30px 0;
	padding: 0 0 0;
	text-align: center;
}

.search-results .navigation.pagination .screen-reader-text {
	display: none;
}

.search-results .nav-links {
	margin: 0;
	padding: 10px;
}

.search-results .nav-links .page-numbers.prev,
.search-results .nav-links .page-numbers.next {
	display: none;
}

.search-results .nav-links .page-numbers {
	display: inline-block;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding-left: 1px;
	font-size: 15px;
	font-weight: 700;
	line-height: 31px;
	text-align: center;
	vertical-align: top;
}

.search-results .nav-links .page-numbers + .page-numbers {
	margin: 0 0 0 5px;
}

.search-results .nav-links .page-numbers.dots,
.search-results .nav-links .page-numbers.dots + .page-numbers {
	margin: 0;
}

.search-results .nav-links .page-numbers.current {
	border-radius: 50%;
	background: #ffed00;
	color: #333;
}


#instagram-feed{ 
	width: 100%; 
	max-width: 600px; 
	float: left; 
  }
  #instagram-feed .instagram-image{ 
	width: 25%; 
	float: left;
	padding: 5px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
  }
  #instagram-feed .instagram-image img{ 
	display: none; 
  }
  #instagram-feed .instagram-image a{ 
	display: block; 
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover; 
  }
  #instagram-feed .instagram-image a::before{ 
	content: ''; 
	display: block; 
	padding-top: 100%; 
  }
/*--------------------------------------------------------------
## MEDIA QUERIES 
--------------------------------------------------------------*/

@media (max-width:1200px) {


	.main-navigation li a{
		font-size:1.2rem;
	}
}

@media (max-width:1000px) {

	
	.fts-jal-single-fb-post {
		width: 48.05% !important;
	}


	.box {
		width: 32.333%;
		background-position: left top;
	
	}

}

@media (max-width:900px) {
#top-wrapper{
display:none

}

.site-header{
	position:fixed;
}
.site-content {
    padding: 90px 0 0 0;
}


	#site-branding{

	display: block;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	position: absolute;
	width: 80px;
	left: 0;
	right: 0;
	top: 56px;
	}
	

	#site-branding img{
		display:block;
		max-width:80px;
		margin: -50px auto 0;	
	}


	#site-search {
		top: 50%;
	}

}


@media (max-width:800px) {
	body{
		font-size:14px;
	}

	.box,
	.box:nth-child(2n) {
		width: 100%;
		margin: 2% 0 0 0;
	}

	ul.gridlist.news li,
	ul.gridlist.posts li {
		width: 98%;
		margin-bottom:2%;
		display: block;
	}


	.site-footer{
		text-align:center;
	}

	ul#footermenu{
		float:none;
	}
	
	.section.footerlogos .span_1_of_3:last-child{
		text-align:center;
	}

	.section.bottomlinks .span_1_of_2:last-child{
		text-align:center;
	}
	h2 {
		font-size: 2.2rem;
		line-height: 2.8rem;
	}	

	.box h2 {
		font-size: 2.2rem;
	}	
	
	.link-btn{
		font-size: 2.3rem;
		line-height: 4rem;
		padding: 5px 8px;
	}

	#main-banner h1 {
		font-size: 3rem;
		line-height: 3.4rem;
	}

	.header-text{
		width:90%;
	}

	ul#news-filter li {
		display:block;
	}

	.gallery-item{width: 50%!important;max-width: 50%!important;}


}


@media (max-width:600px) {

	
	.gallery-item{width: 100%!important;max-width: 100%!important;}
	.pp_description{display:none!important}


	.flex-caption {
		width: 90%!important;
	}
	.flexslider h1{
		font-size: 3em !important;
		line-height: 1em !important;

	}
	
	
	.people-boxes .people-box {
		width: calc((100% - 48px) / 2);
		flex: 0 0 calc((100% - 48px) / 2);
	}

	.people-boxes .people-box:nth-child(n+3) {
		margin-top: 30px;
	}


	.search-result .search-result-image {
		display: block;
		margin: 0 auto 20px;
	}

	.search-result .search-result-text {
		display: block;
		width: 100%;
		padding-left: 0;
		text-align: center;
	}
	
	.search-results .result-numbers {
		text-align: center;
	}	

}
@media (max-width:480px) {
	.fts-jal-single-fb-post {
		width: 100% !important;
	}
	p.instatitle{
		font-size:1.6rem;
	
	}


}

@media (max-width: 414px) {

	.people-boxes .people-box {
		width: calc(100% - 24px);
		flex: 0 0 calc(100% - 24px);
	}

	.people-boxes .people-box + .people-box {
		margin-top: 30px;
	}
	
	
	#people-box-details {
		padding: 20px 30px 25px;
	}


	#site-search-form {
		width: 250px;
	}

}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 .hamburger {
	text-align:center;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible; }
	.hamburger:hover {
	  opacity: 1; }
	.hamburger.is-active:hover {
	  opacity: 1; }
	.hamburger.is-active .hamburger-inner,
	.hamburger.is-active .hamburger-inner::before,
	.hamburger.is-active .hamburger-inner::after {
	  background-color: #000; }
  
  .hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative; }
  
  .hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; }
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	  width: 40px;
	  height: 4px;
	  background-color: #000;
	  border-radius: 4px;
	  position: absolute;
	  transition-property: transform;
	  transition-duration: 0.15s;
	  transition-timing-function: ease; }
	.hamburger-inner::before, .hamburger-inner::after {
	  content: "";
	  display: block; }
	.hamburger-inner::before {
	  top: -10px; }
	.hamburger-inner::after {
	  bottom: -10px; }
  
  .hamburger-label{
	  position:relative;
	  display:block;
	  margin:0;
	  color:#000;
	  font-weight:600;
	  line-height: 16px;
  }
  /*
	 * Squeeze
	 */
  .hamburger--squeeze .hamburger-inner {
	transition-duration: 0.075s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	.hamburger--squeeze .hamburger-inner::before {
	  transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
	.hamburger--squeeze .hamburger-inner::after {
	  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  
  .hamburger--squeeze.is-active .hamburger-inner {
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	.hamburger--squeeze.is-active .hamburger-inner::before {
	  top: 0;
	  opacity: 0;
	  transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
	.hamburger--squeeze.is-active .hamburger-inner::after {
	  bottom: 0;
	  transform: rotate(-90deg);
	  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }