@import url(http://fonts.googleapis.com/css?family=Patrick+Hand+SC);

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 11, 2014 */



@font-face {
    font-family: 'agendabold';
    src: url('font/agenda-bold-webfont.eot');
    src: url('font/agenda-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/agenda-bold-webfont.woff') format('woff'),
         url('font/agenda-bold-webfont.ttf') format('truetype'),
         url('font/agenda-bold-webfont.svg#agendabold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'agendaregular';
    src: url('font/agenda-light-webfont.eot');
    src: url('font/agenda-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/agenda-light-webfont.woff') format('woff'),
         url('font/agenda-light-webfont.ttf') format('truetype'),
         url('font/agenda-light-webfont.svg#agendaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'agendamedium';
    src: url('font/agenda-medium-webfont.eot');
    src: url('font/agenda-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/agenda-medium-webfont.woff') format('woff'),
         url('font/agenda-medium-webfont.ttf') format('truetype'),
         url('font/agenda-medium-webfont.svg#agendamedium') format('svg');
    font-weight: normal;
    font-style: normal;

}



/*
*  html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

body {background: #00BAC4; width: 100%; height: 100%;}
canvas {background: #00BAC4;width: 100%; height: 100%;}

#background {
display: block;
position: fixed;
top: 0;
z-index: 1;
height: 100%;
width: 100%;
background: #00BAC4;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#signup-page-wrapper {
height: 100%;
width: 100%;
display: table;
vertical-align: middle;
position: relative;
z-index: 900;
}

.cspHtmlContainerWrapper {
width: 760px;
padding: 20px;
position: relative;
margin: 0 auto;
-webkit-border-radius: 8px;
border-radius: 8px;
z-index: 2;
text-align: center;
font-family: 'Patrick Hand SC', cursive;
}

/* entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	position: relative;
	-webkit-transform: rotateY(0);
	-moz-transform: rotateY(0);
	-ms-transform: rotateY(0);
	-o-transform: rotateY(0);
	transform: rotateY(0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {

	}

#main_flip {
	-webkit-transform: rotateY(0);
	-moz-transform: rotateY(0);
	-ms-transform: rotateY(0);
	-o-transform: rotateY(0);
	transform: rotateY(0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-container, .front, .back {
	width: 100%;
	max-width: 278px;
	height: 835px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 80px;
}

/* flip speed goes here */
.flipper {
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	position: relative;
/*	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);*/
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

#anon_face {
position: absolute;
width: 100%;
top: 440px;
}

#list {
	position: absolute;
	top: 572px;
	width: 100%;
	font-family: agendaregular;
	font-size: 22px;
}

#email {
	position: absolute;
	top: 726px;
	width:100%;
	display:block;
}
#email a {
	font-family: agendabold;
	text-decoration: none;
	color:black;
	font-size:15px;
	width:100%;
	display:block;
}

#address {
	position: absolute;
	top: 768px;
	width:100%;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 15px;
}

#list > ul > li {
padding: 6px;
list-style-type: none;
}
#list > ul > li:before {
	content:url(bb-list-style.png);
	position: relative;
	right: 8px;
}

#address > span {
display: block;
font-family: agendaregular;
}
#address > span:nth-child(3) {
	font-family: agendabold;
	font-size:12px;
}
#email span {color:#00BAC4;}

#list li {
/*	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-ms-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;*/
}

#flipme {

	-webkit-transform: rotateY(0);
	-moz-transform: rotateY(0);
	-ms-transform: rotateY(0);
	-o-transform: rotateY(0);
	transform: rotateY(0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#email:hover {
    -webkit-animation: jiggle 0.2s infinite;
    -moz-animation-duration: 0.2s;
    -moz-animation-name: jiggle;
    -moz-animation-iteration-count: infinite;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

@-webkit-keyframes flipOver {
	0% {
		-webkit-transform: rotate3d(1,0,0,0deg);
		-moz-transform: rotate3d(1,0,0,0deg);
		-ms-transform: rotate3d(1,0,0,0deg);
		-o-transform: rotate3d(1,0,0,0deg);
		transform: rotate3d(1,0,0,0deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: rotate3d(1,0,0,360deg);
		-moz-transform: rotate3d(1,0,0,360deg);
		-ms-transform: rotate3d(1,0,0,360deg);
		-o-transform: rotate3d(1,0,0,360deg);
		transform: rotate3d(1,0,0,360deg);
		opacity: 1;
	}
}
@-moz-keyframes flipOver {
	0% {
		-webkit-transform: rotate3d(1,0,0,0deg);
		-moz-transform: rotate3d(1,0,0,0deg);
		-ms-transform: rotate3d(1,0,0,0deg);
		-o-transform: rotate3d(1,0,0,0deg);
		transform: rotate3d(1,0,0,0deg);
	}
	100% {
		-webkit-transform: rotate3d(1,0,0,360deg);
		-moz-transform: rotate3d(1,0,0,360deg);
		-ms-transform: rotate3d(1,0,0,360deg);
		-o-transform: rotate3d(1,0,0,360deg);
		transform: rotate3d(1,0,0,360deg);
	}
}

@-moz-keyframes jiggle {
    0% {
        -moz-transform: rotate(-1deg);
}
50% {
    -moz-transform: rotate(1deg);
}
}

@-webkit-keyframes jiggle {
    0% {
        -webkit-transform: rotate(-1deg);
}
50% {
    -webkit-transform: rotate(1deg);
}
}