/*
Name       : Emma Homepage V2.0
Version    : 1.0
Released   : 20120723
*/
@font-face { font-family: 'helvetica neue'; src: local('Arial'); }
@font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
@font-face{font-family: Lava; src: url('../fonts/Lava Vision.ttf');}
@font-face{font-family: FacebookFont; src: url('../fonts/FaceBook.otf');}

html {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Open Sans', sans-serif;

	/*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; */
	height: 100%;
}
body{
	width:100%;
	margin: 0;
}
body h3{
	margin-top: 0px;
	margin-left: 15px;
	padding-top: 20px;
}
br.clear {
	clear: both;
}
img.left {
	float: left;
	margin: 0 20px 0 0;
}
.spacer{
	height:50px;
}
a:link{
	color: #000000;
}
/*******************************************************************/
#header{

}
#socialHeader{
	width:97%;
	background-color:transparent;
	margin-right:20px;
	text-align:right;
	color:black;
	position:fixed;
	z-index: 5;
}
.scrollBar{
	z-index:25;
	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
.socialSymbol{
	font-size:1.75em;
	opacity:0.0;
	z-index: 5;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
.backButtonHeader{
	position:fixed;
	width:100%;
	top:0px;
	text-align:center;
	padding-top:20px;
}
.backButton{
	width:312px;
	height:90px;
	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
#cover{
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.6);
	z-index:5;
	width:100%;
	height:100%;
	display:none;

	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
@media only screen and (max-device-width: 480px) {
  /* define mobile specific styles come here */
.socialSymbol{
	font-size:3em;
}
.scrollBar{
	padding-top:25px;
}
.backButton{
	width:624px;
	height:180px;
}
}
/*******************************************************************/
#mainBody{
	display:inline;
}

#mainEmma{
	bottom:0px;
	text-align:center;
}
#emma{
	/* TODO: Dynamically change the padding to align in the center */
	padding-top: 150px;
}
#emmaLogoDiv{
	text-align:center;
}
#emmaLogo{
	height:auto;
	width: 20%;
	min-width: 120px;
	max-width: 220px;

	filter: blur(10px); /* Doesn't work anywhere yet */
	-webkit-filter: blur(10px);
	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
#emmaTitleDiv{
	text-align:center;
}
#emmaTitle{
	height:auto;
	width: 27%;
	min-width: 150px;
	max-width: 300px;

	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
@media only screen and (max-device-width: 480px) {
  /* define mobile specific styles come here */
#emma{
	padding-top:30%;
}
#emmaLogo{
	height:auto;
	width: 75%;
	max-width: 350px;
}
#emmaTitle{
	height:auto;
	width: 50%;
	max-width: 500px;
}

}
/******************************************************************/
#iconDiv{
	width:100%;
	position: fixed;
	bottom: 10px;
}
.iconRow{
    text-align:center;
}
.mainIcon{
    display:inline-block;

	width:170px;
	height:85px;

    margin:5px 40px;
    padding:5px;
	-webkit-transition-duration: 2.7s; /* Safari */
	transition-duration: 2.7s;
}
.mainIcon img{

	width:30px;
	height:30px;

	opacity:0.0;
	-webkit-transition-duration: 0.72s; /* Safari */
	transition-duration: 0.72s;
}
.mainTitle{
    display:inline-block;
	font-family:FacebookFont;
	font-weight:normal;
	color:#333333;
	margin:25px 40px;
    padding:5px;

	font-size: 2em;

	width:170px;

	opacity:0.0;
	-webkit-transition-duration: 2.7s; /* Safari */
	transition-duration: 2.7s;
}
@media only screen and (max-device-width: 480px) {
  /* define mobile specific styles come here */
#iconDiv{
	padding-top:60px;
	bottom: 30px;
}

.mainIcon{
	width:155px;
	height:100px;
}
.mainIcon img{
	width:30px;
	height:30px;
}
.mainTitle{
	width:155px;
	font-size: 2.4em;
}

}

