/* Template: iPortfolio HTML5 | Author: eriktailor | Version: 1.0 */
/*----------------------------------------------------------------*/

/*----------------------------------------------------------------*/
/* # Table of Contents */
/*----------------------------------------------------------------*/
/*	#Basics & Typography
	#Header & Nav
	#Services
	#Portfolio
	#About Us
	#Testimonials
	#Our Blog
	#Contact
	#Footer
	#Media Queries
	
*/
/*----------------------------------------------------------------*/
/* # Basics & Typography */
/*----------------------------------------------------------------*/
body {

	background: #fff;

	font: 14px/21px 'Open Sans', sans-serif;

	color: #444;

	-webkit-font-smoothing: antialiased;
	 /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;


}

h1, h2, h3, h4, h5, h6 {

	color: #181818;

	font-family: 'Arvo', serif;

	font-weight: 400;


}

h1 {
	 font-size: 46px;
	  line-height: 50px;
	  margin-bottom: 14px;

	}
h2 {
	 font-size: 35px;
	  line-height: 40px;
	  margin-bottom: 10px;

	}
h3 {
	 font-size: 28px;
	  line-height: 34px;
	  margin-bottom: 8px;

	}
h4 {
	 font-size: 21px;
	  line-height: 30px;
	  margin-bottom: 4px;

	}
h5 {
	 font-size: 17px;
	  line-height: 24px;

	}
h6 {
	 font-size: 14px;
	  line-height: 21px;

	}

p, a {
	 font-family: 'Open Sans', sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  color: #1B1B1B;

	}

a {
	font-weight: 700;
	text-decoration: underline;

	}


p {
	 margin: 0 0 20px 0;

	} 
p img {
	 margin: 0;

	}
p.lead {
	 font-size: 21px;
	  line-height: 27px;
	  color: #777;

	}

em {
	 font-style: italic;

	}
strong {
	 font-weight: bold;
	  color: #333;

	}
small {
	 font-size: 80%;

	}


hr {
	 border: solid #ddd;
	  border-width: 1px 0 0;
	  clear: both;
	  margin: 10px 0 30px;
	  height: 0;

	}


/* #Links */
a, a:visited {
	 color: #333;
	  text-decoration: none;
	  outline: 0;

	}
a:hover, a:focus {
	 color: #000;

	}
p a, p a:visited {
	 line-height: inherit;

	}

#wrapper {
		width: 100%;
		 height: auto;
		 overflow: hidden;

	}

.section-title {
		width: 100%;
		 height: 50px;
		 margin: 0 0 60px;

	}

.section-title .dots {
		width: 318px;
		 float: left;
		 height: 2px;
		 border-top: 2px dotted #CCC;
		 border-bottom: 2px dotted #CCC;
		 margin-top: 23px;

	}

.section-title span {
		font-size: 25px;
		 color: #A2A2A2;
		 text-transform: uppercase;
		 float: left;
		 width: 300px;
		 text-align: center;

	}

/*----------------------------------------------------------------*/
/* # Header & Nav */
/*----------------------------------------------------------------*/

#header {
		width: 100%;
		 height: 608px;
		 display: table;
		 background: #3F4347;
		 overflow: hidden;
		 position: relative;

	}

.bg-slider {
		width: 100%;
		 height: auto;
		 position: absolute;
		 z-index: 0;

	}

.bg-slider div {
		width: 100%;
		 height: 774px;

	}

.bg-slider .slide-01 {
		background: url('../img/basic_slider/slider_01.jpg') no-repeat center top;

	}

.bg-slider .slide-02 {
		background: url('../img/basic_slider/slider_02.jpg') no-repeat center top;

	}

.bg-slider .slide-03 {
		background: url('../img/basic_slider/slider_03.jpg') no-repeat center top;

	}

#navbar {
		width: 100%;
		 height: 95px;
		 position: absolute;
		 background: rgba(0,0,0,0.8);
		 margin-top: 35px;
		 -webkit-transition: all 0.3s ease-in-out;
		 -moz-transition: all 0.3s ease-in-out;
		 transition: all 0.3s ease-in-out;
		 -webkit-transform: scale(0.9);
		 -moz-transform: scale(0.9);
		 transform: scale(0.9);

	}

#navbar.sticked {
		position: fixed;
		 margin-top: 0;
		 width: 100%;
		 left: 0;
		 z-index: 10000;
		 -webkit-transition: all 0.3s ease-in-out;
		 -moz-transition: all 0.3s ease-in-out;
		 transition: all 0.3s ease-in-out;
		 -webkit-transform: scale(1.0);
		 -moz-transform: scale(1.0);
		 transform: scale(1.0);
		 ;

	}

#navbar.sticked .ten.columns {
		float: right;

	}

.logo {
		width: 100%;
		 height: 95px;
		 display: block;

	}

.logo img {
		padding-left: 8%;

	}

.menu-items li {
		float: left;

	}

.menu-items i {
		font-size: 25px;

	}

.menu-items a {
		font-family: 'Arvo', serif;
		 font-size: 13px;
		 font-weight: 400;
		 display: block;
		 color: #FFF;
		 text-transform: uppercase;
		 padding: 0 18px;
		 overflow: hidden;
		 margin-top: 40px;
		 height: 20px;

	}

