*{
    box-sizing:border-box;
}

@font-face{
	font-family:omafontti1;
	src:url("Goudy.ttf");
}

@font-face{
	font-family:omafontti2;
	src:url("Serifa.ttf");
}
body{
    background:url("kuvat/Mobiletaustakuva.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
	color:black;
}

#EtuNaviDesk, #Uutisia, linkit2{
    display:none;
}

#header, #footer {
    width:100%;
    height:25px;
    background-color:black;
}

#footer {
    position: absolute;
    bottom: 0;
}

#kuvaotsikko{
    width:100%;
    height:100px;
}

#palakki, #myNavbar{
    background-color:#8ab1c4;
}

#nappi{
    background-color:black;
}

#Nav a{
    text-align:center;
    color:black;
    font-family:omafontti1;
    font-style:italic;
    font-weight:bold;
    border:1px solid black;
}
#Nav a:hover{
    background-color:#30688b;
    transition:0.5s;
}
        
#content{
    min-height: 350px;
    
}

#wrapper{
    width:85%;
    min-height:200px;
    margin:5px 7.5% 10px 7.5%;
    padding:5px 15px 5px 15px;
    background-color:#d7ebf3;
    box-shadow:5px 5px 5px #000000;
    border:1px solid black;
    font-family:omafontti2;
}

#nappula{
    width:75px;
    height:35px;
    background-color:#8ab1c4;
    box-shadow:3px 3px 3px #888888;
}
#sivuotsikko{
	font-family:omafontti1;
}

label{
    font-size:16px;
}
input{
    width:75%;
    margin:0 0 7.5px 0;
    box-shadow:3px 3px 3px #888888;
}

textarea{
    width:95%;
    height:150px;
    margin:0 0 5px 0;
    resize:vertical;
    box-shadow:3px 3px 3px #888888;
}

h3{
    text-shadow:3px 3px 3px #888888;
}

@media only screen and (min-width : 321px) and (orientation: landscape) {
    #header, #otsikko{
        display:none;
    }  
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	#content{
		margin:140px 0 150px 0;
	}
}

@media only screen and (min-device-width : 768px) {
	
    #header, #otsikko{
        display:inherit;
    }  
    
    #bootstrapNavPalkki{
        display:none;
    }
	
    #EtuNaviDesk{
        font-size: 14px;
        font-style:italic;
        font-family:omafontti1;
        display:inherit;
        width:100%;
        height:50px;
        background-color:#8ab1c4;
        margin-bottom:10px;
    }
	
	#EtuNaviDesk a{
        font-size:12px;
	padding-top:15px;
	color:black;
	}
	#EtuNaviDesk ul{
        margin:0 0 0 0%;
        padding:0;
    }
	#EtuNaviDesk ul a:link, ul a:active{
	display:block;
	width:100%;
	height:50px;
	text-decoration:none;
	border:1px solid black;
	}
	
	#EtuNaviDesk li a:hover{
	background-color:#30688b;
	transition:0.5s;
	}

    #EtuNaviDesk li{
        width:20%;
        height:50px;
        display:inline;
        float:left;
        border:1px solid black;
        text-align:center;
	text-transform:uppercase;
    } 
    
    #wrapper{
        width:75%;
        margin:0px 4.5% 50px 12.5%;
    }
	
    #otsikko img{
        height:auto;
    }
    h3{
        font-size:30px;
    }
    label{
        font-size: 18px;
    }
}

@media only screen and (min-device-width: 1224px){
	
    body{
    background:url("kuvat/autot.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    }
    #header,#footer{
        height:50px;
    }
	
    #kuvaotsikko{
        height:auto;
    }
    #wrapper{
        text-align:left;
        max-width:45%;
        overflow:auto;
        padding:0 2% 15px 2%;
        margin:auto;
        margin-bottom: 10px;
        
    }
    

    #EtuNaviDesk{
        box-shadow: 3px 3px 3px black;
    }
    
    #EtuNaviDesk ul{
    margin:0 1.25% 0 7.75%;
    }
    
    #EtuNaviDesk li{
    border-radius:5px;
    width:17.5%;
    margin:0 0.5% 0 0.5%;
    }
    #EtuNaviDesk a{
    font-size:14px;

    }
	
    input{
        width:60%;
    }
    
    textarea{
        width:70%;
    }
    
}

@media only screen and (min-device-width: 1450px){
    #otsikko img{
        height:25%;
    }  
   
}
@media only screen and (min-device-width: 1600px){
    #otsikko img{
        height: 30%;
    }
}

@media only screen and (min-device-width: 1800px){
    #otsikko img{
        height:35%;
    }
}