/* CSS Custom Properties for theme colors */
:root {
  --loader-color-light: rgba(0, 0, 0, 0.2);
  --loader-color-active: rgba(0, 0, 0, 1);
}

/* * IMPORTANT FIX: Lock the scrolling of the page 
* HTML and body must be set to 100% height and overflow hidden.
*/

html, body {
    height: 100%;
    overflow: hidden; 
    background: linear-gradient(180deg, #f0f9ff 0%, #dbeafe 15%, #38bdf8 50%, #0051ff 100%);
			/* These lines ensure no scrolling/bouncing on mobile */
			height: 100%;
			overflow: hidden;
			position: fixed;
			width: 100%;*/
}

@font-face {
			font-family: 'Bingo Regular';
			src: url('https://oxi.ng/css/bingo.otf') format('opentype');
		}
		.custom-text {
			font-family: 'Bingo Regular', sans-serif;
			font-size: 150px;
			fill: white;
			text-anchor: middle;
			dominant-baseline: middle;
		}



.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  40% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  40% {opacity:1;}
}

.box{
	display: inline-block;
	height: 200px;
	width: 33.3%;
	float:left;
	position: relative;
	/*margin:0 -4px -5px -2px;*/
	transition: all .2s ease;
}

.box p{
	color: #777;
	font-family:  Lato,"Helvetica Neue" ;
	font-weight: 300;
	position: absolute;
	font-size: 20px;
	width: 100%;
	height: 25px;
	text-align: center;
	bottom: 0px;
	margin: 0;
	top:160px;
	background-color: #fff;
	opacity: 0;
	text-transform: uppercase;
	transition: all .2s ease;
}

.box:hover p{
	bottom:0px;
	top:175px;
	opacity: 1;
	transition: all .2s ease;
	z-index: 2;
}

/* MEDIA QUERIES */
@media (max-width: 700px){
	.box{
		width: 50%;
	}

	.box:nth-child(2n-1){
		background-color: inherit;
	}

	.box:nth-child(4n),.box:nth-child(4n-3) {
		background-color: rgba(0,0,0,0.05);
	}

}

@media (max-width: 420px){
	.box{
		width: 100%;
	}

	.box:nth-child(4n),.box:nth-child(4n-3){
		background-color: inherit;
	}

	.box:nth-child(2n-1){
		background-color:rgba(0,0,0,0.05);
	}

}

/* -------------- loader10 -------------- */

.loader10:before{
	content: "";
	position: absolute;
	top: 0px;
	left: -25px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
	-webkit-animation: loader10g 3s ease-in-out infinite;
			animation: loader10g 3s ease-in-out infinite;
}

.loader10{
	position: relative; 
	width: 12px;
	height: 12px;
	border-radius: 12px;
	-webkit-animation: loader10m 3s ease-in-out infinite;
			animation: loader10m 3s ease-in-out infinite;
}

.loader10:after{
	content: "";
	position: absolute;
	top: 0px;
	left: 25px;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	-webkit-animation: loader10d 3s ease-in-out infinite;
			animation: loader10d 3s ease-in-out infinite;
}

@-webkit-keyframes loader10g{
	0%{background-color: var(--loader-color-light);}
	25%{background-color: var(--loader-color-active);}
	50%{background-color: var(--loader-color-light);}
	75%{background-color: var(--loader-color-light);}
	100%{background-color: var(--loader-color-light);}
}
@keyframes loader10g{
	0%{background-color: var(--loader-color-light);}
	25%{background-color: var(--loader-color-active);}
	50%{background-color: var(--loader-color-light);}
	75%{background-color: var(--loader-color-light);}
	100%{background-color: var(--loader-color-light);}
}

@-webkit-keyframes loader10m{
	0%{background-color: var(--loader-color-light);}
	25%{background-color: var(--loader-color-light);}
	50%{background-color: var(--loader-color-active);}
	75%{background-color: var(--loader-color-light);}
	100%{background-color: var(--loader-color-light);}
}
@keyframes loader10m{
	0%{background-color: var(--loader-color-light);}
	25%{background-color: var(--loader-color-light);}
	50%{background-color: var(--loader-color-active);}
	75%{background-color: var(--loader-color-light);}
	100%{background-color: var(--loader-color-light);}
}

@-webkit-keyframes loader10d{
	0%{background-color: var(--loader-color-light);}
	25%{background-color: var(--loader-color-light);}
	50%{background-color: var(--loader-color-light);}
	75%{background-color: var(--loader-color-active);}
	100%{background-color: var(--loader-color-light);}
}
@keyframes loader10d{
	0%{background-color: var(--loader-color-light);}
	25%{background-color: var(--loader-color-light);}
	50%{background-color: var(--loader-color-light);}
	75%{background-color: var(--loader-color-active);}
	100%{background-color: var(--loader-color-light);}
}