.menu-items a:hover {
		color: #fee300;

	}

.menu-items a span {
		position: relative;
		 display: inline-block;
		 -webkit-transition: -webkit-transform 0.3s;
		 -moz-transition: -moz-transform 0.3s;
		 transition: transform 0.3s;

	}

.menu-items a span::before {
		position: absolute;
		 top: 100%;
		 content: attr(data-hover);
		 font-weight: 700;
		 -webkit-transform: translate3d(0,0,0);
		 -moz-transform: translate3d(0,0,0);
		 transform: translate3d(0,0,0);
		 color: #fee300;

	}

.menu-items a:hover span, .menu-items a:focus span {
		-webkit-transform: translateY(-100%);
		 -moz-transform: translateY(-100%);
		 transform: translateY(-100%);

	}

#mobile-menu {
		display: none;
		 width: 95px;
		 height: 95px;
		 float: left;

	}

#mobile-menu i {
		font-size: 32px;
		 color: #FFF;
		 line-height: 95px;
		 display: table !important;
		 margin: 0 auto;
		 cursor: pointer;

	}

#mobile-menu-panel {
		display: none;
		 width: 250px;
		 height: 100%;
		 left: 0;
		 position: fixed;
		 top: 0;

	}

#jPanelMenu-menu {
		z-index: 9999;
		 background: #2B2B2B;
		 overflow-y: hidden !important;

	}

#jPanelMenu-menu ul {
		padding-top: 95px;

	}

#jPanelMenu-menu li {
		border-bottom: 1px solid #313131;
		 border-top: 1px solid #0A0A0A;

	}

#jPanelMenu-menu a {
		color: #FFF;
		 font-family: 'Arvo',serif;
		 font-size: 14px;
		 text-transform: uppercase;
		 line-height: 50px;
		 padding-left: 20px;

	}

.slogan {
		font-family: 'Open Sans', sans-serif;
		 font-size: 50px;
		 font-weight: 300;
		 color: #FFF;
		 background: rgba(0,0,0,0.5);
		 padding: 20px 30px;
		 display: table;
		 margin: 384px auto 0;

	}

.cta-button {
		display: table;
		 margin: 0 auto;

	}

.cta-button-wrap {
		width: 100%;
		 height: 117px;
		 position: absolute;
		 left: 0;
		 bottom: 0;

	}

.cta-button a {
		font-family: 'Arvo', serif;
		 font-size: 25px;
		 font-weight: 400;
		 display: block;
		 color: #FFF;
		 text-transform: uppercase;
		 padding: 15px 40px;
		 border: 4px solid #FFF;

	}

.cta-button span {
		display: block;
		 width: 0px;
		 height: 58px;
		 border-left: 2px solid #FFF;
		 border-right: 2px solid #FFF;
		 display: table;
		 margin: 0 auto;

	}

.cta-button:hover a {
		color: #fee300;
		 border-color: #fee300;

	}

.cta-button:hover span {
		border-color: #fee300;

	}

.motion-slider-wrap {
		background: url("../img/motion_slider/motion_slider_bg.jpg");
		 position: absolute;
		 top: 0;
		 width: 100%;
		 height: 100%;
		 z-index: 0;

	}

.motion-slider {
		height: 450px;
		 margin-top: 167px;
		 overflow: hidden;

	}

.motion-slider .model {
		float: left;
		 opacity: 0;
		 margin: 5% 0 0 35px;
		 width: 50%;

	}

.motion-slider li.right .model {
		margin: 47px 35px 0 0;
		 float: right;

	}

.motion-slider li.right .subtitle {
		clear: left;
		 margin: 0 35px 0 7px;
		 float: left;

	}

.motion-slider li.right .title {
		margin: 12% 35px 9px;
		 width: 360px;

	}

.motion-slider li.right .btn {
		clear: left;
		 margin: 7px 104px 0 35px;
		 float: right;

	}

.motion-slider li.last .subtitle {
		float: left;
		 padding: 0 30px 20px 5px;

	}

.motion-slider li.last .btn {
		float: right;
		 margin-right: 117px;

	}

.motion-slider .title {
		float: left;
		 font-family: 'Open Sans', sans-serif;
		 font-weight: 800;
		 color: #FFF;
		 font-size: 38px;
		 letter-spacing: -1px;

text-transform: uppercase;
 margin: 12% 0 9px 0;
 width: 420px;

}

.motion-slider .subtitle {
		float: right;
		 font-family: 'Open Sans', sans-serif;
		 font-size: 21px;
		 font-weight: 300;
		 font-style: italic;

color: #FFF;
 padding: 0px 30px 20px;
 margin-right: 105px;

}

.motion-slider .btn {
		background: rgba(0, 0, 0, 0.8);
		 color: #fee300;
		 float: left;
		 font-family: 'open sans',sans-serif;

font-weight: 600;
 padding: 10px 20px;
 text-transform: uppercase;

-webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 -ms-animation-delay: 0.5s;
 animation-delay: 0.5s;

}

.motion-slider .btn:hover {
		background: #FFF;

	}

