#wrapper{
	width:800px;
	margin:0 auto;
}
#wrapper a{
	color:#003E49;
}
#mainholder{
	margin-top:25%;
}
#hovereddemo,
#heartbeatdemo{
	margin-top:5%;
}
.row{
	margin-top:10px;
	margin-bottom:20px;
	width:100%;
}
.span1{
	width:100%;
	text-align:center;
	margin:0 auto;
}
.span3{
	width:33.33%;
}
.span4{
	width:25%;
}
.span5{
	width:20%;
}

.linkBtn{
	display:block;
	margin:10px auto;
	position:relative;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
}
.txtMain{
	display:block;
	font-weight:bold;
	text-transform:uppercase;
}
.txtDesc{
	display:block;
	font-style:italic;
}

/* circle */

.circ{
	color:#003E49;
	background-color: #87e0fd;
	border:3px solid rgba(255,255,255,0.5);
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	
	transform-origin:50% 10%;
	animation-name: fancydown;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	
	-moz-transform-origin:50% 10%;
	-moz-animation-name: fancydown;
	-moz-animation-duration: 0.3s;
	-moz-animation-timing-function: ease-in-out;
	
	-webkit-transform-origin:50% 10%;
	-webkit-animation-name: fancydown;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	
	-o-transform-origin:50% 10%;
	-o-animation-name: fancydown;
	-o-animation-duration: 0.3s;
	-o-animation-timing-function: ease-in-out;
}
.circ.circ2{
	letter-spacing:3px;
	color:#fff;
	background-color: #ffc000;
	box-shadow:7px 8px 16px white inset, -3px -8px 44px #9b7400 inset;
	-moz-box-shadow:7px 8px 16px white inset, -3px -8px 44px #9b7400 inset;
	-webkit-box-shadow:7px 8px 16px white inset, -3px -8px 44px #9b7400 inset;
}
.circ .txtMain{
	font-family: Impact, Charcoal, sans-serif;
	text-shadow:0 1px 2px #CCF7FF;
	
	animation-name: titledown;
	animation-duration: 0.3s;
	
	-moz-animation-name: titledown;
	-moz-animation-duration: 0.3s;
	
	-webkit-animation-name: titledown;
	-webkit-animation-duration: 0.3s;
	
	-o-animation-name: titledown;
	-o-animation-duration: 0.3s;
}
.circ .txtDesc{
	animation-name: textdown;
	animation-duration: 0.4s;
	
	-moz-animation-name: textdown;
	-moz-animation-duration: 0.4s;
	
	-webkit-animation-name: textdown;
	-webkit-animation-duration: 0.4s;
	
	-o-animation-name: textdown;
	-o-animation-duration: 0.4s;
}
.circ:hover{
	animation-name: fancyup;
	animation-duration: 0.4s;
	
	-moz-animation-name: fancyup;
	-moz-animation-duration: 0.4s;
	
	-webkit-animation-name: fancyup;
	-webkit-animation-duration: 0.4s;
	
	-o-animation-name: fancyup;
	-o-animation-duration: 0.4s;
}
.circ:hover .txtMain {
	animation-name: titleup;
	animation-duration: 0.4s;
	transform: translateY(-20px);
	
	-moz-animation-name: titleup;
	-moz-animation-duration: 0.4s;
	-moz-transform: translateY(-20px);
	
	-webkit-animation-name: titleup;
	-webkit-animation-duration: 0.4s;
	-webkit-transform: translateY(-20px);
	
	-o-animation-name: titleup;
	-o-animation-duration: 0.4s;
	-o-transform: translateY(-20px);
}
.circ:hover .txtDesc {
	animation-name: textup;
	animation-duration: 0.5s;
	transform: translateY(-15px);
	
	-moz-animation-name: textup;
	-moz-animation-duration: 0.5s;
	-moz-transform: translateY(-15px);
	
	-webkit-animation-name: textup;
	-webkit-animation-duration: 0.5s;
	-webkit-transform: translateY(-15px);
	
	-o-animation-name: textup;
	-o-animation-duration: 0.5s;
	-o-transform: translateY(-15px);
}
/* Big circle */
.circBig{
	width:180px;
	height:180px;
	background-color: #87e0fd;
	
	box-shadow:7px 8px 16px #fff inset, -3px -8px 44px #026184 inset;
	-moz-box-shadow:7px 8px 16px #fff inset, -3px -8px 44px #026184 inset;
	-webkit-box-shadow:7px 8px 16px #fff inset, -3px -8px 44px #026184 inset;
}
.circBig .txtMain{
	font-size:37px;
	margin-top:80px;
	margin-bottom:5px;
}
.circBig .txtDesc{
	font-size:17px;
	font-style:normal;
	font-weight:bold;
}
/* small circle */
.circSmall{
	width:100px;
	height:100px;
	background-color: #87e0fd;
	
	box-shadow:7px 8px 16px #fff inset, -3px -8px 44px #026184 inset;
	-moz-box-shadow:7px 8px 16px #fff inset, -3px -8px 44px #026184 inset;
	-webkit-box-shadow:7px 8px 16px #fff inset, -3px -8px 44px #026184 inset;
}
.circSmall .txtMain{
	margin-top:40px;
	font-size:20px;
}

