/*  ---- SISÄLLYS ----------------------
            1. YLEISET HTML TYYLIT
                1.1 FONTIT
                1.2 PAINIKKEET
            2. RESPONSIIVISUUS
            3. SAAVUTETTAVUUS
            4. HEADER
                4.1 TOP HEADER
                4.2 NAV
                4.3 MOBIILINAV
                4.4 SUBMENU
            5. FOOTER
            6. SIVUKOHTAISET
            7. MODUULIT
            8. LISÄOSAT
---------------------------------------- */



/* -------------------------------------------- 1. YLEISET HTML TYYLIT -------------------------------------------- */

/* BODY */
body {

    overflow-x: hidden;
}

/* CONTAINER */

@media (min-width:768px) {
    .container {
        max-width: 740px;
    }
}

@media (min-width:992px) {
    .container {
        max-width: 980px;
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1150px;
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1350px;
    }
}

@media (min-width:1600px) {
    .container {
        max-width: 1405px;
    }
}

/* MURUPOLKU */

.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 1em;
    padding-bottom: 5px;
    border-bottom: 1px solid #2d3887;
}

.mobile-breadcrumb {
    margin: 20px 0;
    font-size: .8em;
}

.pc-breadcrumb {
    margin: 0 0 20px;
}

.breadcrumb a {
    font-size: 1em;
}

.breadcrumb a:visited {
    color: #2d3887 !important;
}

.breadcrumb i {
    padding-right: 10px;
}

.breadcrumb > .active {
    color: black;
}

@media only screen and (max-width:991px) {
    .pc-breadcrumb {
        display: none;
        visibility: hidden;
    }
}

@media only screen and (min-width:991px) {
    .mobile-breadcrumb {
        display: none;
        visibility: hidden;
    }
}

/* -------------------- 1.1 FONTIT -------------------- */

body {
    font-family: mr-eaves-xl-sans, sans-serif;
    font-size: 1rem;
}

.ingress {
    font-size: 1.35em;
    font-weight: 600;
    margin-bottom: 30px;
}

p {
    font-size: 1.125em;
    color: black;
    margin-bottom: 25px;
}

a {
    color: #2d3887;
    font-size: 1.125em;
    font-weight: 600;
    text-decoration: underline;
}

a:visited:not([class*='btn-esavo']) {
    color: #4e5fdf;
}

a:hover, a:focus {
    color: #009ee3;
}

h1, h2, h3 {
    color: black;
    font-family: escrow-banner, serif;
    font-weight: 800 !important;
}

h4, h5, h6 {
    color: black;
    font-family: mr-eaves-xl-sans, sans-serif;
}

@media only screen and (max-width:767px) {
    h1 {
        font-size: 2.4em !important;
    }
    
    h2 {
        font-size: 2em !important;
    }
}

/* -------------------- 1.2 PAINIKKEET -------------------- */

.homelink {
    transition: opacity .2s ease;
}

.homelink:hover, .homelink:focus {
    opacity: .8;
}

.btn-esavo {
    display: inline-block;
    background: #2d3887;
    color: white;
    font-weight: 700;
    padding: 10px 20px;
    text-decoration: none;
}

.btn-esavo:hover, .btn-esavo:focus {
    background: #009ee3;
    color: white;
    text-decoration: none;
}

/* -------------------------------------------- 2. RESPONSIIVISUUS -------------------------------------------- */

/* REVERSE COLUMNS */

@media only screen and (max-width: 991px) {
    .main-content {
        flex-direction: column-reverse !important;
    }
}

/* -------------------------------------------- 3. SAAVUTETTAVUUS -------------------------------------------- */

/* LINKIT ULOS */

a:not([href*='esavo.fi']):not([href^='#']):not([href='']):not([href^='/']):not([href^='mailto:']):not([href^='tel:']):not([id*='sisalto']):not([id*='hakemus']):not([href^='javascript']):not([data-year*='2']):not([class*='pull-']):not([class^='social-icon']):not([class^='linkbox-link']):not([class*='cc-dismiss']):not([class*='subnav-link']):not([class*='some-a']):not([class*='vetehiset_some']):not([class*='comments']):not([class*='llv_link']):not([class*='cc-allow']):not([class*='cc-deny'])::after {
    font: normal normal normal 1em FontAwesome;
    content: " \f08e";
}

