/*!
 * RCI v2.0.0
 * For Bootstrap 4
 *
 * Copyright 2017 Reality Check, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */

body {
    font-family: 'Poppins', sans-serif;
    padding-top: 3.5rem;
}
body h1 {
    font-family: 'Nunito', sans-serif;
}
body h2 {
    font-family: 'Nunito', sans-serif;
}
body h3 {
    font-family: 'Nunito', sans-serif;
}
.font-anton {
    font-family: 'Anton', sans-serif;
}
.font-nunito {
    font-family: 'Nunito', sans-serif;
}
.font-poppins {
    font-family: 'Poppins', sans-serif;
}
.font-ubuntu {
    font-family: 'Ubuntu', sans-serif;
}

.rci-date {
    color: #DC3A37;
}
.rci-blog {
    color: #5e0d20;
}

.rci-banner {
    background-color: #DC3A37;
}
.rci-banner-dark {
    background-color: #C11619;
}

.rci-copyright {
    padding-top: 1rem;
    text-align: center;
    color: #fff;
    background-color: #DC3A37;
}

.btn-rci {
    color: #FFFFFF;
    background-color: #BDAD88;
}
.bg-dark {
    background-color: #5e0d20 !important
}

.jumbotron {
    color: #fff;
}
.jumbotron h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 300%;
}
.jumbotron h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 150%;
}

/* https://www.w3schools.com/colors/colors_picker.asp */
.rci-section-light {
    background-color: #f6f4ef;
}
.rci-section-light h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 225%;
    text-align: center;
}

.rci-logo {
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.whatayla-logo {
    font-family: 'Ubuntu', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.bd-footer {
    font-size: 85%;
    text-align: center;
    color: #eee;
    background-color: #938156
}

.bd-footer-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #fff;
}

.bd-footer a {
    font-weight: 500;
    color: #eee;
}

.bd-footer a:focus, .bd-footer a:hover {
    color: #fff;
}

.bd-footer p {
    margin-bottom: 0
}

@media (min-width:576px) {
    .bd-footer {
        text-align: left
    }
}

.bd-footer-links {
    padding-left: 0;
    margin-bottom: 1rem
}

.bd-footer-links li {
    display: block
}

.img-responsive {
  max-width: 90%; /* or to whatever you want here */
  max-height: auto; /* or to whatever you want here */
}

@media screen and (max-width: 991px) {
     /* start of large tablet styles */
     .img-responsive {
       min-width: 70%;
     }
}

@media screen and (max-width: 767px) {
     /* start of medium tablet styles */
     /* Adding a fixed/percentage min-width could ensure that the image doesn't get too small */
     .img-responsive {
       min-width: 30%;
     }
}

@media screen and (max-width: 479px) {
     /* start of phone styles */
     /* It's possible to hide the image if the screen becomes too small */
     .img-responsive {
       min-width: 10%;
     }
}