/* #Table of Contents

1.  Site Styles
2.  Header
3.  Main
	3.1. Features
	3.2. Teams
	3.3. Portofolio
	3.4. Subscribe
4.  Footer
5.  CSS Hacks
6.  Media Queries
================================================== */



/* ========================= Site Styles ========================= */

/* Page Styles */

* {
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box; 
	box-sizing:border-box;
}

body {
	font-family:'PT Sans', Arial, sans-serif;
	color:#5a5a5a;
	background-color:#404040;
	font-size:15px;
	line-height:21px;
}

h1, h2, h3, h4, h5, h6 {
	color:#2a2a2a;
	font-family:Lato, Arial, sans-serif;
	text-rendering:auto;
	margin-top:0px;
}

figure { margin:0px; }
	figure img { width:100%; }

.no-margin-top { margin-top:0px !important;	}
.no-margin-bottom  { margin-bottom:0px !important; }
.no-margin-right { margin-right:0px !important;	}
.no-margin-left { margin-left:0px !important; }

.no-padding-top { padding-top:0px !important;	}
.no-padding-bottom  {padding-bottom:0px !important; }
.no-padding-right { padding-right:0px !important; }
.no-padding-left { padding-left:0px !important; }

.margin-top10 { margin-top:10px !important; }
.margin-top20 { margin-top:20px !important; }
.margin-top30 { margin-top:30px !important; }
.margin-top40 { margin-top:40px !important; }
.margin-top60 { margin-top:40px !important; }

.margin-bottom10 { margin-bottom:10px !important; }
.margin-bottom20 { margin-bottom:20px !important; }
.margin-bottom30 { margin-bottom:30px !important; }
.margin-bottom40 { margin-bottom:40px !important; }
.margin-bottom60 { margin-bottom:60px !important; }

.padding-top10 { padding-top:10px !important; }
.padding-top20 { padding-top:20px !important; }
.padding-top30 { padding-top:30px !important; }
.padding-top40 { padding-top:40px !important; }
.padding-top60 { padding-top:60px !important; }

.padding-bottom10 { padding-bottom:10px !important; }
.padding-bottom20 { padding-bottom:20px !important; }
.padding-bottom30 { padding-bottom:30px !important; }
.padding-bottom40 { padding-bottom:40px !important; }
.padding-bottom60 { padding-bottom:60px !important; }

.aligncenter {
    display:block;
    margin:0px auto 20px auto;
}
.alignright {
    float:right;
    margin:10px 0 10px 10px;
}
.alignleft {
    float:left;
    margin:10px 10px 10px 0;
}

.left { float:left;	}
.right { float:right; }
.textcenter { text-align:center }
.textright { text-align:right }
.textleft { text-align:left }

/* Links */

a, a:visited {
	color:#f0661a;
	-webkit-transition:background .2s ease, background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
	-moz-transition:background .2s ease, background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
	-ms-transition:background .2s ease, background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
	-o-transition:background .2s ease, background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
	transition:background .2s ease, background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
}
a:hover {
	text-decoration:none;
	color:#4a4a4a;
}

/* Site Elements */

