@media (max-width: 1199px) {

    body { font-size: 16px;}
    
    h1, .h1 { font-size: 60px;}
    h2, .h2 { font-size: 50px;}
    h3, .h3 { font-size: 40px;}
    
    .plan-select { min-width: 370px;}

    .section-bg-h300 .bound { min-height: 250px;}
    .section-bg-h550 .bound { min-height: 500px;}
    .section-bg-h800 .bound { min-height: 700px;}
    
    .result-title { font-size: 18px;}

} /* end @media (max-width: 1199px) */


@media (max-width: 1024px) {

    h1, .h1 { font-size: 55px;}
    h2, .h2 { font-size: 45px;}
    h3, .h3 { font-size: 35px;}
    
    .header .logo { line-height: 65px;}
    .logo-uob { width: 154px;}
    .logo-sealmark-strapline { width: 112px;}
    
    .sc-inner { padding-top: 80px; padding-bottom: 80px;}
    .sc-headline { width: 64%; margin-bottom: 40px;}
    .section-hero {
        height: -webkit-calc(100vh - 65px);
        height: -moz-calc(100vh - 65px);
        height: calc(100vh - 65px);
    }
    
    .tile-ct .ct-area { padding: 30px 30px 30px 60px;}
    
    .calc-result .output { font-size: 70px;}
    
    .nav-lists li { line-height: 65px;}
    .nav-lists a { font-size: 24px;}

} /* end @media (max-width: 1024px) */


@media (max-width: 991px) {
    
    h1, .h1 { font-size: 50px;}
    h2, .h2 { font-size: 40px;}
    h3, .h3 { font-size: 30px;}

    .calc-result .output { font-size: 60px;} 
    
    .sub-heading, .sc-sub-heading { margin-top: 10px;}
    
    .sc-action { margin-top: 20px;}
    .sc-headline { width: 100%;}
    
    .section-bg .sc-content { padding: 40px 0;}
    .section-bg-h550 .bound { min-height: 450px;}
    .section-bg-h650 .bound { min-height: 600px;}
    
    .tile-ct .ct-area { padding-left: 40px;}

} /* end @media (max-width: 991px) */


@media (min-width: 768px) {
    
    .section-hero { min-height: 600px;}
    
} /* end @media (min-width: 768px) */


