@charset "utf-8";

@font-face {
  font-family: GreatVibes;
  src: url("../fonts/Great_Vibes/GreatVibes-Regular.ttf");
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

body,
html {
  height: 100%;
  line-height: 1.8;
  background-color: #d7e4d7;
  overflow: hidden !important;
  overflow: auto !important;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: Arial;
}

p {
  font-family: arial;
  color: white;
  font-size: 1.2em;
}

li {
  display: inline;
  padding-right: 20px;
  color: white;
  font-family: Arial;
  font-size: 1.2em;
}

body::-webkit-scrollbar {
  display: none !important;
}

/* Small screen sidebar styling */
.w3-sidebar {
  background: #95b897;
  color: white;
  position: fixed !important;
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  width: 70% !important;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.w3-sidebar .w3-bar-item {
  padding: 15px;
  text-align: left;
}

.w3-sidebar .w3-bar-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.w3-sidebar .w3-dropdown-content {
  background: #95b897;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.w3-sidebar .w3-button {
  color: white;
  font-size: 1em;
  font-weight: bold;
}

.w3-sidebar .closebtn {
  font-size: 2em;
  margin: 10px;
  color: white;
  text-align: right;
}

/* Smooth slide animation */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Sidebar visibility transitions */
.w3-sidebar.open {
  animation: slideIn 0.3s forwards;
}

.w3-sidebar.close {
  animation: slideOut 0.3s forwards;
}

#nav {
  float: right;
  margin-top: 40px;
}

#myNavbar {
  background-color: #95b897;
  font-size: 1.2em;
  position: fixed;
  top: 0;
  transition: top 0.3s;
  overflow: visible;
}

#palvelutnappi {
  background-color: #95b897;
}

#logo {
  margin: 10px 0px 10px 25px;
}

#mySidebar {
  background-color: #95b897 !important;
}

#footer {
  background-color: #95b897;
}

#mYfooter {
  background-color: #95b897;
}

#footerLogo {
  float: left;
}

#nappi {
  background-color: #5b9364 !important;
}

#nappula {
  background-color: #5b9364 !important;
}

@media screen and (max-width: 768px) {
  #mYfooter {
    padding: 16px 8px;
    font-size: 14px;
  }

  #mYfooter img {
    margin: 10px auto;
    display: block;
  }

  #mYfooter p {
    text-align: center;
    margin: 0;
    line-height: 1.5em;
  }

  #mYfooter a {
    text-decoration: none;
  }

  #mYfooter a:hover {
    text-decoration: underline;
  }

  #mYfooter span {
    display: block;
    margin-top: 10px;
  }
}

/* Full height image header */
#etusivu {
  background-position: center;
  background-size: cover;
  background-image: url("../kuvat/etusivu.webp");
  min-height: 100%;
  filter: brightness();
  animation: fadeIn 3s;
}

#perhetyo {
  background-size: cover;
  background-image: url("../kuvat/perhetyo1.webp");
  min-height: 75%;
  filter: brightness();
  animation: fadeIn 3s;
}

#ammatillinentuki {
  background-position: top;
  background-size: cover;
  background-image: url("../kuvat/tukihenkilo.webp");
  min-height: 75%;
  filter: brightness();
  animation: fadeIn 3s;
}

#jalkihuolto {
  background-position: top;
  background-size: cover;
  background-image: url("../kuvat/jalkihuolto1.png");
  min-height: 75%;
  filter: brightness();
  animation: fadeIn 3s;
}

#nepsy {
  background-position: center;
  background-size: cover;
  background-image: url("../kuvat/nepsy1.webp");
  min-height: 75%;
  filter: brightness();
  animation: fadeIn 3s;
}

#tyontekijamme {
  background-position: center;
  background-size: cover;
  background-image: url("../kuvat/tyontekijamme.webp");
  min-height: 85%;
  filter: brightness();
  animation: fadeIn 3s;
}

#yhteystiedot {
  background-position: center;
  background-size: cover;
  background-image: url("../kuvat/Yhteystiedot.webp");
  min-height: 85%;
  filter: brightness();
  animation: fadeIn 3s;
}

#tietosuoja {
  background-position: center;
  background-size: cover;
  background-image: url("../kuvat/autumn.webp");
  min-height: 85%;
  filter: brightness();
  animation: fadeIn 3s;
}

/* Tehostettuperhetyo kuva */
.bgimg-2 {
  background-image: url("../kuvat/perhetyo2.webp");
  min-height: 70%;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Nepsy kuva */
.bgimg-3 {
  background-image: url("../kuvat/nepsy2.webp");
  min-height: 60%;
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media screen and (max-device-width: 430px) {
  .bgimg-2,
  .bgimg-3 {
    background-attachment: scroll;
  }
}

@media screen and (max-width: 1400px) {
  #etusivu {
    background-position: 20% bottom !important;
    background-size: cover;
  }

  #perhetyo {
    margin-top: 2%;
    background-size: cover;
    background-image: url("../kuvat/perhetyo1.webp");
  }
}

@media screen and (max-width: 1250px) {
  .slogan {
    color: white;
    font-family: greatvibes;
    font-size: 1em !important;
    margin-top: 80%;
  }
}

.otsikko {
  color: #5b9364 !important;
  font-size: 2em;
}

.slogan {
  color: white;
  font-family: greatvibes;
  font-size: 1.5em;
  margin-top: 80%;
}

.menu-icon-set {
  align-content: center;
}

.teksti {
  font-family: Arial;
  font-size: 1.3em;
  color: black;
}

.w3-bar w3-button {
  padding: 16px;
}

.w3-button:hover {
  background-color: #5b9364 !important;
}

.w3-dropdown:hover .w3-button {
  background-color: #95b897 !important;
}

.responsive-team-image {
  width: 100%;
  max-width: 653px;
  height: auto;
  padding-bottom: 15px;
}

/* The Overlay (background) */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}