/* TURN DEVICE NOTIFICATION */
@media screen and (orientation:portrait) {
	@media only screen and (max-height: 1365px), screen and (max-width: 649px) { /* sorta */
		.turnDevice{
			display: block;
		}
	}
}
@media screen and (orientation:landscape){
	@media only screen and (max-height: 279px), screen and (max-width: 399px) { /* was 319 by 479 */
		.badDevice{
			/*display: block;*/ /* disabled due to auth screen shenanigans */
		}
	}
}
/* MAIN MENU */
@media only screen and (max-width: 1170px) {
	.shareHolder {
	    width: 290px;
	}
}
@media only screen and (max-width: 1140px) {
	.shareHolderText {
		display: none;
	}
	.shareButtons{
		text-align: left;
	}
	.shareHolder {
		width: 212px;
		text-align: center;
	}
}
@media only screen and (max-width: 1066px) {
	.menuButton {
		width: 180px;
	}
	.shareHolder {
		width: 180px;
	}
}
@media only screen and (max-width: 900px) {
	.menuButton {
		width: 150px;
	}
	.shareHolder {
		width: 150px;
	}
}
@media only screen and (max-width: 755px) {
	.menuButton {
		width: 120px;
		font-size: 12px;
	}
	.shareHolder {
		width: 120px;
	}
	.shareButtons a {
		width: 16px;
		height: 16px;
		line-height: 16px;
		font-size: 12px;
	}
}
@media only screen and (max-width: 600px) {
	.menuButton {
		width: 100px;
	}
	.shareHolder {
		width: 100px;
	}
}
@media only screen and (max-width: 500px) {
	.menuButton {
		width: 80px;
		font-size: 8px;
	}
	.shareHolder {
		width: 80px;
	}
	.shareButtons a {
		width: 12px;
		height: 12px;
		line-height: 12px;
		font-size: 6px;
	}
}
@media only screen and (max-width: 479px), screen and (max-height: 319px) { /* super small screens */
	.menuButton {
		width: 69px;
		line-height: 25px;
		font-size: 8px;
	}
	.footermenu {
		height: 25px;
	}
	.shareButtons {
		margin-top: -2px;
	}
	.shareButtons a {
		width: 12px;
		height: 12px;
		line-height: 12px;
		font-size: 6px;
	}
}
/* MAIN PAGE */
@media only screen and (max-height: 737px) {
	.mobilePhoneVertical.main{
		height: 550px;
		background-size: contain;
		background-position: center top;
	}
}
@media only screen and (max-height: 610px) {
	.mobilePhoneVertical.main{
		height: 450px;
		background-size: contain;
		background-position: center top;
		margin-top: 0;
		top: 0;
	}
}
@media only screen and (max-height: 575px) {
	.mobilePhoneVertical.main .textAligner .right .big {
		margin-top: 30px;
	}
	.mobilePhoneVertical.main .textAligner .right .textHolder {
		margin-left: 0px;
	}
}
@media only screen and (max-height: 670px), screen and (max-width: 900px) { /* new rule for A.'s screen */
	.mobilePhoneVertical.main .textAligner .right .big {
		font-size: 36px;
		line-height: 38px;
	}
}
@media only screen and (max-height: 510px), screen and (max-width: 860px) { /* was 800w */
	.mobilePhoneVertical.main{
		height: 350px;
	}
	.mobilePhoneVertical.main .textAligner .right .big {
		font-size: 30px;
		line-height: 38px;
	}
	.mobilePhoneVertical.main .textAligner .right .small {
		font-size: 18px;
		line-height: 24px;
	}
	.mobilePhoneVertical.main .textAligner .right {
		width: 320px;
		right: -320px;
		height: 350px;
	}
	.playButton {
		margin-top: 30px;
	}
}
@media only screen and (max-height: 412px), screen and (max-width: 580px) { 
	.mobilePhoneVertical.main{
		width: 140px;
		height: 250px;
	}
	.mobilePhoneVertical.main .textAligner .right .big {
		margin-top: 10px;
		font-size: 30px;
		line-height: 38px;
	}
	.mobilePhoneVertical.main .textAligner .right .small {
		margin-top: 10px;
		font-size: 15px;
		line-height: 18px;
	}
	.mobilePhoneVertical.main .textAligner .right {
		width: 280px;
		right: -280px;
		height: 250px;
	}
	.playButton {
		margin-top: 15px;
	}
}
@media only screen and (max-height: 412px), screen and (max-width: 980px) { /* was 920 */
	.logos{
		width: 218px;
		/*z-index: 18;*/ /* override everything, moved to style.css */
	}
	.logos .logoRight {
		float: left;
		margin-left: 46px;
		margin-right: 0px;
		margin-top: 20px;
	}
	.logos .logoLeft,.logos .logoRight {
		background-size: contain;
	}
	.logos .logoLeft{
		width: 120px;
	}
	.logos .logoRight{ /* 1,124 aspect ration */
		width: 107px; 
		margin-top: 5px;
	}
	.logosGame{ /* New rules, game only */
		width: 50%;
	}
	.logosGame .logoLeft{
		margin-left: 10px; /* new rule */
	}
	.logosGame .logoRight {
		float: right;
		margin-right: 10px;
		margin-top: -5px;
	}
}


