/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/*
 * Layout Style Sheet - Provides a fluid grid and helper classes to create any layout and some layout defaults
 */


/* Grid and Clearing Tools
----------------------------------------------------------------------------------------------------*/

.clearfix:before,
.clearfix:after,
.grid-block:before,
.grid-block:after,
.deepest:before,
.deepest:after {
	content: "";
    display: table;
}
.clearfix:after,
.grid-block:after,
.deepest:after { clear: both; }

.grid-box { float: left; }

/* Grid Units */
.width16 { width: 16.666%; }
.width20 { width: 20%; }
.width25 { width: 25%; }
.width33 { width: 33.333%; }
.width40 { width: 40%; }
.width50 { width: 50%; }
.width60 { width: 60%; }
.width66 { width: 66.666%; }
.width75 { width: 75%; }
.width80 { width: 80%; }
.width100 { width: 100%; }

.width16,
.width20,
.width25,
.width33,
.width40,
.width50,
.width60,
.width66,
.width75,
.width80,
.width100 {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Create new Block Formatting Contexts */
.bfc-o { overflow: hidden; }
.bfc-f {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	float: left;
}

/* Align Boxes */
.float-left { float: left; }
.float-right { float: right; }

/* Grid Gutter */
.grid-gutter.grid-block { margin: 0 -15px; }
.grid-gutter > .grid-box > * { margin: 0 15px; }

.grid-gutter > .grid-box > * > :first-child { margin-top: 0; }
.grid-gutter > .grid-box > * > :last-child { margin-bottom: 0; }


/* Layout Defaults
----------------------------------------------------------------------------------------------------*/

/* Center Page */
.wrapper {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}

/* Header */
#header { position: relative; }

#toolbar .float-left .module,
#toolbar .float-left > time {
	margin: 0 15px 0 0;
	float: left;
}

#toolbar .float-right .module {
	margin: 0 0 0 15px;
	float: right;
}

#headerbar .module {
	max-width: 300px;
	margin-right: 0;
	float: right;
}

.logo, .logo > img,
#menu { float: left; }


#banner {
	position: absolute;
	top: 0;
	right: -200px;
}

/* Footer */
#footer {
	position: relative;
	text-align: center;
}

/* Absolute */
#absolute {
	position: absolute;
	z-index: 15;
	width: 100%;
}

/* Actual Start
-----------------------------------------------------------------------------------------------------------------------*/
/* Spacing
----------------------------------------------------------------------------------------------------*/

#header,
#content,
#footer { margin: 0; }

/* Layout
----------------------------------------------------------------------------------------------------*/

/* Blocks */
/*#block-footer { width:100%; padding: 25px 0 10px 0; background-color: rgba(0, 0, 0, 0.9); position: fixed; bottom: 0px;}*/
#block-footer { width:100%; padding: 40px 0 35px 0;}
/* Positions */
section { padding: 30px 0; }

#headerbar {
	min-height: 30px;
	padding: 25px 0 25px 0;
}

/*#headerbar {
	border-bottom: 1px solid rgba(0,0,0,0.25);
	box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}*/

#top-a {
	background-position: 0 100%;
	background-repeat: repeat-x;
}

#top-b {

}

#top-c {
	border-bottom: 1px solid rgba(0,0,0,0.5);
	box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

#top-d { padding: 40px 0; }

#bottom-a {
	padding: 50px 0 40px 0;
	background: url(../images/line_stripes.png) 0 0 repeat-x;
}

/* Logo */
.logo-img {
	display: inline-block;
	width: 130px;
	height: 95px;
	margin-left:36px;
}

/* Scroller */
#totop-scroller {
	position: absolute;
	display: block;
	top: -13px;
	left: 0;
	z-index: 1;
	width: 64px;
	height: 64px;
	background: url(../images/logo_footer.png) 0 0 no-repeat;
	text-decoration: none;
	opacity: 0.7;
}

#totop-scroller:hover { opacity: 1; }

/* Pseudo Elements */
#top-b .module-title:before,
#top-b .module-title:after,
#top-c .module-title:before,
#top-c .module-title:after,
#top-d .module-title:before,
#bottom-a .grid-box:first-child .module-title:before {
	content: "";
	display: block;
	position: absolute;
}

/* Fluid images and objects */
.size-auto {
	max-width: 100%;
	height: auto;
}

/* Extra Nav */


#nav {
	background-color: rgba(0,0,0,.2); 
	padding: 15px 0 15px 0px;
	color: #666;
	z-index: 99;
	height: 21px;
	position: absolute;
	overflow: hidden;		
	width:100%
}

#nav .container {
/*width:1000px;*/
}

#nav h2 {
	font-size: 18px;
	line-height: 50px;
	padding: 0;
	margin: 0;
	width:210px; 
	float:left;
}

#nav ul {
	padding: 0;
	opacity: 0;
}

#nav_space {
	height: 50px;
	width: 100%;
/*	margin-bottom: 15px;*/
}

#nav_space_home {
	height: 50px;
	width: 100%;
}

