@charset "utf-8";
/* CSS Document */

.parentContainer {
    background-image:url(../img/noisepattern.png);
}
.services {
	background-image:url(../img/bg10.jpg);
}
.parentContainer > section{
    width:960px;
    margin:auto;
}
.parentContainer header h1{
	font-family: 'Open Sans';
	font-weight:800;
	color: #21262d;
	font-size: 40px;
	text-transform: uppercase;
	float: left;
	margin-right: 22px;
	margin-left: 20px;
}
.parentContainer header h2{
	float: left;
	font-size: 22px;
	font-family: 'Open Sans';
	font-style: italic;
	color: #21262d;
	font-weight: lighter;
	padding-top: 13px;
}
.parentContainer header h4 {
	padding-top: 120px;
	font-size: 22px;
	font-family: Arial;
	font-weight: 400;
	line-height: 34px;
}
.parentContainer header p {
	margin-top: 40px;
	font-size: 16px;
	color: #000000;
	font-family:'Open Sans';
	line-height:28px;
}
.parentContainer header {
	margin-bottom:75px;
	line-height:normal;
}
.hImg {
	float: left;
}

li {
	list-style:none;
	list-style-image:none;
}

/*  portfolio */
#portfolio {
	background-color: #ffffff;
}
#portfolioSliderBk {
	position: absolute;
	width: 100%;
	background-color: #ff8f00;
	left:0;
	border-top:2px solid #21262d;
	border-bottom:2px solid #21262d;
	display:none;
	z-index:50;
}
#portfolioBox {
	display: block;
	margin: 65px auto;
	width: 960px;
	opacity:0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#portfolioBox h3 {
	font-family: 'Open Sans';
	font-size: 22px;
	line-height: 22px;
	font-weight: 600;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 13px;
	text-align:center;
}
.portfolioNavigation {
	margin:-40px 0 0;
	float:right;
}

#portfolioSlider {
	float: left;
	margin-right:23px;
	width:600px;
	height:400px;
}
#portfolioVideo, #portfolioImage {
	float:none;
	width:600px;
	margin:0 auto;
	height:400px;
}
#portfolioImage a:hover {
	text-decoration: none;
}
#portfolioSlider img, #portfolioImage img {
	border-radius:3px;
}
.slidesContainer div, .slidesContainer {
    width:940px;
    overflow:hidden;
    position:relative;
    border-radius:3px;
	width:600px;
	height:400px;
	display:block;
}
#portfolioSlider .pagination {
	float:right;
	margin-top:10px;
}
#portfolioSlider .pagination li {
	float:left;
}
#portfolioSlider .pagination a {
	width:10px;
	height:12px;
	text-indent:-99999px;
	display:block;
	background:url(../img/portfolioNav.png) no-repeat -16px 0 transparent;
	margin-left:5px;
}
#portfolioSlider .pagination a:hover {
	background-position:-32px 0;
}
#portfolioSlider .pagination li.current a {
	background-position:0 0;
}
#portfolioContent {
	width: 100%;
}
#portfolioContent h3, .service h3, .designs h3, .aboutus h3 {
	font-family: 'Open Sans';
	font-size: 22px;
	line-height: 22px;
	font-weight: 600;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 13px;
}
#portfolioContent span, .service span, .designs span, .aboutus span {
	font-family: 'Open Sans';
	font-size:14px;
	color: #21262d;
	display: block;
}
#portfolioContent p {
	font-family: Arial;
	font-size:12px;
	line-height: 15px;
	color: #ffffff;
	margin:15px 0;
}
.button {
	border-radius: 30px ;
	background-color: #ffffff;
	color: #21262d;
	font-size: 13px;
	font-family: 'Open Sans';
	text-decoration: none;
	padding:6px 25px 7px;
	margin-top:15px;
	display:inline-block;
	-webkit-transition:all 500ms ease-in;
    -o-transition:all 500ms ease-in;
    -moz-transition:all 500ms ease-in;
}
.button:hover {
	color: #ff8f00;
}
#portfolioContent .button {
	background-color:#fff;
	color:#21262d !important;
	text-shadow:0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
