body {
	font-family: Verdana, sans-serif;
}

/*-------------------------------------------    
  PRELOAD BAR
-------------------------------------------*/
#loadInfo {display: none; position: absolute; width: 100%; height: 100%; background: #000; text-align: center; z-index: 99999; padding: 100px 0 0 0;}
#statusBar {border: 1px solid #444; width: 300px; background: #000; margin: 0 auto 25px auto}
#status {background: url(../gfx/preloader-bar.png) 0 50% no-repeat; height: 8px; }

#textStatus { font-weight: 300; color: #BE8CF2;  }
#textStatus .numLoaded {font-family: Verdana, Arial, helvetica, sans-serif; color: #fff; font-size: 1.4em;}

/*-------------------------------------------    
  HEADER
-------------------------------------------*/
#masthead .logo {
	display: block; position: absolute; top: 0; z-index: 999; 
	-webkit-transition: padding-top .1s ease-in-out;
	-moz-transition: padding-top .1s ease-in-out;
	-0-transition: padding-top .1s ease-in-out;
	transition: padding-top .1s ease-in-out;
}
#masthead .logo:hover, #masthead .on {padding-top: 28px;}
#masthead .logo img {display: block; margin: 0 auto; max-width: 100%:}
#masthead .logo b {display: none; }
#masthead .logo span {display: block; text-align: center; text-transform: uppercase; font-size: 11px; color: #BE8CF2}


/*-------------------------------------------    
   INSIDE CONTAINER
-------------------------------------------*/
#inside-wrap {width: 100%; background: url(../gfx/visual/inside-wrap-bg.png) repeat-x}
body.expand #outer {margin: 0 0 30px 0;}

#primary {
	position: relative;width: 100%; max-width: 960px; margin: 0 auto; min-height: 550px;
}
#primary h1 {
	height: 117px; font-family: Verdana, Arial, helvetica, sans-serif; color: #fff; text-shadow: 6px 8px 0 rgba(0,0,0,.3); font-weight: 600;
	color: #fff; font-size: 5em; letter-spacing: normal; padding: 15px 0 0 0; 
	text-shadow: none;text-align: right;
}
#primary h1 span {font-weight: 300; display: block; color: #BE8CF2; font-size: .3em; letter-spacing: normal;}
#primary h1 span strong {font-weight: 300; text-transform: none}

#primary h1 i {font-style: normal; text-transform: none; font-size: .9em; font-weight: 800;}

body.serv.details #primary h1 {line-height: 1em;}
body.serv.details #primary h1 span {margin: 0; line-height: 20px}

#primary h2 {font-weight: 300; font-size: 1.6em}
body.details #primary h2 {font-size: 1.9em}
#primary h2 a {color: #fff;}


/* --- QUOTE --- */
body#quote #quote-form {padding: 25px 0; margin: 0 0 50px 0}


/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body.serv .section h2 {margin: 0 0 20px 0; text-shadow: 2px 2px 0 rgba(0,0,0,.5);}
body.serv .section h3 {font-size: 1.1em; margin: 0 0 5px; text-shadow: 1px 1px 0 #000; font-weight: 400}
body.serv .section .figure {display: block; width: 20%; float: left;}
body.serv .section .article { width: 80%; float: right; display: block; padding: 20px 0 0 0}
body.serv .section .article img {float: right; margin-left: 15px; max-width: 100%;}
body#portfolio.serv .section .article { width: 100%; float: right; display: block; padding: 20px 0 0 0}



/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#featured {text-align: center;}
#featured h1, #featured h2 {
	font-family: Verdana; color: #fff; text-align: center; text-transform: uppercase; font-size: 1em;
}
#featured h1 b,#featured h2 b {font-size: 1.1em; color: #fff; font-weight: 400}
#featured h1 strong,#featured h2 strong {
	font-weight: 800; display: block; margin: 0 0 10px 0;
	text-shadow: 6px 8px 0 rgba(0,0,0,.3);
}

#featured span {font-size: 0.9em; display: block; color: #BE8CF2; font-weight: 400; letter-spacing: 1px;}