#motion-prev, #motion-next {
		z-index: 300;
		 width: 25px;
		 height: 100px;
		 position: absolute;
		 cursor: pointer;
		 top: 335px;

	}

#motion-prev {
		left: 0;

	}

#motion-next {
		right: 0;

	}


/*----------------------------------------------------------------*/
/* #Services */
/*----------------------------------------------------------------*/

#services {
		width: 100%;
		 height: auto;
		 padding: 60px 0;

	}

#services .icon-box {
		padding: 15px 5px 8px;
		 display: table;
		 cursor: pointer;

	}

#services .icon-box.selected {
		background: #fee300;

	}

#services .icon-box.selected i, #services .icon-box.selected h2 {
		color: #FFF;

	}

#services .icon-box .content {
		width: 90%;
		 height: auto;
		 padding: 12px;
		 text-align: justify;
		 float: left;

	}

#services .icon-box  i {
		font-size: 30px;
		 line-height: 44px;
		 float: left;
		 width: 45px;
		 height: 45px;
		 text-align: center;
		 line-height: 45px;
		 color: #fee300;
		 float: left;

	}

#services .icon-box h2 {
		width: 72%;
		 font-size: 16px;
		 line-height: 21px;
		 float: left;
		 padding-left: 15px;

	}

#services .icon-box:hover {
		border-color: #CCC;

	}

.service-detail {
		width: 89.2%;
		 height: auto;
		 display: none;
		 border: 1px solid #CCC;
		 padding: 50px;
		 position: relative;

	}

.service-detail .submenus {
		width: 24%;
		 float: left;

	}

.service-detail .submenus li {
		padding: 12px 0;
		 border-bottom: 1px solid #ECECEC;
		 cursor: pointer;
		 font-family: 'Arvo', serif;
		 font-size: 14px;

	}

.service-detail .submenus li.selected {
		font-weight: bold;

	}

.service-detail .content {
		width: 70%;
		 float: right;
		 display: none;

	}

.service-detail .close {
		background: #E7E7E7;
		 color: #FFF;
		 font-family: 'Open Sans',serif;
		 font-size: 20px;
		 font-weight: 600;
		 height: 40px;
		 line-height: 40px;

position: absolute;
 right: 0;
 text-align: center;
 top: 0;
 width: 40px;
 cursor: pointer;

}

/*----------------------------------------------------------------*/
/* # Portfolio */
/*----------------------------------------------------------------*/

#portfolio {
		width: 100%;
		 height: auto;
		 background: url('../img/portfolio_bg.jpg') no-repeat;
		 background-attachment: scroll;
		 padding: 60px 0;
		 position: relative;

	}

#portfolio .section-title .dots {
		color: #848484;

	}

#portfolio .section-title span {
		color: #FFF;

	}

#filters,
#filters-team {
		width: 100%;
		 height: 50px;
		 margin-bottom: 40px;

	}

#filters li,
#filters-team li {
		width: 20%;
		 float: left;
		 text-align: center;

	}

#filters li a,
#filters-team li a {
		font-family: 'Arvo', serif;
		 font-size: 17px;
		 text-transform: uppercase;
		 color: #FFF;
		 display: block;
		 height: 45px;
		 line-height: 45px;

	}

#filters li a.selected,
#filters-team li a.selected {
		color: #fee300;
		 border: 4px solid #fee300;
		 margin-top: -4px;

	}

#filters li a:hover, 
#filters-team li a:hover {
		color: #fee300;

	}

#portfolio-wrapper {
		width: 100%;
		 height: auto;

	}

.portfolio-item {
		width: 100%;
		 background: #1B1B1B;
		 margin: 10px;
		 cursor: pointer;

	}

.portfolio-item h2 {
		font-size: 18px;
		 line-height: 25px;
		 margin-bottom: 0;
		 color: #FFF;

	}

.portfolio-item figcaption {
		width: 94%;
		 float: left;
		 padding: 0 10px;
		 color: #FFF;

	}

.portfolio-item i {
		width: 40px;
		 float: right;
		 font-size: 23px;
		 color: #FFF;
		 border: 4px solid #FFF;
		 text-align: center;
		 line-height: 40px;
		 margin: 10px 0;

	}

.portfolio-item .desc {
		width: 73%;
		 display: table;
		 float: left;
		 margin-top: 11px;
		 font-size: 12px;

	}

.portfolio-item:hover {
		background: #FFF;

	}

.portfolio-item:hover figcaption {
		color: #787878;

	}

.portfolio-item:hover h2 {
		color: #fee300;

	}

.portfolio-item:hover i {
		color: #fee300;
		 border-color: #fee300;

	}

.portfolio-item .overlay {
		width: 100%;
		 height: 296px;
		 position: absolute;
		 top: 0;
		 left: 0;
		 background: rgba(0,0,0,0.8);
		 -webkit-transition: all 0.4s ease-in-out;
		 -moz-transition: all 0.4s ease-in-out;
		 -o-transition: all 0.4s ease-in-out;
		 -ms-transition: all 0.4s ease-in-out;
		 transition: all 0.4s ease-in-out;
		 opacity: 0;

	}

.portfolio-item .overlay i {
		color: rgba(255,255,255,0.2) !important;
		 border: 0;
		 font-size: 60px;
		 float: none;
		 display: table;
		 margin: 44% auto;

	}

