@charset "UTF-8";
/* CSS Document */


/* ------------------------------------------------------------------
General Styles
------------------------------------------------------------------- */

html, body {
	height: 100%;
}

body {
  font-family: 'Hind', sans-serif;
  font-size:20px;
  color:#666666;
  margin: 0;
  padding: 0;
  
}

p {margin:0; padding:0;}

h1 {margin:0; padding:0; font-family: 'Roboto', sans-serif; font-size:88px; line-height:85px; font-weight:600;}

h2 {margin:0; padding:0; font-family: 'Roboto', sans-serif; font-size:48px; color:white; font-weight:600;}

h3 {margin:0; padding:0; font-family: 'Roboto', sans-serif; font-size:38px; color:#333333; font-weight:600;}

h4 {margin:0; padding:0; font-size:30px; font-weight:600; }

h5 {margin:0; padding:0; font-size:28px; font-weight:600; line-height:30px; }

ul {margin:0; padding:0;}

a {text-decoration:none; color:inherit;}

.container {
	width:1110px;
    margin-left:auto;
	margin-right:auto;
}

#header {
	height:80px;
	z-index:1000;
	position: fixed;
	width: 100%;
	background-color:transparent;
	transition:0.8s;
}

#header.bgChange{
	background-color:#181419;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#logo {
	width:130px;
	height:40px;
	background-image:url(img/logo.png);
    background-repeat:no-repeat;
	float:left;
	margin-top:15px;
	background-size:100%;
	transition: all .3s;
}

ul#menu {
    margin:0px; padding:0px;
    padding-top:35px;
	float:right;
}

ul#menu li {
    display: inline-block;
	margin-left:60px;
	color:#aaaaaa;
}

ul#menu li a {
	
}

ul#menu li a.active, ul#menu li a:hover {
	color:white;
	transition: all .3s;
}

img {width: 100%;}


/* ------------------------------------------------------------------
Homepage
------------------------------------------------------------------- */

#about {
	bottom:80px;
	position:relative;
	opacity:0;	
}

#featured {
	height:100%;
	background:transparent;
}

.parallax-window {
    height: 100%;
	background:transparent;
	display:block;
	text-align:center;
}

.featured-title {
	position:relative;
	display:inline-block;
	top:200px;
	left:255px;
	text-align:left;
	color:white;
	text-shadow:5px 5px 10px black;
}

.featured-title a{
	color:#999;
}

.featured-title a:hover{
	color:white;
	transition: all .3s;
}

#content {
	padding-top:80px;
	background-color:#eaeaea;
	text-align:center;
}

#content h2 {color:#333333;}

.workspace {
	width:1200px;
	height:380px;
	background-size:100%;
	background-repeat:no-repeat;
	background-image:url(img/workspace.jpg);
	margin-top:100px;
	margin-left:auto;
	margin-right:auto;
}

#services {
	bottom:80px;
	position:relative;
	opacity:0;	
}

#content2 {
	padding-top:80px;
	padding-bottom:180px;
	background-color:#673776;
	text-align:center;
}

.work-container {
	width:100%;
	margin-top:50px;
	color:white;
	
}

.web-design {
	width:350px;
	float:left;
	text-align:center;
}

.logo-design {
	width:350px;
	float:left;
	margin-left:30px;
	text-align:center;
}

.graphic-design {
	width:350px;
	float:left;
	margin-left:30px;
	text-align:center;
}

#portfolio {
	bottom:80px;
	position:relative;
	opacity:0;	
}

#contact {
	bottom:80px;
	position:relative;
	opacity:0;	
}

#content3 {
	background-color:#423d44;
	padding-top:80px;
	text-align:center;
	padding-bottom:150px;
}

#content3 p {color:#dddddd; font-weight: 400;}

.contact-left {
	width:540px;
	float:left;
	margin-top:45px;
	text-align:left;
}

.contact-icon {
	width:65px;
	height:350px;
	float:left;
}

.icon-pos {
	float:left; 
	position:relative; 
	bottom:5px;
	width: 55px;
	padding: 5px 0;
}


.map-icon {
	margin-left:5px;
}

.contact-info {
	width:470px;
	float:left;
}

/* ------------------------------------------------------------------
Contact form
------------------------------------------------------------------- */

#contact-form {
	bottom:80px;
	position:relative;
	opacity:0;	
}


