@font-face {font-family: 'Barlow Condensed'; src: url('BarlowCondensed-Regular.ttf'); }

@font-face {font-family: 'Barlow Condensed'; src: url('BarlowCondensed-SemiBold.ttf'); font-weight: 600; }



/*-------------------------------------------------------------*/
/*                                                             */
/*                Tyylitiedosto, joulukuu 2025                 */
/*                                                             */
/*                       www.lumiini.net                       */
/*                                                             */
/*-------------------------------------------------------------*/


:root {
  --color1: #ffffff;
  --color2: #e7e7f0;
  --color3: #0000ff;
  --color4: #404040;
  --color5: #487a93;
  --color6: #f0f0f0;
  --color7: #9898e4;
  --color8: #5050ff;
  --color9: #8585a7;
  --color10: #c2c2d9;
  --color11: #ebc42c;
  --color12: #99af90;
  --color13: #f0ede9;
  --vali:  20px;
  --vali2: 60px;
  --padding-ya: 50px;
}



body { font-size: 20px; margin: 0; padding: 0; font-family: 'Barlow Condensed', 'sans-serif'; inline: unset; background: #fafbfa;
       overflow-x: hidden; }

img { width: 100%; }

img.logo { width: 110px; }

h1, h2, h3, h4, h5, h6, h7 { color: #536640; font-weight: 600; margin: 0px; text-align: center;
                             letter-spacing: 0px; padding-bottom: 0.5em; padding-top: 1em; }

h1 { font-size: 4rem; }  /* 17 - 21 - 28 - 38 - 50 */
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }

p, input, textarea { line-height: 1.5; color: #303030; margin: 0px; text-align: justify; padding-bottom: 0.5rem;
                     letter-spacing: 0.2px;  }

a { color: #4a4a4a; text-decoration: none; font-weight: 600;  }


    
.rajaus { max-width: 900px; margin-right: auto; margin-left: auto; padding-left: 20px; padding-right: 20px;  }

#header, .tekstijakuva, .banneri, .galleria, .lomake, .footer { padding: 0rem; }

#header { background: --color12; }


#menux {
  overflow: auto;
  background: #ffffff;
  margin-bottom: 0px; box-shadow: 0px 3px 3px rgba(115, 115, 115, 0.1); position: relative; z-index: 999;
  position: sticky; top: 0; left: 0; right: 0;
}

#menux a {
  font-size: 1rem;
  float: left;
  display: block;
  color: #536640;
  text-align: center;
  margin-right: 00px;
  padding: 15px;
  text-decoration: none;
  transition: 0.1s background;
  font-weight: normal;
}



#menux a:hover { background-color: #e4e0cd; transition: background-color 0.3s; border: 0px 1px 0px 1px solid #909090;
                }

