@import url('reset.css');
@import url('typography.css');
@import url('form.css');

ol,ul {
    list-style:none;
}


body {
    background: #FFFFFF;
    margin: auto;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    font-size: 07.5%;
   
}

.ie7 body{
    overflow:hidden;
}

a {
    text-decoration:none;
}


#status-bar {
    margin: 50px auto 0px auto;
    height: auto;
    width: 56%;
    float: right;
    position: relative;
}

#status-bar-content {
    background: url('../images/phone.png') no-repeat;
    margin: 20px auto 0px auto;
    width: 40%;
    float: left;
    height: 40px;
    z-index: 1;
    position: absolute;
}


#status-bar-network {
    margin: 20px auto 0px 40%;
    width: auto;
     z-index: 1;
    position: absolute;
}

#phone {
    text-align: center;
}

#viber {
    width: 40%;
    float: left;
}

#viber img {
    width: 90%;
}


#WA {
width: 40%;
   float: right;
}

#WA img {
    width: 90%;
}


#header {
    background-color: #FFFFFF;
    width: 100%;
    height: auto;
    overflow: hidden; 
    display: block;
    position:relative;
}

#slides img {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

#slides {
    width: 100%;
    display:block;
    position: absolute;
}


*{
    box-sizing: border-box;

}

#logo {
    margin: 10px auto 10px 100px;
    width: 15%;
    float: left;
    z-index: 1;
    position: absolute;
}

#logo img {
    width: 80%;
    height: auto;
}

#logo2 {
  margin: 3% auto 10px 100px;
    width: 18%;
    float: left;
    z-index: 1;
    position: absolute;
}

#logo2 img {
    width: 60%;
    height: auto;
}



/* Messanger */
#content-enquiry {
    margin: 12% auto auto 5%;
    width: 940px;
    z-index: 9999;
    position: relative;
}

#content-enquiry2 {
    margin: 15% auto auto 32%;
    width: auto;
    z-index: 9999;
    position: relative;
}

#slideshow-commands {
    right: 2%;
    float: right;
    padding-bottom: 25px;
    width: 50%;
    margin-top: 8%;
    z-index: 9999;
    position: relative;
    text-align: right;
}



#result {
    margin-left: 40px;
    margin-top:40px;
    width: 350px;
    background: #E9ECEF;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    padding:5px;
}


/* Main Contant */
#content {
    background-color: #FFFFFF;
    margin: auto;
    width: 100%;
}

#sign {
    margin-top: 4%;
    width: 100%;
    margin-bottom: 4%;
    text-align: center;
}


.responsive {
    background: url('../images/benefits-bg.png') repeat;
    overflow: auto;
    padding: 6px;
    float: left;
    width: 33.32%;
    height: 70px;

}

.responsive h5 {
    margin-top: 3%;
}


.responsive2 {
    background: url('../images/benefits22-bg.png') repeat;
    overflow: auto;
    padding: 6px;
    float: left;
    width: 33.32%;
    height: 70px;

}

.responsive2 h5 {
    margin-top: 3%;
}


.gallery h5 {
    text-align: center;
}

.gallery img{
    border: 1px solid #4d6e81;
}

.gallery img:hover{
    border: 1px solid #ccc;
}

.gallery img {
    width: 80%;
    height: auto;
    margin: 0 auto;
}

.benefits {
    background: #e3f4f9;
    width: 100%;
    padding-top: 0;
    height: auto;
    display: block;
    overflow: auto;
    margin-bottom: 2px;
}

.benefits h6 {
    margin-top: 2%;
    text-align: center;
}

.benefits-table {
    width: 100%;
    padding-top: 0;
    margin-bottom: 10px;
}


.benefits-table img {
    width: 60%;
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 15px;
}

.benefits-table table {
    width: 85%;
    margin-top: 2%;
    background: #e3f4f9;
    margin-left: 8%;
}

*{
    box-sizing: border-box;

}

.priority {
    overflow: hidden;
    float: left;
    width: 49.98%;
    height: 190px;
    top: 0;
    margin-bottom: 2px;

}

.priority-content h6 {
    text-align: center;
    margin-top: 3%;
    margin-bottom: 3%;
}

.priority-content p {
        margin-left: 15%;
        margin-right: 12%;
        font-size: 16px;
}

.priority-content img:hover{
    border: 1px solid #ccc;
}

.priority-content img {
    width: 98%;
    height: auto;
    margin-left: 0;
    top: -20px;
    display: block;
}

.button img {
    width: 30%;
    height: auto;
    margin-left: 15%;
    top: 15px;
    display: block;
}

