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

/* runko */
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

body {
   font-family: 'Questrial', Arial, sans-serif;
   font-size: 180%;
   margin-top: 0px;
}


header {
   padding: 0px !important;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: 0px !important;
   width: 100% !important;
   max-width: 100% !important;
   border: none !important;
   border-radius: 0px !important;
   background-color: transparent !important;
   color: #fff;
}

div.main-container {
   width: 100% !important;
   margin-top: 0px;
   margin-bottom: 350px;
   background-color: #494949ab;
   /*backdrop-filter: grayscale(100%);*/
   padding: 30px;

}

div.main-container .row {
   background-color: #fff;
   /*border: 2px solid #bbb;*/
   max-width: 1620px !important;
   margin: auto;
   padding: 20px 10px;
}

section.col-sm-9,
section.col-sm-12 {
   padding: 20px;
}

footer {
   width: 100% !important;
   background-color: #0057a3;
   border-top: none !important;
   margin: 0px !important;
   border-bottom: 15px solid #fff;
   color: #fff;
   padding: 0px;
}

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

.footer {
   padding-top: 0px !important;
}

.region-footer {
   margin: 30px 30px 0px 30px;
}

.region-footer .field {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   width: 100%;
   max-width: 1620px;
   margin: auto;
}


/* ylapalkki */
.navbar {
   display: block;
}

.path-frontpage .navbar {
/*min-height: 70vh;*/
   min-height: 70vh;
   display: table;
}

.navbar-header {
   height: fit-content;
   width: 100%;
   justify-content: center;
   display: flex;
   flex-wrap: wrap;
   background-color: #494949ab;
   /*backdrop-filter: grayscale(100%);*/
}

.region-navigation-collapsible {
   display: table;
   height: 100%;
   width: 100%;
}

.region-navigation {
   height: fit-content;
   max-width: 1620px !important;
}

.navbar-header .region {
   width: 100%;
   display: block;
   margin: 0px;
   padding: 0px 0px;
}

.navbar-toggle {
   height: fit-content;
}

.navbar-text {
   float: left;
   color: #fff !important;
   font-style: italic;
   position: absolute;
   margin: 0px;
   margin-top: 0px;
   margin-left: 90px;
   margin-top: 35px;
}

.navbar-brand {
   float: left;
   font-size: 180%;
   padding: 0px;
   position: absolute;
   margin-top: 10px;
   margin-left: -100px;
}

.navbar .logo {
   margin: 0px;
   padding: 5px;
   margin-left: 20px;
   margin-right: 105px;
}

.logo img {
   height: 55px;
   width: auto;
}

ul.menu--ylavalikko {
   display: flex;
   float: right;
   padding: 0px 15px;
}

ul.menu--ylavalikko li {
   color: #fff;
   display: flex;
   margin: 0px 4px;
   padding: 5px;
}

ul.menu--ylavalikko li a {
   background-color: #407c40;
   color: #fff;
}

ul.menu--ylavalikko li a:hover,
ul.menu--ylavalikko li a:focus {
   text-decoration: underline;
   position: relative;
   left: 0px;
   /*animation: react 0.2s ease-in-out 0s 1 normal forwards;*/
   background-color: #286090 !important;
}

ul.menu--ylavalikko li svg.ext {
   fill: #fff !important;
}

#search-block-form {
   width: 200px;
   float: right;
   padding: 10px 10px 0px 10px;
}

#block-textresize {
   padding: 5px;
   width: fit-content;
   float: right;
   margin-top: 5px;
   margin-right: 20px;
   display: flex;
}

#block-textresize::before {
   content: 'Tekstikoko';
   padding: 5px 10px 5px 10px;
}

#text_resize_increase {
   width: 28px !important;
   height: 28px !important;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>') !important;
   background-size: cover !important;
   margin: 4px !important;
   background-color: #407c40 !important;
}

#text_resize_decrease {
   width: 28px !important;
   height: 28px !important;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/></svg>') !important;
   background-size: cover !important;
   margin: 4px !important;
   background-color: #407c40 !important;
}

#text_resize_decrease:hover,
#text_resize_decrease:focus-visible,
#text_resize_increase:hover,
#text_resize_increase:focus-visible {
   background-color: #286090 !important;
}

/* ylavalikko */
#block-ylavalikko .active-trail a {
   background-color: #407c40 !important;
}

#block-ylavalikko a.is-active {
   color: #fff !important;
}

