/*RESET
--------------------------*/
* {
  margin: 0;
  padding: 0;
}

a { text-decoration: none;}

b,
strong { font-weight: bold; }

ol,
ul { list-style: none;}

/* GERAL
--------------------------*/
body { min-width: 960px; }

.container {
  margin: 0 auto;
  width: 960px;
}

/*Grid
----------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.grid_1 { width: 60px; }

.grid_2 { width: 140px; }

.grid_3 { width: 220px; }

.grid_4 { width: 300px; }

.grid_5 { width: 380px; }

.grid_6 { width: 460px; }

.grid_7 { width: 540px; }

.grid_8 { width: 620px; }

.grid_9 { width: 700px; }

.grid_10 { width: 780px; }

.grid_11 { width: 860px; }

.grid_12 { width: 940px; }

/*fonts
----------------------------------*/
@font-face {
    font-family: 'quicksandbold';
    src: url('../fonts/quicksand-bold-webfont.eot');
    src: url('../fonts/quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-bold-webfont.woff') format('woff'),
         url('../fonts/quicksand-bold-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-bold-webfont.svg#quicksandbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandlight';
    src: url('../fonts/quicksand-light-webfont.eot');
    src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-light-webfont.woff') format('woff'),
         url('../fonts/quicksand-light-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandregular';
    src: url('../fonts/quicksand-regular-webfont.eot');
    src: url('../fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-regular-webfont.woff') format('woff'),
         url('../fonts/quicksand-regular-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
span,
a {font-family: 'quicksandregular';}

/*HEADER
----------------------------------*/
header {
  width: 100%;
  height: 145px;
  background: #FFE700;
  float: left;
}

.logo {
  display: block;
  margin-top: 50px;
}

.logo h1 {
  color: black;
  font-size: 12pt;
}

nav {
  width: 100%;
  float: left;
  margin-top: 60px;
  position: relative;
}

nav ul {
  width: auto;
  float: right;
}

nav ul li {
  float: left;
  padding-right: 15px;
  position: relative;
}

nav ul li a {
  font-family: 'quicksandregular';
  font-size:  15pt;
  color: black;
}

#lavalamp span {
  height: 5px;
  background: #A69E00;
  display: block;
  position: absolute;
  bottom: -10px;

  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  -ms-transition:all 0.3s;
  -o-transition:all 0.3s;
  transition:all 0.3s;
}

/* Estilizando a primeira ancora "Home" */
#lavalamp li:nth-child(1):hover ~ span,
#lavalamp span.active-home{
    left: 200px;
    width: 98px
}

/* Estilizando a segunda ancora "Sobre" */
#lavalamp li:nth-child(2):hover ~ span,
#lavalamp span.active-sobre{
    left: 310px;
    width: 105px
}
 
/* Estilizando a terceira ancora "Serviços" */
#lavalamp li:nth-child(3):hover ~ span,
#lavalamp span.active-servicos{
    left: 425px;
    width: 90px
}
 
/* Estilizando a quarta ancora "Contato" */
#lavalamp li:nth-child(4):hover ~ span,
#lavalamp span.active-contato{
    left: 525px;
    width: 85px
}

/*FOOTER
----------------------------------*/
footer {
  width: 100%;
  min-height: 120px;
  background: #FFE700;
  float: left;
}

.logo { margin-top: 40px; }

.logo a { display: block; }

.politica { margin-top: 60px; }

.politica p {
  font-family: 'quicksandregular';
  font-size: 12pt;
}

.redes {
  margin-top: 50px;
  text-align: right;
}

/*TRABALHOS
----------------------------------*/
.trabalhos,
.trabalhos ul {
  width: 100%;
  float: left;
}

.trabalhos,
.sobre,
.servicos { padding-top: 80px;}

.trabalhos ul li { margin-bottom: 65px; }

.trabalhos ul li a { display: block; }

.img-work {
  width: 300px;
  height: 250px;
  background: #FFE700;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.efeito {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  background-color: #FFE700;
  text-align: left;
  padding: 20px;
  color: black;
  
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.efeito h3 {
  margin-bottom: 5px;
}

.efeito p {
  font-size: 10pt;
}

.efeito a {
  color: black;
  font-weight: bold;
}

/*SOBRE NÓS
----------------------------------*/
section.sobre {
  width: 100%;
  background: #FFE700;
  float: left;
}

p.blockquote {
  width: 100%;
  float: left;
  font-size: 36pt;
  text-align: center;
  margin-bottom: 40px;
}

p.blockquote:before {
  padding-left: 60px;
  padding-top: 20px;
  content: '';
  background: url("../img/block-1.png") left top no-repeat;
}

p.blockquote:after {
  padding-left: 60px;
  padding-bottom: 15px;
  content: '';
  background: url("../img/block-2.png") right bottom no-repeat;
}

.texto p{
    font-size: 16pt;
    line-height: 20pt;
    margin-bottom: 20px
}

.texto li {
  list-style-type: disc;
  list-style-position: inside;
  font-size: 11pt;
}

section.sobre .grid_10 {
  margin: 0 auto;
  float: none;
  display: block;
  overflow: hidden;
}

.list-img {
  width: 100%;
  float: left;
  margin-top: 40px !important;
  margin-bottom: 50px !important;
}

.list-img li { float: left; }

.list-img li img {
  display: block;
  margin: 0 auto;
}

.alpha { margin-left: 0; }

/*SERVICOS
----------------------------------*/
section.servicos {
  width: 100%;
  float: left;
}

.list-servicos {
  margin: 0 0 40px 0;
  width: 100%;
  float: left;
}

.list-servicos li img {
  display: block;
  margin: 0 auto;
}

.list-servicos li h2 {
  font-family: quicksandbold;
  font-size: 26pt;
  margin: 25px 0;
  text-align: center;
}

#email {
  width: 100%;
  float: left;
}