/* UNIVERSAL */

.overall{
	width:100%;
	height:auto;
	float:left;
	padding:60px;
}
.container1{
	width:100%;
	height:auto;
	float:left;
	background:#fafafa;
}
.container2{
	width:100%;
	height:auto;
	float:left;
	background:#fff;
}
/* NAvigation */

.header{
	width:60px;
	height:60px;
	top:0px;
	float:left;
	position:fixed;
	background:#6a1b9a;
	z-index:2000;
}
.global-header{
	width:100%;
	height:60px;
	position:fixed;
	z-index:1000;
	background:#fff;
	margin-top:-60px;
	padding:top;
}
.lang{
	width:60px;
	height:60px;
	position:fixed;
	background:#6a1b9a;
	z-index:2000;
	top:0px;
	left:auto;
	right:0;
}
.lang-in{
	width:60px;
	padding:5px;
	height:30px;
	background:inherit;
	color:#fff;
	text-align:center;
	font-size:12px!important;
}
.lang-in-active{
	width:60px;
	padding:5px;
	height:30px;
	background:#fff;
	color:#111;
	text-align:center;
}
.lang-in p,
.lang-in-active p{
	font-size:12px!important;
	font-weight:bold!important;
}
.header-logo{
	width:280px;
	padding:12px 20px 5px 20px;
	height:auto;
	float:left;
	margin-left:60px;
	background:#fff;
}

.navigation-body{
	background:#f5f5f5;
	position:;
}
.navigation-body-in{
	width:50%;
	height:auto;
	max-width:600px;
	float:left;
	color:#222;
	padding:60px 60px 60px 60px;
}
.navigation-body-in h1{
	font-size:40px!important;
	padding:10px 20px 10px 20px;
	margin:0px!important;
	color:#999!important;
	width:100%;
	border-bottom:2px solid #fff;
	-webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all 200ms ease-in-out;
  	   -o-transition: all 200ms ease-in-out;
		  transition: all 200ms ease-in-out;
}
.navigation-body-in h1:hover{
	font-size:40px!important;
	padding:10px 20px 10px 20px;
	color:#6a1b9a!important;
	border-bottom:2px solid #fff;
	background:#fff;
	width:100%;
}
.navigation-quotes{
	width:100%;
	height:auto;
	float:left;
}
.navigation-quotes h2{
	width:100%;
	height:auto;
	float:left;
	margin:0px 0px 40px 0px;
	text-transform:;
	font-weight:bold;
	color:#6a1b9a;
}
.navigation-quotes p{
	width:100%;
	height:auto;
	min-height:200px;
	position:relative;
	font-weight:normal;
	color:#999;
	float:left;
	margin:auto;
}
.navigation-logo{
	width:200px;
	height:60px;
	position:absolute;
	margin:0px 0px 0px 62px;
	padding:18px 20px 0px 20px;
	background:#6a1b9a;
}
.navigation-logo img{
	width:100%;
	height:auto;
	float:left;
	
}
@media (max-width: 768px) {
	.navigation-body{
	background:#f5f5f5;
}
.navigation-body-in{
	width:100%;
	height:auto;
	float:left;
	color:#222;
	margin-bottom:40px;
	padding:60px 60px 0px 60px;
	min-height:0px;
}
.navigation-body-in h1{
	font-size:32px!important;
	padding:10px 20px 10px 20px;
	color:#222;
}
.navigation-body-in:hover h1{
	font-size:32px!important;
	padding:10px 20px 10px 20px;
	color:#222;
}
}
@media (max-width: 620px) {
	.navigation-body{
	background:#f5f5f5;
}
.navigation-body-in{
	width:100%;
	height:auto;
	float:left;
	color:#222;
	margin-bottom:0px;
	padding:60px 60px 0px 60px;
}
.navigation-body-in h1{
	font-size:32px!important;
	padding:10px 20px 10px 20px;
	color:#222;
}
}
/* Index */

