* {
			padding: 0;
			margin: 0;
			font-family: Arial, Helvetica, sans-serif !important;
		}

		html, body {
			overflow: hidden;
			position: absolute;
			width: 100%;
			height: 100%;
			font-size: 0.95rem;
			background:linear-gradient(to top, #868383, #ebeaea);
		}

		body > :not(.pace),body:before,body:after {
		  -webkit-transition:opacity .4s ease-in-out;
		  transition:opacity .4s ease-in-out
		}

		body:not(.pace-done) > :not(.pace),body:not(.pace-done):before,body:not(.pace-done):after {
		  opacity:0 !important
		}

		#background {
			overflow: hidden;
			position: absolute;
			width: 200%;
			height: 100%;
			left: -0%;
			-webkit-transition: left 2s linear 1s;
			transition: left 2s linear 1s;
		}
		.tank1 #background {
			left: -0%;
		}
		.tank2 #background {
			left: -100%;
		}

		#background .tank1, #background .tank2 {
			position: relative;
			background-repeat: repeat-x; 
			background-position: bottom; 
			width: 50%;
			height: 100%;
			display: inline-block;
		}

		#background .tank1 {
			
			background-image: url(../imgs/UnderWater.png);

		}

		#background .tank2 {
			background-color: #fdfdfc;
			background-image: url(../imgs/back2.png);
		}

		#background .sign {
			background-image: url(../imgs/sideSmallLogo.png);
			background-repeat: no-repeat; 
			background-position: left bottom; 
			background-size: 100% 100%; 
			overflow: hidden;
			position: absolute;
		    bottom: 0;
		    left: 0;
			width: 100%;
			max-width: 360px;
			height: 100%;
			max-height: 320px;
			pointer-events: none
		}
	

		#background .sign img {
			overflow: hidden;
			position: absolute;
		    top: 10%;
		    left: 51%;
		    -webkit-transform: translateX(-50%);
		            transform: translateX(-50%);
			width: auto;
			max-width: 48%;
			height: 28%;
			pointer-events: none;		
		}


		#background .sign .text {
			overflow: hidden;
			position: absolute;
		    top: 40%;
		    left: 28.5%;
			width: 52%;
			height: 27%;
			pointer-events: none;
			color: white;
			line-height: 1.125em;
			font-size: 1.063em;
			/*font-weight: bold;	*/		
		}

		#loader {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		#bannerConsent {
			background-color:#707070; 
			text-align: center;
		}

		#bannerConsent p{
			color:#FFFFFF; 
			padding: 5px;
		}

		#bannerConsent a{
			text-decoration: none; 
			color: #FFFFFF;
		}

		#list {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100%;
		    height: 100%;
		    overflow-y: auto;
			max-width: 360px;
			padding-bottom: 5rem;
		    background-color: white;
		    -webkit-transition: all 0.4s ease-out 0s;
		    transition: all 0.4s ease-out 0s;
			z-index: 2;
		}

		#list .list-group-item {
			border-radius: 0 !important;
			cursor: pointer;
		}
		#list .dead .badge-default {
		    background-color: #ff0000;
		}

		#list .dead .progress .progress-bar{
			width: 100% !important;
		    background-color: #ff0000 !important;
		}

		.modal-open #list, .list-close #list {
			top: 100%;
		}




		#list .progress {
			position: absolute;
			bottom: 0;
			left:0;
			width: 100%;
		}
		
		#list .progress .progress-bar {
			height: 4px;
		}

		#buttons {
			position: absolute;
			bottom: 0;
			right: 0;
			left:0;
			padding: 0.75em;
			height: 7.5%;
		    z-index: 1999;
		    background-color: white;
    		text-align: right;
		    -webkit-transition: all 0.1s ease-out 0.3s;
		    transition: all 0.1s ease-out 0.3s;
			z-index: 3;
			border-top-left-radius: 6px;
		}

		.modal-open #buttons, .list-close #buttons {
			width: auto;
		    /*background-color: rgba(255,255,255,0.5);*/
		    background-color: transparent;
			border-radius: 0.25rem;
		}

		#container {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1;
		}

		.fish {
			position: absolute;
			top: 50%;
			left: 50%;
			border-radius: 50%;
			z-index: 1;
		}
		.fish:hover {
			z-index: 1049;
		}
		.fish.active {
			background: rgba(255,255,255,0.25);
			border: 1px solid rgba(255,255,255,0.75);
			z-index: 1049;
		}
		.fish .name {
			position: absolute;
			top: 0;
			width: auto;
			left: 50%;
			-webkit-transform: translateX(-50%);
			        transform: translateX(-50%);
			color: white;
			text-align: center;
			opacity: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			z-index: 1;
			font-weight: bold
		}
		.fish:hover .name {
			opacity: 1;
		}
		.fish.active .name {
			opacity: 0;
		}
		.fish .size {
			margin: auto;
			width: 100%;
			height: 100%;
			background-color: transparent;
		}
		.fish .size .img {
			margin: auto;
			width: 100%;
			height: 100%;
			background-color: transparent;
			background-repeat: no-repeat;
			background-position: 0% 0;
			background-size: auto 100%;
			-webkit-animation: animating 1.5s steps(35) infinite;
			animation: animating 1.5s steps(35) infinite;
		}
		.fish.right .size .img{
			-webkit-transform: scale(-1, 1);
			transform: scale(-1, 1);
		}

		.fish.blue_fish .size .img, .fish.blue_fish2 .size .img, .fish.blue_fish3 .size .img{
			background-image:url(../imgs/blue_fish.png) !important;
		}

		.fish.red_fish .size .img, .fish.red_fish2 .size .img, .fish.red_fish3 .size .img{
			background-image:url(../imgs/red_fish.png) !important;
		}

		.fish.yellow_fish .size .img, .fish.yellow_fish2 .size .img, .fish.yellow_fish3 .size .img{
			background-image:url(../imgs/yellow_fish.png) !important;
		}

		.fish.orange_fish .size .img, .fish.orange_fish2 .size .img, .fish.orange_fish3 .size .img{
			background-image:url(../imgs/orange_fish.png) !important;
		}

		.fish.green_fish .size .img, .fish.green_fish2 .size .img, .fish.green_fish3 .size .img{
			background-image:url(../imgs/green_fish.png) !important;
		}


		.fish.brown_fish .size .img, .fish.brown_fish2 .size .img, .fish.brown_fish3 .size .img{
			background-image:url(../imgs/brown_fish.png) !important;
		}


		.fish.lime_fish .size .img, .fish.lime_fish2 .size .img, .fish.lime_fish3 .size .img{
			background-image:url(../imgs/lime_fish.png) !important;
		}


		.fish.pink_fish .size .img, .fish.pink_fish2 .size .img, .fish.pink_fish3 .size .img{
			background-image:url(../imgs/pink_fish.png) !important;
		}

		.fish.tree_fish .size .img,.fish.tree_fish2 .size .img, .fish.tree_fish3 .size .img{
			background-image:url(../imgs/tree_fish.png) !important;
		}

		.fish.white_fish .size .img, .fish.white_fish2 .size .img, .fish.white_fish3 .size .img{
			background-image:url(../imgs/white_fish.png) !important;
		}

		.fish.dead:hover {
			z-index: 1 !important;
		}
		.fish.dead .size .img{
			background-image:url(../imgs/dead.png) !important;
		}
		
		

		#predator1 {
			z-index: 1;
		}
		#predator2 {
			z-index: 1;
		}

		@-webkit-keyframes animating {
			from { background-position: 0% 0; }
			to { background-position: 100% 0; }
		}

		@keyframes animating {
			from { background-position: 0% 0; }
			to { background-position: 100% 0; }
		}

 
		@-webkit-keyframes falling{
		    0%{-webkit-transform: rotate(25deg);transform: rotate(25deg);}
		    50%{-webkit-transform: rotate(-25deg);transform: rotate(-25deg)}
		    100%{-webkit-transform: rotate(25deg);transform: rotate(25deg);}
		}

 
		@keyframes falling{
		    0%{-webkit-transform: rotate(25deg);transform: rotate(25deg);}
		    50%{-webkit-transform: rotate(-25deg);transform: rotate(-25deg)}
		    100%{-webkit-transform: rotate(25deg);transform: rotate(25deg);}
		}
		 
		.fish.dead.falling .size .img{
		    -webkit-transform-origin: 50% 0;
		            transform-origin: 50% 0;
		    -webkit-animation: falling 1.5s ease-in-out forwards infinite;
		            animation: falling 1.5s ease-in-out forwards infinite;
		}

