/* 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;*/

/* Blau und Grau Color Example
@primary-color: #1d4050;
@secondary-color: #193846;
@contrast-color: #7F3A2A;

@primary-title: #1d4050;
@secondary-title: #3a728b;*/

@primary-color: #333333;
@secondary-color: #434D51;
@contrast-color: #ff9900;

@primary-title: #333333;
@secondary-title: #434D51;

@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)
        #Portfolio Settings (~line 431)
        #Portfolio 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;
}
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: 44px;
  letter-spacing: -2px;
  line-height: 0.9em;
}
h2{
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 20px 0;

}

h3, h4{
  font-family: @secondary_site_font;
  color: @secondary-title;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: normal;
}
h4 {
  font-family: @site_font;
  font-size: 12px;
  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: 120px;
   }

#socials a.facebook, #socials a.google, #socials a.twitter, #socials a.linkedin, #socials a.dribble, #socials a.deviantart, #socials a.flickr, #socials a.skype, #socials a.pinterest, #socials a.vimeo, #socials a.xing {
    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;
    }
}
#socials a.pinterest {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: 0 -25px;
    &:hover {
    background-color: #cb2027;
    }
}
#socials a.vimeo {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -25px -25px;
    &:hover {
    background-color: #44bbff;
    }
}
#socials a.xing {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -50px -25px;
    &:hover {
    background-color: #CED50F;
    }
}



#content {
  background-color: #f9f9f9;
  background-image: url(../images/content-bg7.png);
  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;
}
#profile, #portfolio, #resume, #contact {
    padding: 25px 0;
    height: auto;
    margin: 0 auto;
}
.menu,#profile, #profile, #portfolio, #resume, #contact {
  display:none;
}

dl{
  line-height: 1.2em;
  }

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

#style-switcher {

        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;
        z-index: 100;
}

#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;
}

#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-image:url(../images/menu-sprite.png);
        background-position: 0 0;
}
.etabs li.active .tab-portfolio {
        background-image:url(../images/menu-sprite.png);
        background-position: -80px 0;
}
.etabs li.active .tab-resume {
        background-image:url(../images/menu-sprite.png);
        background-position:-160px 0;
}
.etabs li.active .tab-contact {
        background-image:url(../images/menu-sprite.png);
        background-position:-240px 0;
}


/* ==================================================
   #Profile Settings
================================================== */

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

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

#profile .avatar {
  background: transparent url(../images/profile-bg-avatar.png);
  width: 260px;
  height: 297px;
  }

#profile .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: 1.5em;
}
dl.personal a {
  color: @dark-grey;
}

/* ==================================================
   #Portfolio 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
================================================== */

#resume .firma {
  text-align: left;
  color: @grey;
  border: 1px solid #e7e7e7;
/*  background-color: #f8f8f8; */
  margin: 2px 0 10px 0;
  padding: 2px 4px;
}

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

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

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

#resume .side h2 {
  font-size: 20px;
  margin-top: 20px;
  font-weight: 200;
  letter-spacing: 0;
}
#resume .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;
}

#quali-feed .quali {
      color:@grey;
      font-style: normal;
      margin-top: 15px;
}

#quali-feed {
    margin: 15px 0;
    padding-top: 5px;
}

#quali-feed .quali {
      color:@grey;
      font-style: normal;
      margin-top: 15px;
}
/*
#quali-feed .quali {
      color:@grey;
      font-style: normal;
      margin-top: 15px;
}

#quali-feed {
        background: transparent url(../images/top-qualifikation.png) no-repeat right top;
    margin: 15px 0;
    padding-top: 45px;
}

#quali-feed .quali {
      color:@grey;
      font-style: normal;
      margin-top: 15px;
} */

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


#map {
  width: 100%;
  height: 480px;
  padding: 0 0 15px 0;
  background: transparent url(../images/hr-sections.png) repeat;
  border-top: 10px solid @contrast-color;
}
.map-content {
  width: 100%;
  height: 480px;
}

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

#contact .last {
  margin: 0;
}

#contact textarea.full-width {
  width: 450px;
}

#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;
}

/* ==================================================
   # 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}
        #profile .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;}
        #resume .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;}
        #map {height: 260px;margin: 5px 0 20px 0;}
        .responsive-nav {display: block}
        #logo {display: block; padding: 0; background-image: none;}
        #header {height: 145px}
        #resume .year {margin: 15px 0;}
        #socials {top: 100px;}
        #style-switcher, .etabs {display: none}

        .adipoli-box{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%;}

        }