.portfolio-item:hover .overlay {
		opacity: 1;

	}

.portfolio-item .picture {
		width: 300px;
		 height: 296px;
		 overflow: hidden;

	}

.portfolio-item .picture img {
		width: 100%;

	}

.isotope-item {
		z-index: 2;

	}

.isotope-hidden.isotope-item {
		z-index: 1;

	}

/* Isotope CSS3 transitions */
.isotope, .isotope .isotope-item {
		-webkit-transition-duration: 0.8s;
		 -moz-transition-duration: 0.8s;
		 -ms-transition-duration: 0.8s;
		 -o-transition-duration: 0.8s;
		 transition-duration: 0.8s;

	}

.isotope {
		-webkit-transition-property: height, width;
		 -moz-transition-property: height, width;
		 -ms-transition-property: height, width;
		 -o-transition-property: height, width;
		 transition-property: height, width;

	}

.isotope .isotope-item {
		-webkit-transition-property: -webkit-transform, opacity;
		 -moz-transition-property:    -moz-transform, opacity;
		 -ms-transition-property:     -ms-transform, opacity;
		 -o-transition-property: -o-transform, opacity;
		 transition-property: transform, opacity;

	}

/* disabling Isotope CSS3 transitions */
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
		-webkit-transition-duration: 0s;
		 -moz-transition-duration: 0s;
		 -ms-transition-duration: 0s;
		 -o-transition-duration: 0s;
		 transition-duration: 0s;

	}

/* required for containers to inherit vertical size from window */
html, body {
		height: 100%;

	}

#portfolio-details {
		width: 100%;
		 height: auto;
		 display: table;
		 position: absolute;
		 -webkit-transition: all 0.3s ease-in-out;
		 -moz-transition: all 0.3s ease-in-out;
		 transition: all 0.3s ease-in-out;
		 margin: 0 auto;
		 z-index: -100;
		 opacity: 0;
		 -webkit-transform: translate(100%,100%);
		 -moz-transform: translate(100%,100%);
		 -o-transform: translate(100%,100%);
		 -ms-transform: translate(100%,100%);
		 transform: translate(100%,100%);
		 top: 0 !important;

	}

#portfolio-details.visible {
		opacity: 1;
		 -webkit-transform: translate(0%);
		 -moz-transform: translate(0%);
		 -o-transform: translate(0%);
		 -ms-transform: translate(0%);
		 transform: translate(0%);
		 z-index: 9999;

	}

.pfdetail-active {
		position: absolute !important;
		 top: 0px !important;
		 left: 0px !important;
		 z-index: 100 !important;
		 opacity: 1 !important;
		 display: block !important;

	}

.pfdetail-inactive {
		position: absolute !important;
		 top: 0px !important;
		 left: 0px !important;
		 z-index: 97 !important;
		 display: none !important;

	}

.controls {
		width: 100%;
		 height: 52px;
		 display: block;
		 margin: 0 auto;

	}

.controls span {
		width: 50px;
		 height: 50px;
		 background: #fee300;
		 font-size: 36px;
		 font-weight: 300;

color: #FFF;
 line-height: 50px;
 text-align: center;
 display: table;
 float: left;
 cursor: pointer;

}

.controls span:hover {
		background: #01B897;

	}

.controls .close {
		font-weight: 400 !important;
		 height: 51px;
		 background: #1B1B1B;
		 float: right;

	}

.portfolio-details-wrapper {
		display: block;
		 clear: both;
		 position:relative;
		 width: 100%;
		 height: auto;
		 margin-top: -3px;

	}

.portfolio-details-wrapper li {
		float: left;
		 overflow: hidden;

	}

.dark-overlay {
		width: 100%;
		 height: 500%;
		 position: absolute;
		 z-index: 10;
		 background: rgba(0,0,0,0.8);
		 top: 0;
		 display: none;

	}

.details {
		background: #FFF;
		 padding: 20px;
		 margin-top: -5px;
		 display: table;
		 min-height: 250px;
		 width: 100%;

	}

.details .icons {
		width: 60px;
		 float: left;

	}

.details .icons i {
		width: 40px;
		 height: 40px;
		 line-height: 40px;
		 font-size: 23px;
		 color: #CCC;
		 border: 3px solid;
		 display: table;
		 text-align: center;
		 margin-bottom: 10px;

	}

.details .icons i:hover, .details .icons i.selected {
		color: #fee300;
		 border-color: #fee300;
		 cursor: pointer;

	}

.details .descr {
		width: 85%;
		 float: left;
		 margin-left: 20px;
		 display: none;

	}

.details .descr {
		width: 85%;
		 float: left;
		 margin-left: 20px;
		 display: none;

	}

.details .descr h3 {
		margin-bottom: 28px;

	}

.details .descr img {
		float: left;
		 padding-right: 10px;

	}

.details .descr.shown {
		display: block;

	}


/*----------------------------------------------------------------*/
/* # About Us*/
/*----------------------------------------------------------------*/

#about {
		width: 100%;
		 height: auto;
		 background: #d3d3d3;
		 background-attachment: scroll;
		 padding: 60px 0;
		 position: relative;

	}

