body {
	background-color: #333;
}



.cover-svg{
	background: #ebebeb;
	transition: background 0.6s;
	width: 120px;
  height: 120px;
  margin: auto;
	border-radius: 10px;
	border: 3px solid transparent;
}
.grey-fill{
		fill:#ebebeb;
}
.green-black-fill{
  fill:#4caf50;
}
.green-black-stroke{
  fill:#fff;
  stroke:#4caf50;
  stroke-miterlimit:10;
}
.black-green-fill{
  fill:#666;
}    	
.black-fill{
	fill:#666;
}
.white-fill{
	fill:#fff;
}
.black-stroke{
	stroke:#666;
	stroke-width: 0.3698;
  stroke-miterlimit: 10;
}
.light-black-stroke{
	fill:#494949
}
.white-stroke{
	stroke:#fff;
	stroke-width: 0.3698;
  stroke-miterlimit: 10;
}
.white-black-stroke{
  stroke:#fff;
  stroke-miterlimit: 10;
}
.green-fill{
  fill:#4caf50;
}
.light-green-fill{
	fill:#e3ffe3;
}
.white-fill{
  fill: #fff;
}
    	/*this will have a stroke when white*/
.white-green-fill{
  fill: #fff;
  stroke:#666;
	stroke-width: 0.3698;
  stroke-miterlimit: 10;
}
    	/* hover state*/
.cover-svg:hover{
	background: #fff;
	border: 3px solid #4caf50 ;
}
.black-white-fill{
	fill:#666;
	stroke:#fff;
	stroke-width: 0.3698;
}
.black-white-fill-nostroke{
	fill:#666;
}
.black-grey-fill-nostroke{
	fill:#666;
}
.green-black-stroke-transparent-fill{
	stroke:#4CAE4E;
	fill:transparent ;
	stroke-width:0.8;
	stroke-miterlimit:10
 }
.transparent-fill{
	fill:transparent;
	}