input[type="text"] {
	height:50px;
	padding:0px 20px;
	font-family:'Ropa Sans', Arial, sans-serif;
	border:1px solid #d0d0d0;
	color:#a9a9a9;
	outline:none;
	font-size:14px;
	text-transform:uppercase;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
textarea {
	padding:24px 20px;
	width:250px;
	font-family:'Ropa Sans', Arial, sans-serif;
	border:1px solid #d0d0d0;
	color:#a9a9a9;
	outline:none;
	font-size:14px;
	text-transform:uppercase;
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
input[type="text"]:focus, textarea:focus {
	border:1px solid #b0b0b0;
	outline:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

.btn, input[type="button"], input[type="submit"], input[type="reset"], button {
	font-family:'Ropa Sans', Arial, sans-serif;
	font-size:14px;
	line-height:50px;
	color:#FFF !important;
	background-color:#f0661a;
	border:0px;
	text-align:center;
	text-transform:uppercase;
	padding:17px 25px 16px;
	-webkit-border-radius:0px;;
	-moz-border-radius:0px;;
	border-radius:0px;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	-webkit-transition:background-color .2s ease;
	-moz-transition:background-color .2s ease;
	-ms-transition:background-color .2s ease;
	-o-transition:background-color .2s ease;
	transition:background-color .2s ease;
}
input[type="button"], input[type="submit"], input[type="reset"], button {
	line-height:1;
	padding:18px 25px;
}
.btn:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover { background-color:#4a4a4a; }
.btn:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, button:disabled { background-color:#a9a9a9; }

button.close { color:#404040 !important; }
button.close:hover {
	color:#000;
	background:none;
	border:0px;
}

select {
	font-family:'Ropa Sans', Arial, sans-serif;
	color:#a9a9a9;
	font-size:14px;
	text-transform:uppercase;
	height:auto;
	padding:16px 20px 15px;
	border:1px solid #d0d0d0;
	outline:none;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}
select:focus {
	outline:none;
	border:1px solid #b0b0b0;
}

.wp-caption {
	border:1px solid #ddd;
	text-align:center;
	background-color:#f3f3f3;
	padding:8px 8px 0px;
	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	max-width:100%;
}
	.wp-caption img {
		width:100%;
		height:auto;
		margin-bottom:8px;
	}
	.wp-caption p.wp-caption-text {
		font-size:12px;
		line-height:18px;
		padding:0px 4px 8px;
		margin:0;
		color:#7a7a7a;
	}

.sep-arrow {
	height:8px;
	background:url(../images/sep-arrow.png) no-repeat top center;	
}



/* ========================= Header ========================= */

#header {
	text-align:center;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;	
}
	#header .header-wrap {
		position:absolute;
		top:15%;
		right:0;
		left:0;
	}
	#header .caroufredsel_wrapper {
		width:100% !important;
		margin:40px 0px 0px 0px !important;
	}
	#header .text-rotator { width:100% !important; }
		#header .text-rotator li { list-style-type:none; }
		#header .text-rotator h4 {
			text-align:center;
			width:100%;
		}
	#header h4 {
		font-family:Lato, Arial, sans-serif;
		font-size:36px;
		color:#FFF;
		line-height:42px;
		text-transform:uppercase;
		margin:0px;	
	}
	#header .arrow-link {
		position:absolute;
		width:50px;
		height:50px;
		left:50%;
		bottom:0;
		margin-left:-25px;
	}
		#header .arrow-link a {
			display:block;
			color:#404040;
			background-color:#FFF;
			font-size:30px;
			line-height:50px;
		}
		#header .arrow-link a:hover {
			background-color:#f0661a;
			color:#FFF;
		}



/* ========================= Main ========================= */

