@import url('reset.css');
@import url(https://fonts.googleapis.com/css?family=Courgette);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,600,600italic,700,500italic,700italic,800,800italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700,600italic,700italic,800,800italic);

body{font-family: 'Open Sans', sans-serif!important}

/*******sub tilte reflec*******/
a{ 
color:#000; text-decoration:none !important;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
			 }
a:hover{ 
color:#ed1b24; text-decoration:none !important;
-webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
}

hr{color:#ddd !important;background-color:#ddd !important;height:1px;border:none;}


/**************content****************/

.title{font-size:280%;color:#182766; font-weight:600;line-height:1em}
.sub-title{font-size:140%;color:#666; font-weight:600;}
.black-text{color:#000; font-weight:900; font-size:135%; text-transform:uppercase; letter-spacing:0; line-height:1em; margin-bottom:10px}
.orange-text{color:#ea5124; font-weight:400;text-transform:uppercase; font-size:115%; margin-bottom:10px}
.bigtext-right{color:#f5dfc1; line-height:1em; text-align:right; font-weight:600; text-transform:uppercase; font-size:300%; letter-spacing:-0.05em}
.bigtext-left{color:#e2ded3; line-height:1em; text-align:left; font-weight:600; text-transform:uppercase; font-size:300%; letter-spacing:-0.05em}


/************************* team  ********************/
.special-text{font-family:"Times New Roman", Times, serif; color:#000; font-size:200%; text-align:center;}
.small-text{font-size:85%; line-height:1.15em; letter-spacing:-0.01em; color:#000}
.big-text{font-size:120%; line-height:1.15em; letter-spacing:0.01em; font-weight:600; color:#182766; padding:30% 15px; text-transform:uppercase; color:#000}
.color-bg{background-color:#efefef !important;}
.team{background-size:auto 100% !important; height:200px; background:no-repeat center top;margin-bottom:10px}
.round{border-radius:50%; max-width:200px; height:200px; margin:10px auto}
.mi-vi-text{ font-size:120%;}

.thumb-wrapper{ overflow:hidden;position:relative;}
.thumb-1,.thumb-2,.thumb-3,.thumb-4{ background-size:100% auto; padding:0 !important;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;height:447px; }
.thumb-1:hover,.thumb-2:hover,.thumb-3:hover,.thumb-4:hover
{
	opacity:0.8;
	-ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
		
.thumb-1{background:#CCC url(../images/thumb-balik-kampung.png) no-repeat center center;}
.thumb-2{background:#CCC url(../images/thumb-download-form.png) no-repeat center center;}
.thumb-3{background:#CCC url(../images/thumb-cops-sourvenirs.png) no-repeat center center;}
.thumb-4{background:#CCC url(../images/thumb-online-shopping.png) no-repeat center center;}
.orange-overlay{
	background:url(../images/thumb-orange-overlay.png) no-repeat center bottom;
	background-size:100% 100%; 
	/*background-color:rgba(255,156,0,0.8);*/
	color:#000; 
	position:absolute;
	top:-5%;
	margin:0 auto;
	left:0; right:0;
	text-transform:uppercase; 
	font-size:250%;
	font-weight:300; 
	text-align:left; 
	height:auto; 
	min-height:220px;
	padding:10% 5%;
	line-height:1em; 
	-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;
	}
.orange-overlay:hover{top:0%; color:#fff;}

.sup-link{color:#fff; text-decoration:underline !important; line-height:1.5em}
.sup-link:hover{color:#ff9c00;}

.contbox-height{height:350px; padding:50px 15px}
.box-color-1{background:#57a79a; color:#fff;}
.box-color-2{background:#393f57; color:#fff}
.box-color-3{background:#b75526; color:#fff}

.Inspector{background:url(../images/Dato-Sri-Khalid.png) no-repeat center top;height:150px; width:150px; background-size:100% auto; margin:0 auto; border-radius:50%;
background-color: rgba(24,39,100,1);
background-color: -moz-linear-gradient(top, rgba(24,39,100,1) 60%, rgba(255,255,255,1) 100%);
background-color: -webkit-gradient(left top, left bottom, color-stop(60%, rgba(201,255,150,1)), color-stop(100%, rgba(255,255,255,1)));
background-color: -webkit-linear-gradient(top, rgba(24,39,100,1) 60%, rgba(255,255,255,1) 100%);
background-color: -o-linear-gradient(top, rgba(24,39,100,1) 60%, rgba(255,255,255,1) 100%);
background-color: -ms-linear-gradient(top, rgba(24,39,100,1) 60%, rgba(255,255,255,1) 100%);
background-color: linear-gradient(to bottom, rgba(24,39,100,1) 60%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#182766', endColorstr='#ffffff', GradientType=0 );
}
.title-speech{font-weight:600; font-size:120%; color:#182766}

.footer{color:#fff; font-size:90%;}
.footer a{color:#fff}
.footer a:hover{color:#ffa100}


/**************************pop out*****************************/

.overlay {position: fixed;top: 0; bottom: 0;left: 0;right: 0; background: rgba(0, 0, 0, 0.7);transition: opacity 500ms;visibility: hidden;opacity: 0; z-index:99999999999999999999999999 !important;}
.overlay:target {visibility: visible;opacity: 1;}
.popup {margin:0 auto;padding:5% 0; background: #fff;border-radius: 5px;width: 70%;position:absolute;transition: all 5s ease-in-out; top:10%; left:0; right:0; z-index:999999999999999999999999999999 !important}
.popup .close {position: absolute;top: 5px;right: 5px;transition: all 200ms;font-size: 30px;font-weight: bold;text-decoration: none;color: #333; z-index:9999999999999999999999999999999}
.popup .close:hover {color: #06D85F;}
.popup .content { max-height:60vh;overflow-y:scroll;}


@media(max-width:999px){.orange-overlay{padding:25% 10px; font-size:200%; font-weight:600}}
@media screen and (max-width: 700px){.box{width: 90%;}.popup{width: 90%;}}
@media(max-width:767px){.big-text{font-size:100%; padding:30% 5px;}
.thumb-1,.thumb-2,.thumb-3,.thumb-4{height:300px;background-size:100% auto;}
.thumb-wrapper{margin-bottom:10px}
}
@media(max-width:360px){.round{border-radius:50%; max-width:125px; height:125px; margin:10px auto}
.mi-vi-text{ font-size:100%;}}