@media (max-width: 768px) {
    .home-text .display-3 {
        font-size:3em;
    }
    #row-1 {
/*        min-height: 566px;*/
    }
    #home-models {
        min-height: unset !important;
    }
    .home-text>span {
        font-size:2.5em;
    }
}

#loop {
    position: fixed;
    z-index: -1;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: #55185f;
}

.fade-1{
    visibility: hidden;
}

.fade-1.fadein-init {
        display: none;
        visibility: visible;
}

.home-cards .card{
    min-height: 290px;
}

.home-cards .card img{
    max-width: 100px;
}

.contact .card .card-title img{
    width:50px;
}

#x-navbar.navbar-light .navbar-nav .nav-link {
/*    color: #000;*/
}

.home-text {
/*    min-height: 505px;*/
    z-index:1;
}

#home-models .new-field {
    display:none;
}

.underlay{
    z-index:0;
    background:black;
    opacity:0.7;
    top:0;
    left:0;
}

.underlay-bottom-content {
    z-index: 1;
}

.underlay-animate {
    width: 0%;
}

#home-api-details .api-details-container .card .card-header button img {
    width: 30px;
    margin-right: 5px;
}

#home-api-details{
    max-height:381px;
}

#home-api-details .api-details-container {
    max-height: 428px;
    overflow: hidden;
}

.hero-gradient {
    background: #360033;
    background: -webkit-linear-gradient(to right, #5883dc, #360033);
    background: linear-gradient(to right, #5883dc, #360033);
}

.hero-gradient-2 {
    /*    background: #360033;
    background: -webkit-linear-gradient(to right, #480587, #043c59);*/
    /*    background: linear-gradient(to right, #480587, #043c59);*/

    background: #360033;
    background: linear-gradient(to right, #450189, #760ed3, #671071, #5c0c5b);
    background-size: 400% 400%;
}

.hero-gradient-3 {
    background: #360033;
    background: -webkit-linear-gradient(to right, #480587, #99098e);
    background: linear-gradient(to right, #480587, #99098e);
}

.hero-gradient-4 {
    background: #360033;
    background: linear-gradient(to right, #450189, #760ed3, #671071, #5c0c5b);
}

.hero-gradient-5 {
    background: #A5FECB;
    background: linear-gradient(to right, #5433FF, #20BDFF, #A5FECB);
}

.hero-animate {
    -webkit-animation: HeroAnimation 10s cubic-bezier(0.97, 0.01, 0.03, 0.99) infinite;
    -moz-animation: HeroAnimation 10s cubic-bezier(0.97, 0.01, 0.03, 0.99) infinite;
    animation: HeroAnimation 10s cubic-bezier(0.97, 0.01, 0.03, 0.99) infinite;
}

.ph-badge {
    position: fixed;
    left: 1rem;
    top: auto;
    right: auto;
    bottom: 1.5rem;
    z-index: 99;
    display: block;
    border-radius: 20px;
    box-shadow: 0 0 14px 7px rgba(0, 0, 0, 0.05);
}

.tutorial-intro{
    font-size: 2.5rem;
}

.react-logo{
    color: #61dafb;
    font-weight: 700;
}

@media (max-width: 768px) {

    .ph-badge {
        position: fixed;
        left: 2.2vw;
        bottom: 0.5rem;
        display: block;
        width: 40%;
    }

    .ph-badge img {
        max-width:100%;
    }
}

@-webkit-keyframes HeroAnimation {
    0% {
        background-position: 0% 49%
    }

    50% {
        background-position: 100% 52%
    }

    100% {
        background-position: 0% 49%
    }
}

@-moz-keyframes HeroAnimation {
    0% {
        background-position: 0% 49%
    }

    50% {
        background-position: 100% 52%
    }

    100% {
        background-position: 0% 49%
    }
}

@keyframes HeroAnimation {
    0% {
        background-position: 0% 49%
    }

    50% {
        background-position: 100% 52%
    }

    100% {
        background-position: 0% 49%
    }
}


.a-1, .a-2, .a-3, .a-4, .a-5, .a-6 {
    opacity:0;
}

.home-h2{
    color: #5433FF;
    font-weight: 900;
}

.home-blue-link{
    color: #5433FF;
    font-weight: bold;
    text-decoration: none;
}