#about .section-title .dots {
		color: #848484;

	}

#about .section-title span {
		color: #FFF;

	}

#filters-team {
		width: 100%;
		 height: 50px;
		 margin-bottom: 40px;

	}

#filters-team li {
		width: 20%;
		 float: left;
		 text-align: center;

	}

#filters-team li a {
		font-family: 'Arvo', serif;
		 font-size: 17px;
		 text-transform: uppercase;
		 color: #FFF;
		 display: block;
		 height: 45px;
		 line-height: 45px;

	}

#filters-team li a.selected {
		color: #fee300;
		 border: 4px solid #fee300;
		 margin-top: -4px;

	}

#filters-team li a:hover {
		color: #fee300;

	}

#team-wrapper {
		width: 100%;
		height: auto;
		padding-bottom: 20px;
	}

.team-desc {
	margin-top: -76px;
	background: rgba(255,255,255,0.8);
	position: relative;
	padding: 5px;
	text-align: center;
	width: 290px;
}

.team-desc h2 {
	font-size: 25px;
	margin-bottom: 0;
}

#about .section-title span {
		color: #858585;

	}

#about .section-title .dots {
		border-color: #b4b4b4
	}

.team {
		width: auto;
		 height: 350px;
		 overflow: hidden;
		 margin-top: 17px;
		 float: left;
		 margin-left: 10px;

	}

.team-thumb {
		width: 130px;
		 height: 120px;
		 padding-top: 70px;
		 overflow: hidden;
		 margin: 0 4px;
		 float: left;
		 position: relative;

	}

.team-thumb .team-title, .team-thumb .team-info {
		opacity: 0;

	}

.team-thumb.active .team-title, .team-thumb.active .team-info {
		opacity: 1;

	}

.team-thumb .overlay {
		width: 100%;
		 height: 100%;
		 position: absolute;
		 background: #2E3133;
		 opacity: 0.6;

	}

.team-thumb.active {
		width: 280px;
		 height: auto;
		 overflow: visible;
		 margin-top: -70px;

	}

.team-thumb.active .overlay {
		opacity: 0;

	}

.team-thumb.active .team-title {
		width: 255px;
		 line-height: 45px;
		 font-family: 'Arvo', serif;
		 font-size: 18px;
		 text-transform: uppercase;
		 color: #FFF;
		 background: rgba(0,0,0,0.6);

position: absolute;
 display: table;
 margin: 0 auto;
 text-align: center;
 left: 13px;
 top: 273px;

}

.team-thumb.active .team-info {
		width: 280px;
		 height: 55px;
		 background: #FFF;
		 position: relative;
		 margin-top: -5px;

	}

.team-thumb.active .team-info h3 {
		font-family: 'Open Sans', sans-serif;
		 font-size: 15px;
		 text-align: center;
		 padding: 10px 0;
		 margin: 0;

	}

.team-thumb.active .team-info .social-networks {
		width: auto;
		 height: auto;
		 display: table;
		 margin: -3px auto 0;
		 float: none;

	}

.team-thumb.active .team-info .social-networks li {
		float: left;

	}

.team-thumb.active .team-info .social-networks i {
		font-size: 23px;
		 color: #BCBCBC;

	}

.team-thumb.active .team-info .social-networks i:hover {
		color: #fee300;

	}

.team-thumb.active .team-info .social-networks a {
		padding: 0 10px;
		 display: block;

	}

.team-thumb img {
		width: 100%;

	}

#team-next, #team-prev {
		width: 44px;
		 height: 96px;
		 cursor: pointer;
		  margin-top: 98px;

	}

#team-next {
		background: url('../img/team/team_next.png') no-repeat;
		 float: right;
		 margin-right: -20px;
		 margin-left: 20px;

	}

#team-prev {
		background: url('../img/team/team_prev.png') no-repeat;
		 float: left;
		 margin-left: -20px;
		 margin-right: 20px;

	}









#about-dt {
		width: 100%;
		 height: auto;
		 background: #FFF;
		 padding: 60px 0;

	}

#about-dt .lead {
		font-weight: 300;
		 font-size: 17px;
		 text-align: center;
		 width: 85%;
		 margin: 0 auto;

	}

.knowledge {
		display: table;
		 margin: 50px auto 0;

	}

.knowledge li {
		float: left;
		 padding: 0 30px;
		 text-align: center;

	}

.knowledge i {
		font-size: 83px;
		 color: #fee300;
		 line-height: 100px;

	}

.knowledge span {
		display: block;
		 font-family: 'Arvo', serif;
		 font-size: 22px;
		 color: #fee300;

	}

/*----------------------------------------------------------------*/
/* # Testimonials */
/*----------------------------------------------------------------*/

#testimonials {
		width: 100%;
		 height: auto;
		 background: #FFF;
		 padding-bottom: 60px;

	}

#quote-slider {
		width: 100%;
		 height: 152px;
		 margin-bottom: 50px;

	}

.quote blockquote {
		width: 72%;
		 height: 112px;
		 background: #ECECEC;
		 padding: 20px 30px;
		 float: right;
		 font-size: 17px;

font-weight: 300;
 font-style: italic;
 line-height: 25px;
 color: #9E9E9F;

}

