
/*
 * Copyright 2017 CloudAbout Co., Ltd.
 * 
 * Contain default styles for browser xxx - 960 px
 */

.hide-on-small {
    display: none;
}
/***********************************************************
* Menu
************************************************************/
.menu-font {
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #083b46;
}
/* Collapsed menu */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #083b46;
}
.collapsing, .in {background-color: #f7f7f7;}
.navbar-collapse.in, .collapsing {
    overflow-y: visible;
}
.navbar-nav>li {
    float: none;
    height: 45px;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 0;
}
.collapsing ul li a, .in ul li a {
    color: #083b46 !important;
    height: 45px;
    padding-top: 15px;
}
.collapsing ul li a:hover, .in ul li a:hover {
    color: #333333 !important;
    height: 55px;
}
.collapsing {
    /*-webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;*/
    -webkit-transition: height 0;
    -moz-transition: height 0;
    -ms-transition: height 0;
    -o-transition: height 0;
    transition: height 0;
}
@-webkit-keyframes fadeIn { from { opacity:0.47; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0.47; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0.47; } to { opacity:1; } }
/* Header */
.navbar {
    display: none;
    margin-bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.67), rgba(255, 255, 255, 0.43));
    border: 0;
    border-radius: 0;
    font-family: Open Sans, 'waan';
  	font-size: 18px;
  	font-weight: 600;
  	height: 80px;
}
.navbar-solid {
    /*animation-name: show;
    -webkit-animation-name: show;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;*/
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) !important;
    transition: all 0.8s !important;
}
.fixed-nav {
    padding-left: 20px;
    padding-right: 20px;
    height: 80px;
}
.navbar-header {
    height: 80px;
}
.navbar-brand {
    float: left;
    height: 50px;
    padding: 10px 0;
    font-size: 18px;
    line-height: 20px;
}
.navbar li a, .navbar .navbar-brand {
    color: #083b46 !important;
    text-decoration: none;
    height: 80px;
    padding-right: 0;
    padding-left: 0;
    margin-right: 15px;
    margin-left: 15px;
}
.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 110px;
}
.navbar-nav > li > a:hover, .navbar-nav > li.active > a {
    /*color: #333333 !important;
    background-color: #fff !important;*/
    border-bottom: solid 3px #03b3d5;
	text-decoration: none; 
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
	background-color: transparent;
}
.menu-phone-icon {
	width: 30px;
    /*float: left;
    margin-left: 40px;*/
}
.menu-call-us {
    width: 62px;
    font-family: 'waan';
    font-size: 64px;
    font-weight: normal;
    text-align: right;
    color: #854685;
    float: left;
    border-right: solid 3px #6e306e;
    padding-right: 15px;
    margin-left: 15px;
    line-height: 24px;
}
.menu-phone-no {
    font-family: 'waan';
    font-size: 64px;
    font-weight: normal;
    color: #854685;
    height: 50px;
    text-align: left;
    margin-top: -20px;
    margin-left: 12px;
}
.navbar-nav > li > a#menu-call {
    padding-top: 15px;
    width: 300px;
    text-align: center;
}
.navbar-nav > li > a#menu-call:hover, .navbar-nav > li.active > a#menu-call {
    border-bottom: 0;
	text-decoration: none; 
}
.navbar-nav > li > a#about-link {
    padding-bottom: 0;
    height: 35px;
    width: 200px;
    font-family: 'waan' !important;
    text-transform: uppercase;
}
.navbar-nav > li > a#contact-link {
    font-family: 'waan' !important;
    text-transform: uppercase;
}
.navbar-right {
    margin-right: 0;
    padding-bottom: 15px;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
    margin-top: 25px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent; 
}
.navbar-collapse.collapse {
    display: none!important;
}
.collapse.in {
    display:block !important;
}
.arrow-down {
    width: 10px;
}


/***********************************************************
* Main
************************************************************/
.rt-logo-center {
    width: 194px;
    height: 122px;
    display: block;
    margin: 20px auto;
}

