@font-face {
    font-family:bebas;
    src: url('bebas.eot');
    src: local(bebas), url('bebas.ttf') format('opentype');
}
@font-face {
    font-family:cicle;
    src: url('cicle.eot');
    src: local(cicle), url('cicle.ttf') format('opentype');
}
@font-face {
    font-family:aller;
    src: url('aller.eot');
    src: local(aller), url('aller.ttf') format('opentype');
}

/* DEFAULTS */

body{
	margin:0px;
	overflow:hidden;
	font-family:verdana, arial, sans-serif;
	color:#555;
}

html,body{
	height:100%;
}

input{
	padding:2px;
	font-size:10pt;
	letter-spacing:1px;
	color:#333;
	border:1px dotted #c60;
}

input:focus{
	background-color:#fffae7;
}

input.btn{
	padding:2px 15px;
	border-radius:0px 10px 10px 0px;
	border:1px solid #369;	
	color:#369;
	background-color:#fff;
	-moz-transition:0.3s;
	-webkit-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}

input.btn:hover{
	background-color:#369;
	color:#fff;
}

/* MENU */
div#menu{
	width:200px;
	height:300px;
	position:fixed;
	left:50px;
	top:50px;
	z-index:10;
}


div#menu-mouseover{
	width:200px;
	height:300px;
	background:rgba(000,000,000,0.5);
	
	border-radius:20px;
	border:1px dotted #555;
	box-shadow:3px 3px 4px rgba(50,50,50,0.5);
	padding-top:20px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;

	-webkit-transition:0.4s;
	-moz-transition:0.4s;
	-o-transition:0.4s;
	transition:0.4s;
	
}

div#menu-mouseover:hover{
	background:#000;
}


div#menu a{
	display:block;
	text-decoration:none;
	font-size:14pt;
	margin-bottom:10px;
	margin-left:30px;
	font-family:bebas, verdana, arial, sans-serif;
	color:yellow;
	/*color:#a8b9c8;*/
	text-shadow:1px 1px 1px #000;

	border-bottom:1px solid transparent;
	
	-webkit-transition:0.4s ease-out;
	-moz-transition:0.4s ease-out;
	-o-transition:0.4s ease-out;
	transition:0.4s ease-out;
}

div#menu a:hover{
	color:#eda25d;
	border-bottom:1px dashed #eda25d;
	width:80%;
	
	-webkit-transform:translate(12px,0px);
	-moz-transform:translate(12px,0px);
	-o-transform:translate(12px,0px);
	transform:translate(12px,0px);
	
}
/* === end MENU === */



/* FOOTER */
div#footer{
	width:50%;
	height:100px;
	position:fixed;
	left:5%;
	bottom:0px;
	z-index:10;
	background-color:#333;
	border-radius:20px 20px 0px 0px;
	padding:30px;
	box-sizing:border-box;
	color:#ddd;
	box-shadow:0px 0px 0px 2px #666;
}

div#footer hr{
	border:1px dashed #777;
}

/* === end FOOTER === */


div#sector1, div#sector2{
	width:300%;
	height:100%;
	background:black;
}

div#sector1{
	/* background-image:url(images/sec1.jpg);
	background-size:cover; */
	background-position:bottom;
}

div#sector2{
	background-image:url(images/intel.jpg);
	background-size:cover;
	background-position:bottom left;
	
} 




div#q1{
	width:33.33%;
	height:100%;
	display:inline-block;
	background:url(images/multikomhome.png);
	background-size:cover; 
	float:left;
}

div#q2{
	width:33.33%;
	height:100%;
	display:inline-block;
	background-image:url(images/minfotech.jpg);
	background-size:cover; 
	float:left;
}

div#q3{
	width:33.33%;
	height:100%;
	display:inline-block;
	background-image:url(images/sec1.jpg);
	background-size:cover;
	float:left;
}

div#q4{
	width:33.33%;
	height:100%;
	display:inline-block;
	background-image:url(images/cctv.jpg);
	background-size:cover;
	float:left;
}

div#q5{
	width:33.33%;
	height:100%;
	display:inline-block;
	background-image:url(images/qms.jpg);
	background-size:cover;
	float:left;
}

 div#q6{
	width:33.33%;
	height:100%;
	display:inline-block;
	background-image:url(images/world.jpg);
	background-size:cover;
	clear:both;
}


/* Quadrant 1 */

div#q1-box1{
	position:absolute;
	right:120px;
	top:450px;
	text-align:right;
	width:50%;
	height:auto;
}

h1#q1-title{	
	font-family:bebas, verdana, arial, sans-serif;
	font-weight:normal;
	font-size:45pt;
	letter-spacing:1px;
	word-spacing:7px;
	color:yellow;
	margin:0px;
	text-shadow:2px 2px 2px #000;
}

h1#q1-subtitle{	
	font-family:verdana, arial, sans-serif;
	font-weight:normal;
	font-size:16pt;
	color:#fff;
	margin:0px;
}

h3#multikom{
	color:#f93;

}

div.textbox{
	width:60%;
	height:60%;
	background:rgba(000, 000, 000, 0.8);
	border:1px dotted #369;
	border-radius:20px;
	padding:180px 0px 0px 0px;
	margin:36px 0px 0px 330px;
	/*font-family:bebas, verdana, arial, sans-serif; */
	font-weight:normal;
	font-size:18pt;
	color:white;
	text-align:center;
}

div#textbox{
	width:35%;
	height:30%;
	background-color:#fff;
	border:1px dotted #369;
	border-radius:20px;
	padding:500px 0px 0px 0px;
	margin:100px auto auto 270px;
	font-family:bebas, verdana, arial, sans-serif;
	font-weight:normal;
	font-size:30pt;
}

/* main module buttons */
a.q1-modbtn{
	display:inline-block;
	width:75px;
	height:77px;
	overflow:hidden;
	background-image:url(images/logo-ps.jpg);
	text-indent:9999px;
	margin-right:12px;

	box-shadow:3px 3px 3px #777;
	-webkit-transition:0.4s ease-out;
	-moz-transition:0.4s ease-out;
	-o-transition:0.4s ease-out;
	transition:0.4s ease-out;
}

a.q1-modbtn:hover{
	background-position:bottom left;

	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	transform:rotate(15deg);
}

img#q1-logo{
	width:15%;
	height:90px;
	border-radius:20px;
}



/* === Q1 END ===*/



/* ============ CSS for the infobox =========== */

div#infobox{
	width:250px;
	height:340px;
	padding:0px 0px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	border-radius:10px 10px 0px 0px;
	border:1px solid #fff;
	box-shadow:1px 1px 1px yellow;
	
	position:fixed;
	left:30px;
	bottom:-310px;
	
	color:white;
	
	
}


h1#infobox-title{
	font-size:14pt;
	margin:0px;
	color :yellow;
	text-shadow:1px 1px 1px #777;
}

div#box1{
	width:100%;
	height:30px;
	background:rgba(000,000,000,0.5);
	text-align:center;
	border-radius:10px 10px 0px 0px;
	padding:0px 0px;
	float:left;
	box-shadow:2px 2px 3px #333;
}

div#box2{
	padding:30px 20px 0px 20px;
	font-size:11pt;
	
}



img#webmail{
	width:120px;
	height:50px;
	margin:0px 0px 0px 55px;
}

h1#infoboxheader{
	color:#f93;
	text-shadow:3px 3px 3px #000;
	font-size:13pt;
}