/*== Reset & Clearfix */
html, body
{ 
	height: 100%; 
	margin: 0;
	padding: 0;
}

html, body, ul, ol, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
	border:0;
	outline: none;
}

body 
{
	background: #d7b56d;
	font-family: "Madrigal";
	line-height: 22px;
	color: #999;
}

body, .green1 {
	background: #ffffcf;
}

body, .green2 {
	background: #eee9bc;
}

body, .green3 {
	background: #fafdb4;
}

body, .gold {
	background: #181818;
}

img
{
	width: 310px;
	height: 100px;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: none;
	-ms-interpolation-mode: bicubic;

}

ul{
	font-family: 'Text Me One', sans-serif;
	text-transform: uppercase;
}

p{
	padding: 0;
	margin-top: 1em;
	margin-bottom: 15px;
}

blockquote
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*width: 650px;*/
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
}

span
{
	color: #aaaaaa;
	font-size: 13px;
}

b { 
	color: #36d7b7; 
}

h1
{
	font-size: 34px;
	word-spacing: 1px;
	line-height: 40px;
}

a { 
	text-decoration: none; 
}

ol, ul 
{
	list-style: none;
	margin: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	display: block;
}

hr
{
	width: 70px;
	border: none;
	height: 1px;
	background-color: #aaaaaa;
	display: block;
}

iframe
{
	border:0;
	margin: 0;
	overflow: hidden;
	width: 250px;
	height: 250px;
}

/* === Clearfix === */
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
.clearfix{zoom:1}


/*== General styles */

.left { 
	float: left; 
}

.right { 
	float: right; 
}


