@import url(bootstrap.css);

.about {
    text-align: left;
}

.about-section-title {
    height: 126px;
    background: #003366 0% 0% no-repeat padding-box;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-section-title-text {
    text-align: center;
    font: normal normal bold 25px/44px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    padding: 0;
    margin: 0;
}

.about-body-text{
    text-align: left;
    font: normal normal normal 12px/18px Roboto;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    margin: 0;
    margin-left: 10%;
    margin-right: 10%;
}

#validate-button, #find-button {
    background-color: #1C7CD5;
    color: white;
    border-width: 1px;
    border-color: #1C7CD5;
    max-width: 273px;
    height: 60px;
    margin-top: 10px;
    border-radius: 4px;
    /*font-size: 16px;*/
    font: normal normal bold 13px/20px Roboto;
    letter-spacing: -0.21px;
    /*color: #FFFFFF;*/
    text-transform: uppercase;
    opacity: 1;
}

.home-page-banner {
    height: 404px;
    /* UI Properties */
    opacity: 1;
    width:100%;
    display: flex;
    align-items: center;
    background-image: url('../images/CFV_background-01.jpg');
    background-size: cover;
}

.home-page-banner-text {
    /* UI Properties */
    text-align: center;
    font: normal normal bold 22px/35px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

#validate-input {
    letter-spacing: 0px;
}

#validate-input::placeholder {
    letter-spacing: 0px;
    color: #808080;
    opacity: 1;
}

#name {
    letter-spacing: 0px;
}

#name::placeholder {
    letter-spacing: 0px;
    color: #808080;
    opacity: 1;
}

.find-feed-country {
    font-weight: bold;
}

.footer-and-body-button {
    background-color: #1C7CD5;
    color: white;
    border: none;
    text-align: center;
    width: 50%;
    margin-right: 50%;
    height: 15%;
    font: normal normal bold 13px/20px Roboto;
}

@media (min-width: 400px) {
    .about-body-text{
        font: normal normal normal 14px/20px Roboto;
    }
    .about-section-title {
        height: 146px;
    }
    .about-section-title-text {
        font: normal normal bold 30px/49px Roboto;
    }
    .home-page-banner-text {
        font: normal normal bold 27px/40px Roboto;
    }

    #validate-button, #find-button {
        font: normal normal bold 15px/22px Roboto;
    }

    #validate-input, #validate-input::placeholder, #name, #name::placeholder, .find-feed-country {
        font: normal normal bold 12px/15px Roboto !important;
    }

    .footer-and-body-button {
        font: normal normal bold 14px/21px Roboto;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .about-body-text{
        font: normal normal normal 18px/24px Roboto;
    }
    .about-section-title {
        height: 146px;
    }
    .about-section-title-text {
        font: normal normal bold 40px/59px Roboto;
    }
    .home-page-banner-text {
        font: normal normal bold 32px/45px Roboto;
    }

    #validate-button, #find-button {
        font: normal normal bold 17px/24px Roboto;
    }

    #validate-input, #validate-input::placeholder, #name, #name::placeholder, .find-feed-country {
        font: normal normal bold 17px/20px Roboto !important;
    }

    .footer-and-body-button {
        font: normal normal bold 15px/22px Roboto;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .about-section-title {
        height: 166px;
    }
    .about-section-title-text {
        font: normal normal bold 50px/69px Roboto;
    }
    .home-page-banner-text {
        font: normal normal bold 37px/50px Roboto;
    }

    #validate-button, #find-button {
        font: normal normal bold 19px/26px Roboto;
    }

    #validate-input, #validate-input::placeholder, #name, #name::placeholder, .find-feed-country {
        font: normal normal bold 19px/22px Roboto !important;
    }

    .footer-and-body-button {
        font: normal normal bold 16px/23px Roboto;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .about-section-title {
        height: 186px;
    }
    .about-section-title-text {
        font: normal normal bold 60px/79px Roboto;
    }
    .home-page-banner-text {
        font: normal normal bold 42px/55px Roboto;
    }

    #validate-button, #find-button, .find-feed-country {
        font: normal normal bold 21px/28px Roboto;
    }

    #validate-input, #validate-input::placeholder, #name, #name::placeholder {
        font: normal normal bold 19px/22px Roboto !important;
    }

    .footer-and-body-button {
        font: normal normal bold 17px/24px Roboto;
    }
}

