/* Tipografia */

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

}

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

}

/* Estrutura */

body {
    color: #fff;
    font-family: 'StarkProRegular';
    font-size: 16px;
}

.content {
	margin: 0 auto;
	width: 980px;
}

p {
	line-height: 20px;
	margin-bottom: 20px;
}

strong {
	font-family: 'StarkProBold';
}

/* Topo */

header {
	background: url('../img/bg-menu.png') no-repeat top center;
	height: 190px;
	position: fixed;
	width: 100%;
	z-index: 2;
}

h1 {
	background: url('../img/logo-kitopeq.png') no-repeat center;
	float: left;
	height: 160px;
	margin-left: 10px;
	width: 143px;
}

nav#topo {
	float: left;
}
nav#topo li {
	float: left;
	width: 144px;
}
nav#topo li:hover,
nav#topo li.ativo {
	background-image: url('../img/sprite-bg-menu.png');
	background-repeat: no-repeat;
}


nav#topo a {
	background-image: url('../img/sprite-menu.png');
	background-repeat: no-repeat;
	color: #0a687a;
	display: block;
	font-family: 'StarkProBold';
	font-size: 14px;
	padding-top: 115px;
	text-align: center;
	text-transform: uppercase;
}
nav#topo a:hover,
nav#topo .ativo a  {
	color: #fff;
}

nav#topo #m-conceito {
	background-position: 1px 0;
}
nav#topo #m-conceito a {
	background-position: 54px 35px;
	height: 75px;
}
nav#topo #m-conceito a:hover,
nav#topo #m-conceito.ativo a {
	background-position: 54px -155px !important;
}

nav#topo #m-quem-somos {
	background-position: -143px 0;
}
nav#topo #m-quem-somos a {
	background-position: -89px 35px;
	height: 69px;
}
nav#topo #m-quem-somos a:hover,
nav#topo #m-quem-somos.ativo a {
	background-position: -89px -155px;
}

nav#topo #m-catalogo {
	background-position: -287px 0;
}
nav#topo #m-catalogo a {
	background-position: -235px 35px;
	height: 62px;
}
nav#topo #m-catalogo a:hover,
nav#topo #m-catalogo.ativo a {
	background-position: -235px -155px;
}

nav#topo #m-sustentabilidade {
	background-position: -431px 0;
}
nav#topo #m-sustentabilidade a {
	background-position: -377px 35px;
	height: 55px;
}
nav#topo #m-sustentabilidade a:hover,
nav#topo #m-sustentabilidade.ativo a {
	background-position: -377px -155px;
}

nav#topo #m-contato {
	background-position: -575px 0;
}
nav#topo #m-contato a {
	background-position: -523px 35px;
	height: 49px;
}
nav#topo #m-contato a:hover,
nav#topo #m-contato.ativo a {
	background-position: -523px -155px;
}

/* Conteúdo */

#conteudo {
	overflow: hidden;
	padding-top: 110px;
	z-index: 1;
}

section {
	clear: both;
	height: 890px;
	overflow: hidden;
	padding-top: 80px;
}

section > img {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -960px;
	z-index: 1;
}

section > .content {
	z-index: 2;
}

/* Área: Conceito */

#conceito {
	background: url('../img/bg-conceito.jpg') top center repeat-x;
}
#conceito #slide-conceito {
	margin-left: -470px;
	z-index: 1;
}
#conceito #nav {
	text-align: center;
	top: -30px;
	z-index: 2;
	width: 100%;
}
#conceito #nav li {
	background-color: #ccc;
	border-radius: 5px;
	cursor: pointer;
	display: inline-block;
	height: 10px;
	margin: 0 3px;
	text-indent: -999em;
	width: 10px;
}
#conceito #nav li:hover,
#conceito #nav li.activeSlide {
	background-color: #0a687a;
}

/* Área: Quem Somos */

#quem-somos {
	background: #60d2e7;
}
#quem-somos h2 {
	background-image: url('../img/titulo-brincar-simples.png');
	height: 138px;
	margin: 55px 0 40px;
	width: 568px;
}
#quem-somos p {
	width: 370px;
}
#quem-somos h2, 
#quem-somos p {
	margin-left: 50px;
}

/* Área: Catálogo */

#catalogo {
	background: #d2287b;
}
#catalogo h2 {
	background-image: url('../img/titulo-catalogo.png');
	float: left;
	height: 148px;
	margin: 40px 40px 40px 50px;
	width: 251px;
}
#catalogo .content > p {
	float: left;
	margin: 80px 40px 0 0;
	width: 370px;
}
#catalogo #bt-catalogo {
	background-image: url('../img/bt-download-pdf.png');
	float: left;
	height: 80px;
	margin-top: 80px;
	width: 180px;
}
#catalogo #bt-catalogo:hover {
	background-position: 0 -90px;
}

