body {
    background: #EDEEEF url('fnd.PNG') no-repeat 0 0 fixed;
}

h1 {
    color: #6E6C70;
    font-family: 'Titillium Web', sans-serif;
    font-size: 25pt;
    margin: 0px;
}

h2 {
    color: #C6C8CA;
    font-family: 'Titillium Web', sans-serif;
    font-size: 15pt;
    float: left;
    margin: 0px 50px 0px 50px;
    cursor: pointer;
}

    h2:hover {
        color: #A4A6A8;
    }

    h2.selected {
        color: #383838;
    }

.logo-title h5 {
    color: #006351;
    font-family: 'Titillium Web', sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 25px 0px 0px 20px !important;
    padding: 0px !important;
    float: left;
}

h6 {
    color: #A4A6A8;
    font-family: 'Titillium Web', sans-serif;
    font-size: 8pt;
    font-weight: normal;
    margin: 0px !important;
    padding: 0px !important;
    line-height: 170%;
}

    h6.black {
        color: #828486;
    }

.area-botoes {
    background: url(../images/sombra.png) no-repeat center bottom;
    padding-bottom: 83px;
}

.red {
    /*width: 300px;*/
    height: 320px;
    background-color: #E05314;
    float: left;
    /*margin: 2px;*/
    cursor: pointer;
    padding: 0;
    overflow:hidden;
}

    .red:hover {
        background-color: #F16425;
    }


.red-half {
    width: 148px;
    height: 150px;
    background-color: #E05314;
    float: left;
    margin: 2px;
    cursor: pointer;
}

    .red-half:hover {
        background-color: #F16425;
    }


.green {
    /*width: 300px;*/
    height: 320px;
    background-color: #98C000;
    float: left;
    /*margin: 2px;*/
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

    .green:hover {
        background-color: #A9D111;
    }

.gray {
    /*width: 300px;*/
    height: 320px;
    background-color: #C1C2C5;
    float: left;
    /*margin: 2px;*/
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

    .gray:hover {
        background-color: #D1D2D4;
    }


.gray-half {
    width: 148px;
    height: 150px;
    background-color: #C1C2C5;
    float: left;
    margin: 2px;
    cursor: pointer;
}

    .gray-half:hover {
        background-color: #D1D2D4;
    }

.yellow {
    width: 300px;
    height: 150px;
    background-color: #FFB807;
    float: left;
    margin: 2px;
    cursor: pointer;
}

    .yellow:hover {
        background-color: #FFC918;
    }

.yellow-half {
     /* width: 148px; */
    height: 320px;
    background-color: #FFB807;
    float: left;
    /* margin: 2px; */
    cursor: pointer;
    overflow: hidden;
    padding:0;
}

    .yellow-half:hover {
        background-color: #FFC918;
    }

.blue {
    width: 300px;
    height: 150px;
    background-color: #78CCCD;
    float: left;
    margin: 2px;
    cursor: pointer;
}

    .blue:hover {
        background-color: #89DDDE;
    }

.blue-half {
    width: 148px;
    height: 150px;
    background-color: #78CCCD;
    float: left;
    margin: 2px;
    cursor: pointer;
}

    .blue-half:hover {
        background-color: #89DDDE;
    }

.title-div {
    color: #F6F7F8;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    float: left;
    /* margin: 0px; */
    /* padding: 0px; */
    bottom: 0px;
    text-align: center;
    position: relative;
    top: 293px;
    padding-top: 3px;
    width: 100%;
    height: 30px;
}

#divRedApp {
    margin: auto;
    width: 912px;
    min-height: 462px;
    display: none;
    background-color: #E05314;
    border: 2px solid #C02102;
}

    #divRedApp #button-bar {
        position: relative;
        bottom: 0px;
        height: 32px;
        background-color: #C02102;
        width: 100%;
    }

    #divRedApp div .btnVoltar {
        float: left;
        height: 32px;
        width: 100px;
        background-color: #C02102;
        text-align: center;
        color: #F6F6F6;
        font-family: 'Titillium Web', sans-serif;
        font-size: 10pt;
        line-height: 250%;
        cursor: pointer;
    }

        #divRedApp div .btnVoltar:hover {
            background-color: #A00000;
        }

