html {
    scroll-behavior: smooth;
}

/* MAIN */

*{
    margin: 0;
    padding: 0;
}

body{
    color: #12294B;
}



/* colors */

.blue{
    color: #196eb7;
}

.white{
    color: white;
}

.orange{
    color: #ff6d2c;
}

.navy{
    color: #12294B;
}

.green{
    color: #96a81e;
}

.green-back{
    background-color: #96a81e;
}

.white{
    color: white;
}

.navy{
    color: #12294B;
}

.red{
    color: red;
    font-weight: bold;
}

.btn-warning{
    background-color: #ff6d2c;
    color: white;
}

.semi-transparent-white{
    background-color: rgba(255, 255, 255, 0.5);
}

.navy-background{
    background-color: #16284c;
}

.blue-background{
    background-color: #196eb7;
}

.orange-background{
    background-color: #ff6d2c;
}

/* Globals */

body{
    font-family: 'proxima-nova', sans-serif;
}

.text-shadow{
    text-shadow: 2px 2px 4px #000000;
}

.box-shadow{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

h1,h2,h3,h4,h5{
    font-family: "bebas-neue";
}

a{
    color: #006eb6;
    text-decoration: underline;
}

/* ACCESSIBILITY */
/* accessibility */
a.skip-link {
    position: absolute;
    top: -2rem;
    z-index: 1;
    padding: 0 0.5rem;
    background: #ccc;
    color: #16284c;
    font-size: small;
    height: 2rem;
    line-height: 2rem;
    display: block;
    transition: top 1s ease-out;
    outline: none; }
  
  a.skip-link:focus {
    top: 0;
    transition: top 0.1s; }
  
  .hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  
  #skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  
  #skip a:focus {
    position: static;
    width: auto;
    height: auto; }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0; }
  
/* FOOTER */

/* MEDIA */

/* MEDIUM - LARGE */
@media (min-width: 992px) { 
    #logo{
        width: 18%;
    }
    
    .logo-container #logo{
        text-align: left;
    }
    
 }
/* SMALL */
@media (max-width: 768px){
    .logo-container {
        text-align: center;
    }
    #logo{
        width: 40%;
    }

}