.dropdown-menu {
   font-size: 100%;
}

.dropdown-menu>li>a {
   white-space: normal;
}

#navbar-collapse {
   display: flex !important;
   padding: 0px !important;
   width: 100% !important;
   height: 100% !important;
}

.path-frontpage #navbar-collapse {
   display: table-row !important;
}

#block-merijarvibs-main-menu {
   justify-content: center;
   display: flex;
   background-color: #0057a3;
   width: 100%;
   border-top: 15px solid #fff;
}

#block-merijarvibs-main-menu .dropdown.open a.dropdown-toggle {
   background-color: #407c40 !important;
}

#block-merijarvibs-main-menu li a.active-trail {
   background-color: transparent;
}

#block-merijarvibs-main-menu li a.is-active,
#block-merijarvibs-main-menu li a.dropdown-toggle.active-trail {
   background-color: #004480;
   color: #fff !important;
}

.navbar-nav li a {
   line-height: 1.5 !important;
}

.navbar-nav li:hover a {
   color: #fff !important;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
   background-color: #004480 !important;
   color: #fff !important;
}

.navbar-nav li:hover .dropdown-menu a {
   color: #000 !important;
}

.navbar-nav li .dropdown-menu a.is-active {
   color: #0057a3 !important
}

.dropdown-menu {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   column-count: 4;
   column-rule: 2px solid #bbb;
   border: 2px solid #bbb;
}

.dropdown-menu li a {
   color: #000 !important;
}

.dropdown-menu li ul li a {
   color: #000 !important;
   font-size: 90%;
}

.dropdown-menu li ul li {
   padding-left: 15px !important;
}

.dropdown-menu li ul li.last {
   padding-bottom: 15px !important;
}

.dropdown-menu li.dropdown ul.dropdown-menu {
   display: contents;
}

.sf-depth-1 .sf-clone-parent {
   display: none !important;
}

.sf-depth-2 .sf-clone-parent {
   display: block !important;
}

@keyframes drop {
   0% {
      z-index: 999;
      transform: scaleY(0);
   }

   100% {
      transform: scaleY(1);
   }
}

.open .dropdown-menu {
   display: block;
   width: 80vw;
   margin: 0px 10vw;
   padding: 10px;
   animation: drop 0.2s ease-in-out 0s 1 normal forwards;
   transform-origin: top center;
}

.open .dropdown-menu .dropdown {
   display: inline flow-root list-item;
}

#navbar-collapse .active-trail a {
   background-color: #004480;
}

#navbar-collapse ul.dropdown-menu li a.is-active {
   color: #fff !important;
   background-color: #004480 !important;
}

#navbar-collapse ul.dropdown-menu li a {
   background-color: transparent !important;
   color: #000 !important;
}

.nav>li>a:focus,
.nav>li>a:hover {
   background-color: transparent !important;
}

@keyframes react {
   0% {
      left: 0px;
   }

   50% {
      left: 5px;
   }

   100% {
      left: 0px;
   }
}

.region-sidebar-second .nav li a:hover,
.region-sidebar-second .nav li a:focus,
#navbar-collapse ul.menu li a:hover,
#navbar-collapse ul.menu li a:focus {
   background: #407c40 !important;
   color: #fff !important;
   text-decoration: underline;
   position: relative;
   left: 0px;
   animation: react 0.2s ease-in-out 0s 1 normal forwards;
}


/*info banneri*/
#block-infobanneri {
   padding: 5px;
   margin: 0px 0px 10px 0px;
   background: #fff;
}

#block-infobanneri .field--name-body {
   text-align: center;
   color: #000;
}

#block-infobanneri .field--name-body a {
   color: #0057a3 !important;
}

/* slogan */

@keyframes drop2 {
   0% {
      opacity: 0;
      transform: scaleX(0);
   }

   100% {
      opacity: 1;
      transform: scaleX(1);
   }
}

#block-kansislogan {
   display: table-row;
   width: 100%;
   height: 100%;
}

#block-kansislogan .field--name-body {
   display: inline-flex;
   height: 100%;
   width: 100%;
   opacity: 0;
}

#block-kansislogan .field--name-body div {
   font-family: 'Times New Roman', Times, serif;
   padding: 60px;
   background-color: #494949ab;
   font-size: 250%;
   border: 2px solid #fff;
   width: fit-content;
   animation: drop2 0.5s ease-in-out 0s 1 normal forwards;
   transform-origin: left center;
   margin: auto;
   /*backdrop-filter: grayscale(100%);*/
}