#divGreenApp {
    margin: auto;
    width: 912px;
    min-height: 462px;
    display: none;
    background-color: #A9D111;
    border: 2px solid #98C000;
}

    #divGreenApp #button-bar {
        position: relative;
        bottom: 0px;
        height: 32px;
        background-color: #98C000;
        width: 100%;
    }

    #divGreenApp div .btnVoltar {
        float: left;
        height: 32px;
        width: 100px;
        background-color: #98C000;
        text-align: center;
        color: #F6F6F6;
        font-family: 'Titillium Web', sans-serif;
        font-size: 10pt;
        line-height: 250%;
        cursor: pointer;
    }

        #divGreenApp div .btnVoltar:hover {
            background-color: #76A000;
        }

#divGrayApp {
    margin: auto;
    width: 912px;
    min-height: 462px;
    display: none;
    background-color: #D1D2D4;
    border: 2px solid #A4A6A8;
}

    #divGrayApp #button-bar {
        position: relative;
        bottom: 0px;
        height: 32px;
        background-color: #A4A6A8;
        width: 100%;
    }

    #divGrayApp div .btnVoltar {
        float: left;
        height: 32px;
        width: 100px;
        background-color: #A4A6A8;
        text-align: center;
        color: #F6F6F6;
        font-family: 'Titillium Web', sans-serif;
        font-size: 10pt;
        line-height: 250%;
        cursor: pointer;
    }

        #divGrayApp div .btnVoltar:hover {
            background-color: #828486;
        }


#divYellowApp {
    margin: auto;
    width: 912px;
    min-height: 462px;
    display: none;
    background-color: #FFC918;
    border: 2px solid #DD9605;
}

    #divYellowApp #button-bar {
        position: relative;
        bottom: 0px;
        height: 32px;
        background-color: #DD9605;
        width: 100%;
    }

    #divYellowApp div .btnVoltar {
        float: left;
        height: 32px;
        width: 100px;
        background-color: #DD9605;
        text-align: center;
        color: #F6F6F6;
        font-family: 'Titillium Web', sans-serif;
        font-size: 10pt;
        line-height: 250%;
        cursor: pointer;
    }

        #divYellowApp div .btnVoltar:hover {
            background-color: #BB7403;
        }

.relative {
    position: relative;
}

.ntf {
    background: url(../images/mercadoria.jpg) no-repeat center bottom;
    background-size: cover;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom:0;

}

    .ntf:hover {
        opacity: 1;
       
    }



.ntfs {
    background: url(../images/ntfs.jpg) no-repeat center bottom;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom:0;
    background-size: cover;

}

    .ntfs:hover {
        opacity: 1;

    }

.frete {
    background: url(../images/logistics.jpg) no-repeat center bottom;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom:0;
    background-size: cover;

}

    .frete:hover {
        opacity: 1;
       
    }

.suport {
    background: url(../images/suport.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
    left: 0;
    bottom:0;
}

    .suport:hover {
        opacity: 1;
    }

.intranet {
    background: url(../images/intranet.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .intranet:hover {
        opacity: 1;
    }

.metso-global {
    background: url(../images/intranet.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .metso-global:hover {
        opacity: 1;
    }

.metso-global {
    background: url(../images/metsoglobal.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .metso-global:hover {
        opacity: 1;
    }

.metso-brasil {
    background: url(../images/metsobrasil.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .metso-brasil:hover {
        opacity: 1;
    }

.sapbi {
    background: url(../images/sapbi.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .sapbi:hover {
        opacity: 1;
    }

.sharepoint {
    background: url(../images/SharePoint.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .sharepoint:hover {
        opacity: 1;
    }

.keyaccounts {
    background: url(../images/keyaccounts.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .keyaccounts:hover {
        opacity: 1;
    }

.dealers {
    background: url(../images/dealers.jpg) no-repeat center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.5s;
}

    .dealers:hover {
        opacity: 1;
    }