/*
		body.action .modalOpener {
			pointer-events: none !important;
		}
*/


/* What is wrong with them ? */


		body.normal-user #smeVotes{
			display: none;
		}

		#infoModal.mine .btn-edit {
		    display: block !important;
		}

		#infoModal .user-details {
			margin-bottom: 15px;
			padding: 5px 15px;
			border-bottom: 1px solid #eceeef;
		}

		#infoModal .user-email {
			margin-bottom: 15px;
			padding: 5px 15px;
			border-bottom: 1px solid #eceeef;
		}

		#infoModal .user-details img {
		   	width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-right: 5px;
		}

		.btn-edit{
		    padding: 2px 10px;
		    background: #0275d8;
		    color: #ffffff;
		    border: none;
		    border-radius: 4px;
		    position: absolute;
		    z-index: 999;
		    right: 8%;
		    top: 4%;
		}
		.btn-edit:hover{
		    background: #025aa5 ;
		}

		#infoModal #comments img {
		    width: 40px;
		    height: 40px;
		    border-radius: 50%;
		    margin-left: -45px;
		}


		#infoModal #comments .replyCancel {
		    color: red;
		    font-weight: bolder;
		}

		#infoModal .nav-link {
			padding: 0px 16px;
		}

		#infoModal .nav-link img {
			width: 32px;
		}


		body .row-challenge {
			visibility: hidden;
			pointer-events: none;
		}

		body.tank2.sme1-user #sme1 .row-challenge {
			visibility: visible;
			pointer-events: all;
		}
		body.tank2.normal-user .mine #sme1 .row-challenge {
			visibility: visible;
			pointer-events: all;
		}
		body.tank3.sme2-user #sme2 .row-challenge {
			visibility: visible;
			pointer-events: all;
		}
		body.tank3.normal-user .mine #sme2 .row-challenge {
			visibility: visible;
			pointer-events: all;
		}
		body.tank4.sme3-user #sme3 .row-challenge {
			visibility: visible;
			pointer-events: all;
		}
		body.tank4.normal-user .mine #sme3 .row-challenge {
			visibility: visible;
			pointer-events: all;
		}

		body.tank1 #row-challenge{
			visibility: hidden;
			pointer-events: none;
		}


		body.tank1.normal-user .btn-challenge {
			display: none !important;
		}
		body.sme1-user .btn-challenge {
			display: none !important;
		}
		body.sme2-user .btn-challenge {
			display: none !important;
		}
		body.sme3-user .btn-challenge {
			display: none !important;
		}
		
		body.tank1 #infoModal .nav-item.sme1 {
			display: none !important;
		}
		body.tank1 #infoModal .nav-item.sme2 {
			display: none !important;
		}
		body.tank1 #infoModal .nav-item.sme3 {
			display: none !important;
		}
		body.tank2 #infoModal .nav-item.sme2 {
			display: none !important;
		}
		body.tank2 #infoModal .nav-item.sme3 {
			display: none !important;
		}
		body.tank3 #infoModal .nav-item.sme3 {
			display: none !important;
		}



		body.tank1 #predator1 .img{
			background-image:url(../imgs/predator.png);			
		}
		body.tank1 #predator1 .size{
			-webkit-transform:scale(1.5) !important;
			        transform:scale(1.5) !important;			
		}
		body.tank1 #predator2 .img{
			background-image:url(../imgs/none.png);			
		}
		body.tank1 #predator2 .size{
			-webkit-transform:scale(0) !important;
			        transform:scale(0) !important;			
		}


		body.tank2 #predator1 .img{
			background-image:url(../imgs/none.png);			
		}
		body.tank2 #predator1 .size{
			-webkit-transform:scale(0) !important;
			        transform:scale(0) !important;			
		}
		body.tank2 #predator2 .img{
			background-image:url(../imgs/predator2.png);			
		}
		body.tank2 #predator2 .size{
			-webkit-transform:scale(3.5) !important;
			        transform:scale(3.5) !important;			
		}



		body.tank3 #predator1 .img{
			background-image:url(../imgs/predator3.png);			
		}
		body.tank3 #predator1 .size{
			-webkit-transform:scale(2.5) !important;
			        transform:scale(2.5) !important;			
		}
		body.tank3 #predator2 .img{
			background-image:url(../imgs/none.png);			
		}
		body.tank3 #predator2 .size{
			-webkit-transform:scale(0) !important;
			        transform:scale(0) !important;			
		}


		body.tank4 #predator1 .img{
			background-image:url(../imgs/predator4.png);			
		}
		body.tank4 #predator1 .size{
			-webkit-transform:scale(3.5) !important;
			        transform:scale(3.5) !important;			
		}
		body.tank4 #predator2 .img{
			background-image:url(../imgs/none.png);			
		}
		body.tank4 #predator2 .size{
			-webkit-transform:scale(0) !important;
			        transform:scale(0) !important;			
		}




		#predator1, #predator2 {
			cursor: pointer;
		}

		#predatorModal .modal-body {
			display: none;
		} 


		body.tank1 #predator1, body.tank1 #predator2  {
			pointer-events: none;
		} 
		body.tank2 #predatorModal .sme1 {
			display: block;
		} 
		body.tank3 #predatorModal .sme2 {
			display: block;
		} 
		body.tank4 #predatorModal .sme3 {
			display: block;
		} 



		body #superfish .img{
			display:none;
			background-image:url(../imgs/superfish.png);			
		}/*body #superfish .img{
			background-image:url(../imgs/superfish.png);			
		}*/
		body #superfish .size{
			-webkit-transform:scale(3.5) !important;
			        transform:scale(3.5) !important;			
		}
		body #sharksplash .img{
			display:none;
			background-image:url(../imgs/sharksplash.png);			
		}/*body #sharksplash .img{
			background-image:url(../imgs/sharksplash.png);			
		}*/
		body #sharksplash .size{
			-webkit-transform:scale(3.5) !important;
			        transform:scale(3.5) !important;			
		}

	/* Common Configuration */

	body #logo{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 200%;
		left: 50%;	
	}

	#powered{
		position: absolute;
		top: 60%;
		border-radius: 50%;
		z-index: 1;
		transform: translate(0%,1200%);
		width: 100%;
		text-align: center;
		color: white;
	}
		
		
		body #logo .size .img{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 4px;
			/* background-image:url(../imgs/FishTankLogoBig.png);		 */
			background-size: 100%;
			background-repeat: no-repeat;	
		}
		
		body #logo .size{
			position: absolute;
			width: 100%;
			height: 100%;
			-webkit-transform:scale(7.5) !important;
			        transform:scale(7.5) !important;			
		}


		#superfish, #sharksplash, #logo {
			pointer-events: none;
			opacity: 0.98;
		}


		#superfish {
			z-index: 1;
			-webkit-transform: translate(-200%,-300%);
			        transform: translate(-200%,-300%);
		}
		#sharksplash {
			z-index: 1;
			-webkit-transform: translate(140%,-300%);
			        transform: translate(140%,-300%);
		}
		#logo {
			z-index: 0;
			-webkit-transform: translate(-50%,150%);
			        transform: translate(-50%,150%);
		}

		#tank_title{
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			
		}

		#tank_title h1{
			color: white;
			font-size: 9vw;
			font-weight: 700;
			line-height: 0.9;
		}
	