a[href*='/resources/public/']:not([class^='lightbox-portfolio']):not([href*='AES']):after {
    font: normal normal normal 1em FontAwesome;
    content: " \f15b";
}

/* SUORAAN SISÄLTÖÖN */

.sisalto-linkki {
    position: absolute;
    left: -9999px;
}

.sisalto-linkki:focus, .sisalto-linkki:active {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #009ee3;
    color: white;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 1rem;
}

/* FONTIT */

.iso {
    font-size: 1.5rem;
}

.keski {
    font-size: 1.25rem;
}

.pieni {
    font-size: .95rem;
}

.valittu {
    text-decoration: underline !important;
    font-weight: 900;
}

/* FOCUS */

.btn.focus, .btn:focus {
    outline: 2px dotted #2d3887 !important;
    box-shadow: none;
}

a:focus, .linkbox-link:focus .linkbox {
    outline: 2px dotted #2d3887 !important;
}

#header .nav a:focus {
    outline: 0 !important;
}

#footer a:focus {
    outline: 2px dotted white !important;
}

.scroll-to-top:focus {
    outline: 2px dotted #fff !important;
}


/* -------------------------------------------- 4. HEADER -------------------------------------------- */
/* -------------------- 4.1 TOP HEADER -------------------- */

.topheader {
    padding: 30px 0;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 100%);
}

.logo img {
    transition: opacity .2s ease;
}

.logo:hover img, .logo a:focus img {
    opacity: .8;
}

.pcpalkki {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 25px;
}

.ylapalkki {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.ylapalkki a {
    color: #2d3887;
    font-weight: 600;
    font-size: 1.15em;
    text-decoration: none;
}

.ylapalkki a:hover, .ylapalkki a:focus {
    text-decoration: underline;
    color: #009ee3;
}

.ylapalkki a:visited {
    color: #2d3887;
}

.alapalkki {
    width: 100%;
}

.font span, .language span {
    margin-left: 5px;
}

.language {
}

@media only screen and (max-width:991px) {
    
    .topheader {
        padding: 20px 0 25px;
    }
    
    .pcpalkki {
        display: none;
        visibility: hidden;
    }
    
}

@media only screen and (max-width:575px) {
    
    .topheader {
        padding: 10px 0 15px;
    }
    
}

/* -------------------- 4.2 NAV -------------------- */

/* STICKY */

@media only screen and (min-width: 992px) {
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    #content.active {
      padding-top: 54px;
    }
}

@media only screen and (min-width:992px) {
    #header nav a[href*='/etusivu']:not(.koti-ikoni), #header nav a[href*='/home']:not(.koti-ikoni) {
        display: none !important;
        visibility: hidden;
    }
}

.navigointi {
    background: #2d3887;
    background: -moz-linear-gradient(180deg, rgba(53,67,167,1) 0%, rgba(45,56,135,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(53,67,167,1) 0%, rgba(45,56,135,1) 100%);
    background: linear-gradient(180deg, rgba(53,67,167,1) 0%, rgba(45,56,135,1) 100%);
}

.headlink a {
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

@media only screen and (min-width:992px) {
    #header .nav > li > a {
        color: white;
        font-size: 1.25em;
        font-weight: 700;
        height: 100%;
        padding: 15px;
        display: block;
        text-decoration: none;
    }
}

#header .nav > li > a:hover, #header .nav > li > a:focus {
    background: #009ee3;
    text-decoration: none;
    color: white;
}

#header .nav > li > .dropdown-toggle i {
    display: inline-block;
    margin-left: 10px;
}

#header .nav .dropdown.show > .dropdown-toggle > .fa-caret-right {
    transform: rotate(90deg);
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:focus {
    background: #f3f3f3;
}

.dropdown-menu li:not(:last-child) {
    border-bottom: 2px solid #f3f3f3;
}

/* -------------------- 4.3 MOBIILINAV -------------------- */

.dropdown-menu {
    font-size: inherit;
}

.mobile-nav-list {
    border-bottom: 5px solid #2d3887;
}

@media only screen and (min-width: 992px) {
    .mobile-nav-list {
        display: none;
        visibility: hidden;
    }
}

.mobiletop {
    border-bottom: 2px solid #efefef;
}

.mobiletop a {
    text-decoration: none;
}

.mobiletop .font {
    text-align: right;
}

.mobiletop .search {
    margin-top: 20px;
    border-left: 7px solid #c8e1fa;
}

