html {
    scroll-behavior: smooth;
}

body {
    font-size: 2.5em;
    margin: 0;
    width:100%;
    font-family: 'FranklinGothic-Book', sans-serif;
}

.blue-box {
    color:white;
    background-color: #003B71;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* owl carousel */
.owl-carousel-wrapper {
    position: absolute;
    width: 100%;
    z-index: 0;
}

.owl-carousel-wrapper {
    height: 620px;
}

.owl-carousel-spacer {
    height: 635px;
}

@media(max-width:1500px) {
    .owl-carousel-wrapper {
        height: 500px;
    }

    .owl-carousel-spacer {
        height: 515px;
    }
}

@media(max-width:1300px) {
    .owl-carousel-wrapper {
        height: 450px;
    }

    .owl-carousel-spacer {
        height: 465px;
    }
}

.owl-carousel {
    position: absolute;
    z-index: -1;
    height: 100%;
}

.owl-stage .owl-item {
    display:flex;
    align-items: center;
    justify-content: center;
    height:100%;
    width: auto;
    flex-grow: 1;
}

.owl-item>div {
    width:100%;
    height: 100%;
    display:flex;
    flex-grow: 1;
}

.owl-item>div>img {
    overflow: hidden;
    object-fit: cover;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
}

.owl-carousel-wrapper .owl-theme .custom-nav {
	position: absolute;
	top: 25%;
    left: 0;
    height: 100%;
	right: 0;
}

.owl-carousel-wrapper .owl-theme .custom-nav .owl-prev, 
.owl-carousel-wrapper .owl-theme .custom-nav .owl-next {
	position: absolute;
	height: 50%;
    background-color: rgba(255, 255, 255, .4);
	border: none;
	z-index: 10;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background-color: rgba(242, 242, 242, .7) !important;
}

.owl-carousel-wrapper .owl-theme .custom-nav .owl-prev i, 
.owl-carousel-wrapper .owl-theme .custom-nav .owl-next i {
	font-size: 6rem;
    color: #64A70B;
}

.owl-carousel-wrapper .owl-theme .custom-nav .owl-prev {
	left: 0;
}

.owl-carousel-wrapper .owl-theme .custom-nav .owl-next {
	right: 0;
}

.owl-dots .active span {
    background: #64A70B !important;
}

.owl-dot span {
    height: 15px !important;
    width: 15px !important;
}

/* header section */
.header {
    padding-top: 2%;
    padding-bottom: 2%;
    background-color:#003B71;
    display: flex;
    flex-direction: row;
}

.header-nav {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    font-weight: bold;
    padding-right: 5%;
}

.header-nav.left {
    justify-content: flex-start;
}

.header-nav-option {
    display: block;
    text-align:center;
    padding-left:5%;
}

.header-nav-option>a,
.header-nav-option>a span {
    color:white !important;
}

.dropdown-menu li {
    font-size: 1.25em;
}

.support-help-option {
    white-space: nowrap;
}

/* welcome message section */
.welcome-wrapper {
    flex-direction: column;
    width:80%;
}

.welcome-wrapper div {
    width: 60%;
}

.welcome-wrapper div *
{
    text-align: center;
}

.welcome-title {
    font-weight: bolder;
    font-size:1.55em;
}

.welcome-sub-text * {
    color: black;
    font-size: 1.2em;
    font-style: italic;
}


/* edge-product section */
.edge-product {
    display: flex;
    flex-direction: column;
    position:relative;
    margin: 4% 4% 0% 4%;
    width: 45%;
    background-color: rgba(255, 255, 255, 0);

    -webkit-box-shadow: none !important;
    box-shadow: none !important;

    overflow-y: hidden;
    z-index: 2;

    -webkit-box-shadow: 0px 6px 14px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 6px 14px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 6px 14px 2px rgba(0,0,0,0.1);
}

.edge-product * {
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@media(max-width:700px) {
    .edge-product {
        width:85%;
    }
    .edge-product-title h2,
    .edge-product-more * {
        font-size: .9em;
    }

}

.edge-product-title {
    padding-bottom: 1.5%;
}

.edge-product-title a h1 {
    font-size: 2em;
    font-weight: bolder;
}

.edge-product-title h2 {
    font-weight: bolder;
    font-size: 3em;
}

.edge-product-more {
    position: absolute;
    bottom:10%;
    width:80%;
    text-align: center;
}

.edge-product-more * {
    text-shadow: none;
}

.edge-product-more a {
    text-decoration: none;
}

.edge-product-description {
    font-size: 1.3em;
}

.more-portals {
    text-align: center;
}

/* login modal */
.modal-content {
    border-radius: 0;
}

.modal-title {
    text-align: left;
    color: #003b71;
    font-weight: 900;
}

.modal-header {
    background-color:#f0feff;
    border: none;
}

.modal-body {
    padding-left: 25px;
    padding-right: 25px;
}

.modal-body p {
    font-size: 1.75rem;
    color: black;
}

.modal-welcome {
    margin-bottom: 1rem;
}

.login-support-link,
.login-support-link a {
    text-align: right;
    font-size: 1.5rem;
    padding-right: 8px;
}

.error-placement h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

.error-placement {
    font-size: 1.25rem;
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: 15px;
    border-bottom: 2px solid #003b71;
}

.error-placement ul {
    padding: 5px 25px;
}

.modal-body-form {
    margin-bottom: 0;
    padding-bottom: 0;
}

.control-label {
    color: #003B71;
    font-size: 1.8rem;
    font-weight: 900;
}

.login-modal-links {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.modal-link, .modal-link:hover, .modal-link:focus {
    padding-left: 0;
    padding-right: 0;
    color: black;
    font-size: 1.5rem;
}

.login-button-group {
    margin: 0;
    text-align: center;
}

.modal-footer {
    border-top: 1px solid #003B71;
    padding: 25px;
}

/* some text colors */
h1, h2, h3, h4, h5,
.header-nav *,
.welcome-wrapper * {
    color: #003B71;
}

.blue-box-title {
    color: white;
}

/* Buttons */
.btn-primary {
    background-color: #5bb75b;
    background-image: linear-gradient(to bottom,#5bb75b 0,#419641 100%);
    border: none;
    color: #f1f9ff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:hover {
    background-color: #419641;
    border: none;
}

.btn-secondary {
    background-color: #b1b2af;
    background-image: linear-gradient(to bottom,#b1b2af 0,#4a4a4a 100%);
    border: none;
    color: #f1f9ff;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:active:hover {
    background-color: #4a4a4a;
    background-image: none;
    border: none;
    color: #f1f9ff;
}

.product-login {
    width: 80%;
}

/* Latest developments section */
.development {
    padding-top: 2%;
    padding-bottom: 2%;
    width:80%;
}

.development-background-grey {
    background-color: #F2F2F2;
}

.development-background-lightgrey {
    background-color: #F7F7F7;
}

.text-right {
    text-align: right;
    padding-left:15%;
}

.text-left {
    text-align: left;
    padding-right: 15%;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.latest-developments-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.latest-development {
    width: 50%;
    display:flex;
    flex-direction: row;
}

.latest-development h3 {
    font-size: 1.15em;
}

.development {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.development-image-container {
    width: 20%;
    padding:4%;
}

.development-image-container img {
    max-height: 100%;
    max-width: 100%;
}

.development h3 {
    font-weight: bold;
    padding-bottom: 2%;
}

/* Product section 2 */
.product {
    width: 75%;
    display: flex;
    flex-direction: row;
}

.product > * {
    width:50%;
}

.product-text {
    padding: 5%;
    font-size: 1.2em;
}

.product div {
    font-size: 1.1em;
}

.product-image-wrapper {
    display: flex;
}

.product-image-container {
    background-color: #FAFAFA;
}

.product-image-container img {
    overflow: hidden;
    object-fit: cover;
    height: 100%;
}

.product-title {
    font-weight:bolder;
    margin-top:0;
    margin-bottom:5%;
    font-size: 2.2em;
}

.product-login-wrapper {
    text-align: center;
    padding-top: 1.5em;
}

/* call back section*/
.callback-form form {
    flex-direction: row;
    flex-grow: 0;
    width: 60%;
}

.callback-form form input {
    width: 80%;
    margin-right: 2%;
    margin-left: 2%;
    height: 50px;
}

.callback-header {
    flex-direction: column;
}

.callback-header>* {
    font-size:2em;
}

.callback-header > h2 {
    font-weight:bolder;
}


/* css for the hrs with the text in the middle. Or atleast that's the way they look. I'd just look at an example sorry. -bpoep */
.text-with-horizontal-line {
    overflow: hidden;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.6em;
    color: #003B71;
    background: white;
}

.text-with-horizontal-line:before,
.text-with-horizontal-line:after {
    background-color: #003B71;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.text-with-horizontal-line:before {
    right: 0.5em;
    margin-left: -50%;
}

.text-with-horizontal-line:after {
    left: 0.5em;
    margin-right: -50%;
}

.page-separator {
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: #003B71;
}

/* footer image */
.footer-logo {
    padding-top: 2.5%;
}

/* Mid size screen adjustments */
@media(max-width:1400px) {
    .welcome-wrapper>* {
        font-size: 1em;
    }
}

@media(max-width:1200px) {
    body {
        font-size: 2em;
    }
}


/* Mobile view */
@media(max-width:900px) {

    /* body */
    body {
        font-size: 1.8em;
    }

    /* header nav */
    .header-nav {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .header-nav-option {
        width: 25%;
    }

    .welcome-wrapper div {
        width:80%;
    }

    .owl-carousel-wrapper {
        height: 320px;
    }

    .owl-carousel-spacer {
        height: 335px;
    }

    .welcome-wrapper * {
        font-size: 1.2em;
    }

    /* Latest developments area */
    /* had to do something a touch weird for consistency's sake so I'll explain it. "The Edge Latest Developments" span was too wide. This happens because the text inside the span cannot occupy one full line so it has to wrap to the next line. This isn't abnormal behavior but it has an unideal consequence as the border does not show for this element as the width of the span is the width of the entire "section" of the page that this element sits on. To fix this issue we need to more explicityly set the width of the elements that can wrap to the next line. We still want the rest to behave normally though (until they wrap the line too) */
    #latestDevelopmentsBadWrap {
        width: 80%;
    }

    .latest-developments-wrapper {
        flex-direction: column;
    }

    .latest-development {
        width:100%;
    }

    .text-right {
        padding-left: 5%;
    }

    .text-left {
        padding-right: 5%;
    }

    .development-image-container {
        width:40%;
        padding: 10%;
    }

    .development {
        width: 60%;
    }

    /* product area */
    .product-image-container {
        display:none;
    }

    .product-text {
        width:100%;
    }

    /* callback form area */
    .callback-form form {
        width:90%;
    }
}

@media(max-width: 750px) {
    .welcome-wrapper {
        top: 30%;
    }
}

@media(max-width: 550px) {
    body {
        font-size: 1.5em;
    }
    
    .welcome-wrapper {
        top: 28%;
    }
}

@media(max-width: 350px) {
    .welcome-wrapper {
        top: 18%;
    }
}