/* sisalto */
.quick_item h3,
.quick_item_blue h3 {
   margin-top: 0px;
}

a {
   color: #0057a3;
}

a:hover,
a:focus {
   color: #0057a3;
   text-decoration: underline !important;
}

a:focus-visible {
   outline: 5px solid red !important;
}

.row a,
.row a:hover,
.row a:focus {
   color: #0057a3;
}

header a {
   color: #fff !important;
}

.contextual-links a {
   color: #000 !important;
}

article .field--name-body {
   margin: 20px 0px;
}

article .content img {
   max-width: 100%;
   height: auto !important;
}

hr {
   color: #000 !important;
   border-top: 1px solid #000;
}

.page-header {
   border-bottom: 1px solid #000;
}

.well {
   background-color: transparent !important;
   border: none !important;
   padding: 0px !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

article {
   margin-bottom: 20px;
}

.material-icons {
   position: relative;
   top: 4px;
}

.control-label {
   font-weight: normal;
}

.region-footer .field div {
   padding: 15px;
   width: 50%;
   margin: 0px auto;
   max-width: 400px;
}

.quick_links {
   background-color: #0057a3;
   color: #fff;
   display: flex;
   margin: 4px;
   padding: 15px;
}

.quick_links_green {
   background-color: #407c40;
   color: #fff;
   display: flex;
   margin: 4px;
   padding: 15px;
}

.quick_links a,
.quick_links_green a {
   color: #fff !important;
}

.quick_links svg.ext,
.quick_links_green svg.ext {
   fill: #fff;
}

.quick_links:hover a,
.quick_links:hover p,
.quick_links_green:hover a,
.quick_links_green:hover p {
   text-decoration: underline;
   position: relative;
   left: 0px;
   /*animation: react 0.2s ease-in-out 0s 1 normal forwards;*/
}

.quick_links:hover i {
   position: relative;
   left: 0px;
   animation: react 0.2s ease-in-out 0s 1 normal forwards;
}

.fc-view-container a {
   color: #fff !important;

}

.btn {
   border-radius: 0px !important;
   border: none !important;
   background-color: #407c40;
   color: #fff;
}

.btn:hover,
.btn:focus {
   background: #286090;
   text-decoration: underline;
}

.btn-default:hover {
   color: #bbb;
   text-decoration: underline;
}

.form-control {
   border-radius: 0px !important;
   border: 1px solid #ddd !important;
   /*height: 32px !important*/
   ;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span,
.pagination>li:last-child>a,
.pagination>li:last-child>span {
   border-radius: 0px !important;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
   background-color: #326132 !important;
   border-color: #fff !important;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover,
.pagination>li>a,
.pagination>li>a,
.pagination>li>span,
.pagination>li>span {
   color: #fff !important;
   background-color: #407c40 !important;
   border-color: #fff !important;
}

.table-responsive {
   border: 2px solid #bbb
}

.js-drupal-fullcalendar {
   background-color: #407c40;
   border: 2px solid #bbb;
   padding: 15px;
   color: #fff;
}


.fc-button-primary {
   background-color: #356135 !important;
   border-bottom: 4px solid transparent !important;
   border-left: none !important;
   border-top: none !important;
   border-right: none !important;
   margin: 2px !important;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-popover .fc-header {
   background: #356135 !important;
}

.fc-button-active {
   border-bottom: 4px solid #fff !important;
}

.fc-today {
   background: #3f713f !important;
   border-right: 1px solid #ddd !important;
}

.fc-content {
   background: #356135 !important;
}

.fc-event {
   background: #356135 !important;
   border: 1px solid #fff !important;
   border-radius: 0px !important;
}

.fc-button-group {
   flex-wrap: wrap;
}

.fc-center {
   padding: 0px 5px;
}

.fc-button {
   border-radius: 0px !important;
   padding: 8px !important;
}

/* alavalikko*/
.region-sidebar-second nav {
   margin: 0px;
}

.region-sidebar-second nav-menu {
   margin-bottom: 0px !important;
   padding-bottom: 10px;
}

.region-sidebar-second nav .nav li {
   width: 100%;
   margin: 2px 0px;
}

.region-sidebar-second nav .nav li a {
   color: #fff;
   background-color: #0057a3;
}

.region-sidebar-second nav .nav li .dropdown-menu a {
   background-color: transparent;
}

.region-sidebar-second nav .nav li .dropdown-menu a.is-active {
   background-color: #004480;
}

.region-sidebar-second nav .nav li .dropdown-menu a.is-active {
   color: #fff !important;
}

.region-sidebar-second nav .nav li .dropdown-menu {
   display: contents;
}

.region-sidebar-second nav .nav li .dropdown-menu li {
   padding: 0px 5px;
   background-color: #fff !important;
}

.region-sidebar-second nav .nav li .dropdown-menu li.first {
   border-top: 2px solid #000;
   padding-top: 2px;
}

.region-sidebar-second nav .nav li .dropdown-menu li.last {
   border-bottom: 2px solid #000;
   padding-bottom: 2px;
}

.region-sidebar-second nav .nav li .dropdown-menu li a {
   font-weight: normal !important;
   color: #000;
}

.region-sidebar-second nav .nav li.active-trail {
   /*background-color: #004480 !important;*/
}

.region-sidebar-second nav .nav a.is-active {
   color: #fff !important;
   background-color: #004480;
}

.region-sidebar-second nav .nav li a {
   padding-top: 10px;
   padding-bottom: 10px;
}


/* quicktabs ja tapahtumat */
#quicktabs-pikavalinnat {
   border: 2px solid #bbb;
   background-color: #f5f5f5;
}

#block-merijarvibs-views-block-tapahtumat-block-2 {
   background-color: #407c40;
   color: #fff;
   font-weight: normal !important;
   padding: 15px;
   border: 2px solid #bbb;
}

#quicktabs-tab-pikavalinnat-0 a {
   background-color: #2d7c2d;
   border-bottom: 8px solid #444;
}

#quicktabs-tab-pikavalinnat-1 a {
   background-color: #597a59;
   border-bottom: 8px solid #444;
}

