/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 12 Aug, 2019, 1:55:01 PM
    Author     : Priyanshu
*/
@font-face {
font-family: 'GOTHAM-MEDIUM';
src: local('GOTHAM-MEDIUM'), url('../GOTHAM-MEDIUM.TTF') format('TTF');
}
body {
    font-family: 'GOTHAM-MEDIUM';
    margin: 0;
    padding: 0;
    /*background: url(images/star9.jpg) no-repeat center center fixed;*/
    background-color: #000A11;
    background-size: cover;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 52px;
  width: 100vw;
  background-color: #111A22;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #111A22;
  width:150px;
  margin: auto;
}

li a:hover {
  background-color: #1C2B38;
}

li img {
  margin-top: 5px;

}

.gallery  {
    font-size:50px;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #660088, 0 0 35px #662288, 0 0 40px #660088, 0 0 50px #662288, 0 0 75px #660088;
    text-align: center;
    margin-top: 40px;
}
.container {
 width:90%;
 margin:auto;
 overflow:hidden;
}
.items {
 width:20%;
 display: block;
 padding: 1px;
 margin-top: 2%;
 margin-bottom: 20px;
 line-height: 1.42857143;
 background-color: #fff;
 border: 10px solid #fff;
 border-bottom: 55px solid #fff;
 /* box-shadow: 2px 2px 25px 5px rgba(102, 34, 136, 0.3), 2px 2px 10px 2px rgba(102, 0, 136, 0.3); */
box-shadow: 0 0 10px #fff,            /* outer white */
         -2px 0 16px #662288,        /* outer left magenta */
         2px 0 16px #660088;
 float:left;
 margin-left:2%;

}

.items:nth-child(odd)
{
  transform: rotate(-1deg);
}

.items:nth-child(even)
{
  transform: rotate(2deg);
}

.thumbnail {
 display: block;
 max-width: 100%;
 height: auto;
}

.items:hover
{
  box-shadow: 0 0 18px #fff,            /* outer white */
           -2px 0 25px #662288,        /* outer left magenta */
           2px 0 25px #660088;
}

footer {
 background-color: #111A22;
 color:#fff;
 font-size:14px;
}

@media screen and (max-width : 768px)
{
 .items {
  width: 29%;
  margin-left:1%;
 }
}

@media screen and (max-width : 580px)
{
  .items {
   width:44%;
   display: block;
   padding: 3px;
   margin-top: 2%;
   margin-bottom: 20px;
   line-height: 1.42857143;
   background-color: #fff;
   border: 3px solid #fff;
   border-bottom: 25px solid #fff;
   float:left;
   margin-left:2%;

  }
}

@media screen and (max-width : 400px){
  .container{
  zoom:0.7;
}}

@media screen and (max-height : 420px) and (orientation : landscape)
{
  .items {
    width : 44%;
  }
}