/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@300;600&display=swap');

/*BODY*/
body {
    margin-top: 0px;
    font-size: 1.8em;
    font-family: "Asap", Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

/*HEADER*/
.navbar.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0px;
    padding: 0px;
    background-color: #3bbbc6;
}

.navbar-header {
    max-width: 1140px;
    width: 100%;
    padding: 0px 15px;
}

.navigation_highlighted {
    width: 100%;
    min-height: 0px;
    height: auto;
    background-color: #fff;
}

.sievi-loves-container {
    display: flex;
    flex-wrap: wrap;
}

.sievi-loves {
    font-size: 50px;
    font-weight: bold;
    text-transform: uppercase;
    color: #00953f;
}

.sievi-loves-heart {
    font-size: 0px;
    display: block;
    height: 70px;
    width: 70px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="red" class="bi bi-suit-heart-fill" viewBox="0 0 16 16"><path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
}

.navbar-header input.form-search {
    width: 100px;
    transition: width 1s;
}

.navbar-header input.form-search.search-expanded {
    width: 300px;
}

.region-navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.navbar-header .block-superfish {
    width: fit-content;
}

.navbar-header .form-group {
    margin-bottom: 0px;
}

.navbar-header a,
.navbar-header a:hover,
.navbar-header a:focus {
    color: #000;
}

.navbar-brand {
    color: #000 !important;
    font-weight: bold;
    font-size: 28px;
}

.navbar-header .block-superfish ul.sf-menu ul li {
    background-color: #1f6166;
}

.navbar-header .block-superfish ul.sf-menu li:hover>ul,
ul.sf-menu li.sfHover>ul {
    top: 80px;
}

.navbar-header .block-superfish ul.sf-menu ul li:hover>ul,
ul.sf-menu ul li.sfHover>ul {
    top: 0px;
}

.navbar-header .block-superfish a.sf-depth-1 {
    font-weight: bold;
}

.navbar-header .block-superfish ul.sf-menu .sf-clone-parent a.sf-depth-1 {
    font-weight: normal;
}

.navbar-header .block-superfish ul.sf-menu li.sf-depth-1 {
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
}

.navbar-header .block-superfish ul.sf-menu ul li.sf-depth-1 {
    border: none;
}

.navbar-header .block-superfish ul.sf-menu li.active-trail.menuparent {
    border-bottom: 10px solid #2c8086;
}

.navbar-header .block-superfish ul.sf-menu li.sf-depth-1.active-trail {
    border-bottom: 10px solid #1f6166;
}

.navbar-header .block-superfish ul.sf-menu ul li.sf-depth-1.active-trail {
    border: none;
}

.navbar-header .block-superfish ul.sf-menu ul a.sf-depth-1.is-active:not(.menuparent),
.navbar-header .block-superfish ul.sf-menu ul a.sf-depth-2.is-active,
.navbar-header .block-superfish ul.sf-menu ul a.sf-depth-3.is-active,
.navbar-header .block-superfish ul.sf-menu ul a.sf-depth-4.is-active {
    background-color: #2c8086;
}

ul.sf-menu a.sf-depth-1,
ul.sf-menu span.nolink.sf-depth-1 {
    padding: 1.5em;
}

ul.sf-menu ul a.sf-depth-1,
ul.sf-menu ul span.nolink.sf-depth-1,
ul.sf-menu ul a.sf-depth-2,
ul.sf-menu ul span.nolink.sf-depth-2,
ul.sf-menu ul a.sf-depth-3,
ul.sf-menu ul span.nolink.sf-depth-3,
ul.sf-menu ul a.sf-depth-4,
ul.sf-menu ul span.nolink.sf-depth-4 {
    padding: 1em 1.5em !important;
    color: #fff;
}

ul.sf-menu ul a.menuparent {
    font-weight: bold;
}

.navbar-header .block-superfish ul.sf-menu .sf-sub-indicator::after {
    left: 7px;
    top: 3px;
    font-size: 13px;
}

.navbar-header .block-superfish #superfish-main-toggle span {
    font-size: 0px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');
    height: 50px;
    width: 50px;
    display: block;
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
}

.navbar-header .block-superfish #superfish-main-toggle.sf-expanded span {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>');
}

.btn {
    border-radius: 0px;
    border-color: #ddd;
    background-color: #1f6166;
}

.btn:focus,
.btn:hover {
    background-color: #154649;
    border-color: #ddd;
}

.form-control,
.form-control:focus {
    border-color: #ddd;
    border-radius: 0px;
}

.flexslider {
    border: none;
}

.flex-control-nav {
    bottom: 0px !important;
    z-index: 99;
    display: flex;
    justify-content: center;
}

.flex-direction-nav a.flex-prev::before {
    font-size: 0px;
    width: 35px;
    height: 35px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #2f2f2f;
    border: 0px solid #000;
    border-radius: 50%;
    padding-top: 30px;
}

.flex-direction-nav a.flex-next::before {
    font-size: 0px;
    width: 35px;
    height: 35px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #2f2f2f;
    border: 0px solid #000;
    border-radius: 50%;
    padding-top: 30px;
}

.flex-control-nav li {
    margin: 0px !important;
    padding: 10px 6px !important;
}

.flex-direction-nav a::before {
    padding: 4px;
}

.flex-caption {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #fff;
    border: 10px solid #fff;
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: rgb(255, 255, 255);
    border-top: none;
    border-radius: 0px 0px 0px 15px;
}

.flexslider .slides img {
    height: 450px !important;
    object-fit: cover;
    max-width: 1200px;
    margin: auto;
}

