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

/* `XHTML, HTML4, HTML5 Reset
----------------------------------------------------------------------------------------------------*/

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
/*
  Override the default (display: inline) for
  browsers that do not recognize HTML5 tags.

  IE8 (and lower) requires a shiv:
  http://ejohn.org/blog/html5-shiv
*/
  display: block;
}

b,
strong {
/*
  Makes browsers agree.
  IE + Opera = font-weight: bold.
  Gecko + WebKit = font-weight: bolder.
*/
  font-weight: bold;
}

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.
*/
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: '';
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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%;
}

a {
  text-decoration: none;
}

body {
	overflow-x: hidden;
	font:12px/20px Arial, sans-serif;
}

a:focus {
	outline: none;
}

.parentContainer {
 width:100%;
 padding:80px 0 140px;
 overflow-x: hidden;
 background-image:url(../img/noisepattern.png);
}
.parentContainer > section{
 width:960px;
 margin:auto;
}
.parentContainer header h1{
	font-family: 'Open Sans';
	font-weight:800;
	color: #000;
	font-size: 40px;
	text-transform: uppercase;
	float: left;
	margin-right: 22px;
	margin-left: 20px;
}
.parentContainer header h2{
	float: left;
	font-size: 22px;
	font-family: 'Open Sans';
	font-style: italic;
	color: #000;
	font-weight: lighter;
	padding-top: 13px;
}
.parentContainer header h4 {
	padding-top: 120px;
	font-size: 22px;
	font-family: Arial;
	font-weight: 400;
	line-height: 34px;
}
.parentContainer header p {
	margin-top: 40px;
	font-size: 16px;
	color: #ffffff;
	font-family:'Open Sans';
	line-height:28px;
}
.parentContainer header {
	margin-bottom:75px;
	line-height:normal;
}
.hImg {
	float: left;
}










/*Menu*/
#menu {
	z-index: 100;
	position: fixed;
	top: 50%;
	margin-top: -25%;
	right: 0;
}
#menu ul{
	float: right;
}

#menu a{
	background-color: #ffffff;
	text-decoration: none;
	float: right;
	margin-top: 5px;
	padding: 7px 15px 12px 20px;
	font-size: 15px;
	color: #4c4f54;
	font-family: 'Open Sans';
	border-radius: 30px 0px 0px 30px;
	height:35px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-webkit-transition:all 300ms ease-in;
    -o-transition:all 300ms ease-in;
    -moz-transition:all 300ms ease-in;
}
#menu a:hover {
	color: #f26402;
	padding-right: 35px;
}
#menu li.selected a {
	color: #f26402;
}



/* HOME SECTION */
#home {
    background: url("../img/header/back.jpg") no-repeat center center;
    background-size: cover;
    height: 70vh;
    position: relative;
}

/* Overlay */
#home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

/* HERO */
.hero {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Inner Content */
.hero-inner {
    padding: 20px;
}

/* Logo */
.logo {
    width: 320px;
    margin-bottom: 150px;
}

/* Text */
.hero-text h1,
.hero-text h2,
.hero-text h3 {
    font-weight: 400;
    color: #000;
    margin-bottom: 15px;
	font-size: 40px;
	line-height: 35px;
	font-family: 'Open Sans';
}

/* .hero-text h1 {
    font-size: 42px;
} */

/* .hero-text h2 {
    font-size: 36px;
} */

/* .hero-text h3 {
    font-size: 30px;
} */

/* Responsive */
@media (max-width: 768px) {

	.hero-text h1,
	.hero-text h2,
	.hero-text h3 {
		font-weight: 400;
		color: #000;
		margin-bottom: 15px;
		font-size: 30px;
		line-height: 35px;
		font-family: 'Open Sans';
}


    #home {
        height: 50vh;
        /* padding: 60px 20px; */
    }

	.hero{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 60px 20px;	
	}

	.hero-inner{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		flex-direction: column;
	}

    .logo {
        width: 300px;
		margin-bottom: 90px;
    }


}

/*  About US */
#about-us {
	background-color: #febf00;
}
#about-us h4 {
	color: #3f2313;
}
.leftColumn{
	width:445px; 
	float: left;
}
.rightColumn {
	width: 445px;
	float: right;
}
#about-us .leftColumn p{
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: #ffffff;
	font-family: 'Open Sans';
}
.leftColumn p:first-child {
	margin-top:0;
}
#about-us .leftColumn p {
	margin:20px 0;
}

.twitterWidget > img {
	float: left;
	margin-top: 47px;
}
.twitterWidget ul {
	float: right;
	width: 220px;
}
.twitterWidget li {
	margin-bottom:25px;
}
.twitterId a, .twitterId {
	font-size: 14px;
	color: #ffffff;
	font-family: 'Open Sans';
	font-weight: 700;
}
.twitterId a:hover {
	color:#d00355;
}
.twitterMsg {
	font-size: 14px;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	color: #3f2313;
	line-height:22px;
}
.twitterMsg a{
	color: #d00355;
}
.twitterMsg a:hover {
	color:#FFF;
}
.twitterWidget span{
	display: block;
	font-size: 12px;
	line-height: 22px;
	color: #7a591f;
	font-family: 'Open Sans';
	font-weight: 600;
}







/*  Our Team */
#our-team {
	background-color: #191924;
}
#our-team h4 {
	color: #8e96a0;
}
.teamList {
	margin-bottom:-40px;
}
.teamList > li {
	float: left;
	text-align: center;
	margin:0 20px;
	position:relative;
	overflow: hidden;
	width:200px;
}
.teamList img {
	margin-bottom:-200px;
}
.teamList h5 {
	margin-top: 230px;
	font-size: 24px;
	line-height: 34px;
	font-family: 'Open Sans';
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
}
.teamList h6 {
	font-size: 16px;
	line-height: 24px;
	font-family: 'Open Sans';
	font-weight: 400;
	color: #8e96a0;
	text-transform: uppercase;
}
.teamList > li > a {
    display: block;
    height: 200px;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 200px;
    z-index: 9999;
}

