h1,
h2,
h3,
h4,
body {
    /*font-family: 'Catamaran', sans-serif;*/
    /*font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';*/
}

a {
    color: #015289;
    outline: none;
}

.una-section  {
    padding: 6px 0;
}

.una-section > h1 {
    color: #015289;
    font-size: 42px;
    font-weight: bold;
    margin: 50px 0;
}

.una-section > h2 {
    color: #015289;
    font-size: 38px;
    font-weight: bold;
    margin: 46px 0;
}

.una-section > h3 {
    color: #015289;
    font-size: 34px;
    font-weight: bold;
    margin: 42px 0;
}

.una-section > h4 {
    color: #015289;
    font-size: 30px;
    font-weight: bold;
    margin: 38px 0;
}

.una-section .heading-subtext {
    font-size: 60%;
    font-weight: 400;
    color: black;
}

.una-section > p {
    font-size: 24px;
    line-height: 31px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0;
}

.una-section > h3 ~ p,
.una-section > h4 ~ p{
    font-size: 20px;
}

.una-section p + p {
    margin-top: 24px;
}

@media (hover: hover) {
    .una-section a:hover {
        color: #015289;
        text-decoration-color: #015289;
    }
}

.una-blue {
    color: #015289;
}

@media (hover: hover) {
    .una-blue-hover:hover {
        color: #015289;
    }
}

.una-btn-outline {
    background-color: #FFF;
    color: #015289;
    border-color: #015289;
}

/* Consider using @media (hover: hover) for hover if using on touch device (for buttons and anything else) */
.una-btn-outline:hover,
.una-btn-outline:focus,
.una-btn-outline:active, 
.una-btn-outline.active,
.open > .dropdown-toggle.una-btn-outline {
    background-color: #015289;
    color: #FFF;
    border-color: #015289;
}

.una-btn {
    color: #fff;
    background-color: #015289;
    border-color: #014370;
}

.una-btn:hover, 
.una-btn:focus, 
.una-btn:active, 
.una-btn.active, 
.open > .dropdown-toggle.una-btn {
    color: #fff;
    background-color: #0161a2;
    border-color: #015289;
}

.una-cbx label,
.una-cbx input {
    cursor: pointer;
}

.una-bg {
    color: #FFF;
    background-color: #015289;
}

.una-bg-gray {
    background-color: #F7F6F4;
}

@media (hover: hover) {
    .una-bg-hover:hover {
        color: #FFF;
        background-color: #015289;
    }
}

.btn-icon {
    background: 0;
    border: 0;
    padding: 0;
}

.cursor-pointer {
    cursor: pointer;
}

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

@media (max-width: 768px) {
    .col-md-6,
    .col-md-4,
    .col-md-3,
    .col-md-2 {
        margin-bottom: 20px;
    }
}

.navbar {
    -ms-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -webkit-transition: top 0.5s ease;
    transition: top 0.5s ease;
}

.main-logo {
    max-width: 160px;
}

@media (max-width: 350px) {
    .main-logo {
        max-width: 150px;
    }
}

@media (max-width: 275px) {
    .main-logo {
        display: none;
    }
}

.nav-item {
    list-style: none;
    display: inline-block;
    padding: 35px 0;
    margin: 0;
    border-bottom: 4px solid transparent;
}

@media screen and (min-width:992px) {
    /* To accomodate form nav bar scrolling and animation */
    header {
        margin-bottom: 118px;
    }

    .navbar-hide {
        top: -118px;
    }

    .navbar {
        padding: 0;
    }

    .nav-item.show {
        border-radius: 3px;
        -webkit-box-shadow: 0 0 5px #015289;
        box-shadow: 0 0 5px #015289;
        border-bottom-color: #015289;
    }
}

@media screen and (max-width:991px) {
    /* To accomodate for nav bar scrolling and animation */
    header {
        margin-bottom: 75px;
    }

    .navbar-hide {
        top: -75px;
    }

    .navbar-nav {
        margin-top: 15px;
    }

    .nav-item {
        padding: 0;
    }

    .lock-scroll {
        overflow-y: hidden;
        width: 100%;
    }
}