@media only screen and (max-width: 826px) {
	.logos{
		width: 218px;
		z-index: 18; /* override everything */
		margin-top: 5px;
	}
	.logos .logoLeft {
		margin-left: 5px;
		margin-top: 5px;
	}
	.logos .logoRight {
		float: left;
		margin-left: 5px;
		margin-right: 0px;
		margin-top: 5px;
	}
	.logosGame{ /* New rules, game only */
		width: 50%;
	}
	.logosGame .logoLeft{
		margin-left: 10px; /* new rule */
	}
	.logosGame .logoRight {
		float: right;
		margin-right: 10px;
		margin-top: -5px;
	}
}
@media only screen and (max-width: 644px) {
	.logos{
		width: 100px;
		z-index: 18; /* override everything */
		margin-top: 5px;
	}
	.logos .logoLeft {
		margin-left: 5px;
		margin-top: 5px;
		background-size: contain;
		width: 100px;
	}
	.logos .logoRight {
		float: left;
		margin-left: 5px;
		margin-right: 0px;
		margin-top: 5px;
		background-size: contain;
		width: 89px; /* 1,124 aspect ration */
	}
	.logosGame{ /* New rules, game only */
		width: 50%;
	}
	.logosGame .logoLeft{
		margin-left: 10px; /* new rule */
		margin-top: 7px;
	}
	.logosGame .logoRight {
		float: right;
		margin-right: 10px;
		margin-top: 2px;
	}
}
@media only screen and (max-width: 580px), screen and (max-height: 400px) { /* super small screens 580??? */
	/* main page addition */
	.logos{
		width: 70px;
	}
	.logos .logoLeft {
		width: 70px;
		height: 20px
	}
	.logos .logoRight {
		width: 62px; /* 1,124 aspect ration */
	}
	.mobilePhoneVertical.main .textAligner .right {
		width: 220px;
		right: -225px; /* was 220 */
	}
	.mobilePhoneVertical.main .textAligner .right .big {
		font-size: 20px;
		line-height: 22px;
	}
	.playButton{
		width: 200px;
	}
	.mobilePhoneVertical.main {
		left: 42%;
		width: 80px;
	}
	.logosGame{ /* New rules, game only */
		width: 50%;
	}
	.logosGame .logoLeft{
		margin-left: 10px; /* new rule */
		margin-top: 7px;
	}
	.logosGame .logoRight {
		float: right;
		margin-right: 10px;
		margin-top: 2px;
	}
}
@media only screen and (max-width: 479px), screen and (max-height: 319px) { /* super small screens */
	.logos{
		width: 70px;
	}
	.logos .logoLeft {
		width: 70px;
		height: 20px
	}
	.logos .logoRight {
		width: 62px; /* 1,124 aspect ration */
	}
	.mobilePhoneVertical.main .textAligner .right {
		width: 220px;
		right: -225px; /* was 220 */
	}
	.mobilePhoneVertical.main .textAligner .right .big {
		font-size: 20px;
		line-height: 22px;
	}
	.playButton{
		width: 200px;
	}
	.mobilePhoneVertical.main {
		left: 50%;
		width: 80px;
	}
	.logosGame{ /* New rules, game only */
		width: 50%;
	}
	.logosGame .logoLeft{
		margin-left: 10px; /* new rule */
		margin-top: 7px;
	}
	.logosGame .logoRight {
		float: right;
		margin-right: 10px;
		margin-top: 2px;
	}
}
/* PRODUCT PAGE */
@media only screen and (max-height: 688px), screen and (max-width: 1220px) {
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2
	{
		height: 550px;
		background-size: contain;
		background-position: center top;
	}
	.mobilePhoneVertical.product .textAligner .left {
		height: 550px;
		width: 435px; /* was 410 */
		left: -435px; 
	}
	.btnsmain {
		margin-top: 10px;
	}
}
@media only screen and (max-height: 600px), screen and (max-width: 980px) {
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2
	{
		height: 450px;
	}
	.mobilePhoneVertical.product .textAligner .left {
		height: 450px;
		width: 385px;
		left: -385px;
	}
	.productLogo {
		background-size: contain;
		width: 230px;
	}
	.mobilePhoneVertical.product .productLogo,
	.mobilePhoneVertical.product.alt0 .productLogo,
	.mobilePhoneVertical.product.alt1 .productLogo,
	.mobilePhoneVertical.product.alt2 .productLogo {
		margin-top: 105px;
	}
	.mobilePhoneVertical.product .textAligner .left .big,
	.mobilePhoneVertical.product.alt0 .textAligner .left .big,
	.mobilePhoneVertical.product.alt1 .textAligner .left .big,
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		width: 100%;
		margin-top: 10px;
		font-size: 20px;
		line-height: 22px;
	}
	.mobilePhoneVertical.product .textAligner .left .small,
	.mobilePhoneVertical.product.alt0 .textAligner .left .small,
	.mobilePhoneVertical.product.alt1 .textAligner .left .small,
	.mobilePhoneVertical.product.alt2 .textAligner .left .small {
		width: 100%;
		margin-top: 10px;
		font-size: 14px;
		line-height: 16px;
	}
	.mobilePhoneVertical.product .goButton,
	.mobilePhoneVertical.product.alt0 .goButton,
	.mobilePhoneVertical.product.alt1 .goButton,
	.mobilePhoneVertical.product.alt2 .goButton {
		margin-top: 10px;
		margin-left: 0px;
	}
	.mobilePhoneVertical.product .textAligner .left .textHolder,
	.mobilePhoneVertical.product.alt0 .textAligner .left .textHolder,
	.mobilePhoneVertical.product.alt1 .textAligner .left .textHolder,
	.mobilePhoneVertical.product.alt2 .textAligner .left .textHolder {
		margin-left: 0px;
	}
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2{
		top: 0;
		margin-top: 50px;
	}
}
@media only screen and (max-height: 550px), screen and (max-width: 950px) {
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2
	{
		height: 350px;
	}
	.mobilePhoneVertical.product .textAligner .left {
		height: 350px;
		width: 325px;
		left: -325px;
	}
}
@media only screen and (max-height: 510px), screen and (max-width: 870px) {
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2
	{
		height: 250px;
	}
	.mobilePhoneVertical.product .textAligner .left {
		height: 250px;
		width: 240px;
		left: -180px;
	}

	.mobilePhoneVertical.product .goButton,
	.mobilePhoneVertical.product.alt0 .goButton,
	.mobilePhoneVertical.product.alt1 .goButton,
	.mobilePhoneVertical.product.alt2 .goButton {
		width: 220px;
	}

	.mobilePhoneVertical.product .productLogo,
	.mobilePhoneVertical.product.alt0 .productLogo,
	.mobilePhoneVertical.product.alt1 .productLogo,
	.mobilePhoneVertical.product.alt2 .productLogo {
		margin-top: 0px;
	}
}
@media only screen and (max-height: 460px), screen and (max-width: 830px) {
	.mobilePhoneVertical.product .goButton,
	.mobilePhoneVertical.product.alt0 .goButton,
	.mobilePhoneVertical.product.alt1 .goButton,
	.mobilePhoneVertical.product.alt2 .goButton {
		width: 160px;
		height: 35px;
		font-size: 14px;
		line-height: 35px;
	}
	.btnsmain {
		margin-left: 50px;
	}
}
@media only screen and (max-height: 440px), screen and (max-width: 760px) {
	.mobilePhoneVertical.product .textAligner .left .big,
	.mobilePhoneVertical.product.alt0 .textAligner .left .big,
	.mobilePhoneVertical.product.alt1 .textAligner .left .big,
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		width: 100%;
		margin-top: 10px;
		font-size: 18px;
		line-height: 20px;
	}
	.mobilePhoneVertical.product .textAligner .left .small,
	.mobilePhoneVertical.product.alt0 .textAligner .left .small,
	.mobilePhoneVertical.product.alt1 .textAligner .left .small,
	.mobilePhoneVertical.product.alt2 .textAligner .left .small {
		width: 100%;
		margin-top: 10px;
		font-size: 12px;
		line-height: 14px;
	}
	.productLogo {
		background-size: contain;
		width: 200px;
	}
	.mobilePhoneVertical.product .textAligner .left {
		width: 200px;
		left: -140px;
	}
}
@media only screen and (max-height: 420px), screen and (max-width: 700px) {
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2
	{
		width: 240px;
		margin-left: -120px;
		margin-top: 15px;
	}
	.mobilePhoneVertical.product .textAligner .left {
		width: 180px;
		left: -120px;
	}
	.mobilePhoneVertical.product .textAligner .left .big,
	.mobilePhoneVertical.product.alt0 .textAligner .left .big,
	.mobilePhoneVertical.product.alt1 .textAligner .left .big,
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		margin-top: 4px;
	}
	.mobilePhoneVertical.product .textAligner .left .small,
	.mobilePhoneVertical.product.alt0 .textAligner .left .small,
	.mobilePhoneVertical.product.alt1 .textAligner .left .small,
	.mobilePhoneVertical.product.alt2 .textAligner .left .small {
		margin-top: 4px;
	}
	.arrows .arrowLeft, .arrows .arrowRight{
		z-index: 800;
	}
	.productLogo {
	    background-size: contain;
	    width: 174px;
	}
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		font-size: 11px;
		line-height: normal;
	}
}
@media only screen and (max-height: 400px), screen and (max-width: 520px) {
	.mobilePhoneVertical.product .textAligner .left .big,
	.mobilePhoneVertical.product.alt0 .textAligner .left .big,
	.mobilePhoneVertical.product.alt1 .textAligner .left .big,
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		font-size: 12px;
		line-height: 14px;
		margin: 0px;
	}
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		font-size: 11px;
		line-height: normal;
		margin: 0px;
	}
	.mobilePhoneVertical.product .textAligner .left .small,
	.mobilePhoneVertical.product.alt0 .textAligner .left .small,
	.mobilePhoneVertical.product.alt1 .textAligner .left .small,
	.mobilePhoneVertical.product.alt2 .textAligner .left .small {
		width: 100%;
		margin-top: 4px;
		font-size: 10px;
		line-height: 12px;
	}
}
@media only screen and (max-height: 320px), screen and (max-width: 518px){
	.mobilePhoneVertical.product,
	.mobilePhoneVertical.product.alt0,
	.mobilePhoneVertical.product.alt1,
	.mobilePhoneVertical.product.alt2
	{
		height: 128px;
		width: 180px;
		margin-left: -90px;
		margin-top: 15px;
	}
	.mobilePhoneVertical.product.alt2 .textAligner .left .big {
		font-size: 9px;
	}
}
@media only screen and (max-width: 479px), screen and (max-height: 319px) { /* super small screens */
	.arrows .arrowLeft, .arrows .arrowRight {
		width: 30px;
		height: 30px;
		background-size: 24px;
	}
	.arrows .arrowLeft{
		left: 10px;
	}
	.arrows .arrowRight {
		right: 10px;
	}
	.mobilePhoneVertical.product .textAligner .left {
		width: 140px;
		left: -90px;
	}
	.productLogo {
		width: 145px;
	}
	.mobilePhoneVertical.product .textAligner .left .small,
	.mobilePhoneVertical.product.alt0 .textAligner .left .small,
	.mobilePhoneVertical.product.alt1 .textAligner .left .small,
	.mobilePhoneVertical.product.alt2 .textAligner .left .small {
		font-size: 8px;
		line-height: normal;
	}
	.mobilePhoneVertical.product.alt2 .goButton {
		height: 23px;
		line-height: 23px;
	}
	.btnsmain {
		margin-left: 53px;
	}
}
/* GAME START PAGE */
@media only screen and (max-height: 730px), screen and (max-width: 1130px) { /* was 710m, expreimentally changed to 730 */
	.mobilePhoneVertical.gameStart {
		width: 280px;
		height: 500px;
		margin-left: -140px;
		margin-top: -250px;
		background-size: contain;
		background-position: center top;
	}
	.animaAligner{
		width: 76%;
		height: 84%;
		margin-left: 12%;
		margin-top: 13%;
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		height: 500px;
		width: 580px;
		right: -580px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .big {
		margin-top: 0px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .textHolder {
		margin-left: 0px;
	}
}
@media only screen and (max-height: 690px), screen and (max-width: 1110px) { /* was 640, changed to 690 due to A.'s screen */
	.mobilePhoneVertical.gameStart .textAligner .right .small,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i1,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i2,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i3 {
    		margin-top: 15px; /* was 20, changed to 15 due to A.'s screen */
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small .bubble,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i1 .bubble,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i2 .bubble,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i3 .bubble {
    		margin-top: 0px;
	}
	.mobilePhoneVertical.gameStart .playButton {
    		margin-top: 20px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		width: 420px;
		right: -420px;
	}
}
@media only screen and (max-height: 600px), screen and (max-width: 1105px) {
	.mobilePhoneVertical.gameStart {
		top: 45%;
		width: 220px;
		height: 400px;
		margin-left: -110px;
		margin-top: -200px;
		background-size: contain;
		background-position: center top;
	}
	.animaAligner{
		width: 78%;
		height: 84%;
		margin-left: 11%;
		margin-top: 13%;
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		height: 400px;
		/*width: 580px;
		right: -580px;*/
	}
	.mobilePhoneVertical.gameStart .textAligner .right .big {
		font-size: 24px;
		line-height: 26px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small {
		font-size: 16px;
		line-height: 18px;
	}
}
@media only screen and (max-height: 525px), screen and (max-width: 1010px) {
	.mobilePhoneVertical.gameStart {
		top: 0px;
		width: 220px;
		height: 400px;
		margin-left: -110px;
		margin-top: 20px;
		background-size: contain;
		background-position: center top;
	}
	.animaAligner{
		/* nothing need changing */
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		width: 345px;
		right: -345px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .big {
		width: 100%;
	}
}
@media only screen and (max-height: 485px), screen and (max-width: 670px) {
	.mobilePhoneVertical.gameStart .playButton {
		font-size: 20px;
		width: 200px;
		height: 40px;
		line-height: 40px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .big {
		font-size: 22px;
		line-height: 24px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small {
		font-size: 14px;
		line-height: 16px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i1,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i2,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i3 {
		margin-top: 5px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small .bubble {
		width: 40px;
		height: 40px;
		font-size: 54px;
		line-height: 48px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		width: 280px;
		right: -280px;
		height: 320px;
	}
	.mobilePhoneVertical.gameStart {
		height: 320px;
	}
	.animaAligner{
		width: 62%;
		height: 84%;
		margin-left: 19%;
		margin-top: 10%;
	}
	.js-animaPhone{
		height: 100%; /* otherwise it's too big */
	}
}
@media only screen and (max-height: 400px), screen and (max-width: 570px) {
	.mobilePhoneVertical.gameStart .playButton {
		font-size: 18px;
		width: 180px;
		height: 30px;
		line-height: 30px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .big {
		font-size: 20px;
		line-height: 22px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small {
		font-size: 12px;
		line-height: 14px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i1,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i2,
	.mobilePhoneVertical.gameStart .textAligner .right .small.i3 {
		margin-top: 5px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small .bubble {
		width: 30px;
		height: 30px;
		font-size: 44px;
		line-height: 38px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		width: 235px;
		right: -235px;
		height: 290px;
	}
	.mobilePhoneVertical.gameStart {
		width: 160px;
		margin-left: -80px;
		height: 290px;
	}
	.animaAligner{
		width: 76%;
		height: 84%;
		margin-left: 12%;
		margin-top: 13%;
	}
}
@media only screen and (max-height: 370px), screen and (max-width: 480px) {
	.mobilePhoneVertical.gameStart .textAligner .right .big {
		font-size: 16px;
		line-height: 18px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small {
		font-size: 10px;
		line-height: 12px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right .small .bubble {
		width: 30px;
		height: 30px;
		font-size: 44px;
		line-height: 38px;
	}
	.mobilePhoneVertical.gameStart .textAligner .right {
		width: 200px;
		right: -200px;
		height: 220px;
	}
	.mobilePhoneVertical.gameStart {
		width: 140px;
		margin-left: -70px;
		height: 220px;
	}
	.animaAligner{
		width: 67%;
		height: 84%;
		margin-left: 16%;
		margin-top: 11%;
	}
}
/* GAME END and INTERMISSION PAGE */
/* BAD DESCRIPTION */
.backdropContent .gamePauseRight .textHolder .onPhoto .description.tooBigADescription {
	font-size: 14px;
}
/*@media only screen and (max-height: 670px), screen and (max-width: 900px) {
	.backdropContent .gamePauseRight .textHolder .onPhoto .description.tooBigADescription {
		font-size: 12px;
	}
}*/
@media only screen and (max-height: 670px), screen and (max-width: 900px) { /* alt rule for A.'s screen */
	.backdropContent .gamePauseRight .textHolder .onPhoto .description.tooBigADescription {
		font-size: 12px;
	}
}
@media only screen and (max-height: 630px), screen and (max-width: 895px) {
	.backdropContent .gamePauseRight .textHolder .onPhoto .description.tooBigADescription {
		font-size: 10px;
	}
}
@media only screen and (max-height: 460px), screen and (max-width: 520px) {
	.backdropContent .gamePauseRight .textHolder .onPhoto .description.tooBigADescription {
		font-size: 8px;
	}
}
@media only screen and (max-height: 400px), screen and (max-width: 480px) {
	.backdropContent .gamePauseRight .textHolder .onPhoto .description.tooBigADescription {
		font-size: 6px;
	}
}
/* END BAD DESCRIPTION */
@media only screen and (max-height: 760px), screen and (max-width: 1074px) {
	.backdropContent .gamePauseRight .textHolder .score {
		font-size: 22px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		width: 390px;
	}
}
@media only screen and (max-height: 715px), screen and (max-width: 912px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		margin-top: 90px;
		/*width: 275px;*/
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .name {
		font-size: 24px;
		line-height: 26px;
	}
}
/*@media only screen and (max-height: 670px), screen and (max-width: 900px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		margin-top: 40px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		width: 270px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .description {
		margin-top: 10px;
		font-size: 12px;
	}
	.backdropContent .gamePauseLeft .textHolder .name{
		font-size: 54px;	
	}
	.backdropContent .gamePauseLeft .textHolder .subname{
		font-size: 24px;
	}
	.backdropContent .gamePauseLeft .textHolder .score {
		font-size: 45px;
		line-height: 55px;
	}
}*/
@media only screen and (max-height: 670px), screen and (max-width: 900px) { /* alt rule for A.'s screen */
	.backdropContent .gamePauseRight .textHolder .bigRed {
		margin-top: 90px;
		/*width: 84%;*/
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		width: 84%;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .description {
		margin-top: 10px;
	}
}
@media only screen and (max-height: 630px), screen and (max-width: 895px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		/*margin-top: 40px;*/
		width: 275px;
		font-size: 20px; /* f*ck it! */
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		/*width: 270px;*/ /* A. fix */
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .description {
		margin-top: 10px;
		font-size: 12px;
	}
	.backdropContent .gamePauseLeft .textHolder .name{
		font-size: 54px;	
	}
	.backdropContent .gamePauseLeft .textHolder .subname{
		font-size: 24px;
	}
	.backdropContent .gamePauseLeft .textHolder .score {
		font-size: 45px;
		line-height: 55px;
	}
}
@media only screen and (max-height: 570px), screen and (max-width: 680px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		margin-top: 20px;
	}
	.backdropContent .gamePauseRight .textHolder {
		margin-left: 25px;
	}
	.playButton.continueButton {
		height: 30px;
		margin-top: 15px;
		line-height: 30px;
		font-size: 16px;
	}
	.backdropContent .gamePauseRight .textHolder .score {
		width: 270px;
	}
	.backdropContent .gamePauseLeft .textHolder .name{
		font-size: 44px;	
	}
	.backdropContent .gamePauseLeft .textHolder .subname{
		font-size: 14px;
	}
	.backdropContent .gamePauseLeft .textHolder .score {
		font-size: 25px;
		line-height: 35px;
	}
}
@media only screen and (max-height: 515px), screen and (max-width: 620px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		font-size: 20px;
	}
	.backdropContent .gamePauseRight .textHolder .score {
		font-size: 14px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		margin-top: 0px;
	}
	.backdropContent .gamePauseRight .textHolder .bigRed {
		width: 235px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		/*width: 230px;*/ /*A. fix*/
	}
	.backdropContent .gamePauseRight .textHolder .score {
		width: 230px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .name {
		font-size: 16px;
		line-height: 18px;
	}
	.backdropContent .gamePauseLeft .textHolder .name{
		font-size: 34px;	
	}
	.backdropContent .gamePauseLeft .textHolder .subname{
		font-size: 12px;
	}
}
@media only screen and (max-height: 460px), screen and (max-width: 520px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		font-size: 12px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .header {
		font-size: 12px;
	}
	.backdropContent .gamePauseRight .textHolder .bigRed {
		width: 185px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto {
		/*width: 180px;*/ /*A. fix*/
	}
	.backdropContent .gamePauseRight .textHolder .score {
		width: 180px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .description {
		margin-top: 5px; /* was 0 */
		font-size: 10px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .name {
		font-size: 14px;
		line-height: 16px;
	}
	.backdropContent .gamePauseLeft .textHolder .header{
		margin-top: 5px;
	}
	.backdropContent .gamePauseLeft .textHolder .name{
		font-size: 28px;	
	}
}
@media only screen and (max-height: 400px), screen and (max-width: 480px) {
	.backdropContent .gamePauseRight .textHolder .bigRed {
		font-size: 8px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .name {
		font-size: 12px;
		line-height: 14px;
	}
	.playButton.continueButton {
		/*margin-top: 0px;*/
		margin-top: 5px;
		width: 130px;
	}
	.backdropContent .gamePauseRight .textHolder .onPhoto .description {
		font-size: 8px;
	}
	.backdropContent .gamePauseLeft .textHolder {
		margin-top: -60px;
		height: 180px;
	}
	.backdropContent .gamePauseLeft .textHolder .header{
		font-size: 15px;
		line-height: normal;
	}
	.backdropContent .gamePauseLeft .textHolder .score {
		font-size: 20px;
		line-height: normal;
	}
	.backdropContent .gamePauseLeft .textHolder .name{
		font-size: 24px;	
	}
}
@media only screen and (max-width: 479px), screen and (max-height: 319px) { /* super small screens */
	.playButton.continueButton {
		width: 160px;
	}
}
/* MAIN GAME PAGE */
@media only screen and (max-height: 670px) and (min-height: 630px) { /* added as a special fix */
	.contentHolder.game .logos{
    		margin-top: 14px;
		/* transition: all 1s ease-in-out; */
	}
}
@media only screen and (max-height: 630px) and (min-height: 412px) { /* added as a special fix */
	.contentHolder.game .logos{
    		margin-top: 8px;
	}
}
@media only screen and (max-height: 614px), screen and (max-width: 1023px) { /* was 1024x670, changed due to A.'s fucked-up screen, 1024 changed to 1023, so as 1024 still has big format */
	.mobilePhoneHorizontal.game {
		background: none;
		background-color: black;
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top: 0;
		top: 0;
		left: 0;
		min-height: 100%;
	}
	.gameScreen {
		width: 100%;
		height: 100%;
		margin-top: 0px;
		margin-left: 0px;
		border-radius: 0px;
		overflow: hidden;
	}
	.contentHolder.game .logos{
		z-index: 18; /* override everything */
	}
}
@media only screen and (max-height: 335px), screen and (max-width: 512px) {
	.animatedLoader .loader{
		width: 62px;
		height: 62px;
		font-size: 22px;
		line-height: 59px;
	}
	.animatedLoader .loader2{
		width: 70px;
		height: 70px;
	}
	.animatedLoader .loader3{
		width: 62px;
		height: 62px;
	}
	.animatedLoader .loader4{
		width: 62px;
		height: 62px;
		font-size: 22px;
		line-height: 59px;
	}
	.gamePhoto .animatedLoader.gameTimer .loader4 {
		line-height: 59px;
	}
	.gamePhoto .gameTimer {
		margin-left: -31px;
		margin-top: -55px;
	}
}
/* AUTH PAGE */
@media only screen and (max-height: 540px), screen and (max-width: 740px) {
	.authScreen .headerHolder {
		font-size: 22px;
		width: 100%;
	}
	.authScreen .authScreenHolder {
		width: 480px;
		margin-left: -240px;
		height: 400px;
		margin-top: -200px;
	}
	.authScreen .headerHolder .closeButton {
		top: -15px;
		right: -15px;
		width: 30px;
		height: 30px;
		background-size: contain;
	}
}
@media only screen and (max-height: 440px), screen and (max-width: 520px) {
	.authScreen .authScreenHolder {
		width: 400px;
		margin-left: -200px;
		height: 340px;
		margin-top: -170px;
	}
	.authScreen .headerHolder {
		font-size: 18px;
	}
	.authScreen .socNetTitle, .authScreen .emailTitle {
		margin-top: 10px;
	}
	.authScreen .emailField {
		margin-top: 10px;
	}
	.authScreen {
		background: black; /* full black color */
	}
}
@media only screen and (max-height: 375px), screen and (max-width: 480px) {
	.authScreen .authScreenHolder {
		height: 280px;
		margin-top: -140px;
	}
	.authScreen .socNetIcons a {
		margin-top: 6px;
		font-size: 22px;
		width: 38px;
		height: 38px;
		line-height: 38px;
	}
	.authScreen .emailSubmit.playButton {
		height: 30px;
		line-height: 30px;
	}
}
@media only screen and (max-width: 479px), screen and (max-height: 319px) { /* super small screens */
	.authScreen .headerHolder .closeButton {
	    top: 2px;
	    right: 2px;
	    width: 15px;
	    height: 15px;
	    background-size: contain;
	}
}
/* TABLE PAGE */
@media only screen and (max-width: 980px) and (min-width: 827px) {
	.content-table01 {
		margin-left: 100px;
	}
	.arrowP {
		float: none !important;
		margin: 0px !important;
		margin-right: 13px !important;
	}
	.arrowP.right {
		float: none !important;
		margin: 0px !important;
		margin-left: 5px !important;
	}
}
@media only screen and (max-height: 740px), screen and (max-width: 740px) {
	.content-table01 .tableColBlock {
		width: 100%;
		max-width: none;
		margin-left: 0px;
	}
	.tableBlock .name {
		width: 150px;
	}
	.content-table01 .tableColBlock .tableBlock {
		margin-bottom: 4px;
	}
}
@media only screen and (max-height: 720px), screen and (max-width: 670px) {
	.content-table01 .tableCol {
		min-height: none;
		width: 290px;
		max-width: 290px;
		margin-right: 0px;
	}
	.tableBlock{
		width: 290px;
	}
	.tableBlock, .tableBlock .place, .tableBlock .name, .tableBlock .score {
		height: 32px;
		line-height: 32px;
	}
}
@media only screen and (max-height: 630px), screen and (max-width: 670px) { /* new rule for A.'s screen */
	.tablePagination {
		margin-left: 0px;
	}
	.arrowP {
		float: left;
		margin: 0px;
		margin-left: 20px;
	}
	.arrowP.right {
		float: right;
		margin: 0px;
		margin-right: 20px;
	}
}
@media only screen and (max-height: 590px), screen and (max-width: 600px) {
	.content-table01 .header {
		font-size: 12px;
	}
	.tableBlock, .tableBlock .place, .tableBlock .name, .tableBlock .score {
		height: 20px;
		line-height: 20px;
	}
	.tableBlock .name {
		width: 100px;
	}
	.content-table01 .tableCol {
		width: 222px;
		max-width: none;
		margin-right: 5px;
	}
	.tableBlock{
		width: 222px;
	}
}
@media only screen and (max-height: 475px), screen and (max-width: 510px) {
	.tablePagination {
    		margin-top: 0px;
	}
	.content-table01 .header {
    		margin-left: 60px;
	}
	.arrowP{
		width: 20px;
		height: 20px;
		background-size: 10px;
	}
	.tablePagination .place {
		width: 20px;
		height: 20px;
		line-height: 20px;
	}
}
@media only screen and (max-height: 430px), screen and (max-width: 480px) {
	.tableBlock, .tableBlock .place, .tableBlock .name, .tableBlock .score {
		height: 8px;
		line-height: 6px;
		font-size: 8px;
		font-weight: normal;
	}
	.tableBlock .name {
		width: 100px;
	}
	.content-table01 .tableCol {
		width: 222px;
		max-width: none;
		margin-right: 5px;
	}
	.tableBlock{
		width: 222px;
	}
}
@media only screen and (max-width: 479px), screen and (max-height: 319px) { /* super small screens */
	.content-table01 .tableCol, .tableBlock {
		width: 174px;
	}
	.tableBlock .name {
		width: 75px;
		line-height: 7px;
		overflow: hidden;
	}
	.tableBlock .score {
    		width: 38px;
	}
}
/* GAME END PAGE */
@media only screen and (max-height: 710px), screen and (max-width: 1130px) {
	/* nothing */
}
@media only screen and (max-height: 660px), screen and (max-width: 1120px) {
	.finalScore{
		font-size: 40px;
	}
}
@media only screen and (max-height: 640px), screen and (max-width: 1110px) {
	/* nothing */
}
@media only screen and (max-height: 600px), screen and (max-width: 1105px) {
	/* nothing */
}
@media only screen and (max-height: 525px), screen and (max-width: 1010px) {
	.finalScore{
		font-size: 40px;
	}
	.js-table.smallText.shareSuggestion{
		margin-top: 10px;
	}
}
@media only screen and (max-height: 485px), screen and (max-width: 670px) {
	.finalScore{
		font-size: 35px;
	}
	#js-table.playButton{
		font-size: 14px;
	}
	.js-table.smallText.shareSuggestion{
		margin-top: 0px;
	}
}
@media only screen and (max-height: 400px), screen and (max-width: 570px) {
	.finalScore{
		font-size: 20px;
	}
	.js-table.smallText{
		margin-top: 20px;
		font-size: 18px;
		line-height: 20px;
	}
}
@media only screen and (max-height: 370px), screen and (max-width: 480px) {
	.js-table.smallText{
		margin-top: 10px;
		font-size: 16px;
		line-height: 18px;
	}
	.js-table.smallText.shareSuggestion{
		font-size: 14px;
	}
	.js-table.smallText.scoreAdvertisment{
		font-size: 14px;
	}
	.js-table.shareButtons{
		margin-top: 0px;
	}
}
/* IPHONE 6 PLUS GAME SCREEN FIX */
@media only screen and (max-height: 414px) and (min-height: 414px), screen and (max-width: 736px) and (min-width: 736px) {
	.backdropContent .gamePauseLeft .textHolder {
		margin-top: -104px;
		height: 230px;
	}
}