.main-menu > div > a, .main-menu > div > ul {
    font-family: 'waan';
    color: #083b46 !important;
    text-decoration: none;
    font-size: 36px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.main-image img {
    width: 100%;
}
.main-call {
    margin-top: 30px;
    text-align: center;
}
#main-menu-call {
    padding-top: 15px;
    text-align: center;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
a#main-menu-call:focus, a#main-menu-call:hover {
    text-decoration: none;
}
.lang-text {
    margin-top: 16px;
    font-size: 30px;
    position: absolute;
    right: 10px;
    z-index: 10;
    bottom: -5px;
}
.lang-text > a, .lang-text-s > a {
    color: #083b46;
    text-decoration: none;
}
.lang-text-s {
    margin-top: 16px;
    font-size: 30px;
    position: absolute;
    right: 10px;
    z-index: 10;
    /*bottom: 10px;*/
    top: -15px;
}

/***********************************************************
* About
************************************************************/
#about {
    background-image: url('../images/aboutus.jpg');
    font-family: 'Open Sans', 'waan';
    background-size: cover;
}
.about-left {
    width: 0%;
    display: none;
}
.about-right {
    width: 100%;
}
.about-header {
    font-family: 'waan';
    font-size: 8vh;
    line-height: 0.5;
    font-weight: normal;
    color: #083b46;
    width: auto;
    padding-top: 60px;
    text-align: center;
}
.about-sub-header, .service-sub-header {
    font-family: 'Open Sans';
    font-size: 3.5vh;
    font-weight: bold;
    font-style: normal;
    font-stretch: condensed;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    text-transform: uppercase;
    color: #03b3d5;
}
.about-line, .service-line, .service-sub-line {
    border-top: solid 3px #083b46;
    width: 55px;
    margin: 15px auto 5px;
}
.about-detail-section, .service-sub-detail-section {
    width: 100%;
}
.about-detail, .service-sub-detail {
    background: rgba(255, 255, 255, 0.62);
    width: 100%;
    height: 100%;
    line-height: 1;
    margin-bottom: 15px;
}
.about-detail-text, .service-detail-text, .service-sub-detail-text {
    font-family: 'waan';
    font-size: 5vh;
    font-weight: normal;
    color: #083b46;
    padding: 10px 10px;
}
.address a, .address a:hover, .address a:focus {
    color: #083b46;
	text-decoration: none;
}
.address a#blue-text, .address a#blue-text:hover, .address a#blue-text:focus {
    color: #03b3d5;
	text-decoration: none;
}
.about-arrow {
    margin: 10px auto;
    text-align: center;
}
img.arrow {
    padding: 0 20px;
}

/***********************************************************
* Services
************************************************************/
#services {
    background-size: cover;
}
.service-sub-header {
    padding-top: 50px;
}
.service-line {
    margin: 15px auto 0;
}
.service-all-row {
    margin-bottom: 20px;
}
.service-detail {
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
}
.service-detail-text {
    padding: 0 10px;
    line-height: 1;
}
a#service-one, a#service-one:hover, a#service-one:focus,
a#service-two, a#service-two:hover, a#service-two:focus,
a#service-three, a#service-three:hover, a#service-three:focus,
a#service-one-back, a#service-one-back:hover, a#service-one-back:focus,
a#service-two-back, a#service-two-back:hover, a#service-two-back:focus,
a#service-three-back, a#service-three-back:hover, a#service-three-back:focus,
a#service-one-btm-back, a#service-one-btm-back:hover, a#service-one-btm-back:focus,
a#service-two-btm-back, a#service-two-btm-back:hover, a#service-two-btm-back:focus,
a#service-three-btm-back, a#service-three-btm-back:hover, a#service-three-btm-back:focus{
    cursor: pointer;
    text-decoration: none;
}
.service-1, .service-2, .service-3 {
    margin: 0;
    padding: 15px;
    background-color: #e1d3e4;
}
.service-2 {
    background-color: #d2e9ed;
}
.service-3 {
    background-color: #d5e9d1;
}
.service-1-icon, .service-2-icon {
    width: 25%;
    height: 25%;
    display: block;
    margin: 0 auto;
    padding: 10px 0 15px 0;
}
.service-1-icon {
    padding-top: 15px;
}
.service-3-icon {
    width: 35%;
    height: 35%;
    display: block;
    margin: 0 auto;
    padding: 20px 0 25px 0;
}
/*Deprecated*/
.service-2-bullet {
    width: 7%;
    padding-bottom: 4px;
}
.service-col-img-l {
    width: 40%;
    float: left;
    margin-right: 10px;
}
.service-col-img-r {
    width: 35%;
    float: right;
    margin-left: 10px;
    margin-top: 20px;
}
.service-col-img-c {
    width: 47%;
    margin: 10px auto;
}
.service-button {
    font-family: 'Open Sans';
    font-size: 2.3vh;
    font-weight: 300;
    width: 55%;
    margin: 10px auto 10px;
    padding: 8px;
    border-radius: 25px;
    border: solid 2px #083b46;
    color: #083b46;
    text-align: center;
}
.read-more-1, .read-more-2, .read-more-3 {
    font-family: 'Open Sans';
    font-size: 3vh;
    font-weight: 300;
    color: #654a6b;
    margin-left: 10px;
}
.read-more-2 {
    /*font-size: 2vh;
    width: 55%;
    margin: 10px auto 10px;
    padding: 8px;
    text-align: center;
    border-radius: 25px;
    border: solid 2px #083b46;*/
    color: #083b46;
}
.read-more-3 {
    color: #8f9f8c;
}
.service-sub-text {
    font-family: 'waan';
    font-size: 6vh;
    font-weight: normal;
    line-height: 0.82;
    color: #083b46;
    -webkit-text-stroke: 0.5px #083b46;
}