/* rect */
.skewleft{
	transform: skew(-10deg);
	-moz-transform: skew(-10deg);
	-webkit-transform: skew(-10deg);
	-o-transform: skew(-10deg);
}
.skewright{
	transform: skew(10deg);
	-moz-transform: skew(10deg);
	-webkit-transform: skew(10deg);
	-o-transform: skew(10deg);
}
.rectBox{
	margin-top:55px;
}
.rect{
	width:220px;
	height:60px;
	color:#003E49;
	background-color: #FCFBD9;
	border:3px solid rgba(255, 255, 255, 0.5);
	
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	
	box-shadow:9px 8px 15px white inset, -1px -3px 30px #5E5B00 inset;
	-moz-box-shadow:9px 8px 15px white inset, -1px -3px 30px #5E5B00 inset;
	-webkit-box-shadow:9px 8px 15px white inset, -1px -3px 30px #5E5B00 inset;
	
	animation-name: fancydown;
	animation-duration: 0.3s;
	
	-moz-animation-name: fancydown;
	-moz-animation-duration: 0.3s;
	
	-webkit-animation-name: fancydown;
	-webkit-animation-duration: 0.3s;
	
	-o-animation-name: fancydown;
	-o-animation-duration: 0.3s;
}
.rectBoxLeft .rect{
	transform-origin:90% 50%;
	-moz-transform-origin:90% 50%;
	-webkit-transform-origin:90% 50%;
	-o-transform-origin:90% 50%;
}
.rectBoxRight .rect{
	transform-origin:10% 50%;
	-moz-transform-origin:10% 50%;
	-webkit-transform-origin:10% 50%;
	-o-transform-origin:10% 50%;
}
.rect:hover{
	animation-name: fancyup;
	animation-duration: 0.4s;
	
	-moz-animation-name: fancyup;
	-moz-animation-duration: 0.4s;
	
	-webkit-animation-name: fancyup;
	-webkit-animation-duration: 0.4s;
	
	-o-animation-name: fancyup;
	-o-animation-duration: 0.4s;
}
.rect .txtMain{
	display:block;
	font-size:17px;
	margin-top:15px;
	text-shadow:1px 1px 0 #fff;
}
.skewleft .rect .txtMain{
	animation-name: textright;
	animation-duration: 0.4s;
	
	-moz-animation-name: textright;
	-moz-animation-duration: 0.4s;
	
	-webkit-animation-name: textright;
	-webkit-animation-duration: 0.4s;
	
	-o-animation-name: textright;
	-o-animation-duration: 0.4s;
}
.skewleft .rect:hover .txtMain {
	animation-name: textleft;
	animation-duration: 0.4s;
	animation-delay: 0.1s;
	
	-moz-animation-name: textleft;
	-moz-animation-duration: 0.4s;
	-moz-animation-delay: 0.1s;
	
	-webkit-animation-name: textleft;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-delay: 0.1s;
	
	-o-animation-name: textleft;
	-o-animation-duration: 0.4s;
	-o-animation-delay: 0.1s;
}	
.skewright .rect .txtMain{
	animation-name: textleft;
	animation-duration: 0.4s;
	
	-moz-animation-name: textleft;
	-moz-animation-duration: 0.4s;
	
	-webkit-animation-name: textleft;
	-webkit-animation-duration: 0.4s;
	
	-o-animation-name: textleft;
	-o-animation-duration: 0.4s;
}
.skewright .rect:hover .txtMain {
	animation-name: textright;
	animation-duration: 0.4s;
	animation-delay: 0.1s;
	
	-moz-animation-name: textright;
	-moz-animation-duration: 0.4s;
	-moz-animation-delay: 0.1s;
	
	-webkit-animation-name: textright;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-delay: 0.1s;
	
	-o-animation-name: textright;
	-o-animation-duration: 0.4s;
	-o-animation-delay: 0.1s;
}	