.index-top{
	width:100%;
	min-height:800px;
	float:left;
	background: #f5f5f5 no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position:relative;
}
.index-top-intro{
	width:100%;
	max-width:1000px;
	height:auto;
	margin:250px auto 0px auto;
	padding:40px;
	position:relative;
}
.index-top-intro img{
	width:100%;
	height:auto;
	float:left;
}
.index-top-intro h2{
	float:left;
	width:100%;
	text-align:center;
	font-weight:400;
	color:#222;
	margin-top:0px;
}
.index-top-in{
	width:100%;
	height:auto;
	float:left;
}
.index-top-info{
	width:100%;
	height:auto;
	float:left;
	background:#2962ff;
	padding:0px;
	position:relative;
}
.index-top-info-in{
	width:100%;
	height:auto;
	float:left;
	background:#6a1b9a;
	padding:0px 0px 60px 0px ;
	position:relative;
}

.index-top-go{
	width:100%;
	height:auto;
	float:left;
	position:relative;
	background:#000;
}
.index-info-header{
	width:100%;
	height:auto;
	float:left;
	color:#fff;
}
.index-info-header p{
	text-transform:uppercase;
	font-size:12px!important;
	font-weight:700;
}
.index-info-container{
	width:100%;
	max-width:1200px;
	margin:0px auto;
	height:auto;
	padding:30px 0px 0px 0px;
	float:;
	color:#fff;
}
.index-info-header1{
	width:100%;
	height:auto;
	color:#fff;
	text-align:center;
	margin-bottom:60px
}
.index-info-header1 h1{
	margin-bottom:20px;
}
.index-info-header1 h2{
	margin-bottom:40px;
}
.index-info-header2{
	width:100%;
	height:auto;
	color:#;
	padding:0px 0px; 
	max-width:600px;
	margin: 0px auto;
}
.index-info-header2 p{
	font-weight:400!important;
	color:#fff;
	margin-bottom:20px;
	width:100%;
}
.index-info-header3{
	width:100%;
	height:auto;
	color:#;
	padding:0px 0px; 
	max-width:600px;
	margin: 0px auto;
}
.index-info-header3 p{
	font-weight:400!important;
	color:#999;
	margin-bottom:20px;
	width:100%;
}
.index-title{
	width:100%;
	height:auto;
	max-width:600px;
	padding:60px 40px;
	margin:0px auto;
	text-align:center;
}
.index-title h2{
	width:auto;
	height:auto;
	max-width:400px;
	padding:20px 40px 0px 40px;
	margin:0px auto;
	text-align:center;
	border-bottom:px solid #111;
}
.index-icon{
	width:100px;
	height:100px;
	margin:0px auto 40px auto;
}
.case-study{
	width:33.333%;
	height:auto;
	float:left;
	overflow:hidden;
	position:relative;
	background:#fff;
	-webkit-transition: width 500ms ease-in-out;
	   -moz-transition: width 500ms ease-in-out;
	   	-ms-transition: width 500ms ease-in-out;
		 -o-transition: width 500ms ease-in-out;
			transition: width 500ms ease-in-out;
}
.case-study-in{
	width:100%;
	height:left;
	position:relative;
}

.case-study-img{
	width:100%;
	height:auto;
	float:left;
	position:relative;
}
.case-study-img img{
	width:100%;
	height:auto;
	float:left;
}
.case-study-header{
	width:100%;
	height:auto;
	position:absolute;
	color:#fff;
	padding:20px;
	background:#;
	z-index:900;
}
.case-study-header p{
	width:80px;
	text-transform:uppercase;
	font-weight:700;
	font-size:10px!important;
	letter-spacing:1px;
	width:100%;
	height:auto;
	float:left;
}
.case-study-header1 {
	width:100%;
	float:left;
	height:auto;
	margin-top:-15px;
	color:#;
}
.case-study-header1 h2{
	font-size:16px!important;
}
.case-study-info{
	width:100%;
	height:1600px;!important;
	position:absolute;
	z-index:800;
	background:#000;
}
.case-study-info-in{
	width:100%;
	height:1600px!important;
	position:;
	float:right;
	padding:0px;
	z-index:800;
	margin-top:120px;
	color:#fff;
}
.case-study-info-in p{
	color:#fff;
	font-size:18px!important;
	width:100%;
	font-weight:400;
	z-index:0;
	text-align:left;
}
.case-study-in .case-study-header{
	color:rgba(255,255,255,0)!Important;
	-webkit-transition: color 200ms ease-in-out;
	   -moz-transition: color 200ms ease-in-out;
	   	-ms-transition: color 200ms ease-in-out;
		 -o-transition: color 200ms ease-in-out;
			transition: color 200ms ease-in-out;
}
.case-study-in:hover .case-study-header{
	color:rgba(255,255,255,1)!important;
}