#nav h3.logo {
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

#nav h2 {
	position: absolute;
	top: 0;
}

/*-------------Contact---------------------*/
.contact-way {
width:25%;
float:left;
margin-bottom:25px;
}
h4.subtitle {
margin:25px 0 35px 0;
font-size:1.25em;
}
.contact-way h5 {
margin-bottom:10px;
/*color: #8CC541;*/
}
.contact-way div {
}
.contact-way a {
color:rgba(255, 255, 255, 0.5);
}

h5.c-message{
background-image:url(../images/retina/message.png);
background-repeat:no-repeat;
background-position:0 center;
padding-left:25px;
margin-bottom:15px;
}
h5.c-email{
background-image:url(../images/retina/email.png);
background-repeat:no-repeat;
background-position:0 center;
padding-left:25px;
}
h5.c-call{
background-image:url(../images/retina/call.png);
background-repeat:no-repeat;
background-position:0 center;
padding-left:25px;
}
h5.c-meet{
background-image:url(../images/retina/meet.png);
background-repeat:no-repeat;
background-position:0 center;
padding-left:25px;
}
h5.c-download{
background-image:url(../images/retina/download.png);
background-repeat:no-repeat;
background-position:0 center;
padding-left:25px;
}


/*--------------VJ---------------*/

/*--------------------------------------------------------------------------------------------
	about
--------------------------------------------------------------------------------------------*/
#about {
	padding-bottom: 0;
	border: 0;
}
.col_6 {
	width: 560px;
	float: left;
	padding-right: 40px;
}

.last {
	padding-right: 0 !important;
}

.col_3 {
	width: 260px;
	padding-right: 40px;
	float: left;
}

#slider {
	position: relative;
	margin: 40px 0 0;
}

#slider .mask {
	position: relative;
	overflow: hidden;
	width: 980px;
	height: 400px;
}

#slider .mask .slides {
	width: 9999px;
	position: relative;
	overflow: hidden;
}

#slider .mask .slides .slide {
	float: left;
}

#slider .mask .slides .slide img {
	display: block;
}

#slider #slider_prev {
	
}

#slider #slider_prev,
#slider #slider_next {
	display: block;
	position: absolute;
	width: 72px;
	height: 72px;
	z-index: 3;
	cursor: pointer;
	top: 50%;
	margin-top: -36px;
}

#slider #slider_prev {
	left: 0;
	margin-left: -36px;
}

#slider #slider_next {
	right: 0;
	margin-right: -36px;
}

#slider #slider_prev .outer,
#slider #slider_next .outer {
	display: block;
	width: 72px;
	height: 72px;
	top: 50%;
	left: 50%;
	margin-top: -36px;
	margin-left: -36px;
	border-radius: 36px;
	background: rgba(153,153,153,0.1);
	position: absolute;
	overflow: hidden;
}

#slider #slider_prev .inner,
#slider #slider_next .inner {
	display: block;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	width: 43px;
	height: 43px;
	margin-left: -21px;
	margin-top: -21px;
	background: #aaa url(../images/layout/icons.png) 50% -600px;
	border-radius: 21px;
	z-index: 5;
}

#slider #slider_next .inner {
	background-position: 50% -700px;
}

#slider #slider_prev:hover .inner,
#slider #slider_next:hover .inner {
	background-color: #494949;
}

#slider #slider_prev:active .inner {
	background-position: 50% -650px;
}

#slider #slider_next:active .inner {
	background-position: 50% -750px;
}


/*--------------------------------------------------------------------------------------------
	Service
--------------------------------------------------------------------------------------------*/
#services {
text-align:left;
margin:30px 0px;
}

#services .service {
	width: 300px;
	float: left;
	margin-right: 25px;
	margin-bottom:50px;
	position: relative;
	overflow: visible !important;
}

#services .circle_holder {
	width: 280px;
/*	height: 300px;*/
	height: 260px;
	margin-bottom:20px;
}

#services .circle {
	top: 0;
	left: 0;
	width: 300px;
/*	height: 300px;*/
	height: 260px;
	position: relative;
	overflow: hidden; 
	background: #3a3a3a;
/*	border-radius: 160px;*/
	border-radius: 50px;
}

#services .circle .inner {
	top: 0;
	left: 0;
	width: 260px;
/*	height: 260px;*/
  	height: 220px;
	position: relative;
	overflow: hidden;
	margin:20px 0 0 20px;
	background: #2a2a2a url(../images/layout/service-bg.png);
/*	border-radius: 140px;*/
	border-radius: 40px;
	text-align: center;
	color: #fff;
}

#services .icon {
	width: 50px;
	height: 50px;
	margin: 55px auto 2px;
	background: url(../images/layout/icons.png) 50% 0 no-repeat;
}

#services .circle .inner h2 {
	margin: 0 0 12px;
	text-transform: uppercase;
}

#services .circle .inner p {
	font-size: 1.2em;
	margin-left:0px;
}

