/*LESS VARIABLES*/
@font-body: Verdana, Geneva, sans-serif;
@font-head: Georgia, "Times New Roman", Times, serif;
@color-white: #ffffff;
@color-black: #000000;
@color-lighter_gray: #cccccc;
@color-light_gray: #999999;
@color-gray: #666666;

/*GENERAL*/
.clearer {
  clear:both;
}
#spacer {
  padding-bottom:28px;
}
.hide {
  display:none;
}

/*HTML*/
body {
  margin:0px;
  padding:0px;
  font-family:@font-body;
  line-height:21px;
  font-size:12px;
  color:#7b7b7b;
}
#sidebar h2 {
  font-size:14px;
  margin:10px 0 20px 0;
  padding:0px;
  font-family:@font-body;
  color:#555555;
  font-weight:normal;
}
h3 {
  margin:13px 0 0 0;
  font-size:12px;
  font-family:@font-body;
  color:#2b2a2a;
  letter-spacing:0px;
  font-weight:normal;
}
h4 {
  font-size:17px;
  font-family:@font-head;
  color:@color-white;
  letter-spacing:0px;
  font-weight:bold;
}
h5 {
  margin:20px 20px 0 0;
  font-size:13px;
  font-style: italic;
  text-align:right;
  line-height:normal;
  font-family: serif;
  color:@color-light_gray;
  font-weight:normal;
}
h1 {
  margin:-20px -3px 0 0;
  font-size:10px;
  text-align:left;
  line-height:normal;
  font-family:@font-body;
  color:@color-light_gray;
  font-weight:normal;
}

p {
  padding:0 0 10px 0;
}
.link {
  float:left;
  width:100%;
  img {
    float:left;
    margin:5px 5px 0 0;
  }
  a {
    color:#0066ff;
  }
}
.dlink {
  vertical-align: middle;
  float:left;
  width:150px;
  img {
    float:left;
    margin:0px 5px 0 0;
  }
  a {
    color:#0066ff;
  }
}
.navlink {
  margin-left:auto;
  margin-right:auto;
  img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:-3px;
    border:none;
  }
}
.book {
  float:left;
  width:100%;
  img {
    float:left;
    margin:5px 5px 0 0;
  }
}
li {
  list-style:none;
}
a {
  color:@color-gray;
  outline:none;
  text-decoration:none;
}
a:hover {
  color:@color-black;
  outline:none;
}
a:active {
  outline:none;
}
fieldset {
  border:none;
}
.black {
  color:@color-black;
}
.detailImg {
  margin-bottom:20px;
}

/*TOPBAR*/
#topbar {
  height:44px;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.7);
  margin:0 auto;
  padding:0px;
  width:100%;
  position:fixed;
  z-index:9999;
}
.logo {
  margin:-14px 0 0 165px;
  float:left;
}
.logog {
  margin:-10px 0 0 267px;
  float:left;
}

/*NAVIGATION*/
#navigation {
  margin:5px 0 0 7px;
  float:left;
  li {
    margin:0;
    margin:0px 40px 0 0;
    padding:0;
    float:left;
  }
  ul a {
    font-size:11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing:1px;
    line-height:24px;
    text-decoration:none;
    color:#a2a2a2;
  }
  ul a:hover {
    color:@color-lighter_gray;
  }
}
#current {
  color:#FFFFFF !important;
  padding-bottom: 6px;
  border-bottom: #ccc solid 3px;
}
#sidebar {
  float:left;
  width:200px;
  margin:110px 0 0 0;
  padding:0 0 0 20px;
  position:fixed;
  text-align:right;
}
#footer {
  width:100%;
  margin:30px 0 0 0;
  border-top:1px #cbc8c5 solid;
  padding-top:10px;
  p {
    float:left;
  }
}
#slogan {
  text-align:right;
  width:255px;
  margin:0 0 50px 30px;
}
#content {
  width:600px;
  float:left;
  margin:28px 0 0px 250px;
  padding-left:18px;
}
#content p, #contentInside p {
  font-size:12px;
  line-height:21px;
  margin:0 0 0px 0;
}
#contentInside {
  width:600px;
  float:left;
  margin:110px 0 0px 250px;
  padding-left:18px;
}

