body {
	font-family: 'Helvetica-Neue-LT-Com-55-Roman';
	color: #999;
	font-size: 16px;
	line-height: 25px;
}

@font-face {
	font-family: "roboto";
	src: url(../fonts/roboto/Roboto-Regular.ttf);
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-family: "Helvetica-Neue-LT-Com-55-Roman";
	src:url(../fonts/Helvetica-Neue-LT-Com-55-Roman.ttf);
}

*{margin:0; padding:0;}
a:focus{color: #fff;}

/*Header Section*/
.robot-slab {
	font-family: 'Yanone Kaffeesatz', sans-serif; 
	font-size: 30px;
	color: #999;
}
.title1 {
	line-height: 40px; margin-top: 100px;
}
.logo{
	font-family: 'Yanone Kaffeesatz', sans-serif;
	text-transform: uppercase;
	font-size: 37px;
	margin-top: 35px;
}
.content {
	position: relative;
	width: 100%;
	height: calc(100%);
}
.content img {
	width: 110%;
	height: auto;
	position: absolute;
	z-index: -1;
}
.black-text{color:#000;}
.gray-text{color:#999;}
.white-text{color:#fff;}
.yellow-text{color:rgba(240, 224, 29, 0.7);}
.yellow-text:hover{color:rgba(240, 224, 29, 0.7);}

.content img {
	opacity: 0;
	transition: opacity .6s linear .85s;
	width: 110%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/*height:calc(100%);*/
}
.content img.loaded {
	opacity: 1;
}
/* panning css */		
.img-pan-container, .img-pan-container img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.img-pan-container {
	position: fixed;
	overflow: hidden;
	cursor: crosshair;
	height: 100%;
	width: 100%;
}
.img-pan-container img {
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}
.box {	
	height: calc(100% - 50px);
	position: fixed;
	top: 0;
	width: 23%;
	z-index: 1;
	margin: 20px 20px 20px 20px;
	padding: 20px;
	opacity: 0.8;
	left: 0;
	transition: background-color 1s ease;
	background-color:rgba(41, 41, 41, 0.9);
 	   
}
.box1 {
	height: calc(100% - 50px);
	position: fixed;
	top: 0;
	width: 23%;
	z-index: 10;
	margin: 50px 20px 20px 20px;
	padding: 20px 20px 20px 0px;
	color: #fff;
	transition: all 1s;
}
.box-text {
	color: #fff;
}
.light {
	font-weight: 100;
}
.normal {
	font-weight: 300;
}
.dot-nevigation { 
	display:none;
}
h5, .h5 {
	line-height: 20px;
}
.none {
	display: none;
}
.block {
	display: block;
}
.hidden {
	opacity: 0;
}
.visible {
	opacity: 1;
}
#menu li {
	background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
	border-radius: 10px;
	color: #000;
	display: inline-block;
	margin: 10px;
	display: none;
}
#menu li.active {
	display: block;
}
/*#menu li a {
	color: #000;
	text-decoration: none;
}
#menu li.active a:hover {
	color: #000;
}
#menu li:hover {
	background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
}
#menu li a, #menu li.active a {
	display: block;
	padding: 9px 18px;
}
#menu li.active a {
	color: #fff;
}*/
#menu {
	height: 40px;
	left: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 70;
}
.footer{
	width: 50%;
	position:fixed;
	padding:20px 10px;
	margin: 20px;
	bottom: 0px;
	left: 0;
	z-index: 50;
}
.footer a:hover, a:focus{
	color:rgba(240, 224, 29, 0.7);
}
.footer a:focus{
	color:#999;
}

.right-panel {
	height:auto;
	overflow:hidden;
}

/*See More Button Code*/
@import "https://fonts.googleapis.com/css?family=Space+Mono";
button {
  font-family: "Helvetica-Neue-LT-Com-55-Roman";
  letter-spacing: 1px;
  background: none;
  color: #D0D0D0;
  position: relative;
  outline: none;
  border: none;
  height:35px;
  width: 140px;
  font-size: 14px;
  z-index: 2;
  transition: .01s .23s ease-out all;
  overflow: hidden;
}
button:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 55%;
  background: rgba(240,224,29,0.5);
  z-index: -1;
  transition: .3s ease-in all;
}
button:after {
  content: '';
  position: absolute;
  left: -5%;
  top: 5%;
  height: 90%;
  width: 5%;
  background: rgba(220,220,220,0.5);
  z-index: -1;
  transition: .4s .02s ease-in all;
}
button:hover {
  cursor: pointer;
  color: transparent;
}
button:hover:before {
  left: 100%;
  width: 25%;
}
button:hover:after {
  left: 100%;
  width: 70%;
}
button:hover .icon-right.after:after {
  left: -60px;
  color: #D0D0D0;
  transition: .2s .2s ease all; 
}
button:hover .icon-right.after:before {
  left: -104px;
  top: 14px;
  opacity: 0.2;
  color: #D0D0D0;
}
.icon-right {
  position: absolute;
  top: 0;
  right: 0; 
}
.icon-right:after {
  font-family: "FontAwesome";
  content: '\2192';
  font-size: 24px;
  display: inline-block;
  position: relative;
  top: 16px;
  -webkit-transform: translate3D(0, -50%, 0);
  transform: translate3D(0, -50%, 0);
}
.icon-right.after:after {
  left: -250px;
  color: black;
  transition: .15s .25s ease left, .5s .05s ease color;
}
.icon-right.after:before {
  content: '';
  position: absolute;
  left: -230px;
  top: 14px;
  opacity: 0;
  transition: .2s ease-in all; 
  margin-top: -7px;
  margin-left: 25px;
}

