/* PALETA DE CORES */
.color0 {color: #000;}
.color1 {color: #FFF;}
.color2 {color: #e6e7e8;}
.color3 {color: #6d6e71;}
.color4 {color: #d6dd33;}
.color5 {color: #595a2f;}
.color6 {color: #bc944c;}
.color7 {color: #fcc46b;}
.color8 {color: #fcdc00;}
.color9 {color: #4d31bf;}
.color10 {color: #d35438;}
.color11 {color: #ee604a;}
.color12 {color: #ff0023;}
.color13 {color: #5b2219;}
.color14 {color: #f6f08a;}

/* TIPOGRAFIA */
h1 {font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 67px; margin: 0; }
h2 {font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 50px; margin: 0; }
h3 {font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 38px; margin: 0; }
h4 {font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 28px; margin: 0; }
h4.semibold {font-weight: 600;}
h5 {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 21px; margin: 0; }
h5.bold {font-weight: 700;}
h6 {font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 18px; margin: 0; }
.font-jaapokkisubtract {font-family: jaapokkisubtract; }

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
}

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

}

/* BOTOES */
.button {
    margin: 0;
    padding: 0; background: none;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
}
button {padding: 0; background: none;}
button:hover {background: none; }
button a, button span {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
}


.btn-normal,.btn-normal span {
    width: 142px;
    height: 32px;
    font-size: 18px;
    padding: 3px 0 0 20px;
}
.btn-small {
    font-size: 14px;
    padding: 6px 0 0 20px;
}
/* BOTAO VERDE */
.btn-normal.btn-verde{ color: #595a2f; background: url('../img/btn1.png') 0 0 no-repeat; }
.btn-verde:hover { color: #f6f08a; background-position: -142px 0;  }
.btn-verde:active { color: #f6f08a; background-position: -284px 0;}

.btn-normal.btn-verde-flip{ color: #595a2f; background: url('../img/btn1-flip.png') -426px 0 no-repeat; padding: 3px 0 0 8px;}
.btn-verde-flip:hover { color: #f6f08a; background-position: -142px 0;  }
.btn-verde-flip:active { color: #f6f08a; background-position: -284px 0;}

/* BOTAO MARROM */
.btn-normal.btn-marrom{ color: #5a211a; background: url('../img/btn2.png') 0 0 no-repeat; }
.btn-marrom:hover { color: #d3553f; background-position: -142px 0; }
.btn-marrom:active { color: #f6f08a; background-position: -284px 0;}

/* BOTAO AMARELO */
.btn-normal.btn-amarelo { color: #5a211a; background: url('../img/btn3.png') 0 0 no-repeat; }
.btn-amarelo:hover { color: #fcdc00; background-position: -142px 0; }
.btn-amarelo:active { color: #bc944c; background-position: -284px 0;}

/* BOTAO NEGATIVO */
.btn-normal.btn-negativo, .btn-normal.btn-negativo span { color: #ffffff; background: url('../img/btn4.png') 0 0 no-repeat; }
.btn-negativo:hover, .btn-negativo span:hover { color: #ff0000; background-position: -142px 0; }
.btn-negativo:active,.btn-negativo span:active { color: #c60004; background-position: -284px 0;}

/* BOTAO MARROM FULL */
.btn-marromfull{ position: relative; height: 40px; border: 0; width: 100%; padding: 0 12px; }
.btn-marromfull span::before, .btn-marromfull span::after  { content: ' '; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.btn-marromfull span::before { left: 0; border-width: 20px 12px 20px 0; border-color: transparent #5b2219 transparent transparent; }
.btn-marromfull span::after { right: 0; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent #5b2219; }
.btn-marromfull span{ color: #FFF; background: #5b2219;height: 100%; padding-top: 8px; }
.btn-marromfull span:hover { color: #fcdc00; }

/* BOTAO CINZA FULL */
.btn-cinzafull { position: relative; height: 40px; border: 0; width: 100%; padding: 0 12px; }
.btn-cinzafull::before, .btn-cinzafull::after { content: ' '; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.btn-cinzafull::before { left: 0; border-width: 20px 12px 20px 0; border-color: transparent #d1d3d4 transparent transparent; }
.btn-cinzafull::after { right: 0; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent #d1d3d4; }
.btn-cinzafull a, .btn-cinzafull span { color: #5b2219; background: #d1d3d4;height: 100%; padding-top: 8px; }
.btn-cinzafull:hover, .btn-cinzafull a:hover, .btn-cinzafull span:hover { color: #d35438; }


.btn-large{
    width: 200px;
    height: 40px;
    font-size: 18px;
    padding: 8px 0 0 20px;
}

/* BOTAO VERDE */
.btn-large.btn-verde { color: #595a2f; background: url('../img/btn_large.png') 0 0 no-repeat; }
.btn-large.btn-verde:hover { color: #f6f08a; background-position: -200px 0;  }
.btn-large.btn-verde:active { color: #f6f08a; background-position: -400px 0;}

/* BOTAO MARROM */
.btn-large.btn-marrom{ color: #5a211a; background: url('../img/btn_large.png') 0 -40px no-repeat; }
.btn-large.btn-marrom:hover { color: #d3553f; background-position: -200px -40px; }
.btn-large.btn-marrom:active { color: #f6f08a; background-position: -400px -40px;}

/* BOTAO AMARELO */
.btn-large.btn-amarelo { color: #5a211a; background: url('../img/btn_large.png') 0 -80px no-repeat; }
.btn-large.btn-amarelo:hover { color: #fcdc00; background-position: -200px -80px; }
.btn-large.btn-amarelo:active { color: #bc944c; background-position: -400px -80px;}

/* BOTAO NEGATIVO */
.btn-large.btn-negativo { color: #ffffff; background: url('../img/btn_large.png') 0 -120px no-repeat; }
.btn-large.btn-negativo:hover { color: #ff0000; background-position: -200px -120px; }
.btn-large.btn-negativo:active { color: #c60004; background-position: -400px -120px;}

/* BOTAO EYES */
.btn-eyes{
    width: 130px;
    height: 38px;
    font-size: 18px;
    text-align: left;
    padding: 7px 0 0 0;
    font-weight: 700;
}

/* BOTAO VERDE */
.btn-eyes.btn-vermelho{ color: #d3553f; background: url('../img/btn_eyes.png') right 0 no-repeat; }
.btn-eyes.btn-vermelho:hover { color: #d3553f; background-position: right -38px;  }

/* BOTAO VERDE */
.btn-eyes.btn-bege { color: #bc944c; background: url('../img/btn_eyes.png') right -76px no-repeat; }
.btn-eyes.btn-bege:hover { color: #bc944c; background-position: right -109px;  }

/* BOTAO VERDE */
.btn-eyes.btn-marrom { color: #333204; background: url('../img/btn_eyes.png') right -147px no-repeat; }
.btn-eyes.btn-marrom:hover { color: #333204; background-position: right -180px;  }

.no-pad-left { padding-left: 0; }
.no-pad-right { padding-right: 0;}
/* NAV */
#menu span{
    padding: 0 5px 0 20px;
}
#menu ul {
    margin: 0;
    padding: 0;
    margin-top: 30px;
}
#menu li{
    float: left;
    list-style: none;
}

#menu a{
    float: left;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.5px;
    color: #d35438;
    position: relative;
    background: url('../img/nav_bg.png') 0 0 repeat-x;
    height: 29px;
    line-height: 30px;
}

#menu a:hover { 
    background-position: 0 -29px;
    color: #FFF;
}
#menu a:hover:before { 
    z-index: 2;
    background-position: 0 -29px;
}
#menu a:hover:after { 
    z-index: 3;
    background-position: 0 -29px;
}

#menu a::after,
#menu a::before{
    content: "";
    position: absolute;
    width: 15px;
    height: 29px;
}

#menu a::after{ 
    z-index: 1;
    background: url('../img/nav_r.png');
}

#menu a::before{
    z-index: 2; 
    background: url('../img/nav_l.png');
}

#menu a:hover::after{
}

#menu .current,
#menu .current:hover{
    background: none;
}

#menu .current::after,
#menu .current::before{
    content: normal;  
}

/* FORM */
input.search {
    background: url('../img/form_search_left.jpg') top left no-repeat,
        url('../img/form_search_right.jpg') top right no-repeat,
        url('../img/form_search_center.jpg') top center repeat-x;	
    height: 30px;
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 20px;
    border: 0;
    width: 100px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
input.search:focus {
    width: 100px;
}

/* FORM FIELD */
.form-field input {
    border: 0;
    box-shadow: none;
    background: url('../img/formfield_center.png');
    height: 100%; 
    /*color: #d1d3d4;*/
    color: #9A9D9E;
}
.form-field select {
    border: 0;
    box-shadow: none;
    background: url('../img/formfield_center.png');
    height: 100%; 
    /*color: #d1d3d4;*/
    color: #9A9D9E;
}
.form-field {
    position: relative;
    height: 40px;
    border: 0;
    width: 100%;
    padding: 0 12px;
}
.form-field::before,
.form-field::after {
    content: ' ';
    position: absolute;
    top: 0;
    width: 12px;
    height: 40px;
    background: url('../img/formfield.png');
}
.form-field::before {
    left: 0;
    background-position: 0 0;
}
.form-field::after {
    right: 0;
    background-position: 12px 0;
}
.form-field input:focus {
    border: 0;
    box-shadow: none;
    background: url('../img/formfield_center.png');
    height: 100%; 
}

.form-textfield {
    box-shadow: none;
    border-style: solid;
    border-width: 19px 13px 20px 12px;
    -moz-border-image: url('../img/textarea.png') 19 13 20 12 repeat;
    -webkit-border-image: url('../img/textarea.png') 19 13 20 12 repeat;
    -o-border-image: url('../img/textarea.png') 19 13 20 12 repeat;
    border-image: url('../img/textarea.png') 19 13 20 12 fill repeat;
}

.form-filled input,
.form-filled select {
    background: url('../img/formfilled_center.png');
}
.form-filled::before,
.form-filled::after {
    background: url('../img/formfilled.png');
}
.form-filled::before {
    left: 0;
    background-position: 0 0;
}
.form-filled::after {
    right: 0;
    background-position: 12px 0;
}
.form-filled input:focus {
    background: url('../img/formfilled_center.png');
}

.form-textfilled {
    -moz-border-image: url('../img/textarea-filled.png') 19 13 20 12 repeat;
    -webkit-border-image: url('../img/textarea-filled.png') 19 13 20 12 repeat;
    -o-border-image: url('../img/textarea-filled.png') 19 13 20 12 repeat;
    border-image: url('../img/textarea-filled.png') 19 13 20 12 fill repeat;
}
/* TEXT ALIGN */
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }

/* DISPLAY */
.dp-inline {display: inline; }
.dp-block {display: block; }

/* MARGINS */
.mt-10  { margin-top:  10px ;}
.mt-15  { margin-top:  15px ;}
.mt-25  { margin-top:  25px ;}
.mt-50  { margin-top:  50px ;}
.mt-75  { margin-top:  75px ;}
.mt-100 { margin-top: 100px ;}

.mb-10  { margin-bottom:  10px ;}
.mb-15  { margin-bottom:  15px ;}
.mb-25  { margin-bottom:  25px ;}
.mb-50  { margin-bottom:  50px ;}
.mb-75  { margin-bottom:  75px ;}
.mb-100 { margin-bottom: 100px ;}

/* PADDINGS */
.pt-25  { padding-top:  25px ;}
.pt-50  { padding-top:  50px ;}
.pt-75  { padding-top:  75px ;}
.pt-100 { padding-top: 100px ;}

.pb-25  { padding-bottom:  25px ;}
.pb-50  { padding-bottom:  50px ;}
.pb-75  { padding-bottom:  75px ;}
.pb-100 { padding-bottom: 100px ;}