.socialIcons {
	float:left;
}
.socialIcons li {
	float:left;
	margin:0 2px;
	width:25px;
}
.socialIcons a{
	margin-top: 20px;
	width: 25px;
	height: 28px;
	display: block;
	margin-right: 0px;
	text-indent: -999999px;
	background:url(../img/socialIcons.png) no-repeat 0px 0px transparent;
	opacity:.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	-webkit-transition:all 100ms ease-in;
    -o-transition:all 100ms ease-in;
    -moz-transition:all 100ms ease-in;
}
.socialIcons .facebook {
	background-position:0px 0px;
}
.socialIcons .twitter {
	background-position:-28px 0px;
}
.socialIcons .dribbble {
	background-position:-56px 0px;
}
.socialIcons .linkedin {
	background-position:-83px 0px;
}
.socialIcons .gplus {
	background-position:-111px 0px;
}
.socialIcons .deviantart {
	background-position:0 -36px;
}
.socialIcons .picasa {
	background-position:-28px -36px;
}
.socialIcons .lastfm {
	background-position:-56px -36px;
}
.socialIcons .forrst {
	background-position:-83px -36px;
}
.socialIcons .play {
	background-position:-111px -36px;
}
.socialIcons .behance {
	background-position:0 -73px;
}
.socialIcons .tumblr {
	background-position:-28px-73px;
}
.socialIcons .vimeo {
	background-position:-56px -73px;
}
.socialIcons .pinterest {
	background-position:-83px -73px;
}
.socialIcons .flickr {
	background-position:-111px -73px;
}
.socialIcons a:hover {
	opacity:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


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


/* Header styling */

.main-head {
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: space-between;
}

.portfolio-header {
    text-align: start;
    margin-bottom: 40px;
}

.portfolio-header .hImg {
    max-width: 60px;
    margin-bottom: 15px;
}

.portfolio-header h1 {
    font-size: 36px;
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.portfolio-header h2 {
    font-size: 18px;
    font-weight: normal;
    color: #555;
    margin-top: 5px;
}

/* Portfolio images grid */
.portfolio-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* space between images */
}

.portfolio-images .portfolio-item {
    flex: 1 1 calc(16.66% - 20px); /* 6 per row on large screens */
    max-width: 120px; /* optional max size */
    text-align: center;
}

.portfolio-images .portfolio-item img {
    width: 100%;
    height: 45px;
	background-size: cover;	
    display: block;
	background-color: #fff;
	padding: 1px;
    /* border-radius: 12px; optional rounded corners */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .portfolio-images .portfolio-item {
        flex: 1 1 calc(25% - 20px); /* 4 per row */
    }
}

@media (max-width: 992px) {
    .portfolio-images .portfolio-item {
        flex: 1 1 calc(33.33% - 20px); /* 3 per row */
    }
}

@media (max-width: 768px) {
    .portfolio-images .portfolio-item {
        /* flex: 1 1 calc(50% - 20px); 2 per row */
		background-color: #fff;
		padding: 1px;
		width: 100%;
		height: 45px;
    }
	.main-head {
		display: flex;
		flex-direction:column !important;
		align-items: center;
		justify-content: space-between;
	}

}

@media (max-width: 480px) {
    .portfolio-images .portfolio-item {
        flex: 1 1 100%; /* 1 per row */
		background-color: #fff;
		padding: 1px;
		width: 100%;
		height:  45px;
    }
	.main-head {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
}


/*  portfolio */
#portfolio {
	background-color: #ce0354;
}
#portfolioSliderBk {
	position: absolute;
	width: 100%;
	background-color: #b80c51;
	left:0;
	border-top:1px solid #DB216B;
	border-bottom:1px solid #DB216B;
	display:none;
}

#portfolioBox {
	display: block;
	margin: 85px auto;
	width: 960px;
	opacity:0;
    -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: #b80c51;
	padding-right:10px;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.portfolioMenu li {
	float:left;
}
.portfolioMenu p{
	float: left;
	font-size: 16px;
	font-family: 'Open Sans';
	font-weight:700;
	color: #801042;
	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:960px;
}
.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 200ms ease-in;
    -o-transition:all 200ms ease-in;
    -moz-transition:all 200ms ease-in;
}
/*.portfolioContainer a:hover .hex {
	opacity:0;
}
.portfolioContainer a:hover .circ {
	opacity:1;
}
.portfolioContainer a:hover span:first-child {
	opacity:1;
}*/







	/*  Services */
#services {
	background-color: #053b94;
}
#services h4 {
	color: #779ee0;
}
.servicesStatistics h5{
	font-size: 14px;
	font-family: 'Open Sans';
	color: #ffffff;
	font-weight:600;
	text-transform: uppercase;
	margin-right: 5px;
	margin-bottom: 5px;
	float: left;
}
.servicesStatistics p{
	float: left;
	font-size: 14px;
	font-family: 'Open Sans';
	color: #ffffff;
	font-weight: 300;
	text-transform: uppercase;
}
.bar {
	background:#4172C4;
	float:left;
	display:block;
	text-indent:-9999px;
	border-radius:4px;
}
.barBk {
	display: relative;
	float: left;
	width: 445px;
	height: 26px;
	margin-bottom: 25px;
	padding:3px;
	-moz-border-radius: 5px; /* from vector shape */
	-webkit-border-radius: 5px; /* from vector shape */
	border-radius: 5px; /* from vector shape */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: #03317b; /* layer fill content + solid fill */
	-moz-box-shadow:
		0 1px 0 #0052af /* drop shadow */,
		inset 0 1px 1px rgba(2,3,3,.1) /* inner shadow */;
	-webkit-box-shadow:
		0 1px 0 #0052af /* drop shadow */,
		inset 0 1px 1px rgba(2,3,3,.1) /* inner shadow */;
	box-shadow:
		0 1px 0 #0052af /* drop shadow */,
		inset 0 1px 1px rgba(2,3,3,.1) /* inner shadow */;
}

.servicesList img {
    float: left;
    margin-right: 30px;
    width: 60px;
    height: 60px;
    background: #000;
    padding: 10px;
    border-radius: 50px;
    /* Remove the filter */
}

