/* ------------------------ GENERAL ------------------------ */

.mobile-only {
    display: none;
}

.show-on-medium {
    display: none;
}

.spacer-small {
    margin-top: 2.5vh;
}
.spacer {
    margin-top: 5vh;
}
.spacer-large {
    margin-top: 8vh;
}
.spacer-xlarge {
    margin-top: 11vh;
}
.spacer-superlarge {
    margin-top: 15vh;
}

body {
    /* background-color: #1f4e78; */
}

/* https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2 */
html {
    /* scroll-behavior: smooth; */
}

/* ------------------------ NAVBAR ------------------------ */

.absorbed-navbar {
    position: absolute;
}

.bg-light {
    /* background-color: #f8f9fa!important; */
    background-color: #fff!important;
}

.navbar {
    
}

/* ------------------------ HEADINGS AND TEXT ------------------------ */

h1 {
    color: #1f4e78;
    /* text-align: center; */
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-size: 2.5rem;
    text-align: center;
    font-weight: 300;
}

.index-h1 {
    font-size: 3rem;
    font-weight: 400;
}

h2 {
    color: #1f4e78;
    /* text-align: center; */
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-weight: 300;
    margin-top: 1.5vh;
    text-align: center;
}
  
h3 {
    color: #1f4e78;
    /* text-align: center; */
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-weight: 300;
    /* margin-top: 1.5vh; */
    text-align: center;
}

h4 {
    /* color: #1f4e78; */
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-weight: 300;
}
  
p {
    color: #333;
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-weight: 300;
    font-size: 1.25rem;
}

.list-group-item {
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-weight: 300;
    font-size: 1rem;
}

/* ------------------------ BUTTONS ------------------------ */

.btn-primary {
    color: #fff;
    background-color: #1f4e78;
    border-color: #1f4e78;
    font-size: 1.25rem;
    /* border-radius: 25px; */
    /* padding-left: 2rem; */
    /* padding-right: 2rem; */
    padding: 12px 50px;
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Lato', 'Roboto', sans-serif;
  }
  .btn-primary:hover {
    color: #1f4e78;
    background-color: #fff;
    border-color: #1f4e78;
  }

/* ------------------------ FORMS ------------------------ */

.form-field::placeholder {
    font-family: 'Lato';
    color: #aaaaaa;
    font-size: 14px;
}
.form-field {
    font-family: 'Lato';
    color: #aaaaaa;
    font-size: 14px;
}
/* hide the labels above the fields */
.col-form-label{
    display: none;
}

/* reduce the margin between fields */
.form-group {
    /* margin-bottom: 0.5rem; */
    margin-bottom: 5px;
}

/* Get rid of the little handle in the bottom right that lets you resize the comments box */
/* Dont want it to mess up the page format */
.textarea {
    resize: none;
}

/* This is the message that gets displayed after submitting a contact form */
/* Same as the contact form from enginehireio and pharmashyft */
p.submission-message {
    text-align: center;
    margin-top: 0.5rem;
    /* font-size: 20px; */
    font-family: 'Open Sans', sans-serif, 'Lato';
    font-weight: 400;
    color: #1f4e78;
    font-size: 1rem;
  }

/* ------------------- MEDIUM -------------------- */
@media (max-width: 1000px) {

    .hide-on-medium {
        display: none;
    }

    .show-on-medium {
        display: inherit;
    }

}


/* ------------------- SMALL -------------------- */

/* https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
/* @media screen and (max-width: 600px) { */
@media (max-width: 768px) {
/* @media (max-width: 1000px) { */

    /* https://theme.co/apex/forum/t/google-font-not-working-on-mobile/8266 */
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    
    .mobile-only {
        display: inherit;
        /* display: none; */
    }
    .web-only {
        display: none;
    }
}