/*Socials*/
#socials ul {
  float:right;
  margin:0 0 30px 0;
  padding:0;
  a:hover {
    background-position:top left;
  }
}
#socials li {
  float:left;
  display:block;
  margin:0 0 0 7px;
}
#socials li.twitter a {
  width:24px;
  height:24px;
  display:block;
  background:url('../images/socials/twitter.jpg') no-repeat bottom left;
}
#socials li.facebook a {
  width:24px;
  height:24px;
  display:block;
  background:url('../images/socials/facebook.jpg') no-repeat bottom left;
}
#socials li.flickr a {
  width:24px;
  height:24px;
  display:block;
  background:url('../images/socials/flickr.jpg') no-repeat bottom left;
}
#socials li.email a {
  width:24px;
  height:24px;
  display:block;
  background:url('../images/socials/email.jpg') no-repeat bottom left;
}
#socials li.linkedin a {
  width:24px;
  height:24px;
  display:block;
  background:url('../images/socials/linkedin.jpg') no-repeat bottom left;
}

/*Featured projects*/
#projects {
  margin:0 0 80px 0px;
  float:right;
  width:256px;
  li {
    margin:0;
    padding:0;
  }
  ul a {
    font-size:11px;
    line-height:24px;
    text-decoration:none;
  }
  ul a.on {
    color:@color-black;
  }
  a {
    color:#969696;
    outline:none;
  }
  a:hover {
    color:@color-black;
    outline:none;
  }
}
.title {
  font-family:@font-body;
  font-size:38px;
  color:@color-black;
  float:left;
}
.iGroup img {
  padding:0 0 0 0;
}
.iGroup a {
  display:block;
}
.screen {
  margin-top:90px;
}

/* Filterable lists */
.filter li {
  float:right;
  clear:right;
  margin:0 0 5px 0;
}
.filter a {
  color:#777777;
  text-decoration:none;
}
.filter a:hover, .current a {
  color:@color-black;
}

/* Portfolio Items */
.portfolio {
  overflow:hidden;
  padding:0;
  .work-item {
    margin-bottom:20px;
  }
  li {
    float:left;
    margin:0 20px 20px 0;
    border:@color-lighter_gray 1px solid;
    width:178px;
    height:178px;
  }
  a {
    display:block;
    border:@color-white 3px solid;
    text-decoration:none;
  }
  img {
    display:block;
    border:@color-lighter_gray 1px solid;
  }
}
.work {
  float:left;
  margin:0 20px 0 0;
  position:relative;
  span {
    color:@color-black;
    font-size:11px;
    left:1px;
    padding:8px 10px 8px 10px;
    border-bottom:1px solid #d3d0d0;
    position:absolute;
    text-transform:uppercase;
    top:1px;
    z-index:9000;
  }
  .hover {
    background:none repeat scroll 0 0 #fcfcfc;
    height:100%;
    left:0;
    opacity:0;
    overflow:auto;
    position:absolute;
    top:0;
    width:100%;
    p {
      color:@color-gray;
      font-size:12px;
      line-height:20px !important;
      margin:50px 10px 10px 10px !important;
    }
  }
  .hover:hover {
    opacity:1;
  }
}
.hover-tax {
  color:@color-gray;
  font-size:12px;
  margin:30px 10px 0;
}
a.details {
  background:url('../images/more.png') no-repeat;
  border-left-width:0px;
  bottom:0;
  height:20px;
  position:absolute;
  right:0;
  width:20px;
}
a.zoom {
  background:url('../images/zoom.png') no-repeat;
  bottom:0;
  height:64px;
  position:absolute;
  right:0px;
  text-indent:-9999px;
  width:64px;
}

/* Contact Form*/
#form {
  width:570px;
  margin:20px 0 40px 0;
}
.notification_error {
  border:1px solid #f1dfc5;
  height:auto;
  color:#ca5702;
  width:457px;
  padding:10px 10px 10px 60px;
  background:url(../images/icons/erro.png) no-repeat center left #fdf0dc;
  text-align:left;
  -moz-border-radius:5px;
  margin-bottom:10px;
}
.notification_ok {
  border:1px #cbcf8e solid;
  height:auto;
  width:90%;
  padding:10px;
  background:#f5f9fd;
  text-align:center;
  -moz-border-radius:5px;
  margin-bottom:10px;
}
label {
  width:100px;
  margin:5px;
  float:left;
  text-align:left;
}
textarea {
  height:120px;
  width:400px;
  margin:5px;
  padding:5px;
  float:left;
  border:@color-lighter_gray 1px solid;
  color:#333333;
  font:@font-body 11px;
  -moz-border-radius:3px;
}
.button {
  margin:5px 0 0 300px;
}
.textbox {
  width:400px;
  height:15px;
  margin:5px;
  padding:5px;
  float:left;
  border:@color-lighter_gray 1px solid;
  color:#333333;
  font:@font-body 11px;
  -moz-border-radius:3px;
}