@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
@import url(http://fonts.googleapis.com/css?family=Rufina:700);

html, body {
  background-color: #AAAAAA;
	padding:0;
	margin:0;
	height:100%;
	color:#322722;
	font-family: 'monaco', sans-serif;
	font-size:14px;
	line-height:22px;
	font-style:normal;
	text-align:left;
}

pre {
	color:#322722;
	font-size:14px;
	font-family: 'monaco', sans-serif;
	line-height:22px;
	font-style:normal;
	text-align:left;
}

#otsikko {
	margin:0;
	padding:10px;
	height:80px;
  font-family: 'monaco', sans-serif;
	font-weight:800;
	color:#fff;
	font-size:50px;
	line-height:50px;
	text-align:center;
  background-color: #DE1616;
  background-image:url(banneri2.png);

	
}

#alaotsikko {
	margin-top:0px;
	font-size:15px;
	line-height:15px;
	color:#FFFFFF;
	text-transform:uppercase;
}

#linkit {
	border-bottom:1px solid #e8e8e8;
	background-color: #DE1616;
  margin: 0 auto;
  
}
  

    
.navbaari {
	      margin:0 auto;
	      padding:0px;
	      height:60px;
	      color:#FFFFFF;
	      line-height:50px;
        text-align:center;
        background-color: #DE1616;
        background-image:url();   
        background-repeat: no-repeat;
        background-position: center;
        font-family: 'monaco', sans-serif;
        text-decoration:none;
     
}  

#banneri {
  background-color: #000000;
  background-position:center;
	margin:0 auto;
  height: 411px;
	padding:18px 0 10px 0px;
  text-align:center;
  


}



.profile-image {
  width: 150px;
  border-radius: 70%;
  border: 3px solid white;

}
.profile-image:hover {
  border: 3px solid red;
}

#sisalto {
	background-color: #AAAAAA;;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	margin:0 auto;
	width:900px;
}

#teksti {
	padding:20px 40px;
}

#footer {
	margin:20px 0 0 0;
	overflow:hidden;
	border-bottom:1px solid #d2d2d2;
	background-color: #DE1616;
  background-image:url(banneri3.png);
  color: #FFFFFF;
  
 
}

#footer2 {
	overflow:hidden;
	margin:30px auto;
	width:900px;
}

#footer2 ul {
	margin:0;
	padding:0;
}

#footer2 ul li {
	list-style-type:circle;
	list-style-position:inside;
	margin:0;
	padding:2px 0;
  
  
}

.palsta1 {
	    float:left;
	    width:65%;
	    border-right: 5px solid #DE1616;
      padding: 5px;
     
}

.palsta2 {
	    float:right;
	    margin:0 auto;
	    width:25%;
      padding: 5px;
  
  
}

.side1 {
	float:left;
   width:40%;
  margin:0 6%; 
	
}

.side2 {
	float:left;
 margin:2% 3%; 

}

#down {
	padding:20px 0;
	text-align:center;
  color: #FFFFFF;
}


#box {
	position:static;
	z-index:1;
	overflow:hidden;
	margin:0 auto;
	width:900px;
	padding:50px 50px 50px 50px;
	background-color: #393939;
  background-image:url(banneri5.png);
  background-repeat:no-repeat;
  border-bottom: 10px solid #DE1616;
  color: #FFFFFF;
  font-family: 'monaco', sans-serif;
  

  

}



td {
	padding:8px 0 8px 10px;

}

a:link, a:active {
	color:#FFFFFF;
	text-decoration:none;
}

a:visited {
	color:#FFFFFF;
}

a:hover {
	color:#FFFFFF;
	text-decoration:none;
}

a.social {
  display: inline-block;
  text-indent: -9999px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  opacity: 1;
  transition: all .25s;
}
a.facebook {
  background-image: url(fb.png);
}
a.instagram {
  background-image: url(insta.png);
}
a.social:hover {
  opacity: .5;
  
  
}

nav {
	background-color: #DE1616;
  color: white;
  padding: 0px;
  font-size: 16px;
  font-weight:700;
  border: none;
  text-decoration:none;
  
}
 
nav ul {
  margin: 0;
  list-style: none;
	position: relative;
  text-decoration:none;
  
	}
	