/* Sub detail for 3 services */
.service-sub-subhead {
    float: left;
    margin-left: 25px;
}
.service-number {
    font-family: 'Open Sans';
    font-size: 70px;
    font-weight: bold;
    font-stretch: condensed;
    line-height: 0.9;
    text-align: left;
    margin-left: 15px;
}
.service-sub-line {
    float: left;
    margin-left: 25px;
    height: 5px;
}
.service-link-back, .service-link-back-bottom {
    margin-left: 15px;
    margin-top: 15px;
}
.service-sub-detail-section {
    padding-right: 15px;
    padding-left: 15px;
    margin: auto;
}
.sub-detail .sub-detail-2 {
    margin-bottom: 0;
}
.sub-head-number {
    float: left;
}
.sub-head-text {
    margin-left: 10px;
}
.service-1-color {
    color: #e1d3e4;
}
.service-2-color {
    color: #d2e9ed;
}
.service-3-color {
    color: #d5e9d1;
}
/* Service 1 */
.service-one-slider, .service-two-slider {
    width: 100%;
    height: 250px;
    /*background-color: blanchedalmond;*/
    padding: 0 20px 15px 20px;
    margin-bottom: 10px;
}
.service-two-slider {
    padding: 0 20px 0 20px;
    margin-top: 15px;
}
#service-slider {
    height: 100%;
}
#service-2-slider {
    height: 100%;
    /*width: 50%;*/
    margin: 0 auto;
}
.col-40 {
    width: 100%;
    padding: 0 2px;
}
.col-20 {
    width: 100%;
    padding: 0 2px;
}
.service-table-header, .service-table-detail {
    font-family: waan;
    font-size: 10vw;
    font-weight: bold;
    line-height: 0.82;
    /*text-transform: uppercase;*/
    color: #083b46;
    -webkit-text-stroke: 0.5px #083b46;
    background-color: #e1d3e4;
    border: solid 2px #ffffff;
    padding: 10px;
}
.service-table-detail {
    font-size: 7vw;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 10px;
    color: rgba(8, 59, 70, 0.77);
}
.service-table-detail > ul {
    padding-left: 20px;
}
.detail-table {
    padding: 0 15px;
}

