

body {
    background-image: url('/r/homebkg.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 70%;
    min-width: 300px;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

.homepcimg {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    z-index: -1;
    max-width: 2448px;
    overflow: hidden;
}

.homepcdiv {
    position: absolute;
    top: -450px;
    right: -29.5vw;
    overflow: hidden;
    width: 300%;
    min-height:500px;
    z-index: -2;
    /* height:500px; */
    /* background-color: aquamarine; */
}

/* PC Location XL */
@media (width >= 1200px) {
    .homepcdiv {
        top: calc( (1200px / .67) * -0.23);
        right: calc( (1200px / .67) * -0.33);
        width: calc(1200px / .67);

    }
}

/* PC Location L */
@media (992px <= width <= 1200px) {
    .homepcdiv {
        top: calc( (992px / .67) * -0.23);
        right: calc( (992px / .67) * -0.33);
        width: calc(992px / .67);
    }
}


/* For mobile */
@media ( width <= 992px) {
    .homepcdiv {
        top: calc( (100vw / .67) * -0.23);
        right: calc( (100vw / .67) * -0.33);
        width: calc(100vw / .67);
    }
    .homeright {
        min-height:0px;
        height:0px;   
    }

    .logo-container {
        text-align: center;
        width:100%;
    }
}

.homeright {
    min-height:300px;
    height:300px;   
}

.w-btn-text {
    font-weight: 400;
    font-size: 18px;
    padding-top:10px;
}

.woxilogo {
    width: 200px;
    margin: 0;
}


.tagline {
    color: var(--wx-grey-200);
    font-weight: 300;
    font-size: 32px;
    text-align: start;
}

.homeheadline {
    color: var(--wx-grey-100);
    font-weight: 300;
    font-size: 50px;
    text-align: start;
    line-height: 56px;
}

.homesubhead {
    color: var(--wx-grey-300);
    font-weight: 400;
    font-size: 22px;
    text-align: start;
}

.homerow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    height: 100%;
    margin-bottom:100px;
}

.homediv {
    /* height:500px; */
    min-height: 100%;
}

.homecard {
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    /* background-color: var(--wx-grey-600); */
    background-color: rgba(54, 65, 73, 0.5);
    color: var(--wx-grey-200);
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
}

.homecard:hover {
    background-color: var(--wx-turquoise-600);
    border: 1px solid var(--wx-green-500);
}

.homecard:hover a.cardaction {
    color: var(--wx-green-500);
}

.homecardtop {
    align-self: flex-start;
}

.homecardfoot {
    align-self: end;
}

.cardaction,
a.cardaction,
a.cardaction:visited {
    color: var(--wx-turquoise-600);
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    /* text-transform: uppercase; */
    text-decoration: none;
}

.home-btn {
    width: 176px;
    height: 48px;
}


.loginfooter {
    /* display: float;
    position:fixed;
    bottom:0%;
    width:100%; */
    text-align: center;
    font-size: 12pt;
    font-weight: 300;
    color: var(--wx-grey-200);
    padding: 10px;
    height: 50px;
}

.loginsvg {
fill: var(--wx-grey-300);
margin-left: 1rem;
margin-right:1rem;
cursor: pointer;
}

.footertext{
    /* background-color: var(--wx-grey-800); */
}