.panel2 {width: 100%; height: 100%; position: relative;}


.designSlide {display: block}

.panel {width: 100%; height: 100%; position: relative;}
.panel a, .cta {

	font-weight: 600;
	font-size: 1.1em; text-transform: uppercase; color: #fff; 
	background: #7127b8; display: inline-block; padding: 0 40px; line-height: 2.8em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6); margin: 0 0 50px 0;	font-size: 1.1em; padding: 0 40px; line-height: 2.8em;
		
	/* -- RADIUS -- */
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-o-border-radius: 18px;
	border-radius: 18px;
	
	/* -- SHADOW -- */
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	
	/* -- GRADIENT -- */
	
	background-image: linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -o-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(103,37,136)),
		color-stop(0, rgb(113,39,184))
	);
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.panel a:hover {
	color: #BE8CF2;
	background: #25242A;
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
	box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
}

.cta {
	font-size: .85em; padding: 0 15px; font-weight: 600;
	-webkit-transition: all .2s ease-in;
}
.cta:hover {
	background: rgba(0,0,0,.5); color: #BE8CF2;
	padding: 0 25px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}

.cta.big {font-size: 1.2em; padding: 0 25px; font-weight: 600}


/* --- /// DETAILS CTA //// ----- */
body.details .cta.big {position: absolute; top: 575px; right: 0; font-size: 1.1em; z-index: 999}




/* Control Nav */
#slidenav {width: 80px; position: absolute; top: 190px; text-align: center; left: 50%; margin-left: -40px; z-index: 99}
#slidenav a:first-child {margin: 0;}
#slidenav a {width: 13px; height: 13px; background: url(../gfx/visual/bg_control_nav_purple.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px; margin: 0 0 0 5px; display: inline-block; zoom: 1;}
#slidenav a:hover {background-position: 0 -13px;}
#slidenav .activeSlide {background-position: 0 -26px; cursor: default;}

#loading {display: block; width: 30px; height: 30px; position: absolute; top: 60px; left: 50%; margin-left: -10px;}

#gallery #slidenav {top: 675px; width: 500px; margin-left: -250px;}


/*-------------------------------------------    
  PORTFOLIO ICONS
-------------------------------------------*/
body#launch .pinfo .cta {font-size: .9em; padding: 0 20px}
body#launch .col ul {background: url(../gfx/visual/folio-icons.png) no-repeat 0 0;}



/*-------------------------------------------    
  PORTFOLIO BULLETS 
-------------------------------------------*/
body#launch #case-spots {display: none; width: 350px; position: absolute; top: 80px; left: 50%; margin-left: -175px; z-index: 9999;}
body#launch #case-spots li {display: block; width: 15px; height: 15px; float: left; margin: 0 5px; }
body#launch #case-spots li a {
	cursor: pointer;
	display: block; background: #000; width: 100%; height: 100%; text-indent: -999em; border: 1px solid #555;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-0-border-radius: 50px;
	border-radius: 50px;
}
body#launch #case-spots li a:hover,body#launch #case-spots li.active a {background: #65D1F0}


/* -- FOLIO PANEL -- */
.folio-panel {width: 100%; position: relative; left: 2000px;}


/* Direction Nav */
#next {width: 52px; height: 101px; margin: 0; display: block; background: url(../gfx/visual/bg_direction_nav.png) no-repeat -52px 0; position: absolute; top: 280px; right: 10px; cursor: pointer; text-indent: -9999px; z-index: 999}
#next:hover {background-position: -52px -101px}

#prev {width: 52px; height: 101px; margin: 0; display: block; background: url(../gfx/visual/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 280px; left: 10px; cursor: pointer; text-indent: -9999px; z-index: 999}
#prev:hover {background-position: 0 -101px}

#gallery #next, #gallery #prev {top: 340px;}




