/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, ul ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {

	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */
*{
	font-family:"raleway";
}

body{
	background-color:#FBFBFB;
}

header{
	overflow:hidden;
	position:fixed;
	width:100%;
	z-index:999;
	background-color:#ffffff;
}
/*
.addpadding{
	padding-top:111px;
}*/

.bg{
	background-color:#fc7837;
}

.bg > div{
	display: flex;
	align-items: center;
	justify-content:flex-end;
}

.bg a{
	padding:5px 20px;
}



.telephone{
	color: #ffffff;
	text-decoration:none;
	display:inline-block;
}


/*.bg{
	background-color:#fc7837;
	overflow:hidden;
	padding: 3px 0;
}*/

.wrapper{
	width:1000px;
	margin:0 auto !important;
	box-sizing: border-box;
}

/*.bg .wrapper a,.bg .wrapper img{
	float:right;
}

.emailcontact a:before{
	content:url("../images/phoneicon.png");
	 position: absolute;
    left: calc(62% - 40px);
}



.bg .wrapper a{
	padding:0 30px;
	color:#ffffff;
	text-decoration:none;
	background-position: 4px 1px;
}*/

.logo{
	float:left;
	overflow:auto;
	padding:0.5%;
	max-width:100% !important;

}
.logonav{
	background-color:#ffffff;
}

.logonav nav{
	float:right;
	overflow:auto;
	width: 60%;
	text-align: right;
	overflow: hidden;
	
}

.logonav nav ul{
	list-style-type:none;
	padding-top:4%;
	font-family:raleway;
	font-weight:500;
}

.logonav a {
	text-decoration:none;
	color:#0c3c60;
	font-size:15px;
	text-transform:uppercase;
}

.container{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

ul{
	list-style-type: none;
}

.logonav nav ul li{
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 5px;
  text-align:right;
	overflow:hidden;
}

.container a{
  display: block;
  padding: 10px;
}

.menuli::before, .menuli::after{
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background:#fc7837;
}

.menuli a::before, .menuli a::after{
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background:#fc7837;
}

.menuli:hover::before, .menuli:hover::after{
  width: 100%;
}

.menuli:hover a::before, .menuli:hover a::after{
  height: 100%;
}

.menuli::before, .menuli::after{
  transition-delay: 0.2s;
}

.menuli a::before, .menuli a::after{
  transition-delay: 0s;
}

.menuli::before{
  right: 0;
  top: 0;
}

.menuli::after{
  left: 0;
  bottom: 0;
}

.menuli a::before{
  left: 0;
  top: 0;
}
.menuli a::after{
  right: 0;
  bottom: 0;
}
.menuli:hover::before, .menuli:hover::after{
  transition-delay: 0s;
}
.menuli:hover a::before, .menuli:hover a::after{
  transition-delay: 0.2s;
}

.bannerhome{
	background-image:url("../images/banner1.jpg");
	background-attachment: fixed;
	min-height:100vh;
	background-repeat: no-repeat;
	background-position: top center;
}

.bannerhome p{
	color:#ffffff;
	font-size:60px;
	line-height: 88px;
}

.banner {
    padding-top: 110px;
}

.bannerhome p{
	padding:30% 0 0 10%;
}

.bannerhome p span{
		display:inline-block;
		
}

@media screen and (min-width:1000px) {

.bannerhome p{
	padding-top:25%;
}

.title1{
		animation:myAnimation 3s  ease;
}

.title2{
	animation:myAnimation2 3s  ease;
}

.title3{
	animation:myAnimation3 3s  ease;
}

}

br {
   margin:0;
   display:block;
}

@keyframes myAnimation {
		 0%   {left:120%;transform: scale(0) rotate(0);}
		 50%  {left:5%;transform: scale(0.5) rotate(-720deg);}
		 100% {transform: scale(1);}
	}

@keyframes myAnimation2 {
		 0%   {bottom:0;transform: scale(0);}
		 50%  {left:0;bottom:92%;transform: scale(0.5) rotate(-90deg);}
		 100% {transform: scale(1);}
	}

@keyframes myAnimation3 {
		 0%   {bottom:0;transform: scale(0);}
		 50%  {top:50%;left:10%;bottom:92%;transform: scale(0.5) rotate(-90deg);}
		 100% {transform: scale(1);}
}

.banner img,figure img{
	max-width:100%;
	width: 100%;
}






h1{
	text-align:center;
	color:#4a83ae;
	font-weight:500;
	font-size:25px;
	font-size:40px;
	padding:2% 0;
}

article{
	width:30%;
	text-align:center;
	float:left;
	background-color:#0C3C60;
	margin-left:10px;
	padding-bottom:20px;
	color:#ffffff;
	border-radius:8px;
	margin-bottom: 45px;
	height:200px;
}

article h2{
	padding:5%;
	text-transform:uppercase;
	font-size:18px;
	height:40px;
	line-height:25px;
}

article p{
	padding:10px 5px 25px 5px;
	font-size:15px;
	line-height:20px;

}

article a{
	background-color:#FC7837;
	padding: 10px 16px;
	border: none;
	border-radius: 8px;
	color: #ffffff;
	text-decoration:none;
}

.aboutus{
	background-color:#0c3c60;
	width:100%;
	clear:both;
	color:#ffffff;

}

.ecommerceservices, .standdesign{
	clear:both;
}

.ecommerceservices ul, .standdesignul{
	padding:20px;
	list-style-position:inside;

}

.ecommerceservices li, .standdesignul li{
	padding: 12px 40px;
	font-size: 14px;
	background: url('../images/listicon.png')no-repeat 7px;
	list-style-type: none;
	font-size: 14px;
}

.ecommerceservices p, .standdesign p{
	font-size:15px;
	line-height:30px;
	padding: 10px 0;
}

.aboutus h2{
	text-align:center;
	font-size: 30px;
    text-transform: uppercase;
    padding: 20px 0;
}

.aboutus p{
	font-size: 14px;
    line-height: 24px;
    padding-bottom: 15px;
}

.icons img{
	padding:40px 0;
}

.ecommercefigure{
	position:relative;
}

.innerpageh1{
	text-align:left;
	font-size:35px;
}

@keyframes myAnimation4 {
		 0%   {left:120%;transform: scale(0) rotate(0);}
		 50%  {left:5%;transform: scale(0.5) rotate(-720deg);}
		 100% {transform: scale(1);}
	}





footer{
	background-color:#0c3c60;
	padding:4% 0;
	color:#ffffff;
	clear:both;

}

footer span{
	display: block;
	padding: 15px 0;
	font-size: 24px;
	font-weight: 400;
}

.footerdiv{
	width:30% !important	;
	float:left;
}

footer h2{
	
	text-transform:uppercase;
	font-size: 35px;
	padding-right:10px;
	box-sizing:border-box;

}

footer .wrapper > div{
	width:69%;
	display:inline-block;
	box-sizing:border-box;
	padding-left: 49px;
	

}

footer img{
	vertical-align:middle;
}

footer .wrapper hr{
	float:left;
	  border : 0;
	  height : 300px; /*your own value to suit your content*/
	  width : 3px;
	  background-image: -webkit-linear-gradient(top, #0C3C60,#ffffff, rgba(0, 0, 0, 0));
	  background-image: -moz-linear-gradient(top, #0C3C60,#ffffff, rgba(0, 0, 0, 0));
	  background-image: -ms-linear-gradient(top, #0C3C60,#ffffff, rgba(0, 0, 0, 0));
	  background-image: -o-linear-gradient(top, #0C3C60,#ffffff, rgba(0, 0, 0, 0));
	  background-image: linear-gradient(top, #0C3C60,#ffffff, rgba(0, 0, 0, 0));
}

footer .wrapper h3{
	font-size:30px;
	text-transform:uppercase;
	letter-spacing: 1px;
	padding-bottom:20px;

}

footer .wrapper p{
	line-height:30px;
	color:#ffffff;
}

address{
	font-style:normal;
}

.contactus  div{
	width:49%;
	float:left;
}

.contactus{
	margin-top:25px;
}

.contactus div input{
	width: 85%;
	border-radius: 6px;
	border: none;
	padding: 6px 5px;
	margin-bottom:8px;
}

textarea{
	width:48%;
	float:left;
	border-radius:6px;
	border: none;
	height:110px;
	padding: 8px 6px;
}

::-moz-placeholder {
	font-size: 14px;
 }

::-webkit-placeholder {
	font-size: 14px;
}

::-ms-placeholder {
	font-size: 14px;
}
::placeholder {
	font-size: 14px;
}



footer button{
	float: right;
	margin-top:20px;
	background-color: #FC7837;
	border:none;
	padding:14px 45px;
	border-radius:8px;
	color:#ffffff;
	font-size:17px;
	text-transform:uppercase;
	font-weight:500;
	cursor:pointer;
}

.copyright{
	text-align:center;
	text-transform:uppercase;
	padding:15px 0;
	font-size:13px;
}

.alert{
	margin:0 0 5px;
	background: none repeat scroll 0 0 #FFBDBE;
    border: 1px solid #FF0000;
}

.alert-msg{
	position:absolute;
	clear:both;
	padding:0 0 8px;
	color:#ff0000;
	display:block;
	float:left;
	left:520px;
	top:11px;
	font-weight:normal;
	width:240px;
	margin:0;
}

.ui-tooltip {
    background: none repeat scroll 0 0 #ff8d8d;
    border: medium none;
    box-shadow: 0 0 9px #4a4a4a;
    margin: 7px 0 0;
    padding: 6px;
	font-size:14px;
	opacity:1.0;
}

.arrow {
    border-bottom: 17px solid #ffffff;
    border-left: 18px solid transparent;
    border-right: 0 solid transparent;
    left: -1px;
    position: absolute;
    top: -16px;
    width: 1px;
}

.ui-tooltip-content li {
    line-height:0px;
    list-style: none outside none;
	padding:7px 0;
}

.teambg{
	background-image:url("../images/backgroundbanner.jpg" );
	min-height:100vh;
	background-repeat: no-repeat;
	background-position: top center;
	background-size:cover;
}

.anchor{
  height:111px; /*same height as header*/
  margin-top: -111px; /*same height as header*/
  visibility: hidden;
}

.thankyou{
	padding:50px 0;
}

.mobilemenu{
	display:none;
}



@media screen and (max-width:736px) {
	.wrapper{
		width:100%;
	}

	.title1 {
		top: 17%;
	}

	.title2 {
		top: 43%;	
	}

	.title3 {
		top: 58%;
	}

	header{
		position:unset;
		display:flex;
		flex-direction:column-reverse;
	}

	iframe{
		width:100%;
	}

	.mobilemenu{
		background:url("../images/menu.png")no-repeat;
		float: right;
		text-transform:uppercase;
		width: 50px;
		margin-top: 20px;
		padding-left: 25px;
		font-size: 16px;
		padding-top: 0;
		padding-bottom: 20px;
		color:#0C3C60;
		display: block;
		text-align: center;
		font-weight: bold;
		margin-right:20px;
		cursor:pointer;
	}

	.logo{
		width:70%;
		text-align:center;
	}

	.logonav nav {
		float:unset;
		text-align: center;
		display:none;
		width: 100%;
	}

	.logonav nav ul{
		padding-top: 2%;
	}

	.logonav nav ul li:first-of-type {
		border-top: 1px dashed #fc7837;

	}

	.logonav nav ul li{
		border-bottom: 1px dashed #fc7837;
		display:block;
		text-align:left;
	}

	.logonav nav ul li:hover{
		border-bottom:none;
	}

		/*.bg .wrapper a, .bg .wrapper img{
			float:left;
			display:block;
		}*/

		article{
			padding-bottom:20px;
			height:165px;
		}

		article:first-of-type{
			height:185px;
		}

		article h2{
			padding:15px;
		}

		/*.bg{
			padding:10px 0;
		}

		.bg .wrapper img{
			padding-bottom:5px;
		}

		.bg .wrapper a{
			background-position:4px;
		}

		.emailcontact{
			text-align:center;
		}*/

		article{
			width:95%;
		}

		h1{
			font-size:32px;
		}

		.aboutus p{
			padding: 0 10px 15px 10px;
		}

		.footerdiv{
			width:100% !important;
		}

		footer .wrapper > div{
			padding: 0 5%;
			width:100% !important;
		}

		footer .wrapper hr{
			height:unset;
		}

		.contactus div{
			width:100%;
		}

		textarea{
			width:84%;
		}

		footer button{
			margin-right: 15px;
		}

		.icons img{
			width:150px !important;
		}

		.banner{
			padding-top: 2px;
		}

		.innerpageh1{
			font-size: 30px;
		}

		.ecommerceservices p,.innerpageh1, .standdesign p{
			padding: 10px 5px;
		}

		.aboutus{
			padding-bottom:20px;
		}

		.copyright{
			padding: 15px 3px;
		}

	/*.emailcontact a{
		all: unset !important;
		display: block !important;
		color: #ffffff !important;
		text-decoration: none !important;
			text-align: center;
	 }

	.emailcontact a:before{
		content:url("../images/phoneicon.png");
		 position: absolute;
		left: calc(38% - 40px);
	}

	.emailcontact img{
		all:unset !important;
	}
	*/
		
	}

@media screen and (min-width:667px) {
	.logonav nav ul li{
		margin: 3px;
	}
}

@media screen and (min-width:664px) {
@media screen and (max-width:767px){
	.logo{
		width:30%;
	}

	iframe{
			width:250px;
		}

	/*.emailcontact a {
		all: unset !important;
		display: block !important;
		color: #ffffff !important;
		text-decoration: none !important;
		text-align: center;
		width: 50% !important;
		float: left !important;
	}

	.emailcontact a:before {
		content: url(../images/phoneicon.png);
		position: absolute;
		left: calc(18% - 40px);
	}*/

	.logonav nav ul {
		padding-top:1%;
	}

	article {
	   
		margin-left: 10px;
		padding-bottom: 20px;
		color: #ffffff;
		border-radius: 8px;
		margin-bottom: 45px;
		height: 200px;
	}

	article h2 {
		padding: 5%;
		height: 40px;
		line-height: 25px;
	}

	article p {
		padding: 10px 5px 25px 5px;
		font-size: 15px;
		line-height: 20px;
	}

	article:first-of-type {
		height:200px ;
	}
	/*
	 .bg .wrapper img{
		padding-bottom:unset;
	 }*/

		article{
			width:48%;
		}

		footer .wrapper > div {
			width: 45% !important;
		}
	}}

@media screen and (min-width:768px) {
@media screen and (max-width:769px){
	.wrapper{
		width:98%;
	}

	.bannerhome p {
		padding: 40% 0 0 10% !important;
	}

	/*.bg .wrapper a, .bg .wrapper img{
		padding-right: 10px;
	}*/

		.footerdiv{
			width:49% !important;
		}

	footer .wrapper > div{
		width:49%;
		padding-left:30px;
	}


	/*.emailcontact a:before{
		content:url("../images/phoneicon.png");
		 position: absolute;
		left: calc(55% - 40px);
	}

	.emailcontact img{
		all:unset !important;
		float:right !important;
	}*/

	.logonav nav ul{
		padding-top: 2%;
	}
	.contactus div{
		width: 100%;
	}

	textarea{
		width: 84%;
	}

	.logo{
		width:30%
	}

	.logonav nav{
		width: 62%;
	}

	.container a{
		padding:10px;
	}

	.ecommerceservices, .standdesign{
		padding: 0 10px;
	}

	.banner{
		padding-top: 88px;
	}

	article p{
		padding:23px 5px 13px 5px;
		height:85px;
	}

	article h2{
		padding: 10px 4px;
	}
	.aboutus p {
		padding: 0 10px 15px 10px;
	}
	}}

@media screen and (min-width:1000px) {
	.aboutus p{
		padding: 0 23px 15px 10px;
	}

	footer .wrapper > div{
		    padding-left: 30px;
	}

	/*.emailcontact a:before{
		content:url("../images/phoneicon.png");
		 position: absolute;
		left: calc(65% - 40px);
	}*/
	}

@media screen and (min-width:1000px) {
	/*.emailcontact a:before{
		content:url("../images/phoneicon.png");
		position: absolute;
		left: calc(62% - 40px);
	}*/
	.teambg{
		background-attachment: fixed;
	}
}

@media screen and (max-width:767px) {
	.bannerhome p {
		padding: 7% 0 0 10%;

}
}

@media screen and (max-width:455px) {
	.emailcontact a:first-of-type{
		max-width:60%;
		display:inline-block;
		padding:5px 10px;
	}

	.emailcontact a:last-of-type{
		max-width:40%;
		display:inline-block;
		padding:5px 10px;
	}

	.emailcontact a img{
		width:100%;
	}
	
}

@media screen and (max-width:414px){
	.bannerhome p{
		line-height: 80px;
	}

	.bannerhome p {
		padding: 30% 0 0 10% !important;

}
}