body {
        background:     #333;
	color: 		#f8e7ec; /* #666; */
	font: 		85%/140% Arial, Helvetica, sans-serif;
	width: 		800px;
	max-width: 	96%;
	margin: 	0 auto;
}

article#esittely {
        color: #f8e7ec;
}

div#tayte {
        padding-top: 20%;
}

a {
        color: #69C;
        text-decoration: none;
        outline: none;
}

a img {
        outline: none;
        border: 0;
}

a:hover {
        color: #F60;
}

img#nuorimina {
        float: right;
        padding-left: 10px;
        padding-right: 10px;
}

div#profiili {
        padding-bottom: 5px;
        padding-top: 5px;
}

div#koulutus {
        padding-bottom: 5px;
        padding-top: 5px;
}


h1 {
	font-size: 1.7em;
	line-height: 110%;
	color: #000;
}

h3#esittely  {
	color: #f8e7ec;
        padding-top: 25px;
        border: none;
}
h3 {
        color: #f8e7ec;
	border-top: solid 1px #eee;
	padding: 20px 0;
	margin: 20px 0 0;
	font-size: 150%;
}
p {
	margin: 0 0 20px;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
        display: block;
}

#pagewrap {
	width: 978px;
	max-width: 96%;
	margin: 0 auto;
}
.wrapper {
	overflow: hidden;
}

ul {
    padding-left: 0px;
    padding-top: 10px;
}
li {
    list-style: none;
    padding-bottom: 15px;
}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {
        background: #333;
        float: left;
        margin-left: 3.2%;
        margin-bottom: 30px;
        padding-top: 20%;
        padding-left: 2.5%;
        padding-right: 2.5%;
}

col#etusivu {
    	background: #333;
        float: left;
        margin-left: 3.2%;
        margin-bottom: 30px;
        padding-left: 2.5%;
        padding-right: 2.5%;
}

h1#otsakenimi {
        font-size:  210%;
        color:      #f8e7ec;
}

.napintyyli {
        display:block;
        width:100px;
        height:100px;
        border-radius:66px;
        border:4px double #ccc;
        font-size:20px;
        color:#666;
        line-height:100px;
        text-align:center;
        text-decoration:none;
        text-shadow:0 1px 0 #fff;
        background:#ddd
}

.napintyyli:hover {
        border:4px double #bbb;
        color:#333;
        text-decoration:none;
        background:#e6e6e6
}

img#navkoti {
        padding-left: 0%;
        color: #666666;
}

div#nuolet {
        float: right;
}

/* grid4 col */

.grid4 .col {
	width: 22.6%;
}
/* grid3 col */
.grid3 .col {
	width: 31.2%;
}
/* grid2 col */
.grid2 .col {
	width: 48.4%;
}
/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 3-column */

@media screen and (max-width: 740px) {
	/* grid4 */
	.grid4 .col {
		width: 31.2%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to 2-column */
@media screen and (max-width: 600px) {
	/* grid4 */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* grid3 */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to fullwidth */
@media screen and (max-width: 400px) {
	/* grid4 */
	.col {
        width: 100% !important;
        margin-left: 0 !important;
        clear: none !important;
	}
}

#galleria{ 
    padding-left: 5%; 
    width: 700px; 
    height: 500px; 
    background: #333; 
}