/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media screen and (min-width: 1900px){
    video {
        max-height: 750px !important;
    }
    #torchHighlights .hotspotInfoIcon p {
        font-size: 2em;
        margin: 0 0 0 10px;
        padding: 0;
    }
    #torchHighlights .fireIconList {
        width: 100px;
    }
}

@media screen and (min-width: 1700px){
    video {
        max-height: 550px !important;
    }
    #torchHighlights .hotspotInfoIcon p {
        font-size: 2em;
        margin: 0 0 0 10px;
        padding: 0;
    }
    #torchHighlights .fireIconList {
        width: 100px;
    }
}
@media only screen
and (min-device-width : 800px)
and (max-device-width : 1700px) {
    video {
        max-height: 550px !important;
    }
}

@media (min-width: 1500px) and (max-width: 1700px) {
    video {
        max-height: 550px !important;
    }
    #pr-page aside h3 {
        font-size: 20px;
    }
    #home-page aside p,
    #end-page aside p, #end-page aside ul li,
    #sd-page aside p, #sd-page aside ul li,
    #mp-page aside p, #mp-page aside ul li,
    #cd-page aside p, #cd-page aside ul li {
        font-size: 1.25em;
    }
    #home-page #startBtn {
        width: 350px;
    }
    #torchHighlights .hotspotInfoIcon p {
        font-size: 2em;
    }
    #torchHighlights .fireIconList {
        width: 60px;
    }
}
@media screen and (max-width: 1500px){

    #torchHighlights .hotspotInfoIcon p {
        font-size: 1.75em;
    }
    #torchHighlights .fireIconList {
        width: 80px;
    }
    hr {
        margin: 20px 0 5px;
    }
    aside h1 {
        font-size: 25px !important;
    }
    aside h2 {
        font-size: 15px !important;
        margin-top: 1px;
    }
    aside h3 {
        font-size: 25px !important;
    }
    #home-page #startBtn {
        width: 85%;
    }
    #home-page #imageSection {
        background-size: contain;
    }
    #home-page #startBtn {
        font-size: 16px;
    }
    #home-page aside h3 {
        font-size: 30px;
        padding-top: 0 !important;
    }
    #home-page .fireIcon {
        width: 65px;
        cursor: pointer;
    }
    aside p, aside ul li {
        font-size: 16px !important;
    }
    footer .tourIcon {
        height: 45px;
    }
    #voxTourNav {
        bottom: 7px;
        width: 60px;
        border-radius: 15px 20px;
    }
    #voxTourNav a {
        height: 55px;
    }
    footer nav img {
        width: 50px;
    }
    #nextBtn {
        width: 55%;
        line-height: 1.2;
    }
    video {
        max-height: 500px !important;
    }


}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1065px) {
    #torchHighlights h4 {
        font-size: 3rem;
    }
    #torchHighlights .hotspotInfoIcon p {
        font-size: 1em;
    }
    #torchHighlights .fireIconList {
        width: 50px;
    }
    #home-page #imageSection {
        background-size: contain !important;
        height: auto !important;
    }
    #login-page #imageSection1 {
        height: unset !important;
    }
    #imageSection1 {
        height: unset !important;
    }
    #asideContent.pe-5 {
        padding-right: 1rem !important;
    }
    #voxTourNav {
        width: 46px;
    }
    #voxTourNav a {
        height: 45px;
    }
    footer nav img {
        width: 40px;
    }
    h6 {
        font-size: 12px;
    }
    hr {
        margin: 20px 0 5px;
    }
    ul li {
        word-break: break-all;
    }
    #home-page #startBtn {
        line-height: 1.5;
        font-size: 16px;
    }
    #nextBtn {
        font-size: 16px;
    }
    footer .tourIcon {
        height: 35px;
    }
    .fireIconVideo {
        width: 50px;
    }
    .fireIcon {
        width: 50px !important;
    }
    aside {
        height: 700px;
    }
    aside h1 img {
        display: none;
    }
    aside h1 {
        font-size: 25px !important;
    }
    aside h2 {
        font-size: 15px !important;
        margin-left: 0;
    }
    aside h3 {
        font-size: 25px !important;
    }
    aside p, aside ul li {
        font-size: 13px !important;
    }
    .fireIconUserInfo span {
        font-size: 11px;
    }
    video {
        max-height: 350px !important;
        margin: 1% 0 0;
    }
    .videoPopUpWrapper.active {
        height: 100% !important;
    }
    .videoCaption {
        padding: 4px 60px 4px 30px;
    }
    .videoCaption p {
        font-size: 1em;
        line-height: 1.25;
    }
}


