/*-------------------------
	Simple reset
--------------------------*/


*{
	margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/


html{
	background: #000000;
}

body{
	
}

p + p { margin-top: 0.5em; }

#personal a, #personal a:visited {
	text-decoration:none;
	outline:inherit;
	color: #000000;
	background: #ffffff;
	margin-left: -2px;
	line-height:170%;
	padding: 1px 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 3px;
	-moz-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
}
#personal {
	position: absolute;
	bottom:21px;
	left:15px;
	font-size: 11px;
	font-family: bank_gothicMedium;
	letter-spacing:0px;
	line-height: 170%;
	color: #ffffff;
}

#footerWhite3 a, footerWhite3 a:visited, footerWhite3 a:hover {
	text-decoration:none;
	color: #000000;
	padding: 0px 20px;
}

#personal a:hover {
	text-decoration:none;
	background: #54a6de;
}

section, footer{
	display: block;
}

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

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

/*----------------------------
	Styling the forms
-----------------------------*/


#formContainers, #formContainersBack{
	position:fixed;
	top: 50%;
	left: 50%;
	margin-top: -170px;
	margin-left: -289px;
	overflow: visible;
	z-index:1;
	/*text-indent: -9999px;*/
	-moz-perspective: 1600px;
	-webkit-perspective: 1600px;
	perspective: 1600px;
	
}

#formContainer form, #formContainerBack, #formContainer3 form, #formContainerBack3{
	width:214px;
	height:340px;
	margin: 0px;
	position:absolute;
	top: 0px;
}

#formContainer form, #formContainerBack{ left: 50px;}
#formContainer3 form, #formContainerBack3{ left: 314px;}

#formContainer form, #formContainer3 form, #formContainerMobile form{
	-moz-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border-radius: 15px;
}

#formContainer form, #formContainerMobile form{	
	/* Enabling 3d space for the transforms */
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	/* When the forms are flipped, they will be hidden */
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/* Enabling a smooth animated transition */
	-moz-transition:0.8s;
	-webkit-transition:0.8s;
	transition:0.8s;
	
	/* Configure a keyframe animation for Firefox */
	-moz-animation: pulse 2s infinite;
	
	/* Configure it for Chrome and Safari */
	-webkit-animation: pulse 2s infinite;
	
	/* For IE 9 */
	box-shadow: 0 0 15px #54a6de;
}


/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
	0%{		box-shadow:0 0 5px #54a6de;}
	50%{	box-shadow:0 0 11px #54a6de;}
	100%{	box-shadow:0 0 5px #54a6de;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
	0%{		box-shadow:0 0 5px #54a6de;}
	50%{	box-shadow:0 0 15px #54a6de;}
	100%{	box-shadow:0 0 5px #54a6de;}
}

#formContainer3 form{	
	
	-moz-box-shadow:0 0 5px #54a6de;
	-webkit-box-shadow:0 0 6px #54a6de;
	box-shadow: 0 0 12px #54a6de;
}

#front, #front3{
	width: 214px;
	height: 340px;
	
	z-index:100;	
	visibility:visible;
}

#front.flipped, #front3.flipped{
	
	z-index:1;	
	visibility:hidden;
}

#back, #back3{
	
	width: 214px;
	height: 340px;	
	z-index:2;
	visibility:hidden;
	
	/* Rotating the back form form by default */
	-moz-transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

#formContainer.flipped #front, #formContainer3.flipped #front3{
	
	visibility:hidden;
	
	/**
	 * Rotating the front form when the
	 * flipped class is added to the container
	 */
	
	-moz-transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

#formContainer.flipped #back, #formContainer3.flipped #back3{
	
	visibility:visible;
	
	/* Rotating the back div into view */
	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

#formContainerBack.flipped, #formContainerBack3.flipped{
	
	visibility:hidden;
	
}

/*----------------------------
	Inputs, Buttons & Links
-----------------------------*/


#formContainerBack, #formContainerBack3{
	height: 340px;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 214px;
    z-index:205;
    visibility:visible;
}

#imageBack{
	display:none;
	width:578px;
	height:340px;
	background:url('../img/heads.png') no-repeat;
	background-size: 750px 340px;
	position:absolute;
	left:0px;
	top:0px;
}

#cardWhite, #cardBlack{
	position: absolute;
	top:0px;
	left:0px;
	height:325px;
	width: 214px;
	background-color: #ffffff;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
#cardWhite{background-color: #ffffff;}
#cardBlack{background-color: #000000;}

#footerBlack, #footerWhite, #footerWhite3{
	position: absolute;
	top:325px;
	left:0px;
	height:15px;
	width: 214px;
	background-color: #000000;
	-moz-border-radius-bottomleft: 15px;
	-moz-border-radius-bottomright: 15px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	color: #ffffff;
	font-size: 11px;
	font-family: bank_gothicMedium;
	vertical-align: middle;
	text-align: center;
	letter-spacing:1px;
}
#footerBlack{background-color: #000000;	color: #ffffff;}
#footerWhite, #footerWhite3{background-color: #ffffff;	color: #000000;}

#footerWhite3:hover {
	background: #54a6de;
	}

#logoWhite, #logoBlack, #productionsBlack, #productionsWhite, #footerBlack, #footerWhite{
	-moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;
    onselectstart:"return false";
    cursor:default;
}

#logoWhite, #logoBlack{
	position: absolute;
	top: 151px;
	left: 32px;
	width: 149px;
	height: 39px;
	background-repeat: no-repeat;
	background-size: 149px 39px;
	-moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;
}

#logoWhite{background-image: url('../img/logo_white.png');}
#logoBlack{background-image: url('../img/logo_black.png');}

#productionsBlack, #productionsWhite{
	position: absolute;
	bottom:-3px;
	left:0px;
	font-size: 9px;
	font-family: bank_gothicMedium;
	letter-spacing:3px;
	
}
#productionsBlack{color: #000000;}
#productionsWhite{color: #ffffff;}