BODY {
    color: #3B505C;
    counter-reset: list;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-default {
    color: #3B505C !important;
}

.text-lightblue {
    color: #009FE3 !important;
}

@media (max-width: 991.98px) {
    .img--fit-on-mobile {
        width: 100%;
    }
}

/*  inner pages top bar colors  */

.top-bar-domains {
    background: linear-gradient(120deg, #00496d 0%, #00aeef 100%);
    /*background: linear-gradient(120deg, #d53369 0%, #daae51 100%);*/
}

.top-bar-ssl {
    background: linear-gradient(120deg, #00496d 0%, #00aeef 100%);
    /*background: linear-gradient(120deg, #F1E871 0%, #10BBB9 100%);*/
}

.top-bar-bp {
    background: linear-gradient(120deg, #00496d 0%, #00aeef 100%);
    /*background: linear-gradient(120deg, #FFCE3C 0%, #F68A4C 100%);*/
}

.top-bar-hosting {
    background: linear-gradient(120deg, #00496d 0%, #00aeef 100%);
    /*background: linear-gradient(120deg, #2c3390 0%, #d860a1 100%);*/
}

.top-bar-cyber {
    background: linear-gradient(120deg, #00496d 0%, #00aeef 100%);
    /*background: linear-gradient(120deg, #f1e871 0%, #6cbf5b 100%);*/
}

.top-bar-default {
    background: linear-gradient(120deg, #00496d 0%, #00aeef 100%);
    /*background: linear-gradient(120deg, #00aeef 0%, #00496d 100%);*/
}



/* quotes carousel styles */

.quotes-carousel {
    height: 600px;
}


@media (min-width: 576px) {
    .quotes-carousel {
        height: 670px;
    }
}

@media (min-width: 768px) {
    .quotes-carousel {
        height: 650px;
    }
}

@media (min-width: 992px) {
    .quotes-carousel {
        height: 450px;
    }
}

@media (min-width: 1200px) {
    .quotes-carousel {
        height: 400px;
    }
}



.carousel-inner .carousel-item {
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.sn-quote-icon-left {
    padding: 15px;
}

.sn-quote-icon-right {
    padding: 15px;
}


.carousel-quotes {
    min-height: 14em;
    color: #ffffff;
}

.carousel-caption {
    margin-bottom: 10%;
}

.bg-darkblue {
    background-color: #1F628A;
}

/* section id styles */

.diagonal-grey {
    background-color: #34ADFF;
    background-image: -webkit-linear-gradient(100deg, #f9f9f9 50%, #ffffff 50%);
}



#what-they-say {
    background-color: #009FE3;
}

#client-testamonials {
    background-color: #f1f1f1;
}

#product-highlight {
    background-color: #F2F6F8;
}

#product-highlight-bar {
}


#about-safenames {
}

#idp-features {
}

#industry-clients {
    background-color: #ffffff;
}

#five-key-features {
    background-color: #ffffff;
}

#calltoaction-bottom {
    background: linear-gradient(355deg, rgba(2,67,105,0.92), rgba(2,67,105,0.92) ),
    /* bottom, image */
    url(/images/default-source/default-album/sn-dots-background.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, 100% 10%;
    background-size: 100%, cover;
}

.header__joinus {
    background-image: url('/images/default-source/default-album/jobs-webpage.jpg?sfvrsn=680cba2_2');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #00adef;
 
}

.header__joinus--heightfix {
    min-height: 200px;
}

@media (min-width: 992px) {
    .header__joinus--heightfix {
          min-height: 375px;
    }

    .header__joinus {
        background-size: 75%;
    }
}


#secondary-cta {
    background-color: #ffffff;
}

.bg--primary-blue {
    background-color: #004368;
}

.bg--secondary-blue {
    background-color: #009FE3;
}

#footer {
    background-color: #444;
}

.social-icon {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

    .social-icon > a > img {
        padding: 5px;
        padding-left: 0px;
        width: 35px;
        transition: all 0.4s ease;
        filter: grayscale(95%);
    }

    .social-icon > a:hover > img {
        filter: grayscale(0%);
    }

.page-link {
    color: #009FE3;
}

.bg-f9 {
    background-color: #f9f9f9;
}

.badge-link--grey {
    background-color: #d9d9d9;
    color: #757575;
    font-weight: 300;
}

.pagination {
padding-left: 50%;
}


.blue-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #00496d, #00aeef);
    opacity: .3;
    z-index: 3;
}

.hero-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #00496d, #00aeef);
    opacity: .95;
    z-index: 1;
}



.jumbotron {
    margin-bottom: 0px !important;
}

.product-highlight-bar__subhead {
    font-size: 0.9em;
}

.product-highlight-bar__link {
    font-size: 0.7em;
    font-weight: 600;
}

.skew-corner {
    position: relative;
}

    .skew-corner::after {
        content: " ";
        position: absolute;
        display: block;
        width: 200px;
        height: 100%;
        top: 0;
        left: -35%;
        z-index: -1;
        background: #FFFFFF;
        transform-origin: bottom left;
        -ms-transform: skew(-30deg, 0deg);
        -webkit-transform: skew(-30deg, 0deg);
        transform: skew(-30deg, 0deg);
    }

.a-container:hover {
    text-decoration: none;
    box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);
    border: 1px solid #ffffff;
}

.a-arrow {
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.a-container:hover .a-arrow {
    margin-right: 50px;
}



/* styles for the case study page */

.case-study__feature-box {
    z-index: 99;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 992px) {
    .case-study__feature-box {
        transform: translateX(-80%);
    }
}

/* this style sets only right borders on med and up screen sizes and bottom borders on lower */
@media (min-width: 992px) {
    .col-border:not(:last-child) {
        border-right: 1px solid rgba(0,0,0,0.02);
    }

    .col-border + .col-border {
        border-left: 1px solid rgba(0,0,0,0.02);
        margin-left: -1px;
    }
}

@media (max-width: 991.98px) {
    .col-border:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,0.02);
    }
}


@media (min-width: 992px) {
    .col-border-white:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    .col-border-white + .col-border-white {
        border-left: 1px solid rgba(255,255,255,0.1);
        margin-left: -1px;
    }
}

@media (max-width: 991.98px) {
    .col-border-white:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}



@media (min-width: 768px) {
    .four-boxes:nth-child(1) {
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        border-left: 0px;
        border-top: 0px;
    }

    .four-boxes:nth-child(2) {
        border-bottom: 1px solid #e9e9e9;
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
    }

    .four-boxes:nth-child(3) {
        border-right: 1px solid #e9e9e9;
        border-top: 0px;
        border-left: 0px;
        border-bottom: 0px;
    }

    .four-boxes:last-child {
        border: 0px;
    }
}

.four-boxes {
    border-bottom: 1px solid #e9e9e9;
}

.border-right-light {
    border-right: 1px solid #f4f4f4;
}


.mh-250px {
    min-height: 250px;
}