/*Inner Pages Code*/
/*Parallex Code*/
.parallex {
  	background: url(../img/about-bg-img.jpg) no-repeat center center fixed;
  	padding-top: 400px;
  	background-size: cover;
}

.panel {
  	background: rgba(41, 41, 41, 0.9); 
  	color: black;
  	margin: 0px auto;
  	padding:30px 20px;
  	border-radius: 0;
  	position: relative;
	z-index: 70;
}

/*About Us*/
.about{
	color: #999;/*#40516D*/
	margin-bottom: 15px;
}
.logo-heading{
	font-family: 'Yanone Kaffeesatz', sans-serif;
	text-transform: uppercase;
	font-size: 37px; 
	color: #fff;
	margin-left: 8px;
}
.heading{
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 37px;
	margin-top: 0;
}
.white-text, .white-text:hover{
	color: #fff;
}
.about p{
	font-family: 'Helvetica-Neue-LT-Com-55-Roman';
}
.philosophy{
	margin-top: 20px;
}
.fs-18{
	font-size: 18px;
}
.fs-45{
	font-size: 45px;
}

/*Section Scroller Button*/
#section-scroller-button {
  position: fixed;
  right: 30px;
  bottom: 50px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  z-index: 11;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-box-shadow: 0 8px 42px -10px rgba(0, 0, 0, 0.85);
  box-shadow: 0 8px 42px -10px rgba(41, 41, 41, 0.85);
}
.caret {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  display: inline;
  margin:14px 11px;
  padding: 3px;
  border-bottom: solid 2px #999;
  border-right: solid 2px #999;
  border-top: 0px dashed;
  border-left: 0px solid transparent;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}
#section-scroller-button.rotate .caret {
  top: 0px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

@media (max-width: 767px) {
  #section-scroller-button {
    right: 20px;
    bottom: 25px;
  }
}