@font-face 
{
	font-family: 'LicensePlate';
    src: url('../fonts/licenseplate-webfont.eot');
    src: url('../fonts/licenseplate-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/licenseplate-webfont.woff') format('woff'),
         url('../fonts/licenseplate-webfont.ttf') format('truetype'),
         url('../fonts/licenseplate-webfont.svg#license_plateregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*== Wrapper */

#wrapper
{
	margin: 0 auto;
	position: relative;
	min-height: 695px;
}

/* === Menu section === */

#menu
{
	/* max-width: 1090px; */
	z-index: 1;
    position: relative;
    background: transparent url(../img/main-hero.png) no-repeat 50% 0%;
    min-height: 695px;
    overflow: hidden;
	/* margin: 0 auto 200px auto; */
}

.about
{
	position: absolute;
	bottom: 212px;
    right: 150px;
}

.about a
{
	display: block;
	color: #ebc388;
	font-size: 80.93px;
}

.projects
{
	position: absolute;
	top: 284px;
	left: 189px;
}

.projects a
{
	color: #e9b97e;
	font-size: 74.71px;
}

.services
{
	position: absolute;
	bottom: 319px;
	right: 262px;
}

.services a
{
	color: #fff3c4;
	font-size: 84.77px;
}

.comments
{
	position: absolute;
	top: 70px;
    right: 377px;
}

.comments a
{
	color: #fff3c4;
	font-size: 53.2px;
}

.contacts
{
	position: absolute;
	top: 80px;
    left: 82px;
}

.contacts a
{
	color: #daa65c;
	font-size: 58.35px;
}

.following
{
	position: absolute;
	bottom: 206px;
    left: 115px;
}

.following a
{
	color:#8d6d0b;
	font-size: 55.39px;
}

.video
{
	position: absolute;
	bottom: 324px;
	right: 38px;
}

.video a
{
	color: #daa65c;
	font-size: 42.18px;
}

.social
{
	position: absolute;
	top:36px;
	right:248px;
}

.social a
{
	color: #cc9900;
	font-size: 42.5px;
}

.find
{
	position: absolute;
	bottom: 277px;
	right: 32px;
}

.find a
{
	color: #ebca57;
	font-size: 44.09px;
}

.team
{
	position: absolute;
	bottom: 118px;
    right: 498px;
	
}

.team a
{
	color: #d7b56d;
	font-size: 76.88px;
}

.information
{
	position: absolute;
	top:27px;
	left: 240px;
}

.information a
{
	color: #daa65c;
	font-size: 26.1px;
}

.photos
{
	position: absolute;
	top: 66px;
    left: 364px;
}

.photos a
{
	color: #fff3c4;
	font-size: 61.76px;
}

.works
{
	position: absolute;
	top:158px;
	right:234px;
}

.works a
{
	color: #e9b97e;
	font-size: 72.32px;
}

.skills
{
	position: absolute;
    top: 98px;
    right: 84px;
}

.skills a
{
	color: #ebca57;
	font-size: 65.1px;
}

.fonts-display 
{
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.text
{
	padding-top: 30px;
    padding-bottom: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*max-width: 650px;*/
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
}

/* === Menu animation styles === */

#menu a { 
	display: block;
} 

#menu a:hover,
#menu a.active,
#menu a.hovered
{
	text-decoration: none;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.works, .contacts, .find, .information,
.social, .photos, .comment, .services, .following
{
	-webkit-animation: rotate-lr 3s ease-in-out infinite alternate;
	-moz-animation: rotate-lr 3s ease-in-out infinite alternate;
	animation: rotate-lr 3s ease-in-out infinite alternate;
}

 .projects, .comments, .skills, .video,
 .team, .about
{
	-webkit-animation: rotate-rl 3s ease-in-out infinite alternate;
	-moz-animation: rotate-rl 3s ease-in-out infinite alternate;
	animation: rotate-rl 3s ease-in-out infinite alternate;
}

@-webkit-keyframes rotate-lr
{
    from{
        -webkit-transform:rotate(-3deg);
    }
    to{
        -webkit-transform:rotate(3deg);
    }
} 

@-webkit-keyframes rotate-rl
{
    from{
        -webkit-transform:rotate(3deg);
    }
    to{
        -webkit-transform:rotate(-3deg);
    }
} 

@-moz-keyframes rotate-lr
{
    from{
        -moz-transform:rotate(-3deg);
    }
    to{
        -moz-transform:rotate(3deg);
    }
} 

@-moz-keyframes rotate-rl
{
    from{
        -moz-transform:rotate(3deg);
    }
    to{
        -moz-transform:rotate(-3deg);
    }
} 
@keyframes rotate-lr
{
    from{
        transform:rotate(-3deg);
    }
    to{
        transform:rotate(3deg);
    }
} 

@keyframes rotate-rl
{
    from{
        transform:rotate(3deg);
    }
    to{
        transform:rotate(-3deg);
    }
} 


/* === ABOUT Section === */

#about 
{
	text-align: center;
	padding: 40px 0 30px 0;
	position: relative;

}

#your_image
{
	margin-top: 30px;
	width: 246px;
	height: 246px;
}


.content-about {
	position: relative;
	display: table;
	height:100%;
}

.content-about .text
{
	/*width: 82%;*/
	float: left;
	height: 100%;
	position: relative;
	display: table;
}

.about-bracket
{
	/*width: 9%;*/
	height: 100%;
	position: relative;
	display: table;
}




.my-skills h2
{
	padding: 10px 0 30px 0;
}

.center
{
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.list-small > li 
{
	font-size: 12px;
	word-spacing: 1px;
	line-height: 14px;
	vertical-align: top;
}

.list-inline-block > li 
{
	margin-top: 0;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
}

.list-small > li 
{
	font-size: 12px;
	word-spacing: 1px;
	line-height: 14px;
}

.fonts-display-cnd 
{
	font-family: 'Text Me One', sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

.list-inline-block.list-small.fonts-display h4 
{
padding: 15px 0 0 0;
}


/* === Projects section  === */



.projects-items, 
#projects-filters, 
.skill-container ul
{
	list-style: none;
	padding: 15px 0 0 0;
}

.projects-items
{ 	
	display: inline-block;
	width: 100%;
	height: 100%;
}

.projects-items li 
{ 
	float: left;
	/*width: 245px; */
}

.projects-items li, 
#projects-filters li 
{ 
	display: inline-block; 
	padding:0; 
}

.item
{
	cursor:pointer;
	display: inline-block;
	margin:0;
	padding:0;
    width: 100%;
    height: 100%;
    padding: 4px;
}

.item span { display: none; }

.item-info-wrap
{
	width:30%;
	padding:1% 1%;
	float:left;
}

.item-description
{
	font-size: 14px;
}

.item-preview
{
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #FFF;
	position: relative;
	z-index: 9999;
	text-decoration:none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* 
.projects-items li .title, 
.projects-items li .description, 
.projects-items li .preview
{ display: none; } */

.projects-items img
{
	width: 100%; /*245px*/
	height: auto;
}

::selection
{
	color: #fff;
	background: #16a6b6;
}

#filtered-list:after
{
	content: '';
	display: inline-block;
	width: 100%;
}

#filtered-list .mix
{
	display: none;
	opacity: 0;
}

/* === Gray scale picture === */


/* === SERVICES section  === */

.services-wrapper
{
	margin: 0 auto;
    float: none;
	display: inline-block;
}

.services-item
{
	/*float: left;*/
	position: relative;
	padding: 15px 15px 30px 15px;
}

.services-item h3
{
	padding: 10px 0 0 0;
}

.services-item ul
{
	padding: 10px 0 0 0;
	margin-left: 45px;
	text-align: left;
}

.services-item li
{
	list-style: disc;
}

#services
{
	text-align: center;
	position: relative;
	padding: 0 0 15px 0;
}

#services p
{
	font-size: 18px;
	line-height: 25px;
	width: 676px;
}


ul.slider-markers
{
	padding: 9px;
}

.slider
{
	position: absolute;
}

.our-comments h2
{
	padding: 10px 0 0 0;
}

.slider > li:first-child 
{
	display: block;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

.slider > li 
{
	display: none;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-font-smoothing: antialiased;
	top: 0;
	left: 0;
	width: 100%;
}

.list-opinion
{
	position: relative;
	padding: 25px 15px 0px 15px;
    min-height: 200px;
}

ul.slider-markers 
{
	display: inline-block;
	position: relative;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.opinions-page-wrapper > div {
    float: none;
    margin: 0 auto;
}

.phone-email, .map, .address
{
	/*max-width: 250px;*/
	height: 250px;
	position: relative;
    display: table;
	/*margin-right: 15px;*/
	/*float: left;*/
	background-color: #fff;
    word-break: break-all;
}

.gold .phone-email, 
.gold .map, 
.gold .address {
    background-color: #fff3c4;
}

/* == Footer Section == */

/* 
.slider li.hide{ visibility: hidden; }
.slider li.show{ visibility: visible; }

.hide{ visibility: hidden; }
.show{ visibility: visible; } */

/* ****************************************sticky**************************************** */
.scrollup
{
    width:40px;
    height:40px;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: transparent center center no-repeat url("../img/top.png");
}
 
 body.loading #menu,
body.loading #about,
body.loading #skills,
body.loading #projects,
body.loading #opinions,
body.loading #services,
body.loading #social,
body.loading #contacts,
body.loading #find
{
    visibility: hidden;
  	opacity: 0;
}

body.loaded #menu,
body.loaded #about,
body.loaded #skills,
body.loaded #projects,
body.loaded #opinions,
body.loaded #services,
body.loaded #social,
body.loaded #contacts,
body.loaded #find
{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
     opacity: 1;
} 

@keyframes scale {
  0%, 100% {
    transform: scale(0.0);
  }
  7%, 90% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
}

@-webkit-keyframes scale {
  0%, 100% {
    transform: scale(0.0);
  }
  7%, 90% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
}


@-moz-keyframes scale {
  0%, 100% {
    transform: scale(0.0);
  }
  7%, 90% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
}


@-webkit-keyframes grow {
  0%, 100% {
    left: 50%;
    right: 50%;
    top: 100%;
  }
  7%, 90% {
    top: 60%;
    left: 30%;
    right: 30%;
  }
  50% {
    top: 0;
    left: 0;
    right: 0;
  }
}

@keyframes grow {
  0%, 100% {
    left: 50%;
    right: 50%;
    top: 100%;
  }
  7%, 90% {
    top: 60%;
    left: 30%;
    right: 30%;
  }
  50% {
    top: 0;
    left: 0;
    right: 0;
  }
}


@-moz-keyframes grow {
  0%, 100% {
    left: 50%;
    right: 50%;
    top: 100%;
  }
  7%, 90% {
    top: 60%;
    left: 30%;
    right: 30%;
  }
  50% {
    top: 0;
    left: 0;
    right: 0;
  }
} 



/* 
#loader
{
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
   opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
} */

#loader:before, #loader div:before {
	display: none;
}

@media (min-width: 601px)
{
    #mbl-branches
    {
        display: none;
    }
}
@media (max-width: 600px) {

  
    
    #menu > div  { 
        display: none;
    }
    
     #menu > div > a 
        {
        width: 42px;
        height: 42px;
        display: block;
        text-indent: -9999px;
        position: relative;
        z-index: 100;
    } 
    
     #menu div.projects, #menu div.services,
    #menu div.social, #menu div.skills,
    #menu div.find, #menu div.about,
    #menu div.comments, #menu div.contacts,
    #menu div.photos {
        position: absolute;
        top: 115px;
        left: 60px;
        border: 1px dashed #666;
        display: block;
        background-color: rgba(238, 238, 238, 0.65);
        border-radius: 100px;
        padding: 6px;
    }
   
    #menu div:before 
        {
        content: '';
        width: 1px;
        height: 20px;
        position: absolute;
        top: -10px;
        left: 50%;
        border-left: 2px dashed #666;
        z-index: 99;
    }
    
    #menu div.projects {
        top: 115px;
        left: 32px;
    }
    
    #menu div.projects > a {
        background: transparent center center no-repeat url(../img/projects_icon.png) ;
        background-size: cover;
    }
    
    #menu div.services {
        left: 204px;
        top: 146px;
    }
    
    #menu div.services > a {
        background: transparent center center no-repeat url(../img/services_icon.png) ;
        background-size: cover;
    }
    
    #menu div.contacts {
        left: 192px;
        top: 12px;
    }
    
    #menu div.contacts > a{
        background: transparent center center no-repeat url(../img/contacts_icon.png) ;
        background-size: cover;
    }
    
    #menu div.about {
        left: 86px;
        top: 76px;
    }
    
    #menu div.about > a{
        background: transparent center center no-repeat url(../img/about_icon.png) ;
        background-size: cover;
    }
    
    #menu div.comments {
        left: 143px;
        top: 103px;
    }
    
    #menu div.comments > a {
        background: transparent center center no-repeat url(../img/comments_icon.png) ;
        background-size: cover;
    }
    
    #menu div.skills {
        top: 20px;
        left: 122px;
    }
    
    #menu div.skills > a{
        background: transparent center center no-repeat url("../img/skills_icon.png") ;
        background-size: cover;
    }
    
    #menu div.find {
        top: 54px;
        left: 25px;
    }
    
    #menu div.find > a{
        background: transparent center center no-repeat url(../img/find_icon.png) ;
        background-size: cover;
    }
    
    #menu div.social {
        left: 257px;
        top: 107px;
    }
    
    #menu div.social > a{
        background: transparent center center no-repeat url(../img/social_icon.png) ;
        background-size: cover;
    }
    
    #menu div.photos {
        left: 202px;
        top: 78px;
    }
    
    #menu div.photos > a{
        background: transparent center center no-repeat url(../img/photos_icon.png) ;
        background-size: cover;
    }
   
} 

