/*--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
body{
	background:#fff;
	font-family: 'Exo', sans-serif;
}
.header{
	background: #3A4D5B;
	border-bottom: 2px solid #668395;
}
.logo{
	float: left;
	margin-top: 1.5em;
	color:#e999ff;
	
}
.top-nav{
	float: right;
}
.top-nav ul{
	padding: 0;
	margin: 0;
}
.top-nav ul li{
	display: inline-block;
	padding: 2em 0.3em;
}
.top-nav ul li a{
	text-decoration: none;
	font-size: 1.3em;
	color: #87A2B5;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-moz-transition: 0.5s all;
}
.top-nav ul li  span{
	padding: 0.5em;
	color: #87A2B5;
	font-size: 1.3em;
}
.top-nav ul li a:hover,.top-nav ul li a.active{
	color: #fff;
	border-bottom: 1px solid #DD625A;
}
.top-nav span.menu{
	display:none;	
}
.top-nav span.menu:before{
	content:url("../images/menu.png");
	cursor:pointer;	
	width:100%;
}
/*----responsive-menu-start---*/
@media(max-width:768px){
.top-nav ul li{
	display:block;
	float:none;
	margin: 1.5em 0.7em;
	padding: 0 0;
	text-align: center;
}
.top-nav ul li a{
	color:#fff;
	border: none;
	padding: 0;
}
.top-nav ul li a:hover,.top-nav ul li a.active{
	color:#000;
	border: none;
}
.top-nav ul{
	display:none;
	background:#DD625A;
	position:absolute;
	width:100%;
	z-index: 999;
	left: 0%;
	margin: 0em 0em;
}
.top-nav span.menu{
	display: block;
	width: 100%;
	position:relative;
	padding: 1.1em 1em 0.5em;
	text-align: right;
}
.top-nav ul li  span{
	display: none;
}
}
/*--content--*/
/*--banner--*/
.banner{
	background: url(../images/banner.jpg) 0px 0px;
	width: 100%;
	min-height:380px;
	display: block;
	position: relative;
}
.banner-matter{
	position:absolute;
	top:200px;
	left: 176px;
	width: 739px;
}
.banner-matter h2{
	font-size: 3.5em;
	padding: 0.2em 0;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	font-weight: 400;
}
.banner-matter p{
	font-size: 2.5em;
	padding: 0 0 1.5em;
	margin: 0;
	color: #fff;
	font-weight: 200;
}
a.more{
	text-decoration: none;
	font-size: 1em;
	background: #D26261;
	padding: 0.8em 1.5em;
	text-align: center;
	color: #fff;
	border-radius: 7px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 0 5em;
	border-bottom: 3px solid #953D3C;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-moz-transition: 0.5s all;
}
a:hover.more{
	background:  #953D3C;
}
/*--content--*/
.what-we-do{
	text-align: center;
	background: #E9EDF0;
	border-bottom: 1px solid #668395;
	padding-top: 4em;
	padding-right: 0;
	padding-bottom: 4em;
	padding-left: 0;
}
.what-we h3{
	font-size: 3em;
	padding: 0.5em 0;
	margin: 0;
	color: #384E5C;
	text-transform: uppercase;
	font-weight: 400;
}
.what-we h3 span{
	border-bottom: 3px solid #909DA6;
}
.what-we p{
	font-size: 1.2em;
	
	line-height:30px;
  
	color: #8B9CA6;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	width: 79%;
	margin: 0 auto;
}
span.line{
	background:url(../images/line.png) 0px 0px;
	width: 318px;
	height: 364px;
	display: block;
	position: absolute;
	top:13%;
	left:8%;
}
.pencil-line{
	position: relative;
}
.pencil-line h4{
	font-size: 2em;
	padding: 0.4em 0;
	margin: 0;
	color: #D26261;
	font-weight: 400;
}
.pencil-line p{
	font-size: 1.4em;
	padding: 0 0;
	color: #788993;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	width: 69%;
	margin: 0 auto;
	line-height: 30px;
}
.portfolio-do{
	text-align: center;
	padding: 4em 0;
}
.portfolio-we h3{
	font-size: 2em;
	padding: 0.5em 0;
	margin: 0;
	color: #3A4D5B;
	text-transform: uppercase;
	font-weight: 400;
}
.portfolio-we h3 span{
	border-bottom: 3px solid #909DA6;
}
 label.portfolio-menu:before{
	content:url("../images/down.png");
	cursor:pointer;	
	width:100%;
}
ul#filters li{
	display:block;
	float:none;
	margin: 1em 3em;
	padding: 0 0;
	text-align: center;
	list-style: none;
	border-bottom: 1px solid #9CA7AD;
}
ul#filters li span{
	color:#fff;
	padding: 0;
	text-align: center;
	font-size: 1.2em;	
}
ul#filters li.mobile{
	border-bottom:none;
}
ul#filters li:hover{
	border-bottom:none;
}
ul#filters li span:hover{
	padding:10px 17px;
	background: #DC635B;
	border-radius: 7px;
}