#quicktabs-tab-pikavalinnat-2 a {
   background-color: #356135;
   border-bottom: 8px solid #444;
}

#quicktabs-tab-pikavalinnat-3 a {
   background-color: #538853;
   border-bottom: 8px solid #444;
}

ul.quicktabs-tabs {
   background-color: transparent;
   display: flex !important;
   flex-wrap: wrap;
   padding: 0px !important;
   background-color: #bbb;
}

ul.quicktabs-tabs li {
   display: block !important;
   width: fit-content;
   margin: 4px;
   padding: 0px !important;
}

ul.quicktabs-tabs li a {
   font-size: 100%;
   color: #fff;
   display: block !important;
   padding: 12px 17px 8px 17px;
}

ul.quicktabs-tabs li a:hover,
ul.quicktabs-tabs li a:focus-visible,
ul.quicktabs-tabs li.active a:hover,
ul.quicktabs-tabs li.active a:focus-visible {
   text-decoration: underline;
   position: relative;
   left: 0px;
   /*animation: react 0.2s ease-in-out 0s 1 normal forwards;*/
   background-color: #286090 !important;
   border-color: #004480 !important;
}

ul.quicktabs-tabs li a::before {
   content: 'â–º ';
}

ul.quicktabs-tabs .active a {
   color: #fff !important;
}

ul.quicktabs-tabs li.active a {
   border-bottom: 8px solid #fff !important;
}

@keyframes animation {
   0% {
      opacity: 0;
      top: 50px;
   }

   100% {
      opacity: 1;
      top: 0px;
   }
}

#quicktabs-container-pikavalinnat .quicktabs-tabpage .views-element-container {
   opacity: 0;
   animation: drop2 0.5s ease-in-out 0s 1 normal forwards;
   transform-origin: left center;
}

#quicktabs-container-pikavalinnat .view-footer,
.view-tapahtumakalenteri .view-footer,
#block-views-block-tapahtumat-block-1 .view-footer {
   display: flex;
   justify-content: center;
}

#quicktabs-pikavalinnat .views-row {
   flex: 1 1 0;
}

#quicktabs-pikavalinnat .views-row .views-field {
   display: block;
   width: 100%;
   height: 100%;
   margin: auto;
   max-width: 370px;
   min-width: 299px;
   padding-bottom: 15px;
}

#quicktabs-pikavalinnat .view-content {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

#block-merijarvibs-views-block-tapahtumat-block-2 .view-content {
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
   background-color: #f5f5f5;
   margin: -15px -15px;
   padding: 15px;
   border-top: #326132 solid 15px;
}