.servicesList img {
    background: white;
    padding: 10px;
    border-radius: 50px;
	object-fit: cover;
	background-size: cover;
    /* Instead of filter, use mix-blend-mode */
    mix-blend-mode: lighten;
}


.servicesList li {
	float:left;
	margin-bottom:40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.servicesList div {
	float:right;
	width:330px;
}
.servicesList div h3{
	font-size: 18px;
	font-family: 'Open Sans';
	font-weight: 400;
	line-height: 30px;
	width: 500px;
	
	color: #ffffff;
}
.servicesList div p{
	font-size: 12px;
	font-family: Arial;
	color: #779ee0;
	line-height:20px;
}
.servicesStatistics * {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.mainMap {
	float:left;
}

@media all and (max-width:767px) {
	.servicesList div h3{
		font-size: 18px;
		font-family: 'Open Sans';
		font-weight: 400;
		line-height: 30px;
		width: 350px;
	}

}



	/*  Contact Us */
#contact-us {
	background-color: #a77348;
	/* background-color: #abc210; */
	background-image:url(../img/noisepattern.png);
}
#contact-us h4 {
	color: #ffff;
}
.phone, .email {
	font-family:'Open Sans';
	font-size: 15px;
	display: inline-block;
	margin-bottom: 15px;
	margin-right: 45px;
}
.email {
	margin-right:0;
}
.phone span, .email span {
	width: 10px;
	height: 22px;
	margin-right: 10px;
	float: left;
	text-indent: -999999px;
	background:url(../img/phonemailContact.png) no-repeat 0px 2px transparent;
}
.email span{
 	width: 18px;
	background-position: -20px 3px;
}
.phone a, .email a{
	text-decoration: none;
	float: left;
	color: #ffffff;
	font-weight: 600;
}
.phone p, .email a{
	float: left;
	color: #fff;
	margin-left: 7px;
}
#adress {
	position: absolute;
	margin-top: 55px;
	margin-left: 55px;
}
#adress > span {
	margin-top: 10px;
	position: absolute;
	width: 18px;
	height: 24px;
	margin-right: 10px;
	text-indent: -999999px;
	background:url(../img/mapPointer.png) no-repeat 0px 2px transparent;
}
#adress div {
	margin-left: 45px;
	position: absolute;
	background: #ffffff;
	border-radius: 0 4px 4px 0;
	width: 192px;
	height:50px;
	padding: 5px 3px;
	-webkit-box-shadow: 2px 2px 2px 3px rgba(10, 10, 10, 0.1);
    box-shadow: 2px 2px 2px 2px rgba(10, 10, 10, 0.1);
    -moz-box-sizing:border-box;
    -box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