/*-------------------------------------------    
   HOME - SERVICES
-------------------------------------------*/
#services p {padding: 0 .5em; margin: 0 0 15px 0}
#services h2 {font-size: 1.1em; color: #fff; margin: 0 0 18px; font-weight: 300; }
#services h2 strong {color: #BE8CF2}
#services h2 a {color: #fff;}

body#home .serv-icon {
	width: 98px; height: 98px; 
}

.serv-icon {
	width: 98px; height: 98px; 
	background:none; float: left;
}

.serv-icon a {

	display: block; height: 98px; width: 98px; text-indent: -999em;
	margin: 0 auto 0 auto;
	
}
.serv-icon .icon-web-design { background: url(../gfx/visual/portrait1.png) no-repeat; padding: 0;}

.serv-icon .icon-web-dev { background: url(../gfx/visual/portrait2.png) no-repeat; padding: 0;}

.serv-icon .icon-mobile {background: url(../gfx/visual/portrait3.png) no-repeat; padding: 0;}

.serv-icon .icon-multi {background: url(../gfx/visual/portrait4.png) no-repeat; padding: 0;}

.serv-icon .icon-cms {background-position: -300px 3px;}

.serv-icon .icon-seo {background-position: -375px 3px;}

.serv-icon .icon-stats {background-position: -450px 3px;}

.serv-icon .icon-ecommerce {background-position: -525px 3px;}

.serv-cta {
	font-size: 10px;
	background: url(../gfx/visual/cta-arrow.png) no-repeat 0 50%; text-transform: uppercase; 
	padding: 0 0 0 15px; letter-spacing: 1px;
}



/*-------------------------------------------    
   CONTENT STYLES
-------------------------------------------*/
.content h2 {font-size: 1.9em}
.content h3 {color: #BE8CF2; font-weight: 300;}

.content p {margin: 0 0 30px 0; line-height: 2em}
body.serv .content p {line-height: 1.7em;}

.content .cta {margin: 0 0 85px 0}






/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
	width: 100%; 
    border-bottom: 1px solid #175A7F; 
	margin: 0;
	-webkit-box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
	-moz-box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
	-o-box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
	box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
}
#container {
	padding: 35px 0 0 0;
	width: 100%; max-width: 960px; margin: 0 auto;
	color: #fff;
	position: relative;
}
#container .cta {margin: 0;}
#container img {max-width: 100%;}


/* --- STYLES --- */
#container h2,#container h3 {
	font-size: 1.8em; margin: 0 0 18px;
	text-shadow: 3px 3px 2px rgba(0,0,0,.3); letter-spacing: -1px;
	font-weight: 600;
}

h2 strong, h3 strong {color: #BE8CF2; font-weight: 600}
#container h2 b, #container h3 b {font-weight: 600}

#container h4 {margin: 0 0 5px 0; font-size: 1.1em; color: #66DFFF; font-weight: 300;}
#container p {
	font-size: 1em; line-height: 1.8em;
	margin: 0 0 25px 0;
	color: rgba(255,255,255,1);
}
#about .trooper {position: absolute; bottom: -6px; right: 0; z-index: 999; max-width: 100%;}


/*-------------------------------------------    
  HOME TABS
-------------------------------------------*/
#tab-container {width: 100%; margin: 0; min-height: 320px; border: 1px; padding: 0;}

aside .tabs {width: 53.125%; position: absolute; top: 0; right: 0;}
aside .tabs li {display: block; float: left; width: 30.1960784%;}
aside .tabs li a {
	font-weight: 400;
	display: block; height: 147px; width: 100%;
	text-align: center; text-transform: uppercase; 
	color: #fff; font-size: 1.1em;
	-webkit-transition: background-position .3s ease-in-out;	
 	-moz-transition: background-position .3s ease-in-out;	
 	-o-transition: background-position .3s ease-in-out;
 	transition: background-position .3s ease-in-out;
}
aside .tabs li a:hover, aside .tabs li.on a {background-position: 50% 0;}
aside .tabs li a img {padding: 12px 0 0 0; margin: 0}
aside .tabs li a span {display: block;}
aside .tabs li a span b {display: block; clear: both;}








