@font-face {
    			font-family: TallPaul;
    			src: url('../tallpaul.woff');
}


html, body	 	{
				font-family: 'EB Garamond', serif;
				font-size: 16px;
				color: #222;
				margin: 0;
				padding: 0;
				height: 100%;
			}
a, a:visited {
				text-decoration: none;
				cursor: pointer;
			}
h1			{
				font-size: 96px;
}			
h3			{
				font-family: TallPaul, serif;
				color: #222;
				font-size: 30px;
				font-weight: normal;
				margin: 0px;
			}
h4			{
				font-family: TallPaul, serif;
				font-size: 22px;
				letter-spacing: 0.1em;
				margin-top: 0px;
				margin-bottom: 15px;
			}

.black		{
				color: #000;
}
.contentwrap {
				position: relative;
				margin: 100px auto;
				width: 80%;
				min-width: 200px;
				z-index: 4;
			}
.contentfooter	{
				border-top: 1px solid #ccc;
				text-align: right;
				font-size: 12px;
				margin: 5px 25px 25px 25px;
				padding-top: 25px;
				color: #15bef0;
			}

.article	{
				position: relative;
				float: left;
				text-align: left;
				min-width: 400px;
				margin: 40px;
}

.imageleft 	{
				float: left;
				margin: 0px 20px 20px 0px;
				border-radius: 0px 10px 0px 10px;
			}
.imageright 	{
				float: right;
				margin: 0px 0px 20px 20px;
				border-radius: 0px 10px 0px 10px;
			}
.iconimage	{
				float: left;
				margin: 0px 10px 10px 0px;
			}
						
.frontpagewrapper {
				position: relative;
				text-align: center;
				width: 100%;
				margin: 0 auto;
				top: 330px;
				z-index: 3;
				min--height: 100%;		
			}

			
.headerlink, .headerlink:visited {
				color: #999;
				padding-right: 20px;
			}			
.headerlink:hover {
				color: #ccc;
			}
.itemtitle	{
				font-size: 24px;
				margin-top: 0px;
				color: #222;
				cursor: pointer;
			}
.nostotaulukko {
				text-align: left;
				margin: 10px;
				background-color: #dde5e8;
			}			
.nostoteksti	{
				margin: 0px 00px 10px 0px;
				text-align: left;
			}

.pieni		{
				font-size: 14px;
			}
			
/* item colors */
.purple		{
				border-bottom: 6px solid #8f48a1;
}			
.blue		{
				border-bottom: 6px solid #1e8275;
}
.green		{
				border-bottom: 6px solid #9daf56;
}
.yellow		{
				border-bottom: 6px solid #cb9f41;
}
/* end, item colors */

/* columns */
.vasenpalsta {
				width: 30%;
				height: 100%;
				float: left;
				margin-right: 20px;
				padding: 20px;
				background-color: #dde5e8;
			}
.oikeapalsta {
				width: 62%;
				padding: 20px;
				margin-left: 35%;
				background-color: #dde5e8;
}
			
/* end, columns */

.shareicon	{
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}
			
.thumbimage	{
				margin: -10px 10px 0px 0px;
				
			}			
.tocitem  	{
				width: 400px;
				height: 190px;
				background-color: #dde5e8;
				padding-top: 10px;
				margin: 20px;
				display: inline-block;
				border: 1px solid #ccd5d8;
			}
.track 		{
				border-radius: 5px;
				border: 1px solid #bbb5c8;
				margin: 0px 10px 10px 0px;
}			
.wrapper	{
				position: relative;
				text-align: center;
				width: 95%;
				margin: 0 auto;
			}

#content_container {
				padding-top: 70px;
				width: 100%;
				background-color: #fff;
				z-index: 9;
				min-width: 550px;
				min-height: 100%;
				padding-bottom: 30px;
				margin-bottom: 30px;
			}
			
			
#frontpagebg {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 400px;
				background-image: url('../kuvat/etusivu.jpg');
				background-repeat: no-repeat;
				z-index: 2;
			}

#footer		{
				background-color: #dde5e8;
				color: #000;
				position: fixed;
				bottom: 0px;
				width: 100%;
				height: 34px;
				padding-top: 18px;
				font-size: 14px;
				letter-spacing: 0.05em;
				z-index: 99;
				text-align: center;
				min-width: 550px;
				border-top: 1px solid #ccd5d8;
			}
#mainwrapper	{
				min-height: 100%; 
				top: 0px;
				left: 0px;
				min-width: 550px;
				width: 100%;
}

#musiikkibg {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 400px;
				background-image: url('../kuvat/syntikka.jpg');
				background-repeat: no-repeat;
				z-index: 2;
				border-bottom: 8px solid #cb9f41;
			}
						
#takaisin	{
				position: fixed;
				width: 40px;
				height: 40px;
				margin: 10px auto;
				background-color: #dde5e8;
				border: 1px solid #777;
				border-left: 0px;
				top: 90px;
				left: 0px;
				z-index: 110;
				font-size: 11px;
				color: blue;
				text-align: center;
				cursor: pointer;
			}

#tiedebg {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 400px;
				background-image: url('../kuvat/kirjat.jpg');
				background-repeat: no-repeat;
				z-index: 2;
				border-bottom: 8px solid #9daf56;
			}

#valokuvabg {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 400px;
				background-image: url('../kuvat/kamera.jpg');
				background-repeat: no-repeat;
				z-index: 2;
				border-bottom: 8px solid #1e8275;
			}
			
#viestintabg {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 400px;
				background-image: url('../kuvat/webcomm.jpg');
				background-repeat: no-repeat;
				z-index: 2;
				border-bottom: 8px solid #8f48a1;
			}
			
/* responsive classes */
@media screen and (min-width: 980px) {
.sectiontitle {
				position: relative;
				width: 100%;
				margin: auto;
  				top: 50%;
  				transform: translateY(-50%);
				text-align: center;
				color: #fff;
				font-family: TallPaul;
				font-size: 96px;
				z-index: 4;
			}
#share-buttons {
				position: fixed;
				text-align: right;
				right: 30px;
				bottom: 10px;
				z-index: 100;
				min-width: 550px;
	}			
}
@media screen and (max-width: 979px) {
.sectiontitle {
				position: relative;
				width: 100%;
				margin: auto;
  				top: 50%;
  				transform: translateY(-50%);
				text-align: center;
				color: #fff;
				font-family: TallPaul;
				font-size: 80px;
				z-index: 4;
			}
#share-buttons {
				position: fixed;
				text-align: right;
				right: 30px;
				top: 10px;
				z-index: 100;
				min-width: 550px;
	}		
}