/* Yleisasetukset
***************************************************************************/
	html, body { height:100%; background: white;}
	p, a , li {font-size: 20px; line-height: 1.4em; font-family: Georgia; letter-spacing: 0.03em; color: #444;}
	button {font-size: 1em;}


/* Kapea palsta sivun keskellä varsinaiselle sisällölle 
***************************************************************************/
	#wrapper {
		max-width: 800px; margin: 0 auto; padding: 0 3%; background: white;	
	}

	@media all and (max-width: 800px) 	{	
		#wrapper {	max-width: 100%;}	}	


/* Linkeistä koristeet pois 
***************************************************************************/
	a img {text-decoration: none; border: 0 none;}
	a:link, a:visited, a:hover, a:active {color:blue; text-decoration:none;}
	
/* Border-radius
****************************************************************************/

	.portrait, .cv-round-pic, .skillpics, .someicon, .sharericon {
		border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		-o-border-radius: 100%;
		}
		
	/*.someicon {
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
	}*/

	.subsectionpic-portfolio, .subsectionpic-video, .subsectionpic-articles, .subsectionpic-cv, .samplepic, .cv_block , .article-pic{
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
	}

	.portfolio_sample .caption, .article_sample .caption {
		border-radius: 0 0 10px 10px;
		-webkit-border-radius: 0 0 10px 10px;
		-moz-border-radius: 0 0 10px 10px;
		-ms-border-radius: 0 0 10px 10px;
		-o-border-radius: 0 0 10px 10px;
	}
	
	 .nornd {
		border-radius: 0;
		-webkit-border-radius: 0 ;
		-moz-border-radius: 0 ;
		-ms-border-radius: 0 ;
		-o-border-radius: 0;	 
	 }

/* Header eli iso taustakuva ja sivun otsikot
***************************************************************************/
	header {  background: white; max-width: 100%; margin: 0 auto; }
	header p {text-align: center;}
	.big-background-pic {height: 400px; max-width: 100%; background: url(img/mainheader.jpg) no-repeat; background-size: cover; line-height: 400px; margin: 0 auto;}
	.maintitle {display: inline-block; vertical-align: bottom; line-height: normal; color: white; text-transform: uppercase; text-shadow: 2px 2px 1px #222; font-size:1.5em; background-color: rgba(80,80,80,0.4); width: 100%;}
	.maintitle h1, .maintitle h2 {text-align: center; margin: 0; padding: 12px 0 12px 0; font-family: 'Open Sans'}
	.maintitle p {color: white; font-size: 0.75em; text-transform: none;padding-left: 100px; padding-right: 100px;}

	@media all and (max-width: 1200px) 	{	
		/*.maintitle {	font-size: 1.2em;}	*/
		.maintitle h1, .maintitle h2 {margin: 0; padding: 8x 0 4px 0;}
		.big-background-pic {height: 400px; line-height: 400px; }
		.maintitle p {padding: 0;}
		}
		
	@media all and (max-width: 600px) 	{	
		/*.maintitle {	font-size: 1.2em;}	*/
		.maintitle h1 {font-size: 1.3em;}
		.maintitle h2 {font-size: 1.2em;}
		.big-background-pic {height: 250px; line-height: 250px; }
		}


	
/* Intro-osio ja omakuva
***************************************************************************/

	.intro {display: block; clear: both;}
	.intro_txt {float: left; max-width: 75%;}
	.intro_pic {float: right; max-width: 25%; margin-top:20px;}
	.portrait {width: 200px; }

	
	@media all and (max-width: 600px) 
		{
			.intro_txt, .intro_pic {max-width: 100%; float: none; clear: both;}
			.intro_pic {text-align: center; }
			.portrait {width: 200px; }
		}


/* Puhelin-, sähköposti- ja some-kuvakkeet 
****************************************************************************/



	.contactinfo {margin: 0; padding: 0; list-style-type: none; margin-top: 40px;}
	.contactinfo li {display: inline; padding: 10px 0 10px 36px; }
	.contactinfo_mail {background: url('img/mail-tp.png') no-repeat 0 10px; background-size: 24px; }
	.contactinfo_phone {background: url('img/phone-tp.png') no-repeat 0 10px; background-size: 24px; margin-left: 20px; margin-bottom: 20px;}


	.someicon {max-height: 30px; margin: 5px 15px 30px 0; }
	
	.contactinfo_mail:hover, .contactinfo_phone:hover, .someicon:hover {opacity: 0.7;}
	
	.contactinfo, .someicon, .contactinfo li  {float: left;}
	.contactinfo, .someicons {display: block; clear: both; margin-bottom: 20px;}

	@media all and (max-width: 600px) /* Kännykkään marginaaliasetukset */
		{
			.contactinfo_phone {margin-left: 0px;}
			.someicon {margin-right: 10px;}
		}
	
/* Valokuvaus-, artikkeli- ja cv-osioiden yleisasetuksia
****************************************************************************/
	.subsection {clear:both; }
	.subsection h1 {font-size: 1.8em; padding: 60px 0 10px 0px; color: #333; max-width: 100%; text-transform: uppercase; font-family: 'Quicksand'; font-weight: 400;}
	.subsection h2 {color: #222; text-transform: uppercase; font-family: 'Open Sans'; font-weight: 400;}
	.h1border {max-width: 100%; border-top: solid 1px #777; margin-top: -35px; margin-bottom: 35px;}

	.subsection p {text-align: left;}

	.subsectionpic-cv {height: 150px; max-width: 800px; margin: -12px 0 -5px 0; background: url(img/cv-banner.jpg) bottom center; background-size: cover;}
	/*.subsection-intro {min-height: 150px;}*/

	@media all and (min-width: 701px) 	{	
		.subsectionpic-portfolio { background: url(img/chisu.jpg) bottom center; background-size: cover;}
		.subsectionpic-video { background: url(img/video.jpg) bottom center; background-size: cover;}
		.subsectionpic-articles { background: url(img/rom780.jpg) bottom center; background-size: cover;}	
		.subsectionpic-portfolio, .subsectionpic-video, .subsectionpic-articles {height: 150px; width: 150px; float: left; margin-right: 15px; margin-bottom: 10px;}
		}
	
	@media all and (max-width: 700px) 	{	
		.subsectionpic-portfolio {background: url(img/lucia.jpg) center center; background-size: cover;}
		.subsectionpic-video {background: url(img/video.jpg) center center; background-size: cover;}
		.subsectionpic-articles {background: url(img/london.jpg) center center; background-size: cover;}		
		.subsectionpic-portfolio, .subsectionpic-video, .subsectionpic-articles {height: 100px; max-width: 100%; margin: -12px 0 -5px 0; }
		.h1border {max-width: 100%; border-top: solid 1px #777; margin-top: -35px; margin-bottom: 25px;}
		/* Miksi max-width ei toimi sen jälkeen, kun width on määritelty edellisessä mediaqueryssä? */
		}
	
/* Valokuvaosion sample-kuvat ja kuvagalleria
****************************************************************************************/
/* Credits from image caption technique: http://www.corelangs.com/css/box/caption.html */
/***************************************************************************************/
	
	.portfolio_sample { position: relative; width: 150px; height: 150px; display: inline; }
	.samplepic { width: 150px; height: 150px; }
	.portfolio_sample .caption {position: absolute; width: 150px; height: 30px; bottom: 4px; left: 0px; color: white; background: rgba(50,50,50,0.5); text-align:center; font-weight:bold; font-family: 'Open Sans', sans-serif; font-size: 18px;}
	.caption {padding: 10px 0 5px 0; text-shadow: 2px 1px 1px #222; text-transform: uppercase;}
	
	.noshow { display: none; }

@media only screen 
  and (min-width: 900px) {	
	.caption {margin-bottom: 5px;}
	.portfolio_sample .caption {bottom: 0;}
	}
	
@media only screen 
  and (min-device-width: 600px) 
  and (max-device-width: 900px) {	
	.portfolio_sample, .samplepic  {width: 130px; height: 130px;	}
	.portfolio_sample .caption {width: 130px; }
	}
	
@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 600px) {	
	.portfolio_sample, .samplepic  {width: 130px; height: 130px;	}
	.portfolio_sample .caption {width: 130px; }
	.caption {margin-bottom: 0;}
	}
	
	
/* Artikkeliosion sample-kuvat
****************************************************************************************/
	.article_sample { position: relative; width: 250px; height: 250px; display: inline;	}
	.articles .samplepic { width: 250px; height: 250px; border-radius: 10px;}
	.article_sample .caption {position: absolute; width: 250px; bottom: 4px; left: 0px; color: white; background: rgba(50,50,50,0.5); text-align:center; font-weight:bold; font-family: 'Open Sans', sans-serif; font-size: 18px; letter-spacing: 0;}

	@media all and (max-width: 600px) 	{	
	.article_sample {display: block; margin: 5px auto;}
	}
	
@media only screen 
  and (min-width: 900px) {	
	.article_sample .caption {bottom: 0;}
	}
	

/* CV-osio
****************************************************************************************/
	/*.cv h2 { text-align: left; text-transform: uppercase; color: #444; font-size: 1.6em; margin-top: 2em; margin-bottom: -0.5em;} */ /* Liittyykö tämä mihinään?? */

	ul {padding-left: 20px; }
		
/*	@media all and (max-width: 500px) 	{	
		.cv h2 {	font-size: 1.4em; line-height: 1.15em;}	
		}	*/ /* Liittyykö tämä mihinään?? */
		
	.cv_block {background: rgba(197,232,197,0.6); margin-bottom: 20px; padding: 10px 20px 10px 20px; }
	.cv_block p , .cv_block li, .cv_block a {font-size: 20px;}
	.cv_block p:last-child {margin-bottom: 0; }
	.cv_block a {font-weight: 500;}
	
	.cv_block h3 {color: #444; font-size: 1.3em; margin-top: 5px; margin-bottom: -10px;}
	.cv span {color: rgb(153,21,24);}

	.logo {float: right; margin-top: 10px;}
	img.kblogo {width: 80px;}
	
	.cv-round-pic {float: right; height: 125px; width: 125px; background:url(img/construction.jpg) no-repeat; background-size: cover;  }
	.education {background:url(img/education.jpg) no-repeat; background-size: cover; }
	.skills {background:url(img/vattesite.jpg) no-repeat; background-size: cover; }

	
	.bold {color: rgb(153,21,24); font-family: Georgia; font-weight: 600;}
	
	.skillpics {float: right; height: 150px; width: 150px;}

	@media all and (max-width: 600px) 	{	
		img.logo {	float: none; width: 80px; clear: both; margin: 0 auto; display: block;}	
		img.otavamedialogo, img.cocommslogo {width: 150px;}
		.cv-round-pic {display: none;}
		.cv_block p , .cv_block li {font-size: 18px;}		
		.skillpics {height: 70px; width: 70px; margin-top: 10px;}
		}
		
	
	/*ul.samples {margin: 0; list-style-type: none;}
	ul.samples li {background-image: url(img/taltoimkuva.jpg); background-repeat: no-repeat; background-position: -20px -30px; padding: 10px 0; }*/
	
	.samples {margin: 0; padding: 0; list-style-type: none; margin-bottom: 20px; clear: both; display: block;}
	.samples li {display: block; padding: 10px 0 10px 46px; }
	.samples li.sample-pb {background: url('img/pbrnd.png') no-repeat 0 3px; background-size: 40px; }
	.samples li.sample-esite {background: url('img/vattesiternd.png') no-repeat 0 3px; background-size: 40px; }
	.samples li.sample-www {background: url('img/analyysirnd.png') no-repeat 0 3px; background-size: 40px; }
	.samples li.sample-taltoim {background: url('img/taltoimrnd.png') no-repeat 0 3px; background-size: 40px; }
	.samples li.sample-jat {background: url('img/jat.png') no-repeat 0 3px; background-size: 40px; }
		
/* Hide/show
******************************************************/	  
	  
#flip3, #flip4, #flip5 {
    padding: 8px;
}

#flip, #flip1a, #flip2, #flip3, #flip4, #flip5, #flip6 {
    cursor: pointer;
    background-color: #666;
    border: solid 1px #c3c3c3;
	color: white;
	width: ;
	border-radius: 3px;
	text-transform: uppercase;
	font-family: 'Quicksand';
	}

@media only screen 
  and (min-device-width: 600px) 
  and (max-device-width: 900px) {	
		#flip, #flip1a, #flip2, #flip3, #flip4, #flip5, #flip6 {
			font-size: 1.2em; background: rgb(153,21,24);
			}
	}
	
@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 600px) {	
		#flip, #flip1a, #flip2, #flip3, #flip4, #flip5, #flip6 {
			font-size: 1em; background: rgb(153,21,24);
			}
	}
	
#flip:hover, #flip1a:hover, #flip2:hover, #flip3:hover, #flip4:hover, #flip5:hover, #flip6:hover {
	background-color: rgb(153,24,21);
}

#panel, #panel1a, #panel2, #panel3, #panel4, #panel5, #panel6 {
    display: none;
	margin-top: 20px;
}