.case-study-in .case-study-img{
	-webkit-transition: -webkit-transform 200ms ease-in-out;
         	transition: transform 200ms ease-in-out;
	-moz-transform: scale(1) translateY(0px);
 -webkit-transform: scale(1) translateY(0px);
      -o-transform: scale(1) translateY(0px);
     -ms-transform: scale(1) translateY(0px);
         transform: scale(1) translateY(0px);
}
.case-study-in:hover .case-study-img{
	-moz-transform: scale(1.1) translateY(90px);
 -webkit-transform: scale(1.1) translateY(90px);
	  -o-transform: scale(1.1) translateY(90px);
	 -ms-transform: scale(1.1) translateY(90px);
		 transform: scale(1.1) translateY(90px);
}
.index-case-studies{
	width:100%;
	heihgt:auto;
	float:left;
	padding:40px 0px;
	-webkit-transition: width 500ms ease-in-out;
	   -moz-transition: width 500ms ease-in-out;
	   	-ms-transition: width 500ms ease-in-out;
		 -o-transition: width 500ms ease-in-out;
			transition: width 500ms ease-in-out;
}
.index-info-contact{
	width:50%;
	heihgt:auto;
	float:left;
	-webkit-transition: width 500ms ease-in-out;
	   -moz-transition: width 500ms ease-in-out;
	   	-ms-transition: width 500ms ease-in-out;
		 -o-transition: width 500ms ease-in-out;
			transition: width 500ms ease-in-out;
}
.index-info-contact-in{
	width:100%;
	height:auto;
	float:left;
	padding:40px;
}
.index-info-contact-in h2{
	width:100%;
	height:auto;
	float:left;
	margin-bottom:40px;
}
.index-info-contact-in p{
	width:100%;
	height:auto;
	float:left;
	margin-bottom:20px;
	font-weight:400;
	color:#999;
	max-width:600px;
}
.index-contact{
	width:50%;
	height:auto;
	float:left;
	padding:40px;
	background:#f5f5f5;
}
.index-contact-in{
	width:100%;
	height:auto;
	max-width:1200px;
	margin:0px auto;
}
.index-contact-in h2{
	width:100%;
	height:auto;
	margin-bottom:40px;
}
.index-contact-in p{
	width:100%;
	height:auto;
	margin-bottom:20px;
	font-weight:400;
	color:#999;
}
.background1{
	background:#311b92;
}
.background2{
	background:#fff!important;
}
.background3{
	background:#111;
}
@media (max-width: 1600px) {
	.index-case-studies{
	width:100%;
}
.index-info-contact{
	width:50%;
}

}
@media (max-width: 1200px) {
	.index-case-studies{
	width:100%;
}
.index-info-contact{
	width:50%;
}
.case-study{
	width:50%;
}
}
@media (max-width: 768px) {
.case-study{
	width:50%;
}
.index-info-contact{
	width:100%;
}
.index-contact{
	width:100%;
}
.index-info-header1{
	width:100%;
	max-width:100%;
	margin-bottom:20px;
}
.index-info-header2{
	width:100%;
	max-width:100%;
	padding:0px 0px; 
}

}
@media (max-width: 620px) {
	.case-study{
	width:100%;
	margin-bottom:40px;
	border-bottom:1px solid #ddd;
}
}

