/*--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: 0.9em;
}
.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: 600px;
    display: block;
    position: relative;
    background-size: cover;
}
.banner-matter{
	position:absolute;
	top:32%;
	left: 30%;
}
.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: 1.5em;
	background: #D26261;
	padding: 0.8em 3.5em;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 0 7em;
	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;
	    display: none;
}
a:hover.more{
	background:  #953D3C;
}
/*--content--*/
.what-we-do{
	text-align: center;
	background: #E9EDF0;
	padding: 4em 0 6em;
	border-bottom: 1px solid #668395;
}
.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.9em;
	padding: 0.3em 0;
	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--*/
/******** SAP ************/
.portfolio-we h3 {
    text-align: center;
    padding: 1em 0 0;
    font-size: 3em;
    padding: 1em 0 0 0;
    margin: 0;
    color: #384E5C;
    text-transform: uppercase;
    font-weight: 400;
}
.sap_tabs{
	clear:both;
	padding: 0em 0 2em;
}
.tab_box{
	background:#fd926d;
	padding: 2em;
}
.top1{
	margin-top: 2%;
}
.resp-tabs-list {
text-align:center;
  list-style: none;
  margin: 3em 0;
}
.resp-tab-item{
	color:#D67878;
	font-size: 1em;
	 
	cursor: pointer;
	padding: 6px 25px ;
	display: inline-block;
	margin: 0;
	text-align: center;
	list-style: none;
	
	outline: none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	text-transform: uppercase;
	border-right: 1px solid #D67878;
	margin: 0 0.5em 0;
}
.resp-tab-active{
    text-shadow: none;
    color: #D67878;
}
.resp-tabs-container {
	padding: 0px;
	background-color: #fff;
	clear: left;
	
}
h2.resp-accordion {
	cursor: pointer;
	padding: 5px;
	display: none;
}
.resp-tab-content {
	display: none;
}
.resp-content-active, .resp-accordion-active {
   display: block;
}
.img-top {	
	  position: relative;
}
.img-top {
    padding: 4px 4px !important;
}
.img-top img {
    width: 100%;
}
.link-top{
    position: absolute;
    top: 75.6%;
    width: 98%;
    background: rgba(214, 120, 120, 0.8);
    height: 23%;
    display: none;
    padding: 1em 0 19px 15px;
    color: #fff;
}
.link-top h3{
	font-size: 13px;
	color:#fff;
	margin: 0;
}
.link-top p{
	font-size: 13px;
	color:#fff;
	
}
 i.link {
  background: url(../images/e.png)no-repeat 0px 0px ;
  width: 37px;
  height: 37px;
  display: inline-block;
  cursor: pointer;
 
}
.img-top:hover .link-top{
	display: block;
}
div#portfolio {
    margin-bottom: 4em;
}
/*--/portfolio--*/
/*--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:800px){
.img-top {
    padding: 4px 4px !important;
    width: 33.333%;
    float: left;
}
@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%;
	}
	span.line {
	    left: 3%;
	}
}
@media(max-width:414px){
	.resp-tabs-list {
	    margin: 1em 0;
	    padding: 0;
	}
	.resp-tab-item {
	    font-size: 12px;
	    padding: 6px 10px;
	    margin: 0 -5px 0;
	}
	.img-top {
	    width: 50%;
	    float: left;
	}
	span.line {
	    left: 3%;
	}
}
@media(max-width:384px){
	.resp-tabs-list {
	    margin: 1em 0;
	    padding: 0;
	}
	.resp-tab-item {
	    font-size: 12px;
	    padding: 6px 10px;
	    margin: 0 -5px 0;
	}
	.img-top {
	    width: 50%;
	    float: left;
	}
	span.line {
	    left: 3%;
	}
}
@media(max-width:375px){
	.resp-tabs-list {
	    margin: 1em 0;
	    padding: 0;
	}
	.resp-tab-item {
	    font-size: 12px;
	    padding: 6px 10px;
	    margin: 0 -5px 0;
	}
	.img-top {
	    width: 50%;
	    float: left;
	}
	span.line {
	    left: 3%;
	}
}
@media(max-width:320px){
	.banner {
		min-height: 210px;
	}
	span.line {
	    left: 3%;
	}
	.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.8em 2em;
		margin: 0 3em;
		font-size: 1.2em;
	}
	.what-we h3, .portfolio-we h3, .team h3, .contact h3 {
		font-size: 2em;
	}
	.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%;
	}
	.resp-tabs-list {
	    margin: 1em 0;
	    padding: 0;
	}
	.resp-tab-item {
	    font-size: 12px;
	    padding: 6px 10px;
	    margin: 0 -5px 0;
	}
	.img-top {
	    width: 50%;
	    float: left;
	}
}