html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

}
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }

        nav ul {
            width: 100%;
            display: block;
            height: auto;
        }

        nav li {
            width: 90%;
            float: left;
            position: relative;
        }

            nav  li  a {
                border-bottom: 1px solid #576979;
                border-right: 1px solid #576979;
            }
          

        nav a {
            text-align: left;
            width: 100%;
            text-indent: 25px;
        }
}
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }

        nav ul {
            display: none;
            height: auto;
        }

        nav a#pull {
            display: block;
            background-color: #283744;
            width: 100%;
            position: relative;
        }

            nav a#pull:after {
                content: "";
                background: url('nav-icon.png') no-repeat;
                width: 30px;
                height: 30px;
                display: inline-block;
                position: absolute;
                rightright: 15px;
                top: 10px;
            }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.fpt-color-bg {
    color: #f6f6f6 !important;
    background-color: #f26f21 !important;
}
.fpt-color {
    color: #f36f21 !important;
}


.btn-outline-fpt {
    border-color: #ff9800;
    color: #f36f21;
}

.btn-outline-fpt:hover {
    background: #ff9800;
    color: white;
}

.form-control:focus {
    border-color: #f26f21 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0, 0.075), 0 0 8px rgba(245, 166, 32, 0.6);
}


.form-check-input:checked {
    background-color: #f26f21;
    border-color: #f26f21;
    outline: 1px solid #f26f21;
    accent-color: #f26f21;
}
.checkbox {
    accent-color: #f26f21;
    font-size: 130%;
}

.nav-item:hover {
    background-color: #f8b790;
}

.nav-link:hover {
    color: #f26f21 !important;
    border-bottom: 2px solid #f26f21;
}

.dropdown-item:hover {
    color: #f6f6f6 !important;
    background-color: #f26f21 !important;
}
nav a#pull {
    display: none;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.topnav {
    overflow: hidden;
    background-color: #333;
}

    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #04AA6D;
            color: white;
        }

    .topnav .icon {
        display: none;
    }

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
}