@import url('demo.css');



@font-face {

	font-family: 'fontawesome-selected';

	src: url("font/fontawesome-selected.eot");

	src: 

	url("font/fontawesome-selected.eot?#iefix") format('embedded-opentype'), 

	url("font/fontawesome-selected.woff") format('woff'), 

	url("font/fontawesome-selected.ttf") format('truetype'), 

	url("font/fontawesome-selected.svg#fontawesome-selected") format('svg');

	font-weight: normal;

	font-style: normal;

}



.timeline {

	position: relative;

	list-style-type: none;

	padding: 30px 0 50px 0;

	font-family: 'Gorditas', Arial, sans-serif;

}



.timeline:before {

	content: '';

	position: absolute;

	width: 5px;

	height: 100%;

	top: 0;

	left: 174px;

	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);

}



.event {

	position: relative;

	margin-bottom: 80px;

	padding-left: 20px;

}



.thumb {

	position: absolute;

	width: 100px;

	height: 100px;

	left:0;

	box-shadow: 

		0 0 0 8px rgba(65,131,142,1), 

		0 1px 1px rgba(255,255,255,0.5);

	background-repeat: no-repeat;

	border-radius: 50%;

	-webkit-transform: scale(0.8) translateX(24px);

	-moz-transform: scale(0.8) translateX(24px);

	-o-transform: scale(0.8) translateX(24px);

	-ms-transform: scale(0.8) translateX(24px);

	transform: scale(0.8) translateX(24px);

}



.thumb:before {

	content: '';

	position: absolute;

	height: 8px;

	z-index: -1;

	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);

	width: 51px;

	top: 42px;

	left: 100%;

	margin-left: 8px;

}



.thumb span {

	color: #41838e; 

	width: 150%;

	text-align: center;

	font-weight: 500;

	font-size: 15px;

	text-transform: uppercase;

	position: absolute;

	bottom: -35px;

	margin-bottom: -18px;

	right:-25px;

}



body.rtl .thumb span{font-family: 'HelveticaNeueW23-Reg';}



.user-1 {

	background-image: url(../images/members/user1.jpg);

}



.user-2 {

	background-image: url(../images/members/user2.jpg);

}



.user-3 {

	background-image: url(../images/members/user3.jpg);

}



.user-4 {

	background-image: url(../images/members/user4.jpg);

}



.user-5 {

	background-image: url(../images/members/user5.jpg);

}



.user-6 {

	background-image: url(../images/members/user6.jpg);

}



.user-7 {

	background-image: url(../images/members/user7.jpg);

}



.user-8 {

	background-image: url(../images/members/user8.jpg);

}



.user-9 {

	background-image: url(../images/members/user9.jpg);

}



.user-10 {

	background-image: url(../images/members/user10.jpg);

}



.user-11 {

	background-image: url(../images/members/user11.jpg);

}



.user-12 {

	background-image: url(../images/members/user12.jpg);

}



.user-13 {

	background-image: url(../images/members/user13.jpg);

}



.user-14 {

	background-image: url(../images/members/user14.jpg);

}



.user-15 {

	background-image: url(../images/members/user15.jpg);

}



.user-16 {

	background-image: url(../images/members/user16.jpg);

}



.user-17 {

	background-image: url(../images/members/user17.jpg);

}



.user-18 {

	background-image: url(../images/members/user18.jpg);

}



.user-19 {

	background-image: url(../images/members/user19.jpg);

}



.user-20 {

	background-image: url(../images/members/user20.jpg);

}



.user-21 {

	background-image: url(../images/members/user21.jpg);

}



.user-22 {

	background-image: url(../images/members/user22.jpg);

}



.user-23 {

	background-image: url(../images/members/user23.jpg);

}



.user-24 {

	background-image: url(../images/members/user24.jpg);

}

.user-25 {

	background-image: url(../images/members/user25.jpg);

}


.head1 {

	background-image: url(../images/members/head1.png);

}



.head2 {

	background-image: url(../images/members/head2.png);

}