/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#prewrap {width: 100%; background: rgba(0,0,0,.3); border-bottom: 1px solid #4D4E52; margin: 0 0 25px}
#prefooter {width: 100%; max-width: 960px; margin: 0 auto; padding: 35px 0}


aside blockquote .author {display: block; padding: 40px 0 0 0; font-size: 12px;background: url(../gfx/visual/quote-arrow.png) no-repeat 25px 0; position: relative; top: -1px}
aside blockquote p {background: url(../gfx/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.5); border: 1px solid #444; padding: 15px 25px; font-size: 1.1em; color: #fff; line-height: 1.8em; text-indent: 2em;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	
}


/*-------------------------------------------    
   BLOG POSTS
-------------------------------------------
.blog-post img {float: left; border: 1px solid #666; margin: 0 25px 0 0;}
.blog-post h2 {font-size: 1.8em; line-height: 1.2em; margin: 0 0 20px; font-weight: 300}

body#blog .blog-post h2 {font-family: 'Ubuntu Condensed', Verdana, Arial, helvetica, sans-serif; font-size: 2.5em; font-weight: 300;}
body#blog .blog-post h2 a {color: #cfb2ed}
body#blog .blog-post h2 a:hover {color: #fff}

body.details .blog-post img { margin: 0 25px 20px 0 }


/* ---- FULL POST STYLES ----- 
body#blog.full-post section {padding: 30px 0 0 0}
body#blog.full-post .blog-post img {margin: 0 0 45px 0; border: 1px solid #666; max-width: 100%; float: none;}


body#blog.full-post .blog-post .result-img {float: left; margin: 0 25px 40px 0;}

body#blog.full-post .blog-post h1 {
	font-family: 'Ubuntu Condensed', Arial, helvetica, sans-serif; text-align: left; 
	line-height: 1.1em; font-size: 3.5em; font-weight: normal; text-transform: uppercase; color: #fff
}
body#blog.full-post .blog-post h2 {
	font-family: 'Ubuntu Condensed', Verdana, Arial, sans-serif; font-size: 2em; 
	background: url(../gfx/visual/h2-bg.png) repeat-x 0 100%; padding: 0 0 15px 0; 
	text-transform: uppercase; color: #cfb2ed
}
body#blog.full-post .blog-post h3 {
	font-family: 'Ubuntu Condensed', Verdana, Arial, sans-serif; font-size: 1.6em; color: #cfb2ed; 
	margin: 0; font-weight: 300;
}
body#blog.full-post .blog-post h4 {
	font-family: 'Ubuntu Condensed', Verdana, Arial, sans-serif; color: #fff; margin: 0; 
	text-transform: none; font-size: 1.3em; font-weight: normal;
}
body#blog.full-post .blog-post h5 {
	font-family: Verdana, Arial, sans-serif; color: #cfb2ed; margin: 0; 
	text-transform: normal; font-weight: 300; font-size: 1em;
}

body#blog.full-post .blog-post blockquote {
	float: right; width: 25%; background: #000; padding: 25px; 
	margin: 0 0 25px 25px; font-style: italic; font-size: 1.2em; line-height: 1.8em; color: #fff;
}
body#blog.full-post .blog-post blockquote p {margin: 0}


/* --- POST LIST --- 
body#blog.full-post .blog-post ul {margin: 0 0 35px 50px}
body#blog.full-post .blog-post  ul li {font-size: 1.1em; color: #fff; margin: 0 0 20px 0; background: url(../gfx/visual/cta-arrow.png) no-repeat 0 5px; padding: 0 0 0 20px; line-height: 1.7em}
body#blog.full-post .blog-post  ul li strong {color: #cfb2ed;}
body#blog.full-post .post {margin: 0 0 55px;}
body#blog.full-post #search {left: auto; right: 0;width: 230px;}
body#blog.full-post aside {padding: 140px 0 0 0}
body#blog.full-post .blog-post {padding: 20px 40px 30px 40px }

/* --- SOCIAL SHARE --- 
#social_btn {margin: 0 0 15px}
body#blog.full-post .blog-post #social_btn .share {margin: 0}
body#blog.full-post .blog-post #social_btn .share li {list-style: none; padding: 0; margin: 0; float: left; width: 100px; background: none;}


/* -- SEARCH RESULTS --- 
body#blog.results .post {margin: 0 0 10px 0}
body#blog.results .blog-post {background: #000;}

/* -- NO RESULTS --- 
body#blog.noresult #search {width: 100%; position: relative; top: -20px; left: 0; right: auto; margin: 0 0 20px;}
body#blog.noresult .blog-post {text-align: center;}
body#blog.noresult .blog-post h1 {text-align: center; font-size: 4em; margin: 0 0 10px}
	
body#blog .feed_sub {line-height: 1em; margin: 0 0 25px 0;  padding: 0 0 25px; border-bottom: 1px solid #333;}
body#blog .feed_sub a {color: #fff; display: block;}	
body#blog .feed_sub span {display: block; font-size: .5em; text-transform: uppercase; color: #cfb2ed}
body#blog .feed_sub img {margin: 0 10px 0 0; float: left;}


/* ---- SUMMARY POST STYLES ----- 
.blog-post p {line-height: 1.8em; margin: 0 0 25px 0}
.blog-post .post {color: #fff;}
.blog-post .post i {padding: 0 1.5%;}
.blog-post .post {text-transform: uppercase; font-size: 11px; display: block; margin: 0 0 10px;}
.blog-post .post .cta {margin: 0 25px 0 0; font-size: 1.2em;}
.blog-post .cta {line-height: 2em; font-size: 10px; margin: 0;}



/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav dt {margin: 0 0 15px 0; font-size: 16px; font-weight: 400}
#foot-nav dd {margin: 0 0 7px 0;}

#foot-nav dd a {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#foot-nav dd a:hover {padding: 0 0 0 10px;}

/*-------------------------------------------    
   FOOTER
-------------------------------------------*/
#footwrap {width: 100%; max-width: 960px; margin: 0 auto;}
#footer p {margin: 0 0 15px}

