.firstSlideRow {
    position: absolute;
    width: 100%;
    height: 100%
}

.firstSlideContent, .firstSlideTitle {
    text-align: left;
    color: #fff
}

nav > ul > li.has-child > span {
    margin-bottom: 20px
}

.firstSlideTitle {
    font-size: 34px;
    font-family: 'Neo Sans Medium';
    z-index: 4000;
    position: relative;
    text-shadow:4px 1px 3px #000;
}

.firstSlideContent {
    font-size: 16px;
    z-index: 4000;
    position: relative;
    text-shadow: 2px 2px 4px #000
}

.mainSlide {
    width: 100%;
    padding-right: 5%;
    padding-left: 5%;
    top: 0;
    height: 100%
}

    .mainSlide > .row > div {
        height: 210px;
        position: relative
    }

        .mainSlide > .row > div > img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            left: 15px;
            right: 15px;
            max-height: 100%;
            max-width: calc(100% - 30px);
            margin: auto
        }

.slideRow {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

.slideMain {
    text-align: center;
    height: 100%
}

#divFixFullWidth {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 375px;
    overflow: hidden
}

#imageBackground {
    z-index: 3000;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0)
}

.arrowLeft, .arrowRight {
    top: 85%
}

#rightArrowSecond {
    top: 50%
}

#leftArrowSecond {
    top: 50%
}

#secondSlideshow {
    height: 320px;
    margin-bottom: 75px
}

#secondSliderFixFull {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 260px
}

.linksPlus {
    max-width: 25px;
    vertical-align: middle
}

#linksOuter {
    height: 75px;
    bottom: 50px;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0
}

#fixFullWidthLink {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 75px;
    background-color: #fff
}

#linksContainer {
    display: block;
    text-align: center;
    font-size: 16px;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

    #linksContainer a, #linksContainer a:visited {
        color: #000;
        display: inline-block
    }

svg > .bolaExterior {
    stroke: #d9d9d9;
    stroke-width: 3
}

svg > .bolaInterior {
    fill: #fff
}

.bola {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

svg > .lineUnder {
    stroke: #d9d9d9;
    stroke-width: 3
}

svg > .bolaUnder {
    fill: #d9d9d9
}

.bolaTextoDiv {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0)
}

.bolaValue {
    display: block;
    line-height: 1;
    font-size: 42px
}

.bolaUnits, .bolaValue {
    font-family: 'Neo Sans Medium';
    color: #77ca4f;
    font-weight: 700
}

.textoOver {
    font-family: 'Neo Sans Medium';
    color: #0a5b7b;
    position: absolute;
    bottom: 52%;
    right: 28%;
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    max-width: 150px
}

.textoBelow {
    font-family: 'Neo Sans Medium';
    color: #0a5b7b;
    position: absolute;
    bottom: 52%;
    right: 26%;
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    max-width: 150px
}

    .textoBelow :hover {
        cursor: pointer
    }

.titleFeatured {
    font-family: 'Neo Sans Medium';
    font-size: 22px;
    color: #0a5b7b;
    font-weight: 700;
    display: block;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px
}

.subtitleFeatured {
    font-family: 'Neo Sans Medium';
    font-size: 16px;
    color: #acacac;
    display: block;
    text-align: left
}

.bodyFeatured {
    font-size: 16px;
    display: block;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
    max-height: 3.6em;
    line-height: 1.2em;
    overflow: hidden
}

.contentorImageHome {
    height: 50px;
    float: left
}