/******************************************************************/
/********************** L O A D I N G *****************************/
/******************************************************************/
#loadingID{
	-webkit-transition-duration: 0.7s; /* Safari */
	transition-duration: 0.7s;
}
.loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ce4233;
  letter-spacing: 0.2em;
}
.loader::before, .loader::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ce4233;
  position: absolute;
  -webkit-animation: load .7s infinite alternate ease-in-out;
          animation: load .7s infinite alternate ease-in-out;
}
.loader::before {
  top: 0;
}
.loader::after {
  bottom: 0;
}

@-webkit-keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }
  50% {
    height: 8px;
    width: 40px;
  }
  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }
  50% {
    height: 8px;
    width: 40px;
  }
  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}
/******************************************************************/
/************************* A P P S ********************************/
/******************************************************************/
#appBody{
	display:none;
}
#appTable{
	margin-top:120px;
	margin-left:auto;
	margin-right:auto;
	-webkit-transition-duration: 0.72s; /* Safari */
	transition-duration: 0.72s;
}
.app{
	padding:30px;
}
.appDiv{
	height:150px;
	width:150px;
}
.appIcon{
	height:30px;
	width:30px;
	opacity:0.0;

	margin-left:60px;
	margin-top:60px;

	/*-ms-transform-origin: 0% 0%; /* IE 9 */
	/*-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
	/*transform-origin: 0% 0%;  /* HTML5 */

	-webkit-transition-duration: 0.72s; /* Safari */
	transition-duration: 0.72s;
}
.appTitle{
	padding-top:10px;
	opacity:0.0;
	font-size:1.5em;
	text-align:center;
	-webkit-transition-duration: 2.7s; /* Safari */
	transition-duration: 2.7s;
}
.appTitleInner{
	position: absolute;
	visibility: hidden;
	whitespace: nowrap;
}
/*Special font size because of long name*/
#powerplaylistTitle{
	font-size:1.5em;
}
@media only screen and (max-device-width: 480px) {
  /* define mobile specific styles come here */
#appTable{
	padding-top:150px;
}
.app{
	padding:50px;
}
.appDiv{
	height:200px;
	width:200px;
}
.appIcon{
	height:40px;
	width:40px;

	margin-left:80px;
	margin-top:80px;
}
}
/**********************************************************************/
#AppDetailsContainer{
	margin-top:175px;
	margin-left:auto;
	margin-right:auto;
	width:475px;
	height:600px;
	background:rgba(255,255,255,0.8); /*White transparent*/
	border-radius: 15px;
	position:relative;
}
.AppDetails {
	margin-top:100px;
}
.AppDetails img{
	width:120px;
	height:120px;
}
.AppDetails h2{
	font-size:2.5em;
	margin: 0px 0px 3px 0px;
}
.AppDetailsHeader {
	padding: 15px 0px 0px 15px;
}
#AppDetailsTitleId{
	font-family:FacebookFont;
	font-weight:normal;
}
#AppDetailsTitle {
	padding: 55px 0px 0px 0px;
}
#AppDetailsContent{
	padding: 10px 15px 0px 15px;
	text-align:justify;
	font-size: 1.2em;
	line-height:27px;
}

