@import url("./reset.css");

/* --------- GENERAL --------- */

body {
	font-size: 12px;
	color: #FFFFFF;
	background-color:#00a2c8;
	font-family:Arial, Helvetica, sans-serif;
}


a {
	color:#f8e94a;
	text-decoration: none;
	transition: color 0.1s linear;
	-moz-transition: color 0.1s linear; 
	-webkit-transition: color 0.1s linear;
	-o-transition: color 0.1s linear;	
}

a:hover {
	color:#bfb335;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #FFFFFF;
	line-height: 1.1em; 
	font-weight: normal;
	text-transform:uppercase;
}

h1 {
	font-size: 48px;
	margin-bottom: 15px;
}

h2 {
	font-size: 40px;
	margin-bottom:13px;
}

h3 {
	font-size: 30px;
	margin-bottom:10px;
}

h4 {
	font-size: 14px;
	margin-bottom:7px;
}

h5 {
	font-size: 12px;
	margin-bottom:5px;
}

h6 {
	font-size: 10px;
	margin-bottom:3px;
}

h1,
h2,
h3,
h4,
h5,
h6,
#menu a,
.bt,
.font {
	font-family: 'Oswald', sans-serif;
	letter-spacing:0.03em;
}

p {
	font-size:16px;
	line-height:27px;
	margin-bottom: 10px;
}

ul {
	list-style:none;}


.left {float: left;}
.right {float: right;}
.last {margin-right: 0 !important;}


.clearfix:after {
	content:  ".";
	display:  block;
	height:  0;
	clear:  both; 
	visibility:  hidden;
}

.clearfix {display:  inline-block;}
.clearfix {display:  block;} 
.clear {clear:both;}

.wrapper {
	width:960px;
	margin:0 auto;
}

.portfolio-wraper {
	padding:0 30px;
}

.scrol-page {
	margin-bottom:800px;
	padding-top:130px;
	position:relative;
}

.scrol-page.last {margin-bottom:100px;}
	
.font {
	color:#fff;
	letter-spacing:0.05em;
}

.loading {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100000;
	background:url(../images/loader.gif) no-repeat center center #fff;
}
	
.divider {
	height:2px;
	margin-top:30px;
	margin-bottom:30px;
	background:url(../images/page-title-divider.jpg) no-repeat bottom center;
}

/* --------- HEADER --------- */

#header {
	width:100%;
	height:64px;
	margin-bottom:30px;
	position:fixed;
	z-index:1100;
	padding-top:10px;
	background:url(../images/divider.png) repeat-x bottom left #0096bb;
}
	
/* Logo */

#logo {
	float:left;
	margin-top:0px;
}

/* Menu */

#menu {
	float:right;
	margin-top:19px;
}

#menu li {
	float:left;
	margin-left:15px;
	text-transform:uppercase;
}

#menu a {
	color:#FFFFFF;
	font-size:13px;
	text-shadow:none;
}

#menu a:hover, #menu a.active {color:#f8e94a;}

/* --------- HOME --------- */

.home-name {
	margin-top:70px;
	text-align:right;
}
	
.home-name h1 {
	color:#FFFFFF;
	font-size:32px; 
	line-height:50px;
}
.home-text p {
	font-size:18px;
	line-height:32px;
}

.home-text p#slogan {
	margin-top:35px;
	font-size:25px;
	font-weight:bold;
	line-height:40px;
}

.home-foto .image {
	margin-left:15px;
}

.space {
	height:60px;
}

/* Round Image */

	.foto {
		width:287px;
		height:293px;
		margin-left:8px;
		overflow:hidden;
		
	}
	.foto img {
		position:relative;
		z-index:-1;
		margin:1px 0 0 1px;
	}

/* Recent Work */

.recent-work {
	background:#0096bb;
	height:240px;
	position:relative;
	border-radius:8px;
	-khtml-border-radius:8px
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	opacity:0.9;
	filter:alpha(opacity=90); /* For IE8 and earlier */
	
}
.recent-work ul {
	padding-left:30px;
	margin-right:-30px;
}

.recent-work li {
	float:left;
	margin:41px 30px 0 0;
	position:relative;
}

.recent-work img {
	background-color:#FFFFFF;
	border:1px solid #008BB2;
	padding:10px;
	border-radius:8px;
	-khtml-border-radius:8px
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	width:182px;
	height:144px;
}

.recent-work .title {
	position:absolute;
	top:-17px;
	left:50%;
	margin-left:-75px;
	height:35px;
	width:151px;
	text-align:center;
	text-transform:uppercase;
	font-size:14px;
	color:#515151;
	line-height:35px;
	background:url(../images/recent-work-title.png) no-repeat top left;
}

.view-image,
.view-video {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-14px;
	margin-left:-14px;
	width:28px;
	height:28px;
	display:none;
	text-indent:-9999px;
}
.view-image {background:url(../images/view.png) no-repeat;}
.view-video {background:url(../images/video.png) no-repeat;}
.view-image:hover,
.view-video:hover {background-position:0 -28px;}
	
.recent-work-shadow {
	height:47px;
	margin-bottom:30px;
	background:url(../images/recent-work-shadow.png) no-repeat;
}

/* Copyright */

.copyright {
	font-size:13px !important;
	text-align:center;
	color:#FFFFFF;
}

/* --------- PAGE --------- */

.page-title {
	padding-bottom:30px;
	margin-bottom:50px;
	border-bottom:2px solid #FFFFFF;
}

.page-title h1 {
	float:left;
	padding-right:40px;
	padding-bottom:5px;
	margin-right:20px;
}

