body {color:#1e2545; font-family: "LatoLight", Arial, Helvetica; font-style: normal;
    font-weight: 400;}
a {color: #1e2545; text-decoration: underline; color: #2f1d82;}
a:hover {color: #1e2545; text-decoration: none;}
a:link {-webkit-tap-highlight-color: #fcd700;}


p {margin: 15px 0; line-height: 1.7;}
h1,h2,h3,h4,h5 {margin-bottom: 15px;color: #1e2545; font-weight: bold; }

h1 {font-size: 50px; color: #FFF;font-family: "LatoHairline", Arial, Helvetica;text-shadow: 0px 0px 10px rgb(47, 13, 2); text-shadow: 2px 2px #;}
h2 {font-size: 40px; text-transform: uppercase; text-align: center; }
h3 {font-size: 18px; color: #172a02;}
h4 {font-size: 20px; text-transform: uppercase; font-family: "LatoRegular", Arial, Helvetica;}
h5 {font-size: 15px; text-transform: uppercase; font-size: 100%;}
h6 {font-size: 14px; text-transform: uppercase; color: #1e2545;}
strong{}
em{}
ul.a {list-style-type: circle; text-align: left;}
 .logo { margin:0px auto 30px auto; width: 250px; height: 105px; }

.gallery img

{   background: #fff;

	border-color: #aaa #ccc #ddd #bbb;

	border-style: solid;

	border-width: 1px;

	color: inherit;

	padding: 2px;

	vertical-align: top;

	width: 75px;

	height: 50px;

}

.gallery li

{

	background: #eee;

	border-color: #ddd #bbb #aaa #ccc;

	border-style: solid;

	border-width: 1px;

	color: inherit;

	display: inline;

	float: left;

	margin: 3px;

	padding: 5px;

	position: relative;

}



img, object, embed {max-width: 100%;
    box-shadow: 0px 2px 8px 3px rgba(0,0,0,0.5);
    border-radius: 5px 5px 5px 5px;
}

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #ec400a; color: #fff; text-shadow: none;}

header {}

section.nolla{background: url("http://www.hartolankta.fi/images/ylabanner.jpg") no-repeat  fixed; height: 600px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: top;}
 
  section.nolla h1 {
    text-align: center;
    position: absolute;
    top: 150px;
    width: 100%;
    text-transform: uppercase;}
    
    
section.yksi{background: url("http://www.hartolankta.fi/images/kaisla.jpg") no-repeat center center fixed; height: 560px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
 
section.yksi3{background: url("http://www.hartolankta.fi/images/jarvimaisema.jpg") no-repeat center center fixed; height: 560px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    
    
section.yksi2{background: url("http://www.hartolankta.fi/images/riite.jpg") no-repeat center top fixed; height: 560px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    
section.yksi1{background: url("http://www.hartolankta.fi/images/lasku.jpg") no-repeat center center fixed; height: 560px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    
section.yksi19{background: url("http://www.hartolankta.fi/images/talvi.jpg") no-repeat center center fixed; height: 560px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    
section.yksi20{background: url("http://www.hartolankta.fi/images/aurinko.jpg") no-repeat center center fixed; height: 560px;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    
#myBtn {display: none; position: fixed;  bottom: 80px; right: 30px; z-index: 99;  border: none; outline: none; background-color: 
    #d6d3d2; color: #440505; cursor: pointer; padding: 15px; border-radius: 10px;}
    
#myBtn:hover {
  background-color: #d05227;}
  
section, header, footer{position: relative; width: 100%; margin: 0; }

section h1{ text-align: center; position: absolute; top: 100px; width: 100%; text-transform: uppercase;   }




section.esittely{background-color: ;}
section.esittely .content{width: 800px; margin: 0 auto; padding: 40px 0 40px 0; background: url("") center 130px no-repeat;  }
section.esittely .saannot{width: 800px; min-height: 600px;          background-color: beige; margin: 0 auto; padding: 40px 0 40px 0; center 130px no-repeat;  }



section.luvat { background-color: #b2aead;}
section.luvat .content{width: 800px; margin: 0 auto; padding: 10px 0 10px 0;}
section.luvat .content .eka, 
section.luvat .content .toka{ float: left; display: inline; width: 300px;  text-align: left;}
section.luvat .content .toka{ float: right; text-align: left;   width: 400px}

section.mina .content{width: 800px; margin: 0 auto; padding: 40px 0 40px 0;}
section.mina .content h2{ text-align: center; padding: 30px 0; margin-bottom: 30pxtext-transform: uppercase;  border-bottom: #efefef solid 1px;  }
section.mina .content .eka, section.mina .content .toka{ float: left; display: inline; width: 300px;  text-align: left;}
section.mina .content .toka{ float: right; text-align: left;   width: 400px}
section.mina .content h4{text-align: left;}


section.kuvat .content{width: 800px; margin: 0 auto; padding: 40px 0 40px 0;}
section.kuvat .content .eka{ float: left; display: inline; width: 300px;  text-align: left;}
section.kuvat .content .toka{ float: right; text-align: right;   width: 400px}
section.kuvat .content .eka images{ float: left; }
section.kuvat .content .toka images{ float: left;}

.clear:before, .clear:after {content: "\0020";display: block;/* height: 0; *//* overflow: hidden; */}  
.clear:after {clear: both;}  
.clear {zoom: 1;}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #ec400a;
    color: white;
    text-align: center;
    p{ font-size: 14px; color:#1e2545;}
}


@media (min-width: 980px) and (max-width: 1024px) 

{}


@media only screen and (max-width: 767px) {
    section .content{ width: 300px !important; overflow: hidden !important;}
    section .saannot{ width: 300px !important; overflow-y: scroll; overflow-x: auto;}
    section .content {width: 90% !important;}
    section .saannot {width: 90% !important;}
    section.nolla h1{ top: 100px; font-size: 20px;}
    section.nolla{height: 200px !important;}
    section.luvat .content .toka{float: left !important;  text-align: left; width: 300px; }
    section.luvat .content .eka{float: left !important; text-align: center; width: 300px; }
    section.luvat .content p {font-size: 14px; color: rgb(30, 37, 69);}
    section.mina .content .toka{ float: left !important; text-align: left;   width: 300px}
}


@media only screen and (min-width: 480px) and (max-width: 767px) {
   section, header, footer{background-attachment: inherit !important; }
   section .content{ width: 400px !important; }
   section .saannot{ width: 400px !important; }
   section.nolla h1{ top: 50px; font-size: 24px;}
   section.luvat .content .eka, section.luvat .content .toka{float: left; text-align: left; width: 400px; }
   section.mina .content .eka, section.mina .content .toka{float: left; text-align: left; width: 400px; }
   section.kuvat .content iframe{width: 400px !important; height: auto !important; }
   section.yksi{background-image: none !important;}
   section.yksi1{background-image: none !important;}
   section.yksi2{background-image: none !important;}
   section.yksi3{background-image: none !important;}
   section.yksi19{background-image: none !important;}
   section.yksi20{background-image: none !important;}
   section.yksi{height:0px !important;}
   section.yksi1{height:0px !important;}
   section.yksi2{height:0px !important;}
   section.yksi3{height:0px !important;}
   section.yksi19{height:0px !important;}
   section.yksi20{height:0px !important;}
   section.esittely p{text-align: left !important;}
   section.kuvat .content .toka{ float: left;}
   h3 {text-align:left;}
   h2{  font-size: 30px; text-transform: uppercase; text-align: center;}
   p {margin: 0px 0; line-height: 22px; text-align:left;}
}


@media (max-width: 480px) {
  section, header, footer{background-attachment: inherit !important; }
  section .content{ width: 90% !important; }
  section .saannot{ width: 90% !important; }
  section.luvat .content {width: 300px; margin: 0 auto; padding: 10px 0;  }
  section.mina .content {width: 300px; margin: 0 auto; padding: 10px 0;  }
  section.yksi{ background-image: none !important;}
  section.yksi1{ background-image: none !important;}
  section.yksi19{ background-image: none !important;}
  section.yksi2{ background-image: none !important;}
  section.yksi3{ background-image: none !important;}
  section.yksi20{ background-image: none !important;}
  section.yksi{height:0px !important;}
  section.yksi1{height:0px !important;}
  section.yksi19{height:0px !important;}
  section.yksi2{height:0px !important;}
  section.yksi3{height:0px !important;}
  section.yksi20{height:0px !important;}
  section.esittely p{text-align: left !important;}
  section.kuvat .content .toka{ float: left;}

h3 {text-align:left;}
h2 {font-size: 30px;
    text-transform: uppercase;
    text-align: center;}
p  {margin: 0px 0;
   line-height: 22px;
   text-align:left;}
}