@media only screen and (max-width: 991px) {
    
    .navigointi {
        padding-top: 5px;
    }
    
    .font span, .language span {
        margin-left: 15px;
    }
    
    .language span:first-child {
        margin-left: 0px;
    }
}

@media only screen and (max-width: 575px) {
    .language {
        padding-left: 15px;
    }
    
    .font {
        padding-right: 15px;
    }
    
    #header .header-nav-mobile {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    #header .header-nav-mobile nav {
        margin: 20px 0 1px;
    }
    
    .mobiletop .search {
        border-top: 2px solid #efefef;
    }
    
    .mobiletop .col-6, .mobiletop .col-12 {
        padding: 0;
    }
    
    .mobiletop .row {
        margin: 0;
    }
}

.mobnav-item {
    border-bottom: 2px solid #f3f3f3;
}

.mobile-nav-list .nav > li:last-child .mobnav-item {
    border: 0;
}

.mobile-nav-list .opened > .mobnav-item > .dropdown-toggle > .fa-caret-right {
    transform: rotate(90deg);
}

/* -------------------- 4.4 SUBMENU -------------------- */

.submenu a:visited {
    color: black;
}

.submenu {
    margin-top: 29px;
}

.dropdown.show > .subnav-item .fa-caret-right {
    transform: rotate(90deg);
}

.subnav-item {
    border-bottom: 2px solid #f3f3f3;
}

.submenu .nav > li:first-child > .subnav-item {
    border-top: 2px solid #f3f3f3;
}

.top-page .subnav-link {
    font-weight: 700;
}

.subnav-link {
    display: block;
    position: relative;
    border-left: 7px solid #c8e1fa;
    padding: 15px 55px 15px 15px;
    font-size: 1.15em;
    color: black;
    font-weight: 400;
    text-decoration: none;
}

.subnav-link.active {
    background: #f3f3f3;
    border-color: #2d3887;
}

.subnav-link:hover, .subnav-link:focus {
    color: black;
    background: #f3f3f3;
    text-decoration: none;
}

.subnav-toggle {
    position: absolute;
    top: 0;
    right: 0px;
    padding: 15px 24px;
    display: block;
    font-size: 1.3em;
    background: #2d3887;
    color: white !important;
}

.submenu .nav li:first-child .subnav-toggle {
    top: 2px;
}

.subnav-toggle:hover, .subnav-toggle:focus {
    background: #009ee3;
    color: white;
}

.dropdown.show > .subnav-list {
    display: block;
}

.dropdown .subnav-list {
    display: none;
}

.subnav-list ul {
    padding-left: 20px;
    list-style: none;
}

@media only screen and (max-width: 991px) {
    .submenu {
        display: none;
        visibility: hidden;
    }
}

/* -------------------------------------------- 5. FOOTER -------------------------------------------- */


#footer .footer-nav-main .nav > li:first-child {
    display: none;
    visibility: hidden;
}

.footer-submenu li {
    max-width: 100% !important;
    padding: 0;
}

#footer p {
    margin: 0;
}

#footer a:hover, #footer a:focus {
    color: #d4d4d4;
    text-decoration: underline;
}

#footer a:visited {
    color: #fff;
}

.alafooter a, .alafooter p {
    text-decoration: none;
    font-size: .9em;
}

.ylafooter {
    background: rgb(0,128,59);
    background: -moz-linear-gradient(180deg, rgba(0,128,59,1) 0%, rgba(0,91,56,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0,128,59,1) 0%, rgba(0,91,56,1) 100%);
    background: linear-gradient(180deg, rgba(0,128,59,1) 0%, rgba(0,91,56,1) 100%);
    padding: 60px 0 70px;
}

.alafooter {
    background: rgb(0,0,0);
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,1) 100%);
    padding: 30px 0;
}

#footer .footer-submenu li a {
    padding: 4px 0;
    color: white;
    display: block;
    text-decoration: none;
    font-weight: 400;
}

.footer-submenu {
    padding: 8px 0 0;
}

.copyright p {
    color: white;
}

.some-a {
    margin: 0 5px;
    font-size: 1.25em !important;
}

@media only screen and (min-width:768px) {
    .copyright {
        text-align: right;
    }

    .some {
        text-align: center;
    }
}

@media only screen and (max-width:767px) {
    .copyright {
        margin-top: 10px;
    }
}