/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #torchHighlights .hotspotInfoIcon p {
        font-size: 1em;
    }
    #torchHighlights .fireIconList {
        width: 75px;
    }
    aside {
        height: 100%;
    }
    aside h1 {
        font-size: 15px !important;
    }
    aside h2 {
        font-size: 12px !important;
    }
    aside h3 {
        font-size: 13px !important;
    }
    aside p, aside ul li {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    #home-page aside .fireIcon {
        width: 35px !important;
    }
    #home-page #hpMenuPopup p {
        font-size: 12px !important;
        margin-bottom: 15px;
    }
    #home-page #hpMenuPopup {
        padding: 25px 35px 30px 25px;
    }
    #home-page .lineItem img {
        width: 40px;
    }
    #home-page #nextBtnImg {
        padding: 7px 17px;
    }
    .closePopup {
        font-size: 12px;
    }
    p, ul li {
        margin-bottom: .5rem;
    }
    video {
        max-height: 300px;
    }
    #voxTourNav {
        width: 46px;
    }
    #voxTourNav a {
        height: 45px;
    }
    footer nav img {
        width: 40px;
    }
    .mt-4 {
        margin-top: 1em !important;
    }
    .mx-1 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
    aside h1 {
        font-size: 15px !important;
    }
    aside h2 {
        font-size: 12px !important;
    }
    aside h3 {
        font-size: 13px !important;
    }
    aside p, aside ul li {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    #home-page aside .fireIcon {
        width: 35px !important;
    }
    #home-page #hpMenuPopup p {
        font-size: 12px !important;
        margin-bottom: 15px;
    }
    #home-page #hpMenuPopup {
        padding: 25px 35px 30px 25px;
    }
    #home-page .lineItem img {
        width: 40px;
    }
    #home-page #nextBtnImg {
        padding: 7px 17px;
    }
    .closePopup {
        font-size: 12px;
    }
    p, ul li {
        margin-bottom: .5rem;
    }
    video {
        max-height: 300px;
    }
    #voxTourNav {
        width: 46px;
    }
    #voxTourNav a {
        height: 45px;
    }
    footer nav img {
        width: 40px;
    }
    .mt-4 {
        margin-top: 1em !important;
    }
    .mx-1 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    body {
        height: 100vh;
    }
    #home-page #imageSection {
        background: url(./../img/vox-hp.png) center center transparent no-repeat;
        padding: 0;
        margin: 0;
        background-size: contain;
        height: 500px;
    }
    aside {
        border-top-left-radius: 0;
        -webkit-border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        -webkit-border-bottom-left-radius: 0;
    }
    aside h1 {
        font-size: 15px !important;
    }
    aside h2 {
        font-size: 12px !important;
    }
    aside h3 {
        font-size: 13px !important;
    }
    aside p, aside ul li {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    #home-page aside .fireIcon {
        width: 35px !important;
    }
    #home-page #hpMenuPopup p {
        font-size: 12px !important;
        margin-bottom: 15px;
    }
    #home-page #hpMenuPopup {
        padding: 25px 35px 30px 25px;
    }
    #home-page .lineItem img {
        width: 40px;
    }
    #home-page #nextBtnImg,
    #endBtn {
        padding: 7px 17px;
    }
    .closePopup {
        font-size: 12px;
    }
    p, ul li {
        margin-bottom: .5rem;
    }
    video {
        max-height: 300px;
    }
    #voxTourNav {
        width: 46px;
    }
    #voxTourNav a {
        height: 45px;
    }
    footer nav img {
        width: 40px;
    }
    .mt-4 {
        margin-top: 1em !important;
    }
    .mx-1 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}


/* PHONE TABLET SPECIFIC */