.some-bottom-pad {
    padding-bottom: 5px;
}

p, ol, ul {
    font-size: 14px;
}

.see_prev {
    font-size: 16px;
}

mark {
    line-height: 160%;
    background-color: #EFEF73;
    color: black;
}

.featherlight, .featherlight-content {
    overflow: hidden !important;
}

.padding-sides {
    padding-left: 1em;
    padding-right: 1em;
}

#prev_feed {
    margin: 15px;
    padding: 15px;
    border: solid 2px;
    background-size: cover;
    max-width: 85vw;
    max-height: 85vh;
}

.loading {
    height: 45px;
}

.hidden-info {
    display: none;
}

.section-title {
    padding: 2em 0 2em 0;
}

#result-feeds {
    padding: 2% 2% 2% 2%;
    text-align: center;
}

.background-temp {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("../images/Black_triangle.svg");
    background-repeat: no-repeat, repeat;
    background-position: left .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    text-indent: 25px;
}

#test-text {
    max-width: 500px;
    width: 100%;
    min-height: 100px;
    height: auto;
    text-align: left;
    float: left;
    margin-right: 10em;
}

#test-feed {
    padding: 1em 1em 1em 3em;
    min-height: 100px;
    height: auto;
}

#test-title, #test-message {
    float: left;
}

/*#test-button {*/
/*    background-color: #003366;*/
/*    color: white;*/
/*    border-width: 1px;*/
/*    border-color: #003366;*/
/*    max-width: 513px;*/
/*    width: 50%;*/
/*    height: 47px;*/
/*    margin-top: 19px;*/
/*    border-radius: 4px;*/
/*    !*font-size: 16px;*!*/
/*    font: normal normal bold 17px/24px Roboto;*/
/*    letter-spacing: -0.21px;*/
/*    !*color: #FFFFFF;*!*/
/*    text-transform: uppercase;*/
/*    opacity: 1;*/
/*}*/

#test-title {
    padding-bottom: 0.5em;
}

.white-text, .white-text:hover, .white-text:focus {
    color: #ffffff;
    text-decoration: none;
}

body {
    background-color: #000000;
    word-wrap: break-word;
}

.no-margin {
    margin: 0;
}

.icon {
    height: 28px;
    width: 28px;
}

h6 {
    font-size: 16px;
}

.about {
    font-size: 14px;
}

h5 {
    font-size: 20px;
    padding-bottom: 1em;
}

html {
    min-height: 100%;
    background-color: black;
}

.line-space {
    line-height: 171%;
}

.more {
    min-height: 40px;
    font-size: 16px;
    background-color: #ffffff;
    border-width: 1px 1px 1px 1px;
    border-color: #DDDDDD;
    border-style: solid;
}

.less {
    background-color: #e6e6e6;
    border-width: 1px 1px 1px 1px;
    border-color: #DDDDDD;
    border-style: solid;
}

.results-list, .warnings {
    font-size: 14px;
}

.results-list {
    padding-top: 1ch;
    padding-bottom: 1ch;
}

#phases-container {
    box-shadow: -5px 0 5px -15px #333, 5px 0 5px -15px #333;
    padding: 13px 8px 18px 8px;
    width: 100%;
    max-width: 1200px;
}

#phases-container h4 {
    margin: 0;
}

.warnings, .more, .results {
    margin: 1em 1em 1em 1em;
}

.phase {
    margin: 52px 52px 52px 52px;
}

.phase-header {
    padding: 0.5em 0.5em 0.5em 0.5em;
    /*background: white;*/
}

.font-26 {
    font-size: 26px;
}

.extra-bottom-padding {
    padding-bottom: 2.6em !important;
}

#validation-info {
    padding: 3em 3em 2em 3em;
    font-family: 'Roboto', sans-serif;
    vertical-align: top;
}

#footer {
    font-family: 'Roboto', sans-serif;
    /*height: 481px;*/
    /* UI Properties */
    opacity: 1;
}