.quote .bullet {
		width: 17px;
		 height: 33px;
		 background: url('../img/clients/bullet.png') no-repeat;
		 position: absolute;
		 margin: 4px 0 0 -45px;

	}

.quote h2 {
		font-size: 19px;
		 font-style: normal;

	}

.avatar {
		width: 159px;
		 height: 152px;
		 float: left;

	}

.client-logo img {
		display: table;
		 margin: 0 auto;

	}

/*----------------------------------------------------------------*/
/* # Our Blog */
/*----------------------------------------------------------------*/

#blog {
		width: 100%;
		 height: auto;
		 padding: 60px 0;
		 background: #E1E1E1;

	}

#blog .section-title span {
		color: #858585;

	}

#blog .section-title .dots {
		border-color: #b4b4b4
	}

.blog-item {
		width: 100%;
		 height: auto;
		 display: table;
		 background: #fee300;
		 border-bottom: 2px solid #CACACA;
		 -webkit-transition: all 0.3s ease-in-out;
		 -moz-transition: all 0.3s ease-in-out;
		 transition: all 0.3s ease-in-out;

	}

.blog-item:hover, .blog-item.short:hover {
		background: #1B1B1B;

	}

.blog-item:hover .blog-title, .blog-item.short:hover .blog-title {
		color: #CCC;

	}

.blog-item:hover .desc h2, .blog-item.short:hover .desc h2 {
		color: #fee300;

	}

.blog-item:hover i, .blog-item.short:hover i {
		color: #fee300;
		 border-color: #fee300;

	}

.blog-item.short .picture {
		height: 190px;

	}

.blog-item h2 {
		font-size: 19px;
		 line-height: 25px;
		 margin-bottom: 0;
		 color: #FFF;

	}

.blog-item .blog-title{
		width: 96%;
		 float: left;
		 padding: 10px;
		 color: #FFF;
		 font-size: 12px;
		 -webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;

}

.blog-item .desc {
		width: 80%;
		 float: left;

	}

.blog-item i {
		width: 40px;
		 float: right;
		 font-size: 23px;
		 color: #FFF;
		 border: 4px solid #FFF;
		 text-align: center;
		 line-height: 40px;

	}

.blog-item .description {
		background: #FFF;
		 float: left;
		 padding: 20px;
		 color: #1B1B1B;
		 font-weight: 300;
		 font-size: 13px;
		 margin: 0;

	}

.blog-item .picture {
		width: 100%;
		 height: auto;
		 overflow: hidden;

	}

.blog-item .picture img {
		width: 100%;

	}

.grid {
		max-width: 69em;
		 list-style: none;
		 margin: 30px auto;
		 padding: 0;

	}

.grid li {
		display: block;
		 float: left;
		 padding: 7px;
		 width: 50%;
		 opacity: 0;

	}

.grid li.shown, .no-js .grid li, .no-cssanimations .grid li {
		opacity: 1;

	}

.grid li a, .grid li img {
		outline: none;
		 border: none;
		 display: block;
		 max-width: 100%;

	}

.grid li, .grid li:after, .grid li:before {
	 -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;

	}

.grid.effect-3 li.animate {
		-webkit-transform: scale(0.6);
		 -moz-transform: scale(0.6);
		 transform: scale(0.6);
		 -webkit-animation: scaleUp 0.65s ease-in-out forwards;
		 -moz-animation: scaleUp 0.65s ease-in-out forwards;
		 animation: scaleUp 0.65s ease-in-out forwards;

	}




/*----------------------------------------------------------------*/
/* # Contact */
/*----------------------------------------------------------------*/

#contact {
		width: 100%;
		 height: 550px;
		 background: url('../img/map_sample.jpg') no-repeat;

	}

#contact h1 {
		color: #FFF;
		 font-size: 50px;
		 padding-top: 100px;

	}

#contact h2 {
		color: #FFF;
		 font-size: 26px;
		 padding-top: 60px;

	}

.social-networks {
		width: 100%;
		 height: auto;
		 display: table;
		 float: left;
		 margin: 20px 0;

	}

.social-networks li {
		float: left;

	}

.social-networks i {
		font-size: 23px;
		 color: #FFF;

	}

.social-networks a {
		padding: 0 10px;
		 display: block;

	}

.social-networks a:hover i {
		color: #fee300;

	}

.contact-details li {
		color: #FFF;

	}

.contact-form-bg {
		width: 100%;
		 height: 550px;
		 background: url('../img/contact_form_bg.jpg') no-repeat;

	}

.contact-form {
		padding-top: 100px;

	}

.contact-form input, .contact-form textarea {
		width: 80%;
		 display: table;
		 margin: 20px auto;
		 border-radius: 0;
		 border: 1px solid #1B1B1B;

padding: 10px;
 font-family: 'Open Sans', sans-serif;
 font-size: 14px;
 font-weight: 300;
 font-style: italic;
 color: #787878;
 overflow: auto;

}

.contact-form input:focus, .contact-form textarea:focus {
		border-color: #fee300;
		 outline: none;

	}