@media screen and (max-width:350px) {
    /* To accomodate for nav bar scrolling and animation */
    header {
        margin-bottom: 72px;
    }

    .navbar-hide {
        top: -72px;
    }
}

.nav-item > a,
.nav-item > button {
    position: relative;
    display: inline-block;
    padding: 8px 9px;
    margin: 0 0 -1px 0;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 17.6px;
    font-weight: 400;
    color: #000000;
}

#lblUserSignedIn {
    font-size: 14px;
    font-weight: 600;
    align-self: center;
}

@media screen and (min-width:1200px) {
    #lblUserSignedIn {
        max-width: 117px;
    }
}

@media screen and (max-width:1199px) {
    .nav-item > a {
        font-size: 15px; /* Maybe make font bigger when in mobile menu */
        padding: 8px 6px;
    }

    #lblUserSignedIn {
        margin-bottom: 4px;
        max-width: 53px;
    }
}

.nav-item > a > i {
    margin-left: 3px;
}

@media screen and (min-width:992px) {
    .nav-item > a:hover,
    .nav-item.show > a:focus,
    .nav-item > button:hover,
    .nav-item.show > button:focus,
    #btnSignIn:hover,
    #ddlUserSignedIn:hover {
        color: #015289;
        transform: scale(1.1);
    }
}

#ddlUserSignedIn[aria-expanded="true"],
#ddlNavUserSignedIn[aria-expanded="true"] {
    color: #015289;
    transform: scale(1.1);
}

*[aria-expanded=true] .fa-angle-down {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

*[aria-expanded=false] .fa-angle-down {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.nav-item .dropdown-menu {
    border: 1px solid #e4e2db;
    background: #fbfbfa;
    padding: 15px;
    font-size: 15px;
    width: 100%;
    margin: 0;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    white-space: nowrap;
}

header .nav-item .dropdown-menu li {
    padding-left: 0;
    list-style: none;
}

@media screen and (max-width:1024px) {
    header .nav-item .dropdown-menu .container .row .col-md-3 {
        max-width: none;
    }
}

@media screen and (max-width:991px) {
    header .nav-item .dropdown-menu .container .row ol {
        padding-left: 10px;
    }
}

header .nav-item .dropdown-menu a {
    color: black;
}

@media (hover: hover) {
    header .nav-item .dropdown-menu a:hover {
        color: #015289;
    }
}

.nav-grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 115px);
    grid-gap: 16px;
    text-align: center;
}

    .nav-grid .icon {
        height: 35px;
        margin: 0 auto 5px;
    }

.vertical-divider li {
    color: #4a4844;
    margin-bottom: .5rem;
}

@media screen and (min-width: 992px) {
    .vertical-divider [class*='col-md-']:not(:last-child)::after {
        background: #e0e0e0;
        width: 1px;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        min-height: 70px
    }

    .vertical-divider {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media screen and (max-width:991px) {
    #btnSignIn,
    #userSignedInDropdownWrapper {
        display: none !important;
    }
}

/* Nav Toggler Animation */

.animated-nav-toggler {
    width: 25px;
    height: 18px;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.animated-nav-toggler span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-nav-toggler span {
    background: #015289;
}

.animated-nav-toggler span:nth-child(1) {
    top: 0px;
}

.animated-nav-toggler span:nth-child(2), .animated-nav-toggler span:nth-child(3) {
    top: 8px;
}

.animated-nav-toggler span:nth-child(4) {
    top: 16px;
}

.animated-nav-toggler.open span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
}

.animated-nav-toggler.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.animated-nav-toggler.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.animated-nav-toggler.open span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
}

/* END Nav Toggler Animation */

.navbar-toggler:focus {
    outline: none !important;
    box-shadow: none;
}

