@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Titan+One&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  background:  url(../images/bg-masthead.jpg);
  background-size:  cover;
  background-position:  fixed;
}

h1, h2, h3, h4, h5 {
  font-family: 'Titan One', sans-serif;
}

.bg-black {
  background: #000;
}

.bg-purple {
  background: #5c0f8b;
}

.bg-redtrans {
  background:  rgba(155, 28, 31, .5);
}

.text-green {
  color:  #00ff00;
}

.negmargin {
  margin-top: -100px;
}

.buynow {
  background: url('images/buynow.png');
  color: transparent;
  position: fixed;
  border: none;
  right: 0;
  top: 75px;
  width: 150px;
  height: 150px;
  z-index: 1;
}

.hero {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url('../images/bg-masthead.jpg');
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
  height: 100vh;
}

.aliees-hero {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url('../images/bg-masthead.jpg');
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.space-bg {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url('../images/bg-masthead.jpg');
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
}

.blackpurple {
  background: linear-gradient(to top, rgba(92, 15, 139, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.purpleblue {
  background: linear-gradient(to top, rgba(13, 202, 240, 1) 0%, rgba(92, 15, 139, 1) 100%);
}

.bluegreen {
  background: linear-gradient(to top, rgba( 25, 135, 84, 1) 0%, rgba(13, 202, 240, 1) 100%);
}

.greenblack {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba( 25, 135, 84, 1) 100%);
}

.blackblueblack {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(13, 202, 240, 1), rgba( 0, 0, 0, 1) 100%);
}

.intro {
  top: 45%;
  text-align: center;
  width: 100%;
  z-index: 1;
  animation: intro 6s ease-out 1s;
  color: #00C91D;
  font-weight: 400;
  font-size: 100%;
  opacity: 0;
}

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

/* Set the animation & hide the logo */
.logo {    
  position: absolute;
  top: 40%;
  left: 15%;
  z-index: 1;
  margin: auto;
  animation: logo 9s ease-out 9s;
  opacity: 0;
}

.logo svg {
  width: inherit;
}

/* Scale the logo down and maintain it centered */
@keyframes logo {
  0% {
      width: 80%;        
      transform: scale(1.00);
      opacity: 1;
  }
  50% {
      opacity: 1;
      width: 80%;      
  }
  100% {
      opacity: 0;
      transform: scale(0.1);
      width: 80%;        
  }
}

.hero p {
  color: #00C91D;
}

/* Set the font, lean the board, position it */
#board {
  font-family: 'Titan One', sans-serif;
  transform: perspective(300px) rotateX(25deg);
  transform-origin: 50% 100%;
  /*text-align: justify;*/
  position: absolute;
  margin-left: -5.5em;
  font-weight: bold;
  overflow: hidden;
  font-size: 150%;
  height: 20em;
  width: 11em;
  bottom: 0;
  left: 50%;
}

#board:after {
  position: absolute;
  content: ' ';
  bottom: 60%;
  left: 0;
  right: 0;
  top: 0;
}

/* Set the scrolling animation and position it */
#content {
  animation: scroll 100s linear 16s;
  position: absolute;
  top: 100%;
}

#title, #subtitle {
  text-align: center;
}

@keyframes scroll {
    0% {
        top: 100%;
    }
    100% {
        top: -170%;
    }
}

/* Flip Card */
.card-body img{
  height: 300px !important;
}
  
.flip-div{
  cursor: pointer;
}
  
.flip-div:hover .back,.flip-div.hover .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
  
.flip-div:hover .front,.flip-div.hover .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
  
.flip-main{
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
}

.front{
  position: relative;
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  z-index: 2;
  margin-bottom: 30px;
}

.back{
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
  
.back ul li a{
  font-size: 18px;
}

.front,.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 1s;
  -moz-transform-style: preserve-3d;
  -o-transition: 1s;
  -o-transform-style: preserve-3d;
  -ms-transition: 1s;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
}

.card-text {
  line-height: 2.0em;
}

.socials li {
  float: left;
  list-style-type: none;
  margin-right: 5px;
}

.socials li a {
  border: none;
  text-decoration: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .intro {
    text-align: center;
    width: 100%;
    z-index: 1;
    animation: intro 6s ease-out 1s;
    color: #00C91D;
    font-weight: 400;
    font-size: 200%;
    opacity: 0;
  }
  
  @keyframes intro {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
  }

  .logo {    
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    animation: logo 9s ease-out 9s;
    opacity: 0;
    overflow: none;
  }
  
  .logo svg {
    width: inherit;
  }
  
  /* Scale the logo down and maintain it centered */
  @keyframes logo {
    0% {
        width: 80%;        
        transform: scale(1.00);
        opacity: 1;
    }
    50% {
        opacity: 1;
        width: 80%;      
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
        width: 80%;        
    }
  }
  
  .hero p {
    color: #00C91D;
  }
  
  /* Set the font, lean the board, position it */
  #board {
    font-family: 'Titan One', sans-serif;
    transform: perspective(300px) rotateX(25deg);
    transform-origin: 50% 100%;
    text-align: justify;
    position: absolute;
    margin-left: -9em;
    font-weight: bold;
    overflow: hidden;
    font-size: 350%;
    height: 20em;
    width: 18em;
    bottom: 0;
    left: 50%;
  }
  
  #board:after {
    position: absolute;
    content: ' ';
    bottom: 60%;
    left: 0;
    right: 0;
    top: 0;
  }
  
  /* Set the scrolling animation and position it */
  #content {
    animation: scroll 100s linear 16s;
    position: absolute;
    top: 100%;
  }
  
  #title, #subtitle {
    text-align: center;
  }
  
  @keyframes scroll {
      0% {
          top: 100%;
      }
      100% {
          top: -170%;
      }
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}