@font-face {
    font-family: 'Sacramento';
    src: url('../fonts/Sacramento-Regular.ttf');
}

@font-face {
    font-family: 'Telegrafico';
    src: url('../fonts/telegrafico.ttf');
}

body {
    overflow-x: hidden;
    font-family: 'Candara', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p {
    line-height: 1.25;
}

a {
    color: #29aae2;
}

a:hover {
    color: #005067;
}

.text-primary {
    color: #29aae2 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-family: 'Telegrafico', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section {
    padding: 85px 0;
}

section .section-heading {
    font-size: 47px;
    margin-top: 0;
    margin-bottom: 13px;
    font-weight: 100;
}

.btn {
    font-weight: 700;
}

.btn-xl {
    font-size: 15px;
    padding: 17px 34px;
}

.btn-primary {
    background-color: #29aae2;
    border-color: #29aae2;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background-color: #005067 !important;
    border-color: #005067 !important;
    color: white;
    outline: 0;
}

.btn-primary:active, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
}

::-moz-selection {
    background: #29aae2;
    text-shadow: none;
}

::selection {
    background: #29aae2;
    text-shadow: none;
}

img::selection {
    background: transparent;
}

img::-moz-selection {
    background: transparent;
}

#mainNav {
    background-color: #212529;
    box-shadow: none;
}

#mainNav .navbar-toggler {
    font-size: 10px;
    right: 0;
    padding: 13px;
    text-transform: uppercase;
    color: white;
    border: 0;
    background-color: #29aae2;
}

#mainNav .navbar-brand {
    color: #29aae2;
}

#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
    color: #005067;
}

#mainNav .navbar-nav .nav-item .nav-link {
    font-size: 14px;
    font-weight: 400;
    padding: 0.64em 0;
    letter-spacing: 1px;
    color: white;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #29aae2;
}

@media (min-width: 992px) {
    #mainNav {
        padding-top: 13px;
        padding-bottom: 13px;
        -webkit-transition: padding-top 0.3s, padding-bottom 0.3s, box-shadow 0.3s;
        -moz-transition: padding-top 0.3s, padding-bottom 0.3s, box-shadow 0.3s;
        transition: padding-top 0.3s, padding-bottom 0.3s, box-shadow 0.3s;
        border: none;
        background-color: #0d0e22;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    #mainNav .navbar-brand {
        font-size: 1.75em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    #mainNav .navbar-nav .nav-item .nav-link {
        padding: 1.1em 1em !important;
    }
    #mainNav.navbar-shrink {
        padding-top: 0;
        padding-bottom: 0;
        background-color: #212529;
        box-shadow: 0 0 68px rgba(0, 0, 0, 0.5);
    }
    #mainNav.navbar-shrink .navbar-brand {
        font-size: 1.25em;
        padding: 10px 0;
    }
}

header.masthead {
    text-align: center;
    color: white;
    height: 100vh;
    min-height: 660px;
    max-height: 800px;
}

header.masthead .intro-text {
    padding-top: 128px;
    padding-bottom: 85px;
}

header.masthead .intro-text .intro-lead-in {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 25px;
}

header.masthead .intro-text .intro-heading {
    font-size: 43px;
    font-weight: 700;
    line-height: 43px;
    margin-bottom: 21px;
}

@media (min-width: 768px) {
    header.masthead .intro-text {
        padding-top: 170px;
        padding-bottom: 43px;
    }
    header.masthead .intro-text .intro-lead-in {
        font-size: 42px;
        line-height: 40px;
        margin-bottom: 34px;
    }
    header.masthead .intro-text .intro-heading {
        font-size: 64px;
        font-weight: 700;
        line-height: 64px;
        margin-bottom: 43px;
    }
}

header.masthead .intro-text {
    padding-top: 33vh !important;
}

@media (min-height: 800px) and (min-width: 768px) {
    header.masthead .intro-text {
        padding-top: 264px !important;
    }
}
@media (max-height: 600px) and (min-width: 768px) {
    header.masthead .intro-text {
        padding-top: 198px !important;
    }
}