#catalogo #book {
	background: url('../img/sombra-catalogo.png') no-repeat center bottom;
	clear: both;
	padding-bottom: 50px;
	z-index: 1;
}
#catalogo #slide-catalogo {
	background-color: #fff;
	height: 490px;
	width: 100%;
}
#catalogo #slide-catalogo img {
	height: 490px;
}
#catalogo #paginacao {
	display: table;
	margin: -22px auto 0;
	z-index: 1;
}
#catalogo #paginacao p {
	float: left;
	line-height: 90px;
	padding: 0 50px;
}
#catalogo nav#setas {
	float: left;
	margin-left: 7px;
}
#catalogo #setas button {
	background: url('../img/sprite-nav-catalogo.png') no-repeat;
	border: 0;
	cursor: pointer;
	float: left;
	height: 144px;
}
#catalogo #setas #prev {
	width: 130px;
}
#catalogo #setas #prev:hover {
	background-position: 0 -150px;
}
#catalogo #setas #next {
	width: 143px;
	background-position: -130px 0;
}
#catalogo #setas #next:hover {
	background-position: -130px -150px;
}

/* Área: Sustentabilidade */

#sustentabilidade {
	background: #ccd74b;
}
#sustentabilidade h2 {
	background-image: url('../img/titulo-meio-ambiente.png');
	height: 143px;
	margin: 55px 0 40px;
	width: 556px;
}
#sustentabilidade p {
	color: #6d6f20;
	width: 370px;
}
#sustentabilidade h2, 
#sustentabilidade p {
	margin-left: 50px;
}

/* Área: Contato */

#contato {
	background: #fa9400;
}
#contato .content > p {
	margin-top: 30px;
}
#contato .content > p,
#contato form {
	margin-left: 440px;
}
#contato label {
	clear: left;
	font-family: 'StarkProBold';
	float: left;
	line-height: 40px;
	padding-right: 15px;
	text-align: right;
	width: 145px;
}
#contato input[type="text"] {
	height: 38px;
	line-height: 38px;
	padding: 0 10px;
}
#contato textarea {
	height: 190px;
	line-height: 20px;
	padding: 10px;
	resize: none;
}
#contato input[type="text"],
#contato textarea {
	background-color: #e48900;
	border-radius: 4px;
	border: 1px solid #d68000;
	border-top-color: #b96f00;
	border-bottom-color: #fab373;
	color: #fff;
	font-family: 'StarkProRegular';
	font-size: 16px;
	width: 318px;
}
#contato input[type="text"]:focus,
#contato textarea:focus {
	background-color: #f57300;
	border: 1px solid #ab6600;
	border-top-color: #945900;
	border-bottom-color: #fed9b2;
}
#contato label, 
#contato input[type="text"],
#contato textarea {
	float: left;
	margin-bottom: 9px;
}
#contato input[type="submit"] {
	background-color: #e48900;
	border: 0;
	border-top: 1px solid #f0be73;
	border-bottom: 4px solid #c87800;
	border-radius: 4px;
	clear: both;
	color: #fff;
	cursor: pointer;
	float: left;
	font-family: 'StarkProBold';
	font-size: 20px;
	height: 40px;
	margin-left: 399px;
	width: 100px;
}
#contato input[type="submit"]:hover,
#contato input[type="submit"]:active {
	background-color: #f57300;
	border-bottom: 4px solid #ba7000;
}
#contato input[type="submit"]:active {
	border-top: 1px solid #fab273;
}
#contato input[type="submit"]:active {
	border-top: 1px solid #f57300;
}

#contato address {
	margin-left: 50px;
	position: absolute;
	top: 555px;
}
#contato address p {
	line-height: 22px;
}
#contato address span {
	font-family: 'StarkProBold';
	font-size: 12px;
}

/* Pre-loader */
#preloader {
	position: absolute;
	width: 316px;
	height: 315px;
	left: 50%;
	margin-left: -158px;
	z-index: 1001;
	top: 100px;
}
#preloader p {
	color: #fff;
	font-family: 'StarkProBold';
	font-size: 13px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	text-align: center;
}
#preloader #carrega {
	background-color: #0d879e;
	left: -45px;
	width: 90px;
}
#preloader #pct {
	background-color: #f8c246;
	right: -30px;
	width: 60px;
}