.block-views-blockylakuva-block-1 {
    height: fit-content;
    max-width: 1200px;
    margin: auto;
}

/*MAIN*/
ul.menu--main {
    display: flex;
    flex-wrap: wrap;
    border-left: 10px solid #00953f;
}

ul.menu--main li {
    width: 100%;
}

ul.menu--main li a {
    color: #000;
}

ul.menu--main .dropdown-menu {
    position: relative;
    top: 0px;
    display: block;
    width: 100%;
    box-shadow: none;
    border-left: none;
    border-right: none;
    padding-top: 0px;
    padding-bottom: 0px;
}

ul.menu--main .dropdown-menu>li>a {
    padding: 8px 20px;
}

ul.menu--main a.is-active {
    font-weight: bold;
    color: #00953f;
    background-color: transparent;
}

ul.menu--main a.is-active:hover,
ul.menu--main a.is-active:focus,
ul.menu--main a:focus,
ul.menu--main a:hover {
    color: #fff;
    background-color: #00953f;
}

.region-sidebar-second {
    box-shadow: 0px;
    background-color: transparent;
    border: none;
}

.page-node-type-page .block-views-blockylakuva-block-2 {
    display: none;
}

.page-node-type-page .block-views-blockylakuva-block-1 .block-views-blockylakuva-block-2 {
    display: block;
}

/*FOOTER*/
footer {
    width: 100% !important;
    background-color: #3bbbc6;
}

.region-footer {
    max-width: 1170px;
    margin: auto;
}

#block-alatunniste .field a {
    color: #000 !important;
}

.footer-left {
    float: left;
}

.footer-right {
    float: right;
}

.facebook-link {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-facebook" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/></svg>');
    background-size: 40px;
    background-position: left;
    background-repeat: no-repeat;
    height: 45px;
    width: auto;
    /*font-size: 0px;*/
    display: flex;
    padding-left: 45px;
}

.instagram-link {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/></svg>');
    background-size: 40px;
    background-position: left;
    background-repeat: no-repeat;
    height: 45px;
    width: auto;
    /*font-size: 0px;*/
    display: flex;
    padding-left: 45px;
}

.sievi-link {
    background-image: url('/sites/muttimarkkinat.fi/files/sievi_logo.png');
    height: 120px;
    width: 200px;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0px;
    display: flex;
}

/*cookies*/
.eu-cookie-compliance-banner button.button,
.eu-cookie-compliance-banner button.find-more-button {
    text-decoration: none;
    text-shadow: none;
    background: #5db350;
    color: #000;
    min-height: 40px;
    border: 1px solid #333;
    border-radius: 2px;
    padding: 0 0.625rem;
}

.eu-cookie-withdraw-tab {
    color: #fff !important;
}

.eu-cookie-compliance-banner button.button:hover,
.eu-cookie-compliance-banner button.find-more-button:hover,
.eu-cookie-compliance-banner button.button:focus,
.eu-cookie-compliance-banner button.find-more-button:focus {
    opacity: 1;
    color: #fcfcfc !important;
    background: #828282;
}

.eu-cookie-compliance-banner button.button {
    font-weight: normal;
    font-family: inherit;
}

.eu-cookie-compliance-message p {
    display: inherit;
}

@media screen and (max-width: 1000px) {
    .flexslider .slides img {
        height: 390px !important;
    }
}

@media screen and (max-width: 768px) {
    .navbar.container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .region-navigation {
        align-items: start;
    }

    .navbar-header {
        padding: 0px;
    }

    .navbar-header .block-superfish {
        width: 100%;
        order: 2;
    }

    .navbar-header .block-superfish ul.sf-menu {
        display: flex;
        flex-wrap: wrap;
    }

    .navbar-header .block-superfish ul.sf-menu.menu,
    .navbar-header .block-superfish ul.sf-menu.menu ul,
    .navbar-header .block-superfish ul.sf-menu.menu li {
        width: 100%;
    }

    ul.sf-menu a.sf-depth-1,
    ul.sf-menu span.nolink.sf-depth-1 {
        padding: 1em 1.5em;
    }

    .navbar-header .block-superfish .sf-accordion-toggle {
        width: 100%;
        display: block;
        height: 50px;
        background-color: #154649;
    }

    .navbar-header .block-superfish #superfish-main-toggle {
        float: right;
    }

    .navbar-header .block-superfish ul.sf-menu li.sf-depth-1 {
        border-left: 15px solid transparent;
        border-top: none;
        border-bottom: none;
    }

    .navbar-header .block-superfish ul.sf-menu ul li.sf-depth-1 {
        border: none;
    }

    .navbar-header .block-superfish ul.sf-menu li.sf-depth-1.active-trail {
        border-left: 15px solid #1f6166;
        border-bottom: none;
    }

    .navbar-header .block-superfish ul.sf-menu ul li.sf-depth-1.active-trail {
        border: none;
    }

    .navbar-header .block-superfish ul.sf-menu li.active-trail.menuparent.sf-expanded {
        border-bottom: none;
    }

    .flex-caption h2 {
        font-size: 90%;
    }

    .flex-caption h3 {
        font-size: 80%;
    }

    .flex-caption p {
        font-size: 70%;
    }

    .flexslider .flex-direction-nav a,
    .flexslider .flex-direction-nav a {
        display: block;
    }

    .flexslider .slides img {
        height: auto !important;
        width: 100% !important;
    }

    .flex-control-nav {
        display: none;
    }

    .flex-caption {
        display: none;
    }

    .flexslider {
        margin-bottom: 10px;
    }
}