/*custom*/

.btn-social-white, .btn-social-dark {
    border-radius: 1000px;
    width: 29px;
    height: 29px;
    font-size: 17px;
    padding: 5px;
    outline: none;
}

.btn-social-white {
    color: #0d0e22 ;
    background: white;
}

.btn-social-white:hover {
    background: #c3c3c3;
}

.btn-social-dark {
    color: white;
    background: #0d0e22 ;
}

.btn-social-dark:hover {
    background: #17185f;
}

/*Services elements*/
.service-element {
    text-align: center;
    font-size: 17px;
    margin-top: 26px;
    margin-bottom: 26px;
}

@media (min-width: 992px) {
    .service-element {
        margin-top: -60px !important;
        margin-bottom: 50px !important;
    }
}

.service-img-wrap {
    position: relative;
    width: 99%;
    height: 99%;
    border-radius: 1000px;
}

.service-img-wrap img {
    border-radius: 1000px;
}

.service-img-text-layer {
    position: absolute;
    top:    3%;
    bottom: 3%;
    left:   3%;
    right:  3%;
    background: rgba(255, 255, 255, 0.6);
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    text-decoration: none;

    transition: opacity .2s, visibility .2s;
}

.service-img-wrap:hover .service-img-text-layer {
    visibility: visible;
    opacity: 1;
    text-decoration: none;
}

.service-img-text {
    transition: .2s;
    transform: translateY(1em);
}

.service-img-wrap:hover .service-img-text {
    transform: translateY(0);
}

/*End services elements*/

/**/
.bg-white {
    background: white !important;
}

.bg-dark {
    background: #0d0e22 !important;
}

.bg-mid {
    background: #005067 !important;
}

.bg-light {
    background: #00adef !important;
}

.bg-purple {
    background: #2b3d7d !important;
}

.text-white {
    color: white !important;
}

.text-dark {
    color: #0d0e22 !important;
}

.text-mid {
    color: #005067 !important;
}

.text-light {
    color: #00adef !important;
}
.text-purple {
    color: #2b3d7d !important;
}