.main-wrap {
	position:absolute;
	top:100%;
	right:0;
	left:0;
	background-color:#FFF;	
}
	.main-wrap .top-icon {
		height:115px;
		background:url(../images/base-top-icon.png) no-repeat top center;
		margin-bottom:60px;
		text-align:center;
	}
	.main-wrap .top-icon.top-icon2 { background:url(../images/base-top-icon2.png) no-repeat top center; }
		.main-wrap .top-icon i {
			display:block;
			font-size:48px;
			padding-top:18px;
			color:#8ea0c0;
		}
		.main-wrap .top-icon.top-icon2 i { color:#aabfe5; }
	.main-wrap .header {
		text-align:center;
		padding-bottom:60px;
		color:#FFF;
		font-size:18px;
		line-height:24px;
	}
		.main-wrap .header h2 {
			color:#FFF;
			font-size:32px;
			line-height:38px;
			text-transform:uppercase;
			margin:0px;
		}
		.main-wrap .header p { margin:8px 0px 0px 0px; }
		
/* added by mjb 		
	.main-wrap .arrow-link {
		/*position:absolute;
		text-align:center;
		width:50px;
		height:50px;
		left:50%;
		bottom:0;
		margin-left:47%;
	}
		.main-wrap .arrow-link a {
			display:block;
			color:#404040;
			background-color:#FFF;
			font-size:30px;
			line-height:50px;
		}
		.main-wrap .arrow-link a:hover {
			background-color:#f0661a;
			color:#FFF;
		}
*/

/* Features */

#features {
	background:#8c95b2 url(../images/base-main.jpg) repeat;
	color:#FFF;
	padding-bottom:250px;
}
	#features .item {
		text-align:center;
		background-color:#99aacd;
		height:300px;
		margin-bottom:30px;
		position:relative;
		cursor:pointer;
		-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3), 0 1px 2px #66799c;
		-moz-box-shadow:inset 0 1px rgba(255,255,255,0.3), 0 1px 2px #66799c;
		box-shadow:inset 0 1px rgba(255,255,255,0.3), 0 1px 2px #66799c;
	}
	#features .item.blue { background:#008ed7 url(../images/base-color-blue.jpg) repeat; }
	#features .item.green { background:#4cbb1b url(../images/base-color-green.jpg) repeat; }
	#features .item.lightblue { background:#27bfd5 url(../images/base-color-lightblue.jpg) repeat; }
	#features .item.orange { background:#f0661a url(../images/base-color-orange.jpg) repeat; }
	#features .item.pink { background:#f04d8e url(../images/base-color-pink.jpg) repeat; }
	#features .item.purple { background:#b82edb url(../images/base-color-purple.jpg) repeat; }
	#features .item.red { background:#e63737 url(../images/base-color-red.jpg) repeat; }
	#features .item.yellow { background:#df9e20 url(../images/base-color-yellow.jpg) repeat; }
		#features .item i {
			font-size:84px;
			line-height:1;
			display:block;
			padding-top:90px;
		}
		#features .item h5 {
			font-family:'PT Sans', Arial, sans-serif;
			color:#FFF;
			text-transform:uppercase;
			font-size:13px;
			line-height:18px;
			font-weight:normal;
			background:url(../images/base-features-overlay.png) repeat;
			margin:0px;
			padding:16px 20px;
			position:absolute;
			right:0;
			bottom:0;
			left:0;
		}
		#features .item p {
			font-family:'Ropa Sans', Arial, sans-serif;
			font-size:18px;
			line-height:28px;
			text-align:left;
			padding:60px 45px;
			position:absolute;
			top:0;
			right:0;
			bottom:50px;
			left:0;
			text-shadow:0 -1px 1px rgba(0,0,0,.5);
			display:none;
		}
		
/* Teams */

#teams { padding-bottom:40px; }
	#teams .header {
		background:#008ed7 url(../images/data-people2.jpg) repeat top center;
		background-size:cover;
		padding:120px 0px 180px;
	}
		#teams .header h2 {
			font-size:44px;
			line-height:50px;
		}
		#teams .header p { margin-top:40px; }
	#teams .item {
		text-align:center;
		margin-top:-100px;
		padding-bottom:40px;
	}
		#teams .item img {
			margin-bottom:30px;
			width:200px;
			height:200px;
		}
		#teams .item h4 {
			font-family:'Ropa Sans', Arial, sans-serif;
			font-size:16px;
			line-height:20px;
			color:#f0661a;
			text-transform:uppercase;
			font-weight:normal;
			margin:0px;
		}
		#teams .item .jobs {
			color:#b0b0b0;
			font-size:14px;
			line-height:18px;
			text-transform:lowercase;
		}
		#teams .item p { margin:20px 0px 15px; }
	#teams .social { margin:10px 0px 0px; }
		#teams .social li {
			list-style-type:none;
			display:inline;
		}
			#teams .social li img {
				width:26px;
				height:26px;
				margin:0px 1px;
			}
			#teams .social li .tooltip { font-family:'PT Sans', Arial, sans-serif; }
			#teams .social li .tooltip.bottom { margin-top:5px; }