@media (max-width: 767px) {
    
    body { font-size: 14px;}
    h1, .h1 { font-size: 45px;}
    h2, .h2 { font-size: 35px;}
    
    h4, .h4 { font-size: 18px;}
    h5, .h5 { font-size: 16px;}
    h6, .h6 { font-size: 14px;}
    
    .section-bg .sc-notefixed, .footer .copyright { font-size: 11px;}
    
    .container { padding-left: 10px; padding-right: 10px;}
    
    .header .logo { line-height: 58px;}
    .logo-uob { width: 154px;}
    .logo-sealmark-strapline { width: 82px;}
    
    .main { padding-top: 40px;}
    
    
    .nav-lists {
        background-color: #01357e;
        border: 0;
        position: absolute;
        top: 58px;
        z-index: 10;
    }
    .nav-lists li { 
        line-height: 40px;
        padding: 0 5px;
    }
    .nav-lists a {
        font-size: 22px;
        color: #fff;
    }
    
    .tile-ct .ct-area { padding: 25px;}
    
    .sc-inner { padding-top: 40px; padding-bottom: 40px;} 
    
    .section-hero {
        height: auto !important;
        overflow: visible;
    }
    .hero-bg,
    .plan-btn {
        position: static;
        -webkit-animation: none;
        -moz-animation: none;
        -o-animation: none;
        animation: none;
    }
    .hero-ct,
    .hero-ct .ct-area,
    .hero-ct .ct-box {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        text-align: center;
    }
    .hero-ct .ct-area {
        display: block;
        padding: 30px 0 0;
    }
    .hero-ct .plan { 
        position: relative;
        display: block; 
        padding: 30px 10px;
        margin-top: 40px;
        margin-left: -10px;
        margin-right: -10px;
        background-image: url(../img/page/bg-box.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        color: #fff;
        min-height: 200px;
        visibility: visible !important;
        -webkit-animation-name: none !important;
        animation-name: none !important;
    }
    .hero-ct .plan .btn {
        background-color: #ed1c24;
        color: #fff !important;
    }
    
    .plan-col {
        display: block;
        float: none;
        width: 100%;
        padding: 0;
        line-height: inherit;
        text-align: center;
    }
    .plan-label { font-size: 16px;}
    .plan-select { width: 425px; min-width: 0; max-width: 100%; margin: 10px auto 20px;}
    .bound-m { display: block;}
    
    .plan select, .plan .chosen-container-single .chosen-single, .plan .chosen-container .chosen-drop { background-color: #fff;}
    .plan select, .plan .chosen-container-single .chosen-single, .plan .chosen-container .chosen-drop, .plan .chosen-container .chosen-results { color: #333;}
    
    .section-bg-h300 .bound { min-height: 200px;}
    .section-bg-h550 .bound { min-height: 350px;}
    .section-bg-h650 .bound { min-height: 500px;}
    .section-bg-h800 .bound { min-height: 500px;}
    
    .section-bg .sc-notefixed { text-align: center !important;}
    
    .calc-result { margin: 30px auto;}
    .calc-result .result { margin-top: 20px;}
    .calc-box { padding-bottom: 0; margin-top: 30px;}
    .result-title { font-size: 16px;}
    
    .field { margin-bottom: 20px;}
    
    input[type="text"], textarea, select, .chosen-container-single .chosen-single { height: 45px;}
    
    .select:after { height: 43px; line-height: 47px;}
    .plan .select:after { height: 45px; line-height: 50px;}
    
    .chosen-container-single .chosen-single span { line-height: 43px;}
    .plan .chosen-container-single .chosen-single span { line-height: 44px;}
    
    .no-touchevents .select .chosen-container-single .chosen-single div { height: 45px; line-height: 47px;}
    .no-touchevents .plan .select .chosen-container-single .chosen-single div { line-height: 50px;}
    
    .input-unit .unit { line-height: 45px;}
    
    .btn { min-width: 150px; height: 40px; line-height: 40px; font-weight: 600;}
    
    .calc-result .output { font-size: 55px;} 

} /* end @media (max-width: 767px) */


@media (max-width: 640px) {
    
    h1, .h1 { font-size: 34px;}
    h2, .h2 { font-size: 32px;}
    h3, .h3 { font-size: 28px;}
    
    .section-tiles .sc-inner { padding-bottom: 0;}
    .tile { 
        margin-bottom: 20px; 
        background-color: #fff;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .tile-col { width: 100%;}
    .tile-img, .tile-right .tile-img { float: none;}
    .tile-ct { position: static;}
    .tile-ct .ct-inner, .tile-ct .ct-area { display: block; width: 100%; height: auto;}
    .tile-ct .ct-area { padding: 20px 5px; text-align: center;}
    .tile-ct .sub-heading { margin-top: 5px;}
    .tile-ct .br { display: inline;}

} /* end @media (max-width: 640px) */


@media (max-width: 568px) {
    
    .calc-box { max-width: 76%;}
    .input-unit .unit { min-width: 50px; right: -50px; padding-left: 5px;}
    
} /* end @media (max-width: 568px) */


@media (max-width: 480px) {
    
    .sc-sub-heading .br-inline-m { display: inline;}
    
} /* end @media (max-width: 480px) */


@media (max-width: 375px) {
    
    h1, .h1 { font-size: 32px;}
    h2, .h2 { font-size: 30px;}
    h3, .h3 { font-size: 26px;}
    
    .br-inline-m { display: inline;}
    .br-block-m { display: block;}
    
    .nav-lists a { font-size: 18px; white-space: nowrap;}
    
} /* end @media (max-width: 375px) */


@media (max-width: 320px) {
    
    h1, .h1 { font-size: 30px;}
    h2, .h2 { font-size: 28px;}
    h3, .h3 { font-size: 24px;}
    
    .section-bg-h300 .bound { min-height: 180px;}
    
} /* end @media (max-width: 320px) */