/* heart */
.heart{
	margin:0 auto;
}
.heartbeat{
	display:block;
	width:200px;
	height:200px;
	
	transform-origin:30% 30%;
	-moz-transform-origin:30% 30%;
	-webkit-transform-origin:30% 30%;
	-o-transform-origin:30% 30%;
	
	animation-name: heartbeatslow;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	
	-moz-animation-name: heartbeatslow;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
	
	-webkit-animation-name: heartbeatslow;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	
	-o-animation-name: heartbeatslow;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: ease-in-out;
}
.heartbeat:hover{
	animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	-o-animation-duration: 0.5s;
}
.heartbeat span{
	display:block;
	position:absolute;
	bottom:10px;
	width:120px;
	height:200px;
	background-color:#C50011;
	border-radius:100px 100px 0 0;
	-moz-border-radius:100px 100px 0 0;
	-webkit-border-radius:100px 100px 0 0;
}
.heartbeat .heartleft{
	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	left:10px;
	box-shadow:-2px 5px 5px white inset;
	-moz-box-shadow:-2px 5px 5px white inset;
	-webkit-box-shadow:-2px 5px 5px white inset;
}
.heartbeat .heartright{
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	left:66px;
	box-shadow:-6px 4px 6px #660008 inset;
	-moz-box-shadow:-6px 4px 6px #660008 inset;
	-webkit-box-shadow:-6px 4px 6px #660008 inset;
}

.paged{
	position:absolute;
}
.paged:target{
	z-index:10;
}
.paged > .column{
	opacity:0;
	
	transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	
	transition:all 1.5s cubic-bezier(0.5, -0.5, 0, 0.5); 
	-moz-transition:all 1.5s cubic-bezier(0.5, -0.5, 0, 0.5); 
	-webkit-transition:all 1.5s cubic-bezier(0.5, 0, 0, 0.5); 
	-webkit-transition:all 1.5s cubic-bezier(0.5, -0.5, 0, 0.5); 
	-o-transition:all 1.5s cubic-bezier(0.5, -0.5, 0, 0.5); 
}
.paged:target > .column{
	opacity:1;
	transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	
	transition:all 1.5s cubic-bezier(0, 0.5, 0.5, 1.5) 1s; 
	-moz-transition:all 1.5s cubic-bezier(0, 0.5, 0.5, 1.5) 1s; 
	-webkit-transition:all 1.5s cubic-bezier(0, 0.5, 0.5, 1) 1s; 
	-webkit-transition:all 1.5s cubic-bezier(0, 0.5, 0.5, 1.5) 1s; 
	-o-transition:all 1.5s cubic-bezier(0, 0.5, 0.5, 1.5) 1s; 
}

