<style>

	html		{
	            height: 100%;
	    
    }
				
	body 		{
	            min-width: 860px;
	            /*
	            position: relative;
	            margin: 0;
	            */
	    
				background-image: url("images/keage.png");
				background-repeat:no-repeat;
				background-attachment: fixed;
				background-position: center top;
				background-color: #f5f5f0;
				font-family: Arial, "Dejavu Sans", Tahoma, "Lucida Console";
	}	
				
	@media only screen and (max-width: 860px) {
				body	{
						background-image: none;
						background-color: #f5f5f0; 				
						}		
	}				

					
	 a			        {text-decoration: none; }	 
	 a:link, a:visited	{color: #000000; display: inline; padding: 0px 2px 2px 2px; text-align: center; vertical-align: middle; background-color: transparent; }	 
	 a:active	    	{color: #000000; display: inline; font-weight:bold; padding: 0px 2px 2px 2px; vertical-align: middle;  background-color: transparent; }
	 a:hover    		{color: #000000; display: inline; font-weight:bold; padding: 0px 2px 2px 2px; vertical-align: middle;  background-color: transparent; }	 
	 
	ul			{
				list-style-type: disc;
				line-height:120%;
				}
	
	p			{
				font-size: 0.9em; 
				letter-spacing: 2px;				
				}
				
	li 			{
				font-size: 0.9em;
				letter-spacing: 3px;	
				padding: 5px 5px 5px 5px; 
				}				

	.sivulinkit { 	
				margin-right:auto; 
				margin-left:auto;
				background-color: transparent;
				width: 90%; 				
				border: transparent;
				white-space: nowrap;
				border: 0px;	
				padding: 1em 0px 0px 10px; 
				}
				
	.conatainertopbanner { 	
				margin-right:auto; 
				margin-left:auto;
				background-color: transparent;
				width: 95%; 
				border: transparent;
				white-space: nowrap;	
				text-align: center;
				vertical-align: middle; 	
				}
				
	.valkkucontainer	{
	            width:100%; 
	    
	}
	

					
	.linkki		{  
				display: inline-block; 
				text-align: center;				
				vertical-align: middle; 
				width: 24.5%; /* 19.2%; /* 16.0%; */
				height: 45px;
				color: #f5f5f0;
				background-color: #1A75FF;  
				border: 0px;
				font-size: 0.9em; 
				float: left;
				margin-left: 3px;
				letter-spacing: 2px;	
				border-radius: 5px;	
				padding: 6px 0px 6px 0px; 
				font-weight:bold;				
				}
				



	.linkkidefault  {
				background-color: #ff6600; /* fa9605;  #0053FF; */								 
				display: inline-block; 
				text-align: center;				
				vertical-align: middle; 
				width: 24.5%; /* 19.2%; /* 16.0%; */
				height: 45px;
				color: #f5f5f0;				
				border: 0px;
				font-size: 0.9em; 
				float: left;
				margin-left: 3px;
				letter-spacing: 2px;	
				border-radius: 5px;	
				padding: 6px 0px 6px 0px; 
				font-weight:bold;				
				}
	
				
	
	
	.topbanner	{  
				display: inline-block; 
				text-align: center;
				vertical-align: middle; 
				color: black;
				background-color: transparent;  
				border: 0px transparent;
				font-family: Tahoma, "Lucida Console"; 
				margin-left: 1px;
				}	
			
	.valkku		{  
				display: inline-block; 
				text-align: left;
				vertical-align: middle; 
				color: black;
				background-color: transparent;  
				border: 0px transparent;
				margin-left: 1px;
				}
				

	.valkku:hover {
                transform: scale(1.2);
    }

				
    .viiva      {
                border-top: #1A75FF solid 0.1em; 
                margin-top: 1em; 
                margin-bottom: 1em;
    }

	
	.sponsorlogo		{  
				display: inline-block; 				
				vertical-align: middle; 
				color: black;
				background-color: transparent;  
				border: 0px transparent;
				margin-left: 1px;
				text-align:center; 
				padding-right: 20px; 
				padding-left: 20px;
				/*transition: transform .2s;*/
				/*opacity: 0.4;*/
				filter: grayscale(100%);
				}	
	
	.sponsorlogo:hover {
	            transform: scale(1.03);
	            /*opacity: 1;*/
	            filter: grayscale(0);
	   
	}
	
	.alaosa		{
				width: 85%; 
				border: 1px solid transparent;
				color:#000000; 
				margin-right:auto; 
				margin-left:auto;
				letter-spacing: 2px;
				font-size: 0.9em;
				}	
	
	.sisalto {
				width: 85%; 
				border: 0px; 
				color:#000000; 
				margin-right:auto; 
				margin-left:auto; 
				letter-spacing: 1px;
				}
	
	span 		{
				border: 0px transparent;
				font-family: Arial, "Dejavu Sans", Tahoma, "Lucida Console";
				}
				
	span.topbannerclubname {
				font-size: 2.0em; 
				font-weight:bold; 
				letter-spacing:1px; 
				
				}
				
	span.topbannerknummitext {
				font-size: 1.0em; 
				font-weight:bold;
				letter-spacing:10px; 
				}
				
				
    @media screen and (max-width:860px){
        .linkki, .linkkidefault {
            font-size: 0.7em;
        } 
        
        span.topbannerclubname {
            font-size: 1.5em; 
            letter-spacing:0.5px; 
        }
        
        span.topbannerknummitext {
            font-size: 0.7em; 
            letter-spacing:5px; 
        }
    }				
				
	
	
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
 /* max-width: 100%;*/
 
  border: 0px;
  text-align: center;   
  position: relative;
  margin: auto;
  height: 300px;
  
  overflow: hidden; 
  
}


.mySlides {
    display: none;
	border: 0px;
	width: 100%;
/*	height: 18em;*/
	overflow: hidden;
	
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 10px;
  padding: 8px 12px;
  position: absolute;
  bottom: 2px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 2em;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.slideimg {
	max-height: 100%;
	max-width: 100%;
	border: 1px solid #a6a6a6;
	border-radius: 0.1em;
	
}


.slideimg_mainpage {
	max-height: 100%;
	max-width: 100%;
	/*display: inline-block;
	margin: auto;
	*/
	border: 1px solid #a6a6a6;
	border-radius: 0.1em;
	
	/*transition: transform .9s ease;*/ /* basic */

    -o-animation-timing-function: ease-in-out;
    -o-animation-name: example;
    -o-animation-duration: 25s;
    -o-animation-iteration-count: 20; 
    -o-animation-direction: alternate-reverse;
    -o-animation-delay: 1s;
    -o-animation-fill-mode: both;
    
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-name: example;
    -ms-animation-duration: 25s;
    -ms-animation-iteration-count: 20;  
    -ms-animation-direction: alternate-reverse;
    -ms-animation-delay: 1s;
    -ms-animation-fill-mode: both;
    
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-name: example;
    -moz-animation-duration: 25s;
    -moz-animation-iteration-count: 20; 
    -moz-animation-direction: alternate-reverse;
    -moz-animation-delay: 1s;
    -moz-animation-fill-mode: both;

    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: example;
    -webkit-animation-duration: 25s;
    -webkit-animation-iteration-count: 20; 
    -webkit-animation-direction: alternate-reverse;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: both;


    animation-timing-function: ease-in-out;
    animation-name: example;
    animation-duration: 25s;
    animation-iteration-count: 20; 
    animation-direction: alternate-reverse;
    animation-delay: 1s;
    animation-fill-mode: both;
    


}

@-o-keyframes example {
    0%      {transform: scale(1.0);}
    100%    {transform: scale(1.4);}
}

@-ms-keyframes example {
    0%      {transform: scale(1.0);}
    100%    {transform: scale(1.4);}
}

@-moz-keyframes example {
    0%      {transform: scale(1.0);}
    100%    {transform: scale(1.4);}
}

@-webkit-keyframes example {
    0%      {transform: scale(1.0);}
    100%    {transform: scale(1.4);}
}

@keyframes example {
    0%      {transform: scale(1.0);}
    100%    {transform: scale(1.4);}
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5.5s;
  animation-name: fade;
  animation-duration: 5.5s;
}

@-webkit-keyframes fade {
  from {opacity: .01} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .01} 
  to {opacity: 1}
} 	
	
	
</style>