/* CASE STUDY */
.color1{
	color:#111!important;
}
.color2{
	background:#d50000;
}
.color3{
	background:#2ec771;
}
.color4{
	background:#00e576;
}
.color5{
	background:#0071b5;
}
.color6{
	background:#08507f;
}
.color7{
	background:#f3e66e;
}
.color8{
	background:#ffab00;
}
.color9{
	background:#91a1ad;
}
.color10{
	background:#a5b1c1;
}
.case-study-top{
	width:100%;
	min-height:800px;
	float:left;
	background-attachment:fixed!important;
	background-position:center center!important; 
	background-repeat:no-repeat!important;
  -webkit-background-size: cover!important;
  -moz-background-size: cover!important;
  -o-background-size: cover!important;
  background-size: cover!important;
  position:relative!important;
}
.case-study-intro{
	width:100%;
	height:auto;
	float:left;
	padding:0px;
	position:relative;
}
.case-study-intro-in{
	width:100%;
	height:auto;
	float:left;
	padding:0px;
	position:relative;
	margin:-0px 0px 0px 0px;
}
.case-study-cont1{
	width:75%;
	height:auto;
	float:left;
	padding:20px;
	color:#fff;
}
.case-study-cont1 h2{
	width:100%;
	height:auto;
	float:left;
	margin-bottom:40px;
}
.case-study-cont1 p{
	width:100%;
	height:auto;
	float:left;
	font-weight:400;
	margin-bottom:20px;
}
.case-study-cont1 p2{
	width:50%;
	max-width:600px;
	padding:0px 20px;
	height:auto;
	float:left;
	font-weight:400;
	margin-bottom:20px;
}
.case-study-cont2{
	width:25%;
	height:auto;
	float:left;
	color:#fff;
	padding:120px 0px 20px 0px;
}
.case-study-cont2 p2{
	width:100%;
	height:auto;
	float:left;
	font-weight:400;
}
.case-study-cont2 p{
	width:100%;
	height:auto;
	float:left;
	font-weight:400;
	padding:0px 20px 0px 0px;
}
.case-study-cont2-logo{
	width:100%;
	max-width:400px;
	height:auto;
	float:left;
	padding:20px 20px 20px 0px;
}
.case-study-cont2-logo img{
	width:100%;
	height:auto;
	float:left;
}
.case-study-project{
	width:100%;
	height:auto;
	border-top:1px solid #fff;
	float:left;
}
.case-study-project p2{
	width:100%;
	height:auto;
	float:left;
	font-weight:400;
	margin-top:20px;
}
.case-study-project p{
	width:100%;
	height:auto;
	float:left;
	font-weight:400;
}
.case-study-section1,
.case-study-section2,
.case-study-section3,
.case-study-section4,
.case-study-section5,
.case-study-section6{
	width:100%;
	height:auto;
	float:left;
}

.case-study-section1 img,
.case-study-section2 img,
.case-study-section3 img,
.case-study-section4 img,
.case-study-section5 img,
.case-study-section6 img{
	width:100%;
	height:auto;
	float:left;
}
@media (max-width: 620px) {
	.case-study-top{
	width:100%;
	min-height:500px;
	float:left;
	background-attachment:fixed!important;
	background-position:center center!important; 
	background-repeat:no-repeat!important;
  -webkit-background-size: cover!important;
  -moz-background-size: cover!important;
  -o-background-size: cover!important;
  background-size: cover!important;
  position:relative!important;
}
.case-study-cont1{
	width:100%;
	height:auto;
	float:left;
	padding:20px;
	color:#fff;
}	
.case-study-cont1 p2{
	width:100%;
	max-width:600px;
	padding:0px 20px;
	height:auto;
	float:left;
	font-weight:400;
	margin-bottom:20px;
	font-size:16px!important;
}
.case-study-cont2{
	width:100%;
	height:auto;
	float:left;
	color:#fff;
	padding:20px 40px 20px 40px;
}
.case-study-cont1 p{
	width:100%;
	max-width:600px;
	padding:0px 20px;
	height:auto;
	float:left;
	font-weight:400;
	margin-bottom:20px;
	font-size:16px!important;
}
}
/* SERVICES */

