body {
    font-family: arial, sans-serif;
	font-size: 12px;
	color: #333;
}

a:link, a:focus {
	color: #333;
	text-decoration: none;
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	}

a:visited {
	color: #333;
	text-decoration: none;
	}

a:hover, a:active {
	color: #333;
	text-decoration: underline;
	}
	
.centered {
	margin: 0 auto;
	text-align: center;
	}
	
.italic {
	font-style: italic;
	}

.margin50 {
	margin: 45px auto;
	}
	
.active {
	text-decoration: underline;
	}

#wrapper {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
	padding: 0 20px 0 20px;
	}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.main_title {
	font-size: 1.2em;	
}

nav ul li {
	display: inline-block;
	list-style: none;
	font-size: 1.2em;
	line-height: 1.8em;
	padding: 3px 2px;
	}

img {
	position: relative;
	max-width: 100%;
	margin-bottom: 14px;
	}
	
p {
	line-height: 20px;
	}
	
video {
	position: relative;
	width: 100%;
}
	
.appear {
	opacity:0;
	-moz-transition: opacity 1.5s; /* Firefox 4 */
	-webkit-transition: opacity 1.5s; /* Safari and Chrome */
	transition: opacity 1.5s;	
	}

#more {
	display: none;
}

#readmore {
	width: 100%;
	text-align: center;
	text-decoration: underline;
	padding-top: 4px;
}
	
/* http://css-tricks.com/the-checkbox-hack/ */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  display: inline-block;
  cursor: pointer;
}

label:hover {
	text-decoration: underline;
	}

/* Default State */
.sub-nav{
   display: none;
   position: absolute;
   width: 100%;
   margin: 0 auto;
   text-align: center;
}

.sub-nav ul li {
	list-style: none;
	display: inline-block;
}

#social_menu {
	list-style: none;	
	padding: 20px;
	float: right;
}

/* Toggled State */
input[type=checkbox]:checked ~ .sub-nav {
   display: block;
}

/* responsive grid system */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

.span_1_of_2 {
	width: 50.0%;
	float: left;
}

.span_60 {
	width: 60%;
	float: left;
}

.span_40 {
	width: 40%;
	float: right;
}

/* ==========================================================================
 * Media Query 959px
   ========================================================================== */
@media only screen and (max-width: 959px) {
input[type=checkbox] {
	position: absolute;
	top: 0;
	left: 50%;
	opacity: 0;
	}
}

@media only screen and (max-width: 480px) {
p {
	font-size: 1.4em;
	line-height: 26px;	
}
.span_60 {
	width: 100%;
	float: none;
}

.span_40 {
	width: 100%;
	float: none;
}
#social_menu {
	float: none;
	display: flex;
	justify-content: space-between;
}

.span_2_of_3 {
	width: 100%;
}
#cv-list ul li {
	padding-right: 10px;
}
.sub-nav{
   width: 90%;
   margin-top: 10px;
}
.opened {
   position: absolute;
   width: 90%;
   margin: 0 auto;
   margin-top: 10px !important;
}
}