.page-title p {
	color:#FFFFFF;
	font-size:16px;
	line-height:27px;
	padding-top:5px;
}

/* Services */

.services {
	width:990px;
}

.services h2 {
	font-size:18px;
	padding-top:5px;
}

.services .one-two {
	margin-bottom:40px;
}

.services .icon {
	float:left;
	margin:0 15px 10px 0;
}

/* About */

ul.steps  {
	padding-top:4px;
	margin-bottom:40px;
}

ul.steps li  {
	float:left;
	display:inline;
	margin-bottom:25px;
	text-align:center;
	width:225px;
}

ul.steps li.arrow  {
	width:20px !important;
	height:20px;
	padding-top:30px !important;
	background:url(../images/arrow-right.png) no-repeat 0 30px;
}

.icon_bg  {
	background:url(../images/background-step.png) no-repeat;
	width:202px;
	height:82px;
	margin-left:75px;
	margin-bottom:12px;
	float:left;
}

.icon_bg img  {
	margin-left:24px;
	margin-top:24px;
	float:left;
}

ul.steps li h4  {
	text-align:center;
	margin-bottom:8px;
	line-height:25px;
	font-size:17px;
}

ul.steps li p  {
	font-size:14px;
	line-height:24px;
}

#features  {
	width:990px;
	padding:30px 0 30px 0;
}

#features h3  {
	font-size:17px;
}

#features p  {
	font-size:14px;
	line-height:24px;
}

#features ul li  {
	width:480px;
	margin-right:20px;
	margin-bottom:25px;
	float:left;
}

#features ul li.last_feature  {
	margin-right:0px;
}

#features ul li .feature_text  {
	line-height:24px;
	float:left;
	width:383px;
	padding-top:5px;
}

#features ul li .feature_text h3  {
	margin-bottom:8px;
}

#features ul li .feature_icon  {
	background-color:#00a5ce;
	border:1px solid #008BB2;
	float:left;
	margin-right:20px;
	padding:12px;
	text-align:center;
	border-radius:5px;
	-khtml-border-radius:5px
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

	.foto.left {margin-right:30px;}
	.about-title {
		float:left;
		width:637px;
		position:relative;
		margin-bottom:15px;
		padding-bottom:10px;
		background:url(../images/divider-one-two.jpg) no-repeat bottom center;
	}
	.info-bt {
		float:right;
		margin-top:-45px;
	}
	.info-bt .font {
		display:inline-block;
		margin:0 10px;
		width:73px;
		text-align:center;
		background:url(../images/or.jpg) no-repeat center center;
	}
	
/* Portfolio */

.portfolio {
	width:970px;
	margin-right:-30px;
}

.portfolio li {
	float:left;
	display:block;
	margin:0 30px 45px 0;
	position:relative;
	overflow:hidden;
	width:212px;
	text-align:center;
}

.portfolio li img  {
	background-color:#FFFFFF;
	border:1px solid #008BB2;
	padding:10px;
	border-radius:8px;
	-khtml-border-radius:8px
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
}

/*Contact */

.map {
	padding:7px;
	background-color:#FFFFFF;
}

#contact-form {
	margin-top:15px;
}

#contact-form textarea {
	padding:10px; 
	width:343px; 
	height:120px;
}

#contact-form input[type=text] { 
	font-size:11px; 
	color:#828282; 
	font-style:italic; 
	width:350px; 
	padding:5px; 
}
#contact-form p {
	margin-bottom:10px !important;
}

#contact-form .yellow {
	border:0 !important;
	padding-bottom:3px;
}

ul#contact-icons {
	float:right;
	width:725px;
	padding-top:15px;
}

ul#contact-icons li {
	float:right;
	height:40px;
}

ul#contact-icons li a {
	display:block;
}

#phone {
	background:url("../images/icon/icon_phone.png") top left no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	padding-left:47px;
	font-size:16px;
	font-weight:bold;
	width:143px;
	line-height:40px;
}

#fax {
	background:url("../images/icon/icon_fax.png") top left no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	padding-left:47px;
	font-size:16px;
	font-weight:bold;
	width:143px;
	line-height:40px;
}


#mail a {
	background:url("../images/icon/icon_mail.png") top left no-repeat;
	height:40px;
	width:208px;
	font-family:Arial, Helvetica, sans-serif;
	padding-left:47px;
	font-size:16px;
	font-weight:bold;
	line-height:40px;
	color:#FFFFFF;
}

#facebook a {
	background:url("../images/icon/icon_facebook.png") top left no-repeat;
	text-indent:-9999px;
	height:40px;
	width:40px;
}

#twitter a {
	background:url("../images/icon/icon_twitter.png") top left no-repeat;
	text-indent:-9999px;
	height:40px;
	width:40px;
	margin-right:5px;
}

#mail a:hover,
#facebook a:hover,
#twitter a:hover {
	background-position:bottom left;
}
	
	
/* Column */
.one-two,
.one-third,
.one-four {
	margin-right:30px; 
	float:left; 
}

.one-two {width:465px;}
.one-third {width:300px;}
.one-four {width:217px;}

.bt {
	width:109px;
	height:29px;
	text-align:center;
	line-height:27px;
	display:inline-block;
	text-transform:uppercase;
}

.bt.red {
	color:#fff;
	text-shadow:1px 1px #b13737;
	background:url(../images/red.png) no-repeat;
}

.bt.yellow {
	color:#464646;
	text-shadow:1px 1px #fff47a;
	background:url(../images/bt-yellow.png) no-repeat;
}

.bt.yellow:hover {color:#000;}
.bt.red:hover {color:#d6d6d6;}