/* Portofolio */

#portfolio {
	background:#8c95b2 url(../images/base-main.jpg) repeat;
	color:#FFF;
}
	#portfolio .row-fluid {
		position:relative;
		overflow:hidden;
	}
		#portfolio .row-fluid .nav-portfolio {
			margin-bottom:25px;
			text-align:center;
		}
			#portfolio .row-fluid .nav-portfolio span {
				display:inline-block;
				width:24px;
				height:24px;
				cursor:pointer;
				background-color:#FFF;
				color:#000;
				text-align:center;
				-webkit-transition:background-color .2s ease;
				-moz-transition:background-color .2s ease;
				-ms-transition:background-color .2s ease;
				-o-transition:background-color .2s ease;
				transition:background-color .2s ease;
			}
				#portfolio .row-fluid .nav-portfolio span i {
					font-size:15px;
					line-height:24px;
				}
			#portfolio .row-fluid .nav-portfolio span:hover {
				background-color:#f0661a;
				color:#FFF;
			}
		#portfolio .row-fluid .nav-portfolio.next-portfolio { right:0; }
		#portfolio .row-fluid .carousel { margin:0px; }
		#portfolio .row-fluid .item {
			list-style-type:none;
			float:left;
			width:25%;
			color:#FFF;
			margin:0px;
			padding-bottom:70px;
			position:relative;
			cursor:pointer;
		}
			#portfolio .row-fluid .item .text {
				border-top:6px solid #94a5c3;
				background-color:#4a4a4a;
				padding:0px 25px;
				position:absolute;
				right:0;
				bottom:0;
				left:0;
			}
			#portfolio .row-fluid .item.odd .text { background-color:#9eaec9; }
			#portfolio .row-fluid .item.even .text { background-color:#8b9bb9; }
			#portfolio .row-fluid .item.blue .text { border-top:6px solid #008ed7; }
			#portfolio .row-fluid .item.green .text { border-top:6px solid #4cbb1b; }
			#portfolio .row-fluid .item.lightblue .text { border-top:6px solid #27bfd5; }
			#portfolio .row-fluid .item.orange .text { border-top:6px solid #f0661a; }
			#portfolio .row-fluid .item.pink .text { border-top:6px solid #f04d8e; }
			#portfolio .row-fluid .item.purple .text { border-top:6px solid #b82edb; }
			#portfolio .row-fluid .item.red .text { border-top:6px solid #e63737; }
			#portfolio .row-fluid .item.yellow .text { border-top:6px solid #df9e20; }
			#portfolio .row-fluid .item .hidden-wrap { display:none; }
			#portfolio .row-fluid .item h4 {
				color:#FFF;
				font-family:'Ropa Sans', Arial, sans-serif;
				font-size:16px;
				line-height:20px;
				font-weight:normal;
				text-transform:uppercase;
				margin:0px;
				padding:22px 0px;
			}
			#portfolio .row-fluid .item p { padding-bottom:22px; }
			#portfolio .row-fluid .item .btn-section {
				float:right;
				padding-bottom:22px;
			}
				#portfolio .row-fluid .item .btn-section a {
					float:left;
					width:25px;
					height:25px;
					background-color:#FFF;
					color:#404040;
					text-align:center;
					line-height:25px;
					font-size:13px;
					margin-left:5px;
					border-radius:2px;
				}
				#portfolio .row-fluid .item .btn-section a:hover {
					background-color:#f0661a;
					color:#FFF;
				}
		
/* Subscribe */