@media only screen and (min-device-width :768px) and (max-device-width :1024px) {
    #linksContainer a {
        text-align: center
    }

    .featuredImg {
        max-height: 200px
    }

    #imageBackground {
        height: 375px;
        width: 100% !important;
        max-width: initial !important
    }

    .firstSlideTitle {
        font-size: 24px;
        padding-left: 40px;
        padding-right: 40px
    }

    .firstSlideContent {
        font-size: 12px;
        padding-left: 40px;
        padding-right: 40px
    }

    .arrowLeft, .arrowRight {
        top: initial
    }

    #rightArrowSecond {
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        top: 44%
    }

    #leftArrowSecond {
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        top: 44%
    }

    .mainSlide {
        padding-right: 7%;
        padding-left: 7%
    }

    #secondSlideshow {
        height: initial;
        margin-bottom: 0 !important
    }

    #secondSliderFixFull {
        position: static;
        height: initial
    }

    .slideRow {
        position: static;
        top: initial;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        margin-bottom: 15px
    }

    .mainSlide > .row > div:not(:last-of-type) {
        margin-bottom: 15px
    }

    .mainSlide > .row > div:nth-of-type(2) {
        height: initial
    }

    #fixFullWidthLink {
        position: static;
        height: 70px
    }

    header {
        background-color: #fff
    }

    .bodyContainer {
        margin-top: 80px !important
    }

    .bolaTextoDiv {
        max-width: 25vw;
        max-height: 25vw;
        overflow: hidden
    }

    .textoOver {
        max-width: 40vw;
        font-size: 14px
    }

    .textoBelow {
        max-width: 40vw;
        font-size: 14px
    }

    .bolaValue {
        font-size: 2.8vw
    }

    .bolaUnits {
        font-size: 2vw
    }

    .bodyFeatured {
        font-size: medium;
        line-height: 1.2em;
        height: 3.6em;
        overflow: hidden
    }

    .subtitleFeatured {
        font-size: 12px
    }

    .titleFeatured {
        font-size: 16px
    }

    #linksOuter {
        bottom: 100px !important;
        height: 70px
    }

    #linksContainer {
        text-align: left !important;
        max-width: 90%;
        overflow: hidden
    }

        #linksContainer a {
            width: 100%
        }

            #linksContainer a > span {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                max-width: calc(100% - 30px);
                display: inline-block;
                vertical-align: middle;
                font-size: 14px
            }

            #linksContainer a:not(:nth-of-type(1)) {
                display: none
            }
}

@media (max-width:1025px) {
    .Showing {
        overflow: initial !important
    }
}

@media (max-width:1133px) {
    #linksOuter {
        position: initial
    }
}

@media (max-width:1200px) {
    .contentorImageHome {
        height: 40px;
        float: none
    }
}

@media (max-width:991px) {
    .bolaValue {
        font-size: 6vw !important
    }

    .bolaUnits {
        font-size: 4vw !important
    }

    .arrowLeft, .arrowRight {
        top: initial !important
    }

    .bola {
        display: none
    }
}

@media (max-width:992px) {
    .textoOver {
        max-width: 40vw;
        bottom: 65%;
        transform: translate(50%,50%);
        -webkit-transform: translateY(50%,50%);
        -moz-transform: translateY(50%,50%)
    }

    .textoBelow {
        max-width: 40vw;
        bottom: 50%;
        transform: translate(50%,50%);
        -webkit-transform: translateY(50%,50%);
        -moz-transform: translateY(50%,50%);
        right: 24%
    }

    .firstSlideTitle {
        font-size: 24px;
        padding-left: 40px;
        padding-right: 40px
    }

    .firstSlideContent {
        font-size: 12px;
        padding-left: 40px;
        padding-right: 40px
    }

    .arrowLeft, .arrowRight {
        top: initial
    }

    .mainSlide {
        padding-right: 7%;
        padding-left: 7%
    }

    #secondSlideshow {
        height: initial;
        margin-bottom: 0 !important
    }

    #secondSliderFixFull {
        position: static;
        height: initial
    }

    .slideRow {
        position: static;
        top: initial;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        margin-bottom: 15px
    }

    .mainSlide > .row > div:not(:last-of-type) {
        margin-bottom: 15px
    }

    .mainSlide > .row > div:nth-of-type(2) {
        height: initial
    }

    header {
        background-color: #fff
    }

    .bodyContainer {
        margin-top: 80px !important
    }

    .bolaTextoDiv {
        max-width: 25vw;
        max-height: 25vw;
        overflow: hidden
    }

    .bolaValue {
        font-size: 2.8vw;
        padding-top: 5px
    }

    .bolaUnits {
        font-size: 2vw
    }

    .bodyFeatured {
        font-size: medium;
        line-height: 1.2em;
        height: 3.6em;
        overflow: hidden
    }

    .subtitleFeatured {
        font-size: 12px
    }

    .titleFeatured {
        font-size: 16px
    }

    #linksOuter {
        bottom: 100px !important;
        height: 70px
    }

    #linksContainer {
        text-align: left !important;
        max-width: 90%;
        overflow: hidden
    }

        #linksContainer a {
            width: 100%
        }

            #linksContainer a > span {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                max-width: calc(100% - 30px);
                display: inline-block;
                vertical-align: middle;
                font-size: 14px
            }

            #linksContainer a:not(:nth-of-type(1)) {
                display: none
            }
}

@media (max-width:322) {
    .textoBelow {
        -webkit-transform: translate(50%,100%) !important;
        -ms-transform: translate(50%,100%) !important
    }
}

@media only screen and (min-device-width :0px) and (max-device-width :768px) {
    #linksContainer a {
        text-align: center
    }

    .featuredImg {
        max-height: 200px
    }

    .botaoEcoponto {
        margin-top: 4px
    }

    #imageBackground {
        height: 375px;
        width: 100% !important;
        max-width: initial !important
    }
}