.social li {display: inline-block; float: left; width: 36px; height: 30px;}
.social li a {
	display: block; text-indent: -999em; width: 100%; height: 100%; 
	background: url(../gfx/visual/social.png) no-repeat; opacity: 0.6;
	
	-webkit-transition: opacity .2s ease-in;
	-moz-transition: opacity .2s ease-in;
	-o-transition: opacity .2s ease-in;
	transition: opacity .2s ease-in;
}
.social li a:hover {opacity: 1.0;}
.social .twitter a {background-position: 0 -60px;}
.social .facebook a {background-position: 0 -90px;}
.social .rss a {background-position: 0 -30px;}


body#angajari #footer h2 {display: none;}



/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
#navigation {width: 100%; height: 150px; position: absolute; top: 0; left: 0; z-index: 99} 
#navigation ul {width: 100%; height: 100%; position: relative;}
#navigation ul li {
	width: 120px; height: 100%; position: absolute; top: 0; cursor: pointer;
	-webkit-transition: background-position .3s ease-in-out;	
 	-moz-transition: background-position .3s ease-in-out;	
 	-o-transition: background-position .3s ease-in-out;
 	transition: background-position .3s ease-in-out;
}
#navigation ul li a {
	line-height: 1.3em;
	display: block; width: 100%; height: 100%; text-align: center; color: #fff; 
	font-size: 1.1em; text-transform: uppercase;
	font-weight: 300;
}


#navigation ul li a strong, #navigation ul li a b {display: block; font-size: 0.7em; letter-spacing: 1px; color: #cfb2ed; font-weight: 300} 
#navigation ul li a span {display: block; padding: 80px 0 0 0;
	-webkit-transition: background-position .3s ease-in-out .2s;	
 	-moz-transition: background-position .3s ease-in-out .2s;	
 	-o-transition: background-position .3s ease-in-out .2s;
 	transition: background-position .3s ease-in-out .2s;
}





