@charset "UTF-8";

/* CSS Mobile Document */

@media screen and (max-width:1600px) {
    #reconhecimento .left {
        width: 320px;
    }
    #reconhecimento .right {
        margin-left: 25px;
        width: 460px;
    }
    .break {
        margin: auto 10px !important;
    }
}

@media screen and (max-width:640px) {
    article {
        height: auto;
    }
    header {
        top: 100px;
        width: calc(100% - 50px);
        font-size: 1rem;
        line-height: 16px;
    }
    header nav {
        margin-top: 0;
        font-size: 0.65rem;
    }
    #logo img {
        width: auto;
        height: 55px;
    }
    .logo {
        height: 15px;
    }
    #highlight {
        text-align: left;
    }
    section {
        width: calc(100% - 50px);
    }
    footer nav {
        width: calc(100% - 50px);
        font-size: 1rem;
        margin-top: 50px;
    }
    #reconhecimento .left {
        width: 220px;
    }
    #reconhecimento .right {
        width: 320px;
    }
    #reconhecimento .right h4 {
        line-height: 34px;
    }
    #reconhecimento #olimpico .po img {
        margin: auto -5px;
    }
    #reconhecimento #paralimpico .po li {
        margin: auto -5px;
        vertical-align: bottom !important;
    }
    #reconhecimento #paralimpico .right .po .valignTop {
        vertical-align: top !important;
    }
    #reconhecimento #paralimpico .right .po .valignBottom {
        vertical-align: bottom !important;
    }
    #reconhecimento #paralimpico .ao li {
        margin: auto -4px;
    }
    .valignMiddle {
        vertical-align: middle !important;
        line-height: 40px;
    }
    /* PRODUCTS */
}

@media screen and (max-width:568px) {
    #reconhecimento img {
        width: 95%;
        margin: auto -10px;
    }
    #reconhecimento #olimpico .po img {
        margin: auto -10px;
    }
}

@media screen and (max-width:320px) {
    /* LIMITING FIRST PARAGRAPH 
    section p {
        display: none;
    }
    section p.more {
        display: block;
    }
    section p.more:after {
        content: "+";
        display: block;
        cursor: pointer;
        background-color: #4faa33;
        color: white;
        width: 20px;
        height: 20px;
        text-align: center;
        float: right;
        font-size: 0.95em;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    */
    footer nav a,
    footer nav a:visited {
        display: block;
    }
    #reconhecimento #olimpico .pom {
        margin: auto 25px;
    }
    #reconhecimento img {
        width: auto;
    }
    #reconhecimento #paralimpico img {
        width: 80%;
    }
    #reconhecimento .left {
        width: 150px;
    }
    #reconhecimento .right {
        margin-left: 15px;
        width: 150px;
    }
    #reconhecimento .right h4 {
        line-height: inherit;
    }
    #reconhecimento #paralimpico h4 {
        font-size: 80% !important;
    }
    #reconhecimento #paralimpico .ao {
        width: 200px;
    }
    #reconhecimento #paralimpico .fo li {
        margin: 0 10px !important;
    }
    .break {
        margin: auto -3px !important;
    }
    #reconhecimento nav {
        margin: 25px auto 105px auto;
    }
    #reconhecimento nav a {
        margin-bottom: 3px;
    }
    #reconhecimento li {
        padding: 5px;
        margin: 10px 20px;
    }
    .fo li,
    .f li {
        margin: auto 8px !important;
    }
    .more:hover {
        background-color: #4faa33;
    }
    /*
    #reconhecimento .left {
        float: left;
        width: 48%;
    }
    #reconhecimento .right {
        float: right;
        margin-left: 0;
        width: 46%;
    }
    */
    /* PRODUCTS */
    section h3 {
        font-size: 1.4rem;
    }
    [id*="list"] {
        margin-left: 0;
    }
    .box {
        clear: both;
        display: block;
        margin-bottom: 40px;
        margin-left: 0;
        padding-top: 50px;
        border-top: 1px solid #e4e4e4;
        max-width: 100%;
    }
    .box:first-child {
        border-top: none;
        padding-top: 0;
    }
    .boxImage {
        float: none;
        margin-right: 0;
    }
    .image img {
        width: 100%;
        height: auto;
    }
    .valignTop {
        vertical-align: middle !important;
    }
    .valignTop.force {
        vertical-align: top !important;
    }
    .mobileBottom {
        vertical-align: bottom !important;
    }
    .mobileMiddle {
        vertical-align: middle !important;
        line-height: 60px;
    }
    #paralimpico .mobileMiddle {
        line-height: 35px;
    }
    #paralimpico .bradesco img {
        position: relative;
        top: -15px;
    }
    #paralimpico .embratel img {
        position: relative;
        top: 2px;
    }
    h4.paralimpico {
        line-height: 33px !important;
    }
    #olimpico .coca img,
    #olimpico .atos img {
        position: relative !important;
        top: -5px !important;
    }
}