html,
body,
header,
#intro {
    height: 100%;
    
}

#intro
{
    background: url("../img/fog/intro_backgroud_masked.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top : 60px; 
}

@media (min-width: 375px) {
  #intro {
    padding-top : 80px;
  }
}


@media (min-width: 991px) {
  #intro {
    padding-top : 200px;
  }
}

/* 
@media (min-width: 768px) {
  #intro {
    padding-top : 300px;
  }
}
 

 
@media (min-width: 1200px) {
#intro {
    padding-top : 200px;
  }
} */

/* #main {
    background: url("../img/fog/gtr628_50pc.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

} */

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #intro-footer{
    height: 340px;
  }
}

#intro-card {
  background-color: cornflowerblue;
}

#logo{
  width: 200px;
}

#new-features,
#advantages,
#description
{
  padding-top : 100px;
}

.top-nav-collapse {
    background-color: #24355C;
 }
  
@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }

  .display-4{
    font-size: 2rem;
  }

  #logo{
    width: 100px;
  }

  #new-features,
  #advantages,
  #description
  {
    padding-top : 50px;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}

.success-lighter-hover {
  color: #00C851;
  border: 2px solid #00C851 !important;
  -webkit-transition: .4s;
  transition: .4s;
}
.success-lighter-hover:hover {
  -webkit-transition: .4s;
  transition: .4s;
  color: #16ff74;
  border: 2px solid #16ff74 !important;
}

.success-darker-hover {
  color: #00C851;
  border: 2px solid #00C851 !important;
  -webkit-transition: .4s;
  transition: .4s; }
.success-darker-hover:hover {
  -webkit-transition: .4s;
  transition: .4s;
  color: #007c32;
  border: 2px solid #007c32 !important;
}


.danger-lighter-hover {
  color: #ff3547;
  border: 2px solid #ff3547 !important;
  -webkit-transition: .4s;
  transition: .4s; }
.danger-lighter-hover:hover {
  -webkit-transition: .4s;
  transition: .4s;
  color: #ff828d;
  border: 2px solid #ff828d !important;
 }

.danger-darker-hover {
  color: #ff3547;
  border: 2px solid #ff3547 !important;
  -webkit-transition: .4s;
  transition: .4s; }
.danger-darker-hover:hover {
  -webkit-transition: .4s;
  transition: .4s;
  color: #e80015;
  border: 2px solid #e80015 !important;
}