nav ul li {
	display:inline-block;
	background-color: #DE1616;
  background-image:url(flame2.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:right;
 
	}
 
nav ul li a:hover{
	display:inline-block;
	background-color: #DE1616;
  background-image:url(water.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:right;
  
} 
  
  nav a {
	display:block;
	color:#FFF;
	line-height: 60px;
	text-decoration:none;
}
 
nav a:hover { 
	background-color: #DE1616;
    color: #fff;
 
  
 	}
 
.navbutton {
  display:block;
	background-color: #DE1616;
  color: white;
  width: 100px;
  font-size: 16px;
  font-weight:700;
  border: none;
	text-decoration:none;
  background-image:url(flame2.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:center;
 
  
  
  
	}
 
.navbutton a {
  display:block;
	background-color: #DE1616;
  color: white;
  width: 100px;
  font-size: 16px;
  font-weight:700;
  border: none;
	text-decoration:none;
  background-image:url(flame2.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:center;
 

 
  
}
 
.navbutton a:hover { 
	background-color: #DE1616;
  color: #fff;
  background-image:url(water.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:center;
  
}

/* First level Dropdown */
nav ul ul li {
	width:190px;
	float:none;
	display:list-item;
	position: relative;
  background-image:url(flame2.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:right;
 
}


nav ul ul li a:hover {
	width:190px;
	float:none;
  display:list-item;
	position: relative;
  background-image:url(water.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:right;
  
}
 
/* Second, Third and more levels	*/
nav ul ul ul li > ul {
	position: relative;
	top:0; 
	left:150px;
  background-image:url(flame2.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:right;
  
}

nav ul ul ul li a:hover > ul {
	position: relative;
  top:0;
	left:150px;
  background-image:url(water.png);
  background-repeat:no-repeat;
  background-size:50px;
  background-position:right;
  

}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position:absolute;
	top: 60px;
  /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:list-item;
  position:absolute;



}



h1 {
	font-weight:600;
	margin:0 auto;
	color:#ffffff;
	font-size:30px;
	line-height:20px;
  text-align:center;
  background-color: #DE1616;
  background-image:url(banneri2.png);
  padding: 10px; 
  border-radius: 30px;
  box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12)
  

  
}


h2 {
	font-weight:600;
	margin:0 auto;
	color:#ffffff;
	font-size:30px;
	line-height:20px;
  text-align:center;
  background-color: #DE1616;
  background-image:url(banneri2.png);
  padding: 10px; 
  border-radius: 30px;
  box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12)

}

h3 {
	margin:20px 0 10px 0;
  color:#FFFFFF;

  
  
  
}  


h4 {
	text-align: left;
  font-size:25px;
	color: #FFFFFF;
	font-weight: 300;
	padding: 40px 0 60px 0;
	margin: 0;
	  
  
  
}



.galleriapalsta1 {
      margin-right: 10px;
	    float:right;
	    width:27%;
      padding-top: 60px;
    
      
     
}

.galleriapalsta2 {
	    float:left;
	    width:65%;
      padding: 5px;
  
  

}
.gallery {
  position: relative;

}
.gallery:hover .thumb {
  opacity: .7;
}
.thumb {
  height: 100px;
  width: 12.5%;
  background: no-repeat center center;
  background-size: cover;
  transition: opacity 600ms;  
  border: 1px solid #ffffff; 
  padding-bottom: 5px;
  
}
.gallery .thumb:hover {
  opacity: 1; /* overrides blur, so active img is not blurred */
}
.thumb:before, .thumb:after { 
  opacity: 0; 
  width: 45%;
}
.thumb:last-of-type:before, .thumb:last-of-type:after { opacity: 1; }
.thumb:hover:before, .thumb:hover:after { 
  z-index: 100; /* so this image stays on top */
  opacity: 1;
  transition: opacity 2000ms;
}



/* this is the full-size image  */
.thumb:before { 
  content: '';
  position: absolute;
  top: 10%; left: 20%;
  height: 80%;
  padding-left: 200px; /* creates gap */
  background: inherit;
  background-position: 0px center; 
    	border: 1px solid #ffffff; 
        box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12)
}




/* this is the caption */
.thumb:after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0;
  left: 15%;
  height: 1em;
  padding-bottom: .5em;
  text-align: center;
  font-size: 1.4rem;
  font-style: italic;
  color: #fff;
}


.thumb.sammutusauto {
  background-image: url(auto1a.jpeg);
}

.thumb.sammutusautob {
  background-image: url(auto1b.jpeg);
}


.thumb.sailioauto {
  background-image: url(auto2a.jpeg);
}

.thumb.sailioautob {
  background-image: url(auto2a.jpeg);
}


.thumb.miehistoauto {
  background-image: url(auto3a.jpeg);
}


.thumb.miehistoautob {
  background-image: url(auto3b.jpeg);
}

.thumb.koukkulavaauto {
  background-image: url(auto4a.jpeg);
}


.thumb.koukkulavaautob {
  background-image: url(auto4b.jpeg);
}

#viiva {
  	border-bottom:5px solid #DE1616;
  
}

table, th, td {
  border:1px solid #DE1616;  
  border-collapse: collapse;
  padding: 10px;
  background-image:url(banneri3.png);
  font-weight: 600;
  
  
  
}  
  
td.red { 
 color: #DE1616;
  
  
}

table.grey {
  background-color: #4A4A4A;
  background-image: no-image;
  
}

.arrow {
  color: #DE1616;
  font-size: 100px;
  font-weight: 800;
  text-align: center;
  
  }

.arrow:hover{
  color: #FFFFFF;

  

}

.pikkuboxi {
	      margin:10px 0 80px;
	      padding:10px 0 10px 20px;
	      color:#FFFFFF;
	      line-height:30px;
        text-align:center;
        background-color: #DE1616;
        background-image:url(banneri3.png); 
        border-bottom: 5px solid #DE1616;
        border-radius: 50px;
        box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12)
    
    
 }

.pikkuboxi2 {
	      margin:10px 0 80px;
	      padding:10px 0 10px 20px;
	      color:#FFFFFF;
	      line-height:30px;
        text-align:center;
      
}


 .slider {
        width: 500px;
        height: 667px;
        background-color: #DE1616;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom:0px;
        padding: 0px;
        text-align: center;
        overflow: hidden;
        justify-content: center;
       
  
      }
      .image-container {
        width: 2000px;
        background-color: black;
        height: 650px;
        clear: both;
        position: relative;
        -webkit-transition: left 2s;
        -moz-transition: left 2s;
        -o-transition: left 2s;
        transition: left 2s;
  
      }
      .slide {
        float: left;
        margin: 0px;
        padding: 0px;
        position: relative;
        
        
}
  
  
      }
      #slide-1:target ~ .image-container {
        left: 0px;
        
        
      }
      #slide-2:target ~ .image-container {
        left: -500px;
     
  
      }
      #slide-3:target ~ .image-container {
        left: -1000px;
       
        

      }
      #slide-4:target ~ .image-container {
        left: -1500px;
        
        
  
      }
      #slide-5:target ~ .image-container {
        left: 0px;
      }
      #slide-6:target ~ .image-container {
        left: -500px;
      }
      #slide-7:target ~ .image-container {
        left: -1000px;

      }
      #slide-8:target ~ .image-container {
        left: -1500px;
  
  
      }
      #slide-9:target ~ .image-container {
        left: 0px;
      }
      #slide-10:target ~ .image-container {
        left: -500px;
      }
      #slide-11:target ~ .image-container {
        left: -1000px;

      }
      #slide-12:target ~ .image-container {
        left: -1500px;
  
  
      }
      #slide-13:target ~ .image-container {
        left: 0px;
      }
      #slide-14:target ~ .image-container {
        left: -500px;
      }
      #slide-15:target ~ .image-container {
        left: -1000px;

      }
      #slide-16:target ~ .image-container {
        left: -1500px;
  
      }
      .buttons {
        position: relative;
        top: -20px;
      }
      .buttons a.eka {
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 50px;
        background-color: #DE1616;
        background-image: url(nuoli1.png);
        background-position:center;
      
    }

      .buttons a.toka {
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 50px;
        background-color: #DE1616;
        background-image: url(nuoli2.png);
        background-position:center;
      }



      .buttons a.kolmas {
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 50px;
        background-color: #DE1616;
        background-image: url(nuoli3.png);
        background-position:center;
      }



      .buttons a.neljas {
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 50px;
        background-color: #DE1616;
        background-image: url(nuoli4.png);
        background-position:center;
      }