.demo {
    color:red;
}

.landing {

    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
    url(images/landing.jpg);
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}
.btn-lm{
    background-color: #212121;
    color: white;
    padding: 12px;
    letter-spacing: 0.05rem;
    max-width: 32%;
    font-weight: 600;
}

.btn-lm:hover {
    background-color: black;
    cursor: pointer;
}

.partner {
    background-image: 
    url(images/image.png);
   -webkit-background-size: cover;
    -moz-background-size: cover;
    
    -o-background-size: cover;
    background-size: cover; 
}

.mechanic {
    background-image: url(images/image2.png);
   -webkit-background-size: cover;
    -moz-background-size: cover;
    
    -o-background-size: cover;
    background-size: cover; 
}

.text-left {
    text-align: left;
}
.how-to {
    background-image: url(./images/page7.png);
   -webkit-background-size: cover;
    -moz-background-size: cover;
    
    -o-background-size: cover;
    background-size: cover; 
}

.content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.content-partner {
    position: relative;
    left: 50%;
    top: 10%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}


.content2 {
    position: relative;
    left: 30%;
    top: 45%;
    padding-left: 12%;
    padding-right: 15%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.content3 {
    position: relative;
    left: 25%;
    padding-left: 12%;
    padding-right: 10%;
    top: 45%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.select-text {
    /* background-color: brown; */
    text-align: right;
    padding-right: 14%;
}
.landing-text {
    margin-left: 60px;
    padding-left: 13%;
    padding-right: 12%;
    text-align: left;

    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    /* background-color: blueviolet; */
}

.border-pink {
    border: 2px #d36363 solid;
}

.partnership-text {
    margin-left: 60px;
    font-weight: 800;
    text-transform: uppercase;
    padding-left: 13%;
    /* background-color: blueviolet; */
    padding-right: 12%;
    text-align: left;
}

.partner-text {
    font-weight: 700;
    text-transform: uppercase;
    /* letter-spacing: 0.2rem; */
}
.text-red {
    color: #f54949;
}
.option-card {
    cursor: pointer;
    margin-inline: 5px;
}

.card-text{
  padding-top: 10px;
}

.disabled-card {
    cursor: pointer;
    margin-inline: 5px;
    /* background-color: lightgrey; */
}

.selected-card {
    background-color: #db2020;
}
.option-card:hover {
    background-color: #db2020;
}

.pb-card:hover {
    background-color: #fffff1;
    cursor: pointer;
}
.extra-text{
  font-size: 8pt;
}

.about-text{
  font-size: 34px;
  margin-left: 0px;
  text-align: left;

  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2rem;

}

.benifits-text {
  padding-left: 8%;
  padding-right: 8%;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */

  .card-body {
    padding: 0px;
  }


  .content-partner {
    position: relative;
    left: 50%;
    top: 10%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }

  .partnership-text {
    margin-left: 10px;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    
    /* background-color: blueviolet; */

    text-align: left;
  }


  

  .mechanic {
    background-image: url(images/image.png);
   -webkit-background-size: cover;
    -moz-background-size: cover;
    
    -o-background-size: cover;
    background-size: cover; 
  }

  .content3 {
    position: relative;
    left: 50%;
    top: 45%;
    padding-left: 12%;
    padding-right: 15%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }


  .content2 {
    position: relative;
    left: 50%;
    top: 45%;
    padding-left: 12%;
    padding-right: 15%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .about-text{
    font-size: 34px;
    margin-left: 10px;
    text-align: left;

    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2rem;

    

  }

  .landing-text {
    font-size: 14pt;
    margin-left: 10px;
    text-align: center;

    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2rem;

  }

  .select-text {
    /* background-color: brown; */
    text-align: center;
    font-size: 11pt;
    padding-right: 0%;
  }
  
  .card-text{
    font-size: 6pt;
  }
  

}

.card-body {
  padding-top: 10px;
}

.downArrow{
	position: fixed;
	bottom: 10%;
	right: 5%;
}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #2ecc71;		
}