/*	This is the master css of the website where all css code should go.
        NOTE: If you are using individual css for each page this should only contain the items you want to be constant throughout the website.
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic|Amaranth&subset=latin,latin-ext);
@import url('https://fonts.googleapis.com/css?family=Kanit|Titillium+Web');

body{font-family: 'Open Sans', sans-serif; font-size:1em; padding: 0px; margin:0px; width:100%; color:#111111; }
img{border:0px; max-width:100%; height:auto !important;}
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {max-width: none;}
a:link, a:visited{text-decoration:none; color:#2121aa;}
a:hover, a:active{text-decoration:none; color:#6b21aa;}
h1, h2, h3, h4, h5, h6, .title, .boxtitle, .boxtitledefault{margin-bottom:5px;font-family: 'Titillium Web', sans-serif; color: #009ac5;}
.title, .boxtitle, .boxtitledefault{font-size:2.5em;}

h1{font-size: 3em; margin: 0 0 10px 0 !important;}
h2{font-size: 2em; margin: 0 0 20px 0; color: #000000;}
h3{}

#container{width:100%; margin:0; padding:0;}
#hdrimg{ max-height: 100%; min-height:500px; margin:0 auto; padding:0; height: 730px; margin: -700px auto 0; border-radius: 0 0 150px 150px;}
#header{max-width: 100%; position: relative; z-index: 1; }
#header #hdrWrap{max-width: 1200px;margin:auto;text-align: center; border-radius: 10px; padding: 10px; background: #ffffff;max-width: 600px; margin: 20px auto 0;}
#header #hdrLogo{}
#header #hdrInfo{}
#header #hdrLogo #logoBg{max-width: 100%;padding:5px; margin:10px 5px;}
#header #hdrInfo #keyBg{max-width: 100%;padding:5px;font-size: 1em;margin:10px 5px;}

#header #hdrInfo #detailBg{max-width: 100%;padding:5px;font-size: 1em;margin:10px 5px;}
#header #hdrInfo #detailBg>ul{padding:0;margin:0;}
#header #hdrInfo #detailBg>ul>li{display:inline-block;list-style: none;margin:0;padding:0;}
#header #hdrInfo #detailBg>ul>li>a:link,#header #hdrInfo #detailBg>ul>li>a:visited{display: block;padding:0px 15px; margin:0; color:#111;}
#header #hdrInfo #detailBg>ul>li>a:hover,#header #hdrInfo #detailBg>ul>li>a:active{color:#111;}
#header #hdrInfo #detailBg>ul>li>a>span{display:inline-block;vertical-align: middle;height: 40px;line-height: 40px;padding:0px 2px;}
#header #hdrInfo #detailBg.mobile>ul>li>a>.detailTxt{display:none;}


#header #hdrWrap #navBar{font-family: 'Titillium Web', sans-serif;font-size:1.5em; background: #00a3dc; border-radius: 10px; margin: 10px auto 0;}
#header #hdrWrap #navBar.mobile{height:50px; overflow:hidden; position: absolute; left: 0; right: 0;}
#header #hdrWrap #navBar #navWrap{max-width: 1200px;margin:auto;}
#header #hdrWrap #navBar .navIcon{display:none;}
#header #hdrWrap #navBar.mobile .navIcon{display:inline-block; line-height:50px;height:50px;vertical-align: middle;padding:0px 20px;transition:0.2s linear;color:#fff;cursor:pointer;font-size:1.5em;}
#header #hdrWrap #navBar.mobile .navIcon:hover{background:rgba(255,255,255,0.3)}
#header #hdrWrap #navBar #navWrap>ul{display:block;margin:0;padding: 5px;text-align: center;}
#header #hdrWrap #navBar #navWrap>ul>li{display:inline-block;list-style: none;margin:0;padding:0;}
#header #hdrWrap #navBar.mobile #navWrap>ul>li{display:block;text-align: left;}
#header #hdrWrap #navBar #navWrap>ul>li>a:link, #header #hdrWrap #navBar #navWrap>ul>li>a:visited{display:inline-block;line-height:50px;height:50px;vertical-align: middle;padding:0px 20px;transition:0.2s linear;color:#ffffff;}
#header #hdrWrap #navBar #navWrap>ul>li>a:hover{background:#ffffff; border-radius: 10px; color:#009ac5;}

#header #hdrWrap #navBar #navWrap>ul>li>ul{display:none;margin:0;padding:0;text-align: left;position: absolute;background:#ffffff; z-index: 1000; font-size:0.9em !important;border-radius: 10px;}
#header #hdrWrap #navBar.mobile #navWrap>ul>li>ul{display:block;padding:0 0 0 10px;position: relative;font-size:0.9em;}
#header #hdrWrap #navBar #navWrap>ul>li>ul>li{display:inline-block;list-style: none;margin:0;padding:0;}
#header #hdrWrap #navBar #navWrap>ul>li>ul>li{display:block;text-align: left;}
#header #hdrWrap #navBar #navWrap>ul>li>ul>li>a:link, #header #hdrWrap #navBar #navWrap>ul>li>ul>li>a:visited{display:inline-block;line-height:50px;height:50px;vertical-align: middle;padding:0px 20px;transition:0.2s linear;color:#000000;}
#header #hdrWrap #navBar #navWrap>ul>li>ul>li>a:hover{background:#00a3dc; border-radius: 10px; color:#ffffff;}

.secBox1{padding: 20px 10px 20px 10px;  margin: 10px auto 10px; }
.secBox2{padding: 20px 10px 20px 10px; margin: 30px auto 30px; background: #00a3dc; max-width: 1200px; color: #ffffff; border-radius: 20px; }
.secBox2 h2{color: #ffffff;}
.secBox1 .textBox, .secBox2 .textBox{ max-width: 1200px; margin: 0 auto; text-align: justify;}
.textBox{ max-width: 1200px; margin: 20px auto 0; text-align: justify;}

.productsWrapNav{display: flex; justify-content: center; align-items: center; margin: 40px 20px 0 20px; align-content: center;}
.productsNav{text-align: center; margin: auto; width: 10%; margin: 10px;}
.productsNav a:link, .productsNav a:visited{text-decoration:none; color:#ffffff; display: block; padding: 10px; border-radius: 20px; transition: ease-in-out 0.3s; font-size: 1.3em; font-family: 'Titillium Web', sans-serif;}
.productsNav a:hover, .productsNav a:active{text-decoration:none; color:#ffffff; background: #00a3dc; }
.productsNavImg{display: block;}
.productsNav a:hover .productsNavImg, .productsNav a:active .productsNavImg{animation: bounce 1s;}

#fancybox_18, #fancybox_19, #fancybox_21, #fancybox_22, #fancybox_23, #fancybox_24, #fancybox_25, #fancybox_26{max-width: 1200px !important; margin: auto !important; padding: 20px 10px 20px 10px;text-align: left !important; transition: ease-in-out 0.3s; background: #00a3dc; border-radius: 20px;}
.fancybox{border: 2px solid #ffffff !important; box-shadow: 0 1px 2px #747778 !important; padding: 0 !important; margin: 10px 5px 10px 5px !important; border-radius: 10px !important; max-width: 100% !important; }
.fancybox img{border-radius: 10px !important;}
/*.fancybox img{border-radius: 5px !important; border: 2px solid #ffffff !important; padding: 5px 5px 10px 0 !important;}*/
.fancybox:hover, .fancybox:active{border: 2px solid #000000 !important; box-shadow: none !important;}
/*.fancybox:hover img, .fancybox:active img{border: 2px solid #000000 !important; border-radius: 5px !important;}*/

.enquireNow{text-align: center; margin: auto;}
.enquireNow a:link, .enquireNow a:visited{text-decoration:none; color:#ffffff; background: #009ac5; display: inline-block; padding: 10px; border: 2px solid #009ac5; border-radius: 10px; text-align: center; margin: auto; transition: ease-in-out 0.3s;}
.enquireNow a:hover, .enquireNow a:active{text-decoration:none; color:#009ac5; background: #ffffff; display: inline-block; padding: 10px; }

#quicklinks{background:#efefef; border:1px solid #cfcfcf;}
#quicklinks ul, #quicklinks li{list-style:none; display:inline;}
#contentmask{width:100%; height:100%; margin: auto 0; }
#contentbox{max-width:100%; margin:0 auto; background: #ccf1fc; padding: 20px 0 20px 0; border-radius: 150px 150px 0 0;}
#contentbox h3{color: #000000;}
#sidebar{max-width:1200px;margin:0 auto;}
#footer{width:100%;margin: auto 0; padding: 10px 0 10px 0;color:#ffffff; background: #00a3dc;}
#footer a:link, #footer a:visited{text-decoration:none; color:#ffffff;}
#footer a:hover, #footer a:active{text-decoration:underline; color:#ddd;}
#footer #copytext{text-align:center; line-height:2em; min-height:3em; font-size:0.8em;padding:0;}


.clearboth{clear:both;}
.list_row1{padding:5px;border-bottom:1px solid rgba(0,0,0,0.1); background-color:rgba(200,200,200,0.1); border-top:1px solid rgba(0,0,0,0.1);transition: 0.3s ease-in-out;}
.list_row2{padding:5px;background-color:rgba(250,250,250,0.1);transition: 0.3s ease-in-out;}
.highlight, .list_row1:hover, .list_row2:hover{background-color:rgba(255,255,255,0.9);}
form{ max-width: 1200px !important; margin: 30px auto 0 auto !important; background: #ffffff; border: solid 2px #009ac5; margin:2px;padding:5px;border-radius:10px;}
.buttons{display:inline-block;padding:4px 2px 4px;font-size:1em;line-height:1.5em;color:#303030;text-align:left;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#fefefe;border:1px solid #a0a0a0;border-bottom-color:#505050;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);margin:1px;}
.buttons:hover{box-shadow:0 0 4px #808080;background-color:#e0e0e0; background:linear-gradient(#e0e0e0, #e0e0e0 25%, #fefefe);}
input[type="text"]{cursor:text;}
input[type="submit"]{cursor:pointer;}
input[type="reset"]{cursor:pointer;}
input[type="checkbox"]{cursor:pointer;}
textarea{cursor:text;}
select{cursor:pointer;}

@keyframes bounce {
	0%, 20%, 60%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
	40% {-webkit-transform: translateY(-20px);transform: translateY(-20px);}
	80% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}
}
@media screen and (max-width:1600px){
    .productsWrapNav{margin: 30px 20px 30px 20px;}
    .productsNav{width: 14%;margin: 5px;}
}


@media screen and (max-width:1300px){
    #contentbox{padding: 30px 5px 10px 5px; border-radius: 100px 100px 0 0;}
    #hdrimg{border-radius: 0 0 100px 100px;}
    .secBox2{margin: 0px auto 30px; }
}

@media screen and (max-width:1200px){
    .secBox1{margin: 10px; }
    .secBox2{ margin: 30px 10px 30px 10px;} 
    .productsNav a:link, .productsNav a:visited{font-size: 1em;}
}

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

@media screen and (max-width:1000px){
    #map-canvas{ width: 90% !important; margin:0 !important;}
    #header{margin: 60px auto 0;}
    h1{font-size: 2.5em; text-align: left !important;}
    .secBox2{margin: 30px 10px 30px 10px;}
}

@media screen and (max-width:900px){
    .spcBox{margin:5px;}
    .productsNav a:link, .productsNav a:visited{font-size: 0.9em;}
    
}

@media screen and (max-width:800px){
    .productsWrapNav{margin: auto; background: #00a3dc; flex-wrap: wrap;}
    .UserFormSecure2>div>div, .UserFormSecure3>div>div, .UserFormSecure4>div>div, .UserFormSecure1>div>div, .UserFormSecure5>div>div, .UserFormSecure5>div>div, .UserFormSecure6>div>div, .UserFormSecure7>div>div, .UserFormSecure8>div>div{min-height:2px; width:auto !important;float:none !important;}
    #ddb_left_column{float:none !important;width:auto !important;}
    #ddb_right_column{float:none !important;width:auto !important;}
    .secBox1 .textBox, .secBox2 .textBox{text-align: left;}
    #hdrimg{ height: 900px; margin: -900px auto 0;border-radius: 0;}
    .productsNav{width: 20%;}
     #header{margin: 20px auto 0;}
     #header #hdrWrap{margin: 0 auto 20px;}
}

@media screen and (max-width:700px){
    #fancybox_18, #fancybox_19, #fancybox_21, #fancybox_22, #fancybox_23, #fancybox_24{ text-align: center !important;}
    #header #hdrLogo{width: 50%; margin: auto; text-align: center;}
    #header #hdrInfo #keyBg{font-size: 0.9em;}
    #contentbox{border-radius: 40px 40px 0 0;}
    h1{font-size: 2em; text-align: center !important;}
    h2{font-size: 1.5em; text-align: center;}
    #hdrimg{height: 760px; margin: -760px auto 0;}
}

@media screen and (max-width:600px){
    #header{width: 90%;}
    #map-canvas{ width: 80% !important; margin:0 !important;}
    #header #navBar{font-size: 1.2em;}
    #header #hdrInfo #detailBg>ul>li>a:link,#header #hdrInfo #detailBg>ul>li>a:visited{padding: 0px 10px;}
    #header #hdrInfo #keyBg{font-size: 0.8em;}
    #header #hdrInfo #detailBg{font-size: 0.8em;}
    #hdrimg{height: 500px; margin: -400px auto 0;}
}

@media screen and (max-width:500px){
    .productsWrapNav{display: none;}
}

@media screen and (max-width:400px){
}

@media screen and (max-width:360px){
}