
.poppins-thin {
    font-family: "Poppins", serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", serif;
    font-weight: 900;
    font-style: italic;
  }
html {
    font-family: 'Poppins', sans-serif;
    color: #005854;

}
body, .tooltip, .popover {
    font-family: 'Poppins', Arial, sans-serif;
    color: #005854;
}
.logo{
	max-width: 240px;
}

img {
    max-width: 100%;
    height: auto;
}
.lang-link{
	cursor: pointer;
}
.lang-link:hover, .lang-link.selected{
	text-decoration: underline;
}
.cat-item, .prod-item, .valinta:not(.selected), .cat:not(.selected), .link-item {
	cursor: pointer;
	color: rgb(16,128,130);
}
.cat-item:hover, .prod-item:hover, .valinta:not(.selected):hover, .cat:not(.selected):hover, .link-item:hover{
	text-decoration: underline;
}
.breadcrumbs:not(.selected) {
	cursor: pointer;
	color: rgb(16,128,130);
}
.selected .follow{
	display: none;
}
.top-box {
	border: 1px solid #888;
	border-top: 2px solid #888;
}
.prods-table , .indicator-table {
	border-bottom: 1px solid #ddd;
}
.list-header {
	border-bottom: 1px solid #ddd;
}
.sub-heads {
	border-bottom: 1px solid #888;
}
.field-name, .title-text{
	color: #466d8e;
}

.fi #result-names, .sv #result-names{
	font-size: 1.2rem;
	color: #466d8e;
}
.fi #result-name, .sv #result-name{
	font-size: 1.2rem;
	color: #466d8e;
}
.resultbox{
	background-color: #f7f8f9;
	background-color: #f7fdfd;
	background-color: #92d4d50f;
}	
button.back-to-top {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	background-color: #fff;
}	
.life-header{
	border-bottom: 1px solid #ddd;
}
.life-sub-header{
	border-bottom: 1px solid #f5f5f5;
}
  
.heros{
    background-color:#cfe9ea;
}
.back-left{
    max-width: 600px;
}
.back-right{
    background-image: url(../images/CO2_muokattu1920.jpg) ;
    background-size: cover;
    background-position: center center;
    background-position: center 45%;
}


.btn-outline-primary {
  color: #005845;
  background-color: transparent;
  background-image: none;
  border-color: #005845;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #005845;
  border-color: #fff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}


.bg-primary {
    background-color: #005854!important;
}
hr.footer-divider{
    background-color: white;
    height: 1px;
}
.footer-otsikko{
    font-weight: 600;
    padding-bottom: 1rem;
}
.footer-arrow-link i{
    padding-right: 1.5rem;
}
.arrow-link svg, .arrow-link i {
    transition: all .2s ease-in-out;
}
.arrow-link:hover i{
    transform: translate(10px, 0px);
}
.link-highlight i{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}
.link-highlight:hover i{
    transform: rotate(-30deg);
    transition: all .2s ease-in-out;
}
.link-ext i{
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}
.link-ext:hover i{
  transform: rotate(-30deg);
  transition: all .2s ease-in-out;
}
.arrow-link:hover, .link-highlight:hover{
    cursor: pointer;
}
.arrow-link:hover a, .link-highlight:hover a{
    text-decoration: underline;
}
.page a{
    color: #005854;
}
.icon-header{
    background-color: #005854;
    color: white;
}
.icon-header img{
    height: 7rem;
}
.card-body, .link-highlight{
    background-color: #cfe9ea;
}
.syke_tummanvihrea{
    color: #005854;
}
.syke_vihrea{
    color: #84c497;
}
.syke_punainen{
    color: #f28e77;
}
.syke_sininen{
    color: #64c1cb;
}
.syke_vaaleanharmaa{
    color: #e4e3de;
}

.show-en, .show-fi, .show-sv{
  display: none;
}
.en .show-en, .fi .show-fi, .sv .show-sv{
  display: block;
}

.card-body, .link-highlight, .breadcrumbs-area, .highlight-area{
  background-color: #cfe9ea;
}
.person .name{
  font-weight: bold;
}
.person p{
  margin-bottom: 0;
}
.person p.name{
  padding-top: 0.5em;
}
.infopage a i{
  padding-right: 0.5em;
}
.card .card-title {
  min-height: 6em;
}
@media (max-width: 768px) { 
  .card .card-title {
    min-height: 4em;
  }
  .back-left{
    max-width: 760px;
}

}

@media (max-width: 1200px) { 
  .sv .h4{
    font-size: 1.2rem;
  }
}


@media (max-width: 979.98px) { 
  .h4{
    font-size: 1.2rem;
  }
  .sv .h4{
    font-size: 1.1rem;
  }
}

@media (min-width: 1200px) { 
  .heros {
    margin-bottom: 2em;
  }
}