/* Add icon insided input (code be used for left or right) */

.inner-addon {
    position: relative;
}

    .inner-addon button {
        position: absolute;
        padding: 6px;
        color: gray;
    }

.right-addon button {
    right: 0;
}

.right-addon input {
    padding-right: 30px;
}

/* END Add icon insided input */

@media screen and (min-width:992px) {
    #searchWrapper {
        display: none;
        padding-bottom: 39.5px;
        padding-top: 39.5px;
        margin-left: 100px;
        width: 80%;
    }

    .navbar .searching .collapse .navbar-nav,
    .navbar .searching #btnSignIn,
    .navbar .searching #userSignedInDropdownWrapper {
        display: none !important;
    }

    .navbar .searching .collapse #searchWrapper {
        display: block;
    }
}

@media screen and (max-width:991px) {
    .search-toggler {
        display: none !important;
    }

    #searchWrapper {
        margin: 0;
        padding: 6px;
        width: 75%
    }
}

@media screen and (min-width:980px) {
    .dropdown-menu-align {
        right: auto;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

@media screen and (max-width:1200px) {
    .dropdown-menu-align {
        left: 25%;
    }
}

@media screen and (max-width:979px) {
    .dropdown-menu-align {
        margin-top: 5px;
        right: 0;
        left: auto;
    }
}

/* Boostrap carousel (when upgraded to 4.6 it lost the animation so added some code below this to fix it) */

.carousel-indicators li {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 0 5px;
}

.carousel-fade .carousel-item {
    -webkit-transition: opacity ease-in-out .5s !important;
    -moz-transition: opacity ease-in-out .5s !important;
    -o-transition: opacity ease-in-out .5s !important;
    transition: opacity ease-in-out .5s !important;
}

.carousel-fade .active.left,
.carousel-fade .active.right {
    left: 0 !important;
    z-index: 2 !important;
    opacity: 0 !important;
    filter: alpha(opacity=0) !important;
}

/* END Boostrap carousel */

.una-card.card {
    border: 1px solid #e4e2db;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

/* stretched-link */
.una-card.card a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

.una-card.card:hover {
    color: #000;
    text-decoration: none;
    -webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 2px 10px rgba(0,0,0,0.15);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-transition: .3s;
    transition: .3s;
}

.una-card.card .card-body > .icon {
    height: 90px;
    margin-bottom: 3px;
}

.una-card.card .card-body > div > a {
    color: #015289;
    font-weight: 600;
    font-size: 24px;
}

.una-card.card .card-title {
    margin-bottom: 12px;
    font-size: 28px;
    color: #015289;
    font-weight: 600;
}

.card-deck .una-card.card .card-text {
    font-size: 18px;
    line-height: 25px;
    font-weight: normal;
}

footer .site-nav-links > li {
    display: inline-block;
}

footer .site-nav-links > li:not(:last-child) {
    margin-right: .5rem;
}

footer .site-nav-links > li:not(:last-child):after {
    content: "|";
    color: #C0C0C0;
    margin-left: .5rem;
}

/* UNA section number list  */

.una-section-number-list {
    display: flex;
    counter-reset: list-number;
}

.una-section-number-list > div > div {
    display: flex;
    align-items: center;
}

.una-section-number-list > div > div + div {
    margin-top: 24px;
}

.una-section-number-list span:before {
    counter-increment: list-number;
    content: counter(list-number);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font: 32px Arial, sans-serif;
    border: 3px solid #015289;
    color: #015289
}

.una-section-number-list > div > div > div {
    flex-grow: 1;
    margin-left: 16px;
}

/* END UNA section number list  */

.color-limeade {
    color: #5e9732;
}

.color-scuba {
    color: #00aec5;
}

/* UNA coverage table  */

.coverage-table {
    border: 1px solid #015289;
}

.coverage-table thead tr th {
    border-top: 1px solid #015289;
    border-bottom: 1px solid #015289;
    color: #fff;
    background-color: #015289;
    vertical-align: middle;
}

.coverage-table thead tr th:not(:first-child) {
    border-left: 1px solid white;
}

.coverage-table tbody tr th {
    border: 1px solid #015289;
    vertical-align: middle;
    padding: 5px 5px 5px 10px;
}

.coverage-table td {
    border: 1px solid #015289;
    text-align: center;
    padding: 5px;
}

/* END  UNA coverage table  */

@media only screen and (max-width: 600px) {
    .coverage-table {
        font-size: 11px;
    }

    .coverage-table thead tr th,
    .coverage-table tbody tr th {
        padding: 2px;
    }
}

/* For offsetting when using a link to go to section i.e. AboutUs#history (since we using sticky nav bar)*/
section {
   /* scroll-margin-top: 120px; Disable for now since we opted to go with sliding nav bar*/
}

/* Find an Agent */

.find-an-agent input {
    /* width: 100%;*/
    border: 0;
    outline: 0;
    padding: 6px 0;
    border-bottom: 2px solid #d3d3d3;
    box-shadow: none;
    /*color: #015289;*/
    background-color: transparent;
}

.find-an-agent input ~ label {
    position: absolute;
    top: 6px;
    left: 15px;
    /*   width: 100%;*/
    color: #767676;
    transition: 0.2s all;
    cursor: text;
}

.find-an-agent input:hover,
.find-an-agent input:focus,
.find-an-agent input:valid {
    border-color: #015289;
}

.find-an-agent input:focus ~ label,
.find-an-agent input:valid ~ label {
    font-size: 12px;
    top: -21px;
    color: #015289;
}

.find-an-agent button {
    /*  font-size: 16px;*/
    /*    letter-spacing: 1px;*/
    line-height: 25px;
    border-radius: 30px;
    transition: all 0.3s ease 0s;
}

@media screen and (max-width:374px) {
    .find-an-agent input {
        width: 60px;
    }
}

/* END Find an Agent */

/*----------------------------------------*/
/* Overlay Spinner */

#loadingOverlaySpinner {
    position: fixed;
    z-index: 2000;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 120px;
    display: none
}

/* Transparent Overlay */
#loadingOverlaySpinner:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

#loadingOverlaySpinner:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 80px;
    height: 80px;
    -webkit-animation: loadingSpinner .6s infinite linear;
    -moz-animation: loadingSpinner .6s infinite linear;
    -o-animation: loadingSpinner .6s infinite linear;
    animation: loadingSpinner .6s infinite linear;
    border-left: 10px solid rgba(1,82,137,.4);
    border-right: 10px solid rgba(1,82,137,.4);
    border-bottom: 10px solid rgba(1,82,137,.4);
    border-top: 10px solid rgba(1,82,137,.9);
    border-radius: 100%;
}

@-webkit-keyframes loadingSpinner {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes loadingSpinner {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes loadingSpinner {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes loadingSpinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
/*----------------------------------------*/

#modalSignInForm.fade.show {
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
}

/* ********************* ANALYZE FOLLOWING (some came from template and other ones that not really needed, etc) ******************************* */

/* For this accordian or expand stuff, i think we should use bootstrap and not jquery-ui, it eliminates having more js code too */
[data-toggle="collapse"] .fa:before {
    content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f13a";
}

@media screen and (min-width:415px) {

    .lg-accordian {
        font-size: 1.2em
    }
}

@media screen and (max-width:414px) {
    .sm-accordian {
        font-size: 1.0em
    }
}

#accordion-container h3 {
    font-size: 1.2em;
}

@media screen and (max-width:599px) {
    #accordion-container h3 {
        font-size: 1.0em;
    }
}

/* might want to look at what i did in una-section classes up above, insted of using this... */
h1 {
    color: #015289;
    font-weight: bold;
}

/* Ones from template being used */

.bottomMargin50 {
    margin-bottom: 50px;
}

.alternate {
    background-color: #f9f9f9;
    padding-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}