/*	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&display=swap');
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: 'Kanit', sans-serif; color: #064998;}
.title, .boxtitle, .boxtitledefault{font-size:2.5em;}

h1{font-size: 3em; margin: 0 0 20px 0 !important;}
h2{font-size: 1.8em; margin: 0 !important;}
h3{font-size: 1.5em; margin: 0 !important;}

#container{width:100%; margin:0; padding:0;}
#container{width:100%; margin:0; padding:0;}
#header{width:100%;  margin:0 auto; padding:0; }
#hdrImg{height: 730px;margin: -225px auto 0;}
#header #hdrWrap{margin:auto;text-align: center; padding: 20px 0 0 0;}
#header #hdrLogo{vertical-align: middle;}
#header #hdrInfo{vertical-align: middle; margin: auto; text-align: center;padding: 230px 0 0 0;}
#header #hdrLogo #logoBg{max-width: 100%; margin: auto; text-align: center;}
#header #hdrInfo #keyBg{max-width: 100%;font-size: 2em; color: #ffffff;font-family: 'Kanit', sans-serif;margin: 80px auto 0; max-width: 1200px; padding: 0 10px;}

#header #hdrInfo #detailBg{max-width: 100%; padding:5px; font-size: 1em;margin:10px 5px;font-weight: bold; font-family: 'Kanit', sans-serif;}
#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:#ffffff;}
#header #hdrInfo #detailBg>ul>li>a:hover,#header #hdrInfo #detailBg>ul>li>a:active{color:#ffffff;}
#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 #navBar{font-family: 'Kanit', sans-serif;font-size:1em; margin: -60px auto 0;}
#header #navBar.mobile{height:50px; overflow:hidden;}
#header #navBar #navWrap{max-width: 1200px;margin:auto;}
#header #navBar .navIcon{display:none;}
#header #navBar.mobile .navIcon{display:inline-block; line-height:50px;height:50px;vertical-align: middle;padding:0px 20px;transition:0.2s linear;color:#064998;cursor:pointer;font-size:2em;}
#header #navBar.mobile .navIcon:hover{background:#064998; color:#ffffff;}
#header #navBar.mobile #navWrap>ul{background:#064998; border-radius: 5px; padding: 5px;}
#header #navBar #navWrap>ul>li{margin: 5px; padding: 0;}
#header #navBar.mobile #navWrap>ul>li>a:link, #header #navBar.mobile #navWrap>ul>li>a:visited{display: block;padding: 5px; margin: 0; border-radius: 0; border: none; color:#ffffff; background: none; line-height:40px;height:40px;}
#header #navBar.mobile #navWrap>ul>li>a:hover{background:#ffffff; border: none; color: #064998; border-radius: 10px;}
#header #navBar #navWrap>ul{display:block;margin: 5px;padding:0;text-align: center;}
#header #navBar #navWrap>ul>li{display:inline-block;list-style: none;margin:5px;padding:0;}
#header #navBar.mobile #navWrap>ul>li{display:block;text-align: left;}
#header #navBar #navWrap>ul>li>a:link, #header #navBar #navWrap>ul>li>a:visited{display:inline-block;line-height:40px;height:40px;vertical-align: middle; background: #ffffff; padding: 10px 20px; border-radius: 15px; border: 1px solid #064998; transition:0.3s ease-in-out;color:#064998;}
#header #navBar #navWrap>ul>li>a:hover{background:#064998; border: 1px solid #ffffff; color: #ffffff;}
#header #navBar #navWrap>ul>li>a.active{background:#064998; border: 1px solid #ffffff; color: #ffffff;}

#secWrap{display: flex; justify-content: space-around; align-items: center;}
#secWrap2{display: flex; justify-content: space-around; align-items: flex-start;}
#sec1{width: auto;}
#sec2{width: 50%; margin: 0 0 0 40px;}
#sec3{width: 50%; margin: 0 0 0 40px;}
#sec2 h2{text-align: left !important;}


/*#header #navBar #navWrap>ul>li>ul{display:none;margin:0;padding:0;text-align: left;position: absolute;background:rgb(0,104,44); z-index: 1000;}
#header #navBar.mobile #navWrap>ul>li>ul{display:block;padding:0 0 0 10px;position: relative;font-size:0.9em;}
#header #navBar #navWrap>ul>li>ul>li{display:inline-block;list-style: none;margin:0;padding:0;}
#header #navBar #navWrap>ul>li>ul>li{display:block;text-align: left;}
#header #navBar #navWrap>ul>li>ul>li>a:link, #header #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:#fff;}
#header #navBar #navWrap>ul>li>ul>li>a:hover{background:rgba(255,255,255,0.3)}*/