#quicktabs-pikavalinnat a,
#block-merijarvibs-views-block-tapahtumat-block-2 .view-content a {
   color: #fff;
}

#block-merijarvibs-views-block-tapahtumat-block-2 .form-item {
   padding: 5px
}

.view-id-tapahtumat time:nth-child(even) {
   display: none;
}

.view-id-tapahtumat .form-item {
   padding: 5px 0px;
}

.view-id-tapahtumat .form-item:first-child {
   padding-top: 0px;
}

.view-id-tapahtumat .form-actions {
   padding: 5px 0px 0px 0px;
}

#block-merijarvibs-quicktabspikavalinnat {
   padding: 20px 0px;
}

.quick_item {
   margin: 10px;
   background-color: #407c40;
   color: #fff;
   transform: scale(0.98);
   font-size: 90%;
   line-height: 1.3;
   height: 100%;
}

.quick_item_blue {
   margin: 15px;
   background-color: #0057a3;
   color: #fff;
   width: auto;
   transform: scale(0.98);
   max-width: 360px;
   font-size: 90%;
   line-height: 1.3;
}

@keyframes scale {
   0% {
      transform: scale(0.98);
   }

   100% {
      transform: scale(1);
   }
}

.quick_item:hover {
   animation: scale 0.2s ease-in-out 0s 1 normal forwards;
}

.quick_item_image {
   width: auto;
   height: 200px;
}

.quick_item img,
.quick_item_blue img {
   width: 100%;
   height: 100%;
   object-fit: cover !important;
}

.quick_item_content {
   padding: 15px;
   border-top: 10px solid #326132;
}

.quick_item_content_dark {
   padding: 15px;
   background-color: #326132;
}

.quick_item_content_blue {
   padding: 15px;
   border-top: 10px solid #004480;
}

.quick_item_content_dark_blue {
   padding: 15px;
   background-color: #004480;
}

/*table*/
.field--name-body table {
   overflow: auto;
   width: fit-content;
   max-width: 100%;
   display: block;
   height: auto;
   border: 2px solid #bbb;
}

.field--name-body th,
th.views-field {
   background: #407c40;
   color: #fff;
}

.field--name-body td,
.field--name-body th {
   padding: 3px;
   border-bottom: 0px solid;
   border-top: 0px solid;

}

.field--name-body tbody tr:nth-child(even) {
   background: #f9f9f9;
}

.field--name-body tr:hover {
   background-color: #f5f5f5;
}

.more-link {
   width: fit-content;
   margin: 10px auto;
   margin-bottom: 15px !important;
}

.more-link a {
   display: block;
   background-color: #407c40;
   color: #fff;
   padding: 10px 15px;
}

.region-sidebar-second .more-link a {
   background-color: #0057a3;
}

.more-link a:hover,
.more-link a:focus {
   color: #fff;
   position: relative;
   left: 0px;
   /*animation: react 0.2s ease-in-out 0s 1 normal forwards;*/
   background-color: #286090 !important;
}

.region-sidebar-second .more-link a:hover,
.region-sidebar-second .more-link a:focus {
   background-color: #407c40 !important;
}

.region-sidebar-second .view-content a:hover,
.view-content a:focus {
   text-decoration: underline !important;
   text-decoration-color: #fff !important;
}

.region-sidebar-second .views-row{
	min-width: 100%;
}
.region-sidebar-second .quick_item_blue,
.region-sidebar-second .quick_item {
   margin-left: 0px;
   margin-right: 0px;
}

h3,
.h3 {
   font-size: 22px;
}

.breadcrumb li.active {
   display: none;
}

.breadcrumb li{
	font-size: 90%;
}

.search-help-link{
	display: none;
}

body:not(.user-logged-in) .form-item-status-value{
	display: none;
}

/* mobiilinakyma */
@media screen and (min-width: 2000px) {
   .open .dropdown-menu {
      margin: 0px 20vw !important;
      max-width: 60vw !important;
   }
}

@media screen and (min-width: 3000px) {
   .open .dropdown-menu {
      margin: 0px 30vw !important;
      max-width: 40vw !important;
   }
}

@media screen and (min-width: 1141px) {
   #block-mainnavigation-2 {
      display: none !important;
   }
}

@media screen and (max-width: 1450px) {
   .col-sm-9 {
      width: 65%;
   }

   .col-sm-3 {
      width: 35%;
   }

   #navbar .nav li {
      max-width: 200px;
      height: 100%;
   }

   #navbar .nav li a {
      height: 100%;
   }
}

