body, html { overflow-x:hidden; }
body {
    margin: 0;
    font-family: CiscoSans,Arial,sans-serif;
    font-weight: 300;
    color: #424445;
    text-rendering: optimizeLegibility;
}
h1 {
    font-size: 54px;
    font-weight: 300;
    margin: 10px 0px;
}
h2 {
    font-size: 36px;
    font-weight: 300;
    margin: 10px 0px;
}
h3 {
    font-size: 30px;
    font-weight:300;
    margin: 0;
}
p {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
}
.db-button {
    padding: 30px 100px;
    border-radius: 50px;
    color: #fff;
    background-color: #0D274D;
    text-decoration: none;
    font-size: 2.6em;
}
a[href].db-button {
    color: #fff;
}
.db-button[href]:hover {
    text-decoration: none;
    color: #fff;
}
.db-button[href]:visited {
    color: #fff;
}
.button-div {
    margin: 12% auto 0;
}
/* Hero */
.hero {
    position: relative;
    width: 100vw;
    height: 40%;
    padding: 6.8% 4.4% 4.75%;
    background-image: url('images/clouds-no-frame.png');
    background-size: 65.9%;
    background-position: 117% 45%;
    background-repeat: no-repeat;
    border-bottom: 2px solid #0D274D;
}
.hero-text {
    width: fit-content;
}
.hero-title {
    font-size: 5.9em;
    margin: 0 0 20px -7px;
}
.hero-subtitle {
    font-weight: 300;
    margin: 0;
}
.hero-arrow {
    position: absolute;
    width: 6.5%;
    top: 21.5%;
    right: 16%;
}
.container div {
    max-width: 1460px;
}
/* Intro */
.intro {
    padding: 4.15% 4.15% 3% 4.15% ;
    text-align: center
}
.intro h1 {
    font-size: 6.15em;
    margin-bottom: 5px;
}
.intro h3 {
    font-size: 2.2em;
    margin-bottom: 35px;
}
.intro h2 {
    font-size: 2.56em;
    font-weight: 300;
}
.intro-img {
    width: 85%;
    margin: 85px auto;
}
.intro-img .arch {
    width: 86.5%;
}
.intro-desc {
    width: 17.35%;
}
.intro-desc img {
    width: 39%;
}
.intro-desc h3 {
    margin: 5px 0 15px;
    font-size: 2em;
}
.intro-desc p {
    font-size: 1.1em;
    line-height: 1.15;
}
.intro-desc.one {
    margin: -38.5% auto 0;
}
.flex-intro {
    width: 66%;
    display: flex;
    justify-content: space-around;
    margin: -1.8% auto 0%;
}
.flex-intro .intro-desc {
    width: 27%;
}
.intro-desc.two {
    margin: 0% 23% 0% 0%;
}
.intro-desc.three {
    margin: 0% 0% 0% 23%;
}
.intro-img .sprinkle {
    position: relative;
    width: 9%;
    margin: -19.1% 0 0 58.6%;
}
.sprinkle .sparkle {
    position: absolute;
    width: 30%;
    margin: 0 0 0 0;
    animation: tinkle1 infinite linear forwards 3s;
}
.sprinkle .square {
    position: absolute;
    width: 12%;
    margin: 30% 0 0 -18%;
    animation: tinkle1 infinite linear forwards 2.5s;
}
.sprinkle .circle {
    position: absolute;
    width: 13.5%;
    margin: 62% 0 0 19%;
    animation: tinkle1 infinite linear forwards 2s;
}
.intro-img .desktop {
    width: 23%;
    margin-top: 7%;
}
/* Main Content */
.main-con {
    padding: 0 4.15%;
    text-align: center;
}
.main-con h2 {
    margin: 0;
    font-size: 2.6em;
    line-height: 1.3;
}
.path-div {
    padding: 6.8% 4.4% 4.75%;
    background-image: url('images/path.png');
    background-size: 79%;
    background-position: 47% 12%;
    background-repeat: no-repeat;
}
.floating {
    width: 14%;
    position: relative;
    margin: 1.2% 0 0 76% 
}
.floating .blue-circle {
    position: absolute;
    width: 12%;
    margin: -17% 0 0 45%;
    animation: floating infinite ease-in-out 3s;
}
.floating .grey-circle {
    position: absolute;
    width: 70%;
    margin: 14% 0% 0% -35%;
    animation: floating infinite ease-in-out 6s;
}
.floating .dark-circle {
    position: absolute;
    width: 27%;
    margin: 66% 0% 0% 17%;
    animation: floating infinite ease-in-out 2s;
}
.path-flex {
    display: flex;
    text-align: left;
    align-items: center;
    margin: 10% 10%;
}
.path-flex.reverse {
    flex-direction: row-reverse;
    text-align: right;
}
.path-flex img {
    width: 20.5%;
    margin: 0 1.9%;
}
.path-flex div {
    margin-left: 5px;
}
.path-flex.reverse div {
    margin-right: 20px;
}
.path-flex h2 {
    margin-bottom: 10px;
    line-height: 1.5;
}
.path-flex h3 {
    margin-top: 10px;
    font-size: 2.2em;
    line-height: 1.1;
}
.path-flex.two {
    margin: 12% 12.2%;
}
.path-flex.three {
    margin: -1% 6% 1.6% 10%;
}
.path-flex.three img {
    width: 19%;
}
.path-flex.three div {
    margin: 0 0 1% 1%;
}
.path-flex.four {
    margin: 11.3% 11.9% 10% 10%;
}
.path-flex.four div {
    margin: 0 1.3% 1% 0%;
}
.path-flex.five {
    margin: 11.8% 0% 0% 10%;
}
.path-flex.five img {
    width: 17.8%;
}
.path-flex.five div {
    margin: 0 0 1% 0.5%;
}
.path-div .button-div {
    margin: 16.8% auto 0;
} 
@media screen and (min-width: 2350px) {
    .intro-img .desktop {
        margin-top: 9%;
    }
}
@media screen and (max-width: 1484px) {
    /* Hero */
    .hero {
        padding: 6.8% 4.4% 4.4%;
        background-image: url('images/clouds-small.png');
        background-size: 95%;
        background-position: -38% 94%;
    }
    /* Intro */
    .intro-img {
        margin: 75px auto;
    }
    .intro-img .desktop {
        margin-top: 7%;
    }
    .intro-desc.one {
        margin: -38.6% auto 0;
    }
    .flex-intro {
        margin: -2.3% auto 0%;
    }
    .intro-img .sprinkle {
        margin: -21.3% 0 0 58.6%;
    }
    .path-flex.three {
        margin: -1% 0% 1.6% 10%;
    }
}
@media screen and (max-width: 1220px) {
    .db-button {
        padding: 20px 65px;
        font-size: 1.7em;
    }
    /* Hero */
    .hero {
        background-position: -45% 85%;
    }
    .hero-title {
        font-size: 4em;
        margin: 0 0 10px 0px;
    }
    .hero-subtitle {
        font-size: 1.7em;
    }
    .hero-arrow {
        right: 16.6%;
    }
    /* Intro */
    .intro h1 {
        font-size: 3.9em;
        margin: 7px 0px 5px;
    }
    .intro h3 {
        font-size: 1.4em;
        margin-bottom: 25px;
    }
    .intro h2 {
        font-size: 1.7em;
    }
    .intro-img {
        margin: 55px auto;
    }
    .intro-desc h3 {
        margin: 0px 0 3px;
        font-size: 1.3em;
    }
    .intro-desc p {
        font-size: 0.9em;
    }
    .flex-intro {
        width: 70%;
        margin: -2.7% auto 0%;
    }
    .flex-intro img {
        width: 33%;
    }
    .intro-desc.two {
        margin: 0% 18% 0% 0%;
    }
    .intro-desc.three {
        margin: 0% 0% 0% 18%;
    }
    .intro-img .desktop {
        margin-top: 10%;
    }
    /* Main Content */
    .path-div {
        background-position: 47% 11%;;
    }
    .main-con h2 {
        font-size: 1.7em;
        line-height: 1.2;
    }
    .path-flex h3 {
        margin-top: 10px;
        font-size: 1.4em;
        line-height: 1.1;
    }
    .path-flex {
        margin: 10.5% 10.5%;
    }
    .path-flex img {
        width: 20.3%;
    }
    .path-flex.reverse div {
        margin-right: 12px;
    }
    .path-flex.two {
        margin: 11.7% 12.2%;
    }
    .path-flex.three img {
        width: 18%;
        margin: 0 1% 0 2%;
    }
    .path-flex.three div {
        margin: 0 0 0% 1%;
    }
    .path-flex.reverse div {
        margin-right: 12px;
    }
    .path-flex.five div {
        margin: 0 0 0% 0.5%;
    }
}
@media screen and (max-width: 992px) {
    .intro-img .desktop {
        margin-top: 7%;
    }
}
@media screen and (max-width: 850px) {
    /* Hero */
    .hero {
        padding: 6.8% 4.4% 4.2%;
        background-position: -21% 93%;
        border-bottom: 1px solid #0D274D;
    }
    .hero-title {
        font-size: 3em;
        margin: 0 0 5px 0px;
    }
    .hero-subtitle {
        font-size: 1.4em;
    }
    .hero-arrow {
        right: 15.4%;
    }
    /* Intro */
    .intro h1 {
        font-size: 3em;
        margin: 3px 0px 0px;
    }
    .intro h3 {
        font-size: 1.2em;
        margin-bottom: 3px;
    }
    .intro h2 {
        font-size: 1.25em;
    }
    .intro-img {
        margin: 40px auto;
    }
    .intro-desc img {
        width: 25%;
    }
    .intro-desc {
        width: 27%;
    }
    .intro-desc.one {
        margin: -39% auto 0;
    }
    .flex-intro {
        width: 80%;
        margin: -5.7% auto 0%;
    }
    .flex-intro .intro-desc {
        width: 35%;
    }
    .intro-desc.two {
        margin: 0% 15% 0% 0%;
    }
    .intro-desc.three {
        margin: 0% 0% 0% 15%;
    }
    .intro-img .sprinkle {
        margin: -26.3% 0 0 58.6%;
    }
    .intro-img .desktop {
        margin-top: 12%;
    }
    .db-button {
        padding: 15px 46px;
        font-size: 1.2em;
    }
    /* Main Contant */
    .main-con h2 {
        font-size: 1.2em;
    }
    .path-flex h3 {
        font-size: 1em;
    }
    .path-div {
        background-position: 47% 14%;
    }
    .path-flex.two {
        margin: 12.4% 12.2%;
    }
    .path-flex.three {
        margin: -1.5% 0% 1.6% 10%;
    }
}
@media screen and (max-width: 600px) {
    .button-div {
        margin: 7.5% auto 0;
    }
    .db-button {
        padding: 7px 23px;
        font-size: 0.8em;
    }
    /* Hero */
    .hero {
        padding: 9.8% 4.4% 4.2%;
        background-position: -33% 105%;
        border-bottom: 0.95px solid #0D274D;
    }
    .hero-title {
        font-size: 1.5em;
        margin: 0 0 5px 0px;
    }
    .hero-subtitle {
        font-size: 0.8em;
    }
    .hero-arrow {
        top: 33.5%;
        right: 15.8%;
    }
    .intro h1 {
        font-size: 1.5em;
    }
    .intro h3 {
        font-size: 0.8em;
        margin-bottom: 3px;
    }
    .intro h2 {
        font-size: 0.85em;
        margin: 5px 0px;
    }
    /* Intro */
    .intro-img {
        width: 100%;
        margin: 5px auto;
    }
    .intro-img .arch {
        width: 95%;
    }
    .intro-desc.one {
        margin: -45% auto 0;
    }
    .intro-desc p {
        font-size: 0.5em;
    }
    .intro-desc.two {
        margin: 0% 10% 0% 0%;
    }
    .intro-desc.three {
        margin: 0% 0% 0% 10%;
    }
    .flex-intro .intro-desc {
        width: 38%;
    }
    .flex-intro {
        width: 90%;
        margin: -5.7% auto 0%;
    }
    .intro-img .desktop {
        /* margin-top: 9%; */
    }
    /* Main Content */
    .main-con h2 {
        margin: 3% 0 0;
        font-size: 0.8em;
    }
    .path-flex {
        margin: 9.5% 10.5%;
    }
    .path-flex div {
        margin-left: 2px;
        margin-bottom: 5px;
    }
    .path-flex h2 {
        margin-bottom: 0px;
    }
    .path-flex h3 {
        margin-top: 0px;
        font-size: 0.6em;
    }
    .path-flex.two {
        margin: 12% 12.2% 10% 5%;
    }
    .path-flex.two img {
        width: 19%;
    }
    .path-flex.reverse div {
        margin-right: 4px;
    }
    .path-flex.four {
        margin: 9.7% 12.6% 10% 10%;
    }
    .path-flex.four div {
        margin: 0 1.3% 3% 0%;
    }
    .path-flex.five {
        margin: 11.5% 0% 0% 10.7%;
    }
    .path-flex.five div {
        margin: 0 0 2% 0.5%;
    }
    .path-div {
        background-size: 78%;
        background-position: 47% 9%;
    }
    .path-div .button-div {
        margin: 15% auto 0;
    }
    .floating {
        margin: 0.2% 0 0 76%;
    }
}
@media screen and (max-width: 400px) {
    .intro-img .desktop {
        margin-top: 10%;
    }
}
/* Animations */
@keyframes floating {
    0% {
        transform: translate(0%,0%);	
    }
    25% {
        transform: translate(5%,15%);	
    }	
    50% {
        transform: translate(10%,5%);	
    }	
    75% {
        transform: translate(0%,15%);	
    }	
    100% {
        transform: translate(0%,0%);
    }			
}
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translate(0%,0%);	
    }
    25% {
        -webkit-transform: translate(5%,15%);	
    }	
    50% {
        -webkit-transform: translate(10%,5%);	
    }	
    75% {
        -webkit-transform: translate(0%,15%);	
    }	
    100% {
        -webkit-transform: translate(0%,0%);
    }			
}

@keyframes tinkle1 {
    50% {
        transform: scale(0.5);
        opacity: 0.5;
    }
}