/*-------------------------------------------------------------*/
/*                                                             */
/*                Tyylitiedosto, marraskuu 2020                */
/*                                                             */
/*                       www.lumiini.net                       */
/*                                                             */
/*-------------------------------------------------------------*/


:root {
  --valia: 20px;
  --b_radius: 3px;
}

@font-face {
    font-family: 'Lato';
    src: url(Lato-Regular.ttf); }    
    
body	{background-color: #74777e;
         background-image: url('kuvat/tausta2.png');
	     background-position: left top;
	     background-repeat: repeat;
         background-attachment: fixed;
         font-family: 'Lato', sans-serif;   	 
}

h1, h2, h3, h4, h5, h6 {font-family: 'Lato', serif; color: #ffffff; font-weight: normal; line-height: 1.5em;
                        margin: 0px; text-shadow: 0px 3px 3px rgba(26, 26, 26, 0.3); letter-spacing: 1px; margin-bottom: var(--valia); }
 
h1 { font-size: 35px; }
h2 { font-size: 29px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

#logo { display: inline-block; margin-top: 1em; padding: 10px 17px 10px 17px; height: 36px; border: 2px solid transparent; transition: 1.6s border; 
        border-radius: var(--b_radius);
}



#logo:hover { border: 2px solid orange; }

p 	{ font-weight: normal; font-size: 20px; color: #ffffff; margin: 0px; line-height: 1.5em; border-radius: var(--b_radius); margin-bottom: var(--valia);
      padding: 2em; background: rgba(20, 28, 44, 0.8);
}

P:hover { }

.kuvapaikka p > a::before {content: url('kuvat/peealku.png'); }

@media screen and (max-width:400px) { p { font-size: 18px }}

table.main	 {width: 100%; 
		      background: transparent;
		      text-align: left; 
		      }
                   
a:link { font-weight: bold; color: #d68600; text-decoration: none; outline: 0; font-size: 15px; }

a:visited { font-weight: normal; color: #d68600; text-decoration: none; }

a:hover { color: #808080; }

a.valkoinen { font-family: 'Lato', serif; background: rgba(250,250,250,0.87); padding-top: 10px; padding-bottom: 10px; border-radius: var(--b_radius);
              text-shadow: none; display: block; transition: 0.4s background-color; font-size: 20px; font-weight: bold; width: 100%; margin-bottom: var(--valia); 
              letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0px 0px 5px rgba(70,70,70,0.3);
}

.valkoinen:hover { background: rgb(35, 48, 73,0.9); color: #fff; }
              
.email { padding: 0.5em 1em 0.5em 1em; border-radius: var(--b_radius);text-shadow: none; display: inline-block;
         font-size: 20px; margin-bottom: var(--valia); transition: 0.4s color; transition: 0.4s background; }
         
a.email { color: #fff; } 

a.email:hover { color: orange; background: rgb(35, 48, 73,0.9); } 
    
.sisa        {max-width: 760px; margin-right: 20px; margin-left: auto; text-align: center;
              margin-top: 10%; margin-bottom: 0px;
              padding: 1em 5% 3em 5%; background: rgba(130,145,160,0.0); border-radius: 20px;
              border:  0px solid rgb(10,10,10); }
              
.sisa-koko   {max-width: 1200px; margin-right: auto; margin-left: auto; text-align: center;
              margin-top: 14%; margin-bottom: 0px;
              padding: 1em 5% 3em 5%; background: #ffffff; border-radius: 20px;
              border:  0px solid rgb(10,10,10); }

         
                            
.kuvapaikka { text-align: left; display: block; }

.kuvapaikka-asunnot { text-align: left; display: block; clear: both; }

img.vaaka { height: 100px; float: left; border: 2px solid #2b374d; border-radius: var(--b_radius); transition: border-color 0.3s; }

img.vaaka:hover { border-color: #ffffff; }

img.asunnot { height: 158px; width: 158px; float: left; padding: 2px; border: 0px solid #2b374d; border-radius: var(--b_radius); }

img.asunnot:hover { filter: grayscale(1); transition:filter 0.3s; }


.kuvapaikka > p { margin-left: 90px; font-size: 17px;  }

.sisa-valikko a { display: inline-block; border-bottom: 1px solid #d68600; font-size: 18px; 
	              padding: 12px 2px 12px 60px; margin-left: 0%; transition: 0.2s color;
	              position: fixed; top: 10px;
}
        
.sisa-valikko a:hover {color: #fff; }


@media screen and (max-width:700px) { .valkoinen { width: 90%; font-size: 20px; }}
@media screen and (max-width:1200px) { .sisa { margin-right: auto; padding: 1em 5px 3em 5px } .sisa-valikko a {position: relative; top: 0px; }}    

@media (min-width: 200px) { img.asunnot { height: 100px; width: 48%; }}
@media (min-width: 320px) { img.asunnot { height: 106px; width: 31%; }}
@media (min-width: 360px) { img.asunnot { height: 120px; width: 32%; }}
@media (min-width: 480px) { img.asunnot { height: 160px; width: 32%; }}
@media (min-width: 600px) { img.asunnot { height: 148px; width: 24%; }}
@media (min-width: 640px) { img.asunnot { height: 148px; width: 148px; }}
@media (min-width: 720px) { img.asunnot { height: 148px; width: 148px; }}