@import url("styles.css");
/* Reset
------------------------------------------------------------ */
/*html { overflow-y: scroll;}*/
body {
    margin: 0;
    padding: 0;
}

.blank_1	{
	height:50px;
}
header	{
	height:80px;
	margin-bottom:20px;
}

.logo img {
	display: block;
	float:left;
	margin-right:34px;
	padding-top:7.3px;
}
	
.contact	{
	width:300px;
    height:40px;
    background:#009FEE;
	float:right;
	display:none;
	text-align:center;
	margin-left:25px;
}	
.ingressi_0	{
	display:none;
}

.ingressi	{
	display: block;
	height: 63px;	
}

.center	{
	width:96%;
	max-width:1200px;
	height:630px;
	margin:auto; 
}
	.center>p	{
	display: block;
	color: #FFF;
	font-size: 1em;
	margin-left: 20px;
	margin-top: 40px;
		}	

.kaannokset	{
	width: 20%;
	height:400px;
	float: left;
	padding: 0.5%;
	margin: 1%;
	display: block;
	background-color: #dcf5f4;
	border: 2px solid #FFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
	    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),        
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#dcf5f4), 
            color-stop(60%,#dcf5f4), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
} 
        .kaannokset:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }
		
#ktable	{
	display: table; 
	height: 370px; 
	overflow: hidden;
}

#ktableCell	{
	display: table-cell; 
	vertical-align: middle;
}
	
.responsiivisuus	{
	width:25.5%;
	height:400px;
	float:left;
	padding:0.5%;
	margin:1%;
	display:block;
	background-color:#FFF;
	border: 2px solid #FFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
	    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),        
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#dcf5f4), 
            color-stop(60%,#dcf5f4), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
} 
        .responsiivisuus:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }
#rtable	{
	display: table; 
	height: 370px; 
	overflow: hidden;
}

#rtableCell	{
	display: table-cell; 
	vertical-align: middle;
}
					
.pikaOhje	{
	width:21%;
	height:400px;
	float:left;
	padding:0.5%;
	margin:1%;
	display:block;
	background-color:#e2fdf2;
	border: 2px solid #FFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
	    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),        
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#dcf5f4), 
            color-stop(60%,#dcf5f4), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
} 
        .pikaOhje:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

#ptable	{
	display: table; 
	height: 370px; 
	overflow: hidden;
}

#ptableCell	{
	display: table-cell; 
	vertical-align: middle;
}			
		
.contactField	{
	width:20%;
	height:400px;
	float:right;
	padding:0.5%;
	margin:1%;
	display:block;
	background-color:#143961;
}
.footer	{
	display:none;
}

footer	{
	display:block;
	padding: 1%,0%;
}
		
footer p{
	color: #E5E5E5;
	text-align: center;
	font-size:1em;
}

@media screen and (max-width: 1200px) {	

.kaannokset	{
	height:450px;
}

#ktable		{
	height:450px;
}

.responsiivisuus	{
	height:450px;
}

#rtable	{
	height:450px;
}

.pikaOhje	{
	height:450px;
}

#ptable	{
	height:450px;
}

.contactField	{
	height:450px;
}
}

@media screen and (max-width: 1000px) {	

	
.ingressi	{
	display:block;
}

.center	{
	width:96%;
	max-width:700px;
	height:1000px;
}	
.kaannokset	{
	width: 38%;
	height:370px;
	padding:1.5%;
}
#ktable	{
	height:370px;
}
.responsiivisuus	{
	width: 50%;
	height:370px;
	padding:1.5%;
	float: right;
}
#rtable	{
	height:370px;
}

.pikaOhje	{
	width: 38%;
	height:370px;
	padding:1.5%;
	}
	
#ptable	{
	height:370px;
}
.contactField	{
	width:50%;
	height:380px;
	padding:1.5%;
	float:right;
}
}

@media screen and (max-width: 700px) {

.blank_1	{
	display:none;
}

.center	{
	width:96%;
	max-width:450px;
	height:1800px;
}
.logo img {
	float:none;
	margin:auto;
	margin-bottom:20px;
	}

.ingressi_0	{
	width:100%;
	display:block;	
	margin:auto;
	text-align:center;
}
.ingressi	{
	display:none;
}

.blank_2	{
	display:block;
	margin-left:10px;
	margin-top:0px;
}

.kaannokset	{
	width:85%;
	height:300px;
	float:none;
	display-style:none;
	overflow:visible;
	margin:auto;
	margin-bottom:4%;
}

#ktable	{
	height:300px;
}

.responsiivisuus	{
	width:85%;
	height:400px;
	float:none;
	overflow:visible;
	margin:auto;
	margin-bottom:4%;
}
	

#rtable	{
	height:350px;
}
				
.pikaOhje	{
	width:85%;
	height:350px;
	float:none;
	overflow:visible;
	margin:auto;
	margin-bottom:4%;
	}

#ptable	{
	height:300px;
}

.contactField	{
	width:85%;
	height:300px;
	float:none;
	margin:auto;
	margin-top:25px;
	margin-bottom:10%;
	padding-bottom:7%;
}	
.footer	{
	display:block;
	padding: 1%,0%;
}
		
.footer p{
	color: #E5E5E5;
	text-align: center;
	font-size:1em;
}
	
footer	{
	display:none;
}
}
@media screen and (max-width: 500px) {

.logo img	{
	max-width:350px;
	min-width:200px;
}

.kaannokset	{
	height:300px;
}
#ktable	{
	height:100%;
	}
	
.responsiivisuus	{
	height:400px;
}
#rtable	{
	height:100%;
	}
	
.pikaOhje	{
	height:350px;
}
#ptable	{
	height:100%;
}
}

@media screen and (max-width: 320px) {

.logo img	{
	width:100%;
	}
	
.center	{
	height:2050px;
}

.kaannokset	{
	height:400px;
}
#ktable	{
	height:100%;
	}
	
.responsiivisuus	{
	height:500px;
}
#rtable	{
	height:100%;
	}
	
.pikaOhje	{
	height:400px;
}
#ptable	{
	height:100%;
}
}