@font-face {
    font-family: burstMyBubble;
    src: url(https://fitness.okkem.com/FONTS/BurstMyBubble.ttf);
}

.floatLeft{
    float:left;
}
.loadingBar{
	position: fixed;
    color: #fff;
    display: none;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 60px;
    z-index:20;
}
.loadingBar .loadingBarBG{
	position: fixed;
	background: #000;
    height: 100%;
    width: 100%;
    opacity: 0; /*0.3*/
}
.loadingBar .loadingSpinnerHolder{
	width: 20%;
    height: 20%;
    position: fixed;
    top: 40%;
    left: 40%;
}
.loadingBar .fa{
	position: absolute;
    top: 0px;
    left: 0px;
}
.leaderboardPopup{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index: 6;
	visibility:hidden;
	transition: visibility 1000ms ease;
}
.leaderboardPopup.show{
	visibility:visible;
}
.leaderboardPopupBG{
	background: #000;
	background:#5ac1eb;
    height: 100%;
    width: 100%;
    position: fixed;
    opacity: 0;
    z-index:2;
    top: 0px;
    left: 0px;
    transition:opacity 500ms ease;
}
.leaderboardPopup.show .leaderboardPopupBG{
	opacity:1;
	transition:opacity 500ms ease;
}
.leaderboardPopup .popupContentHolder{
	z-index: 2;
}
.leaderboardPopup .leaderboardTypeDescription{
	height: 32px;
    margin-top: 20px;
    font-family: candal;
    color: #3489ab;
    font-size: 13px;
}
.leaderboardPopup .leaderboardTypeDescription .text{
	text-align: center;
    width: 320px;
    margin: auto;
}
.leaderboardPopup .doneBtn{
	width: 68px;
    color: #fff;
    font-family: candal;
    margin: auto;
    text-align: center;
    background: #4baad0;
    line-height: 37px;
    border-radius: 4px;
    font-size: 14px;
}
.leaderboardPopup .leaderboardPopupTitle{
	color: #fff;
    font-family: candal;
    text-align: center;
    width: 100%;
    font-size: 29px;
}
.leaderboardPopup .leaderboardPopupFilterBtnsHolder{
	margin: 18px auto 0px;
    width: 326px;
}
.packDetailsBtnHolder{
	height: 22px;
}
.packDetailsBtn{
	font-family: candal;
    color: #fff;
    float: left;
    width: 101px;
    text-align: center;
    opacity: 0.5;
    margin-right: 2px;
    font-size: 14px;
    line-height: 33px;

}
.packDetailsBtn.selected{
	opacity: 1;
    background: #ff9300;
    border-radius: 4px;
    color: #fff;
    border: 2px solid #2e89ad;
}
.arrowHolder{
	/*left: -137px;
    transform: rotate(75deg);
    transform-origin: 295px;
    position: absolute;
    top: 277px;*/
}
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #5BC0EB;
	position:relative;
	left:0px;
	transform: rotate(-90deg);
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
 }

 .backBtnHolder{
 	height: 40px;
    width: 40px;
    position: absolute;
    left: 10px;
    top: 24px;
    display: none;
    opacity: 0;
    /*border: 2px solid #379ac3;*/
    border-radius: 40px;
    transition:all 300ms ease;
    z-index: 2;
 }
 .backBtn{
 	width: 0;
    height: 0;
    border-top: 11px solid #0000;
    border-bottom: 11px solid #0000;
    border-right: 20px solid #379bc3;
    position: absolute;
    top: 9px;
    left: 6px;
 }
 .scoresHolder{
 	position: absolute;
    top:13px;
    right:32px;
    width:58px;
    color: #fff;
    font-family: candal;
    text-align:right;
    visibility: hidden;
 }
 
 
/* ---- HomePage ScoresHolder ----- */
#homeScreenHolder.homePage .scoresHolder{
 	opacity:0;
 	transition:all 600ms ease;
 	right:32px;
 }
 #homeScreenHolder.homePage .packScore{
 	opacity:0;
 	transition:all 600ms ease;
 }
 #homeScreenHolder.homePage .workoutScore{
 	opacity:0;
 	transition:all 600ms ease;
 }
 #homeScreenHolder.homePage .exerciseScore{
 	opacity:0;
 	transition:all 600ms ease;
 }






 .moreBtnHolder{
 	position: absolute;
    right: 5px;
    top: 30px;
    color: #317c9a;
    transition:all 300ms ease;
    z-index: 2;
 }
 
 .moreBtnHolder .moreBtn{
 	font-size:33px;
 }
 .packInfoHolder{
 	width:100%;
 	height:510px;
 	background-color:#5BC0EB;
 	overflow:hidden;
	/*-webkit-clip-path: circle(90% at 50% 85%);*/
	/*-webkit-clip-path: circle(380px at 50% 380px);*/
	/*background:linear-gradient(#5fa6e4, #3e76a7);	/* linear blue to darker blue */
	padding-top: 10px;
	transition:padding-top 300ms ease;
 }

body{
	margin:0px !important;
	background:#0d1128;
	background:#f1e4bf;
	background:#fffbee;
	background:#5ac1eb;
	/*background: linear-gradient(#0d1128, #30396b);*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	height:500px;
    font-family:candal;
}
.loginHolder{
	position: fixed;
    z-index: 2;
    width: 90%;
    background: #fff;
    height: 250px;
    left: 5%;
    border-radius: 4px;
    border: 4px solid #2c80a2;
    top: 100px;
    display:none;
    font-family: candal;
    color: #338db1;
}
.loginHolder .loginText{
	text-align: center;
    width: 69%;
    margin: 33px auto;
}
.loginHolder .loginBtn{
	background: #ffb600;
    width: 120px;
    line-height: 60px;
    color: #fff;
    border-radius: 5px;
    margin: auto;
    text-align: center;
    cursor: pointer;
    border: 4px solid #c19117;
}
.facebookLoginHolder{
	display:none;
}

.homeTopBar{
    height: 196px;
    transition: height 300ms ease;
    position: relative;
    /*background: linear-gradient(#313232, #3e3e3e);
    box-shadow: 2px 2px 5px #1f1f1f;*/
}
.homeTopBar .previousPageScore{
    position: absolute;
    top: 33px;
    font-family: candal;
    color: #49aed7;
    left: 41px;
    width: 46px;
    text-align: left;
    opacity:0;
}
.homeTopBar .previousPageScore .packScore{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.homeTopBar .previousPageScore .workoutScore{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.homeTopBar .currentPageScore{
    position: absolute;
    top: 25px;
    font-family: candal;
    color: #fff;
    right: 31px;
    width: 126px;
    text-align: right;
    font-size: 30px;
    opacity:0;
}
.homeTopBar .currentPageScore .workoutScore{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.homeTopBar .currentPageScore .exerciseScore{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}

#homeLogo{
	width:100%;
    margin: 0px auto 0px;
    height: 80px;
    overflow:hidden;
    display:block;
    opacity:1;
    transition:all 300ms ease-in;
}

#homeLogo .title{
	/*color:#443610;*/
    color:#0000;
	font-family: 'Cabin Sketch', cursive;
	font-family: 'Lalezar', cursive;
	text-align:center;
	width:130px;
	margin:auto;
	font-size:60px;
    background-image: linear-gradient(to right, #4f6dc8e3 0%, #ff0075ad 100%);
    -webkit-background-clip: text;
    background-clip: text;
	transition:all 300ms ease-in;
}

#homeLogo .title img{
	height:100%;
	width:100%;
}
#homeLogo .title span{
	margin-left:1px;
}
#homeLogo .title .f{
	color:#5BC0EB;
}
#homeLogo .title .i{
	color:#FDE74C;
	
}
#homeLogo .title .i2{
	color:#9BC53D;
}
#homeLogo .title .g{
	color:#E55934;
}
#homeLogo .title .a{
	color:#FA7921;
}