.contact-form {
	width:540px;
	float:left;
	margin-left:30px;
	margin-top:45px;
	text-align:left;
}

#contactus label
{
   font-family: 'Hind', sans-serif;
   font-size:0.8em;
   font-weight: bold;
}

input, textarea {
    -webkit-appearance: none;
    -webkit-border-radius:0; 
    border-radius:0;
	box-sizing: border-box; 
	padding-left:20px;
	padding-right:20px;
}


#contactus input[type="text"],textarea
{
  font-family: 'Hind', sans-serif;
  font-size: 20px;
  line-height:140%;
  color : #000;  
  border:none;
}

#contactus input[type="text"]
{
  height:50px;
  width:100%;
  border:none;
  padding-top:5px;  
}

#contactus #scaptcha
{
  width:150px;
  height:50px;
  float:left;
  font-size:14px;
}


#contactus button[type="submit"]
{
   color:#fff;
   font-family: 'Hind', sans-serif;
   font-weight:700;
   font-size:20px;
   background-color: #8b4d9f;
   padding:15px 40px;
   border:none;
   cursor: pointer;
   float:left;
   transition:0.3s   
}

#contactus button[type="submit"]:hover
{ background-color:#000;  
 
}

#contactus textarea
{
  height:200px;
  width:100%;
  padding-top:10px;
}

#contactus input[type="text"]:focus,textarea:focus
{
  border : 1px solid #990000;
  
}

#contactus .clearfix
{
   margin-bottom:25px;
}

#contactus .error
{
   font-family: 'Hind', sans-serif; 
   font-size: 14px;
   color:#efbfff;
   position:relative;
   top:5px;
}

#contactus fieldset#antispam
{
   padding:2px;
   border-top:1px solid #EEE;
   border-left:0;
   border-right:0;
   border-bottom:0;
   width:350px;
}

#contactus fieldset#antispam legend
{
   font-family: 'Hind', sans-serif;
   font-size: 0.8em;
   font-weight:bold;
   color:#333;   
}

#contactus .short_explanation
{
   font-family: 'Hind', sans-serif;
   font-size: 0.6em;
   color:white;   
}

/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip
{
   display:none;
   width:10px;
   height:3px;
}
#fg_crdiv
{
   font-family: 'Hind', sans-serif;
   font-size: 0.3em;
   opacity: .2;
   -moz-opacity: .2;
   filter: alpha(opacity=20);   
}
#fg_crdiv p
{
    display:none;
}

*::-webkit-input-placeholder {
    color: #423d44;
	
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #423d44;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #423d44;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #423d44;
}


.portfolio-btn {
    font-size: 16px;
	color:#333333;
	border:1px solid #333333; 
	transition:0.3s;
    padding: 7px 30px;
	border-radius:25px;
	display:inline-block;
	text-align:center;
	box-sizing:border-box;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.portfolio-btn:hover {background:#333333; color:#fff; }
.portfolio-btn:focus {background:#333333; color:#fff; }

.filter > li {
    margin: 0 10px;
}

.module, .module-small {
    padding-top: 70px;
	padding-bottom:0px;
}

.work-caption {
	left: -25px;
}


/* ------------------------------------------------------------------
Web portfolio
------------------------------------------------------------------- */

.works-grid.works-hover-w .work-item:hover .work-image:after {
	background: rgba(0,0,0,0.7);
}

.work-descr {font-size:16px;}

#featured-web {
	padding-top:60px;
	position:relative;
	text-align:center;
	box-sizing: border-box;
	font-size:18px;
	line-height:30px;
}

.portfolio-imac {
	width:730px;
	height:635px;	
	background-size:100%;
	background-repeat:no-repeat;
	background-image:url(img/portfolio-imac.png);
	margin-left:auto;
	margin-right:auto;
	position:relative;
	box-sizing: border-box;
	padding: 30px 30px 0 28px;
}


/* ------------------------------------------------------------------
Footer
------------------------------------------------------------------- */

#footer {
	padding:30px 0;
	font-size:17px;
}

.footer-logo {
	width:130px;
	height:40px;
	background-image:url(img/logo2.png);
    background-repeat:no-repeat;
	float:left;
	background-size:100%;
}

.footer-info {
	float:left;
	width:445px;
	margin-left:60px;
	margin-top:15px;
}

.copyright {
	float:right;
	margin-top:15px;
}