@media screen and (max-width: 1250px) {
   div.main-container {
      padding: 10px 30px;
   }

   .region-footer {
      margin: 30px 10px 0px 10px;
   }
}

@media screen and (max-width: 1140px) {
   body .dialog-off-canvas-main-canvas {
      font-size: 90% !important;
   }

   div.main-container {
      padding: 10px 10px;
   }

   .quick_item {
      margin: 15px 0px;
   }

   .logo {
      padding: 5px !important;
      margin-right: 100px;
   }

   #block-merijarvibs-main-menu {
      display: none !important;
   }

   #block-mainnavigation-2 {
      display: flow-root;
      padding: 0px;
      background-color: #0057a3;
      border-top: 5px solid #fff;
   }

   #superfish-main {
      display: none;
   }

   #superfish-main-toggle span {
      display: none !important;
   }

   #superfish-main-toggle {
      display: block !important;
      height: 35px;
      width: 40px;
      margin: 5px !important;
      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>');
      background-size: contain;
      float: right;
   }
   #superfish-main-toggle.sf-expanded{
      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>');
   }

   #superfish-main-accordion li.active-trail {
      border-left: 10px solid #366836;
   }

   #superfish-main-accordion li a.is-active {
      background-color: #407c40;
   }

   .sf-sub-indicator {
      font-size: smaller !important;
   }

   #superfish-main-toggle.sf-expanded {
      background-color: #004480 !important;
   }

   a.sf-depth-1 {
      background-color: #004b8d !important;
   }

   a.sf-depth-2 {
      padding: 18px 37px !important;
   }

   a.sf-depth-3 {
      padding: 18px 52px !important;
   }

   a.sf-depth-4 {
      padding: 18px 67px !important;
   }

   a.sf-depth-5 {
      padding: 18px 82px !important;
   }

   #superfish-main-accordion,
   #superfish-main-accordion a {
      background-color: #0057a3;
      color: #fff !important;
   }

   .container-fluid>.navbar-collapse,
   .container-fluid>.navbar-header,
   .container>.navbar-collapse,
   .container>.navbar-header {
      margin-right: 0px !important;
      margin-left: 0px !important;
   }

   .navbar-header .region {
      padding: 0px;
      display: inline-block !important;
   }

   .navbar-header {
      border-bottom: none;
      padding: 0px;
   }

   #block-ylavalikko {
      display: none !important;
   }

   #block-views-block-tapahtumat-block-1 .view-content {
      display: flex;
      flex-wrap: wrap;
   }

   #block-views-block-tapahtumat-block-1 .view-row {
      width: fit-content;
   }

   .quick_item {
      margin: 10px;
   }

   #block-infobanneri {
      margin: 0px 0px 10px 0px;
   }

   .region-footer .field div {
      width: 100%;
   }

}

@media (min-width: 768px) {
   .region-sidebar-second nav .nav li a {
      padding-top: 15px;
      padding-bottom: 15px;
   }
}

@media screen and (max-width: 767px) {
   body .dialog-off-canvas-main-canvas {
      font-size: 80% !important;
   }

   #block-merijarvibs-main-menu {
      display: none !important;
   }

   .col-sm-9 {
      width: 100%;
   }

   .col-sm-3 {
      width: 100%;
   }

   #navbar-collapse {
      display: block;
   }

   .main-container {
      margin-top: 0px !important;
   }

   #block-kansislogan .field--name-body div {
      font-size: 190%;
      padding: 30px;
   }

   div.main-container .row {
      padding: 15px;
   }

   .dropdown-menu {
      column-count: 1 !important;
   }

   .dropdown-menu li a,
   .dropdown-menu li ul li a {
      /*color: #fff !important;*/
   }

   #block-merijarvibs-main-menu {
      display: block;
   }

   ul.menu--ylavalikko {
      display: block;
   }

   button.navbar-toggle {
      display: none;
   }

   div.main-container {
      padding: 10px 0px;
   }

   section.col-sm-9,
   section.col-sm-12 {
      padding: 10px;
   }

   .region-footer {
      margin: 30px 0px 0px 0px;
   }

   .region-sidebar-second .quick_item_blue,
   .region-sidebar-second .quick_item {
      margin-left: auto;
      margin-right: auto;
   }

   .quick_item_blue,
   .quick_item {
      max-width: 500px;
   }
}