/* -------------------- PACK AREA ------------------------ */
.homePacksHolderScroll{
	opacity:1;
	display:block;
	transition:all 300ms ease;
}
#homePacksHolder{
	width: 317px;
	margin: 8px auto 6px;
}
.homePackHolder{
	float:left;
	/*overflow:hidden;*/
	/*width:78px;*/
	height:84px;
	width:55px;
	transform:scale(1);
	opacity:1;
	margin-bottom:10px;
	transition:transform 300ms ease-in, opacity 300ms ease-in;
}
.homePackHolder.selected{
	transform: scale(1.2) translateY(2px);
	transition:transform 300ms ease-in;
}
.homePackHolder.hide{
	transform:scale(0);
	transition:all 300ms ease-in;
}

.homePackHolder.notSelected{
	opacity:0.5;
	transition:all 300ms ease-in;
}
.homePackHolder.cloned{
    opacity: 1;
    position: absolute;
    z-index: 1;
    transition:none;
}

.homePackAddBtnHolder{
	position:absolute;
	top:3px;
	left:-6px;
	width: 80px;
    height: 84px;
    text-align: center;
    display:none;
    transition:top 300ms ease, left 300ms ease;
    z-index: 2;
}
#homeScreenHolder.homePage .homePackAddBtnHolder{
	display:block;
}


.homePackAddBtn{
	color: #2d7592;
    left: 255px;
    width: 41px;
    height: 46px;
    font-size: 35px;
    text-align: center;
    opacity: 0;
    line-height: 82px;
}
.transformed{
	-webkit-transform:translateX(0px) translateY(0px) translateZ(-50px) rotateY(50deg);
}
.homePackHolder .daysLeftHolder{
    font-family: candal;
    text-align: center;
    color: #fff;
    position: absolute;
    background: #ff5e1a;
    width: 20px;
    border-radius: 20px;
    z-index: 2;
    right: 1px;
    top: -6px;
    font-size: 14px;
    height: 20px;
    line-height: 19px;
}
.homePackHolder.playedToday .daysLeftHolder{
    color: #fff;
    background: #45a8d0;
}
.homePackHolder .packImgHolder{
	/*width:64px;
	height:64px;*/
	width:40px;
	height:40px;
	border-radius: 35px;
	overflow: hidden;
	border:3px solid #237698;
	margin:auto;
	position:relative;
	
}
.packImgHolder span{
	background: URL(http://www.webdesignerwall.com/demo/decorative-gallery/images/watercolor-top.png) no-repeat;
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 70px 57px;
    display:none;
}
.selectedPack{

}
.homePackHolder .packImgHolder .shineOverlay{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
.homePackHolder .packImg{
	width: 90%;
    height: 90%;
    border: 2px solid #fffbee;
    border-radius: 50px;
}
.homePackHolder .progressHolder{
	margin: 4px auto 0px;
    background: #5ac1eb;
    height: 7px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #247597;
}
.workoutCircleHolder{
	width:105%;
	/*margin:3px auto 0px;*/
	/*margin: 5px auto 0px;
    background: #fff;
    height: 8px;
    width: 47px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #247597;*/
}
.workoutCircle{
	background: #5ac1eb;
    height: 10px;
    width: 7px;
    float: left;
    /* margin-right: 1px; */
    border-right: 1px solid #3fa2ca;
}
.workoutCircleHolder .workoutCircle.complete{
	opacity:1;
	background: #fde84b;
   	border-right: 1px solid #968815;
}
.workoutCircleHolder .workoutCircle.incomplete{
	
}
.workoutCircleHolder .workoutCircle.next{
	background: #92ddfb;
}

.packAllInfoHolder{
	overflow:hidden;
	top:100%;
	width:100%;
	height:580px;
	position:fixed;
	border-top: 4px solid #499fc5;
	box-shadow: 0px -3px 8px #46a6ce;
	z-index:4;
	background: #5ac1eb;
	padding-top:0px;
	transition:box-shadow 300ms ease, top 600ms ease, height 600ms ease, padding-top 600ms ease;
}
.packAllInfoHolder .closeBtn{
	position: absolute;
	opacity:1;
	display:block;
    color: #8fdeff;
    top: 10px;
    right: 14px;
    font-size: 28px;
    z-index:1;
    transition:all 300ms ease;
}


.packArrowHolder{
	height:20px;
	margin:auto;
	overflow:hidden;
	display:none;
}



/* ---------------- PACK INFO AREA ----------------------- */
.packInfoArea{
	overflow:hidden;
	height:260px;
	opacity:1;
	transition:opacity 400ms ease, height 800ms ease;
}
.packInfoImgHolder{
	height: 130px;
    width: 130px;
    overflow: hidden;
    border-radius: 90px;
    border: 4px solid #247597;
    margin: 0px auto 0px;
}
.packInfoImgHolder .imgHolder{
	border: 5px solid #fff;
    height: 92%;
    width: 92%;
    border-radius: 75px;
    overflow: hidden;
    position:relative;
}
.packInfoImgHolder .imgHolder .shineOverlay{
    position: absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
}
.packInfoImgHolder .imgHolder .packImg{
	height:100%;
	width:100%;
}
.packInfoArea .leftHolder{
	float:left;
	margin-left: 10px;
	margin-top: 10px;
	height:100px;
}
.packUserImg{
	height:100%;
	width:100%;
}
.packInfoArea .rightHolder{
	margin:10px auto 0px;
	width:100%;
	min-height:100px;
	padding-bottom:5px;
	text-align:center;
}

.packInfoArea .title{
	color:white;
	font-size: 18px;
    font-family: candal;
    margin-top: 6px;
}
.packInfoArea .createdBy{
	color:white;
	font-size:15px;
	opacity:0.6;
	font-family:arial;
	margin-bottom:8px;
}
.packInfoArea .packInfoBtnsHolder{
	position:relative;
	padding-top:12px;
}
.packInfoArea .playBtnHolder{
	position:absolute;
	width:100%;
	visibility: visible;
	opacity:1;
	transition:opacity 500ms ease, visibility 500ms ease 500ms;
}
.packInfoArea.packComplete .playBtnHolder{
	opacity:0;
	visibility: hidden;
	transition:opacity 500ms ease, visibility 500ms ease 500ms;
}
.packInfoArea .replayBtnsHolder{
	width: 281px;
    position: relative;
    height: 50px;
    margin: auto;
    visibility: hidden;
    opacity:0;
    transition:opacity 500ms ease, visibility 500ms ease 500ms;
}
.packInfoArea.packComplete .replayBtnsHolder{
	opacity:1;
	visibility: visible;
	transition:opacity 500ms ease, visibility 500ms ease 500ms;
}
.packInfoArea .playBtn, .packInfoArea .replayBtn, .packInfoArea .doneBtn{
	background: #FDE74C;	/* yellow */
    width: 120px;
    text-align: center;
    padding: 6px 0px;
    color: #5d562d;
    border-radius: 4px;
    font-family: 'Bangers', cursive;
    font-size:21px;
    border: 3px solid #499fc5;
}

.packInfoArea .playBtn{
	margin:auto;
}

.packInfoArea .replayBtn, .packInfoArea .doneBtn{
	position:absolute;
}
.packInfoArea .replayBtn{
	left:0px;
}
.packInfoArea .doneBtn{
	right:0px;
	background:#d4d4d4;
	color: #7b7b7b;
}



.packLeaderboardHeaders{
	height: 27px;
    width: 100%;
    clear: both;
    margin: auto;
    position:relative;
}
.packLeaderboardHeaders .inviteBtnHolder{
	position: absolute;
    left: 15px;
    top: -20px;
    color: #fff;
    font-size: 30px;
    opacity:0;
    visibility: hidden;
    transition:opacity 300ms ease, visibility 300ms 300ms;
}
.packLeaderboardHeaders .deleteBtn{
    position: absolute;
    right: 20px;
    font-family: candal;
    color: #93e0ff;
    top: -9px;
    z-index:2;
    visibility:hidden;
    opacity:0;
    transition:opacity 300ms ease, visibility 300ms 300ms;
}
#homeScreenHolder.packPage .packLeaderboardHeaders .inviteBtnHolder{
	opacity:1;
	visibility: visible;
	transition:opacity 300ms ease, visibility 300ms 300ms;
}
#homeScreenHolder.packPage .packLeaderboardHeaders .deleteBtn{
    opacity:1;
    visibility: visible;
    transition:opacity 300ms ease, visibility 300ms 300ms;
}
.packDivider{
	height:1px;
	width:90%;
	margin:auto;
	background:#6ab2f1;
	display:none;
}