#adress div:after, #adress div:before {
	right: 99%;
	border: solid transparent;
	content: " ";
	position: absolute;
	pointer-events: none;
}
#adress div:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 25px;
	top: 50%;
	margin-top: -25px;
	margin-right:1px;
}
#adress h3 {
	font-size: 12px;
	color: #191923;
	font-family: 'Open Sans';
	font-weight: 600;
}
#adress > div span {
	text-transform: uppercase;
	font-weight: 800;
	float: left;
}
form {
	width:500px;
}
textarea , input {
	display: block-inline;
	width: 211px;
	height: 40px;
	margin-right:20px;
	background-color: #91a318;
	color: #ffffff;
	font-size: 13px;
	font-family: Arial;
	font-weight: 400;
	border: none;
	border-bottom: solid 1px #b7ca12;
	-webkit-box-shadow: inset 2px 2px 2px #8b9d17;
	-moz-box-shadow:    inset 2px 2px 2px #8b9d17;
	box-shadow:         inset 2px 2px 2px #8b9d17;
	border-radius: 3px;
	padding-left: 13px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
input {
	margin-bottom: 24px;
	outline: none;
}
textarea {
	width: 445px;
	height: 152px;
	padding-top: 18px;
	resize:none;
}
input[type="submit"] {
	position: relative;
	margin-top: -27px;
    width: 43px;
    height: 50px;
    border: none;
    box-shadow: none;
    margin-left:380px;
    float:left;
    background:url(../img/mailImg.png) no-repeat 0px 2px transparent;
    cursor:pointer;
}
.contactSucces , .contactError {
	display: none;
	font-weight:600;
	color:#4A5409;
} 

a:focus, input:focus, textarea:focus {
	outline:none;
}





/*  Timeline */

#timeline {
	padding: 0;
	background-color: #f5f5f5;
	position: relative;
}
#timelineBorder {
	position: absolute;
	text-indent: -99999px;
	width: 4px;
	height: 100%;
	left:50%;
	top:0;
	margin-left:-3px;
    background:#d7d7d7;
    background: -moz-linear-gradient(top,  rgba(215,215,215,1) 0%, rgba(215,215,215,1) 94%, rgba(215,215,215,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(215,215,215,1)), color-stop(94%,rgba(215,215,215,1)), color-stop(100%,rgba(215,215,215,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(215,215,215,1) 0%,rgba(215,215,215,1) 94%,rgba(215,215,215,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(215,215,215,1) 0%,rgba(215,215,215,1) 94%,rgba(215,215,215,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(215,215,215,1) 0%,rgba(215,215,215,1) 94%,rgba(215,215,215,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(215,215,215,1) 0%,rgba(215,215,215,1) 94%,rgba(215,215,215,0) 100%); /* W3C */
}
.monthButton{
	float: left;
	margin: 70px 0px 40px 394px;
	position: relative;
	width: 167px;
	border:1px solid #d7d7d7;
	text-decoration: none;
	background-color: #ffffff;
	display: block;
	font-size: 16px;
	color: #34343d;
	font-family: 'Open Sans';
	font-weight:600;
	padding: 10px 0px;
	text-align: center;
	-webkit-box-shadow: 1px 1px 2px rgba(10, 10, 10, 0.1);
    box-shadow: 1px 1px 2px rgba(10, 10, 10, 0.1);
    border-radius:3px;
}
.monthButton:last-child {
	color: #d00355;
	margin-bottom: 120px;
}
.monthButton:last-child { position: relative; background: #FFFFFF; border: 1px solid #d7d7d7; } .monthButton:last-child:after, .monthButton:last-child:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .monthButton:last-child:after { border-color: rgba(255, 255, 255, 0); border-top-color: #FFFFFF; border-width: 15px; left: 50%; margin-left: -15px; } .monthButton:last-child:before { border-color: rgba(215, 215, 215, 0); border-top-color: #d7d7d7; border-width: 16px; left: 50%; margin-left: -16px; }

#timeline .leftColumn , #timeline .rightColumn  {
	width:478px;
}
#timeline .rightColumn {
	margin-left: 4px;
}
.post{
	position: relative;
	margin-top: 35px;
	background-color: #ffffff;
	padding: 15px 15px 15px 15px;
	-webkit-box-shadow: 1px 1px 2px rgba(10, 10, 10, 0.1);
    box-shadow: 1px 1px 2px rgba(10, 10, 10, 0.1);
    border-radius:3px;
}
.leftColumn .post {
	width: 420px;
	background: #ffffff;
	border: 1px solid #d7d7d7;
}
.post img {
	border-radius:3px;
}
.leftColumn .post { position: relative; background: #FFFFFF; border: 1px solid #d7d7d7; } .leftColumn .post:after, .leftColumn .post:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .leftColumn .post:after { border-color: rgba(255, 255, 255, 0); border-left-color: #FFFFFF; border-width: 10px; top: 30px; margin-top: -10px; } .leftColumn .post:before { border-color: rgba(215, 215, 215, 0); border-left-color: #d7d7d7; border-width: 11px; top: 30px; margin-top: -11px; }
.rightColumn .post {
	width: 420;
	position: relative;
	background: #ffffff;
	border: 1px solid #d7d7d7;
}
.rightColumn .post { position: relative; background: #FFFFFF; border: 1px solid #d7d7d7; } .rightColumn .post:after, .rightColumn .post:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .rightColumn .post:after { border-color: rgba(255, 255, 255, 0); border-right-color: #FFFFFF; border-width: 10px; top: 30px; margin-top: -10px; } .rightColumn .post:before { border-color: rgba(215, 215, 215, 0); border-right-color: #d7d7d7; border-width: 11px; top: 30px; margin-top: -11px; }
.leftColumn .post {
	margin-right: 25px;
}
.rightColumn .post {
	margin-left: 25px;
}
.bullet {
	z-index: 10;
	margin-top: 8px;
	position: absolute;
	width: 16px;
	height:16px;
	border-radius: 10px;
	background-color: #d7d7d7;
	text-indent: -9999px;
	top:15px;
}
.leftColumn .bullet {
	right: -36px;
}
.rightColumn .bullet {
	right: 472px;
}
.rightColumn div:first-child .bullet {
	display:none;
}
#timeline h3{
	font-size: 18px;
	color: #004bc6;
	font-family: 'Open Sans';
	font-weight: 700;
	margin-bottom: 10px;
}
.post-image p , .post-twitter p , .post-text p {
	font-size: 13px;
	color: #7c8387;
	font-family: 'Open Sans';
	margin-bottom: 12px;
}
 .post div span , .post span.date {
	display: block;
	font-size: 12px;
	color: #7c8387;
	font-family: 'Open Sans';
}

.post-twitter p a {
	color: #d00355;
	text-decoration: none;
}
.post-image img {
	margin-bottom: 16px;
}
.post-twitter img {
	width: 48px;
	float: left;
	margin-right: 15px;
}
.post-twitter div{
	margin-left: 63px;
}



/*  Footer */
#footer {
	padding: 43px 0px;
	background-color: #191924;
	background-image:url(../img/noisepattern.png);
	text-align: center;
	color: #7c8387;
}
#footer span {
	color:#F80365;
	padding:0 2px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.prag {
	width:0;
	height:0;
	position:absolute;
	background:transparent;
	display:none;
} #pPrag0 {
	display:block;
}

.rMenu {
	display:none;
}

/* MENU */

@media all and (max-width:1150px) {

	#pPrag1 {
		display:block;
	} #pPrag0, #pPrag2, #pPrag3, #pPrag4 {
		display:none;
	}

	#menu {
		margin-top:0 !important;
		top:0 !important;
		left:0 !important;
		width:100%;
		height:55px;
		background:#FFF;
		position:fixed;
	}

	#menu ul {
		float:none;
		margin:12px auto;
	}
	#menu li {
		float:left;
	}

	#menu a {
		height:auto;
		float:left;
		font-size:14px;
		padding:0 20px;
		background:transparent;
	}
	#menu a:hover {
		padding:0 20px !important;
	}

	#menu + div {
		margin-top:50px;
	}

}

.slidesContainer img {
	width:100%;
	height:auto;
}

/* COLUMNS */

