@media only screen and (max-width: 3000px) {
    html, body { font-size: 14px; }
}

@media only screen and (max-width: 1920px) {
    html, body { font-size: 13px; }
}

@media only screen and (max-width: 1680px) {
    html, body { font-size: 12px; }

    .landing-slider-menu a { margin: 0 3%; }
}

@media only screen and (max-width: 1440px) {
    html, body { font-size: 11px; }

    .slide-wifi-connected-users .box4,
    .slide-traffic-vs-weather .box4,
    .slide-average-bounce-rate .box4,
    .slide-average-duration .box4{ padding: 0 0 0 7%; }

    .channel-graph.yellow { margin-bottom: 1.5rem; }
    .svvg-img { height:19rem; }
}

@media only screen and (max-width: 1280px) {
    html, body { font-size: 10px; }
    
    /* .header { left:4.2rem; right:4.2rem; } */
    .slider { padding:0 4rem 5rem; }
    .slider-arrow { width:4rem; }
    .slider-info { left: 4.2rem; }
    .slider-action { right: 4.2rem; } 

    .graph { padding-left:5%; padding-right:5%; }    

    .slide-areas-of-interest .sketchup-slide { padding:0 0 6rem; }    

    .slide-visitors-insights-targeting .box3, 
    .slide-visitors-insights-targeting .box4 { padding: 0 0 0 30%; }
    .slide-visitors-insights-targeting .box-details { width:30%; }
    .slide-visitors-insights-targeting .btn { width:100%; }

    .landing-header { padding-left:7.5%; padding-right:7.5%; }
    .landing-slider-menu { left:7.5%; right:7.5%; }
    .landing-slider-menu a { margin: 0 2.5%; display:inline-block; }
    .landing-header .button { right:7.5%; }
    .landing-body { padding: 0 7.5%; }
    .landing-footer .slider-info { left:7.5%; }
    .landing-footer .slider-action { right:7.5%; }

    .cubic-graph { margin-top:-20rem; }

    .slide-total-visits .box2,
    .slide-new-vs-returning-visitors .box1,
    .slide-engaged-vs-passive-visitors .box1,
    .slide-wifi-connected-users .box1,
    .slide-average-duration .box2 { background-size:auto 120%; }

    .slide-wifi-connected-users .box1 .table-cell { vertical-align:top; padding-top:3rem; }

    .clock-details em { font-size:4rem; line-height:4.6rem; }
    .clock-details u { font-size:2.4rem; }

    .w80s { width: 84%!important; }
    p.data strong { font-size:1.8rem; }
    .img-box p.data strong { font-size:2.8rem!important; line-height:3.4rem!important; }
    .img-box p.data strong.inline { font-size:1.4rem!important; line-height:1.6rem!important; margin-bottom:0.5rem!important; }

    .slide-visits-pattern .box1 p { font-size: 1.5rem!important; }

    .slide-wifi-connected-users .box4,
    .slide-traffic-vs-weather .box4,
    .slide-average-bounce-rate .box4,
    .slide-average-duration .box4 { padding: 0 0 0 8%; }
}

@media only screen and (max-width: 1200px) {
    .graph-legend span u { display:none; }
    .tabs .tab strong u { display:none; }
}

@media only screen and (max-width: 1100px) {

    .w80s { width: 88%!important; }

    .sales { padding:0 5%; }

    .charts .pie-chart { width:100%; padding-left:8rem; }
    .charts .pie-chart-details p { font-size:1rem; }
    .charts .table:nth-child(1) { left:2%; }
    .charts .table:nth-child(3) { width:31%; }

    .cubic-graph { width:50rem; height:35rem; position:absolute; top:50%; left:50%; margin:-16rem 0 0 -25rem; }
    .draw-cubic-graph ul { width:100%; height:5rem; overflow:hidden; position:relative; }
    .draw-cubic-graph ul li { width:5rem; }    
    .cubic-graph-lf { top: 31.3rem; }

    .slide-wifi-connected-users .box4,
    .slide-traffic-vs-weather .box4,
    .slide-average-bounce-rate .box4,
    .slide-average-duration .box4 { padding: 0 0 0 5%; }

    .result span { font-size:4rem; }
    .result span i { font-size:2.8rem; right:-4.5rem; }

    .slide-visits-pattern .graph-traffic-legend { left:10.5%; }

    .clock-details em { font-size:3.8rem; line-height:4.4rem; }
    .clock-details u { font-size:2.1rem; }

    .time-box .w50s { margin-bottom:0.5rem; }

    .slide-sales-vs-traffic .box4 > .table-cell { padding:0 1%; }
    .slide-sales-vs-traffic .box4 .table-cell .table .table-cell { padding:0 1%; }

    .slide-visitors-value-segmentation .scroll-bar .mCSB_container { padding:1.5rem; }
    .box1 .svvg-title, .box2 .svvg-title, .box3 .svvg-title { line-height:3.2rem; }
    .channel-graph-header span, .channel-graph-header span strong { font-size:0.9rem; }
    .svvg-img { height: 17rem; }

    .sketchup-slide img, .sketchup-slide svg { height:90%; }
}