.packLeaderboardHolder{
	overflow:hidden;
	clear:both;
	padding-bottom:14px;
	transition:margin-top 300ms ease-in;
}

.leaderboardUserHolder{
	float:left;
    margin-left: 5px;
    margin-right: 2px;
    /*border: 3px solid #5ac1eb;*/
    padding:3px;
}

.leaderboardUser{
    overflow: hidden;
    width: 42px;
    height: 42px;
    visibility:visible;
    transition:height 600ms ease, visibility 600ms ease;
}

.leaderboardUser.hide{
	visibility:hidden;
	height:0px;
	transition:height 600ms ease, visibility 600ms ease;
}
/*
.clonedLB .leaderboardUser.lbHide{
	visibility: visible;
	height:42px;
	transition:height 600ms ease, visibility 600ms ease;
}
*/

.packUserImgHolder{
	width: 35px;
    height: 35px;
    border: 3px solid #3c99bd;;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    top: 1px;
}
.leaderboardUser.versus .packUserImgHolder{
	border:3px solid #fff;
}

.leaderboardScoreHolder{
	float:left;
    /*background: #fff;
    background:transparent;*/
    background:#5ac1eb;
    width: 80%;
    border-radius: 4px;
    overflow:hidden;
    border: 3px solid #49a0c5;
    transition:background 300ms ease;
}
.packBlock{
	width:101%;
	height:40px;
	margin-bottom:0px;
	position:relative;
	overflow:hidden;
	visibility:visible;
	border-bottom: 2px solid #3f96b9;
	transition:height 600ms ease, visibility 600ms ease;
}

.packBlock.hide{
	height:0px;
	visibility: hidden;
	border-bottom:0px;
	transition:height 600ms ease, visibility 600ms ease;
}
/*
.clonedLB .packBlock.lbHide{
	height:40px;
	visibility:visible;
	border-bottom: 2px solid #3f96b9;
	transition:height 600ms ease, visibility 600ms ease;
}
*/
.packBlock.noBorder{
	border:none;
}
.packBlock .overlay{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 2;
    opacity: 0;
    visibility:hidden;
    transition:visibility 600ms ease, opacity 600ms ease;
}
.packScoreText{
	position:absolute;
	font-family: 'Candal', sans-serif;
	top: 5px;
	font-size:19px;
    right: 12px;
    //opacity: 0.35;
    z-index:1;
    opacity:0;
}
.versusLegendHolder{
	opacity:0;
	transition:all 300ms ease;
}
.versusLegendHolder .versusHolder{
	position:absolute;
}
.versusLegendHolder .versusHolder.user{
	left:56px;
}
.versusLegendHolder .versusHolder.other{
	right:20px;
}
.versusLegendHolder .versusHolder .circle{
	height: 12px;
    width: 12px;
    background: #b0e7ff;
    border-radius: 10px;
    float: left;
    margin-right: 4px;
    position: relative;
    top: 5px;
}
.versusLegendHolder .versusHolder.user .circle{
	background: #fde84b;
}
.versusLegendHolder .versusHolder .label{
	float:left;
	font-family: candal;
    color: #90dcfb;
}

/* --- WORKOUT BLOCKS ---  */
.workoutBlock{
	/*background: linear-gradient(#c6eaf9, #10d4f1);*/
    float: left;
    height: 30px;
    height:100%;
    width: 0px;
    width:22%;
    border-right:2px solid;
    border-color:#26b8d0;

    position:relative;
    font-family: 'Candal', sans-serif;
    color:#bdbdbd;
}
.workoutBlock.playing{
	/*background: linear-gradient(#fff5b1, #ecd314);*/
    border-color:#d4c23c;
}
.workoutBlock.incompleted{
	background: #54b7e0;
    text-align: center;
    overflow: hidden;
    border-color:#4aadd4;		
}
.workoutBlock.next{
	background:#fff;
	background:#5ac1eb;
}
.workoutBlock.next.playing{
	
}


