@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,800,600,700,300,);

/* `XHTML, HTML4, HTML5 Reset
----------------------------------------------------------------------------------------------------*/
.clear{
	clear:both;
}


img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

ol,
ul {
  list-style: none;
}

li {
/*
  For IE6 + IE7:

  "display: list-item" keeps bullets from
  disappearing if hasLayout is triggered.
*/
}



svg {
/*
  For IE9. Without, occasionally draws shapes
  outside the boundaries of <svg> rectangle.
*/
  overflow: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clearfix {
  display: inline-block;
}
 
html[xmlns] .clearfix {
  display: block;
}
 
* html .clearfix {
  height: 1%;
}












li {
	list-style-type: none !important;
	list-style: none !important;
}

/*  portfolio */
#portfolio {
	background-color: ;
}
#portfolioSliderBk {
	position: absolute;
	width: 100%;
	background-color: ;
	left:0;
	border-top:1px solid #DB216B;
	border-bottom:1px solid #DB216B;
	display:none;
}
#portfolioBox {
	display: block;
	width:93%;
	height:auto;
	margin:auto;
	margin-left:6.5%;
	float:none;
	opacity:0;
	min-height:400px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#portfolioSlider {
	float: left;
	margin-right:23px;
	width:600px;
	height:400px;
}
#portfolioVideo, #portfolioImage {
	float:left;
	width:600px;
}
#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: 307px;
	float: right;
}
#portfolioContent h3 {
	font-family: 'Open Sans';
	font-size: 22px;
	line-height: 22px;
	font-weight: 600;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 13px;
	text-shadow:1px 1px rgba(0,0,0,.3);
}
#portfolioContent span {
	font-family: 'Open Sans';
	font-size:14px;
	color: #ffffff;
	opacity: 0.5; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	text-shadow: 1px 1px #921342;
	display: block;
	margin-bottom: 38px;
}
#portfolioContent p {
	font-family: Arial;
	font-size:12px;
	line-height: 20px;
	color: #ffffff;
	margin:15px 0;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
}
.button {
	border-radius: 30px ;
	background-color: #ffffff;
	color: #8e96a0;
	font-size: 13px;
	font-family: 'Open Sans';
	text-decoration: none;
	padding:6px 25px 7px;
	margin-top:15px;
	display:inline-block;
	-webkit-transition:all 100ms ease-in;
    -o-transition:all 100ms ease-in;
    -moz-transition:all 100ms ease-in;
}
.button:hover {
	color: #d00355;
}
.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;
	margin: auto;
	background-color: #000;
	padding-right:10px;
	padding-left: 21%;
	margin-top: 2%;
}
.portfolioMenu li {
	float:left;
}

.portfolioMenu li a p.current_tab{
	color:#fff;
}
.portfolioMenu p{
	float: left;
	font-size: 16px;
	font-family: 'Open Sans';
	font-weight:700;
	color: #c12424;
	padding:13px 5px 13px 10px; 
}
.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:93%;
	height:auto;
	margin:auto;
	margin-left:6.5%;
	float:none;
}
.portfolioContainer li{
	float: left;
	text-align: center;
	margin:77px 20px 0 20px;
	overflow: visible;
	position:relative;
	width:200px;
	height:263px;
	cursor:pointer;
}
.portfolioContainer img {
	margin-bottom:-190px;
}
.portfolioContainer h3 {
	margin-top: 220px;
	font-size: 16px;
	line-height: 16px;
	font-family: 'Open Sans';
	font-weight: 600;
	color: #ffffff;
	text-shadow:1px 1px rgba(0,0,0,.5);
	text-transform: uppercase;
}
.portfolioContainer a{
	text-decoration: none;
}
.spanDate {
	margin-top: 12px;
	font-size: 12px;
	line-height: 12px;
	font-family: 'Open Sans';
	font-weight: 600;
	color: #e780a9;
	text-shadow:1px 1px #921342;
	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/preloader.gif) no-repeat 0 0 transparent;
	display:none;
}

.portfolioContainer canvas, .teamList canvas {
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:195px;
}
.circ {
	z-index:0;
}
.bang {
	z-index:1;
}
.hex {
	z-index:3;
}
.portfolioContainer .hex {
	-webkit-transition:all 100ms ease-in;
    -o-transition:all 100ms ease-in;
    -moz-transition:all 100ms ease-in;
}
/*.portfolioContainer a:hover .hex {
	opacity:0;
}
.portfolioContainer a:hover .circ {
	opacity:1;
}
.portfolioContainer a:hover span:first-child {
	opacity:1;
}*/