html, body{
	margin:0;
	padding:0;
}
body{
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	font-size:1rem;
	color:rgb(60,60,60);
	background-color:#fff;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
	-webkit-font-smoothing: antialiased;
}
a{
	color:rgb(60,60,60);
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
.clear{
	clear:both;
}

.vcard{
	width:520px;
	padding:20px;
	margin:150px auto 50px auto;
	text-align:center;
	box-sizing:border-box;
}
.portrait{
	width:150px;
	height:auto;
	border-radius:50%;
	border:2px solid #273e06;

	filter: brightness(1.1) saturate(1.1);
}
h1{
	font-size:1rem;
	margin:20px auto;
	text-transform:uppercase;
}
h1, span.green{
	/*color:#5d9933;*/
	color:#273e06;
}
.col{
	width:50%;
	float:left;
	text-align:left;
}
.col.right{
	text-align:right;
}
.col span.green{
	display:inline-block;
	font-weight:bold;
	width:1.5em;
	text-align: left;
}
@media all and (max-height:600px){
	.vcard{
		margin:35px auto;
	}
}
@media all and (max-width:520px){
	.vcard{
		width:90%;
		margin:35px auto;
	}
	.col{
		float:none;
		width:100%;
		line-height:200%;
		text-align:left !important;
	}
}

/**
 * cv
**/
a.backNav{
	font-size:0.8em;
}
.page{
	width:900px;
	padding:20px;
	margin:25px auto;
	line-height:1.35em;
	box-sizing:border-box;
}
img.portrait-cv{
	float:right;
	margin:0 0 25px 25px;
	width:170px;
}
span.slimCol{
	display:inline-block;
	width:60px;
}
span.wideCol{
	display:block;
	width:20%;
	float:left;
	clear:left;
	margin-top:0.7rem;
}
span.contentCol{
	float:left;
	width:80%;
	margin-top:0.7rem;
}
span.contentCol.slim{
	width:35%;
}
.page h1, .page h2, .page h3{
	color:#5d9933;
	text-transform: uppercase;
	clear:left;
	/*
	text-transform:none;
	font-variant:small-caps;
	*/
}
.page h4{
	text-transform:uppercase;
	font-size:1rem;
}
.page br{
	clear:left;
}
.page h2, .page h3, .page h4{
	margin-top:1.5rem;
	margin-bottom: .5em;
}
h2{
	font-size:1.15rem;
}
h3{
	font-size:1rem;
}
span.title{
	font-style: italic;
}
ul{
	list-style-type:circle;
}
span.date{
	float:left;
}
span.name{
	float:right;
	text-transform: uppercase;
}
@media all and (max-width:960px){
	.page{
		width:90%;
		padding:10px;
	}
	img.portrait-cv{
		width: 25%;
		min-width: 140px;
	}
	span.wideCol{
		width:30%;
	}
	span.contentCol,
	span.contentCol.slim{
		width:70%;
	}
	.page h2{
		clear:both;
	}
}
@media all and (max-width: 550px){
	.contactGroup{
		clear:both;
	}
	span.wideCol{
		float:none;
		width: 100%;
	}
	span.contentCol{
		float:none;
		width:90%;
		margin-left:10%;
		display:block;
	}
	span.date,
	span.name{
		float:none;
		display:block;
	}
	span.date:after{
		content:", ";
	}
}

/*
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
*/
.effect6
{
	background-image:url('img/groovepaper_light.png');
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/*.effect6:before,
.effect6:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}*/

@media print{
	.page{
		width:100%;
	}
	.contactGroup {
  		clear: none !important;
	}
}