/* circle animation (hover over) */
@keyframes fancyup {
	0% { transform: scale(1); border-width:3px;}
	50% { transform: scale(1.1); border-width:4;}
	75% { transform: scale(0.95); border-width:2px;}
	100% { transform: scale(1); border-width:3px;}
}
@-moz-keyframes fancyup {
	0% { -moz-transform: scale(1); border-width:3px;}
	50% { -moz-transform: scale(1.1); border-width:4;}
	75% { -moz-transform: scale(0.95); border-width:2px;}
	100% { -moz-transform: scale(1); border-width:3px;}
}
@-webkit-keyframes fancyup {
	0% { -webkit-transform: scale(1); border-width:3px;}
	50% { -webkit-transform: scale(1.1); border-width:4;}
	75% { -webkit-transform: scale(0.95); border-width:2px;}
	100% { -webkit-transform: scale(1); border-width:3px;}
}
@-o-keyframes fancyup {
	0% { -o-transform: scale(1); border-width:3px;}
	50% { -o-transform: scale(1.1); border-width:4;}
	75% { -o-transform: scale(0.95); border-width:2px;}
	100% { -o-transform: scale(1); border-width:3px;}
}
/* circle animation (hover out) */
@keyframes fancydown {
	0% { transform: scale(1); border-width:3px;}
	30% { transform: scale(0.93); border-width:2px;}
	50% { transform: scale(0.93); border-width:2px;}
	80% { transform: scale(1); border-width:3px;}
	100% { transform: scale(1);border-width:3px; }
}
@-moz-keyframes fancydown {
	0% { -moz-transform: scale(1); border-width:3px;}
	30% { -moz-transform: scale(0.93); border-width:2px;}
	50% { -moz-transform: scale(0.93); border-width:2px;}
	80% { -moz-transform: scale(1); border-width:3px;}
	100% { -moz-transform: scale(1);border-width:3px; }
}
@-webkit-keyframes fancydown {
	0% { -webkit-transform: scale(1); border-width:3px;}
	30% { -webkit-transform: scale(0.93); border-width:2px;}
	50% { -webkit-transform: scale(0.93); border-width:2px;}
	80% { -webkit-transform: scale(1); border-width:3px;}
	100% { -webkit-transform: scale(1);border-width:3px; }
}
@-o-keyframes fancydown {
	0% { -o-transform: scale(1); border-width:3px;}
	30% { -o-transform: scale(0.93); border-width:2px;}
	50% { -o-transform: scale(0.93); border-width:2px;}
	80% { -o-transform: scale(1); border-width:3px;}
	100% { -webkit-transform: scale(1);border-width:3px; }
}

/* text1 animation (hover over) */
@keyframes titleup {
	0% { transform: translateY(0px); }
	100% { transform: translateY(-20px); }
}
@-moz-keyframes titleup {
	0% { -moz-transform: translateY(0px); }
	100% { -moz-transform: translateY(-20px); }
}
@-webkit-keyframes titleup {
	0% { -webkit-transform: translateY(0px); }
	100% { -webkit-transform: translateY(-20px); }
}
@-o-keyframes titleup {
	0% { -o-transform: translateY(0px); }
	100% { -o-transform: translateY(-20px); }
}
/* text1 animation (hover out) */
@keyframes titledown {
	0% { transform: translateY(-20px); }
	70% { transform: translateY(5px); }
	100% { transform: translateY(0px); }
}
@-moz-keyframes titledown {
	0% { -moz-transform: translateY(-20px); }
	70% { -moz-transform: translateY(5px); }
	100% { -moz-transform: translateY(0px); }
}
@-webkit-keyframes titledown {
	0% { -webkit-transform: translateY(-20px); }
	70% { -webkit-transform: translateY(5px); }
	100% { -webkit-transform: translateY(0px); }
}
@-o-keyframes titledown {
	0% { -o-transform: translateY(-20px); }
	70% { -o-transform: translateY(5px); }
	100% { -o-transform: translateY(0px); }
}