@media (max-width:700px) { #menux a { float: none; border-bottom: 1px solid #d6d0b6; margin: 0px; line-height: 1rem; }
                           a.piilo { display: none!important; color: #f00!important; }
}


.kuva_ja_teksti { background-image: url('./kuvat/soffa-3.jpg'); background-size: 100% 100%; height: 550px;
         background-position: left;
	     background-repeat: no-repeat;
         background-size: cover;
         background-attachment: relative;
         margin: 0px;
         overflow-x: hidden;
}
.kuva_ja_teksti p { display: inline-block; font-size: 1.5rem; color: #222; padding: 8px 17px 8px 17px; margin-top: 70px;
                    margin-left: 0%; margin-right: 0%; text-align: center; border: 2px solid #fff; letter-spacing: 3px;
                    text-shadow: 1px 1px 0px #f0f0f0a0; overflow-x: hidden;
}

         

#steps {  }

#steps p { padding: 0px; }

   
.teksti { }

.teksti a { border-bottom: 2px solid transparent; transition: border-bottom 0.3s; }
.teksti a:hover { border-bottom: 2px solid #6b714d; transition: border-bottom 0.3s; }

.tekstijakuva { background: var(--color13); }
.tekstijakuva img { }
.tekstijakuva p { text-align: left; margin-top: 1rem; }
.tekstijakuva h3 {  }

.banneri { background: #9bae93; text-align: center; padding-top: 30px; padding-bottom: 30px; border-radius: 10px; }
.banneri p { font-size: 1.5rem; color: #ffffff; text-align: center; padding-left: 40px; padding-right: 40px; padding-bottom: 0rem; }

.lomake { }
.lomake p { }

.galleria { }

.footer { background: #2b2a29; background-image: url(''); background-repeat: repeat; }
.footer p, .footer a {display: block; padding: 0px; color: #828282; font-weight:normal; line-height: 1.5rem; }
.footer a:hover { }

.lumiini { background: #404040; padding: 0rem;  }
.lumiini p, .lumiini a { text-align: right; color: #c0c0c0; padding: 0px; }


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.grid-container-steps {
  display: grid;
  grid-template-columns: 31% 31% 31%;
  padding: 0px;
  grid-column-gap: 3.5%;
  grid-row-gap: 20px;
}

.grid-container-tekstijakuva {
  display: grid;
  grid-template-columns: 32% 66%;
  padding-bottom: var(--padding-ya); padding-top: var(--padding-ya);
  grid-column-gap: 4%;
}

.grid-container-galleria {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin-top: 2rem;
}


.grid-container-footer {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  padding: 0px;
  grid-column-gap: 1px;
  grid-row-gap: 20px;
  padding-top: var(--padding-ya);
  padding-bottom: var(--padding-ya);
}

    @media (max-width:900px)  { .grid-container { grid-template-columns: auto auto; }}
    @media (max-width:500px)  { .grid-container { grid-template-columns: auto; }}
    @media (max-width:900px)  { .grid-container-steps { grid-template-columns: auto; }}
    @media (max-width:800px)  { .grid-container-tekstijakuva { grid-template-columns: auto; }}
    @media (max-width:600px)  { .grid-container-galleria { grid-template-columns: auto  }}
    @media (max-width:800px)  { .grid-container-footer { grid-template-columns: auto; }}

    @media (max-width:900px)  { .kuva_ja_teksti { height: 450px; }}
    @media (max-width:800px)  { .kuva_ja_teksti { height: 350px; }}

    @media (max-width:1100px) { .kuva_ja_teksti p { line-height: 1.2rem; }}
    @media (max-width:900px)  { .kuva_ja_teksti p { margin-top: 70px; }}
    @media (max-width:800px)  { .kuva_ja_teksti p { margin-top: 40px; }}
    @media (max-width:700px)  { .kuva_ja_teksti p { margin-top: 40px; font-size: 1.2rem; width: 84%; }}
    @media (max-width:600px)  { .kuva_ja_teksti p { margin-top: 40px;  }}

    @media (min-width:800px)  { .tekstijakuva p { margin-top: 35px; }}
    
.grid-item {
  background-color: inherit;
  padding: 0px;
  text-align: center;
}

.grid-item-steps {
  background-color: #ffffff;
  padding: 0px;
  text-align: center;
  border: 3px solid #e6e6e6;
  border-radius: 2px;
  box-shadow: 0px 2px 5px #f0f0f0;
}
.grid-item-steps h4.otsikko { color: #fff; padding: 15px; text-align: center; text-shadow: none; border-radius: 2px 2px 0px 0px; margin: 6px; }
.grid-item-steps h2 { padding-bottom: 20px; text-align: center; text-shadow: none; color: #303030; transition: border-color 0.5s;  }
.grid-item-steps p { color: #111; padding: 15px; text-align: center; text-shadow: none; }

.grid-item-steps:hover { border-color: #536640; transition: border-color 0.5s; }

.grid-item-tekstijakuva {
  padding: 0px;
  margin-bottom: 0px;
  text-align: left;
}

.grid-item-galleria { background: #172533; height: 250px; overflow: hidden; }
.grid-item-galleria img { height: 250px; transition:transform 0.2s; }
.grid-item-galleria img:hover { transform:scale(1.1); }

.grid-item-footer {
  text-align: left; border-left: 0px solid #fff;
}


.grid-item-footer a, .grid-item-footer p { text-decoration: none; padding: 0px;}
.grid-item-footer h3 { padding: 0px; color: #ffffff; text-align: left; text-shadow: none; }


.nappi    { text-align: center; }

.nappi a,
.nappi input  { padding: 15px 30px 15px 30px; margin: 50px 0px 0px 0px; background: #ffffff; display: inline-block; color: #536640;
                border-radius: 2px; border: 4px solid #536640; font-size: 1.25rem; font-weight: 600; transition: 0.6s; box-shadow: none; }

.nappi a:hover,
.nappi input:hover { border: 4px solid #fefefe; transition: 0.6s; }

.paketit { text-align: left; border-left: 0px solid #fff; }

.lomake                     { margin-bottom: var(--padding-ya); margin-top: var(--padding-ya); }
input,textarea              { display: block; margin-bottom: 10px; margin-right: 20px; font-size: 18px; border: 3px solid; border-color: #e6e6e6;
                              border-radius: 2px; background: #f9f9f9; padding-left: 6px; }
.grid-item-form             { background: none; width: auto; }
.grid-container-form        { display: grid; grid-template-columns: 20% 70%; padding: 0px; grid-column-gap: 0px; grid-row-gap: 0px; }
.grid-item-form p           { line-height: 1.5rem; padding-right: 10px; margin-bottom: 5px;}
.grid-item-form input,
.grid-item-form textarea    { padding-bottom: 0px; width: 98%;  }
.nappi input                { width: 130px; padding: 10px 30px 10px 30px; margin-top: 20px; display: block; }
input:focus, textarea:active { border: 1px solid f00; }

@media (max-width:900px)    { .grid-container-form { grid-template-columns: 30% 70%; }}

.tilausteksti { margin-top: 3rem; margin-bottom: 3rem; }

.ukk h3 {text-align: left; }

.vali { height: 2rem; }

.grid-container-steps h2 {padding-top: 0px; }

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0px 3px 3px rgba(115, 115, 115, 0.1);
  position: sticky; top: 0; left: 0; right: 0;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #6b714d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {   background-color: #eff2e9; }

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #eff2e9;

}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* näkymä avattuna */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 20px;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}




/* #kehys { padding: 20px; background: #e0e0e0; margin: 5%; } */