.bg-img-center {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

OL > LI {
    margin-bottom: 1em;
}


.legal-list {
    counter-reset: item;
}

    .legal-list li {
        display: block;
        position: relative;
    }

        .legal-list li:before {
            content: counters(item, ".")".";
            counter-increment: item;
            position: absolute;
            margin-right: 100%;
            right: 10px; /* space between number and text */
        }


.counter::before {
    counter-increment: list;
    content: counter(list)'. ';
    position: relative;
    font-size: 2.2em;
}

.tick-list__item {
    list-style-type: none !important;
    list-style-image: url("/images/default-source/default-album/tick.png");
    padding-left: 5px;
    margin-bottom: 0.9em;
}

.tick-list__item--circle {
    list-style-type: none !important;
    list-style-image: url("/images/default-source/default-album/tick-circle.png");
    padding-left: 5px;
    margin-bottom: 0.9em;
}


.tick-list__item--blue {
    list-style-type: none !important;
    list-style-image: url("/images/default-source/default-album/tick-lightblue.png");
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 40px;
    margin-bottom: 0.9em;
}


.tick-list__item--white {
    list-style-type: none !important;
    list-style-image: url("/images/default-source/default-album/tick-white.png");
    padding-left: 0.5em;
    margin-bottom: 0.9em;
}

.highlight-list {
    list-style-type: none !important;
    font-size: 1.5em;
    color: #3B505C;
}

    .highlight-list > LI {
    }

.highlight-list__number {
    background-color: #687E9C;
    color: #ffffff;
    font-size: 1em;
    font-weight: 800;
    min-width: 30px;
}

.highlight-list__percent {
    font-weight: 800;
    color: forestgreen;
}


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

    .dot-list::before {
        content: "\25CC";
        color: #009FE3;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

.hosting-product-card {
    background-color: #EEF3F4;
}

.card-footer {
    border: 0px !important;
    border-radius: none !important;
}

.sn-icon {
    width: 42px;
    opacity: 0.7;
}

.icon-bubbles-left {
    position: relative;
    background-color: #E0F5FA;
    border-radius: 50%;
}

.icon-bubbles-right {
    position: relative;
    background-color: #E0F5FA;
    border-radius: 50%;
}


    .icon-bubbles-right::before {
        content: '';
        position: absolute;
        top: 40px;
        left: -53px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #E0F5FA;
    }

    .icon-bubbles-right::after {
        content: '';
        position: absolute;
        top: 5px;
        left: -10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #E0F5FA;
    }

.icon-bubbles-left::before {
    content: '';
    position: absolute;
    bottom: 40px;
    right: -53px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #E0F5FA;
}

.icon-bubbles-left::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #E0F5FA;
}





.hosting-product-card.l1 > .card-title {
    color: #297fb8;
}

.hosting-product-card.l2 > .card-title {
    color: #16a086;
}

.hosting-product-card.l3 > .card-title {
    color: #f39c11;
}

.hosting-product-card.l4 > .card-title {
    color: #841BA0;
}

.hosting-product-card.l1 {
    border-top: 4px solid #297fb8;
}

.hosting-product-card.l2 {
    border-top: 4px solid #16a086;
}

.hosting-product-card.l3 {
    border-top: 4px solid #f39c11;
}

.hosting-product-card.l4 {
    border-top: 4px solid #841BA0;
}

.btn-t1 {
    background-color: #297fb8;
    color: #ffffff;
}

    .btn-t1:hover {
        background-color: #398EC7;
        color: #ffffff;
    }

.btn-t2 {
    background-color: #16a086;
    color: #ffffff;
}

    .btn-t2:hover {
        background-color: #33B89F;
        color: #ffffff;
    }

.btn-t3 {
    background-color: #f39c11;
    color: #ffffff;
}

    .btn-t3:hover {
        background-color: #F3B148;
        color: #ffffff;
    }

.btn-t4 {
    background-color: #841BA0;
    color: #ffffff;
}

    .btn-t4:hover {
        background-color: #9C34B8;
        color: #ffffff;
    }


.statbox {
    position: relative;
}

.statbox__callout {
    position: absolute;
    font-weight: 800;
    background-color: #004368;
    display: block;
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    color: #ffffff;
    left: 50%;
    transform: translateX(-50%);
    top: -28px;
}

.article-outline {
    box-shadow: 0 20px 60px -12px rgba(50,50,93,.15), 0 18px 36px -18px rgba(0,0,0,.05), 0 -25px 36px -8px rgba(0,0,0,.02);
}

.bg-nodes {
    background: linear-gradient(130deg, rgba(114,189,205,0.5), rgba(240,249,255,0.80) ),
    /* bottom, image */
    url(/ResourcePackages/Safenames/assets/dist/images/big-nodes.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, top -150px left -200px;
    background-size: 100%, 1000px;
}

.bg-map {
    background: linear-gradient(130deg, rgba(114,189,205,0.94), rgba(240,249,255,0.98) ),
    /* bottom, image */
    url(/ResourcePackages/Safenames/assets/dist/images/dot-map.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, 0%;
    background-size: 100%, cover;
}

.bg-legal {
    background: linear-gradient(355deg, rgba(104,126,156,0.90) 0%, rgba(104,126,156,0.99) 100%),
    /* bottom, image */
    url(/ResourcePackages/Safenames/assets/dist/images/bg-sn-cog.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, 0%;
    background-size: 100%, cover;
}

.bg-question {
    background: linear-gradient(130deg, rgba(0,159,227,0.9), rgba(0,159,227,0.9) ),
    /* bottom, image */
    url(/ResourcePackages/Safenames/assets/dist/images/bg-sn-cog.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, center;
    background-size: 100%, cover;
}


.feature-box--bg-cog {
    background-color: #ffffff;
    background-image: url("/ResourcePackages/Safenames/assets/dist/images/feature-box-cog.svg");
    background-repeat: no-repeat;
    background-position: center bottom -80px;
}

/* custom boilerplate styles */


H1 {
    font-size: 2.9em;
    font-weight: 600 !important;
    font-family: 'Poppins', Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.tagline {
    font-size: 1.3em;
    font-weight: 200;
}

/* shrink carousel fonts on < med sizes */
@media (max-width: 991.98px) {
    H1 {
        font-size: 2.1em;
    }

    P.tagline {
        font-size: 1em;
    }
}

.header-divider::after {
    content: '';
    display: block;
    width: 15%;
    height: 5px;
    background-color: rgba(0,174,239,0.3);
    margin-top: 10px;
}

H2 {
    line-height: 1.4;
	font-weight: 500 !important;
}

@media (max-width: 575.98px) {
    H2 {
        font-size: 1.5rem;
    }
}

H3 {
    font-family: 'Poppins', Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 500;
	font-size: 1.4em;
}

H4 {
    font-size: 2.8em;
    font-weight: 600 !important;
}

H5 {
    font-size: 1em;
    color: #f3f3f3;
    font-weight: 300;
}

H6 {
    font-family: 'Poppins', Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 600;
    font-size: 1.3em;
}



A {
    color: #009FE3;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


.link__hidden_link::after {
    content: '\2192';
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.link__hidden_link:hover::after {
    margin-left: 15px;
}



h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.8rem;
}



p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.7;
}

.font-weight-bold {
    font-weight: 500 !important;
}




.gallery-image {
    margin: -15px;
    padding: 15px 0;
}

.small-header {
    font-size: 1.3em;
}

.x-small {
    font-size: 0.5em;
}

.header--xxsmall {
    font-size: 0.73em !important;
}


blockquote {
    font-size: 2.4rem;
    line-height: 1.3;
    color: #FFFFFF;
    font-weight: 600;
	position: relative;
}

blockquote::before {
	content: "\201C";
	position: absolute;
	left: -20px;
}

@media (max-width: 575.98px) {
    blockquote {
        font-size: 1.8rem;
    }
}


smallquote {
    font-size: 1.1em;
    color: white;
}

.left-highlight {
    border-left: 6px solid #009FE3;
    padding-left: 1em;
}

.w-85 {
    width: 85% !important;
}

.border-lightgrey {
    border: 1px solid #EBEBEB;
}

.border-faded {
    border: 1px solid rgba(255,255,255,0.3);
}

.form-control-sm {
    background-color: transparent;
    border: 0px;
    border-radius: 0;
}

.header__input {
    width: 120px;
    color: #ffffff;
    border-bottom: 2px solid #CCCCCC;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    -o-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

    .header__input:focus {
        border-color: #009FE3 !important;
        box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
        outline: 0px !important;
        -webkit-appearance: none;
        box-shadow: none !important;
    }


    .header__input::placeholder {
        color: rgba(255,255,255,0.50);
        opacity: 1; /* Firefox */
    }

    .header__input:-ms-input-placeholder {
        color: rgba(255,255,255,0.50);
    }

    .header__input::-ms-input-placeholder {
        color: rgba(255,255,255,0.50);
    }


.default__input {
    border-bottom: 2px solid #e1e1e1;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    -o-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

    .default__input:focus {
        border-color: #009FDF !important;
        border-bottom: 2px solid #009FDF;
        outline: 0px !important;
        -webkit-appearance: none;
        box-shadow: none !important;
    }


    .default__input::placeholder {
        color: rgba(0,13,251,0.50) !important;
        opacity: 1; /* Firefox */
    }

    .default__input:-ms-input-placeholder {
        color: rgba(0,13,251,0.50) !important;
    }

    .default__input::-ms-input-placeholder {
        color: rgba(0,13,251,0.50) !important;
    }

.form-control-lg {
    border-radius: 0px !important;
}




.dropdown .dropdown-menu {
    animation-name: example;
    animation-duration: 0.2s;
}

@keyframes example {
    from {
        opacity: .2
    }

    to {
        opacity: 1;
    }
}



.domain-color {
    color: #00a2de;
}

.brand-color {
    color: #fec83f;
}

.hosting-color {
    color: #784196;
}

.security-color {
    color: #ed5b34;
}


.feature--color-domain {
    width: 100%;
    height: 4px;
    /*background: linear-gradient(45deg, #00aeef, #00567b); */
    background-color: #00aeef;
}

.feature--color-brand {
    width: 100%;
    height: 4px;
    /* background: linear-gradient(45deg, #00aeef, #00567b); */
    background-color: #00aeef;
}

.feature--color-hosting {
    width: 100%;
    height: 4px;
    /* background: linear-gradient(45deg, #00aeef, #00567b); */
    background-color: #00aeef;
}

.feature--color-cyber {
    width: 100%;
    height: 4px;
    /* background: linear-gradient(45deg, #00aeef, #00567b); */
    background-color: #00aeef;
}

.feature__link {
    white-space: nowrap;
    font-size: 1em;
    position: absolute;
    bottom: 15px;
}

    .feature__link A {
        font-weight: 600;
        color: #3B505C;
    }

        .feature__link A:hover {
            padding-left: 10px;
        }


/* news and events tiles */

.news-tile {
    min-height: 23rem;
}

.news-tile__wrapper {
    position: relative;
}

.news-tile__title {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    color: #ffffff;
    background-color: #1F628A;
    transition: all 0.2s ease-out;
}

.news-tile__subtitle {
    display: block;
    font-size: 0.8em;
    color: #ffffff;
    opacity: 0.7;
}

.news-tile__header {
    font-size: 1.1em;
    font-weight: 600;
}

.news-tile__image {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    transition: all 0.4s;
    background-position: center;
    background-size: cover;
}


.news-tile__button {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 2.0em;
    padding-right: 0.3em;
    padding-bottom: 5px;
    transition: all 0.2s ease-out;
}

.news-tile__link {
}

    .news-tile__link:hover .news-tile__title {
        padding-bottom: 25px;
        background-color: #155174;
    }

    .news-tile__link:hover .news-tile__image {
        transform: scale(1.06);
    }

    .news-tile__link:hover .news-tile__button {
        transform: translateX(-5px);
        transform-origin: center;
    }


    .news-tile__link:hover {
        background-position: 0px -20px;
    }

/* news and events tiles end */

.btn-primary {
    color: #fff;
    background-color: #1F628A;
    border-color: #1F628A;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #35779F;
        border-color: #35779F;
    }

    .btn-primary:focus, .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #0062cc;
        border-color: #005cbf;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
        }


.btn-outline-primary {
    color: #1F628A;
    background-color: none;
    border-color: #1F628A;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #1F628A;
        border-color: #1F628A;
    }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #0062cc;
        border-color: #005cbf;
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
        }


@media (max-width: 767.98px) {

    .btn-lg {
        font-size: 0.9em !important;
    }
}


.feature--bottom-border {
    border-bottom: 8px solid #009FDF;
}

.feature--left-border {
    border-left: 6px solid #009FDF;
}



.services-box__link {
    color: #3B505C;
}

    .services-box__link:hover {
        color: #009FE3;
        text-decoration: none;
        box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);
    }

        .services-box__link:hover .border-lightgrey {
            border: none !important;
        }

    .services-box__link .btn-noborder {
        color: #3B505C;
    }

    .services-box__link:hover .btn-noborder {
        color: #009FE3;
        margin: 0px !important;
    }



.btn-noborder {
    padding-left: 0px;
    font-size: 1.5em;
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

    .btn-noborder:hover {
        margin-left: 10px;
    }

.btn-noborder-sm {
    color: #004368;
    padding-left: 0px;
    font-size: 1em;
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
    font-weight: 800;
    display: block;
    white-space: nowrap;
}



    .btn-noborder-sm:hover {
        margin-left: 10px;
        color: #004368;
    }


.btn--noborder-white {
    border: none;
    color: #FFFFFF;
    font-size: 0.9rem;
    white-space: nowrap;
}

.sn-btn__icon {
    width: 22px;
}



.font-large {
    font-size: 130%;
}

.font-xl {
    font-size: 150%;
}

.icon-16 {
    width: 16px;
}

.icon-28 {
    width: 28px;
}

.icon-42 {
    width: 42px;
}

.icon-58 {
    width: 58px;
}



.skew-image {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 0);
}

.img-drop-r {
    position: relative;
    top: 1.9rem;
    right: 1.8rem;
}

.img-drop-l {
    position: relative;
    top: -1.9rem;
    right: -1.8rem;
}

.hover-grow {
    transition: all 0.3s ease;
}

    .hover-grow:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(0.5);
    }

.blue-highlight-box {
    height: 100%;
    background-image: linear-gradient(160deg, #fdfbfb 0%, #CDE0E9 100%);
}

.bg-bluefade {
    background: rgb(0,159,223);
    background: linear-gradient(17deg, rgba(0,174,239,1.00) 0%, rgba(0,73,109,1.00) 100%);
}

.bg-bluefade-circles {
    background-color: rgba(0,73,109,1.00);
}


.circles {
}

.bg-lightblue {
    background-color: #EEF3F4;
}

.bg-white-20 {
    background-color: rgba(255,255,255,0.2);
}

.bg-greyfade {
    background: rgba(199,199,199,1.00);
    background: -webkit-linear-gradient(120deg, rgba(199,199,199,1.00) 0%, rgba(241,241,241,1.00) 100%);
    background: -o-linear-gradient(120deg, rgba(199,199,199,1.00) 0%, rgba(241,241,241,1.00) 100%);
    background: linear-gradient(120deg, rgba(199,199,199,1.00) 0%, rgba(241,241,241,1.00) 100%);
}

.bg-grey {
    background-color: #f3f3f3;
}


.box-shadow {
    box-shadow: 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025);
}

.box-shadow-sm {
    -webkit-box-shadow: -1px 3px 20px -6px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 3px 20px -6px rgba(0,0,0,0.15);
    box-shadow: -1px 3px 20px -6px rgba(0,0,0,0.15);
}

.box-shadow-offset {
    box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
}

.pseudo-shadow::after {
    content: '';
    display: block;
    position: absolute;
    width: 70%;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    filter: blur(0.6rem);
}

.bg-safenames-callout {
    background-color: #009FE3;
}

.border-left-7 {
    border-left: 7px solid #f1f1f1;
}


.bgfilled {
    background-color: transparent;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .bgfilled.scrolled {
        background-color: #1F628A;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

.dropdown-menu {
    font-size: 0.8em;
    border-radius: 0px !important;
}

.dropdown-item-text {
    color: #0099C8;
}

.card {
    background-color: transparent;
    border: none;
    overflow: hidden;
}

.card-img-top {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.card__hidden_panel {
    opacity: 1;
    transform: translateY(80%);
    transition: all 0.3s ease-in-out;
    position: relative;
}

    .card__hidden_panel::before {
        content: '\203A';
        font-size: 50px;
        position: absolute;
        z-index: 99;
        color: white;
        top: -50px;
        right: 50%;
        transform: rotate(-90deg);
    }

    .card__hidden_panel:hover {
        opacity: 1;
        transform: translateY(0%);
    }

ol.carousel-indicators li,
ol.carousel-indicators li.active {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.2rem;
    border: 0;
    background: #ffffff;
}

ol.carousel-indicators li {
    background: #d3d3d3;
}

ol.indicators--sm li,
ol.indicators--sm li.active {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0.2rem;
    border: 0;
    background: #ffffff;
}
/* other custom styles */

.product_highlight__carousel {
    height: 100px !important;
}


.product_highlight__image {
    display: block;
}

.product_highlight__image-wrapper {
    position: absolute;
    top: 15px;
    left: calc(100% - 300px);
}

.product_highlight__title {
    display: block;
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 10px;
}

.product_highlight__description {
    display: block;
    font-size: 1em;
    font-weight: 600;
}

.product_highlight__body-text {
    font-size: 1em;
}


.nav-link-footer {
    color: #969696 !important;
}

    .nav-link-footer:hover {
        color: white !important;
    }

.nav-pills .nav-link, .nav-pills .show > .nav-link {
    color: #3B505C;
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: #BCE3F4;
        border: 1px solid #9FD2E8;
        color: #009FDF;
    }

.list-group-item:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.list-group-item:last-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.list-group-item:hover {
    transform: scale(1.08, 1.08);
    background-color: #00476b;
    color: #ffffff;
}

.regulation-list {
    color: #27B4EF;
    font-weight: 600;
    text-transform: uppercase;
}

/* form styles */
.underline-input {
    color: #ffffff !important;
    border-bottom: 1px solid #01b8f0;
    box-shadow: 0 1px 0 0 #4dd0e1;
    background-color: transparent;
}

    .underline-input:focus {
        color: #ffffff !important;
        border-bottom: 1px solid #01b8f0;
        box-shadow: 0 1px 0 0 #4dd0e1;
        background-color: transparent;
    }

    .underline-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #D8D8D8;
        opacity: 1; /* Firefox */
    }

    .underline-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #D8D8D8;
    }

    .underline-input::-ms-input-placeholder { /* Microsoft Edge */
        color: #D8D8D8;
    }


.faded-2 {
    opacity: 0.2;
}

.faded-3 {
    opacity: 0.3;
}

.faded-6 {
    opacity: 0.6;
}

.faded-8 {
    opacity: 0.8;
}

.card-rollover {
    transition: all 0.2s;
}

    .card-rollover:hover {
        transform: translateY(10px);
        -webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.07);
        -moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.07);
        box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.07);
    }




/* setting the top navbar styles and colours */


.icon-bar {
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    display: block;
    transition: all 0.2s;
    margin-top: 4px
}

.navbar-toggler {
    border: none;
    background: transparent !important;
}

    .navbar-toggler .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
    }

    .navbar-toggler .middle-bar {
        opacity: 0;
    }

    .navbar-toggler .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

    .navbar-toggler.collapsed .top-bar {
        transform: rotate(0);
    }

    .navbar-toggler.collapsed .middle-bar {
        opacity: 1;
    }

    .navbar-toggler.collapsed .bottom-bar {
        transform: rotate(0);
    }



.navbar-top--greyblue {
    background-color: #687E9C;
}

.navbar-main--lightblue {
    background-color: #009FE3;
}



@media (min-width: 992px) {
    .dropdown--movedown {
        margin-top: 1.7rem;
    }
}

@media (max-width: 991.98px) {

    .dropdown-menu {
        background-color: transparent;
        border: 0px solid transparent;
    }

    .dropdown-item {
        color: white !important;
    }

        .dropdown-item A {
            color: white !important;
        }

        .dropdown-item:hover {
            color: #333333 !important;
            background-color: #00AEEF;
        }


    .navbar-collapse {
        padding-top: 5%;
        padding-bottom: 5%;
        padding-left: 10px;
        font-size: 1.3em;
    }

    .btn__idp {
        margin-top: 20px;
    }
}


/* about us timeline styles   */

.scrollbar--blue {
}

    .scrollbar--blue::-webkit-scrollbar {
        width: 10px;
        background-color: #AFCDE0;
    }

    .scrollbar--blue::-webkit-scrollbar-track {
        background-color: #AFCDE0;
    }

    .scrollbar--blue::-webkit-scrollbar-thumb {
        background-color: #1F628A;
    }

.timeline__block {
    margin-right: 5px;
    float: left;
    width: 350px;
    height: 350px;
    position: relative;
}

.timeline__block-nostop {
    margin-right: 5px;
    float: left;
    width: 350px;
    height: 350px;
    position: relative;
}

.timeline__inner {
    position: absolute;
    bottom: 0%;
    padding: 20px;
    padding-left: 0px;
    padding-right: 30px;
}

.timeline__block::after {
    content: '';
    background-color: #00AEEF;
    width: 26px;
    height: 26px;
    position: absolute;
    bottom: -18px;
    left: -20px;
    border-radius: 50%;
}

.timeline--border-bottom {
    border-bottom: 8px solid #00AEEF;
}


/* newGtld "picture wall" layout  */


.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: rgba(31,98,138,1.00);
}

    .hovereffect .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .hovereffect img {
        opacity: 0.7;
        display: block;
        position: relative;
        max-width: none;
        width: calc(100% + 20px);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hovereffect:hover img {
        opacity: 0.2;
        filter: alpha(opacity=40);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hovereffect h2 {
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 2em;
        overflow: hidden;
        margin-bottom: none;
        background-color: transparent;
        font-weight: 600;
    }

        .hovereffect h2:after {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(255,255,255,0.30);
            content: '';
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
        }

    .hovereffect:hover h2:after {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hovereffect a, .hovereffect p {
        text-align: center;
        color: #FFF;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }

    .hovereffect:hover a, .hovereffect:hover p {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }


/* accordian expander styles (used for regulations etc) ------------ */

.accordion > .card-header {
    background-color: red;
}

.collapsible-link::before {
    content: '';
    width: 14px;
    height: 2px;
    background: #333;
    position: absolute;
    top: calc(50% - 1px);
    right: 1rem;
    display: block;
    transition: all 0.3s;
}

.collapsible-link::after {
    content: '';
    width: 2px;
    height: 14px;
    background: #333;
    position: absolute;
    top: calc(50% - 7px);
    right: calc(1rem + 6px);
    display: block;
    transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
    transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
    transform: rotate(180deg);
}

.gltd-question[aria-expanded='true'] .more-arrow {
    display: inline-block;
    transform: rotate(180deg);
}

/* experimental stuff and effects ------------------------------- */

.bg-video-highlight {
    background-image: linear-gradient(120deg, #e3f5fb, #7ac9e6);
}

.video-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999;
    box-shadow: 0px 15px 61px -9px rgba(0,0,0,0.3);
    transition: all 200ms ease-in;
}

.video-thumb-wrapper::after {
    content: 'WATCH VIDEO \25BA';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #00aeef;
    z-index: 999;
    padding: 12px;
    font-size: 1em;
    color: #ffffff;
    font-weight: 600;
    border-radius: 25px;
    transition: all 200ms ease-in;
}

.video-thumb-link:hover .video-thumb {
    box-shadow: 0px 15px 85px -9px rgba(0,0,0,0.5);
}

.video-thumb-link:hover .video-thumb-wrapper::after {
    top: 51%;
    background-color: #38C8FF;
}


.bg-circle {
    position: absolute;
    z-index: 0;
    border-radius: 100%;
    background-color: rgba(238,248,252,0.58);
}


/* circles floating up animation stuff */

.circle-1 {
    position: absolute;
    bottom: -400px;
    left: 5%;
    animation: floatup 35s infinite;
    transition-timing-function: ease-out;
    animation-delay: 3s;
    opacity: 0.06;
}

.circle-2 {
    position: absolute;
    bottom: -400px;
    left: 30%;
    animation: floatup 45s infinite;
    transition-timing-function: linear;
    opacity: 0.06;
}

.circle-3 {
    position: absolute;
    bottom: -360px;
    left: 80%;
    animation: floatup 54s infinite;
    transition-timing-function: linear;
    animation-delay: 3s;
    opacity: 0.06;
}

.circle-4 {
    position: absolute;
    bottom: -280px;
    right: 20%;
    animation: floatup 34s infinite;
    transition-timing-function: linear;
    opacity: 0.06;
}

.circle-5 {
    position: absolute;
    bottom: -390px;
    right: 60%;
    animation: floatup 54s infinite;
    transition-timing-function: ease-in-out;
    animation-delay: 5s;
    opacity: 0.06;
}

.circle-6 {
    position: absolute;
    bottom: -350px;
    right: 80%;
    animation: floatup 34s infinite;
    transition-timing-function: ease-out;
    opacity: 0.06;
}

.circle-7 {
    position: absolute;
    bottom: -300px;
    right: 50%;
    animation: floatup 37s infinite;
    transition-timing-function: linear;
    animation-delay: 6s;
    opacity: 0.06;
}

.circle-8 {
    position: absolute;
    bottom: -300px;
    right: 5%;
    animation: floatup 23s infinite;
    transition-timing-function: ease;
    opacity: 0.06;
}



@keyframes floatup {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-1800px) rotate(40deg);
    }
}

/*floating circles end */


/* experimental styles and spinning cog stuff */

.bg--cog {
    position: absolute;
    opacity: 0.13;
    top: 50%;
    left: calc(50% + 100px);
    transform: translateX(-50%);
    transform: translateY(-50%);
}

    .bg--cog > img {
        height: 600px;
    }

@media (max-width: 767.98px) {

    .bg--cog {
        transform: rotate(90deg);
        right: 50%;
        bottom: 500px;
    }
}

.spinning-cog {
    overflow: hidden;
    position: relative;
}

.hero-cog {
    position: absolute;
    top: -630px;
    left: -630px;
    z-index: 6;
    opacity: 0.1;
    -webkit-animation: cogspin 50s infinite linear;
    animation: cogspin 50s infinite linear;
}



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

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



/*  positioning the feature images on pages, left and right are generic ones and some are page specific if they need to be  */
.box3d-left {
    transform: translateY(50px) translateX(-50px);
    box-shadow: 0px 20px 40px 10px rgba(0,0,0,0.22);
}

.box3d-right {
    transform: translateY(50px) translateX(40px);
    box-shadow: 0px 20px 40px 10px rgba(0,0,0,0.22);
}

.box3d-ssl {
    transform: translateY(50px) translateX(40px);
    box-shadow: 0px 20px 40px 10px rgba(0,0,0,0.22);
}

.box3d-2fa {
    transform: translateY(80px) translateX(40px);
}

.filter-shadow {
    -webkit-filter: drop-shadow( 3px 32px 23px rgba(0, 0, 0, .3));
    filter: drop-shadow( 3px 32px 23px rgba(0, 0, 0, .3));
}


/* this makes the bubbles effect on what we've been up to */

.bottom-particles {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

    .bottom-particles .bubble {
        opacity: 0;
        position: absolute;
        bottom: -2.5rem;
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgba(0,159,227,0.2);
        border-radius: 50%;
    }

        .bottom-particles .bubble:nth-child(1) {
            left: 82%;
            -webkit-animation: blow 79103ms infinite;
            animation: blow 79103ms infinite;
            -webkit-animation-delay: 9630ms;
            animation-delay: 9630ms;
        }

        .bottom-particles .bubble:nth-child(2) {
            left: 61%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 1804ms;
            animation-delay: 1804ms;
        }

        .bottom-particles .bubble:nth-child(3) {
            left: 42%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 3531ms;
            animation-delay: 3531ms;
        }

        .bottom-particles .bubble:nth-child(4) {
            left: 18%;
            -webkit-animation: blow 73898ms infinite;
            animation: blow 73898ms infinite;
            -webkit-animation-delay: 1505ms;
            animation-delay: 1505ms;
        }

        .bottom-particles .bubble:nth-child(5) {
            left: 98%;
            -webkit-animation: blow 54336ms infinite;
            animation: blow 54336ms infinite;
            -webkit-animation-delay: 3343ms;
            animation-delay: 3343ms;
        }

        .bottom-particles .bubble:nth-child(6) {
            left: 69%;
            -webkit-animation: blow 18822ms infinite;
            animation: blow 18822ms infinite;
            -webkit-animation-delay: 8824ms;
            animation-delay: 8824ms;
        }

        .bottom-particles .bubble:nth-child(7) {
            left: 12%;
            -webkit-animation: blow 33269ms infinite;
            animation: blow 33269ms infinite;
            -webkit-animation-delay: 1134ms;
            animation-delay: 1134ms;
        }

        .bottom-particles .bubble:nth-child(8) {
            left: 72%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 9440ms;
            animation-delay: 9440ms;
        }

        .bottom-particles .bubble:nth-child(9) {
            left: 40%;
            -webkit-animation: blow 73471ms infinite;
            animation: blow 73471ms infinite;
            -webkit-animation-delay: 11344ms;
            animation-delay: 11344ms;
        }

        .bottom-particles .bubble:nth-child(10) {
            left: 86%;
            -webkit-animation: blow 14566ms infinite;
            animation: blow 14566ms infinite;
            -webkit-animation-delay: 966ms;
            animation-delay: 966ms;
        }

        .bottom-particles .bubble:nth-child(11) {
            left: 35%;
            -webkit-animation: blow 67049ms infinite;
            animation: blow 67049ms infinite;
            -webkit-animation-delay: 5579ms;
            animation-delay: 5579ms;
        }

        .bottom-particles .bubble:nth-child(12) {
            left: 56%;
            -webkit-animation: blow 32946ms infinite;
            animation: blow 32946ms infinite;
            -webkit-animation-delay: 3292ms;
            animation-delay: 3292ms;
        }

        .bottom-particles .bubble:nth-child(13) {
            left: 95%;
            -webkit-animation: blow 56843ms infinite;
            animation: blow 56843ms infinite;
            -webkit-animation-delay: 3799ms;
            animation-delay: 3799ms;
        }

        .bottom-particles .bubble:nth-child(14) {
            left: 80%;
            -webkit-animation: blow 57308ms infinite;
            animation: blow 57308ms infinite;
            -webkit-animation-delay: 1798ms;
            animation-delay: 1798ms;
        }

        .bottom-particles .bubble:nth-child(15) {
            left: 100%;
            -webkit-animation: blow 18698ms infinite;
            animation: blow 18698ms infinite;
            -webkit-animation-delay: 4205ms;
            animation-delay: 4205ms;
        }

        .bottom-particles .bubble:nth-child(16) {
            left: 32%;
            -webkit-animation: blow 38968ms infinite;
            animation: blow 38968ms infinite;
            -webkit-animation-delay: 9687ms;
            animation-delay: 9687ms;
        }

        .bottom-particles .bubble:nth-child(17) {
            left: 94%;
            -webkit-animation: blow 59009ms infinite;
            animation: blow 59009ms infinite;
            -webkit-animation-delay: 8716ms;
            animation-delay: 8716ms;
        }

        .bottom-particles .bubble:nth-child(18) {
            left: 26%;
            -webkit-animation: blow 36308ms infinite;
            animation: blow 36308ms infinite;
            -webkit-animation-delay: 6212ms;
            animation-delay: 6212ms;
        }

        .bottom-particles .bubble:nth-child(19) {
            left: 95%;
            -webkit-animation: blow 56219ms infinite;
            animation: blow 56219ms infinite;
            -webkit-animation-delay: 7415ms;
            animation-delay: 7415ms;
        }

        .bottom-particles .bubble:nth-child(20) {
            left: 22%;
            -webkit-animation: blow 10273ms infinite;
            animation: blow 10273ms infinite;
            -webkit-animation-delay: 1823ms;
            animation-delay: 1823ms;
        }

        .bottom-particles .bubble:nth-child(21) {
            left: 61%;
            -webkit-animation: blow 19681ms infinite;
            animation: blow 19681ms infinite;
            -webkit-animation-delay: 1732ms;
            animation-delay: 1732ms;
        }

        .bottom-particles .bubble:nth-child(22) {
            left: 21%;
            -webkit-animation: blow 11946ms infinite;
            animation: blow 11946ms infinite;
            -webkit-animation-delay: 3811ms;
            animation-delay: 3811ms;
        }

        .bottom-particles .bubble:nth-child(23) {
            left: 49%;
            -webkit-animation: blow 21564ms infinite;
            animation: blow 21564ms infinite;
            -webkit-animation-delay: 7021ms;
            animation-delay: 7021ms;
        }

        .bottom-particles .bubble:nth-child(24) {
            left: 90%;
            -webkit-animation: blow 73468ms infinite;
            animation: blow 73468ms infinite;
            -webkit-animation-delay: 3456ms;
            animation-delay: 3456ms;
        }

        .bottom-particles .bubble:nth-child(25) {
            left: 86%;
            -webkit-animation: blow 15846ms infinite;
            animation: blow 15846ms infinite;
            -webkit-animation-delay: 6353ms;
            animation-delay: 6353ms;
        }

        .bottom-particles .bubble:nth-child(26) {
            left: 66%;
            -webkit-animation: blow 50179ms infinite;
            animation: blow 50179ms infinite;
            -webkit-animation-delay: 10011ms;
            animation-delay: 10011ms;
        }

        .bottom-particles .bubble:nth-child(27) {
            left: 57%;
            -webkit-animation: blow 37469ms infinite;
            animation: blow 37469ms infinite;
            -webkit-animation-delay: 11222ms;
            animation-delay: 11222ms;
        }

        .bottom-particles .bubble:nth-child(28) {
            left: 38%;
            -webkit-animation: blow 25303ms infinite;
            animation: blow 25303ms infinite;
            -webkit-animation-delay: 10693ms;
            animation-delay: 10693ms;
        }

        .bottom-particles .bubble:nth-child(29) {
            left: 26%;
            -webkit-animation: blow 11856ms infinite;
            animation: blow 11856ms infinite;
            -webkit-animation-delay: 8533ms;
            animation-delay: 8533ms;
        }

        .bottom-particles .bubble:nth-child(30) {
            left: 51%;
            -webkit-animation: blow 43470ms infinite;
            animation: blow 43470ms infinite;
            -webkit-animation-delay: 3843ms;
            animation-delay: 3843ms;
        }

        .bottom-particles .bubble:nth-child(31) {
            left: 34%;
            -webkit-animation: blow 75013ms infinite;
            animation: blow 75013ms infinite;
            -webkit-animation-delay: 378ms;
            animation-delay: 378ms;
        }

        .bottom-particles .bubble:nth-child(32) {
            left: 58%;
            -webkit-animation: blow 37257ms infinite;
            animation: blow 37257ms infinite;
            -webkit-animation-delay: 1552ms;
            animation-delay: 1552ms;
        }

        .bottom-particles .bubble:nth-child(33) {
            left: 75%;
            -webkit-animation: blow 49518ms infinite;
            animation: blow 49518ms infinite;
            -webkit-animation-delay: 4866ms;
            animation-delay: 4866ms;
        }

        .bottom-particles .bubble:nth-child(34) {
            left: 78%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 8209ms;
            animation-delay: 8209ms;
        }

        .bottom-particles .bubble:nth-child(35) {
            left: 79%;
            -webkit-animation: blow 42748ms infinite;
            animation: blow 42748ms infinite;
            -webkit-animation-delay: 1360ms;
            animation-delay: 1360ms;
        }

        .bottom-particles .bubble:nth-child(36) {
            left: 19%;
            -webkit-animation: blow 30837ms infinite;
            animation: blow 30837ms infinite;
            -webkit-animation-delay: 3550ms;
            animation-delay: 3550ms;
        }

        .bottom-particles .bubble:nth-child(37) {
            left: 35%;
            -webkit-animation: blow 27112ms infinite;
            animation: blow 27112ms infinite;
            -webkit-animation-delay: 2920ms;
            animation-delay: 2920ms;
        }

        .bottom-particles .bubble:nth-child(38) {
            left: 92%;
            -webkit-animation: blow 44188ms infinite;
            animation: blow 44188ms infinite;
            -webkit-animation-delay: 5430ms;
            animation-delay: 5430ms;
        }

        .bottom-particles .bubble:nth-child(39) {
            left: 83%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 10108ms;
            animation-delay: 10108ms;
        }

        .bottom-particles .bubble:nth-child(40) {
            left: 83%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 4983ms;
            animation-delay: 4983ms;
        }

        .bottom-particles .bubble:nth-child(41) {
            left: 43%;
            -webkit-animation: blow 44590ms infinite;
            animation: blow 44590ms infinite;
            -webkit-animation-delay: 8474ms;
            animation-delay: 8474ms;
        }

        .bottom-particles .bubble:nth-child(42) {
            left: 76%;
            -webkit-animation: blow 14494ms infinite;
            animation: blow 14494ms infinite;
            -webkit-animation-delay: 4173ms;
            animation-delay: 4173ms;
        }

        .bottom-particles .bubble:nth-child(43) {
            left: 42%;
            -webkit-animation: blow 43706ms infinite;
            animation: blow 43706ms infinite;
            -webkit-animation-delay: 10307ms;
            animation-delay: 10307ms;
        }

        .bottom-particles .bubble:nth-child(44) {
            left: 84%;
            -webkit-animation: blow 19242ms infinite;
            animation: blow 19242ms infinite;
            -webkit-animation-delay: 1136ms;
            animation-delay: 1136ms;
        }

        .bottom-particles .bubble:nth-child(45) {
            left: 97%;
            -webkit-animation: blow 48768ms infinite;
            animation: blow 48768ms infinite;
            -webkit-animation-delay: 11091ms;
            animation-delay: 11091ms;
        }

        .bottom-particles .bubble:nth-child(46) {
            left: 10%;
            -webkit-animation: blow 36480ms infinite;
            animation: blow 36480ms infinite;
            -webkit-animation-delay: 6649ms;
            animation-delay: 6649ms;
        }

        .bottom-particles .bubble:nth-child(47) {
            left: 68%;
            -webkit-animation: blow 20195ms infinite;
            animation: blow 20195ms infinite;
            -webkit-animation-delay: 6968ms;
            animation-delay: 6968ms;
        }

        .bottom-particles .bubble:nth-child(48) {
            left: 35%;
            -webkit-animation: blow 10000ms infinite;
            animation: blow 10000ms infinite;
            -webkit-animation-delay: 6360ms;
            animation-delay: 6360ms;
        }

        .bottom-particles .bubble:nth-child(49) {
            left: 22%;
            -webkit-animation: blow 64877ms infinite;
            animation: blow 64877ms infinite;
            -webkit-animation-delay: 8957ms;
            animation-delay: 8957ms;
        }

        .bottom-particles .bubble:nth-child(50) {
            left: 18%;
            -webkit-animation: blow 20755ms infinite;
            animation: blow 20755ms infinite;
            -webkit-animation-delay: 5144ms;
            animation-delay: 5144ms;
        }
[id^=collapse] .card-body {
    overflow-y: scroll !important;
}

@-webkit-keyframes blow {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0, -100vh) scale(0.2);
        transform: translate(0, -100vh) scale(0.2);
    }
}

@keyframes blow {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0, -100vh) scale(0.2);
        transform: translate(0, -100vh) scale(0.2);
    }
}