/*mobile view New CSS by SHWETA */

	/* Portrait Iphone 5 only */
	@media screen and (min-width:320px) and (orientation:portrait) {
		#powered{
		    top: -10%;
	  	}
		
	  	body #logo .size{
		  	-webkit-transform:scale(3) !important;
			transform:scale(3) !important;			
	  	} 

	  	body #logo{
			top: 0%;
		}

		#buttons {
			height: 12%;
		}

		#tank_title{
			top: 25%;
		}

		#tank_title h1{
			font-size: 15vw;
		}

	}
	/* Landscape Iphone 5 only */
	@media screen and (min-width: 568px) and (orientation:landscape) {	
		#powered{
		    top: -68%;
	  	}
		
	  	body #logo .size{
		 	-webkit-transform:scale(2.5) !important;
			transform:scale(2.5) !important;			
	  	} 

	  	body #logo{
			top: -30%;
		} 
		  
		#buttons {
			height: 18%;
		}

		#tank_title{
			top: 25%;
		}
	}

	/* Portrait Iphone 6,6S,7,8,X(375px), Samsung S7,S7E,S8,S8+,S9,S9+,Note9(360px) */
	@media screen and (min-width: 375px) and (orientation:portrait) {	
		#powered{
			/* DONT REDUCE AS IMPACTS BADLY LONG DEVICES*/
		    top: -20%; 
		}

		body #logo .size{
			-webkit-transform:scale(3) !important;
			transform:scale(3) !important;			
		} 

		body #logo{
			top:10%;
		}

		#tank_title{
			top: 25%;
		}

		
	}

	/* Landscape Iphone 6,6S,7,8(667x), 6+,6S+,7+,8+(736px), X,XS(812px), XSMax,XR(896px) */
	@media screen and (min-width: 667px) and (orientation:landscape) {	
		#powered{
			top: -75%;
	  	}
		
	  	body #logo .size{
		  	-webkit-transform:scale(3) !important;
			transform:scale(3) !important;			
	  	} 

	  	body #logo{
			top: -20%;
			left:48%;
		}

		#buttons {
			height: 15%;
		}

		#tank_title{
			top: 25%;
		}
	}

	/* Ipad Mini,Mini2,Mini3,Air1,Air2,3Gen,4Gen(768px) ------- changing to 700px to include surface */
	@media screen and (min-width: 700px) and (orientation:portrait) {	
		#powered{
			top: 20%;
		}
			 
		body #logo .size{
			-webkit-transform:scale(6) !important;
			transform:scale(6) !important;			
		} 

		body #logo{
			top: 25%;
		}

		#buttons {
			height: 7%;
		}

		#tank_title{
			top: 35%;
		}

		#tank_title h1{
			font-size: 15vw;
		}
	}

	/* Landscape Iphone X only(812px) */
	@media screen and (min-width: 812px) and (orientation:landscape) {	
		#powered{
		    top: -50%;
	  	}
		
	  	body #logo .size{
		  	-webkit-transform:scale(3) !important;
			transform:scale(3) !important;			
	  	}

	  	body #logo{
			top: -18%;
		}

		#buttons {
			height: 15%;
		}

		#tank_title{
			top: 25%;
		}
	}

	/* Ipad Pro(1024px) */
	@media screen and (min-width: 1024px) and (orientation:portrait) {	
		#powered{
			top: 30%;
		}
			 
		body #logo .size{
			-webkit-transform:scale(8) !important;
			transform:scale(8) !important;			
		} 

		body #logo{
			top: 30%;	
		}

		#tank_title{
			top: 35%;
		}
		#tank_title h1{
			font-size: 15vw;
		}
	}

	/* Landscape Ipad (1024px)*/
	@media screen and (min-width: 1024px) and (orientation:landscape) {	
		#powered{
			top: 10%;
	  	}
		
	  	body #logo .size{
		  	-webkit-transform:scale(6) !important;
			transform:scale(6) !important;			
	  	}

	  	body #logo{
			top: 10%;
		}

		#buttons {
			height: 9%;
		}
	}

	/* Landscape Generic(1300px) */
	@media screen and (min-width: 1300px) and (orientation:landscape) {	
		#powered{
			top: 17%;
	  	}
		
	  	body #logo .size{
		  	-webkit-transform:scale(7) !important;
			transform:scale(7) !important;			
	  	}

	  	body #logo{
			top: 30%;
		}

		#buttons {
			height: 7%;
		}

		#tank_title{
			top: 35%;
		}
	}	

	/* Landscape Surface (2160px)*/
	@media screen and (min-width: 2160px) and (orientation:landscape) {	
		#powered{
			top: 30%;
	  	}
		
	  	body #logo .size{
		  	-webkit-transform:scale(9) !important;
			transform:scale(9) !important;			
	  	}

	  	body #logo{
			top: 30%;
		}

		#buttons {
			height: 7%;
		}

		#tank_title{
			top: 35%;
		}
	}

/* new CSS by SHWETA ends */