.contact-form .submit-btn {
		width: 84%;
		 display: block;
		 margin: 20px auto;
		 border: 0;
		 font-size: 20px;
		 font-style: italic;
		 border-radius: 0 !important;

cursor: pointer;
 background: #fee300;
 font-family: 'Arvo', serif;
 color: #FFF;
 text-transform: uppercase;

}

.contact-form input[type="submit"] {
		-webkit-appearance: none;
		 -webkit-border-radius:0;
		 border-radius:0;
		 outline: none;

	}

.contact-form .submit-btn, .contact-form .submit-btn:focus, .contact-form .submit-btn:active {
		outline: none !important;

	}

.contact-form #success {
		display: table;
		 font-family: 'Open Sans',sans-serif;
		 margin: 0 auto;
		 border: 2px solid #fee300;
		 padding: 10px;
		 color: #fee300;
		 opacity: 0;

	}

/*----------------------------------------------------------------*/
/* # Footer */
/*----------------------------------------------------------------*/

#footer {
		width: 100%;
		 height: 60px;
		 background: #2E3133;

	}

#footer p {
		width: 100%;
		 line-height: 60px;
		 text-align: center;
		 color: #FFF;
		 font-family: 'Arvo', serif;
		 font-size: 13px;
		 margin: 0;

	}








/*----------------------------------------------------------------*/
/* # Media Queries */
/*----------------------------------------------------------------*/

@media only screen and (min-width: 960px) and (max-width: 999px) {


#navbar .six.columns {
		width: 320px;

	}


}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {


.section-title .dots {
		width: 222px;

	}

#header {
		height: 542px;

	}

.logo img {
		padding-left: 5%;

	}

#filters li a,
#filters-team li a {
		font-size: 13px;

	}

.portfolio-item .picture {
		width: 236px;
		 height: auto;

	}

.team-thumb {
		width: 120px;
		 height: 110px;

	}

.team-thumb.active, .team-thumb.active .team-info {
		width: 228px;

	}

.team-thumb.active .team-title {
		top: 240px;
		 left: 8px;
		 width: 213px;
		 font-size: 13px;
		 line-height: 32px;

	}

#about {
		/*height: 375px;*/

	}

.team-thumb {
		width: 95px;
		 height: 85px;

	}

#team-next, #team-prev {
		margin-top: 81px;

	}

.quote blockquote {
		width: 67%;

	}

.quote h2 {
		margin-bottom: 0;

	}

.blog-item.short .picture {
		height: auto;

	}

.blog-item .blog-title{
		width: 95%;

	}

#menu a {
		padding: 0 8px;

	}

.controls {
		left: 31px;

	}

#portfolio-details, .portfolio-details-wrapper, .portfolio-details-wrapper li {
		width: 768px;

	}

.portfolio-item figcaption {
		height: 67px;
		 overflow: hidden;

	}

.motion-slider {
		margin-top: 200px;

	}

.motion-slider .model {
		margin: 80px 30px 0 80px;
		 width: 41%;

	}

.motion-slider .title {
		font-size: 35px;
		 width: 300px;
		 font-size: 30px;

	}

.motion-slider .subtitle {
		font-size: 19px;
		 padding: 0px 19px 12px;
		 margin-right: 39px;

	}

.motion-slider li.right .title {
		width: 290px;

	}

.motion-slider li.right .subtitle {
		padding: 0 19px 12px 30px;

	}

.motion-slider li.right .model {
		width: 47%;

	}

.motion-slider li.right .btn {
		margin-right: 53px;

	}

.motion-slider li.last .btn {
		margin-right: 77px;

	}


}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {


#header {
		height: 480px;

	}

.motion-slider {
		margin-top: 140px;

	}

.motion-slider .model {
		margin: 80px 30px 0;
		 width: 47%;

	}

.motion-slider li.right .model, .motion-slider .model {
		margin-top: 45px;

	}



#portfolio {
		background-attachment: scroll;

	}

#navbar .six.columns {
		width: 260px;

	}

#navbar.sticked .ten.columns {
		width: 454px;

	}

.portfolio-item .overlay {
		display: none;

	}

#motion-prev, #motion-next {
		top: 270px;

	}

.portfolio-item h2 {
		font-size: 13px;

	}


}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {


.portfolio-item .overlay {
		display: none;

	}

.logo img {
		padding-left: 9%;

	}

.slogan {
		text-align: center;
		 margin: 334px auto 0;

	}

.section-title .dots {
		width: 58px;

	}

#menu {
		display: none;

	}

#header {
		height: 650px;

	}

#mobile-menu {
		display: block;

	}

#navbar .six.columns {
		width: 300px !important;
		 display: table;
		 float: none;
		 margin: 0 auto;

	}

#navbar .ten.columns {
		width: 100px !important;
		 display: none;

	}

#navbar.sticked .ten.columns {
		display: block;

	}

#navbar.sticked .six.columns {
		width: 300px !important;
		 display: inline;
		 float: left;
		 margin: 0 10px;

	}

.logo {
		float: left;
		 width: 75%;

	}

#filters, 
#filters-team {
		height: auto;

	}

#filters li,
#filters-team li {
		width: 100%;
		 float: none;

	}

.portfolio-item .picture {
		height: 296px;
		 width: 100%;
		 overflow: hidden;

	}