/* extra styles for landing pages / one offs */

.bg-globe {
    background: linear-gradient(130deg, rgba(237,237,237,0.8), rgba(237,237,237,0.8) ),
    /* bottom, image */
    url(/ResourcePackages/Safenames/assets/dist/images/node-globe-bg.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, 500px 60%;
    background-size: 100%, cover;
}


.overlay-black::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #000000, #000000);
    opacity: .7;
    z-index: 1;
}

.landing-social__icon {
    transition: all 0.2s;
}

    .landing-social__icon:hover {
        opacity: 0.5;
    }


/* about us timeline styles   */

.scrollbar--blue {
}

    .scrollbar--blue::-webkit-scrollbar {
        width: 10px;
        background-color: #AFCDE0;
    }

    .scrollbar--blue::-webkit-scrollbar-track {
        background-color: #AFCDE0;
    }

    .scrollbar--blue::-webkit-scrollbar-thumb {
        background-color: #1F628A;
    }

.timeline__block {
    margin-right: 5px;
    float: left;
    width: 350px;
    height: 350px;
    position: relative;
}

.timeline__inner {
    position: absolute;
    bottom: 0%;
    padding: 20px;
    padding-left: 0px;
    padding-right: 30px;
}

.timeline__block::after {
    content: '';
    background-color: #00AEEF;
    width: 26px;
    height: 26px;
    position: absolute;
    bottom: -18px;
    left: -20px;
    border-radius: 50%;
}