/* TABLET
########################################################################*/
/*Portrait and landscape iPad Pro*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {

}
/*Portrait iPad Pro*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    #imageSection1 {
        background-size: contain !important;
        height: unset !important;
        background-color: #000 !important;
    }

}
/*Landscape iPad Pro*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    body {
        height: 100vh;
    }
    #imageSection1 {
        background-color: #000 !important;
    }
}

/* PHONE
########################################################################*/
/* iphone specific iPhone 13, iPhone 12 & 12 Pro*/
@media only screen
and (min-device-width: 390px)
and (max-device-height: 844px)
and (-webkit-device-pixel-ratio: 3) {
    body {
        height: 100vh !important;
        flex-direction: column;
        flex-wrap: wrap;
    }
    video {
        max-height: 250px !important;
        margin: 0;
    }
    .videoCaption {
        width: 70%;
        margin: -10px 60px;
    }
    .closeVideoPopup,
    .videoCaption p {
        font-size: 12px;
        padding: 0;
    }
    #imageSection1 {
        height: unset !important;
        background-size: contain !important;
    }
    aside footer {
        position: relative;
        margin-top: 100px;
    }
}
@media only screen
and (min-device-width: 844px)
and (max-device-height: 390px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
    #imageSection1 {
        background-size: cover !important;
        height: 100vh !important;
    }
    aside h3 {
        padding-top: 5px;
    }
    aside hr {
        margin: 15px 0 10px;
    }
    aside .px-4 {
        padding-left: 1rem !important;
    }
    aside .pt-4 {
        padding-top: 1rem !important;
    }
    aside p, aside ul li {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
    .fireIconUserInfo span {
        font-size: 10px;
    }
    .minifireIcon {
        width: 15px;
    }
}




/*iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X*/
@media only screen
and (min-device-width: 375px)
and (max-device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
    body {
        height: 100vh !important;
        flex-direction: column;
        flex-wrap: wrap;
    }
    aside footer {
        position: relative;
        margin-top: 100px;
    }
    video {
        max-height: 250px !important;
        margin: 0;
    }
    .videoCaption {
        width: 70%;
        margin: -10px 60px;
    }
    .closeVideoPopup,
    .videoCaption p {
        font-size: 12px;
        padding: 0;
    }
}

/*iPhone 13 Pro Max & iPhone 12 Pro Max*/
@media only screen
and (min-device-width: 428px)
and (max-device-height: 926px)
and (-webkit-device-pixel-ratio: 3) {
    body {
        height: 100vh !important;
        flex-direction: column;
        flex-wrap: wrap;
    }
    aside footer {
        position: relative;
        margin-top: 100px;
    }
    video {
        max-height: 250px !important;
        margin: 0;
    }
    .videoCaption {
        width: 70%;
        margin: -10px 60px;
    }
    .closeVideoPopup,
    .videoCaption p {
        font-size: 12px;
        padding: 0;
    }
}
/*iPhone 14 Pro Max*/
@media only screen
and (min-device-width: 430px)
and (max-device-height: 932px)
and (-webkit-device-pixel-ratio: 3) {
    body {
        height: 100vh !important;
        flex-direction: column;
        flex-wrap: wrap;
    }
    aside footer {
        position: absolute;
    }
    video {
        max-height: 250px !important;
        margin: 0;
    }
    .videoCaption {
        width: 70%;
        margin: -10px 60px;
    }
    .closeVideoPopup,
    .videoCaption p {
        font-size: 12px;
        padding: 0;
    }
    #imageSection1 {
        background-size: cover !important;
        height: 100vh !important;
    }
}

/*Portrait and landscape phones*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
    body {
        height: 100vh !important;
        flex-direction: column;
        flex-wrap: wrap;
    }
    aside footer {
        position: relative;
        margin-top: 100px;
    }
    video {
        max-height: 250px !important;
        margin: 0;
    }
    .videoCaption {
        width: 70%;
        margin: -10px 60px;
    }
    .closeVideoPopup,
    .videoCaption p {
        font-size: 12px;
        padding: 0;
    }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

}
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
    #imageSection1 {
        height: unset !important;
        background-size: 100% !important;
    }
}


/*PORTRAIT phones*/
@media only screen
and (min-width: 321px) {

}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    #imageSection1 {
        height: 35% !important;
    }
}
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {

    #imageSection1 {
        height: 35% !important;
    }
}

/*LANDSCAPE phones*/
@media only screen
and (max-width: 320px) {
    #imageSection1 {
        height: unset !important;
        background-size: 100% !important;
    }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    #imageSection1 {
        height: unset !important;
        background-size: 100% !important;
    }
}
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
    #imageSection1 {
        height: unset !important;
        background-size: 100% !important;
    }
}