@media only screen and (max-width: 1024px) {
    html.landscape-page, 
    .landscape-page body { font-size: 9.5px; }

    .hands-content .left-hand img { margin-left: -18.1rem; }
    .hands-content .left-hand .show-clock { margin: -2.8rem 0 0 -0.6rem; }
    .hands-content .right-hand img { margin-left: -13rem; }
    .hands-content .right-hand .show-clock { margin: -2.6rem 0 0 -3.9rem; }
    
    .conversion-funnel { width: 43rem; margin-left: -8.5rem; }

    .slide-visitors-insights-targeting .google .btn { font-size:1.1rem; }

    .box-details { padding: 2.5rem 0 0 2rem; }
}

@media only screen and (max-width: 812px) and (max-height: 480px) {
    html.landscape-page, 
    .landscape-page body { font-size: 7px; }

    .box1 p, .box2 p, .box3 p, .box4 p { line-height:1.8rem; }

    .border-bottom { padding-bottom: 1rem!important; margin-bottom: 1rem!important; }
    .slide-2 .box2 .clock-data, .slide-11 .box2 .clock-data { padding-bottom: 1rem!important; margin-bottom: 1rem!important; }

    /*.slide-4 .box4, .slide-9 .box4 { padding: 0 3% 0 4%; }*/

    .result span u { font-size:2rem; }

    .clock-details em { font-size:4rem; }
    /*.clock-hour span, .clock-min span { width:1px; }*/

    .wrapper.landing-page { padding: 19rem 0 5rem; }
    .landing-header { height:19rem; }
}