#AppDetailsMoreLinks{
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
}
#AppDetailsFacebookLink{
	display:inline-block;
	margin: 0 20px;
}
#AppDetailsFacebookLink img{
	width:135px;
	height:40px;
}
#AppDetailsStoreLink{
    display:inline-block;
	margin: 0 20px;
}
#AppDetailsStoreLink img{
	width:135px;
	height:40px;
}
/******************************************************************/
/*********************** S T O R E ********************************/
/******************************************************************/
#storeBody{
	display:none;
}
#storeCart{
	position:fixed;
	right:0px;
	padding-right:25px;
	float:right;
	text-align:center;

	opacity:0.0;

	-webkit-transition-duration: 2.7s; /* Safari */
	transition-duration: 2.7s;
}
#cartButton{
	width:50px;
	height:50px;
}
#storeCart a{
	text-decoration: none;
}
#storeCartLabel{
	margin-top: -10px;
}
.storeDiv{
	width:100%;
	/*position:fixed;
	z-index: -2;*/
}
.storeRow{
	text-align:center;
	padding-top:75px;
	padding-bottom:50px;
}
.storeItem{
	margin: 0 auto;
	padding-top:75px;
	padding-left:30px;
	padding-right:30px;
	width: 300px;
	text-align: center;
	display: inline-block;
}
.storeImageDiv{
	width:300px;
	height:390px;
}
.storeImage{
	width:60px; /* 300px */
	height:78px; /* 390px */
	opacity:0.0;

	-ms-transform-origin: 50% 0%; /* IE 9 */
	-webkit-transform-origin: 50% 0%; /* Chrome, Safari, Opera */
	transform-origin: 50% 0%;

	-webkit-transition-duration: 3.72s; /* Safari */
	transition-duration: 3.72s;
}
.storePrice{
	font-family:FacebookFont;
	font-size: 1.4em;
	padding-bottom: 10px;
	opacity:0.0;

	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
.storePurchase{
	height: 45px;
	width: 150px;
	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
@media only screen and (max-device-width: 480px) {
.storeItem{
	padding-top:175px;
	width:600px;
}
.storeImageDiv{
	width:600px;
	height:780px;
}
.storeImage{
	width:120px;
	height:156px;
}

.storePrice{
	font-size: 2.5em;
}
.storePurchase{
	height: 90px;
	width: 300px;
}


#cartButton{
	width:100px;
	height:100px;
}
#storeCartLabel{
	font-size: 2em;
}
}
/******************************************************************/
/********************* S U P P O R T ******************************/
/******************************************************************/
#supportBody{
	display:none;
}
#supportContainer{
	display:inline-block;
	padding-top:150px;
	width:100%;
	overflow: hidden;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}

#supportTable{
	table-layout: fixed;
}

#supportData{
	vertical-align: top;
}

.supportOption{
	position:relative;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}
.optionTable{
	padding-bottom:50px;
}
#contactTable{
	/*first id option in supportTable*/
	padding-top:100px;

}
.option{
	font-size:1.3em;
	padding-bottom:50px;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}
.iconImg{
	width:100px;
	height:100px;
}
.optionIcon{

	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}

.optionLabelTable{
	display:inline-block;
	z-index: 20;
	overflow:visible;
	width: 400px;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}
.optionLabel{
	width:350px;
	opacity:0.0;
	padding-left:20px;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
.optionTitle{
	font-size:1.4em;
	text-transform: uppercase;
}
.optionSubTitle{
	font-size:1.0em;
	font-weight:100;

	font-style: italic;
}

.optionArrow{

}
.arrowDiv{
	height:120px;
	width:120px;
}
.arrow{
	height:20px;
	width:20px;
	margin-left:50px;
	margin-top:50px;

	opacity:0.0;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}
@media only screen and (max-device-width: 480px) {
#supportContainer{
	width:1166px;
	padding-top:275px;
	padding-left:50px;
}
.optionTable{
	padding-bottom:75px;
}
.iconImg{
	width:200px;
	height:200px;
}
.optionTitle{
	font-size:2.0em;
}
.optionSubTitle{
	font-size:1.7em;
}
.arrowDiv{
	width:150px;
	height:150px;
}
.arrow{
	height:30px;
	width:30px;
}
#arrowBackButton{
	height:120px;
	width:120px;
}
}
/*****************************************************/
#supportDataDetails{
	vertical-align: top;
}

#supportDetailsTableDiv{
	position: relative;
	display: inline-block;
	z-index: 20;
	overflow: visible;

	opacity:0.0;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}
#detailsTable{

}
#supportDetailsContent{
	display:block;
}
/****************************************************/
.SubSupport{
	width:550px; /* 550*/
	margin:40px;
	margin-left:auto;
	margin-right:auto;
}
.SubSupportHeader{
	text-transform: uppercase;
	font-size:2.5em;
	text-align:center;
	padding-bottom:20px;
}
.SubSupportContent{
	text-align:center;
}
#supportOptionArrow{
	vertical-align: bottom;
}
.arrowBack{
	height:60px;
	width:60px;
	padding-left:0px;
	-webkit-transition-duration: 1.72s; /* Safari */
	transition-duration: 1.72s;
}