/*-------------------------------------------    
  REQUEST QUOTE FORM
-------------------------------------------*/
body#angajari #quote-form {
    margin: 0 0 50px;
    padding: 25px 0;
	height: 403px;
}
#quote-form .col {float: left; width: 270px; margin: 0 0 0 16px;}
#quote-form .col.info {width: 200px; margin: 0;}
#quote-form button {font-family: Verdana; font-weight: 600; width: 210px; margin: 0; float: right;}


/* -- QUOTE PAGE --- */
body#angajari #quote-form .col {float: left; width: 28.125%; margin: 0 0 0 36px;}
body#angajari #quote-form .col.info {width: 30%; margin: 0;}
body#angajari #quote-form .submit {width: 35%; margin: 0; float: right;}

@media screen and (max-width: 768px) {

	body#angajari h1 {margin: 0 0 35px 0}
	body#angajari #footer h2 {display: none;}

	body#angajari #quote-form {width: 80%; margin: 0 auto 45px auto;}
	body#angajari #quote-form .col {float: none; width: 100%; margin: 0}
	body#angajari #quote-form .col.info {float: none; width: 100%; margin: 0;}
	body#angajari #quote-form .submit {float: none; width: 100%; margin: 0;}
	body#angajari #quote-form textarea, body#angajari #quote-form input {width: 95%;}
	body#angajari button {margin: 0 auto; float: none;}
}


#quote-form fieldset {margin: 0 0 25px}
#quote-form fieldset label {
	font-size: .9em; display: block;
	margin: 0 0 10px 0; text-transform: uppercase;
}
#quote-form input, #quote-form textarea {
	width: 93%; background: rgba(0,0,0,1); background: #000; border: 1px solid #333; padding: 12px 10px;
	font-size: 1em; color: #fff;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	border-radius: 10px;
}
#quote-form input:hover, #quote-form textarea:hover, #quote-form input:focus, #quote-form textarea:focus {
	border: 1px solid #555;
}
#quote-form textarea {height: 195px;}

/* -- CUSTOM SELECT --- */
#quote-form fieldset select {width: 50%; position: absolute; top: -550px; right: 0; z-index: 9999; text-transform: none}
.type-select {left: 0;}



/*-------------------------------------------    
  SELECT DROP DOWNS
-------------------------------------------*/
.dropdown {width: 100%;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color: #fff; text-decoration:none; outline:none; cursor: pointer; }
.dropdown a:hover { }
.dropdown:hover > dt a { border: 1px solid #555;}
.dropdown:hover > dd ul {
	border-left: 1px solid #555; border-right: 1px solid #555; border-bottom: 1px solid #555;
}
.dropdown dt a {
	background: url(../gfx/visual/drop-arrow.gif) no-repeat 98% 50% #000; 
	display:block; border:1px solid #333; width: 100%; padding: 0; height: 40px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	border-radius: 10px; line-height: 42px; 
	font-size: 12px; text-indent: 15px; text-transform: none;color: #555;
	font-weight: 300;
	color: white;
}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { 
	background: #000 none repeat scroll 0 0; color: #555; display:none; top: -10px; left: 0; padding:5px 0px; position:absolute; width: 100%; text-transform: none;
    list-style:none; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333;
    z-index: 99999;
}
.dropdown span.value { display:none;}
.dropdown dd ul li:first-child {display: none;}
.dropdown dd ul li a { padding:5px 15px; display:block; font-size: 12px;color: #555;}
.dropdown dd ul li a:hover { background: #222; color: #fff}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}



#quote-form button {
	float: left;
	width: 200px; font-size: 1.1em; 
	text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #7127b8; display: inline-block; padding: 0; line-height: 2.2em; text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; 
		
	/* -- RADIUS -- */
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-o-border-radius: 18px;
	border-radius: 18px;
	
	/* -- SHADOW -- */
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	
	/* -- GRADIENT -- */
	
	background-image: linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -o-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(103,37,136) 100%, rgb(113,39,184) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(103,37,136)),
		color-stop(0, rgb(113,39,184))
	);
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

}
#quote-form button:hover {
	color: #BE8CF2;
	background: rgba(0,0,0,.5); color: #BE8CF2;
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}


