@charset "utf-8";
/* CSS Document */
body
{
margin:0;
padding:0;
font-family:Calibri;
font-size:12px;
color:#5e5a5a;
line-height:15px;
text-align:justify;
background-color:#FFFFFF;
}
 

p,i,b,u,ul,li,ol,div,span,img,abbr,label,h1,h2,h3,h4,h5,h6
{
margin:0;
padding:0;
}
  
img
{
border:none;
}


#wrapper
{
width:100%;
height:auto;
margin:5% auto;
max-width:900px;
background-color:#ffffff;
}

#logo
{
width:100%;
height:73px;
float:left;
}

#logo aside img
{
width:200px;
height:73px;
float:left;
}

#main-area section
{
width:100%;
height:375px;
float:left;
background-color:#f6f5f5;
}


nav
{
width:900px;
height:30px;
float:left;
background-color:#FFFFFF;
border-top:1px solid #00aeef;
margin-top:5px;
font-size:16px;
}

nav select {
	display:none; /* this is just for the mobile display */
}

nav ul
{
margin:0;
padding:0;
list-style:none;
}

nav ul li
{
width:auto;
height:30px;
float:left;
}

nav ul li a
{
color:#8a8a8a;
text-decoration:none;
line-height:30px;
text-align:center;
display:block;
padding:0 27px;
-webkit-transition: color 2s;
-moz-transition: color 2s;
-o-transition: color 2s;
-ms-transition: color 2s;
transition: color 2s;
}

nav ul li a:hover
{
color:#00aeef;
font-weight:bold;
-webkit-transition: color 2s;
-moz-transition: color 2s;
-o-transition: color 2s;
-ms-transition: color 2s;
transition: color 2s;
}

nav ul li a.current
{
color:#00aeef;
font-weight:bold;
}

/*menu end*/


/*gallery start*/

#collage-area
{
width:900px;
height:375px;
margin:auto;
}

#part1
{
width:180px;
height:375px;
float:left;
}


#part2
{
width:296px;
height:375px;
float:left;
}


#part3
{
width:178px;
height:375px;
float:left;
}


#part4
{
width:246px;
height:375px;
float:left;
}

#part2-left
{
width:141px;
height:302px;
float:left;
}

#part2-right
{
width:155px;
height:302px;
float:left;
}

#part2-bottom
{
width:296px;
height:73px;
float:left;
}


#part4-top
{
width:246px;
height:138px;
float:left;
}

#part4-left
{
width:121px;
height:237px;
float:left;
}

#part4-right
{
width:125px;
height:237px;
float:left;
}


.p1
{
width:178px;
height:148px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#989ba6;*/
}

.p2
{
width:178px;
height:223px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#009999;*/
}

.p3
{
width:139px;
height:192px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#cc0000*/
}

.p4
{
width:139px;
height:106px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#ff6600*/
}

.p5
{
width:153px;
height:157px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#00cccc*/
}

.p6
{
width:176px;
height:182px;
float:left;/*
background-color:#006633*/
}

.p7
{
width:176px;
height:189px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#3366cc*/
}

.p8
{
width:244px;
height:136px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#9900ff*/
}

.p9
{
width:119px;
height:106px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#330033*/
}

.p10
{
width:123px;
height:235px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#ff33ff*/
}

.t1
{
width:294px;
height:71px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#99cc00*/
}

.t2
{
width:153px;
height:87px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#999900*/
}

.t3
{
width:153px;
height:52px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#003333*/
}

.t4
{
width:119px;
height:127px;
float:left;
border:1px solid #FFFFFF;/*
background-color:#cc00cc*/
}
/*gallery end*/

/*about us start*/
h1
{
font-weight:bold;
font-size:12px;
font-family:"Trebuchet MS";
text-transform:uppercase;
color:#5e5a5a;
line-height:18px;
border-bottom:1px solid #E6E6E6;
}

b
{
font-size:12px;
font-weight:bold;
color:#5e5a5a;
}

.design-page
{
width:98%;
height:auto;
float:left;
padding:1%;
}

#about aside
{
width:450px;
height:auto;
float:left;
}

#about aside article
{
width:435px;
height:auto;
float:left;
margin: 1%;
}

#about aside article img
{
width:193px;
}

.top-right-blank
{
width:430px;
height:75px;
float:left;
}

#about aside article p
{
text-align:right;
margin-top:1%
}

#about aside article p img
{
width:70px;
height:70px;
float:right;
margin-left:10px;
}

/*#about aside div
{
width:auto;
height:auto;
float:left;
margin:0 10px 0 5px;
}*/
/*about us end*/

/*contact start*/
section p
{
width:100%;
height:auto;
float:left;
text-align:center;
margin-bottom:20px;
}

.icon
{
width:450px;
height:auto;
float:left;
}

.icon span
{
width:75px;
height:25px;
float:left;
line-height:25px;
color:#00aeef;
font-size:14px
}