.priority2 {
    overflow: hidden;
    float: left;
    width: 49.98%;
    height: 220px;
    top: 0;
    margin-bottom: 2px;

}

.priority-content2 h6 {
    text-align: center;
    margin-top: 3%;
    margin-bottom: 3%;
}

.priority-content2 p {
        margin-left: 5%;
        margin-right: 12%;
        font-size: 16px;
}

.priority-content2 img:hover{
    border: 1px solid #ccc;
}

.priority-content2 img {
    width: 98%;
    height: auto;
    margin-left: 0;
    top: -20px;
    display: block;
}

.button2 img {
    width: 30%;
    height: auto;
    margin-left: 5%;
    top: 15px;
    display: block;
}


.partners {
    background: url('../images/bg-DarkBlue.png') repeat;
    overflow: hidden;
    top: 3px;
    display: block;
    height: 330px;
    width: 100%;
    margin-bottom: 2px;
}

.partners h6 {
    text-align: center;
    margin-top: 3%;
    margin-bottom: 2%;
    color: #FFFFFF;
}

.partners-table img {
    width: 50%;
    margin-left: 0;
}

.partners-table table {
    width: 80%;
    margin-left: 10%;
}

.summary {
    background: url('../images/bg-DarkGreen.png') repeat;
    overflow: hidden;
    top: 3px;
    height: 330px;
    width: 100%;
    margin-bottom: 2px;
}


.summary h6 {
    text-align: center;
    margin-top: 3%;
    margin-bottom: 2%;
    color: #FFFFFF;
}

.summary p {
        margin-left: 10%;
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 2%;
        font-family: 'Lato', Arial, sans-serif;
        font-weight: 300;

}

/*ContactMedia*/

#header2 {
    background: url('../images/bg-header.png') repeat;
    width: 100%;
    height: auto;
    overflow: hidden; 
    display: block;
    position:relative;
}

#slides2 img {
    width: 100%;
    height: auto;
     top: -65px;
    overflow: hidden;
    position: relative;
}

#slides2 {
    width: 100%;
    display:block;
    position: absolute;
    height: 300px;
}

#content2 {
    background-color: #FFFFFF;
    margin: auto;
    width: 100%;
}

#leadtext {
	background-color: #c1d5df;
	clear: both;
	height: auto;
	margin: auto;
              position: relative;
              padding-top: 0px;
	width: 70%;
	}

.module-header-bar {
width: 100%;
padding: 20px auto auto 20px;
}

#leadtext img {
padding: 20px 0px 0px 20px;
}

#textline { 
background: url('../images/textLine.png') repeat-x;
clear: both;
height: 20px;
width: 95%;
margin: auto;
}

#content-bottom-shadow { 
background: url('../images/content-bottom-shadow.png') repeat-x;
clear: both;
height: 20px;
width: 100%;
}




/*Media for small screens*/

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

    #logo {
        margin: 5px auto 10px 40px;
        width: 25%;
    }

#logo2 {
      margin: 5px auto 10px 40px;
      width: 25%;

   }

    #slides img {
        top: 0;
        width: 130%;
        height: auto;
        display: block;
    }

    #status-bar {
        margin-top: 0px;
    }

    #status-bar-content {
        background: none;
        margin: 35px auto 0 -35px;
        width: auto;
        text-align: left;
    }

    #XXstatus-bar-network {
        margin: 5px auto 0px auto;
        width: 15%;
      
    }


    #phone {
        font-size: 16px;
        color: #FFFFFF;
    }

    #viber {
        width: 45%;
         padding-right: 0px;
    }
    #WA  {
        width: 45%;
        
    }


    #viber img {
        width: 100%;
    }
    #WA img {
        width: 100%;
    }

    #slideshow-commands {
        right: 2%;
        float: right;
        padding-bottom: 0px;
        width: 50%;
        margin-top: 0px;
        z-index: 9999;
        position: relative;
        text-align: right;
    }

#slides2 img {
    height: auto;
     width: 250%;
     top: 0px;
}

#slides2 {
    height: auto;
}

    #sign h2 {
        font-size: 18px;
        text-align: center;
    }

    #sign h3 {
        font-size: 16px;
        text-align: center;
    }

    #content-enquiry {
        margin: auto auto auto 75px;
        margin-top: 20%;
    }

  #content-enquiry2 {
        margin: auto auto auto 0px;
        margin: 20% 5px auto 5px;     
        width: auto;
  
}


    .responsive{
        width: 100%;
        height: 40px;

    }
    .responsive h5 {
        font-size: 16px;
        text-align: center;
        margin-top: 5px;

    }

