@font-face {
	font-family: "Sinan";
	src: url("../Fonts/ge-ss-med.eot");
	src: url("../Fonts/GE_SS_Two_Medium.ttf");
	src: url("../Fonts/ge-ss-med.ttf") format("truetype");
	font-weight:normal;	
	font-style:normal;	
}
	
html{width:100%; height:100%; position:relative; padding:0px; margin:0px; direction:ltr;}
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13pt;
    color: #333;
}

ul,ol{padding:0px; margin:0px; list-style:none;}
li{padding:0px; margin:0px;}
h1,h2,h3{padding:0px; margin:0px; font-weight:normal;}
img{padding:0px, margin:0px; border:0px}
a{color:#731472; text-decoration:none}
a:hover{color:#555}

.clr{clear:both;}

#wrap{}
.container{width:90%; margin:0px auto}
.container-small{width:75%; margin:0px auto}

/*---Header-------------------------------------------------*/
.head{width:100%; background:url(../images/header-bg.png) top;}

.nav{float:left; display:block;}
.nav li{float:left;}
.nav li a{display:block; font-size:14pt; padding:80px 20px 10px 20px}
.nav li a:hover{background-color:#731472; color:#fff}
.nav li a.current{background-color:#731472; color:#fff}

.logo{float:right; display:block}
.logo img{padding:5px 0px;}


.headerResp {display:none;}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
.sidenav a {
    padding: 10px 20px;
    font-size: 13pt;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover {color: #f1f1f1;}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    font-size: 50px;
    margin-left: 50px;
}


/*---Footer-------------------------------------------------*/
.footer{clear:both; width:100%; background-color:#222; margin-top:20px}
.footer-info{float:left; padding:20px 0px; color:#fff; font-size:9pt;}
.footer-info h1 small{font-size:10pt; color:#666}
.footer-social{float:right; padding:20px 0px}


/*---Banner-------------------------------------------------*/
.banner{clear:both; width:100%; margin:0px auto; padding:0px;}

/*---Customer-------------------------------------------------*/
.customer{clear:both; width:100%; background-color:#731472}
.customer-panel{color:#fff; padding:20px 0px; text-align:center;}
.customer-panel p{color:#ccc}
.customer-panel a{color:#fff; font-size:18pt}
.customer-panel a:hover{color:#999;}

/*---Projects-------------------------------------------------*/
.projects{clear:both; width:100%; background-color:#fff}
.projects-panel{padding:20px 0px; text-align:center;}
.projects-panel h1{color:#731472}

.projects-panel li{float:left; width:25%; text-align:center; height:450px;}
.projects-panel li.p{float:left; width:33.3%; text-align:center; height:450px;}

.project-list{padding:5px 5px; text-align:center}
.project-icon{width:50px;}
.project-status{color:#666;}
.project-thumb{width:100%; height:200px;}
.project-img{width:100%; height:100%;}
.project-brief{color:#666; font-size:11pt; padding:10px;}

.prodesc-desc{padding:20px 0px; float:right; width:60%; text-align:left}
.prodesc-side{padding:20px 0px; float:left; width:35%;}
.prodesc-side .thumb{}
.prodesc-side .thumb img{width:100%}
.prodesc-side .brief{font-size:10pt; color:#666; padding-bottom:20px}
.prodesc-side .download{}
.prodesc-side .download a{display:block; background:#731472; color:#fff; padding:15px; text-align:center}
.prodesc-side .download a:hover{background:#ddd; color:#731472;}

/*---About-------------------------------------------------*/
.about{clear:both; width:100%; background-color:#fff; }
.about-panel{padding:20px 0px; text-align:center;}
.about-panel h1{color:#731472}

/*---Tour-------------------------------------------------*/
.tour{clear:both; width:100%; background-color:#fff; text-align:center}
.tour-panel{padding:20px 0px; text-align:left;}
.tour-panel h1{color:#731472}

/*---Contact-------------------------------------------------*/
.contact{clear:both; width:100%; background-color:#fff; text-align:center}
.contact-panel{padding:20px 0px; text-align:left;}
.contact-panel h1{color:#731472}
.mapZone{width:100%; height:300px; background:#fff;}
#mapProp{width:100%; height:100%}

.contact-row {padding:40px 0px 20px}
.contact-row li{float:left; width:33%; text-align:center; margin-bottom:25px}
.contact-row .addTitle{color:#731472; font-size:16pt; padding-bottom:20px}
.contact-row .addContent{color:#666; padding:0px 20px}

/*---Form-------------------------------------------------*/

.dataTitle	{display:block;}
.dataField	{display:block;}
.dataFieldInline {display:inline-block; width:32%;}
.dataFieldInlineFull {display:inline-block; width:90%;}
.dataSpanInline {display:inline-block; width:50%;}
.dataSprt	{display:block; padding:4px 0px; border-top:1px solid #eee}
.dataSprtNB{display:block; padding:4px 0px;}

#frmSearch .error{
	color:red;
	font-size: 90%;
}
.error{
	color:red;
	padding: 10px 0px;
	font-size: 90%;
	display:block;
}

.frmWidth50 {width:50%; text-align:left}
form{padding:0px; margin:0px auto; padding-bottom:20px; width:100%}
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0 5px 0;
    display: block;
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    resize: vertical;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;       	
    overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus {
    background-color: #f1f1f1;
    outline: none;
}
input[type=radio],input[type=checkbox]{
    width: auto;
    padding: 10px;
    margin: 5px 0 10px 0;
}
.button {
    background-color: #731472;
    color: white;
    padding: 14px 20px;
    margin: 10px auto;
    border: none;
    width: 100%;
    border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
}


.correctMsg	{color:#fff; font-size:90%; background:#93c524; padding:5px; margin-bttom:10px}
.errorMsg	{color:#fff; font-size:90%; background:#f25141; padding:5px; margin-bttom:10px}



.stickyIcon{
	position:fixed;
	bottom:100px; 
	right:50px;
	z-index: 999;
	display:block;
	width:128px;
}
.stickyIcon a img{
	width:100%;
}

/*------------ Modal --------------------------*/
/*----------------------------------------------------------------*/
/* The Modal (background) */

iframe {
	width:100%;
	height: 500px;
	border: 0px solid;
	padding-top:10px;
	
}
.modal {
    display: none; 
    position: fixed;
    z-index: 999999;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.7);
}
/* Modal Content/Box */
.modal-header {
	background: #731472;
	padding:20px 10px;
	color:#fff
}

.modal-content {
	position: relative;
    background-color: #fefefe;
    margin: 25px auto;
    padding: 0px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;    
}
/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
/* The Close Button */
.close {
    color: #fff;
    float: right;
    font-size: 50px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/*------------ Responsive --------------------------*/
/*----------------------------------------------------------------*/

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

@media only screen and (min-width: 992px) and (max-width: 1199px){
}

@media only screen and (min-width: 768px) and (max-width: 991px){

	.headerResp {display:block}
	.nav ul{display:none}
	.logo img{width:120px}	
}

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

	.headerResp {display:block}
	.nav ul{display:none}
	.logo img{width:120px}	
	
	.prodesc-desc{float:none; width:100%; display:block}
	.prodesc-side{float:none; width:100%; display:block}
	.projects-panel li{float:left; width:50%; text-align:center; height:450px;}
	.projects-panel li.p{float:left; width:50%; text-align:center; height:450px;}
	form{width:90%}
	
	.stickyIcon{
		position:fixed;
		bottom:50px; 
		right:20px;
		z-index: 999;
		display:block;
		width:100px;
	}		
}

@media only screen and (max-width: 575px){
	.container-small {width:85%}
	
	.headerResp {display:block}
	.nav ul{display:none}
	.logo img{width:100px}
	
	.footer-info{float:none; display:block; padding:20px 0px; color:#fff; font-size:9pt; text-align:center}
	.footer-info h1 small{font-size:10pt; color:#666}
	.footer-social{float:none; display:block; padding:10px 0px; text-align:center}
	
	.projects-panel li{float:none; display:block; width:100%; text-align:center}
	.projects-panel li.p{float:none; display:block; width:100%; text-align:center}
	
	.contact-row li{float:none; display:block; width:100%}
	
	.prodesc-desc{float:none; width:100%; display:block}
	.prodesc-side{float:none; width:100%; display:block}
	
	form{width:90%}
	
	.stickyIcon{
		position:fixed;
		bottom:30px; 
		right:10px;
		z-index: 999;
		display:block;
		width:80px;
	}	
	
	.modal-content {
	    width: 95%;
	    margin: 15px auto;
	}
	iframe {
		width:100%;
		height: 480px;
		border: 0px solid;
		padding-top:10px;
	}	
	
	.frmWidth50 {width:90%}
}
/**/