.secBox1{padding: 70px 10px 0 10px;}
.secBox1 a:link, .secBox1 a:visited{text-decoration:none; color:#eee8da; font-weight: bold;}
.secBox1 a:hover, .secBox1 a:active{text-decoration:none; color:#ffffff;}
.secBox2{padding: 40px 10px 40px 10px; margin: auto;}
.secBox1 .textBox, .secBox2 .textBox, .textBox{ max-width: 1200px; margin: 0 auto; text-align: justify;}

.photogallery .fancybox{border:none !important;background:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 2px !important;opacity:1;transition:0.4s ease-in-out;}
.photogallery .fancybox:hover{opacity:0.6;}

.fancybox-opened .fancybox-skin{box-shadow:none !important;}
.fancybox-skin{background:none !important;}
.fancybox-outer{box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;}




#quicklinks{background:#efefef; border:1px solid #cfcfcf;}
#quicklinks ul, #quicklinks li{list-style:none; display:inline;}
#contentmask{width:100%; height:100%; margin: auto; }
#contentbox{max-width: 1200px; margin:0 auto;padding: 0;}
#sidebar{max-width:100%;margin:0 auto;}
#footerImg{background:#ffffff url("/styles/stylesets/202101sihlahla/images/ftr.png") no-repeat center top; height: 116px;}
#footer{width:100%;margin:0; padding:0;color:#fff; background: #064998;}
#footer a:link, #footer a:visited{text-decoration:none; color:#fff;}
#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:10px;}


.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); color: #000000;}
form{ background: #064998; margin:auto !important;padding:5px;border-radius:5px; max-width: 1200px; color: #ffffff;}
form .boxtitle{color: #ffffff;}
.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;}

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

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

@media screen and (max-width:1000px){
    #map-canvas{ width: 90% !important; margin:0 !important;}
    #header #navBar{font-size:1em;}
    #header #hdrInfo #detailBg{padding: 5px 0 0 0; font-size: 0.9em;}
    #header #hdrInfo #detailBg>ul>li>a:link, #header #hdrInfo #detailBg>ul>li>a:visited{padding: 0 10px;}
    #hdrImg{min-height:500px; height: 500px;}
    #header #hdrInfo #keyBg{margin: 40px auto 0;font-size: 2em;}
    #secWrap,#secWrap2{flex-wrap: wrap;}
    #sec1,#sec3{width: 100%; margin:auto;}
    #sec2{width: 100%; margin: 10px auto 0; text-align: center;}
    #sec2 h2{text-align: center !important;}
}

@media screen and (max-width:900px){
    #header #hdrLogo{max-width: 350px; text-align: center; margin: auto;}
    #hdrImg{margin: -200px auto 0;}
    .spcBox{margin:5px;}
    #header #hdrWrap{flex-wrap: wrap;}
    #header #hdrInfo{text-align: center; width: 100%;}
    #header #hdrInfo #detailBg>ul>li>a:link, #header #hdrInfo #detailBg>ul>li>a:visited{padding: 0 20px;}
    .secBox1 .textBox, .secBox2 .textBox{text-align: left;}
    h1{font-size: 2em;}
    h2{font-size: 1.5em;}
    #secWrap{flex-wrap: wrap;}
    #sec1{width: 100%;}
    #sec2{width: 100%; margin: 30px auto 0; text-align: center;}
    #header #hdrInfo #keyBg{font-size: 1.5em;}
}

@media screen and (max-width:800px){
    #header #hdrWrap{padding: 20px 0 0 0;}
    #hdrImg{min-height:400px; height: 400px;margin: -201px auto 0;}
    #header #hdrInfo{padding: 185px 0 0 0;}
    #header #navBar{margin: auto;}
    #header #hdrInfo #keyBg{font-size: 1.2em;}
    .UserFormSecure101>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;}
    #secWrap{flex-wrap: wrap;}
    #sec1{width: 100%;}
    #sec2{width: 100%; margin: 20px auto;}
    .secBox1{padding: 50px 10px 0 10px;}
    form{ border-radius:0px;}
    
    
}

@media screen and (max-width:700px){
    #header #navBar #navWrap>ul>li>a:link, #header #navBar #navWrap>ul>li>a:visited{padding: 10px; border-radius: 20px;}
}

@media screen and (max-width:600px){
    #map-canvas{ width: 80% !important; margin:0 !important;}
    
}

@media screen and (max-width:500px){
    #header #hdrLogo{max-width: 250px;}
    #header #hdrInfo #keyBg{font-size: 1.1em;}
    #header #hdrInfo #detailBg{padding: 10px 0 0 0;}
    h1{font-size: 1.5em;}
    h2{font-size: 1.3em;}
}

@media screen and (max-width:400px){
    h3{font-size: 1.2em;}
}

@media screen and (max-width:360px){
    #header #hdrInfo #keyBg{font-size: 1em; margin: 20px auto 0;}
}