/* Doctype Personna - Themeforest.net vCard Template
 * Copyright 2012, Jan O. Waldeck (jwaldeck.com)
 * www.doctype-themes.com
 * http://themeforest.net/user/doctypemedia
 * 11/2012
 */

/* Website Variables
 * -------------------------------------------------------------------------------------- 
 * ====================================================================================== */

/* Green Color Example
@primary-color: #556a63;
@secondary-color: #859d95;
@contrast-color: #8d3c39;

@primary-title: #8d3c39;
@secondary-title: #556a63;*/

/* Corona Color Example
@primary-color: #0f2e4a;
@secondary-color: #164875;
@contrast-color: #f3a600;

@primary-title: #0f2e4a;
@secondary-title: #164875;*/

/* Black and Yellow Yellow Color Example
@primary-color: #1d1d1d;
@secondary-color: #000;
@contrast-color: #ffcd00;

@primary-title: #000;
@secondary-title: #717171;*/

@primary-color: #3669B3;
@secondary-color: #2353b3;
@contrast-color: #0f8fcf;

@primary-title: #3669B3;
@secondary-title: #3a728b;

@primary-color-light: lighten(@primary-color, 10%);

@light-text: #fff;
@dark-text: #000;
@grey: #717171;
@dark-grey: #404040;

@site_font: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
@secondary_site_font: 'PT Serif', 'Georgia', 'Times', sans-serif;

/* Table of Content
==================================================
	#Site Styles (~line 66)
	#Menu (~line 332)
	#Profile Settings (~line 404)
	#about_us Settings (~line 431)
	#about_us Settings (~line 431)
  #Resumé Settings (~line 556)
  #Contact Settings (~line 633)
  #Style Overrides (~line 704)
  #Media Queries (~line 716)
  
  

/* #Site Styles
================================================== */

body{
  background-color: @secondary-color;
  font-family: @site_font;
}
img {
width: 100%;
height: auto;
}


p {
  line-height: 1.5em;
   margin: 5px 0 10px 0; 
}
.hidden {
  display: none;
}

hr.sections { border: solid #ddd; border-width: 0; clear: both; margin: 30px 0; height: 10px;background: transparent url(../images/hr-sections.png) center center repeat; }
hr { margin: 20px 0; }


a, a:visited {
  color: @contrast-color;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out; }
a > * {
  color: #3a3a3a;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out; }

  
h1, h2, h3, h4 {
  font-family: @site_font;
  color: @primary-title;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;
  letter-spacing: -2px;
  line-height: 0.9em;
}  
h2{
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 20px 0;
  
}

h3, h4{
  font-family: @secondary_site_font;
  color: @secondary-title;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: normal;
}
h4 {
  font-family: @site_font;
  font-size: 18px;
  display: block;
  line-height: .65em;
  padding: 0 0 20px 0;
}

#header{
  background: transparent url(../images/header-bg-glow.png) center top no-repeat;
  height: 164px;
  background-color: @primary-color;
  position: relative;
}


#logo {
  float: left;
  margin: 40px 0 0 0;
  text-transform: uppercase;
  text-align: left;
  display: none;
  a {
    font-size: 32px;
    color: @light-text;
    font-weight: 600;
    padding: 0 0 8px 0;
    display: block;
  }
  .slogan{
    font-size: 14px;
    color: @light-text;
    font-weight: 200;
  }
}

#socials {
  position: absolute;
  top: 50px;
    a {
    font-size: 32px;
    color: @light-text;
    font-weight: 600;
    padding: 0 0 8px 0;
    display: block;
  }
 
  }

#socials a.facebook, #socials a.google, #socials a.twitter, #socials a.linkedin, #socials a.dribble, #socials a.deviantart, #socials a.flickr, #socials a.skype {
    display: block;
    text-indent: -5000px;
    width: 25px;
    height: 25px;
    padding: 0;
    float: left;
    margin: 0 6px 0 0;
    background: @primary-color-light url(../images/site-sprites.png) no-repeat 0 0; 
    }