.head3 {

	background-image: url(../images/members/head3.png);

}



/* Transparent Checkbox/radio hack: leave the checkbox on top, hide it with opacity 0 */



.event label,

.event input[type="radio"] {

	width: 24px;

	height: 24px;

	left: 167px;

	top: 36px;

	position: absolute;

	display: block;

}



.event input[type="radio"] {

	opacity: 0;

	z-index: 10;

	cursor: pointer;

}



.event label:after {

	font-family: 'fontawesome-selected';

	content: '\25c9';

	background: #fff;

	border-radius: 50%;

	color: #41838E;

	font-size: 26px;

	height: 100%;

	width: 100%;

	left: -2px;

	top: -3px;

	line-height: 24px;

	position: absolute;

	text-align: center;

}



.content-perspective {

	margin-left: 230px;

	position: relative;



	-webkit-perspective: 600px;

	-moz-perspective: 600px;

	-o-perspective: 600px;

	-ms-perspective: 600px;

	perspective: 600px;

}



.content-perspective:before {

	content: '';

	width: 37px;

	left: -51px;

	top: 45px;

	position: absolute;

	height: 1px;

	z-index: -1;

	background: #fff;

}



.content {

	-webkit-transform: rotateY(10deg);

	-moz-transform: rotateY(10deg);

	-o-transform: rotateY(10deg);

	-ms-transform: rotateY(10deg);

	transform: rotateY(10deg);



	-webkit-transform-origin: 0 0;

	-moz-transform-origin: 0 0;

	-o-transform-origin: 0 0;

	-ms-transform-origin: 0 0;

	transform-origin: 0 0;



	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d;

	-o-transform-style: preserve-3d;

	transform-style: preserve-3d;

}



.content-inner {

	position: relative;

	padding: 20px;

	color: #333;

	border: none;

	border-left: 5px solid #41838e;

	box-shadow: 0 4px 6px rgba(0,0,0,0.1);

	background: #fff;

}



.content-inner h3 {

	font-size: 26px;

	padding: 5px 0 5px 0;

	color: #41838e;

}



.content-inner p {

	font-size: 18px;

	max-height: 0px;

	overflow: hidden;

	color: transparent;

	color: rgba(0,0,0,0);

	text-align: left;

}



.content-inner:before {

	font-family: 'fontawesome-selected';

	content: '\25c2';

	font-weight: normal;

	font-size: 54px;

	line-height: 54px;

	position: absolute;

	width: 30px;

	height: 30px;

	color: #41838e;

	left: -22px;

	top: 19px;

	z-index: -1;

}



/* Transitions */



.thumb,

.thumb span,

.content-inner h3 {

	-webkit-transition: all 0.6s ease-in-out 0.2s;

	-moz-transition: all 0.6s ease-in-out 0.2s;

	-o-transition: all 0.6s ease-in-out 0.2s;

	-ms-transition: all 0.6s ease-in-out 0.2s;

	transition: all 0.6s ease-in-out 0.2s;

}



.content-inner {

	-webkit-transition: box-shadow 0.8s linear 0.2s;

	-moz-transition: box-shadow 0.8s linear 0.2s;

	-o-transition: box-shadow 0.8s linear  0.2s;

	-ms-transition: box-shadow 0.8s linear 0.2s;

	transition: box-shadow 0.8s linear 0.2s;

}



.content {

	-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;

	-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;

	-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;

	-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;

	transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;

}



.content-inner p {

	-webkit-transition: max-height 0.5s linear, color 0.3s linear;

	-moz-transition: max-height 0.5s linear, color 0.3s linear;

	-o-transition: max-height 0.5s linear, color 0.3s linear;

	-ms-transition: max-height 0.5s linear, color 0.3s linear;

	transition: max-height 0.5s linear, color 0.3s linear;

}



/* Checked */



.event input[type="radio"]:checked + label:after {

	content: '\2714';

	color: #F26328;

	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);

}



