a
{
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: white;
    
}



li
{
    padding: 10px;
}

ul
{
    list-style: none;
        margin: 0;
    padding: 0;
}

.inner
{
    cursor: pointer;
    transition: .5s;
    overflow: hidden;
}
.inner:hover
{
    transform: scale(1.07);
}
.side-nav
{
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
}

.nav-button
{
    width:100%;
    padding: 10px 0;
}

.nav-logo
{
    width:3rem;
}
.nav-button span
{
    display: inline-block;
    width: 3rem;
    height: .3rem;
    background-color: black;
    position: absolute;
    border-radius: 1rem;
    transition: .5s;
    cursor: pointer;
    
    
}
.nav-button span:nth-child(1)
{
    top: 0;
}
.nav-button span:nth-child(2)
{
    top: 50%;
    
}
.nav-button span:nth-child(3)
{
    top: 100%;
}


.caption
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.574);
    transform: translateY(20rem);
    transition: .5s;
}

.img:hover .caption
{
    transform: translateY(0rem);
}

.loader {
  width: 100px;
  height: 100px;
  display: block;
  margin: auto;
  position: relative;
  background: #222;
  border-radius: 50%;
  box-sizing: border-box;
  transform-origin: 170px 50px;
  border: 4px solid #333;
  box-shadow: 3px 4px #0003 inset, 0 0 6px #0002 inset;
  animation: panmov 0.4s ease-in-out infinite alternate;
  transform: translateY(50%);
}
.loader::before {
  content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) skew(-15deg, 15deg) rotate(-15deg);
    width: 55px;
    height: 53px;
    background: #fff;
    background-image: 
    radial-gradient(circle 3px , #fff6 90%, transparent 10%),
    radial-gradient(circle 12px , #ffc400 90%, transparent 10%),
    radial-gradient(circle 12px , #ffae00 100%, transparent 0);
    background-repeat: no-repeat;
    background-position: -4px -6px , -2px -2px , -1px -1px;
    box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
    border-radius: 47% 36% 50% 50% / 49% 45% 42% 44%;
    animation: ylmov 0.6s ease-in-out infinite alternate;
}
.loader::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 48px;
  height: 15px;
  width: 70px;
  background: #222222;
  border-radius: 0 8px 8px 0;
  box-shadow: 3px 0 3px #eee2 inset;
  transform: rotate(5deg) translateX(3px);
}

@keyframes panmov {
  0% , 10% { transform: rotate(5deg) }
  90% , 100% { transform: rotate(-5deg) }
}
@keyframes ylmov {
  to { 
      border-radius: 50% 36% 50% 50% / 49% 50% 45% 45%;
      background-position: -2px -4px , 2px 2px , 1px 1px;
   }
}

.img img
{
    transition: .5s;
}
.img:hover img
{
    transform: scale(1.1);
}

.close
{
    top: 3rem;
    right: 3rem;
}

.form-control::placeholder {
  color: rgb(170, 170, 170);
  opacity: 1;
}

@media(max-width:640px)
{
    .side-nav
{
    position: sticky;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    z-index: 2;
}
}