@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: 420px) {
    p,
    ul {
        width: 430px;
    }
}

@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: #fff;
    color: #000;
    width: 560px;
    height: 1000px;
    overflow-x: hidden;
    text-align: center;
    margin: 0;
}

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

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

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

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

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

.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: 780px;
}

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

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

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

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

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


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

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

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

.stripViewer {
    /* This is the viewing window */
    position: relative;
    top: -893px;
    overflow: hidden;
    margin: auto;
    width: 560px;
    /* Also specified in  .stripViewer .panelContainer .panel  below */
    height: 652px;
    clear: both;
}

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

@media screen and (max-width: 420px) {
    .stripViewer {
        top: -680px;
        width: 420px;
        height: 650px;
    }
}

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

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

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

.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: inline-block;
    width: 560px;
    height:auto;
    position: relative;
    top: -898px;
    left: 10px;
    z-index: 1000;
}

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

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

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

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

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

.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: 420px) {
    .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: 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;
    border-radius: 50%;
    background: #fff;
    color: #000;
}

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

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

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

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

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

.stripNav li.tab7 a {
    border: 2px solid #000;
    border-radius: 50%;
    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: 201px;
    text-indent: -9000em;
    z-index: 100000;
    height: 40px;
    width: 40px;
}

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

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

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

@media screen and (max-width: 360px) {
    .stripNavL,
    .stripNavR {
        top: 134px;
        left: 312px;
        height: 30px;
        width: 30px;
    }
}

@media screen and (max-width: 320px) {
    .stripNavL,
    .stripNavR {
        top: 122px;
        left: 289px;
        height: 30px;
        width: 30px;
    }
}

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 420px) {
    .stripNavR {
        right: 8px;
        left: 363px;
    }
}

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

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

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

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

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

@media screen and (max-width: 420px) {
    .fundooo {
        width: 420px;
        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: 472px;
        height: auto;
    }
}

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

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

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

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

.logotipooo {
    width: 560px;
    height: auto;
    position: absolute;
    top: 915px;
    left: 0px;
}

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

@media screen and (max-width: 420px) {
    .logotipooo {
        width: 412px;
        height: auto;
        top: 675px;
    }
}

@media screen and (max-width: 375px) {
    .logotipooo {
        width: 365px;
        height: auto;
        top: 609px;
    }
}

@media screen and (max-width: 360px) {
    .logotipooo {
        width: 348px;
        height: auto;
        top: 569px;
    }
}

@media screen and (max-width: 320px) {
    .logotipooo {
        width: 315px;
        height: auto;
        top: 533px;
    }
}