/********** Contact ************/
#ContactDiv{
	width:620px;
}
#SubSupportHeaderContact{
	width:620px;
}
#ContactOptions{
	border-width: 2px;
	border-color:gray;
	padding-top: 30px;
	border-top-style: dashed;
	width:620px;
}
.ContactOptionRow{
	text-align: center;
	width:620px;
	margin-left:auto;
	margin-right:auto;
}

.contactOption{
	display:inline-block;
	height:50px;
	width:200px;
}
.contactOptionIcon{
	width:35px;
	height:35px;
}
.contactOptionTitle{
	width:200px;
	display:inline-block;
}
.contactOptionTitle a{
	text-decoration: none;
}
#ContactForm{
	padding-bottom:50px;
	text-align:center;
}
#ContactTextArea{
	resize: none;
	width: 400px;
	height: 120px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-size: 1.25em;
	font-style: italic;
}
#contactEmailField{
	margin-top: 7px;
	border: 3px solid #cccccc;
	font-size: 1em;
	font-style: italic;
	width: 246px !important; /* Keeps the field aligned left */
}
#submitButton{
	font-size:1em;
	float:right;
	margin-top:10px;
	margin-right:100px;
}
/************** Mission *****************/
#MissionSubTitle{
	font-weight:300;
	font-size:1.27em;
	text-align:center;
	padding-top:40px;
	padding-bottom: 60px;
}
#MissionStatement{
	line-height:27px;
}
#signature{
	padding-top:45px;
	padding-right:50px;
	line-height:20px;
	text-align:right;
	height:120px;
}
#titleDiv{
	float:right;
	padding-right:10px;
	padding-top:10px;
}

.headshotClass img{
	float:right;
	width:50px;
	height:50px;
}
/*********** Privacy ******************/
#PrivacyShort{
	line-height:27px;
	padding: 40px 0 80px 0;
}
#EULA{
	text-align:center;
}
.button{
	text-decoration:none;
	background: #cccccc;
	padding: 12px 24px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	vertical-align:middle;
	color: black;
}
.button:hover{
	background:#a4a4a4;
}

@media only screen and (max-device-width: 480px) {

#PrivacyShort{
	line-height:50px;
}

}
/******************************************************************/
/********************* S E R V I C E ******************************/
/******************************************************************/
#serviceBody{
	display:none;
}
#serviceContainer{
	display:inline-block;
	padding-top:150px;
	width:100%;
	overflow: hidden;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}

#serviceTable{
	table-layout: fixed;
}

#serviceData{
	vertical-align: top;
}

.serviceOption{
	position:relative;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}
@media only screen and (max-device-width: 480px) {
#serviceContainer{
	width:1166px;
	padding-top:275px;
	padding-left:50px;
}
}
/*****************************************/
#serviceDataDetails{
	vertical-align: top;
}
#serviceDetailsTableDiv{
	position: relative;
	display: inline-block;
	z-index: 20;
	overflow: visible;

	opacity:0.0;
	-webkit-transition-duration: 2.72s; /* Safari */
	transition-duration: 2.72s;
}
#serviceDetailsContent{
	display:block;
}
/*****************************************/

.SubService{
	width:550px; /* 550*/
	margin:40px;
	margin-left:auto;
	margin-right:auto;
}
.SubServiceHeader{
	text-transform: uppercase;
	font-size:2.5em;
	text-align:center;
	padding-bottom:20px;
}
.SubServiceContent{
	text-align:center;
}
.ServiceContent{
	line-height:27px;
	padding: 40px 0 80px 0;
}
.ContactButton{
	text-align:center;
}
/********** New Home Page ************/
/* Layout */
html, body, #container { height: 100%; margin: 0; padding: 0; }
body > #container { height: auto; min-height: 100%; }
#content { padding-bottom: 15em; min-width:800px;margin-left:auto;margin-right:auto;}
#footer { clear: both; position: relative; z-index: 10; height: 12em; margin-top: -12em; width:800px; margin-left:auto; margin-right:auto;}
#about { padding: 0px; padding-bottom:0px }
.mainTitle{margin-bottom:0px;}
@media only screen and (max-device-width: 480px) {
#footer {margin-top: -6em;}
}