@media all and (max-width:988px) and (min-width:768px){

	#pPrag2 {
		display:block;
	} #pPrag0, #pPrag1, #pPrag3, #pPrag4 {
		display:none;
	}

	/* TABLETS */

	#home section {
		height:488px;
	}
	#home #back {
		width:1200px;
		top:0;
		margin-left:-600px;
	}
	#home #layer1 {
		width:100px;
		top:50px;
		margin-left:-50px;
	}
	#home #layer2 {
		width:620px;
		top:210px;
		margin-left:-310px;
	}
	#home #layer3 {
		width:500px;
		top:290px;
		margin-left:-250px;
	}

	.parentContainer > section {
	 	width:768px;
	}
	.parentContainer {
		padding-bottom:100px;
	}

	.parentContainer header {
		padding:0 25px;
		margin-bottom:35px;
	}
	.parentContainer header h1 {
		font-size:39px;
	}
	.parentContainer header h2 {
		font-size:21px;
	}

	.leftColumn, .rightColumn {
		padding:0 25px;
		width:330px;
	}

	.twitterWidget > img {
		width:90px;
		margin-top:140px;
	}
	.twitterWidget ul {
		width:200px;
	}
	.twitterId {
		font-size:13px;
	}
	.twitterMsg {
		font-size:12px;
		margin-top:3px;
	}
	.twitterWidget span {
		font-size:11px;
	}

	.portfolioContainer canvas, .teamList canvas, .portfolioContainer img, .teamList img {
		height:155px;
		width:160px;
	}
	.teamList {
		margin-bottom:-10px;
	}
	.teamList > li {
		width:160px;
		margin:0 16px;
	}
	.teamList h5 {
		font-size:18px;
		margin-top:180px;
		line-height:23px;
	}
	.teamList h6 {
		font-size:13px;
	}
	.teamList > li > a {
		width:160px;
		height:155px;
	}

	.servicesList div {
		width:210px;
	}
	.servicesList div h3 {
		font-size:20px;
	}

	.portfolioContainer {
		width:768px !important;
		margin-top:15px;
	}
	.portfolioContainer li {
		width:160px;
		height:233px;
		margin:37px 16px 0;
	}
	.portfolioContainer h3 {
		margin-top:180px;
		font-size:14px;
	}
	.portfolioContainer .icon {
		display:none;
	}
	.spanDate {
		margin-top:7px;
		font-size:11px;
	}
	.portfolioContent h3 {
		margin-top:5px;
	}

	#portfolioBox {
		width:718px;
	}
	#portfolioSlider, .slidesContainer div, .slidesContainer, #portfolioVideo, #portfolioImage img, #portfolioImage, #portfolioVideo iframe {
		width:455px;
		height:303px;
	}
	#portfolioContent {
		width:230px;
	}

	.barBk {
		width:325px;
	}

	.mainMap  {
		width:345px;
	}

	input {
		width:159px;
		margin-right:10px;
		margin-bottom:14px;
	}
	textarea {
		width:331px;
	}
	input[type="submit"] {
		margin-left:270px;
	}

	#timeline .leftColumn, #timeline .rightColumn {
		margin-left:132px;
		float:left;
	}
	.monthButton {
		margin-left:298px;
		margin-bottom:10px;
	}
	#timeline .post { width:420px; margin-left:0; margin-top:65px; position: relative; background: #FFF; border: 1px solid #d7d7d7; } #timeline .post:after, #timeline .post:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #timeline .post:after { top:-10px; border-color: rgba(255, 255, 255, 0); border-bottom-color: #FFF; border-width: 10px; left: 50%; margin-left: -10px; } #timeline .post:before { top:-11px; border-color: rgba(215, 215, 215, 0); border-bottom-color: #d7d7d7; border-width: 11px; left: 50%; margin-left: -11px; }
	.bullet {
		top:-40px;
		left:217px;
		bottom:auto;
		right:auto;
		display:block !important;
	}

}

a.top {
	display:none;
}

@media all and (max-width:767px) and (min-width:480px){

	#pPrag3 {
		display:block;
	} #pPrag0, #pPrag2, #pPrag1, #pPrag4 {
		display:none;
	}

	#menu {
		position: static;
		z-index:9999;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		height:38px;
	}
	#menu + div {
		margin-top:0;
	}
	a.top {
		position:fixed;
		bottom:20px;
		right:20px;
		font-family:'Open Sans', sans-serif;
		font-size:11px;
		background:#FFF;
		background:rgba(255,255,255,.8);
		color:#333;
		padding:2px 5px;
		border-radius:2px;
		display:block;
	}

	/* LARGE MOBILE */

	#home section {
		height:325px;
	}
	#home #back {
		width:800px;
		top:0;
		margin-left:-400px;
	}
	#home #layer1 {
		width:74px;
		top:35px;
		margin-left:-37px;
	}
	#home #layer2 {
		width:400px;
		top:150px;
		margin-left:-200px;
	}
	#home #layer3 {
		width:300px;
		top:200px;
		margin-left:-150px;
	}

	#menu ul {
		display:none;
	}

	.rMenu {
		display:block;
		width:450px;
		margin:17px auto;
		position:relative;
	}
	.rMenu p {
		font:14px 'Open Sans';
		color:#8E96A0;
		float:left;
	}
	.rMenu span {
		float:right;
		width:59px;
		height:42px;
		background:url(../img/rMenu.png) no-repeat 0 0 transparent;
		display:block;
		text-indent:-9999px;
		cursor:pointer;
		margin-top:-10px;
	}
	.rMenu select {
	    height: 42px;
	    position: absolute;
	    right: 0;
	    top: -10px;
	    width: 59px;
	    opacity: 0;
	    visibility: visible;
	    cursor:pointer;
	}
	.rMenu option {
	    font-family: 'Open Sans';
	    font-size: 12px;
	    padding: 5px 10px;
	}

	.parentContainer {
		padding-bottom:80px;
	}
	.parentContainer > section {
	 	width:480px;
	}
	.parentContainer header {
		padding:0 15px;
		margin-bottom:35px;
	}
	.parentContainer header h1 {
		font-size:39px;
	}
	.parentContainer header h2 {
		font-size:21px;
		margin-left:72px;
		padding-top:0;
		clear:left;
	}
	.parentContainer header h4 {
		float:left;
		padding-top:30px;
	}
	.parentContainer header p {
		float:left;
		margin-top:30px;
	}

	.leftColumn, .rightColumn {
		padding:0 15px;
		width:450px;
		float:none;
	}
	.rightColumn {
		margin-top:40px;
	}

	.twitterWidget > img {
		margin:0 0 30px -45px;
		float:none;
		padding-left:50%;
		width:90px;
	}
	.twitterWidget ul {
		width:100%;
		text-align:center;
		float:none;

	}
	.twitterId {
		font-size:13px;
	}
	.twitterMsg {
		font-size:13px;
		margin-top:3px;
	}
	.twitterWidget span {
		font-size:11px;
	}

	.teamList {
		margin-bottom:-50px;
	}
	.teamList > li {
		margin-bottom:50px;
	}
	.teamList h5 {
		font-size:20px;
		margin-top:210px;
		line-height:25px;
	}
	.teamList h6 {
		font-size:14px;
		margin-bottom:-10px;
	}

	.servicesList div {
		width:330px;
	}
	.servicesList div h3 {
		font-size:20px;
	}

	.portfolioContainer {
		width:480px !important;
		margin-top:-10px;
	}
	.portfolioContainer li {
		margin-top:50px;
	}
	.portfolioContainer h3 {
		margin-top:215px;
		font-size:15px;
	}
	.spanDate {
		margin-top:7px;
		font-size:12px;
	}

	#portfolioBox {
		width:450px;
		padding:0 15px;
		margin:50px auto;
		position:relative;
	}
	#portfolioSlider, .slidesContainer div, .slidesContainer, #portfolioVideo, #portfolioImage img, #portfolioImage, #portfolioVideo iframe {
		width:450px;
		height:290px;
	}
	#portfolioContent {
		width:450px;
		margin-top:20px;
	}
	#portfolioSlider .pagination {
	    position:absolute;
	    right:20px;
	    top:263px;
	}
	#portfolioContent span {
		margin:-5px 0 18px;
	}


	.servicesStatistics h5 {
		float:none;
	}
	.barBk {
		width:450px;
	}

	.mainMap  {
		width:auto;
	}

	input {
		width:219px;
		margin-right:10px;
		margin-bottom:14px;
	}
	textarea {
		width:451px;
	}

	#timeline .leftColumn, #timeline .rightColumn {
		margin-left:-2px;
		float:left;
	}
	.monthButton {
		margin-left:155px;
		margin-bottom:10px;
	}
	#timeline .post { width:420px; margin-left:0; margin-top:65px; position: relative; background: #FFF; border: 1px solid #d7d7d7; } #timeline .post:after, #timeline .post:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #timeline .post:after { top:-10px; border-color: rgba(255, 255, 255, 0); border-bottom-color: #FFF; border-width: 10px; left: 50%; margin-left: -10px; } #timeline .post:before { top:-11px; border-color: rgba(215, 215, 215, 0); border-bottom-color: #d7d7d7; border-width: 11px; left: 50%; margin-left: -11px; }
	.bullet {
		top:-40px;
		left:217px;
		bottom:auto;
		right:auto;
		display:block !important;
	}

}