@media (max-width: 320px) {
    #menu {
        margin-left: -15px;
    }
}

@media(max-width: 240px) {
    
    #menu {
        width: 240px;
    }
    
    #social .social-item a 
        {
        width: 80px;
        height: 80px;
        background-size: cover;
    }   
    
    .quote, .quote.left, .quote.right {
        padding: 5px;
    }
    
    #menu div.projects {
        left: 0px;
    }
    
    #menu div.services {
        left: 170px;
    }
    
    #menu div.contacts {
        left: 160px;
    }

    #menu div.about {
        top: 60px;
        left: 50px;
    }
    
    #menu div.comments {
        top: 95px;
        left: 116px;
    }
    
    #menu div.skills {
        top:9px;
        left: 97px;
    }

    #menu div.find {
        top: 24px;
        left: 0px;
    }
    
    #menu div.social {
        top: 138px;
        left: 62px;
    }
    
    #menu div.photos {
        left: 180px;
    }
}

html.fancybox-lock {
    overflow: auto;
}

html.fancybox-lock body .fancybox-overlay-fixed {
    overflow: hidden;
}

/*** Boostrap extensions ;p ****/

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
        width: 20%;
        float: left;
    }
    #mbl-branches
    {
        display: none;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
    #mbl-branches
    {
        display: none;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
    #mbl-branches
    {
        display: none;
    }
}


*****************************************second-section*********************************

/* Just setting the page vars */
.main-one {
	--font-mono: Consolas, Monaco, 'Andale Mono', monospace;

	--color-magenta: #f06;
	--color-green: yellowgreen;
	--color-aqua: hsl(191, 100%, 40%);
	min-height: 100vh;
}

.main-theme {
	margin: 0;
	min-height: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	padding: 2.5rem;
	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
	color: white;
	font-size: 180%;
}

ul.tree {
	font: bold 160%/1 var(--font-mono);
	--dx: 5rem;
}

ul.tree, ul.tree ul {
	margin: 0;
	padding: 0;
}

	ul.tree > li {
		margin: 0;
	}

	ul.tree li {
		position: relative;
		display: flex;
		align-items: center;
		margin: .3em var(--dx);
		font-size: 75%;
	}

	ul.tree span {
		padding: .3em .5em .15em;
		background: var(--color-green);
		border-radius: .4rem;
		text-shadow: 0 0 3px rgba(0,0,0,.4);
		white-space: nowrap;
	}

		ul.tree li  li span::before {
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			width: var(--dx);
			height: calc(.15rem + .05em);
			transform: translateY(-50%) skewY(calc(var(--angle, 0) * 1deg))  scaleY(calc(1 / var(--cos-angle, 1)));
			transform-origin: right;
			background: inherit;
			background-image: linear-gradient(to right, var(--parent-color), transparent);
		}

		ul.tree > li li span { /* Second+ level */
			background: var(--color-magenta);
			--parent-color: var(--color-green);
		}

		ul.tree > li li li span { /* Third+ level */
			background: var(--color-aqua);
			--parent-color: var(--color-magenta);
		}

	/* .about img
	{
		width: 258px;
	}
	.skills img
	{
		width: 315px;
	} */

.bg {
    
        background: url(../img/bg-all.png) no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -3;
}
.bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0.3;
}
@keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
    }
}
@keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
    }
}
@keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
    }
}
.star-field {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;
    -webkit-perspective: 600px;
  
}
.star-field .layer {
    box-shadow: -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc, -91px -235px #d4d4d4, 491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 647px 423px whitesmoke, 183px 389px #c7c7c7,
        524px -237px #f0f0f0, 679px -535px #e3e3e3, 158px 399px #ededed, 157px 249px #ededed, 81px -450px #ebebeb, 719px -360px #c2c2c2, -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf, 446px 404px #c2c2c2,
        440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3, 641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, -315px -488px #e6e6e6, 952px -70px #e3e3e3,
        -869px -29px #dbdbdb, 502px 80px #dedede, 764px 342px #e0e0e0, -150px -380px #dbdbdb, 654px -426px #e3e3e3, -325px -263px #c2c2c2, 755px -447px #c7c7c7, 729px -177px #c2c2c2, -682px -391px #e6e6e6, 554px -176px #ededed,
        -85px -428px #d9d9d9, 714px 55px #e8e8e8, 359px -285px #cfcfcf, -362px -508px #dedede, 468px -265px #fcfcfc, 74px -500px #c7c7c7, -514px 383px #dbdbdb, 730px -92px #cfcfcf, -112px 287px #c9c9c9, -853px 79px #d6d6d6,
        828px 475px #d6d6d6, -681px 13px #fafafa, -176px 209px #f0f0f0, 758px 457px #fafafa, -383px -454px #ededed, 813px 179px #d1d1d1, 608px 98px whitesmoke, -860px -65px #c4c4c4, -572px 272px #f7f7f7, 459px 533px #fcfcfc,
        624px -481px #e6e6e6, 790px 477px #dedede, 731px -403px #ededed, 70px -534px #cccccc, -23px 510px #cfcfcf, -652px -237px whitesmoke, -690px 367px #d1d1d1, 810px 536px #d1d1d1, 774px 293px #c9c9c9, -362px 97px #c2c2c2,
        563px 47px #dedede, 313px 475px #e0e0e0, 839px -491px #e3e3e3, -217px 377px #d4d4d4, -581px 239px #c2c2c2, -857px 72px #cccccc, -23px 340px #dedede, -837px 246px white, 170px -502px #cfcfcf, 822px -443px #e0e0e0, 795px 497px #e0e0e0,
        -814px -337px #cfcfcf, 206px -339px #f2f2f2, -779px 108px #e6e6e6, 808px 2px #d4d4d4, 665px 41px #d4d4d4, -564px 64px #cccccc, -380px 74px #cfcfcf, -369px -60px #f7f7f7, 47px -495px #e3e3e3, -383px 368px #f7f7f7, 419px 288px #d1d1d1,
        -598px -50px #c2c2c2, -833px 187px #c4c4c4, 378px 325px whitesmoke, -703px 375px #d6d6d6, 392px 520px #d9d9d9, -492px -60px #c4c4c4, 759px 288px #ebebeb, 98px -412px #c4c4c4, -911px -277px #c9c9c9;
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 4px;
    border-radius: 2px;
}
.star-field .layer:nth-child(1) {
    animation: sf-fly-by-1 5s linear infinite;
}
.star-field .layer:nth-child(2) {
    animation: sf-fly-by-2 5s linear infinite;
}
.star-field .layer:nth-child(3) {
    animation: sf-fly-by-3 5s linear infinite;
}

