/*

min-width:X = device width >= X
max-width:Y = device width <= Y
------------------------------------
Smartphone horizontal: <1024
Tablet horizontal: >= 1024
Laptops: >=1280
and (orientation: landscape)

MacBook Air: = 1280
Laptops & Desktops full hd: 1920

*/


/* Vertical smartphones and tablets - show black screen */
@media only screen and (orientation: portrait) and (max-height: 1279px) {
    .verticalScreenLocker {
        display: flex;
    }
}

body.ios .fullscreenButtonEnter{
    display: none !important;
}

/* Tablets Horizontal */
@media only screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) {
    h1 {
        /* font-size: 35px;
        font-size: 3vmax;
        font-size: max(4vmin, 14px); */
    }
    h2 {
        /* font-size: 18px; */
        font-size: max(2vmin, 12px);
        padding: 20px 0;
        margin: 20px 0;
    }
    h4 {
        /* font-size: 1.1vw; */
    }
    h5 {
        /* font-size: 4vw; */
    }
    .headerProjectTitle span {
        display: none;
    }
    .leftSide {
        font-size: 14px;
        line-height: 1.3em;
    }
    ul>li {
        margin-bottom: 5px;
    }
    .buttonSecondary {
        font-size: 1.0vw;
    }
    .buttonSecondary i {
        display: none;
    }
    .col3>div {
        padding: 20px;
    }
    html {
        font-size: 1.2vw;
    }

    body.fullscreen .menuOpenButtonTop {
        display: none !important;
    }
    body.fullscreen .menuButtonFooter  {
        display: block !important;
    }
}







/* Smartphones Horizontal */
@media only screen and (orientation: landscape) and (max-width: 1023px) {
    * {
        --thumbLineHeight: 60px !important;
        --footerHeight: 40px !important;
        --hotspotSize:30px;
        --hotspotIconSize:16px;
        --floorSelectorHotspotSize:22px;
    }
    html, .ggskin{
        font-size: 12px;
        line-height: 1.0;
    }
    h2{
        font-size: max(2vmin, 14px);
        font-weight: 300;
        padding: 10px 0;
        margin: 10px 0;
    }
    .footer{
        height:40px;
    }
    .buttonPrimary, .buttonSecondary{
        width: 36px;
        height: 36px;
    }
    .buttonSecondary,
    .buttonPrimaryWithText {
        height:auto;
        width:auto;
        padding: 5px 7px;
    }
    .slideTitleContainer,
    .headerProjectTitle,
    .menuTop,
    .menuBottom {
        display: none !important;
    }

    .mainMenu {
        top: 0 !important;
        height: 100vh !important;
    }

    main {
        padding: 0 0 40px 0 !important;
    }

    main[data-page-url="start"] {
        padding: 15px 0 !important;
    }

    .startScreenLogo img {
        width: 80px !important;
    }

    .startScreenTitle h1,
    .startScreenSubTitle,
    .startScreenTitle h1 i
    {
        font-size: 16px !important;
    }

    .buttonPrimary {
        padding: 8px 15px !important;
        font-size: 9px !important;
    }

    header {
        display: none !important;
    }

    aside img {
        transform-origin: top left;
        transform: scale(0.7);
    }

    .pageBgAnimated {
        animation: none;
        -webkit-animation: none;
    }

    .menuButtonFooter {
        display: block !important;
    }

    .menuCloseButton {
        top: 0 !important;
        right: -40px !important;
        border-radius: 0 5px 5px 0 !important;
        background-color: var(--menu1levelBg) !important;
        transform-origin: left;
    }

    .startScreenBottomText{
        font-size: 10px !important;
        line-height: 1;
        font-weight: 300 !important;
    }
    .startScreenBottomText br{
        display: none;
    }
    .buttonSecondary i {
        display: none;
    }
    .leftSide{
        padding:20px;
    }
    .col1, .col2, .col3, .col4 {
        align-content: flex-start;
    }
    .col1 > div, .col2 > div, .col3 > div, .col4 > div {
        padding: 20px;
    }
    .contentIcon {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
    }
    .teamGrid{
        align-content: normal !important;
    }
    .personRole{
        font-size: 1.1vw;
    }
    .teamPopupImage{
        max-width: none !important;
        max-height: none !important;
        width:150px !important;
        height:150px !important;
        float:left;
        margin-right:20px;
    }
    .hideAtMobile{
        display: none !important;
    }
    .col2.perth-btr>div {
        height: auto;
    }
    .floorplanMobileHideAtStart{
        width:50px;
        transition: none !important;
    }
    .roomInfo{
        padding:10px !important;
    }
    .roomInfoIcon{
        display: none;
    }
    .roomInfoRow{
        margin-bottom: 5px;
    }
    .timelineContent{
        justify-content: flex-start;
        padding-top:20px;
    }
    .contactUsBlocks{
        font-size: 1.1vw;
        font-weight: bold;
    }
    .floorPlanSkinElement{
        left:0 !important;
    }
    .floorLeftPanelTop{
        margin-top: 10px !important;
        font-size:16px !important;
    }
    .floorValuesTable{
        margin-top: 10px !important;
    }
    .floorViewDrawButton {
        left: auto !important;
        right:10px;
    }
    .floorShowAvailable{
        margin-top: 10px !important;
    }
    .main[data-page-url="financials"] .leftSide{
        display: none;
    }
    .main[data-page-url="financials"] .rightSide{
        width:100%;
        padding:0 10px;
    }
    .main[data-page-url="financials"] h4{
        font-size:14px;
    }
    .floorPlanOpenButton .ggskin_svg,
    .floorPlanButtons .ggskin_svg
    {
        width:22px !important;
        height: 22px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .floorPlanOpenButton, .floorPlanButtons{
        width:36px !important;
        height: 36px !important;
    }
    .icon360 img {
        width:22px !important;
        height: 22px !important;
    }
    .switherItem{
        font-size: 10px;
    }
    .popupCloseButton {
        top: 2px !important;
        right: 2px !important;
    }


}