@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 */
#myCarousel{
    /*width: 900px;  define suitable width here*/
    min-width : 300px;
    max-width : 950px;
    margin-left: auto;
    margin-right: auto;
}
.carousel-item img{
    max-width: 100%;
}

.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;*/
    padding-left: 1rem;
}

/* 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;
}

/* Table */
table th {
    text-align: center; 
 }
 
 .table {
    margin: auto;
    width: 50% !important; 
 }

/* h2 */
h2{
    margin-top: 1rem;
}

/* 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;
}



  /*---Media Queries --*/
  @media (max-width: 992px) {
    

}
  @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;
    }
  }
  @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;
    }
  }
  
/* 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%;
  }
  
  /*--- 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) { ... }
  */