*{margin: 0; padding: 0;}
body{background-color: #f8002f;
background-image: linear-gradient(326deg, #f8002f 0%, #000c14 74%);
 background-repeat: no-repeat;
padding-top:10%;

}

.exit{
	margin-top:0px;
	float:left;
	height:10px;
}

.shimmer {
  font-family: "Lato";
  font-weight: 300;
  font-size: 3.5em;
  margin: 0 auto;
  padding-left:100px;
    padding-right:100px;

  display: absolute;
  margin-bottom: 0;
  text-align: center;
}

.shimmer {
  text-align: center;
  color: rgba(255,255,255,0.1);
  background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  -webkit-background-size: 125px 100%;
  -moz-background-size: 125px 100%;
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #222;
padding-left:90px;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}


.container
{
	width: 100%;
	height: 100%;
}
.trans
{
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.top
{
	display: flex;
	width: 80vw;
	height: 80vh;
	margin-top: 10vh;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10vh;
}
.top ul
{
	list-style: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: border-box;
}
.top ul li
{
	position: relative;
	float: left;
	width: 25%;
	height: 25%;
	overflow: hidden;
}

.top ul li::before
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	content: '';
	color: white;
	opacity: 0.4;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.top ul li:hover::before
{
	opacity: 0;
	background-color: rgba(0,0,0,0.90);
}
.top ul li img
{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.lightbox
{
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.lightbox img
{
	max-width: 90%;
	max-height: 80%;
	position: relative;
	top: -100%;
	/* Transition */
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.lightbox:target
{
	outline: none;
	top: 0;
	opacity: 1;
	pointer-events: auto;
	transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	-ms-transition: all 1.2s ease;
	-o-transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
	top: 0;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}


@media(max-width: 786px) {

.shimmer {
  font-family: "Lato";
  font-weight: 300;
  font-size: 2.6em;
  margin: 0 auto;
  padding-left:100px;
    padding-right:100px;

  display: absolute;
  margin-bottom: 0;
  text-align: center;
}
	  .top ul li img
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
	  .logo img{
		  position: fixed;
            top: 0;
            margin-top: 16px;
		width: 90px;
	  height: 60px;
	  
}
	  
	

}
@media (min-width:480px) and (max-width:599px)  { /* smartphones, Android phones, landscape iPhone */

.shimmer {
  font-family: "Lato";
  font-weight: 300;
  font-size: 2.6em;
  margin: 0 auto;
  padding-left:100px;
    padding-right:100px;

  display: absolute;
  margin-bottom: 0;
  text-align: center;
}
	  .top ul li img
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
	  .logo img{
		  position: fixed;
            top: 0;
            margin-top: 16px;
		width: 90px;
	  height: 60px;
	  
}
 
}

/* Media Query For different screens 
@media (min-width:320px) and (max-width:479px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) 
.shimmer {
  font-family: "Lato";
  font-weight: 300;
  font-size: 2.6em;
  margin: 0 auto;
  padding-left:100px;
    padding-right:100px;

  display: absolute;
  margin-bottom: 0;
  text-align: center;
}
	  .top ul li img
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
	  .logo img{
		  position: fixed;
            top: 0;
            margin-top: 16px;
		width: 90px;
	  height: 60px;
	  
}
 
}
*/