html, body{
	height:100%;
	width:100%;
	margin: 0;
}
html{
	overflow: hidden;
}
body{
	overflow:auto;
}
#header{
	box-shadow:1px 0 2px #ddd;
	z-index:300;
}
#logo-wrapper{
	padding:20px;
}
#logo{
	background:url('vjtw-logo.png');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:50%;
}
#member-intro{
	padding:10px 20px;
}
#footer{
	text-align:center;
}
#home-link, #contain p{
	/*font-family:Comic Sans MS;*/
	font-size: 1em;
	text-decoration:none;
	/*font-weight:600;*/
	color:#000;
}
.member{
	background:#fff;
	box-shadow:0 1px 1px 0 #BF9720;
	padding:15px;
	margin:20px 25px 20px 35px;
}
.member_media {
	text-align: center;
	margin-top:-15px;
}
.member_photo_wrapper {
	display: inline-block;
}

.member-title-banner {
	position: absolute;
	width: 200px;
	height: 24px;
}

.title-arrow {
	display: inline-block;
	position: absolute;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	vertical-align: middle;
}

.title-arrow.right { border-left: 12px solid #fff; }

.title-arrow.left { border-right: 12px solid #fff; }

#yd-title {
	left: 11%;
	top: 73%;
	background-color: #E71D36;
}

#yd-title > .title-arrow, #jj-title > .title-arrow, #cd-title > .title-arrow
{ left: 0px; }

#dl-title {
	top: 70%;
	right: 11%;
	background-color: #FC6E02;
}

#dl-title > .title-arrow, #ll-title > .title-arrow { right: 0px; }

#cd-title {
	top: 73%;
	left: 11%;
	background-color: #3F6DE0;
}

#ll-title {
	top: 70%;
	right: 11%;
	background-color: #721664;
}

.member-title-banner > .title {
	display: inline-block;
	color: #fff;
	margin: 0px;
}

#jj-title {
	left: 11%;
	top: 70%;
	background-color: #007EA7;
}

.member_photo {
	/*padding: 0 50px;*/
	/*box-shadow:0.5px 0px 3px #ccc;*/
	height: 220px;
	width : 220px;
	vertical-align: middle;
}

.mem_intro_content_wrapper {
	display: inline-block;
	vertical-align: middle;
	width: 90%;
}
/* Why? Please check: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div; */
.ver-helper {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.social-media:first-child{
	border-left:1px solid #bbb;
	border-top:1px solid #bbb;
	border-bottom:1px solid #bbb;
}
.icon-shadow{
	background-image: linear-gradient(to bottom right,#f9f9f9,#d7d7d7);
	border:1px solid #bbb;
	border-radius:2px;
	padding:2px;
	margin-top:8px;
}
.social-icon{
	vertical-align:middle;
}
#yd-photo {
	display: inline-block;
	/*background: url('yd-image1.jpg');*/
}
#danny-photo {
	display: inline-block;
	/*background: url('danny-image1.jpg');*/
}
#cd-photo{
	display:inline-block;
	/*background: url('cd-image3.jpg');*/
}
#laxative-photo{
	display:inline-block;
	/*background: url('laxative-image.jpg');*/
}
#juliana-photo{
	display:inline-block;
	/*background: url('juliana-image1.jpg');*/
}
#yd-photo, #danny-photo, #cd-photo, #laxative-photo, #juliana-photo{
	background-repeat:no-repeat;
	background-position:50%;
	background-size:contain;
}
.icon-shadow:hover, #yd-photo:hover, #danny-photo:hover, #cd-photo:hover, #laxative-photo:hover, #juliana-photo:hover{
	cursor: pointer;
}
.icon-shadow:hover{
	background:#eee;
}
#first-row-name{
	text-align:center;
	margin-top:100px;
}
.mem_intro_content{
	padding : 15px;
	background:#efefef;
	font-family:sans-serif;
}
#cd-content{
	width: 100%;
	height: 400px;
	position:relative;
	top:0px;
}
#laxative-content{
	width: 100%;
	height: 300px;
	position:relative;
	top:0px;
}
#juliana-content{
	width: 100%;
	height: 330px;
	position:relative;
	top:0px;
}