.portfolio-item {
		margin-bottom: 30px !important;

	}

#portfolio {
		-webkit-background-size: cover;
		 background-size: cover;
		 background-attachment: scroll;

	}

.team {
		margin-left: 50px;

	}

.team-thumb {
		display: none;

	}

.team-thumb.active {
		display: table;
		 float: none;
		 margin: 0 auto;
		 padding-top: 0;

	}

.team-thumb.active .team-title {
		top: 171px;

	}

.team-prev {
		left: 0;

	}

.team-next {
		right: 0;

	}

.knowledge li {
		padding: 0;
		 width: 50%;

	}

.avatar {
		float: none;
		 margin: 0 auto 30px;
		 display: block;

	}

.quote blockquote {
		width: 85.5%;
		 height: auto;
		 margin-bottom: 30px;

	}

.quote .bullet {
		-webkit-transform: rotate(90deg);
		 -moz-transform: rotate(90deg);
		 -o-transform: rotate(90deg);

-ms-transform: rotate(90deg);
 transform: rotate(90deg);
 margin: -44px 40% 0;

}

.client-logo img {
		margin: 20px auto;

	}

.grid li {
		width: 100%;

	}

#services .icon-box {
		width: 97.2%;

	}

#services .icon-box h2 {
		width: 77%;
		 line-height: 38px;

	}

.service-detail {
		width: auto;

	}

.service-detail .submenus {
		width: 100%;
		 float: none;
		 margin-bottom: 20px;

	}

.service-detail .content {
		width: 100%;
		 float: none;

	}

#contact {
		height: auto;
		 -webkit-background-size: cover;
		 background-size: cover;

	}

#contact h1, #contact h2 {
		text-align: center;

	}

#contact h2 {
		padding-top: 0;

	}

#contact .social-networks {
		float: none;
		 width: auto;
		 margin: 20px auto;

	}

.contact-details {
		margin-bottom: 30px;

	}

.contact-details li {
		text-align: center;

	}

#portfolio-details, .portfolio-details-wrapper, .portfolio-details-wrapper li {
		width: 420px;

	}

.details .descr {
		width: 75%;

	}

.motion-slider .model {
		width: 60%;
		 margin: 0 auto !important;
		 display: table;
		 float: none;

	}

.motion-slider .title {
		float: none;
		 display: table;
		 margin: 40px auto 11px;
		 width: 420px;
		 text-align: center;

	}

.motion-slider .subtitle {
		float: none;
		 display: table;
		 margin: 0 auto;

	}

.motion-slider .btn {
		margin: 0 auto;
		 display: table;
		 float: none;

	}

.motion-slider li.right .model {
		float: none;
		 width: 60%;

	}

.motion-slider li.right .title {
	 float: none;
	  margin: 40px auto 11px;
	  width: 420px;

	}

.motion-slider li.right .subtitle {
		float: none;
		 margin: 0 auto;

	}

.motion-slider li.right .btn {
		float: none;
		 margin: 0 auto;

	}

.motion-slider li.last .subtitle {
		float: none;
		 padding: 0 19px 12px 30px;

	}

.motion-slider li.last .btn {
		float: none;
		 margin: 0 auto;

	}




}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {


#header {
		height: 570px;

	}

#header, #portfolio {
		background-attachment: scroll;

	}

#mobile-menu {
		display: none;
		 width: 33px;

	}

.logo {
		width: auto;

	}

#navbar.sticked .logo img {
		padding: 0;

	}

#navbar.sticked #mobile-menu {
		display: block;

	}

#navbar.sticked .six.columns {
		width: 245px !important;

	}

#navbar.sticked .ten.columns {
		width: 47px !important;

	}

.slogan {
		font-size: 34px;

	}

.section-title span {
		width: 230px;

	}

.section-title .dots {
		width: 34px;

	}

.portfolio-item h2 {
		font-size: 18px;

	}

.team {
		height: 380px;
		 margin-left: 8px;

	}

#team-prev {
		margin-right: 5px;

	}

#team-next {
		margin-left: 5px;

	}

.quote blockquote {
		width: 79.5%;

	}

.quote .bullet {
		margin: -44px 36% 0;

	}

.quote h2 {
		text-align: center;

	}

.blog-item .blog-title{
		width: 93%;

	}

#portfolio-details, .portfolio-details-wrapper, .portfolio-details-wrapper li {
		width: 300px;

	}

.details .descr img {
		width: auto;

	}

.details .descr {
		width: 90%;

	}

.details .icons {
		width: 100%;
		 float: none;

	}

.details .icons i {
		float: left;
		 margin: 0 9px 17px;

	}

.details .descr img {
		float: none;

	}

#footer p {
		line-height: 22px;
		 padding-top: 10px;

	}

.motion-slider .model {
		margin-top: 125px !important;

	}

.motion-slider {
		margin-top: 40px;
		 height: 530px;

	}

#motion-prev, #motion-next {
		top: 195px;

	}

.motion-slider .title, .motion-slider li.right .title {
		width: 300px;

	}

.motion-slider .subtitle {
		font-size: 15px;

	}

.motion-slider-wrap {
		height: 100%;

	}


}