#services .icon {
	background-position: 50% 0;
	opacity: 0.7;
	transition: opacity 300ms ease 0s;
   -moz-transition: opacity 300ms ease 0s;
   -webkit-transition: opacity 300ms ease 0s;
   }

#services .service:hover .icon {
	background-position: 50% -50px;
	opacity: 1;
	transition: opacity 500ms ease 0s;
   -moz-transition: opacity 500ms ease 0s;
   -webkit-transition: opacity 500ms ease 0s;
}


#services ul.services li .service ul li {
    background: url("../images/layout/li.png") no-repeat scroll 0 10px transparent;
    display: block;
    padding-left: 20px;
	margin-left:35px;
}

#services .service ul li {
    background: url("../images/layout/li.png") no-repeat scroll 0 10px transparent;
    display: block;
    padding-left: 20px;
	margin-left:35px;
}

#services p{
	margin-left:35px;
}

#services p, #services .service ul li{
    color:#E1E1E1;
    opacity: 0.5;
	transition: opacity 500ms ease 0s;
   -moz-transition: opacity 500ms ease 0s;
   -webkit-transition: opacity 500ms ease 0s;
}

#services .service:hover p, #services .service:hover ul li {
	opacity: 1;
	transition: opacity 500ms ease 0s;
   -moz-transition: opacity 500ms ease 0s;
   -webkit-transition: opacity 500ms ease 0s;
}


/*--------------------------------------------------------------------------------------------
	Services - Dropdown
--------------------------------------------------------------------------------------------*/

.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 170px;
    margin: 0 auto;
    padding: 10px 13px;
	font-size:16px;

    /* Styles */
    background: #212121;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	z-index:9;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #ccc transparent;
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #212121;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #777;
    padding: 10px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #1e1e1e;
	text-shadow:none;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
    /*color: #57a9d9;*/
	color:#cccccc;
}

/* Active state */

.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #2a2a2a;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #ccc transparent;
}

.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}


/*--------------------------------------------------------------------------------------------
	Sitemap
--------------------------------------------------------------------------------------------*/
.sitemap ul.sitemap-parent li{
text-align:left;
}

.sitemap ul.sitemap-child li{
    background: url("../images/layout/li.png") no-repeat scroll 0 10px transparent;
    display: block;
    margin-left: 15px;
    padding-left: 20px;
}

/*--------------------------------------------------------------------------------------------
	Clients
--------------------------------------------------------------------------------------------*/
.dribbbles {
    list-style-type: none;
    margin: 0;
}

.dribbbles li .dribbble {
    margin: 0 0.6em !important;
    padding-bottom: 1.5em;
}


.dribbbles li {
    float: left;
    margin-top: 40px;
    width: 33%;
}

.dribbbles .dribbble-link {
    background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.02));
    display: block;
    margin: 0 !important;
    max-height: 278px;
    overflow: hidden;
    padding: 0 !important;
    transition: all 0.3s ease-in 0s;
}

.dribbbles .dribbble-link:hover {
    background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05));
    display: block;
    overflow: hidden;
    padding: 0 !important;
}

.dribbbles .dribbble-img img {
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 0 !important;
    max-height: 278px;
    max-width: 371px;
    padding: 0 !important;
    position: relative;
    z-index: -1;
}

.dribbbles li .dribbble-over {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 0.7em 0 1.5em;
}

.dribbbles .dribbble-over, .dribbbles em {
    color: #AAAAAA;
    display: block;
    font-size: 0.875em;
    font-style: normal !important;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    width: 100%;
}



/*--------------------------------------------------------------------------------------------
	Folio
--------------------------------------------------------------------------------------------*/
#works {
text-align:left;
margin:30px 0px;
}

#works .work {
	width: 300px;
	float: left;
	margin-right: 25px;
	margin-bottom:50px;
	position: relative;
	overflow: visible !important;
}

#works .circle_holder {
	width: 280px;
/*	height: 300px;*/
	height: 160px;
	margin-bottom:20px;
}

#works .circle {
	top: 0;
	left: 0;
	width: 300px;
/*	height: 300px;*/
	height: 160px;
	position: relative;
	overflow: hidden; 
	background: #3a3a3a;
/*	border-radius: 160px;*/
	border-radius: 50px;
}

#works .circle .inner {
	top: 0;
	left: 0;
	width: 260px;
/*	height: 260px;*/
  	height: 120px;
	position: relative;
	overflow: hidden;
	margin:20px 0 0 20px;
	background: #1a1a1a url(../images/layout/service-bg.png);
/*	border-radius: 140px;*/
	border-radius: 36px;
	text-align: center;
	color: #fff;
}
#works .circle .inner.bglight {
background: #8a8a8a;
}
#works .circle .inner img {
margin-top:20px;
}

/*--------------------------------------------------------------------------------------------
	Clients
--------------------------------------------------------------------------------------------*/

#works .work a {
	display: block;
	width: 230px;
	height: 75px;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-align:center;
	margin:auto;
}

#works .work a img {
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------------------------------------
	Start Project Home
--------------------------------------------------------------------------------------------*/

.start-project ul li {
display:inline-block;
}