@media only screen and (max-width: 773px) and (max-height: 435px) {
    html.landscape-page, 
    .landscape-page body { font-size: 6px; }

    .slide-sales-vs-traffic .box1,
    .slide-average-bounce-rate .box1,
    .slide-wifi-connected-users .box1,
    .slide-sales-vs-traffic .box1 { background-size:auto 110%; }

    .slide-visits-pattern .box1, 
    .slide-footfall-counting-overview .box2 { background-size:auto 100%; }

    .slide-unique-daily-visitors .box2 { background-size:auto 90%; }
    .slide-visits-pattern .box1 { background-color:#e8e8e8; background-position:50% 0; background-size: auto 80%; }
    .slide-visit-recency .box1 { background-size:auto 90%; background-position:50% 100%; }
    .slide-traffic-highpoints .box1 { background-size:auto 80%; background-position:50% 100%; }
    .slide-total-visits .box2,
    .slide-average-duration .box2,
    .slide-new-vs-returning-visitors .box1,
    .slide-engaged-vs-passive-visitors .box1,
    .slide-footfall-counting-overview .box1 { background-size:auto 110%; }

    .slide-18 .box1 .table-cell { background-position: 100% 20%; background-size:auto 65%; }
    p.cup-title { padding-top:9.5rem; }

    .slide-9 .box1 .table-cell,
    .slide-14 .box1 .table-cell { padding-top: 3rem; text-align: left; vertical-align: top; }

    p.data strong { font-weight: 500; }

    .slide-15 .box1 p { width:80%; }

    .cubic-graph { width:50rem; height:35rem; position:absolute; top:50%; left:50%; margin:-17.5rem 0 0 -25rem; }
    .draw-cubic-graph ul { width:100%; height:5rem; overflow:hidden; position:relative; }
    .draw-cubic-graph ul li { width:5rem; }    
    .cubic-graph-lf { top: 31.3rem; }


}

@media only screen and (max-width: 812px) and (max-height: 375px) {
    html.landscape-page, 
    .landscape-page body { font-size: 6px; }

    .slide-sales-vs-traffic .box1,
    .slide-average-bounce-rate .box1,
    .slide-wifi-connected-users .box1,
    .slide-sales-vs-traffic .box1 { background-size:auto 150%; }

    .slide-visits-pattern .box1, 
    .slide-footfall-counting-overview .box2 { background-size:auto 100%; }

    .slide-unique-daily-visitors .box2 { background-size:auto 90%; }
    .slide-visits-pattern .box1 { background-color:#e8e8e8; background-position:50% 0; background-size: auto 115%; }
    .slide-visit-recency .box1 { background-size:auto 135%; background-position:50% 50%; }
    .slide-traffic-highpoints .box1 { background-size:auto 95%; background-position:50% 100%; }
    .slide-total-visits .box2,
    .slide-average-duration .box2,
    .slide-new-vs-returning-visitors .box1,
    .slide-engaged-vs-passive-visitors .box1,
    .slide-footfall-counting-overview .box1 { background-size:auto 150%; }

}

@media only screen and (max-width: 736px) and (max-height: 414px) {
    html.landscape-page, 
    .landscape-page body { font-size: 6px; }
}

@media only screen and (max-width: 568px) and (max-height: 320px) {
    html.landscape-page, 
    .landscape-page body { font-size: 5px; }
}

@media only screen and (max-width: 1920px) and (min-width: 960px) and (max-height: 700px) {
    html.landscape-page, 
    .landscape-page body { font-size: 10px; }    

    .slide-img,
    .slide-img-details { padding-left:9rem; padding-right:9rem; }

    .wrapper.landing-page { padding-top:18rem; }
    .landing-header { height:18rem; padding-bottom:8rem; }
    .landing-header .button { bottom:8.5rem; }
    .landing-slide { padding:2rem 7% 5rem; }
    .landing-body .graph-legend { bottom: 1.5rem; }
}

@media only screen and (max-width: 1680px) and (min-width: 960px) and (max-height: 1200px) and (min-height: 700px) {
    .hands-content .left-hand { margin-top:-12rem; }
    .hands-content .right-hand { margin-top:4rem; }
    .data-hands-content { margin-top: -2.5rem; }
}

@media only screen and (max-width: 1200px) and (min-width: 960px) and (min-height: 700px) {
   
    .slide-sales-vs-traffic .box1,
    .slide-average-bounce-rate .box1,
    .slide-wifi-connected-users .box1 { background-size:auto 110%; }

    .slide-visits-pattern .box1, 
    .slide-footfall-counting-overview .box2 { background-size:auto 100%; }

    .slide-unique-daily-visitors .box2 { background-size:auto 90%; }
    .slide-visits-pattern .box1 { background-color:#e8e8e8; background-position:50% 0; background-size: auto 80%; }
    .slide-visit-recency .box1 { background-size:auto 90%; background-position:50% 100%; }
    .slide-traffic-highpoints .box1 { background-size:auto 80%; background-position:50% 100%; }
    .slide-total-visits .box2,
    .slide-average-duration .box2,
    .slide-new-vs-returning-visitors .box1,
    .slide-engaged-vs-passive-visitors .box1,
    .slide-footfall-counting-overview .box1 { background-size:auto 110%; }

    .tpl-2b .box2 .border-bottom { height:auto; }
    .time-box .w50s { width:100%; float:none; margin-bottom:1rem; }
    .time-box .w50s:last-of-type { margin-bottom:0; }
}

@media only screen and (max-width: 1440px) and (min-width: 960px) and (max-height: 700px) and (min-height: 500px) {
    
    .slide-visits-pattern .box1,
    .slide-footfall-counting-overview .box2 { background-size:auto 110%; }

    .hands-content .left-hand { margin-top:-11rem; }
    .hands-content .right-hand { margin-top:3rem; }

    .slide-4 .box1 .table-cell { padding-top:2rem; }

    .cubic-graph { width:50rem; height:35rem; position:absolute; top:50%; left:50%; margin:-18rem 0 0 -25rem; }
    .draw-cubic-graph ul { width:100%; height:5rem; overflow:hidden; position:relative; }
    .draw-cubic-graph ul li { width:5rem; }    
    .cubic-graph-lf { top: 31.3rem; }

}

@media screen and (orientation:portrait) and (max-width: 800px) {
    .power-query-list li:first-child .button:last-child { margin: 2rem 0 0 0 !important; }
}
@media screen and (orientation:portrait) and (max-width: 600px) {
    html, body { font-size: 8.5px; }
}
@media screen and (orientation:landscape) and (max-width: 960px) {
    html, body { font-size: 6px; }

}

@media screen and (orientation:portrait) and (max-width: 600px) {
    /*html, body { font-size: 8.5px; }
    .login-form { width:84%; }
    .login-form fieldset { padding: 20rem 8% 4rem; margin-bottom:0; }
    .login-form img { width: 14rem; height: 14rem; top:3rem; left:50%; margin-left:-7rem; }
    .login-form h3 { text-align:center; margin-bottom:2.5rem; }
    .login-form input,
    .login-form .form-btn { width:100%; height:5rem; margin-top: 2rem; font-size:1.5rem; text-align:center; }
    .copy p { font-size:1.4rem; }
    .error-msg, .succes-msg { padding: 1.5rem 8%; font-size: 1.45rem; line-height: 2.2rem!important; }*/
}

/*@media screen and (orientation:portrait) {
    .portrait-page #app { display:none; }
    .portrait-page .portrait { display:block; }
}

@media screen and (orientation:landscape) and (max-width: 960px) {
    .landscape-page .login-page { display:none; }
    .landscape-page .landscape { display:block; }
}*/