#socials a.facebook {
    background-image: url(../images/site-sprites.png) no-repeat 0 0;
    &:hover {
    background-color: #3B5998;
    }
}
#socials a.google {
    background-image: url(../images/site-sprites.png) no-repeat; 
    background-position: -25px 0;
    &:hover {
    background-color: #dc4d32;
    }
}
#socials a.twitter {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -50px 0;
    &:hover {
    background-color: #4ea1e0;
    }
}
#socials a.linkedin {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -75px 0;
    &:hover {
    background-color: #0071b5;
    }
}
#socials a.dribble {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -100px 0;
    &:hover {
    background-color: #c6386d;
    }
}
#socials a.deviantart {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -125px 0;
    &:hover {
    background-color: #b8cb46;
    }
}
#socials a.flickr {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -150px 0;
    &:hover {
    background-color: #fe1a8f;
    }
}
#socials a.skype {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -175px 0;
    &:hover {
    background-color: #00bef3;
    }
}

#content {
   background-color: #f9f9f9;
  border-bottom: 10px solid @primary-color;
  border-top: 10px solid @secondary-color;
  padding: 15px 0 15px 0;
}


#loading {
  background: transparent url(../images/ajax-loader.gif) center center no-repeat;
  width: 100%;
  text-align: center;
  height: 200px;
}
#index{
    padding: 0px 0;
    height: auto;
    margin: 0 auto;
}

#about_us, #login, #contact {
    padding: 25px 0;
    height: auto;
    margin: 0 auto;
}
.menu,#index, #index, #about_us, #login, #contact {
  display:none;
}

dl{
  line-height: 1.2em;
  }

dt {
  font-weight: 600;
  margin: 8px 0 0 0;
}

#style-switcher {
  display: none;
	position:absolute;
	right:0;
	top:200px;
	width:25px;
	padding:15px 20px 0 10px;
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 0 4px 4px 0;
	background: #202020 url(../images/style-switcher-label.png) center right no-repeat;
	}
#style-switcher ul {
  margin: 0;
  padding: 0;
}
#style-switcher ul li img{
	border:1px solid #FFF;
	}


#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(../images/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

#footer {
  background: transparent url(../images/footer-bg-glow.png) center top no-repeat;
  min-height: 180px;
  font-size: 12px;
  padding: 20px 0;
  z-index: 10000;
}
  
#footer p {
  color: @light-text;
  text-transform: uppercase;
  text-align:right;
}
  
#footer p strong {
    color: @light-text;
    font-weight: 600;
}


/* ==================================================
   #Menu
================================================== */

.menu {
	top: 0;
	height: 174px;
	position:absolute;
	width: 400px;
	left: 50%;
}

.responsive-nav {
  height: 34px;
  width: 100%;
  padding: 5px;
  z-index: 200;
  float: left;
  margin-top: 7px;
  margin: 5px 0;
  clear: both;
  position: relative;
  display: none;
}
  
.etabs {
	z-index:100;
}
.etabs li {
  float: left;
  margin-right: 15px;
  
}
.etabs li > a {
	width:80px;
	height: 174px;
	line-height: 275px;
	display:block;
	background-repeat:no-repeat;
	font-size:16px;
	text-align:center;
	color: #fff;
	text-decoration: none;

}
.etabs li.active {
  background: @contrast-color url('../images/tab-hover.png') center bottom no-repeat;
  position: relative;
  overflow: show;
	a{
	 color:#fff;
	}
}

.etabs li.active .tab-profile {
	background-position: 0 0;
}
.etabs li.active .tab-portfolio {
	background-position: -80px 0;
}
.etabs li.active .tab-resume {
	background-position:-160px 0;
}
.etabs li.active .tab-contact {
	background-position:-240px 0;
}


