@charset "utf-8";

/* CSS Document */

* {
    margin: 0;
    padding: 0
}


/* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

p {
    text-align: left;
    margin: 15px 0
}

p,
ul {
    font-size: 13px;
    line-height: 1.7em;
    width: 530px;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    p,
    ul {
        width: 450px;
    }
}

@media screen and (max-width: 375px) {
    p,
    ul {
        width: 345px;
    }
}

@media screen and (max-width: 360px) {
    p,
    ul {
        width: 330px;
    }
}

@media screen and (max-width: 320px) {
    p,
    ul {
        width: 290px;
    }
}

p1 {
    font-size: 13px;
    line-height: 1.4em;
    text-align: left;
    margin: 15px 0;
    font-weight: bold
}

p a,
li a {
    color: #39c;
    text-decoration: none
}

p.intro {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 20px 0 30px 0;
    text-align: center;
    width: 95%
}

p#cross-links {
    text-align: center
}

p#cross-links {
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;
    padding-bottom: 30px
}

noscript p,
noscript ol {
    color: #a00;
    font-size: 13px;
    line-height: 1.4em;
    text-align: left
}

noscript a {
    color: #a00;
    text-decoration: underline
}

noscript ol {
    margin-left: 25px;
}

a:focus {
    outline: none
}

img {
    border: 0
}

h3 {
    /*border-bottom: 1px solid silver;*/
    margin-bottom: -9px;
    padding-bottom: 0;
    text-align: left
}

body {
    font-family: Verdana, Arial;
    background-color: white;
    color: black;
    width: 560px;
    height: auto;
    overflow-x: hidden;
    text-align: center;
    margin: 0;
}

@media screen and (max-width: 480px) {
    body {
        width: 480px;
        height: auto;
    }
}

@media screen and (max-width: 414px) {
    body {
        width: 414px;
        height: auto;
    }
}

@media screen and (max-width: 375px) {
    body {
        width: 375px;
        height: auto;
    }
}

@media screen and (max-width: 360px) {
    body {
        width: 360px;
        height: auto;
    }
}

@media screen and (max-width: 320px) {
    body {
        width: 320px;
        height: auto;
    }
}

.stripViewer .panelContainer .panel ul {
    text-align: left;
    margin: 0 25px 0 30px;
}

.slider-wrap {
    /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
    margin: 0;
    position: relative;
    height: 562px;
}

@media screen and (max-width: 480px) {
    .slider-wrap {
        height: 480px;
    }
}

@media screen and (max-width: 414px) {
    .slider-wrap {
        height: 414px;
    }
}

@media screen and (max-width: 375px) {
    .slider-wrap {
        height: 375px;
    }
}

@media screen and (max-width: 360px) {
    .slider-wrap {
        height: 360px;
    }
}

@media screen and (max-width: 320px) {
    .slider-wrap {
        height: 320px;
    }
}


/* These 2 lines specify style applied while slider is loading */

.csw {
    width: 560px;
    height: 1010px;
    background: #fff;
}

.csw .loading {
    margin: 200px 0 300px 0;
    text-align: center
}

.stripViewer {
    /* This is the viewing window */
    position: relative;
    top: -700px;
    overflow: hidden;
    margin: auto;
    width: 560px;
    height: auto;
    clear: both
}

@media screen and (max-width: 480px) {
    .stripViewer {
        top: -605px;
        width: 480px;
        height: auto;
    }
}

@media screen and (max-width: 414px) {
    .stripViewer {
        top: -525px;
        width: 414px;
        height: auto;
    }
}

@media screen and (max-width: 375px) {
    .stripViewer {
        top: -475px;
        width: 375px;
        height: auto;
    }
}

@media screen and (max-width: 360px) {
    .stripViewer {
        top: -455px;
        width: 360px;
        height: auto;
    }
}

@media screen and (max-width: 320px) {
    .stripViewer {
        top: -405px;
        width: 320px;
        height: auto;
    }
}