.timeline--border-bottom {
    border-bottom: 8px solid #00AEEF;
}






/*   Safenames Employee Hub Landing Page Styles  */

      .sh-center-container {
        display: grid;
        width: 100%;
        place-items: center;
        background-color: aliceblue;
        overflow: hidden;
        margin-bottom: 0em;
      }

      .sh-padding-util {
        padding: 2em; 
      }


        .sh-info {
        display: grid;
        width: 80%;
        grid-template-columns: 1fr 1fr;
        margin: 10em 10em 10em 10em;

      }

      .sh-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        position: relative;
        overflow: hidden;
        /* min-height: 100vh; */
        min-height: 920px;
        color: #ffffff;
        font-family: "Poppins", sans-serif !important;
      }

      .sh-hero > div {
        display: flex;
        flex-direction: column;
        width: 50%;
        margin-top: 6em;
      }

      @media (max-width: 920px) {
        .sh-hero > div {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-top: 6em;
      }
}

      .sh-hero * {
        text-align: center;
      }

      .sh-video-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        z-index: -1;
      }

      .sh-hero h1 {
        font-size: 3.7em;
        margin: 0;
        font-weight: 400;
        font-family: "Poppins", sans-serif !important;
      }

      .sh-info h2 {
        font-size: 2.5em;
        margin: 0;
        font-weight: 400;
        color: #009fe3;
        font-family: "Poppins", sans-serif !important;
      }

      .sh-hero p {
        font-size: 1em;
        font-weight: 300;
        font-family: "Poppins", sans-serif !important;
      }

      @media (max-width: 920px) {
        .sh-hero h1 {
        font-size: 2.8em;
        margin: 0;
        font-weight: 400;
      }

      .sh-hero p {
        font-size: 0.9em;
        font-weight: 300;
      }

      }

      .sh-logo-image {
        width: 170px;
      }

      .sh-nav {
        padding: 1em;
        width: 100%;
        background-color: none;
        z-index: 1;
        display: flex;
      }

      .sh-sticky {
        position: absolute;
        top: 0;
        width: 100%;
      }

      .sh-hero-img {
        width: 100%;
      }

      .sh-button {
        transition: all 20ms ease-in-out;
        cursor: pointer;
        margin-top: 1em;
        background-color: #009fe3;
        border-radius: 0.6em;
        border: 0;
        width: 270px;
        font-family: "Poppins", sans-serif !important;
        align-self: center;
        padding: 0.8em;
        font-size: 1em;
        color: #ffffff;
        transition: all 0.5s ease;

      }

      .sh-button:hover {
        background-color: #35c0fc;
      }

      .sh-button a {
        color: #ffffff;
        text-decoration: none;
        
      }

      .sh-screenshot {
        max-width: 920px;
        position: absolute;
        top: 0; 
        left: 0;
      }

      .sh-screenshot__wrapper {
        min-height: 17em;
      }

      @media (max-width: 920px) {
        
      }

      .sh-nav-rightlink {
        margin-right: 0;
        margin-left: auto;
        border: 0;
        font-family: "Poppins", sans-serif !important;
        align-self: center;
        font-size: 1em;
        color: #ffffff;
      }

