/*  ---- SISÄLLYS ----------------------
            1. YLEISET HTML TYYLIT
                1.1 FONTIT
                1.2 PAINIKKEET
            2. SAAVUTETTAVUUS
            3. HEADER
            4. FOOTER
            5. SIVUKOHTAISET
            6. LISÄOSAT
---------------------------------------- */

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

body {
    overflow-x: hidden;
}

iframe {
    border: 0 !important;
}

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

.ingress {
    font-size: 20px;
    line-height: 25px;
    font-weight: 700;
}

.laiturilla-header {
    font-size: 4em;
}

p a {
    text-decoration: underline;
    font-weight: 500;
}

@media only screen and (max-width:768px) {
    
    .laiturilla-header {
        font-size: 2em;
    }
}

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

a:focus, input#q:focus, #searchForm button:focus {
    outline: 2px solid black !important;
}

#footer a:focus {
    text-decoration: underline !important;
    color: white !important;
}

.btn-laiturilla {
    background: black;
    color: white;
    padding: 15px 35px;
    font-size: 1.3rem;
    display: inline-block;
    transition: background .2s cubic-bezier(0.39,0.58,0.57,1), transform .2s cubic-bezier(0.39,0.58,0.57,1);
    text-decoration: none;
}

.btn-laiturilla:hover, .btn-laiturilla:focus {
    text-decoration: none;
    color: white;
    background: #002b75;
    transform: scale(.95);
}

/* -------------------------------------------- 2. SAAVUTETTAVUUS -------------------------------------------- */

/* 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: #002b75;
    color: white;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 1rem;
}

/* -------------------------------------------- 3. HEADER -------------------------------------------- */

/* ---- TOP HEADER ----- */

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-nav-main {
    margin-top: -20px;
}

/* SEARCH */

.header-search {
    width: 50%;
}

input#q {
    background: #f4fafd;
    border: 0;
}

#searchForm button {
    background: #f4fafd;
    color: #777777;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 991px) {
    .header-top {
        display: none;
    }
}

/* ---- BOTTOM HEADER ---- */

/* -- LOGO -- */

.logo {
    transition: opacity .2s ease, transform .2s ease;
}

.logo:hover {
    opacity: .8;
    transform: scale(.95);
}

/* -- NAVIGOINTI -- */

.header-contact {
    display: flex;
    align-items: center;
}
img.somelink__img {
    width: 20px;
}

.nav-a {
    display: block;
    font-family: "Montserrat";
    color: #2B2E34;
    font-size: .8rem;
    font-weight: 700;
}

.nav-a:hover {
    text-decoration: none;
}

.some-a {
    font-size: 1.5rem;
    margin-right: 15px;
}

.nav-li:hover > .nav-a, .nav-a:focus {
    color: white !important;
    background: #1e3152;
}

.headlink .nav-a {
    font-weight: 700 !important;
}

.headlink .nav-a i {
    display: none;
}

.dropdown-menu > .nav-li > .nav-a {
    font-size: 13px !important;
}

.dropdown-menu > .nav-li:hover > .nav-a {
    color: white !important;
}

/* ETUSIVUN PIILOTUS */
@media only screen and (min-width:992px) {
    nav a[href*='/etusivu'] {
        display:none;
    }
}

/* EU-logot */

.eu-logot {
    width: 230px;
}


#eu-logo {
  height: 55px;
}

#maakuntaliitto-logo {
  height: 55px;
}

.header__logot {
  display: flex;
  gap: 15px;
}

/* MOBILE NAVIGAATIO */

.mobile-btn {
    padding: 10px 25px;
}

@media (max-width:1200px) {
    .eu-logot {
        width: 140px;
    }
}

@media only screen and (max-width:991px) {
    .search {
        width: 100%;
        margin-bottom: 25px;
    }
    
    .eu-logot {
        width: 190px;
    }
}

@media (max-width:768px) {
    #maakuntaliitto-logo, #eu-logo {
      height: 40px;
    }
    
    .logo {
        width: 170px !important;
    }
}

@media (max-width:575px) {
    
    #maakuntaliitto-logo, #eu-logo {
      height: 25px;
    }
    
    .logo {
        width: 90px !important;
    }
}

/* -------------------------------------------- 4. FOOTER -------------------------------------------- */

@media only screen and (max-width: 991px) {
    .footer-nav-main {
        text-align: center;
    }
    
    .footer-nav-main li {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .mobile-center {
        text-align: center !important;
    }
    
    footer a {
        display: block;
    }
    
    footer a.mr-4 {
        margin: 0 !important;
    }
}

footer p {
    color: white !important;
    font-size: 14px !important;
}

footer .row {
    border-top: 2px solid white;
}

footer a {
    font-family: 'Montserrat', sans-serif;
}

/* -------------------------------------------- 5. SIVUKOHTAISET -------------------------------------------- */

/* -------------------- 5.1 LAITURILLA-SEUTU -------------------- */

.laiturilla-kartta {
    height: 50vh;
}

.previewblog-article:hover .btn-laiturilla, .previewblog-link:focus .btn-laiturilla {
    text-decoration: none;
    color: white;
    background: #1e3152;
    transform: scale(.95);
}

.previewblog-link:focus .previewblog-article {
    outline: 3px solid black;
}

/* -------------------------------------------- 6. LISÄOSAT -------------------------------------------- */

/* PARAXIFY */

@media only screen and (min-width: 1025px) {
    .paraxify {
      background-attachment: fixed;
      background-position: center center;
      background-size: cover;
    }
}

/* 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--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

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

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

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

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

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

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.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;
}