/* text2 animation (hover over) */
@keyframes textup {
	0% { transform: translateY(0px); }
	100% { transform: translateY(-15px); }
}
@-moz-keyframes textup {
	0% { -moz-transform: translateY(0px); }
	100% { -moz-transform: translateY(-15px); }
}
@-webkit-keyframes textup {
	0% { -webkit-transform: translateY(0px); }
	100% { -webkit-transform: translateY(-15px); }
}
@-o-keyframes textup {
	0% { -o-transform: translateY(0px); }
	100% { -o-transform: translateY(-15px); }
}
/* text2 animation (hover out) */
@keyframes textdown {
	0% { transform: translateY(-15px); }
	70% { transform: translateY(5px); }
	100% { transform: translateY(0px); }
}
@-moz-keyframes textdown {
	0% { -moz-transform: translateY(-15px); }
	70% { -moz-transform: translateY(5px); }
	100% { -moz-transform: translateY(0px); }
}
@-webkit-keyframes textdown {
	0% { -webkit-transform: translateY(-15px); }
	70% { -webkit-transform: translateY(5px); }
	100% { -webkit-transform: translateY(0px); }
}
@-o-keyframes textdown {
	0% { -o-transform: translateY(-15px); }
	70% { -o-transform: translateY(5px); }
	100% { -o-transform: translateY(0px); }
}


/* text2 right animation (hover over) */
@keyframes textright {
	0% { transform: translateX(0px); }
	50% { transform: translateX(5px); }
	100% { transform: translateX(0px); }
}
@-moz-keyframes textright {
	0% { -moz-transform: translateX(0px); }
	50% { -moz-transform: translateX(5px); }
	100% { -moz-transform: translateX(0px); }
}
@-webkit-keyframes textright {
	0% { -webkit-transform: translateX(0px); }
	50% { -webkit-transform: translateX(5px); }
	100% { -webkit-transform: translateX(0px); }
}
@-o-keyframes textright {
	0% { -o-transform: translateX(0px); }
	50% { -o-transform: translateX(5px); }
	100% { -o-transform: translateX(0px); }
}

@keyframes textleft {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-5px); }
	100% { transform: translateX(0px); }
}
@-moz-keyframes textleft {
	0% { -moz-transform: translateX(0px); }
	50% { -moz-transform: translateX(-5px); }
	100% { -moz-transform: translateX(0px); }
}
@-webkit-keyframes textleft {
	0% { -webkit-transform: translateX(0px); }
	50% { -webkit-transform: translateX(-5px); }
	100% { -webkit-transform: translateX(0px); }
}
@-o-keyframes textleft {
	0% { -o-transform: translateX(0px); }
	50% { -o-transform: translateX(-5px); }
	100% { -o-transform: translateX(0px); }
}

/* hearbeat */
@keyframes heartbeatslow {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.05); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.03); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}
@-moz-keyframes heartbeatslow {
	0% { -moz-transform: scale(1); }
	30% { -moz-transform: scale(1); }
	40% { -moz-transform: scale(1.05); }
	50% { -moz-transform: scale(1); }
	60% { -moz-transform: scale(1); }
	70% { -moz-transform: scale(1.03); }
	80% { -moz-transform: scale(1); }
	100% { -moz-transform: scale(1); }
}
@-webkit-keyframes heartbeatslow {
	0% { -webkit-transform: scale(1); }
	30% { -webkit-transform: scale(1); }
	40% { -webkit-transform: scale(1.05); }
	50% { -webkit-transform: scale(1); }
	60% { -webkit-transform: scale(1); }
	70% { -webkit-transform: scale(1.03); }
	80% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
@-o-keyframes heartbeatslow {
	0% { -o-transform: scale(1); }
	30% { -o-transform: scale(1); }
	40% { -o-transform: scale(1.05); }
	50% { -o-transform: scale(1); }
	60% { -o-transform: scale(1); }
	70% { -o-transform: scale(1.03); }
	80% { -o-transform: scale(1); }
	100% { -o-transform: scale(1); }
}