@media (max-width: 920px) {
    .sh-info {
        grid-template-columns: 1fr;
        margin: 2em;
    }
}

.sh-footer {
    display: grid;
    width: 100%;
    padding: 1.2em;
    background-color: #353535;
    color: #ffffff; 
    justify-content: center;
}

.sh-button-nostyle {
  background-color: none; 
  border: none; 
  font-family: "Poppins", sans-serif !important;
  padding: 0; 
  margin: 0;
  color: #ffffff !important;
}

.sitefinity_form_wrapper {
    padding: 40px;
    margin-bottom: 60px !important;
    border: 1px solid #e7ecf1;
    border-top: 8px solid #e7ecf1;
    border-radius: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.sitefinity_form_container {
    margin-bottom: 40px; 
}

.sitefinity_form_container label {
    font-family: "Poppins", sans-serif !important;
    font-size: 90%;
}

.sitefinity_form_container input, .sitefinity_form_container textarea, .sitefinity_form_container select {
    border: 2px solid #e7ecf1; 
}

.info-text {
    background-color: #ffffe0;
    padding: 6px 12px;
}

/* start file upload css */
/* file upload button */
.sn-file-upload input[type="file"]::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    transition: background-color 200ms;
}

/* file upload button hover state */
.sn-file-upload input[type="file"]::file-selector-button:hover {
    background-color: #f3f4f6;
}