@media only screen and (max-width:991px) {
    .footer-submenu {
        display: none;
        visibility: hidden;
    }
    
}

/* -------------------------------------------- 6. SIVUKOHTAISET -------------------------------------------- */

/* -------------------------------------------- 7. MODUULIT -------------------------------------------- */

/* ROWS */

@media (max-width:991px) {
    .flex-column-reverse {
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important;
    }
}

/* JAKO ALUE */

.share_area {
    border-top: 1px solid #2d3887;
    padding-top: 30px;
    margin-top: 20px;
}

/* KALENTERI */

.responsive-calendar .day.active a:hover {
    background-color: #AFCA0B !important;
}

.responsive-calendar .day.active a {
    background-color: #008244!important;
    color: #fff !important;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #000;
    background-color: #008244;
    border-color: #008244;
}

/* HAKU */

.form-control:focus {
    box-shadow: none !important;
    background: #f3f3f3 !important;
    outline: 2px dotted #303b91;
}

.form-control {
    background: #f3f3f3;
    border: 0;
}

.input-group-btn {
    position: relative;
    z-index: 1;
}

.search .btn-default {
    font-weight: 700;
}

.search button {
    background: #2d3887;
    color: white;
}

.search button:hover, .search button:focus {
    background: #009ee3;
}

.search i {
    margin-left: 5px;
}

.searchitem-title {
    font-size: 1.5em;
}

.searchitem {
    margin-bottom: 20px;
}

.searchitem-txt {
    display: none;
}

/* aes_nav */

.aes-nav {
    display: flex;
}

.aes-nav__link {
    text-decoration: none;
    color: white;
}

.aes-nav__link:hover {
    color: white !important;
}

.aes-nav__item {
    flex: 1 1 auto;
    text-align: center;
}

.aes-nav__content {
    color: white;
    padding: 20px 0;
    font-size: 1.5rem;
    position: relative;
}

.aes-nav__active {
    position: absolute;
    color: white;
    font-size: .75rem;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
}

/* aes_link */

.aes-link__content {
    height: 200px;
    color: white;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aes-link__link {
    text-decoration: none;
    color: white;
}

.aes-link__link:hover {
    color: white !important;
}

.aes-link {
    position: relative;
}

.aes-link__image {
    position: absolute;
    width: 115px;
    inset: auto 0 0 auto;
}

/* aes_hero */
.aes-hero {
    height: 650px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.aes-hero__content {
    flex: 1 1 auto;
}

.aes-hero h1 {
    color: white;
    text-shadow: 0px 0px 20px #0000008a;
}

.aes-hero__comments {
    padding: 30px;
    background: white;
}

.aes-hero__comment {
    margin-bottom: 15px;
}

.aes-hero__comment-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.aes-hero__comment-image {
    flex: 0 1 70px;
    border-radius: 50px;
    overflow: hidden;
}

.aes-hero__comment-contact p {
    margin: 0;
}

.aes-hero__icon-wrapper {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.aes-hero__icon {
    width: 250px;
}

/* aes_kuva */

.aes-kuva {
    padding-top: 56%;
    background-size:cover;
    background-position:center;
    position: relative;
}

.aes-kuva__icon-img {
    position: absolute;
}

#aes-kuva__icon--vesi {
    bottom: 0;
    left: -50px;
    height: 175px;
}

#aes-kuva__icon--metsa {
    bottom: -7px;
    right: 0;
    height: 275px;
}

#aes-kuva__icon--ruoka {
    bottom: -5px;
    right: -70px;
    height: 215px;
}

/* -------------------------------------------- 8. LISÄOSAT -------------------------------------------- */

/*EMBED RESPONSIVELY */

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Powr.io */

@media only screen and (min-width: 1200px) {
    .mobile-feed {
        display: none;
        visibility: hidden;
    }
}

@media only screen and (max-width: 1200px) {
    .pc-feed {
        display: none;
        visibility: hidden;
    }
}

/* EVÄSTEINFO */

.cc-link:hover, .cc-link:focus {
    color: #009ee3 !important;
}
.cc-link {
    color: #2d3887 !important;
    opacity: 1 !important;
}

.cc-dismiss {
    text-decoration: none;
}

.cc-dismiss:hover, .cc-dismiss:focus {
    background: #009ee3 !important;
    opacity: 1 !important;
}

/* SOCIAL SHARE */

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block;
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 10px 10px 10px 0;
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top;
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle;
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}