.crrs-sec {}

/*
.navbar-light .navbar-nav .nav-link {
    font-size: 1.3vw;
    color: #333;
}
*/
.contact_results .success {
    color: forestgreen
}

.crrs-sec .crrs-cont {
    color: #fff;
    padding: 190px 0 60px;
    background-image: url(../imgs/careers.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-attachment: fixed
}

.crrs-sec .crrs-cont:before {
    content: '';
    background-color: #000d6299;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 0
}

.crrs-sec .crrs-cont h1 {
    font-size: 38px;
    margin: 0;
    z-index: 3;
    position: relative
}

.crrs-sec .crrs-cont h1 strong {
    color: #ffcd00;
    font-size: 125%
}

.crrs-sec .crrs-cont span {
    display: inline-block;
    margin: auto;
    width: auto;
    font-size: 150%;
    margin: 0;
    padding: 0 30px;
    color: #fff;
    opacity: .87;
}

.crrs-req {
    display: grid;
    overflow: hidden;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

.crrs-req .req-cont {
    /*    width: 70%;*/
    display: inline-block;
    padding: 0 60px
}


.crrs-req p {
    font-size: 18px;
    margin-top: 60px
}

.crrs-req .btn-cont {
    background-color: #00003c;
    height: 100%;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../imgs/careers.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative
}

.crrs-req .btn-cont:before {
    content: '';
    background-color: #000d6299;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 0
}

.crrs-req .crrs-btn {
    border: none;
    outline: none;
    background-color: #ffcd00;
    color: #000d62;
    border-radius: 4px;
    font-size: 24px;
    padding: 5px 60px;
    font-weight: bold;
    margin: 45px auto 30px;
    display: block;
    transition: .1s ease-in-out;
    z-index: 1
}

.crrs-table {
    border-top: 1px solid #ddd;
}

.crrs-table .crrs-title {
    font-size: 42px;
    margin: 0 0 30px
}

.crrs-table td,
.crrs-table th {
    padding: 10px 25px;
    vertical-align: middle;

}

.md-form .prefix ~ input::file-selector-button {
    color: #000d62;
    background-color: #ffcd00;
    padding: 2px 10px;
    margin: 10px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

.main-cont img {
    filter: brightness(0) invert(1);
    margin: 0
}

.crrs-table table {
    background-color: #fff;
    color: #333;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

.crrs-table table tr:first-of-type {
    background-color: #000d62;
    color: #fff
}

@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --c1: rgba(168, 239, 255, 1);
    --c2: rgba(168, 239, 255, 0.1);
}

.txt-anim {
    border: 0.35rem solid;
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
    animation: borderRotate var(--d) linear infinite forwards;
}

.txt-anim:nth-child(2) {
    border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
    animation: borderRadial var(--d) linear infinite forwards;
}

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }

    40% {
        --gradX: 100%;
        --gradY: 100%;
    }

    60% {
        --gradX: 50%;
        --gradY: 100%;
    }

    80% {
        --gradX: 0%;
        --gradY: 50%;
    }

    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
}