/* ufo animations (page-specific) */
@keyframes dUfo1FloatAnim {
    0%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(26px);
        -moz-transform: translateY(26px);
        -ms-transform: translateY(26px);
        transform: translateY(26px);
    }
}

@keyframes dUfo2FloatAnim {
    0%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-25px);
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        transform: translateY(-25px);
    }
}

.dUfo1FloatAnim {
    -webkit-animation: dUfo1FloatAnim 3s ease-in-out infinite;
    animation: dUfo1FloatAnim 3s ease-in-out infinite;
}

.dUfo2FloatAnim {
    -webkit-animation: dUfo2FloatAnim 3s ease-in-out infinite;
    animation: dUfo2FloatAnim 3s ease-in-out infinite;
}
/* hide back to main */
.dvNav {
    display: none;
}

/* ----- SHOWCASE ----- */
.dvShowcase {
    position: relative;
    max-height: 100vh;
    overflow: hidden;
}

.dvShowcaseContent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.dvShowcaseContent .dvTable {
    height: 100%;
    table-layout: fixed;
}

.dvShowcaseContent .dvExtLinks {
    margin: 15px 0;
}

/* ----- COMING SOON ----- */
.iComingSoon {
    vertical-align: top;
    width: 39vw;
    max-width: 1500px;
    min-width: 350px;
}

.iComingSoon + .dvExtLinks {
    margin-top: 0;
}

/* ----- SECTION - BASE DESC ----- */
.dvSection.tBaseDesc {
    padding-top: 30px;
    padding-bottom: 0;
}

.dvSection.tBaseDesc .hSectionTitle {
    margin-bottom: 0;
}

.dvSection.tBaseDesc .dvTable .dvCell {
    vertical-align: top;
}

.dvSection.tBaseDesc .dvTable .dvCell.left {
    padding-top: 65px;
}

.dvSection.tBaseDesc .ufo1 {
    left: 30px;
    top: 10px;
    width: 18vw;
    max-width: 346px;
}

.dvSection.tBaseDesc .ufo2 {
    right: -50px;
    top: 50%;
    width: 15vw;
    max-width: 293px;
    margin-top: 15px;
}

.dvSection.tBaseDesc .dvExtLinks {
    position: relative;
    margin-top: 5%;
    padding: 0 50px;
}

.dvSection.tBaseDesc .dvExtLinks > a {
    margin: 25px 12.5px;
}

.dvPhoneContainer {
    position: relative;
}

.dvDescPhone {
    position: absolute;
    right: 0;
    top: 0;
    width: 60vw;
    max-width: 1349px;
}

.dvDescPhone img {
    width: 100%;
    vertical-align: top;
}

.iSectionSpacer {
    vertical-align: top;
    width: 46vw;
    max-width: 900px;
    visibility: hidden;
    margin-bottom: 45px;
}
/* Header stripe */
.hStripe {
    font-size: 36px;
    padding: 4px 0;
    background-image: url('../Img/StripeTextCall.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}

/* Character list proprotional spacings */
.charList .dvRespListInner {
    margin: -0.5%;
}

.charList .dvRespListItem {
    padding: 0.5%;
}

/* Character list stripe adjust */
.dvSection.tCharList .hStripe {
    margin-top: 40px;
}
@media screen and (min-width: 2561px) {
    .sp2, .sp3 {display: none;}
    .sp1 {display: block;}
}

@media screen and (max-width: 2560px) {
    .sp1, .sp3 {display: none;}
    .sp2 {display:block;}
}

@media screen and (max-width: 1919px) {
    /* percentage padding for right desc column */
    .dvSection.tBaseDesc .dvTable .dvCell.left {
        padding-top: 3.5%;
    }
    .sp1, .sp2 {display:none;}
    .sp3 {display: block;}
    /* stripe proportional size */
    .hStripe {font-size: 1.8917vw;}
}

@media screen and (max-width: 1570px) {
    /* slightly decrease ext button spacings */
    .dvSection.tBaseDesc .dvExtLinks > a {
        margin: 15px 10px;
    }

    /* percentage padding for right desc column (adjusted) */
    .dvSection.tBaseDesc .dvTable .dvCell.left {
        padding-top: 2.5%;
    }
}

@media screen and (min-width: 1281px) {
    /* charlist 6-item layout centering override */
    .charList {
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }

    .charList .dvRespListItem {
        width: 16.66%;
    }
}

@media screen and (max-width: 1280px) {
    /* ext links padding adjust */
    .dvSection.tBaseDesc .dvExtLinks {
        padding: 0 20px;
    }
}
@media screen and (min-width: 1025px) {
    div.vidBreak {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    video.vidBreak {
        display: none;
    }
}

@media screen and (min-width: 901px) {
    .dvSection.tBaseDesc .dvDesc {
        position: relative;
        line-height: 2.15;
        width: auto;
        min-width: initial;
    }
}

@media screen and (max-width: 900px) {
    /* hide ext links in showcase */
    .dvShowcase .dvExtLinks {
        display: none;
    }

    .dvSection.tBaseDesc {
        padding-bottom: 35px;
    }

    .dvSection.tBaseDesc .dvTable .dvCell.left {
        padding: 30px 0 0;
    }

    /* collapse phone image */
    .dvSection.tBaseDesc .dvTable,
    .dvSection.tBaseDesc .dvTable .dvCell {
        display: block;
        width: auto;
    }

    .dvSection.tBaseDesc .dvTable .dvCell:first-child,
    .dvSection.tBaseDesc .ufo1 {
        display: none;
    }

    /* ext spacing link further adjusted */
    .dvExtLinks > a,
    .dvSection.tBaseDesc .dvExtLinks > a {
        margin: 10px 20px;
    }

    .dvSection.tBaseDesc .dvExtLinks {
        margin-top: 30px;
        padding: 0;
    }

    /* coming soon adjustment */
    .iComingSoon {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 768px) {
    .dvSection.tBaseDesc {padding-top: 15px;}
    .dvSection.tBaseDesc .dvTable .dvCell.left {padding-top: 15px;}
    .dvSection.tBaseDesc {padding-bottom: 15px;}
    /* stripe scaling stops */
    .hStripe {font-size: 14px;}
    /* Character list stripe adjust (lower margin) */
    .dvSection.tCharList .hStripe {margin-top: 15px;}
}
@media screen and (max-width: 500px) {
    /* stripe bg adjustment for low resolutions */
    .hStripe {background-size: 100% 100%;}
}
@media screen and (max-width: 479px) {
    .iComingSoon {width: 73vw;min-width: 230px;}
}