@media all and (max-width:479px) {

	#pPrag4 {
		display:block;
	} #pPrag0, #pPrag2, #pPrag3, #pPrag1 {
		display:none;
	}

	a.top {
		position:fixed;
		bottom:20px;
		right:20px;
		font-family:'Open Sans', sans-serif;
		font-size:11px;
		background:#FFF;
		background:rgba(255,255,255,.8);
		color:#333;
		padding:2px 5px;
		border-radius:2px;
		display:block;
	}

	/* SMALL MOBILE */
	
	#home section {
		height:244px;
	}
	#home #back {
		width:600px;
		top:0;
		margin-left:-300px;
	}
	#home #layer1 {
		width:50px;
		top:30px;
		margin-left:-25px;
	}
	#home #layer2 {
		width:300px;
		top:110px;
		margin-left:-150px;
	}
	#home #layer3 {
		width:200px;
		top:150px;
		margin-left:-100px;
	}

	#menu ul {
		display:none;
	}

	.rMenu {
		display:block;
		width:300px;
		margin:17px auto;
		position:relative;
	}
	.rMenu p {
		font:14px 'Open Sans';
		color:#8E96A0;
		float:left;
	}
	.rMenu span {
		float:right;
		width:59px;
		height:42px;
		background:url(../img/rMenu.png) no-repeat 0 0 transparent;
		display:block;
		text-indent:-9999px;
		cursor:pointer;
		margin-top:-10px;
	}
	.rMenu select {
	    height: 42px;
	    position: absolute;
	    right: 0;
	    top: -10px;
	    width: 59px;
	    opacity: 0;
	    visibility: visible;
	    cursor:pointer;
	}
	.rMenu option {
	    font-family: 'Open Sans';
	    font-size: 12px;
	    padding: 5px 10px;
	}
	#menu {
		position: static;
		z-index:9999;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		height:38px;
	}
	#menu + div {
		margin-top:0;
	}

	.parentContainer {
		padding-bottom:80px;
	}
	.parentContainer > section {
	 	width:320px;
	}
	.parentContainer header {
		padding:0 10px;
		margin-bottom:20px;
	}
	.parentContainer header h1 {
		font-size:32px;
		margin-top:3px;
	}
	.parentContainer header h2 {
		font-size:18px;
		margin-left:70px;
		padding-top:0;
		clear:left;
	}
	.parentContainer header h4 {
		float:left;
		padding-top:20px;
		font-size:19px;
		line-height:30px;
	}
	.parentContainer header p {
		float:left;
		margin-top:30px;
	}

	.leftColumn, .rightColumn {
		padding:0 10px;
		width:300px;
		float:none;
	}
	.rightColumn {
		margin-top:40px;
	}

	.twitterWidget > img {
		margin:0 0 30px -45px;
		float:none;
		padding-left:50%;
		width:90px;
	}
	.twitterWidget ul {
		width:100%;
		text-align:center;
		float:none;

	}
	.twitterId {
		font-size:13px;
	}
	.twitterMsg {
		font-size:13px;
		margin-top:3px;
	}
	.twitterWidget span {
		font-size:11px;
	}

	.teamList {
		margin-bottom:-50px;
		padding-left:30px;
	}
	.teamList > li {
		margin-bottom:50px;
	}
	.teamList h5 {
		font-size:20px;
		margin-top:210px;
		line-height:25px;
	}
	.teamList h6 {
		font-size:14px;
		margin-bottom:-10px;
	}

	.servicesList div {
		width:180px;
	}
	.servicesList div h3 {
		font-size:20px;
	}

	.portfolioContainer {
		width:320px !important;
		margin-top:0px;
		padding-left:30px;
	}
	.portfolioContainer li {
		margin-top:40px;
	}
	.portfolioContainer h3 {
		margin-top:215px;
		font-size:15px;
	}
	.spanDate {
		margin-top:7px;
		font-size:12px;
	}
	.portfolioMenu {
		background:transparent;
	}
	.portfolioMenu li {
		clear:left;
	}

	#portfolioBox {
		width:300px;
		padding:0 10px;
		margin:50px auto;
		position:relative;
	}
	#portfolioSlider, .slidesContainer div, .slidesContainer, #portfolioVideo, #portfolioImage img, #portfolioImage, #portfolioVideo iframe {
		width:300px;
		height:200px;
	}
	#portfolioContent {
		width:300px;
		margin-top:20px;
	}
	#portfolioSlider .pagination {
	    position:absolute;
	    right:17px;
	    top:173px;
	}
	#portfolioContent span {
		margin:-5px 0 18px;
	}


	.servicesStatistics h5 {
		float:none;
	}
	.barBk {
		width:300px;
	}

	.mainMap  {
		width:310px;
	}

	form {
		width:350px;
	}
	input {
		width:143px;
		margin-right:10px;
		margin-bottom:14px;
	}
	textarea {
		width:302px;
	}
	input[type="submit"] {
		margin-left:230px;
		box-shadow:none !important;
	}

	#timeline .leftColumn, #timeline .rightColumn {
		margin-left:-7px;
		float:left;
	}
	.monthButton {
		margin-left:75px;
		margin-bottom:10px;
	}
	#timeline .post { width:280px; margin-left:0; margin-top:65px; position: relative; background: #FFF; border: 1px solid #d7d7d7; } #timeline .post:after, #timeline .post:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #timeline .post:after { top:-10px; border-color: rgba(255, 255, 255, 0); border-bottom-color: #FFF; border-width: 10px; left: 50%; margin-left: -10px; } #timeline .post:before { top:-11px; border-color: rgba(215, 215, 215, 0); border-bottom-color: #d7d7d7; border-width: 11px; left: 50%; margin-left: -11px; }
	.bullet {
		top:-40px;
		left:147px;
		bottom:auto;
		right:auto;
		display:block !important;
	}
	#timeline .post-image img {
		width:100%;
	}


}

