/*!
 * Start Bootstrap - Landing Page v5.0.9 (https://startbootstrap.com/theme/landing-page)
 * Copyright 2013-2020 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE)
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300&display=swap');


body {
  font-family: 'Roboto', sans-serif;
  color: #240a0a;
}

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

p{
  text-align: justify;
}

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url("../img/home.jpg");
    background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
  height:65vh;
}

header.masthead .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

header.masthead h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  header.masthead {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  header.masthead h1 {
    font-size: 3rem;
  }
}

.showcase .showcase-text {
  padding: 3rem;
}

.showcase .showcase-img {
  min-height: 30rem;
  background-size: cover;
}

@media (min-width: 768px) {
  .showcase .showcase-text {
    padding: 7rem;
  }
}

.features-icons {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.features-icons .features-icons-item {
  max-width: 20rem;
}

.features-icons .features-icons-item .features-icons-icon {
  height: 7rem;
}

.features-icons .features-icons-item .features-icons-icon i {
  font-size: 4.5rem;
}

.features-icons .features-icons-item:hover .features-icons-icon i {
  font-size: 5rem;
}

.testimonials {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.testimonials .testimonial-item {
  max-width: 18rem;
  background-color: #f8f9fa;
  padding:24px; 
  border-radius:5px;
  transition: all ease .6s;
}

mark{
  background-color:transparent;
}

.card{
  border:0px;
  text-align: center;
}


.testimonial-item:hover{
  background-color: #CC5D2A;
}

.testimonial-item:hover h5,
.testimonial-item:hover p{
  color:white;
}

.call-to-action {
  position: relative;
  background-color: #343a40;
  background: url("../img/2000.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.call-to-action .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

footer.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.big-title{
  font-size: 5vw;
  font-weight: 3;
  color:#BB3334;
  transition: all .2s ease;
}

.big-subtitle{
  font-size:44px;
  font-style: italic;
}

.text-grey{
color: #868686;
}

.text-faux-white{
  color: #F5F5F5;
}

.text-black{
  color:#240a0a;
}

.bg-grey{
  background-color: #868686;
}

.text-red{
  color:#BB3334;
}
.bg-red{
  background-color:#BB3334;
}

.bg-faux-white{
  background-color:#F5F5F5;
}

#mobile-nav{
  display:none;
}

.nav-item-active{
  color:#BB3334;
}



@media screen and (max-width: 992px){
  .navbar{
    display:none;
  }
  #mobile-nav{
    display:block;
  }
}

/* MENU */

#menuToggle
{
  display: block;
  position: fixed;
  top: 50px;
  right: 50px;
  
  z-index:3;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #240a0a;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #BB3334;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #000;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}


#menu
{
  position: absolute;
  width: 300px;
  height: 100vh;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  right: -100px;
  background-color:#F5F5F5;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 18px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
	transform: scale(1.0, 1.0);
	opacity: 1;
}