.ff-primary {
    font-family: 'Candara', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.ff-secondary {
    font-family: 'Telegrafico', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.ff-arial {
    font-family: Arial, sans-serif !important;
}

.btn-white, .btn-light, .btn-mid, .btn-dark {
    border-radius: 13px !important;
    background-color: transparent !important;
    padding: 12px 13px 16px 13px; !important;
    font-size: 22px;
    text-transform: uppercase;
    border: solid 2px !important;
}

.btn-white:hover, .btn-light:hover, .btn-mid:hover, .btn-dark:hover
.btn-white:focus, .btn-light:focus, .btn-mid:focus, .btn-dark:focus
.btn-white:active, .btn-light:active, .btn-mid:active, .btn-dark:active {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

.btn-white {
    border-color: #fff !important;
	box-shadow: inset 0 0 0 0 #fff;
}

.btn-white:hover {
    background-color: #fff !important;
    color: #0d0e22 !important;
	box-shadow: inset 0 -17px 17px #fff;
}

.btn-light {
    border-color: #00adef !important;
	box-shadow: inset 0 0 0 0 #00adef;
}

.btn-light:hover {
    background-color: #00adef !important;
    color: #fff !important;
	box-shadow: inset 0 -17px 17px #00adef;
}

.btn-mid {
    border-color: #005067 !important;
	box-shadow: inset 0 0 0 0 #005067;
}

.btn-mid:hover {
    background-color: #005067 !important;
    color: #fff !important;
	box-shadow: inset 0 -17px 17px #005067;
}

.btn-dark {
    border-color: #0d0e22 !important;
	box-shadow: inset 0 0 0 0 #0d0e22;
}

.btn-dark:hover {
    background-color: #0d0e22 !important;
    color: #fff !important;
	box-shadow: inset 0 -17px 17px #0d0e22;
}

.smooth {
    -webkit-transition: all 0.2s;
    -moz-transition:    all 0.2s;
    transition:         all 0.2s;
}

.smooth-slow {
    -webkit-transition: all 0.4s;
    -moz-transition:    all 0.4s;
    transition:         all 0.4s;
}

.full-rounded {
    border-radius: 9999px;
}

.text-size-normal {
    font-size: 23px;
}
.text-size-small {
    font-size: 19px;
}
.text-size-xsmall {
    font-size: 14px;
}
.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.none-list {
    padding-left: 0;
    list-style-type: none;
}
a.text-decoration-none:hover {
    text-decoration: none;
}

/**/
input, textarea {
    border: 0 !important;
    border-bottom: 2px solid #0d0e22 !important;
    border-radius: 0 !important;
    font-size: 20px !important;
    padding: 4px 0 !important;
    font-weight: 600;
    height: 44px;
}
input:focus, textarea:focus {
    outline: none !important;
    box-shadow: 0 2px 0 #0d0e22 !important;
}
button {
    cursor: pointer;
}
button:focus {
    outline: none !important;
}

/**/
#service-web {
    max-height: 800px;
}
.desktop-img {
    background: url(../img/desktop.png) no-repeat left calc(36% - 3px);
    background-size: contain;
    height: 633px;
    width: 62%;
    max-width: 667px;
    bottom: 470px;
    position: relative;
    z-index: 10;
}
.games-img {
    background: url(../img/game.png) no-repeat right center;
    background-size: contain;
    height: 538px;
}
.vr-img-container {
    margin: auto;
    width: 100vw;
    height: 40vw;
    max-height: 468px;
}
.design-img {
    position: relative;
    width: 100%;
}
.design-img-left {
    background: url(../img/design-left.png) no-repeat;
    background-size: contain;
    width: 87px;
    height: 162px;
    position: absolute;
    bottom: -160px;
    left: 91px;
}
.design-img-right {
    background: url(../img/design-right.png) no-repeat;
    background-size: contain;
    width: 509px;
    height: 829px;
    position: absolute;
    bottom: -477px;
    right: 35px;
    z-index: 20;
}
.design-img-mid {
    background: url(../img/design-mid.png) no-repeat;
    background-size: 100% 100%;
    width: calc(100% - 721px);
    height: 92px;
    position: absolute;
    bottom: -159px;
    left: 177px;
}

#mobile-time {
    position: absolute;
    color: white;
    text-shadow: -1px -2px 0 rgba(0, 0, 0, 0.2);

    -webkit-transform: rotate(-40deg) skew(-30deg, 0);
    -moz-transform: rotate(-40deg) skew(-30deg, 0);
    -ms-transform: rotate(-40deg) skew(-30deg, 0);
    -o-transform: rotate(-40deg) skew(-30deg, 0);
    transform: rotate(-40deg) skew(-30deg, 0);
}
#desktop-time {
    position: absolute;
    color: white;
    top: 59%;
    right: 27%;
    font-size: 18px;
    font-weight: 800;
}