/* ==================================================
   #Profile Settings
================================================== */
#index #content { background-color:#F90;}

#index img {
	width: 100%;
	margin-bottom:-20px;

}

#index h1 {
margin: 5px 0 13px 0;
}
#index h3 {
margin: -5px 0 22px 0;
color: @contrast-color;
}
  

#index dt {
  color: @secondary-title;
  margin: 8px 0 -1px 0;
  font-size: 18px;
  font-weight: 200;
}
#index dd {
  font-family: @secondary_site_font;
  margin-bottom: 10px;
}

#index .avatar {
  background: transparent url(../images/profile-bg-avatar.png);
  width: 350px;
  height: 310px;
  }
  
#index .avatar img{
  padding: 28px 0 0 26px; 
  }
.with-margin{
  margin-top: 10px;
}

dl.personal{
  padding-left: 30px;
  background: transparent url(../images/left-stripes.png) left top repeat-y;
  color: @dark-grey;
  line-height: 2em;
}
dl.personal a {
  color: @dark-grey;
}
  
/* ==================================================
   #about_us Settings
================================================== */  



/* Filter menu */
#portfolio-filter {
	overflow:hidden;
	padding-bottom: 35px;
	clear: both;
}
#portfolio-filter a {
text-decoration: none;
}
#portfolio-filter li a {
	float:left;
	margin-right:14px;
	color:#fff;
	background-color: @grey;
	padding:6px;
	margin-bottom:5px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
#portfolio-filter li a:hover {
	background-color: @contrast-color;
}
#portfolio-filter li a.current {
	background-color: @contrast-color;
}

/* Images list */
#portfolio-list {
width: 960px;
clear: both;
padding: 0;
margin: 0;
}

#portfolio-list li {
	float: left;
	padding: 5px;
	margin-right:32px;
	text-align:center;
	background-color:#fff;
	border-bottom:1px solid #e5e5e5;
	height:290px;
	margin-bottom:30px;
	width:180px;

}
#portfolio-list li:nth-child(4n+4) {
  margin-right: 0;}


#portfolio-list li:hover {
	border-bottom:4px solid @primary-color;

}
#portfolio-list img {
	background-color:#FFF;
	height:210px; 
	width:180px;
}

#portfolio-list li .title {
	font-size:16px;
	margin-top:10px;
	font-weight: 600;
	color: @contrast-color;
	letter-spacing: -1px;
}
#portfolio-list li:hover .title {
	color:@dark-text;
}
#portfolio-list li .category {
	font-size:12px;
	color:#999;
	letter-spacing: 0;
	margin: -20px 0 5px 0;
	display: block;
}

#project img{
  margin: 10px 0;
}

#portfolio-list a.website{
	margin: 0 auto;
	color:#fff;
	background-color: @contrast-color;
	padding:2px 4px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	font-size: 10px;

}

/*-------------------------------------------------------*/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope, .isotope .isotope-item {/* change duration value to whatever you like */
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property:-moz-transform, opacity;
transition-property:transform, opacity;
}

/* ==================================================
   #Resumé Settings
================================================== */  

#login .year {
  text-align: center;
  color: @grey;
  border: 1px solid #e7e7e7;
  background-color: #f8f8f8;
  margin: 2px 0 10px 0;
  padding: 2px 4px;
}

#login.container h3 {
  margin: 4px 0 0 0;
}
#login h4 {
  color: @contrast-color;
  margin: -20px 0 10px 0;
}

.side {
  margin-top: -16px;
}

#login .side h2 {
  font-size: 20px;
  margin-top: 20px;
  font-weight: 200;
  letter-spacing: 0;
}
#login .skills {
  padding-left: 30px;
  background: transparent url(../images/left-stripes.png) left top repeat-y;
  margin-bottom: 50px;
}