/*Contact Us*/
.form-horizontal .control-label{
	text-align: left;
	font-weight: normal;
}
.form-control{
	background-color: transparent;
	border:0;
	border-bottom: 1px solid #999;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	height: 40px;
	font-size: 16px;
}
.form-control:focus {
  	border-color: #999; /*#40516D*/
  	outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control {
  	color: #999;
}
.form-control::-moz-placeholder {
  	/*color: #40516D;*/
  	font-weight: bold;
}
.md-textarea{
	color: #40516D;
  	font-weight: bold;
}
.mt-10{
	margin-top: 10px;
}
.mt-15{
	margin-top: 15px;
}
.mt-25{
	margin-top: 25px;
}
.mt-70{
	margin-top: 70px;
}
.mtb-20{
	margin:20px 0;
}
.lh-25{
	line-height: 25px;
}
.height-430{
	height: 430px;
}
.btn-section .btn-primary {
	border:1px solid #999;
	color: #999;
	padding: 4px 15px;
	background-color: transparent;
	font-weight: bold;
}
.btn-section .btn-primary:hover{
	background-color: rgba(240, 224, 29, 0.5);
	color: #fff;
	transition: all 0.5s ease-in;
}
.message{
	resize: none;
}
/*Check Box Code*/
.control {
  display: block;
  position: relative;
  padding-left: 22px;
  cursor: pointer;
  font-weight: normal;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 15px;
  width: 15px;
  background: #999;
  border-radius: 2px;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #999;
}
.control input:checked ~ .control__indicator {
  background: rgba(240, 224, 29, 0.5);
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/*Project Page Code*/
.proj-section{}
.proj-section a {
	color: #fff;
}
.portfolio-meta a h2:hover{
	color: rgba(240, 224, 29, 0.5);
	transition: all 0.5s ease-in;
}
/*Plus Icon Code*/
.index__icon {
    left: 7px;
    position: absolute;
    top: 5px;
    transform: translateX(-50%) translateY(-50%);
}
.icon--plus {
    height: 16px;
    transition: height 200ms cubic-bezier(0.37, 0.005, 0, 1.65),
    width 200ms cubic-bezier(0.37, 0.005, 0, 1.65);
    width: 16px;
}
.icon {
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
.icon--plus .vert {
    background-color: #7A7A7A;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
}
.icon--plus .horz {
    background-color: #7A7A7A;
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

/*Careers Page Code*/
.careers{
	margin-top: 170px;
	color: #999;
}
.careers h1{
	font-size: 45px;
	text-transform: capitalize;
	cursor: pointer;
}
.careers h1:hover{
	color: rgba(240, 224, 29, 0.6);
	transition: color .35s linear;
}
.first-row{
	/*margin-bottom: 50px;*/
}
.dialog-inner h1:hover{
	color:#999 ;
	cursor: inherit;
}

/*Services*/
.services{
	color: #999;
	margin-top: 100px;
}
.services h1{

}
.services .col-left{

}
.services .col-right{
	
}



/*Responsive Code*/
@media only screen and (max-width: 420px) {
	.footer { 
		bottom:17px !important; 
		margin:5px 5px 0px 5px !important; 
		padding:5px !important; 
		font-size: 10px !important; 
	}
	.box { 
		margin: 10px; 
		padding: 10px; 
		height: calc(100% - 20px); 
		width: 60%; 
	}
	.box1 { 
		margin: 0px; 
		padding: 0px; 
		width: 60%; 
	}
	.logo { 
		font-size: 24px; 
		margin-top: 80px; 
	}
	.title1 { 
		font-size: 20px; 
		margin-top: 25px; 
		line-height: 28px; 
	}
	.description { 
		display:none; 
	}
	.dot-nevigation { 
		display:block; 
	}
	.header { 
		top: 19px !important; 
		left: -16px; 
	}
	/*Inner Page Code*/
	.logo-heading { 
		font-size: 22px;
		margin: 80px 0 0 10px; 
	}
	.parallex { 
		padding-top: 150px; 
	}
}

@media (min-width: 421px) and (max-width: 767px) {
	.box { 
		width: 60%; 
	}
	.box1 { 
		width: 60%; 
	}
	.logo { 
		font-size: 24px; 
		margin-top: 0px; 
	}
	.title1 { 
		font-size: 18px; 
		margin-top: 0px; 
		line-height: 23px; 
	}
	/*Inner Page Code*/
	.logo-heading{ 
		font-size: 33px; 
	}
	.parallex { 
		padding-top: 150px; 
	}

}/*772px*/

@media (min-width: 773px) and (max-width: 827px) {
	.box { 
		width: 40%; 
	}
	.box1 { 
		width: 40%; 
	}
	.parallex { 
		padding-top: 150px; 
	}
}

@media (min-width: 462px) and (max-width: 1280px) {  
	.content img {
		width: 100% !important;
		height: 100% !important;
		background-position: center; 
		background-size: cover;
		display: block;
		left: 0 !important;  	
	}  
	.title1 {
		margin-top: 0px; 
	}  
}

@media only screen and (max-width: 1280px) {
	.content img {
		width: auto;
		height: 100%; 
	}
	.logo { 
		font-size: 23px;
	}
	.title1 { 
		font-size:22px;  
		line-height: 35px; 
	}
}