.responsive2{
        width: 100%;
        height: 40px;

    }
    .responsive2 h5 {
        font-size: 16px;
        text-align: center;
        margin-top: 5px;

    }


    .gallery img {
        padding-left: 20%;
        border: none;
    }
    .gallery:hover {
        border: 1px solid #CCCCCC;
        background-color: #395666;
    }

    .gallery img:hover {
        border: none;
    }

.priority {
    width: 100%;
    height: auto;
    margin-bottom: 15px;

}

.priority-content h6 {
        font-size: 16px;
        text-align: center;
        margin-top: 3%;
        margin-bottom: 3%;
}

.priority-content p {
        margin-left: 5%;
        font-size: 16px;
}


.priority-content img {
    border: none;
    width: 100%;
    margin-left: 0;
}

.priority-content img:hover{
   border: none;
}

.priority2 {
    width: 100%;
    height: auto;
    margin-bottom: 15px;

}

.priority-content2 h6 {
        font-size: 16px;
        text-align: center;
        margin-top: 3%;
        margin-bottom: 3%;
}

.priority-content2 p {
        margin-left: 5%;
        font-size: 16px;
}


.priority-content2 img {
    border: none;
    width: 100%;
    margin-left: 0;
}

.priority-content2 img:hover{
   border: none;
}

.button2 img {
    width: 40%;
    height: auto;
    margin-left: 50%;
    top: 15px;
}


.benefits h6 {
        font-size: 16px;
        text-align: center;
        margin-top: 5%;
    }

.benefits-table img {
    width: 100%;
    margin-left: 0;
}

.benefits-table table {
    width: 100%;
    margin-left: 0;
}

.button img {
    width: 40%;
    height: auto;
    margin-left: 5%;
    top: 15px;
}

.partners {
    top: 3px;
    height: 250px;
    width: 100%;
    margin-bottom: 2px;
}

.partners h6 {
     font-size: 16px;    
      margin-top: 5%;
      margin-bottom: 2%;
}

.partners-table img {
    width: 85%;
    margin-left: 5px;
}

.partners-table table {
    width: 100%;
    margin-left: 0;
   margin-bottom: 3%;
}

.summary h6 {
        font-size: 16px;
        text-align: center;
        margin-top: 3%;
        margin-bottom: 3%;
}

.summary p {
        margin-left: 5%;
        font-size: 16px;
}

.footer-box {
     width: 100%;
     height: 60px;
     display: block;
     overflow: hidden;  
    position: absolute;  
}


.footer-box img {
    width: 50%;  
    top: 0px;
    height: auto;
    overflow: hidden;
    position: relative;
}

p.footer-copyright {
            top: 0;
            font-size: 8px;
           padding-right: 0;
}

.footer-sign h2 {
font-size: 10px;    
}

.footer-sign h3 {
font-size: 8px;
    }
    
    .body {
        font-size: 90%;
    }

 #container {
        max-width:  100%;
    }

}

/*Footer*/

.footer {
    background-color: #FFFFFF;
    padding-top: 0px;
    width: 100%;
    height: auto;
    display: block;
    overflow: auto;
}

.footer-box {
     width: 100%;
     height: 140px;
     display: block;
     overflow: hidden;  
    position: absolute;  
}

.footer-box img {
    width: 100%;  
    top: -25px;
    height: auto;
    overflow: hidden;
    position: relative;
}

.footer-sign {
margin: 1% auto 1% auto;  
}

.footer-sign h2 {
        font-size: 18px;
        text-align: center;
    }

.footer-sign h3 {
        font-size: 16px;
        text-align: center;
    }
    
p.footer-copyright {
    color: #2a384a;
    font-size: 12px;
    float: right;
    padding-right: 20px;
    position: relative;
    top: 150px;
}



table td {
    padding: 5px 5px;
}

table {
    float: left;

}

table img {
    width:100%;
    height: auto;
}

*{
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
}


@media screen and (max-width: 767px) {
       .footer {
        width: 100%;
        padding-top: 0;
        height: auto;
    }
}


/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/* Normalize placeholder styles */

/* chrome, safari */
::-webkit-input-placeholder {
    color:#FFFFFF;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#FFFFFF;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  {
    color:#FFFFFF;
    font-style:italic;
}




.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}


@media screen and (max-device-width: 480px) {
    /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
.footer-box {
     width: 100%;
     height: 80px;
     overflow: hidden;  
}


.footer-box img {
    width: 100%;  
    top: -5px;
    height: auto;
   }

p.footer-copyright {
             top: 75px;
}
}


@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
        -ms-filter: none !important; }
    a, a:visited { color: #444 !important; text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    a[href^=tel] { text-decoration: inherit; color: inherit;}

    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
}