@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

  html, body {
      height: 100%;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      color: #222;
  }

  /* Nav */
  .navbar {
      padding: .8rem;
  }

  .navbar-nav li{
      padding-right: 20px;
  }

  .nav-link {
      font-size: 1.1em !important;
  }



  /*.carousel-item{
      height: 32rem;
      background:#777;
      color:white;
      position: relative;
  }*/

  /*
  .container{
      position: absolute;
      bottom:0;
      left:0;
      right:0;
      padding-bottom: 50px;
  }*/

  /*---------*/

  /* Carousel Slider */
  .carousel-inner img{
      min-height : 300px;
      max-height : 900px;
      width : 100%;
  }

  .carousel-caption {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }

  .carousel-caption h1{
      font-size: 500%;
      text-transform: uppercase;
      text-shadow: 1px 1px 15px #000;
  }

  .carousel-caption h3{
      font-size: 200%;
      font-weight: 500;
      text-shadow: 1px 1px 10px #000;
      padding-bottom: 1rem;
  }

  /* Principals buttoms */
  .btn-primary{
      background-color: #8b0d32;
      border: 1px solid #8b0d32;
  }
  .btn-primary:hover{
      background-color: #5f0822;
      border: 1px solid #5f0822;
  }

  /* Jumbotron */
  .jumbotron {
      padding:1rem;
      border-radius: 0;
  }


  .padding {
      padding-bottom: 2rem;
  }

  /* Welcome */
  .welcome {
      width:75%;
      margin: 0 auto;
      padding-top: 2rem;
  }
  .welcome hr {
      border-top: 2px solid #b4b4b4;
      width: 95%;
      margin-top: .3rem;
      margin-bottom: 1rem;
  }

  /*.card img{
      min-height : 100px;
      max-height : 900px;
      width : 100%;
  }*/
  /*
  .card-img-top{
      width: 500px;
  }*/


  /* Social icons (inside "Connect") */
  .social a {
      font-size: 4.5em;
      padding: 3rem;
  }

  .bi-facebook{
      color: #3b5998;
  }

  .bi-linkedin{
      color: #0072b1;
  }

  .bi-instagram{
      color: #517fa4;
  }

  .bi-github{
      color: #000000;
  }

  .bi-facebook:hover,
  .bi-linkedin:hover,
  .bi-instagram:hover,
  .bi-github:hover {
      color:#d5d5d5;
  }


  /* Footer */
  footer {
      background-color: #3f3f3f;
      color: #d5d5d5;
      padding-top: 2rem;
  }

  /* hr */
  hr .light {
      border-top: 1px solid #d5d5d5;
      width: 75%;
      margin-top: .8rem;
      margin-bottom: 1rem;
  }


  footer a {
      color: #d5d5d5;
  }

  /* hr */
  hr .light-100 {
      border-top: 1px solid #d5d5d5;
      width: 100%;
      margin-top: .8rem;
      margin-bottom: 1rem;
  }

  /*Form*/
  form {
      /*position: relative;*/
      padding-bottom: 2rem;
      /*padding-left: 2rem;*/
  }

  .row{
      padding-bottom: 1rem;
  }

  /*Gif from resultsForm*/
  .sentGif{
      margin-left: auto;
      margin-right: auto;
      width: 45%;
  }

  /* Form to center it*/
  .centerForm{
      padding-left: 11rem;
  }



    /*---Media Queries --*/
    @media (max-width: 992px) {
      .social a {
          font-size: 4em;
          padding: 2rem;
      }
      .centerForm{
          padding-left: 6rem;
      }

  }
    @media (max-width: 768px) {
      #responsiveImage{
          min-height : 300px;
          width : 100%;
      }

      .carousel-caption {
          top: 45%;
      }

      .carousel-caption h1{
          font-size: 350%;
      }

      .carousel-caption h3{
          font-size: 140%;
          font-weight: 400;
          padding-bottom: .2rem;
      }

      .carousel-caption .btn{
          font-size: 95%;
          padding: 8px 14px;
      }
      .display-4{
          font-size: 200%;
      }
      .social a {
          font-size: 2.5em;
          padding: 1.2rem;
      }

      .centerForm{
          padding-left: 1rem;
      }
    }
    @media (max-width: 576px) {
      .carousel-caption {
          top: 40%;
      }

      .carousel-caption h1{
          font-size: 250%;
      }

      .carousel-caption h3{
          font-size: 110%;
      }

      .carousel-caption .btn{
          font-size: 90%;
          padding: 4px 8px;
      }

      .display-4{
          font-size: 160%;
      }
      .social a {
          font-size: 2em;
          padding: .7rem;
      }

      .centerForm{
          padding-left: .4rem;
      }
    }

    /* Logo Red-Black */
    .logo {
      width: 100%;
      max-width: 100px;
      height: auto;
    }

      /* Logo White-Black */
    .logo2 {
      width: 100%;
      max-width: 60px;
      height: auto;
    }

    /* Tammy photo*/
    #tammy{
      width: 100%;
      max-width: 900px;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }



    /*---Firefox Bug Fix --*/
    .carousel-item {
      transition: -webkit-transform 0.5s ease;
      transition: transform 0.5s ease;
      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
    }
    /*--- Fixed Background Image --*/
    figure {
      position: relative;
      width: 100%;
      height: 60%;
      margin: 0!important;
    }
    .fixed-wrap {
      clip: rect(0, auto, auto, 0);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    /*#fixed {
      background-image: url('img/mac.png');
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      will-change: transform;
    }*/
    /*--- Bootstrap Padding Fix --*/
    [class*="col-"] {
        padding: 1rem;
    }





    /*
    Extra small (xs) devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap

    Small (sm) devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    Medium (md) devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    Large (lg) devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    Extra (xl) large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    */