.services{
	width:100%;
	height:100vh;
	max-height:500px;
	float:left;
	position:relative;
	overflow:hidden!important;
}
.services-in{
	width:50%;
	height:100vh;
	max-height:500px;
	float:left;
	padding:90px;
	position:relative!important;
	overflow:hidden;
	background:#f5f5f5;
	text-align:center;
}
.services-script{
	width:100%;
	height:auto;
	float:left;
	position:relative;
}
.services-script p{
	width:100%;
	float:left;
	height:auto;
}
.services-in2{
	width:50%;
	height:100vh;
	max-height:500px;
	overflow:hidden;
	float:left;
}
.services-in2 img{
	width:auto;
	height:100%;
	float:left;
}
.services .index-icon{
	-webkit-transition: -webkit-transform 200ms ease-in-out;
         	transition: transform 200ms ease-in-out;
	-moz-transform: scale(1) translateY(-200%);
 -webkit-transform: scale(1) translateY(-200%);
      -o-transform: scale(1) translateY(-200%);
     -ms-transform: scale(1) translateY(-200%);
         transform: scale(1) translateY(-200%);
}
.services:hover .index-icon{
	-moz-transform: scale(1) translateY(0);
 -webkit-transform: scale(1) translateY(0);
	  -o-transform: scale(1) translateY(0);
	 -ms-transform: scale(1) translateY(0);
		 transform: scale(1) translateY(0);
}
.services .services-in2 img{
	-webkit-transition: -webkit-transform 200ms ease-in-out;
         	transition: transform 200ms ease-in-out;
	-moz-transform: scale(1.2) translateX(-100px);
 -webkit-transform: scale(1.2) translateX(-100px);
      -o-transform: scale(1.2) translateX(-100px);
     -ms-transform: scale(1.2) translateX(-100px);
         transform: scale(1.2) translateX(-100px);
}
.services:hover .services-in2 img{
	-moz-transform: scale(1.2) translateX(0);
 -webkit-transform: scale(1.2) translateX(0);
	  -o-transform: scale(1.2) translateX(0);
	 -ms-transform: scale(1.2) translateX(0);
		 transform: scale(1.2) translateX(0);
}
@media (max-width: 620px) {
	.case-study{
	width:100%;
	margin-bottom:40px;
	border-bottom:1px solid #ddd;
}
.services{
	width:100%;
	height:auto;
	max-height:900px;
	float:left;
	position:relative;
	overflow:hidden!important;
}
.services-in{
	width:100%;
	height:auto!important;
	float:left;
	margin:0px;
}
.services-in2{
	width:100%;
	height:auto;
	min-height:200px;
	float:left;
}
.services-in2 img{
	width:100%;
	height:auto;
	float:left;
}
.services .index-icon{
	-webkit-transition: -webkit-transform 200ms ease-in-out;
         	transition: transform 200ms ease-in-out;
	-moz-transform: scale(1) translateY(-0%);
 -webkit-transform: scale(1) translateY(-0%);
      -o-transform: scale(1) translateY(-0%);
     -ms-transform: scale(1) translateY(-0%);
         transform: scale(1) translateY(-0%);
}
.services .services-in2 img{
	-webkit-transition: -webkit-transform 200ms ease-in-out;
         	transition: transform 200ms ease-in-out;
	-moz-transform: scale(1.2) translateX(-0px);
 -webkit-transform: scale(1.2) translateX(-0px);
      -o-transform: scale(1.2) translateX(-0px);
     -ms-transform: scale(1.2) translateX(-0px);
         transform: scale(1.2) translateX(-0px);
}
}
.contact-form{
	width:100%;
	height:140vh;
	float:left;
	background:#fff;
}
.contact-form-in{
	width:100%;
	height:auto;
	max-width:800px;
	margin:0px auto 200px auto;
	padding:0px 40px;
	background:#fff;
}
.form-width{
	width:50%;
	float:left;
	height:auto;
	padding-left:10px;
}
.form-width2{
	width:50%;
	float:left;
	height:auto;
	padding-right:10px;
}
.projects-filter{
	width:100%;
	height:auto;
	float:left;
}

