
/* muotoilutiedosto */


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


body {margin: 0; padding: 0; font-family: 'Poppins', 'Ubuntu mono'; inline: unset; }

img { width: 100%; }

h1, h2, h3, h4, h5, h6, h7 { color: var(--color5); font-weight: bold; margin: 0px; text-align: center;
                             letter-spacing: 0px; text-shadow: 0px 3px 4px #a8c7ce; padding-bottom: 0.5em; }

h1 { font-size: 50px; color: #ffffff; }  /* 17 - 21 - 28 - 38 - 50 */
h2 { font-size: 38px; }
h3 { font-size: 28px; }
h4 { font-size: 21px; }

p { font-size: 17px; line-height: 1.5; color: #303030; margin: 0px; text-align: left; padding-bottom: 0.5em;  }

a { font-size: 17px; color: #528097; text-decoration: none; font-weight: bold;  }


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

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

#header { background: --color12; }


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

#menu a {
  font-size: 17px;
  float: left;
  display: block;
  color: var(--color5);
  text-align: center;
  margin-right: 00px;
  padding: 15px;
  text-decoration: none;
  transition: 0.1s background;
  font-weight: normal;
}

#menu a:hover { background-color: var(--color13);; transition: background-color 0.3s; border: 0px 1px 0px 1px solid #909090;
                }

@media (max-width:700px) { #menu a { float: none; border-bottom: 1px solid #91d6d1; margin: 0px; }}


.kuva_ja_teksti { background-image: url('./kuvat/soffa.jpg'); background-size: 100% 100%; height: 500px; text-align: right; overflow: hidden;
         background-position: left;
	     background-repeat: no-repeat;
         background-size: cover;
         background-attachment: relative;         
}
.kuva_ja_teksti p { width: 50%; float: right; font-size: 1.5em; color: var(--color5); padding: 20px; margin-top: 110px; border-left: 1px solid #ffffff; text-align: left; }

         

#steps {  }

#steps p { padding: 0px; }

   
.teksti { margin-bottom: var(--padding-ya); margin-top: var(--padding-ya); }

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

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

.banneri { background: #6c8fa1; text-align: center; padding-top: var(--padding-ya); padding-bottom: var(--padding-ya);  }
.banneri p { font-size: 1.5em; color: #ffffff; text-align: center; padding: 0px;   }

.lomake { }
.lomake p { }

.galleria { }

.footer { background: #6c8fa1; }
.footer p, .footer a {display: block; padding: 0px; color: #f0f0f0; font-weight:normal; line-height: 1.5em; }
.footer a:hover { }

.lumiini { background: #404040; padding: 0em;  }
.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: auto auto auto;
  padding: 0px;
  grid-column-gap: 20px;
  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: 2em;
}


.grid-container-footer {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  padding: 0px;
  grid-column-gap: 20px;
  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 { width: 40%; font-size: 1.3em; line-height: 1.4em; padding-right: 20px;  }}
    @media (max-width:900px)  { .kuva_ja_teksti p { width: 35%; margin-top: 100px; }}
    @media (max-width:800px)  { .kuva_ja_teksti p { width: 40%; margin-top: 25px; }}
    @media (max-width:700px)  { .kuva_ja_teksti p { width: 35%; margin-top: 25px; }}
    @media (max-width:600px)  { .kuva_ja_teksti p { display: none; }}

    @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: 1px solid #e0e0e0;
  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; }
.grid-item-steps p { color: #111; padding: 15px; text-align: center; text-shadow: none; }
.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; color: #fff; }
.grid-item-footer h3 { padding: 0px; color: #ffffff; text-align: left; text-shadow: none; }


.nappi    { text-align: center; }

.nappi a  { padding: 15px 30px 15px 30px; margin: 50px 0px 0px 0px; background: #ffffff; display: inline-block; color: #a29775;
            border-radius: 10px; border: 4px solid #aea588; font-size: 1.25em; font-weight: 600; transition: 0.6s; }

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

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


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