.centerbutton, #panel, #panel1a, #panel2 {text-align: center;}

.cv .centerbutton {text-align: left;}

#flip, #flip1a, #flip2, #flip6 {border-radius: 100%; height: 125px; width: 125px; }
.tempheight {height: 100px; line-height: 80px;}
#flip3:hover, #flip4:hover, #flip5:hover {padding-top: 30px; padding-bottom: 30px; }

#flip5 {margin-bottom: 50px;}

/* Yksittäiset artikkelit
******************************************************/


.maintitle {display: inline-block; vertical-align: bottom; line-height: normal; color: white; text-transform: uppercase; text-shadow: 2px 2px 1px #222; font-size:1.5em; background-color: rgba(0,0,0,0.4); width: 100%; padding: 20px 0;}
.articletext h2 {font-family: 'Open Sans'; color: #333; text-transform: uppercase; margin-top: 60px; font-size: 26px;}

	@media all and (max-width: 650px) 	{	
		.romheader .maintitle {	font-size: 1.15em; padding: 5px 0;}	
		
		}

.framer {max-width: 800px;  }
iframe {width: 100%; height:570px;}

#ty-sample {width: 70%; height: 400px;}

.article-pic {max-width: 100%; border: solid black 1px; text-align: center; display: block; margin: 0 auto;}

/* Artikkelien paluunapit
******************************************************/

.return { 
	width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border-radius: 100%;
	margin: 60px auto;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: -3px;
	background: #333;
	color: white;
	display: inline-block;
	}
	
	@media all and (max-width: 600px) 	{	
		.return {	font-size: 20px; width: 120px; height: 120px; margin: 30px auto; line-height: 120px; letter-spacing: -2px;}	
		
		}
	
.return:hover { 
	background: rgb(153,21,24);
	}

.return-inner {      
	display: inline-block;
    vertical-align: middle;
    line-height: 100%;
	margin-bottom: 12px;
	letter-spacing: 0.05px;
	}

.returners {text-align: center;}

/* Yksittäisten artikkelien isot pääkuvat
******************************************************/

.romheader {background: url(img/rom_iso.jpg) center center no-repeat; background-size: cover; }
.samuelheader {background: url(img/samuel.jpg) 50% 20% no-repeat; background-size: cover; }
.wachheader {background: url(img/wach_iso.jpg) 50% 10% no-repeat; background-size: cover; }
.benheader {background: url(img/ben_iso.jpg) 50% 20% no-repeat; background-size: cover; }
.lontooheader {background: url(img/lontoo_iso.jpg) 50% 40% no-repeat; background-size: cover; }
.madridheader {background: url(img/madrid_iso.jpg) 50% 50% no-repeat; background-size: cover; }
.galiciaheader {background: url(img/galicia_iso.jpg) 50% 50% no-repeat; background-size: cover; }
.transheader {background: url(img/trans_iso.jpg) 50% 10% no-repeat; background-size: cover; }
.slyheader {background: url(img/sly_iso.jpg) 50% 40% no-repeat; background-size: cover; }
.corbijnheader {background: url(img/corbijn_iso.jpg) 50% 20% no-repeat; background-size: cover; }
.apesheader {background: url(img/apes_iso.jpg) 50% 50% no-repeat; background-size: cover; }
.robinheader {background: url(img/robin_iso.jpg) 50% 30% no-repeat; background-size: cover; }
.lynchheader {background: url(img/lynch_iso.jpg) 50% 58% no-repeat; background-size: cover; }
.lewisheader {background: url(img/lewis_iso.jpg) 50% 55% no-repeat; background-size: cover; }
.phelpsheader {background: url(img/phelps_iso.jpg) 50% 40% no-repeat; background-size: cover; }
.maxheader {background: url(img/max_iso.jpg) 50% 55% no-repeat; background-size: cover; }

.boltheader {background: url(img/bolt_iso.jpg) 50% 10% no-repeat; background-size: cover; }
.frankheader {background: url(img/frank_iso.jpg) 50% 10% no-repeat; background-size: cover; }

.articletext p {display: block; font-size: 20px; font-family: Georgia; letter-spacing: 0; color: #444; text-shadow: none;}
.center {text-align: center;}

/* Pää- ja artikkelisivun lopussa yhteystiedot
******************************************************/

.endpage-contact {background: white; padding-top: 50px; padding-bottom: 50px; text-align: center;}
.someicons {}
.ender {float: none;}

.print-only {display: none;}

/* Yksittäisten artikkelien some-jakonapit
******************************************************/

.sharer {text-align: center; margin: 50px 0 0 0;}
.sharer p {font-family: 'Open Sans'; font-size: 22px; text-transform: uppercase; }
.sharericon {height: 50px; width: 50px; margin: 20px 10px;}
.sharericon:hover {opacity: 0.7;}

/* Printteriasetukset 
******************************************************/

@media print { 
	p {color: #222;}
	.big-background-pic {background: none; margin-top: 0;}
	.maintitle {vertical-align: top; margin-left: 20px;}
	.maintitle h1, .maintitle h2 {text-align: left; color: #222}
	.maintitle h1 {font-size: 28px;}
	.maintitle h2 {font-size: 16px;}
	.portrait {position: absolute; top: 10px; right: 10px; display: block; width: 150px; height: 150px;}
	.intro_txt {margin-top: -100px; width: 80%;}	
	.intro_txt p:nth-child(5) {display: none;}	
	.intro_txt p, .intro_txt a {font-size: 14px; font-weight: normal; color: #222;}
	.contactinfo  ul, .contactinfo li {margin: 0; padding: 0;}
	.contactinfo li {display: block; float: none; list-style-image:url(img/mail-hover.png);}
	.someicons {display: none;}
	.subsection h1 {margin-top: 0; padding: 0; font-size: 16px; margin-top: 20px;}
	.h1border {display: none;}
	.subsection p {text-align: left; font-size: 14px; margin:0; padding: 0; margin-bottom: 1em; color: #222;}
	.subsectionpic-portfolio, .subsectionpic-articles, .subsectionpic-cv, .endpage-contact, .centerbutton  {display: none;}
	.print-only {display: block; }
	.subsectionpic-articles a {font-size: 14px;}
	.contact-icon {display: inline; width: 12px; height: 12px; margin-right: 10px; }
	#panel3, #panel4, #panel5, #panel6 {   display: block; 	margin-top: 20px; }
	.subsection h2 {color: #222; text-transform: uppercase; font-family: Georgia; font-weight: 400; font-size: 16px; }
	.cv_block {margin: 0; padding: 0;}
	.cv_block h3 {color: #222; font-size: 14px; margin: 0; margin-top: 20px;}
	.cv_block li {color: #222; font-size: 14px; }
	img.vattlogo, img.otavamedialogo, img.cocommslogo {float: right;}
	img.otavamedialogo, img.cocommslogo {width: 100px;}
	a {font-size: 14px;}
	.cv_block a {font-weight: 500; font-size: 14px;}
	.samples li {padding: 0; margin: 0;}
}