#validate-button-test {
    background-color: #003366;
    color: white;
    border-width: 1px;
    border-color: #003366;
    max-width: 513px;
    width: 50%;
    height: 47px;
    margin-top: 19px;
    border-radius: 4px;
    /*font-size: 16px;*/
    font: normal normal bold 17px/24px Roboto;
    letter-spacing: -0.21px;
    /*color: #FFFFFF;*/
    text-transform: uppercase;
    opacity: 1;
}

.displayed-info {
    display: inline;
}

.header-plug {
    height: 24px;
    /* UI Properties */
    text-align: left;
    font: normal normal bold 19px/22px Roboto;
    letter-spacing: 0px;
    opacity: 1;
    margin-top: 16px;
    margin-left: 10px;
}

.no_bullets {
    list-style-type: none;
}

.navbar {
    text-align: right;
    border-radius: 0;
}

.navbar-nav {
    display: inline-block;
    float: right;
}

.navbar-header-text {
    font-weight: bold;
    margin: 0;
    margin-top: 13px;
}

@media screen and (max-width: 680px) {
    .navbar-header-text {
        display: none;
    }
}

@media (max-width: 1200px) {
    .navbar-collapse.collapse {
        display: none !important;
    }

    .collapse.show {
        display: block !important;
    }
}

#feed_prev_text {
    max-height: 75vh;
}

@media (max-width: 767px) {
    .border-style {
        padding-top: 2em !important;
        border-width: 1px 0px 1px 0px !important;
    }

    #feed_prev_text {
        max-height: 40vh !important;
    }

    .find-feed {
        border-radius: 4px 0px 0px 0px;
    }

    .find-feed-country {
        border-radius: 0px 0px 0px 4px;
        max-width: 258px;
    }

    #preview {
        overflow-y: scroll;
    }
}

@media (min-width: 768px) {
    #feed_prev_text {
        overflow-y: scroll;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .responsiveness {
        padding: 0 3em 0 3em !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .responsiveness {
        padding: 0 5em 0 5em !important;
    }
}

@media (max-width: 1200px) and (min-width: 1200px) {
    .responsiveness {
        padding: 0 7em 0 7em !important;
    }
}

.separator-container {
    height: 53px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-row {
    /*height: 400px;*/
    width: 80%;
    background: white;
    margin-left: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.border-style {
    border: solid;
    border-color: #d3d3d3;
    border-width: 0px 1px 0px 1px;
}

.one-third {
    min-height: 100%;
    min-width: 33%;
    width: auto;
    margin-top: 4em;
    margin-bottom: 4em;
    padding-left: 4.5em !important;
    padding-right: 4.5em !important;
    align-self: flex-start;
}

.foot-head {
    /*text-align: left;*/
    font-size: 28px;
}

.navbar-nav .nav-item .nav-link {
    font-size: 20px;
    padding-left: 1em;
    padding-right: 1em;
}

.bg-black {
    background-color: #000000 !important;
}

a.bg-black:hover, a.bg-black:focus,
button.bg-black:hover,
button.bg-black:focus {
    background-color: #fff6f6 !important;
}

.bg-secondary {
    background-color: #444444 !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: #ffffff !important;
}

.bg-light {
    background-color: #eeeeee !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: #ffffff !important;
}

.white {
    font-family: 'Roboto', sans-serif;
    color: white;
    padding: 10px;
    font-size: 25px;
    margin-top: .5rem;
}

#page-title {
    height: auto;
    max-width: 707px;
    width: 100%;
}

.needs-padding {
    padding-top: 6%;
    padding-bottom: 6%;
    background-image: url("/../images/header-background@2x.png");
    background-size: cover;
    background-repeat: no-repeat;
}
#container {
    background-color: #ffffff;
}

.panel {
    text-align: center;
}

.input-form {
    background-color: #000000;
    width: 95%;
    max-width: 700px;
    min-height: 192px;
    display: inline-block;
    border-radius: 5px;
    padding-bottom: 20px;
}

.dark-blue {
    color: #003366;
}

.left-text {
    text-align: left;
}

.center {
    text-align: center;
}

.feed-example {
    color: white;
}