/* Service 2 */
#service-two-detail {
    /*background-image: url('../images/service-two.jpg');*/
    background-size: cover;
}
.service-two-image {
    display: none;
}
.number-2, .number-3 {
    padding: 0 5px;
}
.detail-2 {
    background: #d2e9ed;
    border-radius: 20px;
    line-height: 1.2;
    margin: 10px auto;
}
/* Service 3 */
#service-three-detail {
    font-family: 'Open Sans', 'waan';
    background-size: cover;
}
.sub-3 {
    width: 58%;
}
/*.service-3-left {
    width: 0%;
    display: none;
}
.service-3-right {
    width: 100%;
}*/
.icon-row {
    padding-left: 30px;
}
.icon-col {
    width: 100%;
    float: left;
}
.icon-item {
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 140px;
    margin: 10px 2%;
}
.detail-3 {
    margin-bottom: 0;
}
.baby-circle {
    width: 140px;
    height: 140px;
    /*margin: 5px 23px;*/
    border-radius: 70px;
    background-color: #d5e9d1;
    text-align: center;
    float: left;
}
.baby-icon {
    width: 100%;
    margin: 0 auto;
    /* padding: 10%; */
    /* display: block; */
    /* position: absolute; 
    display: table-cell;
    vertical-align: middle;
    text-align: center;*/
}
.baby-text {
    line-height: 0.8;
    padding: 0;
}
.baby-1, .baby-3, .baby-4 {
    width: 55%;
    margin: 25% auto;
}
.baby-2 {
    width: 45%;
    margin: 20% auto;
}
.baby-5 {
    width: 40%;
    margin: 28% auto;
}
.baby-6 {
    width: 50%;
    margin: 20% auto;
}
.baby-7 {
    width: 55%;
    margin: 10% auto;
    margin-left: 13px;
}
.baby-8 {
    width: 60%;
    margin: 30% auto;
}
/***********************************************************
* Contact Us
************************************************************/
#contact {
    background-color: #ffffff;
}
.contact-image {
    display: none;
}
.contact-form {
    background-color: #d2e9ed;
    padding: 15px 50px;
}
.contact-header {
    font-size: 62px;
    line-height: 1;
    font-family: 'waan', 'Open Sans';
    /*font-size: 10vw;*/
    font-weight: bold;
    font-stretch: condensed;
    color: #ffffff;
}
.contact-info {
    font-family: 'Open Sans';
    font-size: 3vw;
    font-weight: 300;
    font-style: italic;
    text-align: left;
    color: #083b46;
    margin-bottom: 20px;
}
#form-messages {
    margin-bottom: 10px;
}
.ui-select span.form-control {
    display: none;
}
.contact-button {
    width: 50%;
    border-radius: 22px;
    border: solid 2px #03b3d5;
    font-family: 'Open Sans';
    font-size: 3.5vw;
    font-weight: 600;
    text-align: center;
    color: #03b3d5;
    background-color: transparent;
    margin-top: 10px;
}
img#ajax-loader {
    border: none;
    vertical-align: bottom;
    margin: 2px 10px;
}
.contact-icon-col {
    height: 65px;
}
.contact-icon {
    width: 5%;
    float: left;
    margin-right: 10px;
    margin-top: 8px;
}
.address {
    color: #083b46;
    margin: 15px;
}
.address-line {
    font-family: 'waan';
    padding: 5px;
    font-size: 8vw;
    line-height: 0.8;
    padding-left: 30px;
}
.email-icon {
    margin-top: 13px;
}
.line-icon {
    width: 10%;
    float: left;
    margin-right: 4px;
    margin-top: 2px;
    margin-left: -8px;
}
.fb-icon {
    width: 4%;
    float: left;
    margin-left: 1px;
    margin-right: 16px;
    margin-top: 6px;
}
/*
.line-qr {
    width: 30%;
    margin: 0 auto;
}
*/
.contact-maps {
  padding: 0;
}
#googleMap {
    height: 300px;
    width: 100%;
}
/* Override */
.form-horizontal .form-group {
    margin-right: 0; 
    margin-left: 0; 
}
.form-control {
    font-family: 'Open Sans';
    /*font-size: 24px;*/
    font-weight: 300;
    color: #083b46;
}
/***********************************************************
* Footer
************************************************************/
.footer-block {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 300px;
    background-color: #083b46;
    padding: 30px 20px;
    color: white;
}
.footer-menu {
    margin: 0;
}
.footer-head {
    font-family: 'Open Sans';
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    color: #ffffff;
    text-align: left;
}
.footer-sub {
    text-align: left;
    margin-bottom: 30px;
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    color: #ffffff;
}
.footer-sub > ul {
    list-style: none;
    padding-left: 0;
}
a#mail-link, a#mail-link:hover, a#mail-link:focus {
    text-decoration: none;
}
.footer-link > a#mail-link, .footer-link > a#mail-link:hover, .footer-link > a#mail-link:focus {
    color: #ffffff;
    text-decoration: none;
}
.footer-font > a#blue-text, .footer-font > a#blue-text:hover, .footer-font > a#blue-text:focus {
    color: #03b3d5;
    text-decoration: none;
}
a.footer-link, .footer-link > a#mail-link {
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    color: #ffffff;
}
a.footer-link:hover, a.footer-link:focus {
    text-decoration: none; 
}
.footer-email {
    width: 10%;
    margin: 15px 15px;
    margin-left: 0;
}
.footer-fb {
    width: 15px;
    height: 30px;
    margin: 15px 15px;
    margin-left: 0;
}
.footer-line {
    width: 13%;
    margin-left: 0;
}
.footer-messenger {
    width: 25px;
    height: 25px;
    margin: 15px 15px;
    margin-left: 0;
}
.footer-call {
    width: 20px;
    height: 20px;
    margin-right: 15px;
}
.footer-font {
    font-family: 'waan';
    font-size: 35px;
    font-weight: normal;
    color: #ffffff;
    line-height: 1px;
}
.footer-font > a, .footer-font > a:hover, .footer-font > a:focus {
    text-decoration: none;
    color: #ffffff;
}
.footer-copyright {
    padding-left: 10px;
    margin-bottom: 0;
}