@media (max-width: 383px) {
    section .section-heading {
        font-size: 11vw;
    }
    #what-we-do > .bg-white > div > div, #what-we-do > .bg-white > div > div > div  {
        padding: 4vw !important;
    }
}
@media (max-width: 767px) {
    .footer-triangle {
        top: 150px !important;
    }
}
@media (min-width: 992px) {
    #what-we-do > div {
        background: #0d0e22 !important;
    }
    #service-mobile {
        margin-top: -260px;
    }
    #service-games {
        background-color: #2b3d7d !important;
    }
    .mobile-img {
        background: url(../img/mobile.png) no-repeat right top;
        background-size: cover;
        height: 43.25vw;
        max-height: 595px;
    }
    #mobile-time {
        top: 39%;
        right: 23%;
        font-size: calc(100vw / 50);
    }

    .service-mobile-text, .service-games-text {
        position: absolute;
        bottom: 0;
    }
    .service-vr-text h2 {
        max-width: 595px;
    }
    .service-vr-text p {
        max-width: 680px;
    }
    .service-vr-text {
        z-index: 10;
        position: relative !important;
    }
    #service-design {
        margin-top: -145px;
        padding-top: 196px;
        background: #2b3d7d !important;
        height: 757px;
    }
    .contact-content {
        height: 248px;
    }
    .contact-content>div {
        width: 992px;
    }
}
@media (max-width: 1250px) {
    .design-img-mid {
        background: url(../img/design-mid-short.png) no-repeat;
        background-size: 100% 100%;
        width: calc(100% - 720px);
        height: 22px;
        position: absolute;
        bottom: -159px;
        left: 177px;
    }
}
@media (min-width: 1375px) {
    .mobile-gradient-background {
    background: linear-gradient(90deg, transparent calc(100% - 340px), #2b3d7d calc(100% - 340px)),
                linear-gradient(11.1deg, #0e0e21 calc((50% - 125px) * 2), #2b3d7d calc((50% - 124px) * 2));
    }
    .mobile-img {
        background-size: contain;
        height: 508px;
    }
    #mobile-time {
        top: 190px;
        right: 225px;
        font-size: 20px;
    }
}
@media (min-width: 1600px) {
    .contact-left-triangle {
        height: 244px !important;
        bottom: 136px !important;
    }
    .contact-right-triangle {
        height: 244px !important;
        bottom: -136px !important;
    }
}
.address-text {
    bottom: 45px;
    left: 26px;
}
.address-icon {
    font-size: 115px;
    top: 10px;
    right: 22px;
}
.email-text {
    z-index: 10;
    bottom: 43px;
    left: 0px;
}
.email-icon {
    font-size: 100px;
    top: 0;
    left: 0;
}
.phone-text {
    top: 80px;
    left: 0;
}
.phone-icon {
    font-size: 60px;
    top: 5px;
    left: 0;
}
.mobile-text {
    bottom: 10px;
    left: 0;
}
.mobile-icon {
    font-size: 100px;
    top: 95px;
    left: 0;
}
.time-text {
    top: 65px;
    left: 0;
}
.time-icon {
    font-size: 120px;
    bottom: -10px;
    left: 78px;
}

.web-decoration div, .vr-decoration div, .design-decoration div {
    position: absolute;
}
.web-decoration .web-left-cloud-1 {
    top: 225px;
    left: 32%;
    height: 65px;
    width: 221px;
    border-radius: 999px;
}
.web-decoration .web-left-cloud-2 {
    top: 270px;
    left: 30%;
    height: 65px;
    width: 221px;
    border-radius: 999px;
}
.web-decoration .web-right-cloud-1 {
    top: 72px;
    right: 0;
    height: 60px;
    width: 260px;
    border-radius: 999px 0 0 999px;
}
.web-decoration .web-right-cloud-2 {
    top: 110px;
    right: 0;
    height: 70px;
    width: 189px;
    border-radius: 999px 0 0 999px;
}
.web-decoration .web-right-cloud-3 {
    top: 340px;
    right: 0;
    height: 100px;
    width: 160px;
    border-radius: 999px 0 0 999px;
}
.web-decoration .web-right-cloud-4 {
    top: 420px;
    right: 0;
    height: 80px;
    width: 100px;
    border-radius: 999px 0 0 999px;
}
.vr-decoration .vr-left-cloud-1 {
    top: 179px;
    left: 0;
    height: 85px;
    width: 221px;
    border-radius: 0 999px 999px 0;
}
.vr-decoration .vr-left-cloud-2 {
    top: 247px;
    left: 0;
    height: 89px;
    width: 170px;
    border-radius: 0 999px 999px 0;
}
.vr-decoration .vr-right-cloud-1 {
    top: 208px;
    right: 0;
    height: 60px;
    width: 170px;
    border-radius: 999px 0 0 999px;
}
.vr-decoration .vr-right-cloud-2 {
    top: 238px;
    right: 0;
    height: 60px;
    width: 234px;
    border-radius: 999px 0 0 999px;
}
.design-cloud-1 {
    top: -122px;
    left: 0;
    height: 60px;
    width: 170px;
    border-radius: 0 999px 999px 0;
}
.design-cloud-2 {
    top: -94px;
    left: 0;
    height: 60px;
    width: 85px;
    border-radius: 0 999px 999px 0;
}
.design-cloud-3 {
    bottom: -240px;
    left: 489px;
    height: 60px;
    width: 196px;
    border-radius: 999px;
}
.design-cloud-4 {
    bottom: -268px;
    left: 404px;
    height: 60px;
    width: 196px;
    border-radius: 999px;
}
/*.vr-headset-left-bg {*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*background: linear-gradient(6.5deg, transparent 0%, transparent 20%, #272B66 21%, #272B66 45%, transparent 46%) no-repeat,*/
                /*linear-gradient(1.5deg, transparent 0%, transparent 6%, #272B66 6%, #272B66 45%, transparent 45%) no-repeat;*/
    /*background-size: 50% 50%;*/
    /*width: 50%;*/
    /*height: 100%;*/
/*}*/
.vr-img {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 0, transparent 65%, white 65%);
}
.vr-img-bg {
    background: url(../img/vr.png) no-repeat center;
    background-size: 106%;
    max-width: 1063px;
    max-height: 425px;
    position: relative;
    z-index: 10;
}
.contact-left-triangle {
    background: url(../img/triangle-3.png) no-repeat left center;
    background-size: contain;
    width: 100%;
    height: 170px;
    bottom: 100px;
    left: 0;
}
.contact-right-triangle {
    background: url(../img/triangle-4.png) no-repeat calc(100% + 50px) center;
    background-size: contain;
    width: 100%;
    height: 180px;
    bottom: -30px;
    right: 0;
    z-index: 10;
}
.form-triangle {
    background: url(../img/triangle-5.png) no-repeat left center;
    background-size: contain;
    width: 100%;
    height: 238px;
    bottom: -68px;
    left: 0;
}
.footer-triangle {
    background: url(../img/triangle-6.png) no-repeat calc(100% + 120px) center;
    background-size: contain;
    width: 255px;
    height: 238px;
    top: -98px;
    right: 0;
}