.sou li:hover{
	background:#F60;
	
	
	}
.sou hover{
	background:#F60;
	
	
	}

ul#filters {
	display:none;
	background:#3A4D5B;
	position:absolute;
	width:13%;
	z-index: 999;
	left: 43%;
	margin: 0em 0em;
	padding: 0;
	border-radius: 7px;	
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-o-border-radius: 7px;
	-ms-border-radius: 7px;
	-moz-border-radius: 7px;
}

label.portfolio-menu{
	display: block;
	width: 100%;
	position:relative;
	padding: 0.8em 1em 0;
	text-align: center;
}
#portfoliolist .portfolio {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		width: 31%;
		display: none;
		float: left;
		overflow: hidden;
		margin: 1%;
		position: relative;
}
div#portfoliolist {
		padding: 20px 0px;
}	
.portfolio-wrapper {
		overflow:hidden;
		position: relative !important;
		cursor:pointer;	
		padding: 0em 0;
}
.portfolio-wrapper:hover .simple{
	display: block;
}
.portfolio img {
		max-width:100%;
		transition: all 300ms!important;
		-webkit-transition: all 300ms!important;
		-moz-transition: all 300ms!important;
}
.portfolio .label {
		position: absolute;
		width: 100%;
		height:40px;
		bottom:-40px;
}
.portfolio .label-bg {
			background: #22B4B8;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
}
.portfolio .label-text {
			color:#fff;
			position: relative;
			z-index:500;
			padding:5px 8px;
}		
.portfolio .text-category {
	display:block;
	font-size:9px;
	font-size: 12px;
	text-transform:uppercase;
	color: #fff;
}
.simple h5{
	font-size: 1.4em;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #fff;
}
.simple {
	text-align: center;
	position: absolute;
	top: 0%;
	left:0%;
	display: none;
	width: 100%;
	height: 100%;
	padding: 9em 0;
	background: #D26261
}
.simple p {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1.2em;
	margin: 0;
	padding:0.3em 0;
	color: #fff;
	font-weight: 500;
}
/*--team--*/
.our-team{
	text-align: center;
	background: #3A4D5B;
	padding: 4em 0;
	border-bottom: 2px solid #668395;
	border-top: 2px solid #668395;
}
.team h3{
	font-size: 3em;
	padding: 0.5em 0;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	font-weight: 400;
}
.team h3 span{
	border-bottom: 3px solid #909DA6;
}
.team p{
	font-size: 1.9em;
	padding: 0.3em 0;
	color: #8B9CA6;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	width: 79%;
	margin: 0 auto;
}
.design {
	position: relative;
}
.doe{
	width: 98.2%;
	background: #fff;
	padding: 0 0 0.8em;
}
.doe h5{
	font-size: 1.7em;
	padding: 0.5em 0 0;
	margin: 0;
	color: #3A4D5B;
}
.doe span{
	font-size: 1.4em;
	padding: 0.3em 0;
	color: #D67878;
	font-family: 'Ubuntu', sans-serif;
}
.design:hover ul.social{
	display: block;
}
ul.social{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 40%;
	left: 20%;
	display: none;
}
ul.social li{
	display: inline-block;
}
ul.social li a span{
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-moz-transition: 0.5s all;
}
ul.social li a span{
	background: url(../images/social.png) 0px 0px;
	width: 55px;
	height: 55px;
	display: block;
}
ul.social li.twitter a span{
	background-position:-55px -80px;
}
ul.social li.inline a span{
	background-position:-112px -80px;
}
ul.social li.twitter a span:hover{
	background-position:  -55px 0px;
}
ul.social li.inline a span:hover{
	background-position:-112px 0px;
}
/*--contact--*/
.contact-us{
	text-align: center;
	background: #E9EDF0;
	padding: 4em 0;
}
.contact h3{
	font-size: 3em;
	padding: 0.5em 0;
	margin: 0;
	color: #3A4D5B;
	text-transform: uppercase;
	font-weight: 400;
}
.contact h3 span{
	border-bottom: 3px solid #909DA6;
}
.contact p{
	font-size: 1.9em;
	padding: 0.3em 0;
	color: #8B9CA6;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	width: 79%;
	margin: 0 auto;
}
.contact-us input[type="text"],.contact-us textarea,.contact-us input[type="submit"]{
	font-size: 1.2em;
	width: 38%;
	padding: 1em;
	margin: 1em;
	background: #F8FAF9;
	outline:none;
	border-radius: 5px;
	border: 1px solid #A3B9C7;
	color: #A3B9C7;
	-webkit-appearance: none;
}
.contact-us textarea{
	resize:none;
	width: 79%;
}
.contact-us input[type="submit"]{
	width: 20%;
	font-size: 1.5em;
	background: #D26261;
	padding: 0.8em 0;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 0 auto;
	border-bottom: 3px solid #953D3C;
	-webkit-appearance: none;
}
.contact-us input[type="submit"]:hover{
	background:  #953D3C;
}
/*--footer--*/
.footer{
	background: #fff;
	padding: 2em 0;
}
.footer p{
	margin:0;
	font-size: 1.3em;
	color:#74828B;	
	padding: 1.5em 0;
}
p.footer-class{
	float: left;
}
.footer a{
	color:#D26261;
	text-decoration:none;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-moz-transition: 0.5s all;
}
ul.social-icons{
	padding: 0;
	margin: 0;
	float:right;
}
ul.social-icons li{
	display: inline-block;
}
ul.social-icons li a span{
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-moz-transition: 0.5s all;
}
ul.social-icons li a span{
	background: url(../images/sc-ic.png) 0px -81px;
	width: 46px;
	height: 62px;
	display: block;
}
ul.social-icons li.facebook a span:hover{
	background-position:0px 3px;
}
ul.social-icons li.twitter a span{
	background-position:-55px -81px;
}
ul.social-icons li.youtube a span{
	background-position:-114px -81px;
}
ul.social-icons li.inline a span{
	background-position:-170px 3px;
}
ul.social-icons li.message a span{
	background-position:-229px -81px;
}
ul.social-icons li.youtube a span:hover{
	background-position:-114px 3px;
}
ul.social-icons li.twitter a span:hover{
	background-position:  -55px 3px;
}
ul.social-icons li.message a span:hover{
	background-position:-229px 3px;
}
.footer a:hover{
	color:#74828B;
}
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 25px;
	right: 10px;
	overflow: hidden;
	width: 48px;
	height: 48px;
	border: none;
	text-indent: 100%;
	background: url('../images/up.png') no-repeat 0px 0px;
}
/*--media-quries--*/
@media(max-width:1440px){
ul#filters li span:hover {
	padding: 10px 6px;
}
ul.social {
	left: 19.5%;
}
}
@media(max-width:1366px){
.banner-matter {
	left: 28%;
}
ul#filters li span:hover {
	padding: 10px 1px;
}
@media(max-width:1280px){
ul#filters {
	width: 15%;
	left: 42%;
}	
ul#filters li span:hover {
	padding: 11px 8px;
}
@media(max-width:1024px){
.banner-matter {
	left: 22%;
}
span.line {
	left: -1%;
}
.pencil-line p {
	width: 80%;
}
.doe {
	width: 100%;
}
ul.social {
	left: 14%;
}
ul#filters {
	width: 20%;
	left: 41%;
}
ul#filters li span:hover {
	padding: 12px 14px;
}
}
@media(max-width:768px){
.logo {
	margin-top: 0.2em;
}
.banner-matter {
	left: 11%;
	top:31%;
}
.pencil-line {
	padding: 0 0 4em;
}
.pencil-line p {
	width: 37%;
}
span.line {
	left: 28%;
}
.simple {
	padding: 5.5em 0;
}
img.design-team {
	margin: 0 auto;
}
.doe {
	width: 36%;
	margin: 0 auto;
}
ul.social {
	left: 38%;
}
.design {
	margin: 0.5em 0;
}
.contact-us input[type="submit"] {
	width: 27%;
}
ul#filters {
	width: 25%;
	left: 38%;
}
ul#filters li span:hover {
	padding: 9px 7px;
}
}
@media(max-width:640px){
.banner-matter {
	left: 9%;
	top: 32%;
}
.banner-matter h2 {
	font-size: 3em;
}
.banner-matter p {
	font-size: 2em;
}
span.line {
	left: 23%;
}
.pencil-line p {
	width: 39%;
}
ul#filters li span:hover {
	padding: 10px 8px;
}
.simple {
	padding: 3.5em 0;
}
.doe {
	width: 44.5%;
}
ul.social {
	left: 35%;
}
div#portfoliolist {
	padding: 5px 0px 27px;
}
.portfolio-do {
	padding: 2em 0 4em;
}
.what-we-do {
	padding: 2em 0 3em;
}
.contact-us {
	padding: 2em 0 4em;
}
.our-team {
	padding: 2em 0 4em;
}
ul#filters {
	width: 30%;
	left: 35%;
}
ul#filters li span:hover {
	padding: 11px 5px;
}
}
@media(max-width:480px){
.banner {
	min-height: 400px;
}
.banner-matter h2 {
	font-size: 2.5em;
}
.banner-matter p {
	font-size: 1.5em;
}
.banner-matter {
	left: 5%;
	top: 30%;
}
span.line {
	left: 14%;
}
ul#filters {
	width: 38%;
	left: 32%;
}
ul#filters li span:hover {
	padding: 10px 2px;
}
.pencil-line p {
	width: 39%;
}
.what-we h3,.portfolio-we h3,.team h3,.contact h3 {
	font-size: 2.5em;
}
.what-we p {
	font-size: 1.5em;
	font-weight: 400;
	width: 87%;
}
a.more {
	padding: 0.8em 2.5em;
	margin: 0 5em;
}
.pencil-line p {
	font-size: 1.3em;
	width: 54%;
	font-weight: 500;
}
.doe {
	width: 62%;
}
.pencil-line h4 {
	font-size: 1.8em;
}
.simple {
	padding: 3em 0;
}
.simple h5 {
	font-size: 1.2em;
}
.simple p {
	font-size: 1em;
}
ul.social {
	left: 30%;
}
.contact-us input[type="text"] {
width: 78%;
}
.team p {
	font-size: 1.5em;
	font-weight: 400;
}
.contact-us input[type="submit"] {
	width: 46%;
}
}
@media(max-width:320px){
.banner {
	min-height: 210px;
}
.banner-matter {
	left: 4.5%;
	top: 23%;
}
.banner-matter h2 {
	font-size: 1.6em;
}
.banner-matter p {
	font-size: 1.2em;
}
a.more {
	padding: 0.2em 0.5em;
	margin: 0 2em;
	font-size: 0.5em;
}
.what-we h3, .portfolio-we h3, .team h3, .contact h3 {
	font-size: 1em;
}
.what-we p ,.team p,.contact p{
	font-size: 1.2em;
	font-weight: 500;
	width: 93%;
	height: 57px;
	overflow: hidden;
}
.pencil-line h4 {
	font-size: 1.4em;
}
.pencil-line p {
	font-size: 1.2em;
	width: 69%;
	line-height: 25px;
}
span.line {
	left: -9%;
	top: 32px;
	width: 309px;
}
ul#filters {
	width: 60%;
	left: 19%;
}
ul#filters li span {
	font-size: 1em;
}
ul#filters li span:hover {
	padding: 6px 11px;
}
#portfoliolist .portfolio {
	width: 48%;
}
ul.social {
	left: 23%;
}
.doe {
	width: 100%;
}
.doe h5 {
	font-size: 1.3em;
}
.doe span {
	font-size: 1.1em;
	font-weight: 500;
}
.contact-us input[type="submit"] {
	width: 64%;
	font-size: 1.3em;
	padding: 0.5em 0;
}
.what-we-do {
	padding: 1em 0;
}
.our-team,.contact-us {
	padding: 1em 0 2em;
}
.contact-us input[type="text"], .contact-us textarea, .contact-us input[type="submit"] {
	margin: 0.5em;
}
ul.social-icons {
 	float: none;
}
.footer p {
	font-size: 1.2em;
	padding: 1em 0 0;
}
.footer {
	padding: 1em 0;
}
ul.social {
	left: 18%;
}
.f8{ color:#333; background-color:#000; }
.f8 a{ color:#CCC; padding-left:10px; padding-right:10px; }
}