/* workoutBlocks nextOverlay */
.workoutBlock .nextOverlay{
	position:absolute;
	width:100%;
	height:100%;
	opacity:0;
	background:repeating-linear-gradient(   45deg,   #b0e7ff,   #b0e7ff 10px,   #ccefff 10px,   #ccefff 20px );
	transition:opacity 500ms ease;
	visibility:visible;
}
.workoutBlock.playing .nextOverlay{
	background:repeating-linear-gradient( 45deg, #fde74c, #fde74c 10px, #fff5b0 10px, #fff5b0 20px );
}
.workoutBlock.next .nextOverlay{
	opacity:1;
	transition:opacity 500ms ease;
}
.workoutBlock .nextOverlay.hide{
	/*opacity:0;*/
	visibility: hidden;
}


/* WorkoutBlocks completedOverlay */
.workoutBlock.incompleted .completedOverlay{
	opacity:0;
	transition:opacity 500ms ease;
}
.workoutBlock .completedOverlay{
	position:absolute;
	width:100%;
	height:100%;
	opacity:1;
	background: linear-gradient(#c6eaf9, #10d4f1);
	transition:opacity 500ms ease;
}
.workoutBlock.playing .completedOverlay{
	background: linear-gradient(#fff5b1, #ecd314);
}




.starsPerfect{
	background:#a6d5ff;  /* blue */
}
.starsGold{
	background:#9BC53D;  /* blue */
	background:#FDE74C;  /* yellow */
}
.starsSilver{
	background:#a6d5ff;  /* blue */
}
.starsBronze{
	background:#a6d5ff;  /* blue */
}


/* --- EXERCISE BLOCKS --- */
.exercisePHText{
	opacity:0;
	position:absolute;
	left: 0px;
    font-size: 20px;
    line-height: 34px;
    width:100%;
    text-align:center;
}
.exerciseBlock.incompleted .exercisePHText{
	/*opacity:1;*/
}
.exerciseBlock{
	width:0px;
	height:30px;
	height:100%;
	float:left;
	border-right: 2px solid;
	border-color:#4c4c4c;
	position:relative;
	background:#676767;
	padding-top:2px;
	-webkit-clip-path: circle(0% at 0% 50%);*/
	/*opacity:0;*/
	transition:-webkit-clip-path 400ms ease, opacity 400ms ease;
}
.exerciseBlock.show{
	-webkit-clip-path: circle(144% at 0% 50%);
	/*opacity:1;*/
	transition:-webkit-clip-path 400ms ease, opacity 400ms ease;
}
.exerciseBlock .overlay{
	position:absolute;
	top:0px;
	background:black;
	height:100%;
	width:100%;
	opacity:0;
}
.exerciseBlock .inProgressOverlay{
	opacity:0;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background: repeating-linear-gradient( 45deg, #4bb0da, #4bb0da 10px, #44a7d0 10px, #44a7d0 20px );
	transition:opacity:300ms ease;
}
.exerciseBlock .completedOverlay{
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	opacity:0;
	background:#1da1bb;
	transition:opacity 300ms ease;
}
.exerciseBlock.inProgress .inProgressOverlay{
	opacity:1;
	transition:opacity 300ms ease;
}
.exerciseBlock.completed .inProgressOverlay{
	opacity:0;
	transition:opacity 300ms ease;
}
.exerciseBlock.playing .completedOverlay{
	background: #a99609;
}
.exerciseBlock.selected.completed .completedOverlay{
	opacity:1;
	transition:opacity 300ms ease;
}
.packBlock .exerciseBlock{
	background: #a0a0a0;
	color:#b3b3b3;
	border-color:#8e8989;
}
.packBlock .exerciseBlock{
	color: #5ac1eb;
    border-color:#3d95b9;
    background: #4bb0da;
}
.exerciseBlock.completed{
	background:#eaa490;
    border-color:#c54b2b;
    border-colo
}
.packBlock .exerciseBlock.completed{
	/*background:#b0e7ff;*/
	background: linear-gradient(#c6eaf9, #10d4f1);
    border-color:#59b8e0;
}	
.packBlock .exerciseBlock.playing.completed{
	/*background:#FDE74C;*/
	background: linear-gradient(#FDE74C, #dec50c);
	border-color:#bdab2f;
}




.bottomSpacer{
	height: 100%;
		width: 100%;
	background: #5ac1eb;
}





/* ------- EXERCISE AREA ---------- */
.exerciseArea{
	background: radial-gradient(#fff, #3a95e4);
	background:#d6d6d6;
	background:#5ac1eb;
	overflow: hidden;
	padding-top:10px;
	height:275px;
	display:none;
}
.exerciseArea.hide{
	height:0px;
	display:none;
}
.exerciseArea .exerciseHolder{
	position: relative;
	width: 33%;
	float:left;
	opacity:0;
}
.exerciseArea .exerciseHolder .pointsHolder{
	width:56px;
	margin:auto;
	color:white;
	position: relative;
	left: 3px;
	font-family: 'Candal', sans-serif;
}
.exerciseArea .exerciseHolder .pointsHolder .points{
	font-size:20px;
}
.exerciseArea .exerciseHolder .pointsHolder .label{
	font-size: 9px;
    opacity: 0.7;
    position: relative;
}
.exerciseArea .exerciseHolder .imgHolder{
	width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 7px;
    border: 2px solid #000;
    margin:auto;
}
.exerciseArea .exerciseHolder .imgHolder img{
	width:100%;
	height:100%;
}
.exerciseArea .exerciseHolder .starsHolder{
	display: block;
    position: relative;
    top: -16px;
    width: 59px;
    margin: auto;
    height: 28px;
}
.starsHolder .starImg{
	float: right;
    height: 26px;
    width: 29px;
    margin-left: -16px;
    position:relative;
}
.starsHolder .starImg img{
	height:100%;
	width:100%;
}
.starsHolder .starImg .hollow{
	opacity:0.5;
}
.exerciseRepsHolder{
	position: relative;
	top: -13px;
}
.exerciseReps{
	display: block;
    width: 54px;
    margin: auto;
    height: 14px;
}
.exerciseRep{
	float: left;
    width: 18px;
    font-size: 10px;
    text-align: center;
}
.exerciseArea .headerBar{
	height:55px;
	position:relative;
}
.exerciseStarCount{
	position:absolute;
	right:26px;
	top:0px;
	opacity:0;
	display:none;
	transition:all 300ms ease;
}
.exerciseStarCount .starImg{
	height: 22px;
    width: 26px;
    position: relative;
    float: left;
    top: 2px;
}
.exerciseStarCount .starImg img{
	height:100%;
	width:100%;
}

.packLeaderboardHeaders .pointsLbl{
	font-size:11px;
}




/* ------------ EXERCISE INPUT AREA ----------------- */


.exerciseInputArea{
	height:270px;
	background: linear-gradient(#5d0000, #000);
	background:#d6d6d6;
	background: linear-gradient(#d6d6d6, #c1c1c1);
	background:#5ac1eb;
	width:100%;
	position:relative;
	font-family: 'Candal', sans-serif;
	//border-top:1px solid white;
}
.exerciseInputArea .inputAreaHolder{

}
.exerciseInputArea.completed .inputAreaHolder{
	display:none;
}
.exerciseInputArea .inputExerciseName{
	color: #fff;
    width: 80%;
    text-align: center;
    margin: 22px auto 0px;
}
.exerciseInputArea .inputCloseBtn{
	background: #41a9d4;
    position: absolute;
    top: 17px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    left: 12px;
    line-height: 35px;
}
.exerciseInputArea .inputsHolder{
	margin: 35px auto 42px;
    overflow: auto;
    min-width: 110px;
    width: 240px;
}
.inputsHolder .inputHolder{
	float:left;
	width:120px;
	position:relative;
	height:140px;
}
.exerciseInputArea.bodyWeight .inputsHolder{
	width:120px;
}
.exerciseInputArea.bodyWeight .inputsHolder .inputHolder.weight{
	display:none;
}
.inputsHolder .label{
	font-size: 14px;
	color: #3f9bc1;
	text-align: center;
	margin-bottom: 11px;
}

.inputsHolder .weightInput .upBtn, .inputsHolder .repsInput .upBtn{
	width: 0; 
	height: 0; 
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid #73d1f5;
	margin:auto;
}
.inputsHolder .weightInput .downBtn, .inputsHolder .repsInput .downBtn{
	width: 0; 
	height: 0; 
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 30px solid #73d1f5;
	margin:auto;
}
.inputsHolder .input{
	width:60px;
	margin:auto;
}
.inputsHolder .input input{
	width: 100%;
    margin: 6px auto;
    text-align: center;
    border-radius: 4px;
    line-height: 37px;
    font-size: 19px;
    border: none;
    --webkit-appearance: none;
    padding: 0px;
    color: #3286a9;
    font-family: 'Candal', sans-serif;

}
.exerciseInputArea .recordBtnHolder{
}
.exerciseInputArea .recordBtnHolder .recordBtn{
	background: #9BC53D;
    margin: auto;
    width: 104px;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    border: 2px solid #3ea2cc;
    line-height: 36px;
    font-size: 19px;
}


/* --- Exercise Tracks Holder --- */
.exerciseTracksHolder{
    width: 100%;
    height: 54px;
    margin-top: 22px;
    position: fixed;
    margin: 25px auto 0px;
    bottom: -55px;
    z-index: 4;
    font-family: candal;
    border-top: 1px solid #409cc1;
    transition:bottom 300ms ease;
}
.exerciseTracksHolder .arrowHolder{
    position:absolute;
    display:none;
}
.exerciseTracksHolder .arrow{
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}

.exerciseTracksHolder .trackHolder{
    float: left;
    width: 92px;
    text-align: center;
    border-right: 1px solid #3da2cc;
    height:58px;
}
.exerciseTracksHolder .trackHolder.selected{
    background: #4eacd2;
    border: 1px solid #48a2c7;
}
.exerciseTracksHolder .trackHolder .label{
    color: #419bbf;
    margin-top:8px;
}
.exerciseTracksHolder .trackHolder.selected .label{
    color: #3081a0;
}
.exerciseTracksHolder .trackHolder .score{
    color: #b2e9ff;
}
.exerciseTracksHolder .trackHolder.selected .score{
    color:#fff;
}






/* ----------------- COVER FLOW --------------- */
.jCoverFlow{
    height: 200px;
	width: 100%;
	position: relative;
	/*perspective:600px;
	-webkit-transform-style: preserve-3d;*/
	top:9px;
	/*transform: scale(0.3);*/
}
.jCoverFlow.show{
	transform: scale(1);
	transition:transform 400ms ease;
}
.coverImgHolder{
    position: absolute;
    top: -2px;
    left: -10px;
    /*box-shadow: #777 1px 1px 7px;*/
    background: #fff7f7;
    padding: 11px 13px 15px 13px;
    border-radius: 7px;
    height:230px;
    -webkit-backface-visibility: hidden;
    /*border-bottom: 11px solid #4bb0da;*/
    border: 4px solid #4aa0c6;
    -webkit-clip-path: circle(0% at 50% 50%);
    transition:-webkit-clip-path 500ms ease, opacity 400ms ease;
}
.coverImgHolder.show{
	-webkit-clip-path: circle(41% at 50% 50%);
	transition:-webkit-clip-path 600ms ease, opacity 400ms ease;
}
.coverImgHolder.show.selectedCoverImg{
	-webkit-clip-path: circle(71% at 50% 50%);
	transition:-webkit-clip-path 500ms ease, opacity 400ms ease;
}
.coverImgHolder .bottomBand{
	height: 8px;
    width: 100%;
    background: #4bb0da;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.coverImgHolder.completed .bottomBand{
	background: #f5df3d;
}
.coverImgHolder .pointsHolder{

    position: absolute;
    height: 50px;
    width: 50px;
    top: 101px;
    right: 94px;
    z-index: 1;
    border-radius: 60px;
    text-align: center;
    color: #fff;
}
.coverImgHolder .pointsHolder .points{
    font-family: candal;
    position: relative;
    top: 13px;
    font-size: 18px;
    text-shadow: 0px 0px 6px #b9a726;

    font-size: 49px;
    text-shadow: 0px 0px 6px #000000;
    color: #fff;
}
.coverImgHolder .imgHolder{
	width:170px;
	height:170px;
	overflow:hidden;
	border-radius:4px;
	//border: 2px solid #8dcaff;
	background:#000;
	position:relative;
}
.coverImgHolder .imgHolder img{
	height:100%;
	width:100%;
	position:absolute;
}
.coverImgHolder .wkoutCheck{
	position: absolute;
    color: #5ac1eb;
    opacity: 1;
    font-size: 43px;
    left: 59px;
    top: 59px;
    /*border: 6px solid #5ac1eb;*/
    border-radius: 40px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display:none;
}

/*
.coverImgHolder .completeBar{
    opacity: 0;
    position: absolute;
    bottom: -1px;
    width: 100%;
    text-align: center;
    color: #fff;
    height: 32px;
}
.coverImgHolder .completeBar .completeBarBG{
	width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: 0.2;
}
.coverImgHolder .starsHolder{
	margin: auto;
    height: 40px;
    width: auto;
    width: 77px;
    position: relative;
    top: 2px;
}
.coverImgHolder .starsHolder img{
	height:25px;
	width:25px;
	float:left;
}
*/

.coverFlowInfo{
	height:100px;
	width:100%;
	margin-top:5px;
}
.coverFlowInfo .exerciseName{
	color: #fff;
	margin: auto;
	width: 250px;
	text-align: center;
	font-family: 'Candal', sans-serif;
	font-size: 20px;
	position: relative;
	top: -11px;
}
.coverImgHolder .exerciseName{
	width: 170px;
    text-align: center;
    font-family: candal;
    font-size: 14px;
    margin-top: 3px;
    color: #656565;
    margin-bottom: 3px;
}
.coverImgHolder .exerciseReps{
	width: 100%;
    text-align: center;
    font-family: candal;
    font-size: 11px;
    color: #a2a2a2;
    margin:auto;
}
.coverImgHolder .exerciseReps .rep{
	width: 21px;
    text-align: center;
    float: left;
}

.coverFlowInfo .exerciseReps{
	font-size: 10px;
	position: relative;
	top: -10px;
	opacity: 0.7;
	font-family: 'Candal', sans-serif;
	width:65px;
}

.exerciseCursor{
	position: absolute;
    width: 26px;
    height: 40px;
    top: 0px;
    left: 60px;
    opacity: 0.5;
    border: 4px solid #2a7ca0;
    border: 4px solid #ffd840;
    border-radius:4px;
    z-index:4;
    transform:scale(1);
    transition:opacity 400ms ease, transform 400ms ease;
}
.exerciseCursor.hide{
	opacity:0;
	transform:scale(0.1);
	transition:opacity 400ms ease, transform 400ms ease;
}


@keyframes fadeIn { 
  from { opacity: 0; } 
}


/* ------------- FLIP AREA ------------------ */
.flip{
	perspective:600px;
	position:relative;
	height:270px;
	width:380px;
	top:156px;
}

.flip .card.flipped{
	-webkit-transform: rotateY(-180deg);
}

.flip .card{
	width:100%;
	height:100%;
	-webkit-transform-style: preserve-3d;
}
.flip .card .face{
	width:100%;
	height:100%;
	position:absolute;
	-webkit-backface-visibility: hidden;
	z-index:2;
}
.flip .card .front{
	z-index:1;
}
.flip .card .back{
	-webkit-transform: rotateY(-180deg);
}




.setBlock{
	position:relative;
	float: left;
    width: 3px;
    height:33px;
    background: #41a3cc;
    overflow:hidden;
    opacity:1;
    transition:background 600ms ease-in;
    border-radius:6px;
    border-top:2px solid;
    border-right:2px solid;
    border-bottom:2px solid;
    border-color:#2a84a9;
}

/* ------ Setblock background --------- */

/* -- Background for Complete -- */
.setBlock .backgroundComplete{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-clip-path: circle(0% at 50% 50%);
	background: linear-gradient(#c6eaf9, #10d4f1);
}

/* User playing setBlock background complete */
.exerciseBlock.playing .setBlock.complete .backgroundComplete{
	background: linear-gradient(#FDE74C, #dec50c);
}
/* Versus player setBlock background complete */
.setBlock.complete .backgroundComplete{
	-webkit-clip-path: circle(73% at 50% 50%);
	transition:-webkit-clip-path 900ms ease;
}

/* -- Background for Current -- */
.setBlock .backgroundCurrent{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-clip-path: circle(0% at 50% 50%);
    background: repeating-linear-gradient( 45deg, #b0e7ff, #b0e7ff 10px, #ccefff 10px, #ccefff 20px );
}
/* Players backgroundCurrent */
.exerciseBlock.playing .setBlock .backgroundCurrent{
	background: repeating-linear-gradient( 45deg, #fde74c, #fde74c 10px, #fff5b0 10px, #fff5b0 20px );
}
/* We want the webkit path to stay even when the block is complete */
.setBlock.current .backgroundCurrent, .setBlock.complete .backgroundCurrent{
	/*width:100%;
	transition:width 400ms ease;*/
	-webkit-clip-path: circle(73% at 50% 50%);
	transition:-webkit-clip-path 900ms ease;
}






.setBlock .weightAndRepsHolder{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.setBlock.complete{
	
}
.exerciseBlock.playing .setBlock.complete{
    border-color: #676767;;
}
.setBlock.current{
	/*background: repeating-linear-gradient( 45deg, #b0e7ff, #b0e7ff 10px, #ccefff 10px, #ccefff 20px );
	transition: all 600ms ease;*/
}
.exerciseBlock.playing .setBlock.current{
	/*background: repeating-linear-gradient( 45deg, #fde74c, #fde74c 10px, #fff5b0 10px, #fff5b0 20px );
	transition: all 600ms ease;*/
}
.setBlock.incomplete{
	/*background: #41a3cc;
    border: 1px solid #3693b9;
    transition: all 600ms ease;*/
}
.setBlock .weightHolder{
	text-align: center;
	color: #2593a7;;
	font-size: 14px;
	height: 12px;
}
.setBlock .repsHolder{
	text-align: center;
    color: #2b8fa2;
    font-size: 14px;
    margin-top: 2px;
}
.exerciseBlock.playing .setBlock.current .weightHolder{
	color:#928314;
}
.exerciseBlock.playing .setBlock.current .repsHolder{
	color:#887a14;
}
.exerciseBlock.playing .setBlock.complete .weightHolder{
	color:#928314;
}
.exerciseBlock.playing .setBlock.complete .repsHolder{
	color:#887a14;
}

.setBlock.incomplete .weightHolder{

}
.setBlock.incomplete .repsHolder{
	color: #3a89a9;
}
.setBlock.bodyWeight .weightHolder{
	display:none;
}
.setBlock.bodyWeight .repsHolder{
	line-height: 29px;
}





/* ----------- EXERCISE COMPLETED POPUP ----------- */
.exerciseCompletedPopup{
	width:100%;
	position:fixed;
	height:100%;
	background:#211507;
	top:0px;
	display:none;
	z-index:5;
}
.exerciseCompletedPopup .congratsText{
	font-family: 'Racing Sans One', cursive;
	color:white;
	font-size:40px;
	width: 100%;
    text-align: center;
    height: 40px;
    padding: 30px 0px 20px;
    -webkit-clip-path:circle(0% at 50% 50%);
}
.exerciseCompletedPopup .popupStarsHolder{
	width: 150px;
    height: 45px;
    text-align: center;
    margin: auto;
}
.exerciseCompletedPopup .popupStarsHolder .star{
	color:yellow;
	float:left;
	font-size:40px;
	font-size:1px;
	width:50px;
	line-height:40px;
}
.dot{
  width:10px;
  height:10px;
  position:absolute;
  background-color:#00FF00;
  border-radius: 20px;
  z-index:2;
}

#scene {
  height:100%;
  width:100%;
  perspective: 60px; /* the lower this is, the fancier it gets */
  position:fixed;
}

/*
#emitter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  display: none;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 20%; 
}
*/
.exerciseCompletedPopup .vsHolder{
	height: 140px;
    z-index: 4;
    width: 248px;
    margin: 40px auto 0px;
}

.exerciseCompletedPopup .user, .exerciseCompletedPopup .vs{
	float: left;
}
.exerciseCompletedPopup .user .imgHolder, .exerciseCompletedPopup .vs .imgHolder{
	background: #fff;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    overflow:hidden;
    border: 2px solid #fff;
}
.exerciseCompletedPopup .vs{
    margin-left:34px;
}
.exerciseCompletedPopup .vsHolder .score{
	font-family: 'Candal', sans-serif;
	color:white;
	font-size:20px;
	text-align:center;
}

.exerciseCompletedPopup .vsHolder .score span{
	font-size:10px;

}
.exerciseCompletedPopup .vsHolder .score span.number{
	font-size:20px;
}
.exerciseCompletedPopup .vsHolder img{
	height:100%;
	width:100%;
}
.exerciseCompletedPopup #continueBtn{
	background: #ff8f41;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 31px;
    left: 107px;
    font-size: 20px;
    font-family: candal;
    line-height: 80px;
    width: 160px;
    border-radius: 6px;
}



.addPackPopup{
	position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: -100%;
    font-family:"helvetica";
    transition:left 500ms ease;
    z-index: 4;
}
.addPackPopup.show{
	left:0%;
	transition:left 500ms ease;
}
.addPackPopup .addPackCloseBtn{
	position: absolute;
    top: 10px;
    right: 14px;
    font-size: 24px;
    color: #848484;
    z-index: 2;
}
.addPackPopup .header{
	clear: both;
    font-size: 17px;
    margin: 10px;
    border-radius: 3px;
    color: #2acbff;
    padding: 10px;
    text-align: center;
    font-family: candal;
}
.addPackPopupBG{
	position:absolute;
	height:100%;
	width:100%;
	background:#000;
	opacity:0.8;
	top:0px;
	left:0px;
}
.addPackPopupHolder{
	position:relative;
	height:100%;
	width:100%;
	opacity:1;
	top:0px;
	left:0px;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}
.addPack{
	clear:both;
	color:white;
	border-top: 1px solid #5b6063;
    height: 92px;
    padding-top:10px;
    position:relative;
    min-height: 76px;
    padding: 20px 0px 28px;
}
.addPack .leftBox, .addPack .rightBox, .addPack .middleBox{
	float:left;
}
.addPack .leftBox{
	margin:0px 10px 0px 10px;
}
.addPack .middleBox{
	width:150px;
	margin-right:10px;
}
.addPack .middleBox .creator{
	font-size:10px;
	opacity:0.5;
	margin-bottom:5px;
}
.addPack .packNumAndInfoBtnHolder{

}
.addPack .middleBox .packNum{
	font-size: 16px;
    opacity: 0.5;
    margin-top: 12px;
    float:left;
    margin-right: 9px;
}
.addPack .infoBtn{
	font-size:29px;
	text-align:center;
	color: #657d88;
	float:left;
	position: relative;
    top: 4px;
}


.addPack .addPackImg{
    overflow: hidden;
    border-radius: 44px;
    height: 70px;
    width: 70px;
    border: 3px solid #fff;
}
.addPack .leftBox .addPackImg img{
	height:100%;
	width:100%;
}
.addPack .rightBox{
	position: absolute;
    right: 10px;
}
.addPack .rightBox .addBtn{
	background: #9BC53D;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 9px;
    text-align: center;
    font-size: 17px;
    font-family: candal;
    width: 53px;
    line-height: 27px;
}
.addPack.currentlyPlaying .rightBox .addBtn{
	display:none;
}
.addPack .rightBox .currentlyPlayingText{
	width: 73px;
    text-align: center;
    font-family: candal;
    display:none;
    color: #9BC53D;
    margin-bottom: 10px;
}
.addPack.currentlyPlaying .rightBox .currentlyPlayingText{
	display:block;
}

.addPackInfoOverlay{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index: 3;
	display:none;
}
.addPackInfoOverlay.show{
}
.addPackInfoOverlay .background{
	position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity:0;
    opacity: 0.7;
    transition:opacity 400ms ease;
}
.addPackInfoOverlay.show .background{
	opacity:0.7;
	transition:opacity 400ms ease;
}
.addPackInfoOverlay .addPackInfoOverlayHolder{
	position: absolute;
    top: 60px;
    left: 4%;
    width: 90%;
    background: #fff;
    padding-top: 40px;
    z-index: 3;
    border-radius: 5px;
    border: 3px solid #000;
    overflow:auto;
    max-height: 640px;
    transform:scale(0);
    transition:transform 500ms ease;
    -webkit-overflow-scrolling: touch;
}
.addPackInfoOverlay.show .addPackInfoOverlayHolder{
	transform:scale(1);
	transition:transform 500ms ease;
}
.addPackInfoOverlay .closeBtn{
	position: absolute;
    top: 51px;
    right: 10px;
    font-size: 24px;
    z-index: 20;
    color: #fff;
    background: #1b85fd;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    opacity:0;
    transition:opacity 400ms ease;
}
.addPackInfoOverlay.show .closeBtn{
	opacity:1;
	transition:opacity 400ms ease;
}
.addPackPopup .workoutDayTitle{
	font-size: 23px;
    color: #5d5d5d;
    text-align: center;
    font-family: candal;
    margin-bottom: 5px;
}
.addPackPopup .workoutHolder{
	margin-bottom:20px;
}
.addPackPopup .exerciseHolder{
	clear: both;
    height: 20px;
    padding: 7px 7px 0px 7px;
    margin-bottom: 1px;
    border-bottom: 1px solid #fff;
}
.addPackPopup .exerciseHolder .name{
	float:left;
	color: #636363;
    font-size: 13px;
}
.addPackPopup .exerciseHolder .repsHolder{
	float:right;
}
.addPackPopup .exerciseHolder .rep{
	float: right;
    margin-left: 6px;
    font-size: 13px;
    background: #7de4ff;
    border-radius: 3px;
    padding: 2px;
    position: relative;
    top: -3px;
    color: #fff;
    min-width: 15px;
    text-align: center;
}






/* --------------- Invite Friends Popup ----------------- */
.inviteFriendsPopup{
	position: fixed;
	z-index: 4;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    transition:left 500ms ease;
}
.inviteFriendsPopup.show{
	left:0%;
	transition:left 500ms ease;
}
.popupBG{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.85;
}
.inviteFriendsPopup .closeBtn{
	position: absolute;
    top: 10px;
    color: #797979;
    font-size: 25px;
    right: 15px;
    z-index: 1;
}
.popupContentHolder{
	position:absolute;
	top:23px;
	left:0px;
	width:100%;
}
.inviteFriendsPopup .popupContentHolder{
	font-family:candal;
}
.inviteFriendsPopup .popupContentHolder .packImgHolder{
	height: 80px;
    width: 80px;
    border-radius: 60px;
    overflow: hidden;
    border: 3px solid #000;
    margin:11px auto 0px;
}
.inviteFriendsPopup .packImg{
	height: 93%;
    width: 93%;
    border: 3px solid #fff;
    border-radius: 54px;
}

.inviteFriendsPopup .inviteFriendsWelcomeTextHolder{
	font-size: 22px;
    color: #fff;
    width: 310px;
    text-align: center;
    margin: auto;
}

/* ---- Games Select Holder ------- */
.inviteFriendsPopup .gamesSelectHolder{
	margin-top:11px;
}
.inviteFriendsPopup .gamesBtnsHolder{
	width: 360px;
    margin: auto;
    border-bottom: 2px solid #fff;
    overflow: auto;
    padding-bottom: 11px;
}
.inviteFriendsPopup .gameBtnHolder{
	float: left;
    width: 89px;
    text-align: center;
    color:#656565;
    line-height:35px;
}
.inviteFriendsPopup .gameBtnHolder.selected{
	background: #d457f8;
    border-radius: 6px;
    color:white;
}


/* ----- Game Players Holder ------ */
.inviteFriendsPopup .gamePlayersHolder{
	width: 350px;
    margin: 8px auto 0px;
}
.inviteFriendsPopup .gamePlayerHolder{
	clear: both;
    font-family: arial;
    border-bottom: 1px solid #6d6d6d;
    line-height: 51px;
    height:51px;
    position:relative;
}
.inviteFriendsPopup .gamePlayerHolder .imgHolder{
	width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 30px;
    border: 2px solid #000;
    float: left;
    background: #00faff;
    position: relative;
    top: 4px;
}
.inviteFriendsPopup .gamePlayerHolder .imgHolder .playerImg{
	height:100%;
	width:100%;
}
.inviteFriendsPopup .gamePlayerHolder .nameHolder{
	float: left;
    color: #fff;
    margin-left: 7px;
}
.inviteFriendsPopup .gamePlayerHolder .nameHolder.user{
	color: #ffd736;
}
.inviteFriendsPopup .gamePlayerHolder .statusHolder{
	position: absolute;
    right: 0px;
    top: 5px;
}
.inviteFriendsPopup .gamePlayerHolder .statusHolder .playingText{
	color: #fff;
    font-family: candal;
    display:block;
    position:relative;
    top:-5px;
}
.inviteFriendsPopup .gamePlayerHolder .statusHolder .invitedText {
	color: #ffba33;
    font-family: candal;
    display:none;
    position:relative;
    top:-5px;
}
.inviteFriendsPopup .gamePlayerHolder.add .statusHolder .playingText{
	display:none;
}
.inviteFriendsPopup .gamePlayerHolder.invited .statusHolder .playingText{
	display:none;
}
.inviteFriendsPopup .gamePlayerHolder.invited .statusHolder .invitedText{
	display:block;
}
.inviteFriendsPopup .gamePlayerHolder .statusHolder .addBtn{
	display:none;
    color: #fff;
    background: #3b9dec;
    border-radius: 4px;
    text-align: center;
    font-family: candal;
    width:58px;
    line-height: 37px;
    position: relative;
    top: 3px;
}
.inviteFriendsPopup .gamePlayerHolder.add .statusHolder .addBtn{
	display:block;
}
.inviteFriendsPopup .gamePlayersHolder.allSelected .gamePlayerHolder.add .statusHolder .addBtn{
	display:none;
}

/* ------- Invite Players Holder -------- */
.inviteFriendsPopup .inviteTypeHolder{

}
.inviteFriendsPopup .inviteTypeBtn{

}
.inviteFriendsPopup .inviteTypeBtn.selected{
	
}
.inviteFriendsPopup .playingFriendsHolder{

}
.inviteFriendsPopup .playingFriendsHolder .playerHolder{

}
.inviteFriendsPopup .playingFriendsHolder .playerHolder .imgHolder{

}
.inviteFriendsPopup .playingFriendsHolder .playerHolder .imgHolder .playerImg{

}
.inviteFriendsPopup .playingFriendsHolder .playerHolder .nameHolder{

}
.inviteFriendsPopup .playingFriendsHolder .playerHolder .statusHolder{

}


/* --- Add Pack and Activty Btn -- */
.addPackAndActivityBtnHolder{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:5;
    display:none;
} 
.addPackAndActivityBtnHolder .popupBG{
    opacity: 0.05;
}
.addPackAndActivityBtnHolder .addBtnHolder{
    position: absolute;
    top: 10px;
    left: 58px;
    width: 300px;
    background: #3794b9;
    border: 3px solid #1b617d;
    border-radius: 5px;
}
.addPackAndActivityBtnHolder .addBtn{
    float: left;
    line-height: 60px;
    width: 98px;
    text-align: center;
    border-left: 2px solid #1c607c;
    color: #fff;
}
.addPackAndActivityBtnHolder .closeBtn{
    position:absolute;
    top:0px;
    right:0px;
}



/* --- Add Activity Popup -- */
.addActivityPopup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 4;
    display:none;
}  
.addActivityPopup .popupContent{
    position: absolute;
    z-index: 2;
    width: 90%;
    left: 5%;
    top: 30px;
    height:636px;
}
.addActivityPopup .popupBG{
    opacity:0.75;
}
.addActivityPopup .addArea{
    background: #fff;
    border-radius: 5px;
    height: 382px;
    height:127px;
    border: 3px solid #000;
    overflow:hidden;
    position:relative;
}
.addActivityPopup .dailyArea{
    background: #fff;
    height: 226px;
    border: 3px solid #000;
    border-radius: 5px;
    margin-top: 8px;
    overflow: auto;
}
.addActivityPopup .addArea .header{
    text-align: center;
    font-size: 23px;
    background: #00bfff;
    color: #fff;
    line-height: 50px;
    border-bottom: 2px solid #404040;
}
.addActivityPopup .activityPicklistHolder{
    width: 270px;
    margin: 20px auto;
    height: 47px;
}
.addActivityPopup .activityPicklist{
    border: 1px solid #b9b9b9;
    line-height: 20px;
    height: 40px;
    font-size: 19px;
    color: #6d6d6d;
    font-family: candal;
    text-align: center;
    width: 270px;
    padding-left: 8px;
}
.addActivityPopup .inputHolder{
    /* This is for weightAndReps and distanceAndTime */
    float: left;
    width: 160px;
}
.addActivityPopup.time .inputHolder, .addActivityPopup.reps .inputHolder{
    /* This is for time and reps */
    width:320px;
}

.addActivityPopup.distanceAndTime .inputHolder.weight, .addActivityPopup.distanceAndTime .inputHolder.reps{
    /* For Distance and Time Class */
    display:none;
}
.addActivityPopup.time .inputHolder.distance, .addActivityPopup.time .inputHolder.weight, .addActivityPopup.time .inputHolder.reps{
    /* For Time Class */
    display:none;
}
.addActivityPopup.weightAndReps .inputHolder.distance, .addActivityPopup.weightAndReps .inputHolder.time{
    /* For Weight and Reps Class */
    display:none;
}
.addActivityPopup.reps .inputHolder.distance, .addActivityPopup.reps .inputHolder.time, .addActivityPopup.reps .inputHolder.weight{
    /* For Reps */
    display:none;
}
.addActivityPopup .label{
    text-align:center;
}
.addActivityPopup .inputsHolder{
    height: 100px;
    overflow: auto;
}
.addActivityPopup .inputHolder input{
    border: 1px solid #b9b9b9;
    width: 90px;
    margin: auto;
    display: block;
    height: 40px;
    font-size: 23px;
    font-family: candal;
    text-align: center;
    border-radius: 4px;
    color: #6d6d6d;
}
.addActivityPopup .speedHolder{

}
.addActivityPopup .pointsHolder{
    
}
.addActivityPopup .infoHolders{
    margin:auto;
    width:260px;
    height:43px;
}
.addActivityPopup .infoHolder{
    height: 23px;
    margin-left:13px;
    float:left;
}
.addActivityPopup .infoHolder .title{
    width: 70px;
    text-align: center;
}
.addActivityPopup .infoHolder .value{
    width: 70px;
    text-align: center;
}
.addActivityPopup .infoHolder .addOn{
    width:50px;
}
.addActivityPopup .activityRecordBtn{
    background: #75dc75;
    color: #fff;
    width: 170px;
    line-height: 52px;
    text-align: center;
    border-radius: 4px;
    margin: 20px auto;
    font-size: 23px;
    border: 3px solid #389e38;
    clear:both;
}
.addActivityPopup .closeBtn{
    position: absolute;
    bottom: 3px;
    right: 5px;
    color: #808080;
    height: 40px;
    line-height: 41px;
    width: 60px;
    text-align: center;
    display: none;
}
.addActivityPopup .dailyArea{

}
.addActivityPopup .dailyArea .topArea{
    text-align: center;
    background: #ababab;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 3px solid #000;
    position: relative;
}
.addActivityPopup .dailyArea .topArea .dailyScore{
    position:absolute;
    top:0px;
    right:7px;
}
.addActivityPopup .dailyArea .headersArea{
    clear: both;
    height: 22px;
    background: #ababab;
    border-bottom: 2px solid #000;
    color: #565656;
    padding: 0px 6px;
}
.addActivityPopup .dailyArea .header{
    
} 
.addActivityPopup .dailyArea .header.name{
    width: 167px;
} 
.addActivityPopup .dailyArea .header.value{
    width: 102px;
    text-align: center;
} 
.addActivityPopup .dailyArea .header.points{
    width: 49px;
    text-align: right;
} 
.addActivityPopup .dailyArea .exercisesArea{
    padding: 0px 6px;
}
.addActivityPopup .dailyArea .exercise{
    border-bottom: 1px solid #b9b9b9;
    overflow: auto;
    min-height: 35px;
    line-height: 18px;
    padding: 8px 0px;
}
.addActivityPopup .dailyArea .exercise .name{
    width:167px;
}
.addActivityPopup .dailyArea .exercise .value{
    width:102px;
    text-align:center;
}
.addActivityPopup .dailyArea .exercise .points{
    width:49px;
    text-align:right;
}