/* Global */

body {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #8a8683;
    background: #CADFFF url(../images/bg-min.png);
}

h1 {font-family: 'Open Sans', sans-serif; font-size: 60px; letter-spacing: 0px; font-weight: normal; margin: 0;}
h2 {font-size: 32px; font-weight: 400;}
h3 {font-size: 26px; font-weight: 400;}
p {font-size: 17px; line-height: 24px; letter-spacing: .6px;}

h1 {font-family: 'Ranga'; font-weight: 700; font-style: italic; letter-spacing: 1px; font-size: 80px;}

img {
	max-width: 100%;
}
a:link {
	color: #638ece;
	text-decoration: none;
}
a:hover {
	color: #BFD7FC;
	text-decoration: none;
}
a:visited {
	color: #638ece;
	text-decoration: none;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0px 0px 20px rgba(50,50,50,0.1);
}



/* Navigation */

.menu {
	position:fixed;
	top:0px;
	width:100%; 
	height:auto; 
	background-color:#ffffff;
	z-index:100;
}
#logo {
	text-align: center;
	margin: 10px 0;
}
#nav {
	text-align: right;
	margin: 30px 0 0 0;
}
.navigation{
	float: right;
	list-style: none;
	margin: 0;
}
.navigation li{
	float: left;
	padding:0 0 0 50px;
}
.navigation li:hover{
	cursor:pointer;
	color: #a9d3d0;
}

.navigation .active{
	cursor:pointer;
	color: #f68f67;
	font-weight:bold;
}




/* General Slides */ 

.slide{
	background-attachment: fixed;
	width:100%;
	height:auto;
	position: relative;
	padding:100px 0;
    background-color: #fff;
}


/* Header slide */
#header{
    background-color: #eee;
    background-image:url('../images/avmetalli_header-min.jpg');
    padding: 20px 0;
}

#header img {
    display: block;
    margin: 0;
}


/* Slide 1 */ 
#slide1{
    background-image:url('../images/bg2-min.png');
	background-color:#ffffff;
}
#slide1 h1 {
	color:#638ece;
}
#slide1 h2 {
	color: #666;
}




/* Slide 2 */ 
#slide2{
	background-image:url('../images/avmetalli_tausta6-min.jpg');
	background-color:#eee;
    background-size: cover;
	color:#ffffff;
    -webkit-filter: sepia(20%) hue-rotate(180deg);
    filter: sepia(20%) hue-rotate(180deg);
}
#slide2 h1 {
	color:#ffffff;
	text-shadow: 0px 2px 4px rgba(30, 30, 30, 1);
}
#slide2 h2 {
	color: #ffffff;
	text-shadow: 0px 2px 4px rgba(30, 30, 30, 1);
}




/* Slide 3 */ 
#slide3{
	background-image:url('../images/bg2-min.png');
	background-color:#eee;
    border-bottom: 3px solid #ddd;
}
#slide3 h1 {
	color:#666;
}
#slide3 h2 {
	color: #888;
	margin-bottom: 20px;
}
#slide3 h3 {
	color: #888;
	margin-bottom: 14px;
}
#test{
	background-color:#638ece;
	color:#ffffff;
	text-align:center;
	font-size: 1.8em;
	font-weight: 400;
}

.omega{
	margin-bottom: 16px;
}




/* Slide 4 */
#yhteys{
	background-image:url('../images/avmetalli_tausta7.jpg');
	background-color:#E2ECF5;
    /*background-size: cover; */
    background-position: center bottom;
	color:#fff;
    border-top: 3px solid #ddd;
    margin-top: 4px;
}
#yhteys h1 {
	color:#1E5AA0;
	/*text-shadow: 0px 2px 4px rgba(30, 30, 30, 0.2);*/
	padding-bottom: 10px;
}
#yhteys h2 {
	color: #5A96D2;
	/*text-shadow: 0px 2px 4px rgba(30, 30, 30, 0.2);*/
}

#yhteys a {color: #5A96D2;}
#yhteys a:hover {text-decoration: underline;}


/* Slide 5 */
#slide5{
	background-image:url('../images/avmetalli_tausta3-min.jpg');
	background-color:#eee;
    background-size: cover;
	color:#ffffff;
    height: 100px;
    -webkit-filter: sepia(20%) hue-rotate(180deg);
    filter: sepia(20%) hue-rotate(180deg);
}

/* Form */
#lomake {border-bottom: 1px solid #ddd;}
form {margin: 10px 0;}
label {display: block;}
input, textarea {width: 100%; max-width: 400px; border: 1px solid #d3d3d3; border-radius: 3px; margin-bottom: 10px; padding: 4px;}
input[type="submit"] {margin-top: 10px; width: 50%;}


.viiva {
    height: 4px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}


/* Tablet */
@media screen and (max-width: 1024px) {

h1 {font-size: 48px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}
p {font-size: 16px;}
    
#logo {
	width: 100%;
	text-align: center;
}
    
.site-logo img {max-width: 50%;}

#nav {
	width:100%;
	text-align:center;
	margin:10px 0;
}

.navigation{
	width: 100%;
	float: center;
	list-style: none;
	margin: 0;
	padding:0;
}

.navigation li{
	float: left;
	width:25%;
	padding:0;
}

.slide{
	padding:80px 0;
}
    
#slide3 .grid_8 {min-height: 30px;}

#decorative {
	display:none;
}

#content {
	text-align:left;
	width:100%;
}

}

/* Tablet 
@media screen and (max-width: 600px) {
    
h1 {font-size: 32px; letter-spacing: -1px;}
h2 {font-size: 22px;}
h3 {font-size: 18px;}
p {font-size: 15px;}
    
input, textarea {padding-left:0; padding-right:0;}
    
#content {text-align:center;}
    
.slide{padding:60px 0;}
    
} */


/* Mobile */
@media screen and (max-width: 650px) {
body {font-size: 13px;}

h1 {font-size: 22px; letter-spacing: 0px;}
h2 {font-size: 18px;}
h3 {font-size: 15px;}
p, #test {font-size: 13px; letter-spacing: 0.2px; line-height: 20px;}
    
#logo {
	width: 100%;
	text-align: center;
}
    
.site-logo img {max-width: 80%;}

#nav {
	width:100%;
	margin:5px 0;
}

.navigation{
	width: 100%;
	float: left;
	list-style: none;
	margin: 0;
	padding:0;
}

.navigation li{
	float: left;
	width:25%;
}

.slide{
	background-attachment: fixed;
	width:100%;
	position: relative;
	padding:50px 0;
}
    
#slide1, #slide3{
	background-image:none;
}
    
#slide3 .grid_4 {font-weight: 600;}
#slide3 .grid_8 {min-height: initial;}
    
.slide, #slide1, #slide2, #slide3, #slide4, #slide5 {
    background-size: cover;
    background-position: 0 0 !important;
    background-attachment: initial;
}
    
    #yhteys {
        background-image: none;
    }
    #yhteys h1 {
        font-size: 30px;
    }
    #yhteys #content {
        text-align: center;
    }
    
}