#portfolioContent .button:hover {
	color:#ff8f00;
}
.portfolioNavigation a{
	margin-top: 6px;
	width: 24px;
	height: 24px;
	display: block;
	margin-left: 4px;
	float: right;
	text-indent: -999999px;
	background:url(../img/buttons.png) no-repeat 0px 0px transparent;
}
.portfolioNavigation .btnPrev {
	background-position: 2px -5px; 
}
.portfolioNavigation .btnNext {
	background-position: -24px -5px; 
}
.portfolioNavigation .btnClose {
	height: 37px;
	width: 34px;
	margin-left: 8px; 
	margin-top: 0px;
	background-position: -57px 0px; 
}
.portfolioNavigation .btnPrev:hover {
	background-position: 2px -43px; 
}
.portfolioNavigation .btnNext:hover {
	background-position: -24px -43px; 
}
.portfolioNavigation .btnClose:hover {
	height: 37px;
	width: 34px;
	margin-left: 8px; 
	margin-top: 0px;
	background-position: -57px -37px; 
}
.portfolioMenu {
	border-radius: 30px;
	background-color: #ff8f00;
	padding-right:10px;
	width:410px;
	margin:0 auto;
	display:block;
}
.portfolioMenu li {
	float:left;
}
.portfolioMenu p{
	float: left;
	font-size: 16px;
	font-family: 'Open Sans';
	font-weight:700;
	color: #21262d;
	padding:13px 5px 13px 10px; 
	margin:0;
}
.portfolioMenu span {
	height: 30px;
	display: block;
	float: left;
	margin: 10px 0px 0px 20px;
	text-indent: -999999px;
}
.iosDesign span{
	width: 19px;
	background:url(../img/folioMenu.png) no-repeat -55px 2px transparent;
}
.webDesign span {
	width: 27px;
	background:url(../img/folioMenu.png) no-repeat -78px 0 transparent;
}
.all span {
	width: 28px;
	background:url(../img/folioMenu.png) no-repeat -143px 3px transparent;
}
.portfolioMenu a:hover p, .portfolioMenu li.selected p{
	color: #ffffff;
}
.iosDesign:hover span, .iosDesign.selected span{
	background:url(../img/folioMenu.png) no-repeat 1px 2px transparent;
}
.webDesign:hover span, .webDesign.selected span{
	background:url(../img/folioMenu.png) no-repeat -25px 0 transparent;
}
.all:hover span, .all.selected span {
	background:url(../img/folioMenu.png) no-repeat -108px 3px transparent;
}
.portfolioContainer {
/*	width:960px;*/
}
.portfolioContainer li, .service li, .designs li, .aboutus li{
	float: left;
	text-align: center;
	margin:30px 20px 0 20px;
	overflow: visible;
	position:relative;
	width:200px;
	height:273px;
}
.portfolioContainer li a {
	position:relative;
}
.portfolioContainer li a .mask {
	position:absolute;
	top:3px;
	left:0;
	width:200px;
	height:200px;
	display:block;
	transition:all 1s;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	background:url(../img/mask.png) 0 0 no-repeat;
	opacity:0;
}
.portfolioContainer li a:hover .mask, .portfolioContainer li a .mask:hover {
	opacity:1;
}
.portfolioContainer li a .mask, .service li .mask {
	position:absolute;
	top:3px;
	left:0;
	width:200px;
	height:200px;
	display:block;
	transition:all 1s;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	background:url(../img/mask.png) 0 0 no-repeat;
	opacity:0;
}
.service li .mask {
	background:url(../img/round-mask.png) 0 0 no-repeat;
	left:50%;
	margin-left:-100px;
}
.portfolioContainer li a:hover .mask, .portfolioContainer li a .mask:hover,
.service li:hover .mask, .service li .mask:hover {
	opacity:1;
}

.service li{
	height:380px;
}
.rs-carousel {
    display: block;
    float: left;
    height: 490px;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom:15px;
}
#services .rs-carousel {
	height:380px;
}
.designs li {
	height:470px;
}
.aboutus li {
	height:490px;
}
#design .rs-carousel {
	height:470px;
}
.rs-carousel-action {
	position:absolute;
	top:50%;
	margin-top:-10px;
	width:20px;
	height:20px;
	text-indent:-99999px;
}
.rs-carousel-action-prev {
	left:0;
	background:url("../img/small_left.png") no-repeat scroll left top transparent;
}
.rs-carousel-action-next {
	right:0;
	background:url("../img/small_right.png") no-repeat scroll left top transparent;
}
.rs-carousel-action-prev:hover, .rs-carousel-action-next:hover {
	background-position:left bottom;
}
.portfolioContainer img, .service img, .designs img, .aboutus img {
	margin-bottom:-190px;
}
.portfolioContainer h3, .service h3, .designs h3, .aboutus h3 {
	margin-top: 200px;
	font-size: 16px;
	line-height: 16px;
	font-family: 'Open Sans';
	font-weight: 400;
	color: #21262d;
}
.portfolioContainer h3 span, .service h3 span, .designs h3 span, .aboutus h3 span {
	color:#ff8f00;
	font-size:150%;
	line-height:1;
}
.portfolioContainer a{
	text-decoration: none;
}
.spanDate {
	margin-top: 12px;
	font-size: 12px;
	line-height: 12px;
	font-family: 'Open Sans';
	font-weight: 300;
	color: #21262d;
	display:block;
}
.portfolioContainer .icon {
	background:url(../img/magnify.png) no-repeat 0 0 transparent;
	width:26px;
	height:27px;
	position:absolute;
	z-index:2;
	top:135px;
	left:105px;
}
/*.portfolioContainer a span:first-child {    
	background: url("../img/portfolioHover.png") no-repeat scroll center center transparent;
    height: 130px;
    left: 35px;
    position: absolute;
    top: 35px;
    width: 130px;
    z-index: 9;
	-webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    -moz-transition:all 200ms ease-in;
}*/
#folioPreloader {
	width:16px;
	height:16px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-8px;
	margin-left:-8px;
	background:url(../img/preloader2.gif) no-repeat 0 0 transparent;
	display:none;
}

.portfolioContainer canvas, .service canvas, .designs canvas, .aboutus canvas {
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:195px;
}

.service canvas, .designs canvas, .aboutus canvas {
	margin:0 50px;
}

.circ {
	z-index:0;
}
.bang {
	z-index:1;
}
.hex {
	z-index:3;
}
.portfolioContainer .hex {
	-webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    -moz-transition:all 200ms ease-in;
}
/*.portfolioContainer a:hover .hex {
	opacity:0;
}
.portfolioContainer a:hover .circ {
	opacity:1;
}
.portfolioContainer a:hover span:first-child {
	opacity:1;
}*/

.hide {
	display:none;
}