/* media quaries */


     /* 

@media (max-width: 960px) {
#menu 
        {   
        width: 100%;
       
        position: relative;
        background: transparent url("../img/menu600x426.png") no-repeat 50% 0%;
        min-height: 695px;
        margin: 0 auto 200px auto;
    } 
    
    #menu > div 
        {
        right: initial;
        bottom: initial;
    }
    
    #menu .about
        {
        top: 255px;
        left: 415px;
    }

    #menu .about a {
        font-size: 58px;
    }

    #menu .projects
        {
        top: 168px;
        left: 113px;
    }

    #menu .projects a {
        font-size: 49px;
    }

    #menu .services
        {
        top: 212px;
        left: 254px;
    }

    #menu .services a {
        font-size: 55px;
    }

    #menu .comments
        {
        top: 127px;
        left: 272px;
    }

    #menu .comments a {
        font-size: 40px;
    }

    #menu .contacts
        {
        top: 127px;
        left: 71px;
    }

    #menu .contacts a {
        font-size: 41px;
    }

    #menu .following
        {
        top: 208px;
        left: 43px;
    }

    #menu .following a {
        font-size: 40px;
    }

    #menu .video
        {
        top: 203px;
        left: 517px;
    }

    #menu .video a {
        font-size: 30px;
    }

    #menu .social
        {
        top: 15px;
        left: 380px;
    }

    #menu .social a {
        font-size: 31px;
    }

    #menu .find
        {
        top: 233px;
        left: 542px;
    }

    #menu .find a {
        font-size: 44px;
    }

    #menu .team
        {
        top: 89px;
        left: 194px;
    }

    #menu .team a {
        font-size: 52px;
    }

    #menu .information 
        {
        top: 13px;
        left: 129px;
    }

    #menu .information a {
        font-size: 26px;
    }

    #menu .photos
        {
        top: 48px;
        left: 257px;
    }

    #menu .photos a {
        font-size: 45px;
    }

    #menu .works
        {
        top: 87px;
        left: 355px;
    }

    #menu .works a {
        font-size: 53px;
    }

    #menu .skills
        {
        top: 168px;
        left: 423px;
    }

    #menu .skills a {
        font-size: 45px;
    }
    
    .services-item ul {
        display: inline-block;
    }
}*/