/* these are the various classes used to style the demo error fields */
	.errorField {
	  background-color: #990000;
	  color: white;
	}
	.errorFieldDemo2 {
	  background-color: #ffffcc;
	  color: #990000;
	}
	.errorFieldDemo5 {
	  background-color: #ffffcc;
	  border: 1px solid #aa0000;
	  color: #aa0000;
	}
	.errorFieldDemo6 {
	  background-color: green;
	  color: #yellow;
	}



/*-------------------------------------------    
  JOURNEY
-------------------------------------------
body#blog #primary {padding: 25px 0}
body#blog section {width: 72.9166667%; float: left;}
body#blog aside {width: 23.9583333%; float: right;}

body#blog section #featPost {padding: 10px;}
body#blog section #featPost .special {
	color: #fff;
	padding: 25px 25px 35px 25px;
	
	/* -- GRADIENT -- 
	background-image: linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -o-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -moz-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -webkit-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -ms-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.02, rgb(8,47,82)),
		color-stop(0.92, rgb(44,120,158))
	);
	
}
body#blog section #featPost .special h2 a {color: #fff;text-shadow: 1px 1px 0px #000}
body#blog section #featPost .special img {border: 6px solid #000;}


body#blog section .blog-post {
	padding: 30px;
	background-color: rgba(0,0,0,0.30); margin: 0 0 25px; border: 1px solid #333;
	 
}


body#blog aside h3 {margin: 0 0 25px 0; font-size: 1.5em; font-weight: 300;}
body#blog aside ul {margin: 0 0 45px}
body#blog aside ul li {margin: 0 0 10px; background: url(../gfx/visual/cta-arrow.png) no-repeat 0 3px; padding: 0 0 0 15px}
body#blog aside ul li a {color: #999}
body#blog aside ul li a:hover {color: #fff;}

body#blog aside ol {margin: 0 0 45px}
body#blog aside ol li {margin: 0 0 30px}
body#blog aside ol li time {font-size: 11px; display: block; margin:0 0 5px}
body#blog aside ol li a {font-size: 1.1em; color: #fff;}
body#blog aside ol li a:hover {color: #BE8CF2;}

/*-------------------------------------------    
  SEARCH
-------------------------------------------*/
#search {position: absolute; top: 50px; left: 0; height: 36px; width: 250px; }
#search form {width: 100%; position: relative; margin: 0; padding: 0;}
#search label {position: absolute; top: 0; left: 0; height: 36px; line-height: 36px; z-index: 999; text-indent: 10px}
#search input {
	width: 90%; height: 36px;
	margin: 0; padding: 0 10px;
	background: #000; border: 1px solid #333;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	position: relative; top: 0; left: 0;
	color: #fff;
}
#search button {
	position: absolute; right: -1px; top: 1px; display: block; height: 36px; width: 45px;
	border: none;

	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	-o-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-o-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	
	/* -- GRADIENT -- */
	background: #139BC3;
	background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(16,167,213)),
		color-stop(0, rgb(13,121,164))
	);
	
}
#search button span {display: block; width: 33px; height: 32px; background: url(../gfx/visual/search-icon.png) no-repeat 0 0; text-indent: -999em; margin: 0 auto;}


/*-------------------------------------------    
  MAP
-------------------------------------------*/
body#angajari h1 {margin: 0 0 50px 0}

#map {height: 340px; background: rgba(0,0,0,.5); padding: 15px; margin: 0 0 50px}
#map #gmap {
        margin: 0 auto;
        border: 1px dashed #C0C0C0;
        width: 100%;
        height: 340px;
}



#info {width: 36.4583333%; float: left;}
body#angajari #primary h2 {font-size: 1.1em; margin: 0 0 30px}
body#angajari #primary h2 strong {display: block; font-size: 1.6em}


