body::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: #fff;        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: #1c1c1c;    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 1px solid #fff;  /* creates padding around scroll thumb */
  }
  .fw-bolder {
    font-weight: bolder !important;
  }
  .lato{
      font-family: 'Lato', sans-serif; 
  }
  .montserrat{
      font-family: 'Montserrat', sans-serif; 
  }
  
  #artikkeli{
      margin-left: 20%;
      flex-direction: row; 
      padding-bottom: 25vh; 
  }
  
  @media screen and (max-width: 900px) {
  
  #artikkeli{
      margin-top: 0 !important;
      margin-left: 0 !important; 
      flex-direction: column !important;
  }
  
  .card-client{
      width: 300px !important; 
      height: auto !important;
      margin-top: 50px;
      transform: translateX(0%);
      display: none; 
    
  }
  #Tekstit{
      margin-top: 0 !important; 
      display: flex; 
      flex-direction: column; 
      gap: 25px; 
      min-width: 90% !important; 
      
  }
  
  }
  
  #flag{

    font-size: 15px;
    transition-duration: .1s; 

  }

#flag:first-of-type{margin-right: 15px;}


li a{
  white-space: nowrap !important; 
  font-size: 20px !important; 
}


  #dropdownlink {
    font-size: 15px !important;
  }





@media screen and (max-width: 900px){
.navbar-brand{
display: none !important; 
}



.navbar-brand-mobile{
display: block; 

}

}

@media screen and (min-width: 900px){
.navbar-brand{
display: block; 
}

.navbar-brand-mobile{
display: none; 
}

.navbar-brand:hover{
transform: translatey(-3px) !important
}

.site-navbar{
white-space: nowrap !important;
}

}

            
             
            
.active1:after{
  content: '';
    width: 100%;
    background-color: var(--white)  ;
    position: relative;
    display: block;
    height: 2px;
    margin-top: 2px;
    box-shadow: 0px 1px 15px #ccc;
    z-index: 1999;     
     transition-duration: .1s;
       border-radius: 15px;
  
}

.active1:hover.active1:after{
  content: "";
    width: 100%;
    background-color: var(--orange)  ;
    position: relative;
    display: block;
    height: 2px;
 
    margin-top: 2px;
    box-shadow: 0px 0px 15px var(--orange);
    z-index: 1999;
    transition: all .1s;

  
}   
@media screen and (min-width: 1000px) {    
.active1{
color: #fff !important;
}
}  

  @media screen and (max-width: 900px) {
    .active1:after{
      display: none !important; 
      visibility: hidden !important; 
    }
         .active1{
             color: #222; 
         }
  }
  
  #Henkilöcard{
    min-width: 500px; min-height: 400px; border-radius: 5px;  user-select: none ;  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -700%);  z-index: 9999; display: flex ; flex-direction: row !important; justify-content: space-between !important ; align-items: center;    
  }
  #cardImage{ width: auto; max-height: 500px; margin-left: -15px !important }
@media screen and (max-width: 999px) {
  #Henkilöcard{
    display: grid !important;
    place-items: center !important; 
    min-width: 90%; 
    min-height:  96%;
    max-width: 95% !important;
    max-height: 99% !important;
    overflow: scroll !important;
  }
  #scrollDownCard{
  display: block !important;
  
}
#Henkilöcard{ -webkit-overflow-scrolling: touch !important;}

  #cardImage{ 
    margin-top: 55px; 
    width: 70%; 
    height: auto; 
  

  }
  .card-body{
  min-width: 100% !important; 
  }
}
#scrollDownCard{
  display: none;
}
.Aboreto{
    font-family: 'Quicksand', sans-serif !important;
}

.spinner {
  --red: #d62d20;
  --blue: #0057e7;
  --green: #008744;
  --yellow: #ffa700;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999 !important;
  width: 60px;

}

.spinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.circular {
  -webkit-animation: rotate73451 2s linear infinite;
          animation: rotate73451 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite;
          animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate73451 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate73451 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes dash0175 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes dash0175 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@-webkit-keyframes color7123 {
  100%, 0% {
    stroke: var(--primary);
  }

  40% {
    stroke: var(--primary);
  }

  66% {
    stroke: var(--primary);
  }

  80%, 90% {
    stroke: var(--primary);
  }
}

@keyframes color7123 {
  100%, 0% {
    stroke: var(--primary);
  }

  40% {
    stroke: var(--primary);
  }

  66% {
    stroke: var(--primary);
  }

  80%, 90% {
    stroke: var(--primary);
  }
}

body, html{
  overflow-x: hidden !important; 

}

.thumb-content a{
  color: var(--orange);
}
.thumb-content a:hover{
  color: var(--white);
}
#footerlinkki{
color: var(--orange); 
}

#footerlinkki:hover{
color: var(--light);
transition-duration: .1s; 
}

.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right; background: #7f7f7f;}