/*Map*/
#map {
    width: 100%;
    height: 298px;
}
/*End Map*/

.service-icon {
    max-width: 170px;
}

/*form spinner*/
#loader {
    display: none;
    position: absolute;
    top: 10px;
    right: 20px;
}
.lds-ripple {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
}
.lds-ripple div {
    position: absolute;
    background: #0e0e21;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 1px;
    height: 1px;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: scale(25);
        opacity: 0;
    }
}
/*End form spinner*/

#sendMessageButton {
    width: 180px;
    height: 54px;
}
#sendMessageButton.loading-button {
    width: 218px;
}

@media (max-width: 300px) {
    .g-recaptcha {
        transform:scale(0.9) !important;
        -webkit-transform:scale(0.9) !important;
        transform-origin:0 0 !important;
        -webkit-transform-origin:0 0 !important;
    }
}
@media (max-width: 250px) {
    .g-recaptcha {
        transform:scale(0.85) !important;
        -webkit-transform:scale(0.85) !important;
        transform-origin:0 0 !important;
        -webkit-transform-origin:0 0 !important;
    }
}

.modal-footer {
    border: none !important;
}

.navbar-brand:focus {
    outline: none;
}

.contact-info-bg {
    background: linear-gradient(to right, #0d0e22 0%, #0d0e22 50%, #2b3d7d 50%, #2b3d7d 100%);
}

/*loading screen*/
#loading-screen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #0d0e22;
    z-index: 999999;
}
.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading-content img{
    float: left;
    height: 85px;
}
#loading-text {
    position: relative;
    color: rgba(255, 255, 255, .3);
    font-family: 'Sacramento', cursive;
    font-weight: 100;
    font-size: 80px;
    float: left;
    margin-left: 0;
    margin-top: 0;
    transform: rotateX(30deg) rotateY(-30deg) rotateZ(0) scaleX(.8);
}
#loading-text span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0;
    white-space: nowrap;
    color: #fff;
    transition: width .5s ease;
}