/*default font*/
p, h1 {
	font-family: 'Overpass Mono', monospace;
}



/* Page Loader CSS */

.pageLoader {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 10;
}

.left {
  background-color: #1C2021;
  height: 100vh;
  z-index: 100;
  width: 50%;
}
.right {
  background-color: #353C3E;
  height: 100vh;
  z-index: 100;
}

.loader {
  background-color: #353C3E;
  position: fixed;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  border: 16px solid #353C3E;
  border-radius: 50%;
  border-top: 16px solid #1C2021;
  border-bottom: 16px solid #1C2021;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.saving {
  color: #1C2021;
  font-size: 1px;
  position: fixed;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  z-index: 1000;
  
}

.saving span {
  font-size: 40px;
  animation-name: blink;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.saving span:nth-child(2) {
  animation-delay: .2s;
}

.saving span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



/* End Page Loader CSS */



/*NAVIGATION*/
.navbar {
	background-color: #242424;
	border-bottom: 1px solid #646464;
	font-family: 'Press Start 2P', cursive;
	font-size: .7em;
	width: 100% !important;

}


.navbar a {
	color:#cccccc !important;
}

.navbar a:hover {
	color:#ffffff !important;
	background-color: #646464 !important;
	width: 100%;
}

.navbar-header .navbar-brand {
	color:white !important ;
	font-size:2em; 
}

.navbar-default .nav li.active a {
	color:white !important;
	background-color: #646464;
}


#myNavbar {
	width: 100%;
	opacity: 0;
	-moz-animation: 1s fadein 4.8s forwards; /* Firefox */
    -webkit-animation: 1s fadein 4.8s forwards; /* Safari and Chrome */
    -o-animation: 1s fadein 4.8s forwards; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


/*HEADER*/
.header {
	z-index: 1;
	width: 100%;
	height: 1080PX;
	background-size:cover;

}

.header-container {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
}

.video-container {
	position: absolute;
	height: auto;
	width: auto;
	min-width: 100%;
	min-height: 100%;
	overflow: hidden;
	background-size:cover;

}

video {
	height: 100%;
	width: 100%;
	opacity: 0.9;
}


.header h1 {
	padding-top: 6%;
	z-index: 1;
	font-family: 'Press Start 2P', cursive;
	font-size:4.5em;
	color:#ffffff !important;
	text-align: center;
}

.header p {
	z-index: 1;
	font-family: 'Press Start 2P', cursive;
	font-size:.9em;
	color:#ffffff !important;
	text-align: center;
}

.header ul {
	z-index: 1;
	text-align: center;
}


.btn-header { 
  z-index: 1;
  color: #ffffff; 
  border-color: #2F236B; 
  font-family: 'Press Start 2P', cursive;
  font-size:.9em;
  padding: 5px 50px 5px 50px;
  border-radius: .3;
} 


#navdowntest {
	position: relative;
	color:#ffffff;
	width: 100%;
	margin-top:2%;

}

#navdowntest a .fa {
	color:#ffffff;
	
}

#navdowntest a .fa:hover {
	color:#242424;
	transition: all 0.3s ease-in-out;

}

/*small devices override*/
@media(max-width: 768px) {

	.header {
		padding-top: 6.5%;
	}

	.header h1 {
		font-size:2.8em;

	}

	.header p {
		font-size:.8em;
	}

	.header .btn {
		padding: 5px 17px 5px 17px;
	}

	video {
		padding-bottom: 60px;
		background-color: #070707;
	}


}

/*END small devices override*/


/*ABOUT*/

.about {

	padding:150px 0 100px 0;
	text-align: center;
}

.about h1 {
	font-family: 'Press Start 2P';
	font-size: 2em;
	color:#1e2023;
	padding: 0 0 25px 0;
}

.about p {
	font-size: 1.1em;
	color:#1e2023;
	padding: 0 0 25px 0;
}



.about img:hover {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

/* END ABOUT */

/*PROJECTS*/

.Projects {
	background-color: #0f1011;
	text-align: center;
	color: white;
	padding: 120px 0px 160px 0;

}

.Projects img {
	height: 300px;
}

.Projects p {
	padding-bottom: 15px;
	font-size:1em;
}

.Projects h1 {
	font-family: 'Press Start 2P';
	font-size: 2em;
}

.Projects h4 {
	font-family: 'Press Start 2P';
	font-size: 1.1em;
}
/*END PROJECTS*/


/*Screenshots*/

.Screenshots {
	padding: 130px 0 130px 0;
	text-align: center;

}

.Screenshots h1 {
font-family: 'Press Start 2P';
padding-bottom: 10px;
}

.Screenshots img {
	padding: 60px 0 20px 0;
	height: 300px;
	text-align: center;
}
/*END Screenshots*/


/*Contact Us*/

.Contact {
	background-color: #0f1011;
	padding: 130px 0 30px 0;
	text-align: center;
	color: #c4c8ce;
}

.Contact h1{
	font-family: 'Press Start 2P';
	padding-bottom: 25px;
	font-size: 2.7em;
}

.Contact .fa{
	color:#c4c8ce;
	padding: 20px 10px 30px 0;
	
}

.Contact .fa:hover {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
	
}

.Contact a{
	color:#c4c8ce;
	padding: 20px 10px 30px 0;
	
}

/*END Contact Us*/

/*Modal Style */

.modal-style {
	background-color: #202123 !important;
	font-family: 'Press Start 2P', cursive;
	color: white;
}

.modal-style h3 {
	font-family: 'Overpass Mono', monospace;
	font-size: 1em;

}

.modal-style h4 {
	font-family: 'Press Start 2P', cursive;
	font-size: 2em;
}

.modal-button-modal-button-save button {
	color: white !important;
	background-color: #202123 !important;

}

.close {
	color: white !important;
	
}

.modal-header i{
	color:#c4c8ce;
	padding: 5px 10px 30px 4px;
	text-align: right;
}

.modal-footer button {
	background-color: #2e2f30 !important;
}

.modal-footer-hover:hover {
	background-color: #202123 !important;

}