body, html { 
  height: 100%;
  margin: 0;
  font-family: palanquin;
  background: black;
  content: '';
}

.bgimage {
  position: fixed;
  background: url(images/12.jpg) no-repeat center center/cover #131313;
  filter: blur(1px);
  width: 100%;
  height: 100%;
  transition: 2.5s cubic-bezier(0.56, 0.2, 0.29, 0.76) 300ms;
  transition: 2.5s cubic-bezier(0.45, 0.05, 0.54, 0.8) 300ms;
  transform: scale(1.05);
  background-position-y: 0%;
}

.bgimage.blur {
  filter: blur(15px) brightness(0.9);
  transform: scale(1);
  background-position-y: 7%;
  transition: 2.5s cubic-bezier(0.45, 0.05, 0.54, 0.8) 500ms;
}

#headerWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: table;
  opacity: 0;
}
.fade-in {
  opacity: 0.9 !important;
  transition: 3.7s cubic-bezier(0.45, 0.05, 0.54, 0.8) 1000ms !important;
}

.welcomeMsg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: whitesmoke;
  text-align: center;
  font-size: -webkit-xxx-large;
  font-family: Averia Sans Libre,Arial,freesans,clean,sans-serif;
  margin-top: 20px;
  color: #464268;
  text-shadow: -2px -2px 0px #221c37, 8px -4px 3px #221c37, -4px 3px 3px #221c37, 0px 1px 2px #d5c880a1;
}

.cardsWrapper {
  display: flex;
  position: absolute;
  width: 90%;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  justify-content: space-evenly;
  opacity: 0;
}
.card {
  transform: scale(.9);
  width: 17vw;
  height: 21vw;
  background: #ffffff03;
  /* border: 1px solid #241e3a26; */
  border-radius: 20px;
  box-shadow: inset 0px 0px 0px 2px #0000000d;
  opacity: 0;
}
.cardsWrapper.hover .card {
  box-shadow: inset 0px 0px 0px 2px #0000000d, 0px 50px 60px 3px #231c38bf;
  transform: scale(0.95);
  transition: 1.5s cubic-bezier(0.45, 0.05, 0.54, 0.8) 3s;
  margin: 0 1.62vw;
  opacity: 0.8;
  cursor: pointer;
}
.card:hover {
  transform: scale(1.01) !important;
  transition: all 1s ease-in !important;
  background: radial-gradient(#d19576bf, #a6565640) !important;
  opacity: 1 !important;
}
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.2vw;
    text-shadow: 0px -2px 3px #000000ab, -1px -2px 3px #a1a1a1c9, 2px -3px 3px #000000bd, 3px -2px 3px #000000c4;
    opacity: 0.9;
    letter-spacing: 8px;
    color: #864a58;
}

.backdrop {
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

.popupWrapper {
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.1;
}

.popupContainer {
  display: block;
  position: relative;
  width: 60%;
  height: 90%;
  background: #525659;
  border-radius: 16px;
  z-index: 100;
  top: 5%;
  margin: auto;
  font-size: medium;
  line-height: 1.67;
  overflow: hidden;
  word-wrap: break-word;
}

.closeIcon {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 15pt;
  cursor: pointer;
  z-index: 101;
  opacity: 0.8;
  background-color: white;
  border-radius: 50%;
  margin: -15px;
  color: rgba(75, 0, 130, 0.7);
}

.closeIcon:hover {
  transform: scale(1.2);
  transition: 100ms;
  color: rgba(75, 0, 130, 0.9);
  background-color: rgba(255, 255, 255, 0.9);
}

.fa-remove:before, .fa-close:before, .fa-times:before {
  line-height: 40px;
  font-size: 15pt;
}

@media (max-width: 1000px) {
  .popupContainer {
    width: 94% !important;
  }

  .closeIcon {
    top: 4% !important;
    left: 2% !important;
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    font-size: 27pt !important;
  }
  .fa-remove:before, .fa-close:before, .fa-times:before {
    font-size: 25pt !important;
  }
  .bgImage {
    height: 130% !important;
  }
  .backdrop {
    background-color: #f9f9f9;
  }

  .popup_item {
    margin-top: 20px !important;
  }

  #nav .container div {
    width: 33%;
    float: left;
  }
}