#subscribe {
	background:#e5edf0 url(../images/base-contact.jpg) repeat;
	padding-bottom:120px;
}
	#subscribe .header h2 { color:#2a2a2a; }
	#subscribe .header p { color:#5a5a5a; }
	#subscribe form {
		margin:-50px;
		text-align:center;
	}
		#subscribe form input[type="text"] {
			width:250px;
			margin:0px 10px 0px 0px;
		}



/* ========================= Footer ========================= */

#footer {
	background-color:#3a3a3a;
	text-align:center;
	color:#FFF;
	padding:10px 0px 15px;
	font-family:'PT Sans', Arial, sans-serif;
	font-size:13px;
	line-height:18px;
	overflow:hidden;
	text-align:center;
}
	#footer a { color:#FFF; }
	#footer a:hover { color:#a9a9a9; }
	#footer p { margin:0px; }
	#footer .social { margin:0px; }
		#footer .social li {
			list-style-type:none;
			display:inline-block;
			margin:0px 40px;
		}
			#footer .social li a {
				font-size:30px;
				color:#707070;
			}
			#footer .social li a:hover { color:#FFF; }
	#footer .copyright {
		margin-top:10px;
		text-transform:uppercase;
		font-size:12px;
		line-height:18px;
	}
	#footer .scrollup-wrap { padding-top:10px; }
	#footer .scrollup { font-size:24px; }



/* ========================= CSS Hacks ========================= */

.ie input[type="text"] { line-height:50px; }

.ie #features .item p { padding:40px 30px; }

.ie7 #header .arrow-link { display:none; }

.ie7 #features .row { padding-bottom:30px; }

.ie7 #footer .social { display:none; }
.ie7 #footer .copyright { margin-top:0px; }


	
/* ========================= Media Queries ========================= */

@media (min-width: 980px) and (max-width: 1199px) {
	
	#features .item p { padding:50px 30px; }
	
}

@media (min-width: 768px) and (max-width: 979px) {
	
	#features .item p { padding:25px; }
	
}

@media (max-width: 767px) {
	
	body { padding:0px; }
	
	#header .header-wrap, #features .header, #teams .header, #teams .item, #portfolio .header, #subscribe .header, #subscribe form, #footer {
		padding-left:20px;
		padding-right:20px;
	}
	
	#features { padding-bottom:0px; }
	#features .item { margin-bottom:0px; }
	#features .item p {
		text-align:center;
		padding:80px 60px;
	}
	
	#teams .item { margin-top:0px; }
	#teams .item:first-child { margin-top:-100px; }
	
}

@media (max-width: 640px) {
	
	#subscribe form input { width:200px !important; }
	#subscribe form input[type="submit"] { margin-top:10px; }
	
	#footer .social li { margin:0px 30px; }
		
}

@media (max-width: 580px) {
	
	#subscribe form input { width:200px !important; }
	#subscribe form input[type="submit"] { margin-top:10px; }
	
	#footer .social li { margin:0px 20px; }
		
}

@media (max-width: 480px) {
	
	#features .item p { padding:80px 40px; }
	
	#footer .social li { margin:0px 15px; }
		
}

@media (max-width: 380px) {
	
	#features .item p { padding:60px 30px; }
	
	#footer .social li { margin:0px 10px; }
	
}

@media (max-width: 300px) {
	
	#features .item p { padding:40px 20px; }
	
	#footer .social li {
		display:block;
		margin:0px;
		padding:10px 0px;
	}
	
}

@media (max-width: 300px) {
	
	#teams .item:first-child { margin-top:-80px; }
	#teams .item img {
		width:160px;
		height:160px;
	}
	
}

@media (max-height: 610px) {
	
	#header {
		position:relative;
		top:auto;
		right:auto;
		bottom:auto;
		left:auto;
	}
	#header .header-wrap {
		position:static;
		top:auto;
		right:auto;
		left:auto;
		padding-top:200px;
		padding-bottom:240px;
	}
	
	.main-wrap {
		position:static;
		top:auto;
		right:auto;
		left:auto;
	}
	
}