.rated1, .rated2, .rated3, .rated4, .rated5 {
  background-image:url(images/rated.png);
	background-position: 0 0;
	width: 100px;
	height: 20px;
	float: right;
}
.rated2 {
  background-position: 0 -20px;
}
.rated3 {
  background-position: 0 -40px;
}
.rated4 {
  background-position: 0 -60px;
}
.rated5 {
  background-position: 0 -80px;
}

#twitter-feed {
    background: transparent url(../images/top-twitter.png) no-repeat right top;
    margin: 15px 0;
    padding-top: 30px;
}
#twitter-feed .tweet {
      color:@grey;
      font-style: italic;
      margin-top: 15px;
}

#flickr {
    background: transparent url(../images/top-flickr.png) no-repeat right top;
    margin: 15px 0;
    padding-top: 45px;
}
#flickr ul {
  margin: 10px 0;
  float: left;
}

#flickr li{
  list-style-type: none;
  float: left;
  margin-right: 6px;
}
#flickr li img {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ebebeb;
}

/* ==================================================
   #Contact Settings
================================================== */ 



  


#map {
  width: 100%;
  height: 480px;
  padding: 0 0 0px 0;
}
.map-content {
  width: 100%;
  height: 480px;
}

#contact .input-block {
  float: left;
  margin-right: 20px;
}

#contact .last {
  margin: 0;
}

#contact textarea.full-width {
  width: 100%;
}

#contact .done {
  background: #fff url(../images/ico-success.png) no-repeat 2px;
  font-size:11px;
  display:none;
  color:#83cf1d;
  padding:5px 0 5px 30px;
  border: 2px solid #83cf1d;
}
#contact .done strong  {
color:#83cf1d;
}

#contact .form .hightlight
{
  border:1px solid #9F1319;
  background:#e4e4e4 url(../images/ico-error-small.png) no-repeat right top;
}

#contact form .loading
{
  float:right;
  background: transparent url(../images/ajax-loader.gif) no-repeat right bottom;
  height:31px;
  width:31px;
  display:none;
}

#contact .email {
  background: transparent url(../images/site-sprites.png) no-repeat -175px -50px; 
  padding: 3px 0 3px 30px;
  margin: 0 0 -4px 0;
}
#contact .website {
  background: transparent url(../images/site-sprites.png) no-repeat -175px -100px; 
  padding: 3px 0 3px 30px;
}
#contact #submit {
  margin-top: 20px;
}
#contact #xx{
  margin-top: 20px;
  width:80px;
}

/* ==================================================
   # Style Overrides
================================================== */ 

#fancybox-content {
	border: 1px solid #fff;

}
div #fancybox-title-inside {
  padding-top: 10px;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	#portfolio-list {width: 780px}
	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	#style-switcher {display: none}
	#portfolio-list {width: 780px}
	#index .center {display: block; margin-left: 25px; width: 260px}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
	#style-switcher {display: none}
	.responsive-nav {display: block}
	.menu {top: 0;height: 174px;position:absolute;width: 720px;left: 0;}
	#portfolio-list {width: 720px}
	
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.menu.responsive-nav {display: block}
  #style-switcher, .etabs{display: none}
  .menu {top: 0;height: 20px;position:relative;width:420px;left: 0;margin: 0 auto;}
  #portfolio-list {width: 460px}
	#portfolio-list li {margin-right:15px;height:290px;}
	#login .year {margin: 15px 0;}
	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
	.map-content {width: 100%;height: 240px;}
	.responsive-nav {display: block}
	#logo {display: block; padding: 0; background-image: none;}
	#header {height: 145px}
	#login .year {margin: 15px 0;}
	#style-switcher, .etabs {display: none}
	.menu {height: 20px;position:relative;width:300px;margin: 0 auto;}
	#portfolio-list {width: 300px;margin: 0 auto;}
	#portfolio-list li {float: left;padding: 15px 5px 5px 5px;margin-right:0;height:290px;width:100%;}
	
	}