.icon label
{
width:auto;
height:auto;
float:left;
margin-top:7px;
padding-left:2px;
}

.icon img
{
width:25px;
height:25px;
float:left;
}
/*contact end*/


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


img
{
border:none;
width:100%
}

#wrapper
{
width:98%;
margin:3% auto;
}
#main-area section
{
width:100%;
height:auto;
background-color:#f6f5f5;
}
nav
{
width:100%;
background-color:#FFFFFF;
border-top:1px solid #00aeef;
margin-top:5px;
font-size:12px;
}
nav ul li{
float:none;
}
nav ul li a
{
text-align:left;
padding:0;
}
nav select {
width:10%;
display:block;
margin-bottom:30px;
cursor:pointer;
padding:9px;
background:#000;
border:1px solid #00d8ff;
color:#00d8ff;
text-transform:uppercase;
}

#about aside
{
width:100%;
height:auto;
float: none;
}

#about aside article
{
width:98%;
height:auto;
float:none;
margin:0 1%;
}	

#about aside article img
{
width: auto;
}

.top-right-blank
{
width:0px;
height:5px;
}

.icon
{
width:100%;
height:auto;
}

.icon span
{
width:20%;
}

.icon label
{
width:80%;
margin-top:5px;
}

.icon img
{
width:10%;
height:10%;
}

}

@media screen and (max-width: 768px) {
img
{
border:none;
width:100%
}

#wrapper
{
width:98%;
margin:2% auto;
}
#main-area section
{
width:100%;
height:auto;
background-color:#f6f5f5;
}
nav
{
width:100%;
background-color:#FFFFFF;
border-top:1px solid #00aeef;
margin-top:5px;
font-size:12px;
}
nav ul li{
float:none;
}
nav ul li a
{
text-align:left;
padding:0;
}
nav select {
width:10%;
display:block;
margin-bottom:30px;
cursor:pointer;
padding:9px;
background:#000;
border:1px solid #00d8ff;
color:#00d8ff;
text-transform:uppercase;
}

#about aside
{
width:100%;
height:auto;
float: none;
}

#about aside article
{
width:98%;
height:auto;
float:none;
margin:0 1%;
}	

#about aside article img
{
width: auto;
}

.top-right-blank
{
width:0px;
height:5px;
}

.icon
{
width:100%;
height:auto;
}

.icon span
{
width:20%;
}

.icon label
{
width:80%;
margin-top:5px;
}

.icon img
{
width:5%;
height:5%;
}

}

@media screen and (max-width: 430px) {
img
{
border:none;
width:100%
}

#wrapper
{
width:98%;
margin:1% auto;
}

#main-area section
{
width:100%;
height:auto;
background-color:#f6f5f5;
}

/* nav menu ul & select */
nav
{
width:100%;
background-color:#FFFFFF;
border-top:1px solid #00aeef;
margin-top:5px;
font-size:12px;
}

nav ul li{
float:none;
}
nav ul li a
{
text-align:left;
}
nav select {
width:50%;
display:block;
margin-bottom:30px;
cursor:pointer;
padding:9px;
background:#000;
border:1px solid #00d8ff;
color:#00d8ff;
text-transform:uppercase;
}
	
#about aside article img
{
width:70%;
}
.top-right-blank
{
width:0px;
height:5px;
}

.icon
{
width:100%;
height:auto;
}

.icon span
{
width:20%;
}

.icon label
{
width:80%;
margin-top:5px;
}

.icon img
{
width:10%;
height:10%;
}

}

/* selection */

::selection {
	background:#fec557; 
}

::-moz-selection {
	background:#fec557; 
}

::-webkit-selection {
	background:#fec557; 
}

/* end selection */




/* classed selection */

article.blue::selection {
	background:#fec557; 
	color:#fff;
}

article.blue::-moz-selection {
	background:#fec557; 
	color:#fff;
}

article.blue::-webkit-selection {
	background:#fec557; 
	color:#fff;
}

/* end classed selection */

			#widget{
				width: auto;
				height:340px;
				float:left;
				overflow: auto;
				padding-right:5px;
				margin-top:5px
			}
			::-webkit-scrollbar {
				width: 4px;
				height: 4px;
			}
			::-webkit-scrollbar-button:start:decrement,
			::-webkit-scrollbar-button:end:increment  {
				display: none;
			}
			
			::-webkit-scrollbar-track-piece  {
				background-color: #ccc;
				-webkit-border-radius: 2px;
			}
			
			::-webkit-scrollbar-thumb:vertical {
				-webkit-border-radius: 6px;
				background: #666 url(images/scrollbar_thumb_bg.png) no-repeat center;
			}
			
			::-webkit-scrollbar-thumb:vertical:hover {
				-webkit-border-radius: 6px;
				background: #aaa url(images/scrollbar_thumb_bg.png) no-repeat center;
			}
/*custom scrollbar end*/	


.img_border{
border:1px solid #E6E6E6;
}