.projects-filter-panel{
	width:100%;
	height:60px;
	background:#fff;
	float:left;
	padding:0px 60px 0px 0px;
}
.projects-filter-panel-item{
	width:auto;
	min-width:60px;
	float:left;
	color:#666;
	height:60px;
	background:#fff;
	padding:15px 20px 0px 20px;
	border-right:2px solid #f5f5f5;
  -webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all 200ms ease-in-out;
  	   -o-transition: all 200ms ease-in-out;
		  transition: all 200ms ease-in-out;
}
.projects-filter-panel-item:hover{
	float:left;
	color:#6a1b9a;
	background:#f5f5f5;
	border-right:2px solid #fff;
}
.projects-filter-panel-item svg{
	stroke:#666!important;
	fill:#666;
	-webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all 200ms ease-in-out;
  	   -o-transition: all 200ms ease-in-out;
		  transition: all 200ms ease-in-out;
}
.projects-filter-panel-item:hover svg{
	stroke:#6a1b9a!important;
	fill:#6a1b9a;
	-webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all 200ms ease-in-out;
  	   -o-transition: all 200ms ease-in-out;
		  transition: all 200ms ease-in-out;
}
.filter-active{
	stroke:#6a1b9a!important;
	fill:#6a1b9a;
	color:#6a1b9a;
}
.filter-active svg{
	stroke:#6a1b9a!important;
	fill:#6a1b9a;
	color:#6a1b9a;
}
.projects-filter-panel-item-in{
	width:auto;
	float:left;
	margin-right:10px;
}
.projects-filter-panel-item p{
	width:auto;
	padding:5px 0px 0px 0px;
	float:left;
	font-weight:700;
	font-size:12px!important;
	text-transform:uppercase!important;
}
.projects-in{
	width:100%;
	float:left;
	height:auto;
	padding:0px 62px 0px 62px;
}


@media (max-width: 1200px) {

}
@media (max-width: 1200px) {

}
@media (max-width: 768px) {
.projects-filter-panel-item{
	width:20%;
	min-width:40px;
	max-width:60px;
	padding:15px 10px 0px 15px;
}
.projects-filter-panel-item:hover{
	float:left;
	color:#fff;
	background:#000;
	border-bottom:5px solid #fff;
	border-right:1px solid #666;
}
}

.project-next{
	width:62px;
	height:100vh;
	float:left;
	position:fixed;
	margin:0px 0px 0px 0px;
	z-index:1000;
	background:#fff;
	top:0;
	left:100;
	right:0;
}
.project-next-btn{
	position:absolute;
	top:45%;
	right:0;
	left:0;
	margin:0px 0px 0px 0px!important;
	width:62px;
	height:100px;
	background:#fff;
	float:left;
    border-left:0px solid #ddd;
	cursor:pointer;
	-webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all 200ms ease-in-out;
  	   -o-transition: all 200ms ease-in-out;
		  transition: all 200ms ease-in-out;
}
.project-next-btn:hover{
	width:62px;
	height:100px;
	background:#f5f5f5;
	float:left;
    border-left:0px solid #6a1b9a;
}
.project-next-btn svg{
	margin-top:40px;
	margin-left:15px;
	stroke:#666!important;
	-webkit-transition: all 200ms ease-in-out;
	 -moz-transition: all 200ms ease-in-out;
	  -ms-transition: all 200ms ease-in-out;
  	   -o-transition: all 200ms ease-in-out;
		  transition: all 200ms ease-in-out;
}
.project-next-btn:hover svg{
	margin-top:40px;
	margin-left:20px!important;
	stroke:#6a1b9a!important;
}
.project-prev{
	width:62px;
	height:100vh;
	float:left;
	position:fixed;
	margin:0px 0px 0px 0px;
	z-index:1000;
	background:#fff;
	top:0;
	left:0;
	right:0;
}
.project-prev-btn{
	position:absolute;
	top:45%;
	right:0;
	left:0;
	margin:0px 0px 0px 0px!important;
	width:62px;
	height:100px;
	background:#fff;
	float:left;
    border-right:0px solid #6a1b9a;
	cursor:pointer;
}
.project-prev-btn:hover{
	width:62px;
	height:100px;
	float:left;
	background:#f5f5f5;
    border-right:0px solid #6a1b9a;
}
.project-prev-btn svg{
	margin-top:40px;
	margin-left:15px;
	stroke:#6a1b9a!important;
}
.project-prev-btn:hover svg{
	margin-top:40px;
	margin-left:10px!important;
	stroke:#6a1b9a!important;
}