/* IE */

.ie #menu ul li, .ie #menu ul li a {
	display:block;	
	float:none;
}
.ie #menu a:hover {
	color: #f26402;
	padding-right: 15px;
}
.ie8 input {
	padding-top:10px; 
}
.ie8 textarea {
	overflow:hidden;
}

/* our clients start */
.our-clients {
	padding: 90px 20px;
	background: #ffffff;
}

.our-clients-wrap {
	max-width: 1200px;
	margin: auto;
	display: flex;
	align-items: center;
	gap: 60px;
	flex-wrap: wrap;
}

.clients-logos {
	display: grid;
	grid-template-columns: repeat(0, 1fr); /* changed for perfect centering */
	gap: 28px;
	flex: 1;
}

.logo-card {
	background: #f9fafb;
	border-radius: 18px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.logo-card img {
	max-width: 60%;
	max-height: 65px;
	object-fit: contain;
}

/* ===== DESKTOP LAYOUT ===== */

/* Row 1 → 2 cards center */
.logo-card:nth-child(1) {
	grid-column: 2 / 4;
}
.logo-card:nth-child(2) {
	grid-column: 4 / 5;
}

/* Row 2 → 3 cards center */
.logo-card:nth-child(3) {
	grid-column: 2 / 3;
}
.logo-card:nth-child(4) {
	grid-column: 3 / 4;
}
.logo-card:nth-child(5) {
	grid-column: 4 / 5;
}

/* Row 3 → 2 cards center */
.logo-card:nth-child(6) {
	grid-column: 2 / 4;
}
.logo-card:nth-child(7) {
	grid-column: 4 / 5;
}

/* Optional hover */
.logo-card:hover {
	transform: scale(1.05);
}

.clients-content {
	flex: 1;
}

.clients-tag {
	display: inline-block;
	background: #979797;
	color: #fff;
	padding: 6px 16px;
	border-radius: 8px;
	font-family: 'Open Sans';
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 18px;
}

.clients-title {
	font-size: 30px;
	line-height: 1.25;
	font-family: 'Open Sans';
	color: #2d2d2d;
	margin-bottom: 20px;
}

.clients-desc {
	font-size: 15px;
	line-height: 1.7;
	font-family: 'Open Sans';
	color: #555;
	margin-bottom: 32px;
}

.clients-btn {
	display: inline-block;
	background-color: #2d2d2d;
	color: #fff;
	padding: 14px 28px;
	border-radius: 10px;
	text-decoration: none;
	font-family: 'Open Sans';
	font-weight: 500;
	font-size: 14px;
}

/* ===== RESPONSIVE (UNCHANGED) ===== */

@media (max-width:992px){
	.our-clients-wrap{
		flex-direction:column;
		text-align:center;
	}

	.clients-logos{
		grid-template-columns:repeat(3,1fr);
		justify-self:center;
	}

	.logo-card{
		grid-column:auto!important;
		justify-self:center;
	}
}

@media (max-width:480px){
	.clients-logos{
		grid-template-columns:repeat(2,1fr);
	}

	.logo-card{
		height:110px;
		justify-self:center;
	}
}

  
/* our clients end */



/* our journey start */
.journey-section{
	padding:0px 20px 120px 0px; 
	/* background:; */
	font-family:'Open Sans',sans-serif;
  }
  
  .container{
	max-width:1150px;
	margin:auto;
  }
  
  .journey-header{
	text-align:start;
	margin-bottom:120px;
  }
  
  .journey-header h2{
	font-family: 'Open Sans';
    font-weight: 800;
    color: #000;
    font-size: 40px;
	padding-bottom: 40px;
    text-transform: uppercase;
    margin-right: 22px;
  }
  
  /* .journey-header span{
	/* color:#ff2fb3; */
  /* } */ 
  
  .journey-header p{
	max-width:900px;
	margin:30px 0px;
	font-size:22px;
	color:#3f2313;
	line-height:1.7;
  }
  
  .timeline{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
  }
  
  .timeline::before{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:105%;
	height:4px;
	/* background:linear-gradient(to right,#00bcd4,#ff9800,#e91e63); */
	background: #4C2E21;
	border-radius: 20px;
	transform:translateY(-50%);
  }
  
  .timeline-item{
	position:relative;
	width:14%;
	display:flex;
	align-items:center;
	gap:15px;
  }
  
  .timeline-item.top{
	transform:translateY(-75px);
	flex-direction:row;
	text-align:left;
  }
  
  .timeline-item.bottom{
	transform:translateY(75px);
	flex-direction:row-reverse;
	text-align:right;
  }
  
  .circle{
	width:95px;
	height:95px;
	background:#fff;
	border-radius:50%;
	border:6px solid #00bcd4;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 10px 25px rgba(0,0,0,0.08);
	flex-shrink:0;
  }
  
  .circle img{
	width:55px;
  }
  
  .content{
	display:flex;
	flex-direction:column;
  }
  
  .timeline-item h4{
	width:160px;
	font-size:14.5px;
	font-weight:600;
	color: #000;
	margin-bottom:5px;
  }
  
  .timeline-item p{
	font-size:13px;
	color:#3e3e3e;
  }
  
  @media (max-width:992px){
	.journey-section{padding:50px 0px;}
	 
	.journey-header h2 {
		 padding-top:30px;

	}
	.journey-header{margin-bottom:20px;}
  
	.timeline{
	  flex-direction:column;
	  align-items:flex-start;
	  gap:25px;
	  padding-left:80px;
	}
  
	.timeline::before{
	  top:0;
	  left:38px;
	  width:4px;
	  height:100%;
	  transform:none;
	  /* background:linear-gradient(to bottom,#ff9800,#e91e63,#673ab7); */
	  background: #4C2E21;
	}
  
	.timeline-item{
	  width:100%;
	  transform:none!important;
	  flex-direction:row!important;
	  text-align:left!important;
	  gap:28px;
	}
  
	.circle{
	  width:80px;
	  height:80px;
	  border-width:5px;
	}
  
	.circle img{width:42px;}
	.timeline-item h4{font-size:16px;}
	.timeline-item p{font-size:14px;}
  }
  
  .timeline-item:nth-child(1) .circle {
    border-color: #007bff;
}

.timeline-item:nth-child(1) .circle img {
    filter: invert(39%) sepia(94%) saturate(1352%) 
            hue-rotate(199deg) brightness(95%) contrast(101%);
}

  .timeline-item:nth-child(2) .circle{border-color:#ff5722;}
  .timeline-item:nth-child(2) .circle img{filter:invert(39%) sepia(83%) saturate(1787%) hue-rotate(344deg) brightness(99%) contrast(101%);}
  
  .timeline-item:nth-child(3) .circle{border-color:#e91e63;}
  .timeline-item:nth-child(3) .circle img{filter:invert(29%) sepia(84%) saturate(2192%) hue-rotate(317deg) brightness(96%) contrast(101%);}
  
  .timeline-item:nth-child(4) .circle{border-color:#9c27b0;}
  .timeline-item:nth-child(4) .circle img{filter:invert(24%) sepia(91%) saturate(2056%) hue-rotate(284deg) brightness(92%) contrast(102%);}
  
  .timeline-item:nth-child(5) .circle{border-color:#3f51b5;}
  .timeline-item:nth-child(5) .circle img{filter:invert(28%) sepia(60%) saturate(1265%) hue-rotate(214deg) brightness(95%) contrast(101%);}
  
  .timeline-item:nth-child(6) .circle{border-color:#009688;}
  .timeline-item:nth-child(6) .circle img{filter:invert(33%) sepia(72%) saturate(463%) hue-rotate(137deg) brightness(94%) contrast(101%);}
  
  .timeline-item:nth-child(7) .circle{border-color:#4caf50;}
  .timeline-item:nth-child(7) .circle img{filter:invert(48%) sepia(67%) saturate(454%) hue-rotate(73deg) brightness(95%) contrast(95%);}
  
/* our journey end */




/* case studies start */  
  .cs-header {
	text-align: center;
	padding: 80px 20px 30px;
  }
  
  .cs-header h1 {
	font-size: 36px;
	margin-bottom: 15px;
	letter-spacing: 1px;
	color: #1a1a1a;
	font-family:'Open Sans',sans-serif;

  }
  
  .cs-header p {
	max-width: 600px;
	margin: auto;
	color: #666;
	font-size: 16px;
	font-family:'Open Sans',sans-serif;
	line-height: 1.6;
  }
  
  /* Cards Grid */
  .cs-container {
	display: grid;
	max-width: 1300px;
	margin: auto;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 50px;
	padding: 60px;
  }
  
  /* Card Wrapper */
  .cs-card-wrapper {
	position: relative;
  }
  
  /* Card */
  .cs-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 15px;
	text-align: center;
	box-shadow: 0 10px 25px rgba(0,0,0,0.08);
	transition: 0.3s ease;
  }
  
  .cs-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
  }
  
  .cs-card h3 {
	margin: 15px 0 5px;
	font-family:'Open Sans',sans-serif;
	color: #111;
	font-size: 15px;
  }
  
  .cs-card p {
	font-size: 14px;
	font-family:'Open Sans',sans-serif;
	color: #777;
  }
  
  .cs-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  }
  
  /* Arrow Icon */
  .cs-arrow {
	position: absolute;
	bottom: -10px;
	right: -10px;
	background: #000;
	color: #fff;
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 50%;
	font-size: 20px;
	transition: 0.3s ease;
  }
  
  .cs-arrow:hover {
	transform: scale(1.1);
	background: #000;
	color: #fff;
  }
  
  /* Popup */
  .cs-popup {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	justify-content: center;
	align-items: center;
	overflow-y: auto;
	padding: 20px;
	z-index: 9999;
  }
  
  .cs-popup-content {
	background: #ffffff;
	color: #222;
	padding: 40px;
	width: 550px;
	max-width: 100%;
	font-size: 13.5px;
	border-radius: 12px;
	position: relative;
	font-family:'Open Sans',sans-serif;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	animation: csPopupSlide 0.35s ease forwards;
  }
  
  @keyframes csPopupSlide {
	from {
	  opacity: 0;
	  transform: translateY(40px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .cs-close {
	position: absolute;
	top: 12px;
	right: 18px;
	font-size: 25px;
	cursor: pointer;
  }
  
  /* Responsive */
  @media screen and (max-width: 768px) {
	.cs-container {
	  gap: 30px;
	  padding: 30px;
	}
	.cs-card img {
	  height: 180px;
	}
  }
  
  @media screen and (max-width: 480px) {
	.cs-card img {
	  height: 150px;
	}
  }

  /* Case studies end */