/* Runko */

body {font-size: 20px;font-color: #00000;font-family:karmina, utopia-std sans-serif;background-color: white;overflow: auto;}

html{height: 100%;}

#fontq {font-family: Quiche Sans Bold;}
#fontu {font-family: utopia-std sans-serif;}

#sisältö{width: 80%; margin: auto;position: relative;margin-top: 200px;-webkit-margin-before:200px;}
#sisältöx{width: 80%; margin: auto;position: relative;margin-top: 60px;-webkit-margin-before:60px;margin-left: 190px;height: 1200px;}


#footer {text-align:left;font-size: 10px;padding-top: 80px; padding-bottom: 100px; padding-left: 50px; color: black;}

#footer-l {position:relative;text-align:left;height:80px;width:100%;font-size: 10px;padding-right: 100px;padding-top: 320%;}

*,
*:before,
*:after {box-sizing: inherit;}

ul{list-style: none;display: flex;flex-wrap: wrap}

.ftg-items{display: flex;flex-wrap: wrap}


.kuvat{object-fit:scale-down;max-width: 100%;vertical-align: bottom;padding: 10px 10px 0px 0px;margin: auto;}
.yks {max-width: 910px}
.kaks {max-width: 450px;}
.kolme {max-width: 300px;}


#pari{max-width: 1200px;}
#pari:hover .overlay{opacity: 1;}

.kuvat a:hover{color: rgba(255, 255, 255, 0.08)}

a {	color: #5a5a5a; text-decoration: none; }
a.contact { color: #666666; text-decoration: underline; }
a.hover { color: #f0dd07; text-decoration: underline; }
a.visited {border: 0 0 0 0}

/* Otsikko */

header {width: 100%; height: 180px; overflow: hidden; position: fixed; top:0px;text-align: left; z-index: 999; background-color:rgba(255,   255,   255, 1); -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}

header h1#logo {text-align: left;padding:0 50px;display: block; height: 40px; line-height: 100px; float: none; font-family: karmina, utopia-std sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;color: black;}

#logo a:hover{color: fuchsia;transition: 0.3s;text-decoration: underline;}

.pun {color:rgba(192, 17, 17, 0.82)}
.sin {color:rgba(43, 153, 255, 0.82)}
.viol {color:rgba(255, 43, 209, 0.82)}
.harm {color:rgba(200, 200, 200, 0.71)}
.kelt {color:rgba(202, 195, 54, 0.82)}
.ora {color:rgba(255, 158, 0, 0.94)}
.must {color:color(srgb 0.062 0.062 0.062)}
.ora a:hover{color:rgba(194, 120, 0, 0.94)}
.sin a:hover{color:rgba(11, 84, 152, 0.82)}
.viol a:hover{color:rgba(255, <43, 209, 0.82)}
.kelt a:hover{color:rgba(202, 195, 54, 0.82)}
.harm a:hover{color:rgba(28, 28, 28, 1)}

header nav {display: block; float: none;font-family: utopia-std;text-align: left;color: black;padding: 0 40px;}	
header nav a {line-height: 10px; color: rgba(0, 0, 0, 0.5); font-weight: 70; font-size: 20px;margin: 0 10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
header nav a:hover {color:black;}

header.smaller {height: 105px;background-color:rgba(255,  255,  255, 0.9)}
header.smaller h1#logo {height: 0px;line-height: 30px;font-size: 50px;}
header.smaller nav a {line-height: 20px;opacity: 70%}

/* Otsikko etusivulla */
#etutekstit { padding-top: 10px;padding-left: 50px;top:0px;text-align: left;display: block; height: 200px; line-height: 60px; float: none; font-family: karmina, utopia-std sans-serif; font-size: 60px; color: white; font-weight: 100; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;color: black;text-shadow: 1px 1px 0 color(srgb 1 1 1 / 0.100),
    -1px 1px 0 color(srgb 1 1 1 / 0.100),
    1px -1px 0 color(srgb 1 1 1 / 0.100),
    -1px -1px 0 color(srgb 1 1 1 / 0.100),
    0px 1px 0 color(srgb 1 1 1 / 0.100),
    0px -1px 0 color(srgb 1 1 1 / 0.100),
    -1px 0px 0 color(srgb 1 1 1 / 0.100),
    1px 0px 0 color(srgb 1 1 1 / 0.100),
    3px 3px 0 color(srgb 1 1 1 / 0.100),
    -3px 3px 0 color(srgb 1 1 1 / 0.100),
    3px -3px 0 color(srgb 1 1 1 / 0.100),
    -3px -3px 0 color(srgb 1 1 1 / 0.100),
    0px 3px 0 color(srgb 1 1 1 / 0.100);,
    0px -3px 0 color(srgb 1 1 1 / 0.100);,
    -3px 0px 0 color(srgb 1 1 1 / 0.100);,
    3px 0px 0 color(srgb 1 1 1 / 0.100);,
    1px 3px 0 color(srgb 1 1 1 / 0.100);,
    -1px 3px 0 color(srgb 1 1 1 / 0.100);,
    1px -3px 0 color(srgb 1 1 1 / 0.100);,
    -1px -3px 0 color(srgb 1 1 1 / 0.100);,
    3px 1px 0 color(srgb 1 1 1 / 0.100);,
    -3px 1px 0 color(srgb 1 1 1 / 0.100);,
    3px -1px 0 color(srgb 1 1 1 / 0.100);,
    -3px -1px 0 color(srgb 1 1 1 / 0.100);}

#etutekstit h1#logo {text-align: left;display: block; height: 140px; line-height: 100px; float: none; font-family: karmina, utopia-std sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;color: black;}

#etutekstit.a.hover{color: fuchsia;transition: 0.3s;}

.ref{color: fuchsia;transition: 0.3s;}

/*tekstityylit*/
.paa{font-family:utopia-std;font-style: italic;font-weight: 100;font-size: 40px;margin: auto;text-align: center;}
.ala{font-family:utopia-std;font-style: italic;font-weight: 100;color:rgba(0, 0, 0, 0.76);font-size: 20px;margin: auto;text-align: left;margin: 10 50 40 10;padding-left: 40px;}
.ala a:hover{text-decoration: underline;}
#kokonaisuus{background-color:white;max-width: 400px;height:600px;overflow: hidden;float: left;padding: 10px;margin-top: -10px;font-size: 18px;align: left;}

#kuva-haat{background:url(https://live.staticflickr.com/5671/22140740148_c7ec2d8324_k.jpg)53% 70% no-repeat;height:600px;width:400px;overflow: hidden;float:left;}

.kuva-haat{background:url(https://live.staticflickr.com/5671/22140740148_c7ec2d8324_k.jpg)53% 70% no-repeat;height:600px;width:400px;overflow: hidden;float:left;}



/*sosiaalinen*/
.hide {display: none;}
.fa-kaikki{height: 40px;}
.fa-kaikki-i{height: 50px;}
.fa-ro:hover img:first-child{display:none;}
.fa-ro:hover img:last-child{display:inline-block;}

/*media*/

@media only screen and (max-width:1200px) {header h1#logo {font-size:50px;display: block;float: none;margin: 0px auto;height: 100px;line-height: 150px;text-align: left;}
    
    header nav {height: 50px;}
    header nav a {line-height: 10px;padding: 0px 0px;}
    header.smaller {height: 90px;}
    header.smaller h1#logo {height: 30px;line-height: 70px;font-size: 45px;}
    header.smaller nav {height: 40px;}
    header.smaller nav a {line-height: 65px;}
    #kokonaisuus{height: 400px;font-size: 15px;max-width: 300px;}
    #sisältö{margin-top: 180px;}
    .kaks{max-width: 350px;}
    .yks{max-width: 710px;}
    .kolme{max-width: 233px;}
    #footer{margin-left: 20vh;}
    #etutekstit{font-size: 40px;line-height: 40px;height: 120px;margin-top: 20px;}

@media all and (max-width: 670px) {header h1#logo {font-size:40px;display: block;float: none;margin: 0 auto;height: 100px;line-height: 150px;text-align: left;}
    
    header nav {height: 50px;}
    header nav a {line-height: 20px;padding: 0 0px;}
    header.smaller {height: 70px;}
    header.smaller h1#logo {height: 30px;line-height: 60px;font-size: 40px;}
    header.smaller nav {height: 40px}
    header.smaller nav a {line-height: 45px;font-size: 15px;padding: 0 0 2px;}