/* file upload button active state */
.sn-file-upload input[type="file"]::file-selector-button:active {
    background-color: #e5e7eb;
}

.sn-file-upload input[type="file"] {
    position: relative;
    padding-bottom: 48px;
}

.sn-file-upload input[type="file"]::file-selector-button {
    width: 136px;
    color: transparent;
}

/* Faked label styles and icon */
.sn-file-upload input[type="file"]::before {
    position: absolute;
    pointer-events: none;
    top: 16px;
    left: 18px;
    height: 20px;
    width: 20px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}

.sn-file-upload input[type="file"]::after {
    position: absolute;
    pointer-events: none;
    top: 15px;
    left: 41px;
    color: #0964b0;
    content: "Upload File";
}

/* end file upload css */

.form-group.required .control-label:after {
    content: " *";
    color: red;
}

.sn-select {
    border-radius: 3px;
}

.sn-select:not(:focus) {
    border: 2px solid #eeec;   
    border-radius: 4px;
}


.hero-25__img {
		width: 800px;
		bottom: -260px;
		right: -300px;	
}

@media (min-width: 576px) {

	.hero-25__img {
		width: 800px;
		bottom: -260px;
		right: -300px;	
		}

}


@media (min-width: 768px) {

	.hero-25__img {
		width: 950px;
		bottom: -380px;
		left: -100px;
		}
	.hero-25__section {
			min-height: 450px;
			}

}


@media (min-width: 992px) {

	.hero-25__img {
		width: 800px;
		top: -40px;
		left: -100px; 
		}
		.hero-25__section {
			min-height: 500px;
			}

}

@media (min-width: 1200px) {

	.hero-25__img {
		width: 1250px;
		top: -120px;
		left: -120px; 
		}
	.hero-25__section {
		min-height: 600px;
		}

}