#info ul li {display: block; height: 42px; margin: 0 0 25px; padding: 0 0 0 60px; color: #fff; background: url(../gfx/visual/side-social.png) no-repeat 0 0}
#info ul .email-icon {background-position: 0 0}
#info ul .skype-icon {background-position: 0 -42px}
#info ul .twitter-icon {background-position: 0 -84px}
#info ul .face-icon {background-position: 0 -126px}



#form {width: 34%; float: right;}


#form fieldset {margin: 0 0 15px; position: relative;}
#form fieldset label {
	font-size: 1em; display: block;
	margin: 0; position: absolute; top: 10px; left: 10px;
}
#form input, #form textarea {
	width: 95%; background: rgba(0,0,0,0.5); 
	border: none; padding: 12px 10px;
	font-size: 1em; color: #fff;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	border-radius: 10px;
	
	-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	-moz-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	-o-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	
}
#form textarea {height: 100px;}


#form button {
	font-family: Verdana; font-weight: 600;
	float: right; font-size: 1em; 
	text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #14B1DE; display: inline-block; padding: 0 25px; line-height: 2.2em; text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; 
		
	/* -- RADIUS -- */
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-o-border-radius: 18px;
	border-radius: 18px;
	
	/* -- SHADOW -- */
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	
	/* -- GRADIENT -- */
	
	background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(16,167,213)),
		color-stop(0, rgb(13,121,164))
	);
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

}
#form button:hover {
	color: #BE8CF2;
	background: rgba(0,0,0,.5); color: #BE8CF2;
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}


/* ---- VALIDATE FORM ------ */
body#quote .pop {
	background: none;
	font-size: 2em;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.pop {
	text-align: left;
	padding: 10px;
	font-size: 1em;
	color: #BE8CF2;
	position: absolute;
	display: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: -1px 1px 2px #000;
	-moz-box-shadow: -1px 1px 2px #000;
	box-shadow: -1px 1px 2px #000;
	margin-right: -20px;
}

.error {
	background: black;
	border: 0;

}

.correct {
	background: transparent;
	border: 0; color: #24f333; font-size: 1em; padding: 20px 0 0;
	box-shadow: none;
}

.wrong {
	font-weight: bold;
	color: #e90000;
}

.normal {
	font-weight: normal;
	color: #222;
}



/*-------------------------------------------    
  IGD ICON
-------------------------------------------*/
.igd-icon {
	position: absolute; right: 0;	
	display: block; width: 136px; height: 36px; background: url(../gfx/visual/igd-icon.png) no-repeat 0 0;
	opacity: 0.5; text-indent: -999em;
	-webkit-transition: opacity .2s ease-in;
	-moz-transition: opacity .2s ease-in;
	-o-transition: opacity .2s ease-in;
	transition: opacity .2s ease-in;
}
.igd-icon:hover {opacity: 1.0;}



/*-------------------------------------------    
  NOMINATION
-------------------------------------------*/
#awwwards {
	display: block; width: 69px; height: 105px;
	text-indent: -9999em; background: url(../gfx/awwards.png) no-repeat 0 0; 
	position: fixed; top: 750px; left: 0; z-index: 99999;
}
#cssda {
	display: block; width: 69px; height: 164px;
	text-indent: -9999em; background: url(../gfx/cssda.png) no-repeat 0 0; 
	position: fixed; top: 700px; right: 0; z-index: 99999;
}
#cssawards {
	display: block; width: 115px; height: 115px;
	text-indent: -9999em; background: url(../gfx/cssawards.png) no-repeat 0 0; 
	position: fixed; top: 0; left: 0; z-index: 99999;
}
#csswinner {
	display: block; width: 81px; height: 59px;
	text-indent: -9999em; background: url(../gfx/css-winner.png) no-repeat 0 0; 
	position: fixed; top: 30px; right: 0; z-index: 99999;
}
#response {display: none; margin-top: 15px;}
#graybutton {
	position: absolute;
	background: url(../gfx/visual/loader.gif) top center no-repeat rgba(0,0,0,0.8);
	display: none;
	width: 200px;
	height: 32px;
	border-radius: 20px;
}