/*body{
    background-color: #080618;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: #cbdbe3;
}*/

body {
	margin: 0;
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	text-align: left;
	background-color: #080618;;
}

*,
::before,
::after {
	box-sizing: border-box;
}


a {
	color: #0060B6;
	text-decoration: none;
}

a:hover {
	color: #00A0C6;
	text-decoration: none;
	cursor: pointer;
}


header h1 {}



img.small-thumb2 {
	width: 30%;
	max-width: 8vw;
	border-radius: 50%;
	position: absolute;
	top: 40;
	left: 50%;
	transform: translate(-50%, 42%);
	transition: all 0.2s;
}

.glassy-cont {
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 1%;
	padding: 24px;
	border-radius: 10px;
	padding-bottom: 2px;
	padding-top: 0px;

}

.glassy-cont .text-div {
	p {
		font-size: 1.05em !important;
	}
}

blockquote {
	text-align: center;
}

.no-margin-bot {
	margin-bottom: 0px;
}

.logo-header {
	margin-left: 15px;
	padding-top: 5px;
	max-width: 275px;
	max-height: 75px;
	border-radius: 25px;
}


.hoverable-a:hover>.bounce2 {
	animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translate(-50%, 50px);
	}

	40% {
		transform: translate(-50%, 20px);
	}

	60% {
		transform: translate(-50%, 35px);
	}
}





/* HOVER */


.grid-layout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-gap: 50px;
	grid-auto-rows: minmax(110px, auto);
	grid-auto-flow: dense;
}

.grid-item {
	border-radius: 5px;

	&:nth-child(odd) {
		background-color: #424242;
	}
}

img.small-thumb {
	width: 100%;
	border-radius: 10px;
}

.list-content {
	padding: 0px;
}

.list-game {
	border-radius: 5px;
}

.grid-layout .list-title {
	overflow: hidden;
	margin: .35714em;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	position: relative;
	bottom: 65px;
	margin-bottom: -53px;
	opacity: 0;
	font-weight: bold;
}

@media(hover: hover) and (pointer: fine) {
	.grid-layout .list-game:hover>.list-title {
		opacity: 1;
		transition: all 0.5s ease;
	}

	.list-thumbnail:hover {
		opacity: 0.5;
		transition: all 0.5s ease;
	}
}

.grid-wrapper {
	margin-top: 32px;
	margin-bottom: 30px;
	margin-left: 30px;
	margin-right: 30px;
}

.game-container {
	margin: 30px 0;
}

.list-category {
	position: absolute;
	bottom: 5px;
}

h1.single-title {
	font-size: 1.75rem;
}

.single-title {
	margin-top: 20px;
	padding-bottom: 10px;
	font-weight: bold;
}

.single-info-container {
	padding-bottom: 5px;
	border-bottom: 1px solid #29254f;
	margin-bottom: 20px;
}

.single-icon {
	background-color: #29254f;
	margin-right: 10px;
	padding: 8px 16px;
	border-radius: 15px;
	display: inline-block;
	margin-bottom: 10px;
}

.grid-wrapper {
	margin-bottom: 30px;
}


.container {
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	margin-bottom: 100px;
	max-width: 1170px;
	padding-right: 100px;
	padding-left: 100px;
	padding-bottom: 100px;
}


header#customHeader {
	/* position: fixed;
	top: 0; */
	width: 100%;
}

footer#customFooter {
	position: fixed;
	bottom: 0;
	width: 100%;
}




/* RESPONSIVE */

@media screen and (max-width: 1250px) {
	img.small-thumb {
		max-width: unset;
	}

	header h1 {
		padding-left: 24px;
	}

	.glassy-cont .text-div {
		p {
			font-size: 1em;
		}
	}

	.grid-layout {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-gap: 41px;
		grid-auto-rows: minmax(110px, auto);
		grid-auto-flow: dense;
	}

	.logo-header {
		max-width: 225px;
		margin-top: 10px;
		margin-bottom: 5px;
	}

}

@media screen and (max-width: 1000px) {
	header h1 {
		font-size: 30px;
	}
	

	img.small-thumb {
		max-width: unset;
	}

	.container {
		padding-right: 44px;
		padding-left: 44px;
	}

	.grid-layout {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		grid-gap: 29px;
		grid-auto-rows: minmax(110px, auto);
		grid-auto-flow: dense;
	}

	.logo-header {
		max-width: 175px;
		margin-top: 15px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 600px) {
	header {
		text-align: center;
	}

	header h1 {
		display: none;
	}


	img.small-thumb {
		max-width: unset;
	}

	.logo-header {
		padding-left: 0px;
		padding-top: 0px;
		max-width: 55%;
		max-height: 75px;
	}

	.grid-layout {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		grid-gap: 28px;
		grid-auto-rows: minmax(100px, auto);
		grid-auto-flow: dense;
	}

	.container {
		margin-top: 25px;
		margin-bottom: 100px;
		padding-right: 0px;
		padding-left: 0px;
		font-size: 15px;
	}

}

@media screen and (max-width: 360px) {
	header {
		text-align: center;
	}

	header h1 {
		display: none;
	}

	img.small-thumb {
		max-width: unset;
	}

	.logo-header {
		padding-left: 0px;
		padding-top: 0px;
		max-width: 60%;
	}

	.grid-layout {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		grid-gap: 12px;
		grid-auto-rows: minmax(100px, auto);
		grid-auto-flow: dense;
	}

	.container {
		margin-top: 25px;
		margin-bottom: 100px;
		padding-right: 0px;
		padding-left: 0px;
		font-size: 14px;
	}

	footer#customFooter p{
		font-size: 10px;
	}

	.glassy-cont {
		margin-left: 0%;
		margin-right: 0%;
		margin-top: 1%;
		font-size: 14px;
	
	}

}




/* DEBUGGING */

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	/* width: 60px;
	height: 34px; */
	width: 44px;
	height: 24px;
	margin-left: 12px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	/* height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px; */
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px; 
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: #2196F3;
}

input:focus+.slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
	/* -webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px); */
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}