:root {
    --bs-body-font-family: Arial, sans-serif;
    --bs-body-color: #000000;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    font-family: "Arial Black", sans-serif;
    letter-spacing: -1px;
}

h1 {
    margin: 0 0 2rem;
}

h2 {
    margin: 1.5rem 0;
}

h3 {
    margin-bottom: 1.5rem 0;
}

h4 {
    margin-bottom: 1.5rem 0;
}

ul,
ol {
    margin: 0 0 1rem;
}

h5 {
    margin-bottom: 0;
}

p {
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
@media (max-width: 559px) {
    .hero-title h1{
        font-size: 2rem!important;
    }
}
@media (min-width: 560px) {
    h2 {
        font-size: 2.75rem;
    }
}
@media (min-width: 560px) {
    #etusivunhero h1{
        font-size: 3rem!important;
    }
}
html {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.navbar a {
    font-family: Arial, sans-serif;
}

p {
    display: block;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
a {
    color: #3279a6;
}
.navbar {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.active a{
    font-weight: bold;
}
.active{
    font-weight: bold;
}
.navbar-nav {
    font-size: 1.125rem;
    justify-content: flex-end;
}

.navbar-nav a {
    color: #000000;
}

.offcanvas {
    background: #6293bb;
}

.offcanvas-header {
    justify-content: flex-end;
}

.offcanvas-header button {
    color: #ffffff;
}

.show .navbar-nav a {
    color: #ffffff;
    font-size: 1.125rem;
}

.show .navbar-nav {
    padding: 3rem;
}

.show .navbar-nav li {
    padding: 0.75rem 0;
}

.show .navbar-nav li {
    border-bottom: 1px solid #ffffff;
}

#logo {
    font-size: 2rem;
    font-weight: 700;
    font-family: "Arial Black", sans-serif;
    color: #4d5b6e;
}

.navbar-toggler-icon {
    color: #6293bb
}

.navbar-toggler:focus {
    box-shadow: none;
}

.container {
    max-width: 87rem;
}

footer {
    background: #6293bb;
}

.site-footer {
    justify-content: space-between;
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-bottom: 0!important;
}

.site-footer .branding {
    font-weight: 700;
    font-family: "Arial Black", sans-serif;
    display: block;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.333333;
}

.site-footer .nav {
    justify-content: flex-end;
}

.site-footer a {
    color: #000000;
    font-size: 1.125rem;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
}

.site-footer li {
    margin-right: 1.5rem;
}

.hero-title h1 {
    font-size: 4rem;
}
#hero #etusivunhero{
    color: #000000;
}
.hero-pattern {
    background-image: url(../images/hero-pattern.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 50%;
    width: auto;
    height: 100%;
    transform: scaleX(-1);
}

.hero-image img {
    width: 100%;
    height: auto;
}

#logot {
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}
.row{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#logot img {
    width: 100%;
    height: auto;
}

@media (min-width: 1120px) {
    #logot img {
        max-width: 10rem;
    }
}

.content-column {
    margin-bottom: 3rem;
    box-shadow: 4px 9px 10px rgb(0 0 0 / 12%);
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    height: 100%;
}

.column-text {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.main {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.hero-title {
    font-weight: 700;
    line-height: 1.125;
    flex-grow: 1;
    margin-bottom: 0;
    color: #4d5b6e;
}
.hero-date{
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (min-width: 560px) {
    h1.hero-title {
        font-size: 3rem;
    }
}

@media (min-width: 1120px) {
    h1.hero-title {
        font-size: 4rem;
    }
}

.hero-image-small{
    height: 5rem;
}
@media (min-width: 1120px){
    .hero-image-small{
        height: 13rem;
    }
}
.figcaption{
    color: #888;
    display: block;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    font-weight: bold;
    text-align: center;
}
.media{
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.media-text{
    padding: 3rem;
}
.media-text a{
    font-weight: bold;
}
.link-column img{
    max-width: 10rem;
    margin-left: auto;
    margin-right: auto;
}
.link-column-text h3{
    border-bottom: 2px solid #6293bb;
    padding-bottom: 0.75rem;
}
.blogikirjasto a{
    text-decoration: none;
    color: #000000;
}
.blogikirjasto a:hover{
    color: #6293bb;
}
.blogikirjasto .row{
    margin-bottom: 3rem;
}
.page-item.active .page-link {
    background: #6293bb;
    border-color: #6293bb;
}
.social-share {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
@media (min-width: 560px){
    .social-share {
        font-size: 1.25rem;
    }
}
.social-sharing a{
    transition: background .2s ease-in-out;
    display: inline-block;
    color: #fff;
    vertical-align: top;
    padding: 0.75rem;
    line-height: 0;
    margin: 0.5rem 0.5rem 0 0;
    position: relative;
    text-decoration: none;
}
.sharing-link-facebook{
    background: #3b5998;
}
.sharing-link-facebook:hover{
    background: #2e4677;
}
.sharing-link-twitter{
    background: #00aced;
}
.sharing-link-twitter:hover{
    background: #008bbf;
}
.sharing-link-linkedin{
    background: #007bb6;
}
.sharing-link-linkedin:hover{
    background: #005c88;
}
.sharing-link-whatsapp{
    background: #36b74d;
}
.sharing-link-whatsapp:hover{
    background: #2c943e;
}
.social-sharing .icon{
    width: 1.125rem;
    height: 1.125rem;
}
.social-sharing{
    padding-top: 1.5rem;
}
.dropdown-toggle::after{
    border: none!important;
}
.dropdown-toggle svg{
    height: 1em;
    width: 1em;
}
@media (min-width: 992px){
    .dropdown-menu{
        background: #000000!important;
    }
}
.dropdown-menu{
    background: transparent;
    border: none;
}
.dropdown-menu:before{
    border-width: 0 0.4rem 0.4rem 0.4rem;
    border-color: transparent transparent #000 transparent;
}
.dropdown-menu .dropdown-item{
    color: #ffffff;
}
@media (min-width: 992px){
    .dropdown-menu .dropdown-item:hover{
        background: #0f0f0f;
    }
}
figcaption{
    text-align: center;
    color: #888;
    display: block;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
}
.img-fluid{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.rounded-image{
    border-radius: 9999px;
}