/***********************************************************
* Specifix size
************************************************************/
/* iPhone 5/6 : Landscape only */
@media only screen and (width: 568px) and (height: 320px), 
       only screen and (width: 667px) and (height: 375px),
       only screen and (width: 736px) and (height: 414px) {
    .icon-col {
        width: 50%;
        float: left;
    }
    .icon-row {
        padding-left: 0;
    }
    .icon-item {
        width: 140px;
        margin: 10px 0;
    }
    .baby-circle {
        width: 100px;
        height: 100px;
        margin: 0 20px;
    }
    .service-col-img-l {
        width: 20%;
        float: left;
        margin-right: 10px;
    }
    .service-col-img-r {
        width: 16%;
        float: right;
        margin-left: 10px;
        margin-top: -35px;
    }
    .service-col-img-c {
        width: 25%;
        margin: 10px auto;
    }
    .s2-info-1-1 {
        margin-top: 25px;
    }
    .s2-info-1-2 {
        margin-top: 65px;
    }
}
@media only screen and (width: 667px) and (height: 375px) {
    .icon-item {
        margin: 10px 3%;
        width: 140px;
    }
}
@media only screen and (width: 736px) and (height: 414px) {
    .icon-item {
        width: 140px;
        margin: 10px 5%;
    }
}
/* iPhone : Landscape only */
@media only screen and (min-width: 667px) {
    .address-line {
        padding-left: 50px;
    }
}
@media only screen and (max-width: 768px) and (min-width: 750px) {
    .detail-2 {
        padding: 30px;
    }
    .s2-info-1-2 {
        margin-top: 65px;
    }
    /* Service 3 */
    .icon-row {
        padding-left: 10px;
    }
    .icon-col {
        width: 100%;
        float: left;
    }
    .icon-item {
        width: 280px;
        margin: 10px 6%;
    }
    .baby-circle {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin: 0 40px;
    }
}
/* iPad only */
@media only screen and (min-width: 768px) {
    /***********************************************************
    * About us
    ************************************************************/
    .about-header {
        font-size: 8vh;
        line-height: 1;
    }
    .about-detail-text {
        font-size: 5.5vh;
        padding: 15px 15px;
    }
    /***********************************************************
    * Services
    ************************************************************/
    .service-1, .service-2, .service-3 {
        margin: 0 25px;
        padding: 15px;
        width: inherit;
        min-height: 420px;
    }
    .service-1-icon, .service-2-icon, .service-3-icon {
        width: 20%;
        height: 20%;
        display: block;
        margin: 0 auto;
        padding: 15px 0 25px 0;
    }
    /*.service-2-icon {
        padding: 0 0 25px 0;
    }*/
    .service-3-icon {
        width: 25%;
        height: 25%;
        padding: 45px 0 25px 0;
    }
    /*.read-more-2 {
        width: 45%;
        margin-top: 15px;
    }*/
    .service-button {
        width: 45%;
        margin-top: 15px;
    }
    /* Service detail */
    .service-number {
        font-size: 106px;
    }
    .two-lines {
        width: 75%;
        text-align: left;
    }
    .sub-3 {
        width: 41%;
    }
    .service-one-slider, .service-two-slider {
        height: 500px;
    }
    .service-table-header {
        font-size: 7vw;
    }
    .service-table-detail {
        font-size: 6vw;
    }
    .service-table-detail > ul {
        padding-left: 35px;
    }
    .detail-table {
        padding: 0 15px;
    }
    
    /***********************************************************
    * Contact us
    ************************************************************/
    .contact-column {
        width: 100%;
    }
    .contact-icon {
        width: 7%;
    }
    .contact-button {
        font-size: 1.5vh;
    }
    .address {
        margin-left: 40px;
    }
    .address-line {
        font-size: 5vw;
    }
    .address-row {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* iPhone 5 only */
@media only screen and (max-width: 320px) {
    .screen-xs{
        padding: 0 5px;
    }
    .footer-block {
	    padding-left: 15px;
        padding-bottom: 40px;
	}
    .icon-row {
        padding-left: 0;
    }
}
/* iPhone & mobile */
@media only screen and (max-width: 450px) {
    .about-header {
        font-size: 49px;
        font-size: 15.5vw;
    }
    .about-detail-text, .service-detail-text, .service-sub-detail-text {
        font-size: 28px;
        font-size: 9vw;
    }
    .about-sub-header, .service-sub-header {
        font-size: 22px;
        font-size: 7vw;
    }
    .service-all-row {
        margin-bottom: 0;
    }
    .service-1, .service-2, .service-3 {
        height: 300px;
    }
    .service-2 {
        height: 315px;
    }
    .service-sub-text {
        font-size: 35px;
        font-size: 11vw;
    }
    .read-more-1, .read-more-2, .read-more-3 {
        font-size: 13px;
        font-size: 4vw;
    }
    .service-button {
        font-size: 13px;
        font-size: 4vw;
    }
    .two-lines {
        width: 98%;
        text-align: left;
    }
    .sub-3 {
        width: 58%;
    }
    .icon-row {
        padding-left: 0; 
    }
}

/* Landscape for mobile device */
@media only screen and (max-width: 960px) and (max-height: 450px) {
    .about-sub-header, .service-sub-header {
        font-size: 3vw;
    }
    .about-header {
        font-size: 5.5vw;
        line-height: 0.8;
        padding-top: 20px;
    }
    .about-detail-text {
        font-size: 4vw;
        padding: 15px 15px 10px;
        margin-bottom: 0;
    }
    .service-detail-text, .service-sub-detail-text {
        font-size: 4vw;
    }
    .service-sub-text {
        font-size: 5vw;
    }
    .two-lines {
        width: 50%;
        text-align: left;
    }
    .read-more-1, .read-more-2, .read-more-3 {
        font-size: 2.4vw;
    }
    /*.read-more-2 {
        width: 30%;
    }*/
    .service-button {
        font-size: 2.4vw;
        width: 30%;
    }
    .service-1-icon {
        width: 15%;
        height: 15%;
    }
    .service-2-icon {
        width: 13%;
        height: 13%;
    }
    .service-3-icon {
        width: 20%;
        height: 20%;
    }
    /* Service detail */
    .service-number {
        font-size: 58px;
        margin-bottom: 0;
    }
    .service-one-slider {
        height: 300px;
    }
    .service-table-header {
        font-size: 6vw;
    }
    .service-table-detail {
        font-size: 5vw;
    }
    .service-table-detail > ul {
        padding-left: 30px;
    }
    .service-2-bullet {
        width: 4%;
        padding-bottom: 0;
    }
}

/************** Dropdown Menu ***************/
ul#service-drop li {
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul#service-drop li.drop {
    position: relative;
}
ul#service-drop > li {
    display: inline-block;
}
ul#service-menu li {
    border-bottom: solid 1px #03b3d5;
    border-radius: 0;
    margin: 0 10px 0 10px;
}
ul#service-menu li a {
    font-size: 32px;
    line-height: 44px;
    margin-left: 0;
    margin-right: 0;
    height: 44px;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
ul#service-menu li a:hover {
    color: #eee;
}
.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    border-width: 0 8px 7px;
    border-color: #FFFFFF transparent;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    width: 270px;
    position: absolute;
    z-index: 2;
    margin-left: -95px;
    top: -400px;
}
.dropOut {
    width: 270px;
    /*background: white;*/
    background:rgba(255,255,255,0.7);
    float: left;
    position: relative;
    margin-top: 0;
    opacity: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
.dropOut ul {
    float: left;
    padding: 0;
}
.dropOut ul li {
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    color: #000000;
    float: left;
    width: 250px;
    padding: 10px 10px 10px 10px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

ul#service-drop li a:hover { color: #03b3d5 !important; }
ul#service-drop li:hover .dropdownContain {
    top: 57px;
    left: 35%;
}
ul#service-drop li:hover .dropOut { opacity: 1; margin-top: 8px; }
.bubble {
    position: relative;
    width: 270px;
    height: 220px;
    padding: 0;
    background:rgba(255,255,255,0.87);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: #979797 solid 1px;
}
.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 8px 7px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -7px;
    left: 133px;
}
.bubble:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 8px 7px;
    border-color: #979797 transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -8px;
    left: 133px;
}
/************** Dropdown Menu ***************/