.green-black-stroke{
	stroke:#4cae4e;
}
.black-green-stroke{
  fill:#fff;
  stroke:#666;
  stroke-miterlimit:10;
}
.black-stroke-linecap{
    fill:none;
    stroke:#666;
    stroke-linecap:round;
    stroke-width:0.5px;
    stroke-miterlimit:10;
}
.green-black-stroke-linecap{
    fill:none;
    stroke:#4caf50;
    stroke-linecap:round;
    stroke-width:0.34px;
    stroke-dasharray:0.56 0.84;
}
.light-green-black-fill{
    fill:#e3ffe3;
}
.green-stroke-dash{
		fill: none;
    stroke: #4caf50;
    stroke-width: 0.4px;
		stroke-dasharray: 0.94 0.94;
}
.white-black-fill-nostroke{
		fill: #fff;
}
.green-white-fill-nostroke{
		fill: #4caf50;
}
.green-stroke{
    stroke: #4caf50;
    stroke-miterlimit: 10;
    stroke-width: 0.75px;
}
.green-white-stroke{
		fill: none;
		stroke: #4caf50;
		stroke-width: 1px;
}
.grey-white-fill{
	fill: #ebebeb;
}
.white-black-fill{
	fill:#fff;
	stroke: #666;
    stroke-miterlimit: 10;
    stroke-width: 0.5px;
}
.green-white-fill{
	fill: #4caf50;
	stroke:transparent;
	stroke-miterlimit: 10;
    stroke-width: 0.5px;
}
.cover-svg{
	margin-top: 50px;
}
.grey-stroke{
	stroke: #ebebeb;
    stroke-miterlimit: 10;
    stroke-width: 0.75px;
}
.cover-svg:hover .green-white-fill{ fill: #fff;stroke:#666;}
.cover-svg:hover .white-black-fill{ fill: #666;stroke:#fff;}
.cover-svg:hover .black-grey-fill-nostroke{ fill: #ebebeb;stroke:none;}
.cover-svg:hover .grey-white-fill{ fill: #fff;}
.cover-svg:hover .white-green-fill{ fill: #4CAF50;stroke:#fff; }
.cover-svg:hover .green-black-fill{ fill: #666; }
.cover-svg:hover .green-black-stroke-transparent-fill{fill:transparent;stroke:#666; }
.cover-svg:hover .black-green-fill{ fill: #4CAF50; }
.cover-svg:hover .white-green-fill{fill:#4CAF50;stroke:#fff;}
.cover-svg:hover .green-black-stroke{stroke:#666;}
.cover-svg:hover .black-white-fill{fill:#fff;stroke:#666;}
.cover-svg:hover .black-white-fill-nostroke{fill:#fff}
.cover-svg:hover .white-black-stroke{stroke:#666}
.cover-svg:hover .black-green-stroke{stroke:#4caf50;}
.cover-svg:hover .light-green-black-fill{fill:#fff;}
.cover-svg:hover .green-black-stroke-linecap{stroke:#666;}
.cover-svg:hover > .section-title{color:#4caf50;}
.cover-svg:hover .white-black-fill-nostroke{fill:#666;}
.cover-svg:hover .green-white-fill-nostroke{fill:#fff;}
.cover-svg:hover .green-white-stroke{stroke:#fff;}






.playable-nav {
	padding-right: 30px;
	padding-left: 30px;
	background-color: #fff;
}

.logo {
	margin-top: 10px;
	max-width : 240px;
	width :50%;
}

.login {
	margin-left: -50px;
	padding-top: 10px;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	float: right;
	list-style: none;
}

a:hover,a:active,a:focus{
	color: #777;
}

.row {
	color: #fff;
	margin-bottom: 30px;
}

.main-space {
	transform: translateY(100px);
}

.playable-text {
	padding: 20px;
	font-size: 42px;
}

.elements {
	padding: 5px;
	margin-bottom: 80px;
	padding-left: 50px;
	padding-right: 50px;
	border:2px #333 solid;
}

.elements:hover{
	border-color: #c3ee98;
	border-radius: 20px;
}

.game-img {
	width: 100%;
	max-width: 400px;
}

p {
	color:#aaa;
	font-size: 14px;
}

label {
	margin: 15px;
	font-weight: bold;
}

/*.main-space {
	margin-bottom: 35%;
}*/
#footer {
    height: 150px;
    background: #444;
    margin-top: 5%;
    padding: 20px;
    padding-left: 70%;
}
.footer-part {
    margin-left: 30px;
    margin-top: 3%;
}


.footer3 {
	margin-top: 5%;
}

#footer-logo {
	width:20px;
}

#closeBtn {
	position: fixed;
	right: 10px;
	top: 12px;
	width: 40px;
	height: 40px;
	border-radius: 41px;
	background-color: #eee;
}






@media screen and (max-width: 770px) {
	#footer {
		padding-left: 25%;
	}
}




@media screen and (max-width: 484px) {
	.logo {
		margin-top: 17px;
		max-width : 200px;
		width :90%;
	}
	#footer {
		padding-left: 5%;
		font-size: 13px;
	}
	.footer-part {
		    margin-left: 20px;
		    margin-top: 4%;
		}
		.footer3 {
			margin-top: 9%;
		}
}


@media screen and (max-width: 438px) {
  	.logo {
		margin-top: 25px;
		max-width : 140px;
		width :80%;
	}
	.nav-link {
		margin-left: -10px;
		font-size: 16px;
		font-weight: 500;
		margin-top: 8px;
	}
	.col-6{
		max-width:70%;

		margin: auto;
		margin-top: 20px;
		flex: none;
	}
	#footer {
		margin-top:38%; 
	}
}
@media screen and (max-width: 360px) {
	.nav-link {
		margin-top: 7px;
	}
}


@media screen and (max-width: 350px) {
		.logo {
			margin-left: -10px;
			margin-top: 27px;
			max-width : 130px;
			width :80%;
		}
		.nav-link {
			margin-left: -25px;
			font-size: 15px;
			font-weight: 400;
			margin-top: 10px;
		}
		.login {
			margin-right: -10px;
		}
		#footer-logo {
			width:20px;
		}
		.footer-part {
		    margin-left: 10px;
		    margin-top: 5%;
		}
		.footer3 {
			margin-top: 10%;
		}

	}





	/* For game modal view */




	.modal-open .modal {
    display: flex!important;
    align-items: center!important;
    .modal-dialog {
        flex-grow: 1;
    }
}



.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto; 
    margin: auto;
}

@media screen and (orientation:portrait) {
	.modal-dialog {
		min-width: 360px  !important;
	}
	iframe {
		height: 640px;
	}
	@media screen and (max-width: 360px) {
		.modal-dialog {
			min-width: 100vw  !important;
		}
		iframe {
			height: 178vw;
		}
	}
}

@media screen and (orientation:landscape) {
	.modal-dialog {
		min-width: 640px  !important;
	}
	iframe {
		height: 360px;
	}
	@media screen and (max-width: 640px) {
		.modal-dialog {
			min-width: 100vw  !important;
		}
		iframe {
			height: 56vw;
		}
	}
}