.stripViewer .panelContainer {
    /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
    position: relative;
    left: 0;
    top: 0;
    list-style-type: none;
    /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel {
    /* Aqui vai a caixa de texto ---------  Each panel is arranged end-to-end */
    float: left;
    position: relative;
    /*width: 470px;  Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper {
    /* Wrapper to give some padding in the panels, without messing with existing panel width */
    padding: 0;
}

.stripNav {
    /* This is the div to hold your nav (the UL generated at run time) */
    margin: auto;
}

.stripNav ul {
    /* The auto-generated set of links */
    list-style: none;
    overflow-x: auto;
    display: none;
    width: 458px;
    position: relative;
    top: -886px;
    left: 8px;
    z-index: 1000;
}

@media screen and (max-width: 480px) {
    .stripNav ul {
        top: -750px;
        left: 7px;
        width: 380px;
    }
}

@media screen and (max-width: 414px) {
    .stripNav ul {
        top: -650px;
        left: 2px;
        width: 414px;
    }
}

@media screen and (max-width: 375px) {
    .stripNav ul {
        width: 375px;
        top: -591px;
        left: -1px;
    }
}

@media screen and (max-width: 360px) {
    .stripNav ul {
        top: -572px;
        left: -1px;
        width: 360px;
    }
}

@media screen and (max-width: 320px) {
    .stripNav ul {
        width: 320px;
        top: -505px;
        left: 0px;
    }
}

.stripNav ul li {
    /*border-radius:70%;*/
    width: 34px;
    height: 44px;
    float: left;
    margin-right: 1.2px;
    /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

@media screen and (max-width: 480px) {
    .stripNav ul li {
        width: 28px;
    }
}

@media screen and (max-width: 414px) {
    .stripNav ul li {
        width: 28px;
    }
}

@media screen and (max-width: 375px) {
    .stripNav ul li {
        width: 26px;
        line-height: 2em;
        font-size: 10px;
    }
}

@media screen and (max-width: 360px) {
    .stripNav ul li {
        width: 25px;
        height: 44px;
        line-height: 2em;
        font-size: 10px;
    }
}

@media screen and (max-width: 320px) {
    .stripNav ul li {
        width: 22px;
        height: 44px;
        line-height: 1.5em;
        font-size: 10px;
    }
}

.stripNav a {
    /* The nav links */
    font-weight: bold;
    text-align: center;
    color: #000;
    display: block;
    /*padding: 0px 12px;
      border-radius: 100%;*/
    width: 24px;
    height: 24px;
}

@media screen and (max-width: 414px) {
    .stripNav a {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 375px) {
    .stripNav a {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 360px) {
    .stripNav a {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 320px) {
    .stripNav a {
        width: 15px;
        height: 15px;
    }
}

.stripNav li.tab1 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab2 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab3 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab4 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab5 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab6 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab7 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab8 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab9 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab10 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab11 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab12 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li.tab13 a {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}

.stripNav li a:hover {
    background: #f9c84f;
    color: #000;
}

.stripNav li a.current {
    background: #f9c84f;
    color: #000;
    margin-bottom: 15px;
}

.stripNavL,
.stripNavR {
    /* The left and right arrows */
    position: absolute;
    top: 41px;
    text-indent: -9000em;
    z-index: 100000;
    height: 40px;
    width: 40px;
}

@media screen and (max-width: 480px) {
    .stripNavL,
    .stripNavR {
        top: 30px;
    }
}

@media screen and (max-width: 414px) {
    .stripNavL,
    .stripNavR {
        top: 26px;
    }
}

@media screen and (max-width: 375px) {
    .stripNavL,
    .stripNavR {
        top: 15px;
    }
}

@media screen and (max-width: 360px) {
    .stripNavL,
    .stripNavR {
        top: 20px;
        height: 36px;
        width: 36px;
    }
}

@media screen and (max-width: 320px) {
    .stripNavL,
    .stripNavR {
        top: 10px;
        height: 39px;
        width: 39px;
    }
}

.stripNavL a,
.stripNavR a {
    display: block;
    height: 40px;
    width: 40px;
}

.stripNavL {
    left: 40px;
    background: url("../images/arrow-left.png") no-repeat center;
}

@media screen and (max-width: 480px) {
    .stripNavL {
        left: 35px;
    }
}

@media screen and (max-width: 414px) {
    .stripNavL {
        left: 21px;
    }
}

@media screen and (max-width: 375px) {
    .stripNavL {
        left: 17px;
    }
}

@media screen and (max-width: 360px) {
    .stripNavL {
        left: 17px;
    }
}

@media screen and (max-width: 320px) {
    .stripNavL {
        left: 12px;
    }
}

.stripNavR {
    right: 33px;
    background: url("../images/arrow-right.png") no-repeat center;
}

@media screen and (max-width: 480px) {
    .stripNavR {
        right: 23px;
    }
}

@media screen and (max-width: 414px) {
    .stripNavR {
        right: 20px;
    }
}

@media screen and (max-width: 375px) {
    .stripNavR {
        right: 17px;
    }
}

@media screen and (max-width: 360px) {
    .stripNavR {
        right: 19px;
    }
}

@media screen and (max-width: 320px) {
    .stripNavR {
        right: 13px;
    }
}

.fundooo {
    z-index: -1;
    margin: 0;
}

@media screen and (max-width: 480px) {
    .fundooo {
        width: 480px;
        height: auto;
    }
}

@media screen and (max-width: 414px) {
    .fundooo {
        width: 414px;
        height: auto;
    }
}

@media screen and (max-width: 375px) {
    .fundooo {
        width: 375px;
        height: auto;
    }
}

@media screen and (max-width: 360px) {
    .fundooo {
        width: 360px;
        height: auto;
    }
}

@media screen and (max-width: 320px) {
    .fundooo {
        width: 320px;
        height: auto;
    }
}

.datasss {
    width: 560px;
    height: auto;
}

@media screen and (max-width: 480px) {
    .datasss {
        width: 480px;
        height: auto;
    }
}

@media screen and (max-width: 414px) {
    .datasss {
        width: 414px;
        height: auto;
    }
}

@media screen and (max-width: 375px) {
    .datasss {
        width: 375px;
        height: auto;
    }
}

@media screen and (max-width: 360px) {
    .datasss {
        width: 360px;
        height: auto;
    }
}

@media screen and (max-width: 320px) {
    .datasss {
        width: 320px;
        height: auto;
    }
}

.logotipooo {
    width: 535px;
    height: 40px;
    position: absolute;
    top: 1277px;
    left: 13px;
}

@media screen and (max-width: 480px) {
    .logotipooo {
        width: 480px;
        height: auto;
        top: 480px;
        left: 9px;
    }
}

@media screen and (max-width: 414px) {
    .logotipooo {
        width: 404px;
        height: auto;
        top: 996px;
        left: 0;
    }
}

@media screen and (max-width: 375px) {
    .logotipooo {
        width: 358px;
        height: auto;
        top: 896px;
        left: 9px;
    }
}

@media screen and (max-width: 360px) {
    .logotipooo {
        width: 343px;
        height: auto;
        top: 866px;
        left: 0;
    }
}

@media screen and (max-width: 320px) {
    .logotipooo {
        width: 300px;
        height: 22px;
        top: 785px;
        left: 1px;
    }
}

.saibamaisss {
    width: 208px;
    height: 33px;
    position: absolute;
    top: 838px;
    left: 174px;
    z-index: -1000;
}

@media screen and (max-width: 480px) {
    .saibamaisss {
        top: 728px;
        left: 136px;
    }
}

@media screen and (max-width: 375px) {
    .saibamaisss {
        top: 578px;
        left: 85px;
    }
}

@media screen and (max-width: 360px) {
    .saibamaisss {
        top: 548px;
        left: 82px;
    }
}

@media screen and (max-width: 320px) {
    .saibamaisss {
        width: 150px;
        height: 24px;
        top: 517px;
        left: 84px;
    }
}

.btnsss {
    width: 560px;
    height: auto;
}

@media screen and (max-width: 480px) {
    .btnsss {
        width: 480px;
        height: auto;
    }
}

@media screen and (max-width: 375px) {
    .btnsss {
        width: 375px;
        height: auto;
    }
}

@media screen and (max-width: 360px) {
    .btnsss {
        width: 360px;
        height: auto;
    }
}

@media screen and (max-width: 320px) {
    .btnsss {
        width: 320px;
        height: auto;
    }
}

.thumbs {
    float: left;
    cursor: pointer;
}

.thumbs {
    float: left;
    cursor: pointer;
}

.btn-thumbs-1,
.btn-thumbs-2,
.btn-thumbs-3,
.btn-thumbs-4 {
    width: 150px;
    height: 150px;
}

@media screen and (max-width: 480px) {
    .btn-thumbs-1,
    .btn-thumbs-2,
    .btn-thumbs-3,
    .btn-thumbs-4 {
        width: 150px;
        height: 150px;
        /*margin:10px 0 10px 15px;*/
    }
}

@media screen and (max-width: 360px) {
    .btn-thumbs-1,
    .btn-thumbs-2,
    .btn-thumbs-3,
    .btn-thumbs-4 {
        width: 150px;
        height: 150px;
    }
}

@media screen and (max-width: 320px) {
    .btn-thumbs-1,
    .btn-thumbs-2,
    .btn-thumbs-3,
    .btn-thumbs-4 {
        width: 135px;
        height: 135px;
    }
}

#fechar_um,
#fechar_dois,
#fechar_tres {
    position: absolute;
    top: 6px;
    left: 519px;
    cursor: pointer;
}

@media screen and (max-width: 480px) {
    #fechar_um,
    #fechar_dois,
    #fechar_tres {
        left: 424px;
    }
}

@media screen and (max-width: 360px) {
    #fechar_um,
    #fechar_dois,
    #fechar_tres {
        left: 304px;
    }
}

@media screen and (max-width: 320px) {
    #fechar_um,
    #fechar_dois,
    #fechar_tres {
        left: 248px;
    }
}