.event input[type="radio"]:checked ~ .content-perspective:before {

	background: #F26328;

}



.event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {

	color: #F26328;

}



body.rtl .event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {

	font-family: 'HelveticaNeueW23';

}



body.rtl .content-inner h3{font-family: 'HelveticaNeueW23';}



.event input[type="radio"]:checked ~ .content-perspective .content {

	-webkit-transform: rotateY(-5deg);

	-moz-transform: rotateY(-5deg);

	-o-transform: rotateY(-5deg);

	-ms-transform: rotateY(-5deg);

	transform: rotateY(-5deg);

}



.event input[type="radio"]:checked ~ .content-perspective .content-inner {

	border-color: #F26328;

	box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);

}



.event input[type="radio"]:checked ~ .content-perspective .content-inner p {

	max-height: 260px; /* Add media queries */

	color: rgba(0,0,0,0.6);

	-webkit-transition-delay: 0s, 0.6s;

	-moz-transition-delay: 0s, 0.6s;

	-o-transition-delay: 0s, 0.6s;

	-ms-transition-delay: 0s, 0.6s;

	transition-delay: 0s, 0.6s;

}



body.rtl .event input[type="radio"]:checked ~ .content-perspective .content-inner p{

	font-family: 'HelveticaNeueW23';

	text-align:right;

}



.event input[type="radio"]:checked ~ .content-perspective .content-inner:before {

	color: #F26328;

}



.event input[type="radio"]:checked ~ .thumb {

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-o-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	box-shadow: 

		0 0 0 8px rgba(242,99,40,1), 

		0 1px 1px rgba(255,255,255,0.5);

}



.event input[type="radio"]:checked ~ .thumb span {

	color: #F26328;

}



.event input[type="radio"]:checked ~ .thumb:before {

	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);

}



.content-inner p,

.thumb span,

.event label {

	-webkit-backface-visibility: hidden;

}



@media screen and (max-width: 850px) { 

	.content-inner h3 {

		font-size: 20px;

	}



	.content-inner p {

		font-size: 14px;

		text-align: justify;

	}



	.event input[type="radio"]:checked ~ .content-perspective .content-inner p {

		max-height: 500px; 

	}

}



@media screen and (max-width: 540px) {

	.timeline::before {

		left: 50px;

	}



	.event { 

		padding-right: 0px;

		margin-bottom: 100px;

	}





	.thumb {

		-webkit-transform: scale(0.8);

		-moz-transform: scale(0.8);

		-o-transform: scale(0.8);

		-ms-transform: scale(0.8);

		transform: scale(0.8);

	}



	.event input[type="radio"] {

		width: 100px;

		height: 100px;

		left: 0px;

		top: 0px;

	}



	.thumb:before,

	.event input[type="radio"]:checked ~ .thumb:before {

		background: none;

		width: 0;

	}



	.event label {

		display: none;

	}



	.content-perspective {

		margin-left: 0px; 

		top: 80px;

	}



	.content-perspective:before {

		height: 0px; 

	}



	.content {

		-webkit-transform: rotateX(-10deg);

		-moz-transform: rotateX(-10deg);

		-o-transform: rotateX(-10deg);

		-ms-transform: rotateX(-10deg);

		transform: rotateX(-10deg);

	}



	.event input[type="radio"]:checked ~ .content-perspective .content {

		-webkit-transform: rotateX(10deg);

		-moz-transform: rotateX(10deg);

		-o-transform: rotateX(10deg);

		-ms-transform: rotateX(10deg);

		transform: rotateX(10deg);

	}



	.content-inner {

		border-left: none;

		border-top: 5px solid #41838e;

	}



	.event input[type="radio"]:checked ~ .content-perspective .content-inner {

		border-color: #F26328;

		box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);

	}



	.content-inner:before {

		content: '\25b4';

		left: 33px;

		top: -32px;

	}



	.event input[type="radio"]:checked ~ .content-perspective .content-inner p {

		max-height: 300px; 

	}

}