.bannerHome-topo, .bannerHome-topo::before, .img-effect > div > div.imagem {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.magazine .destaque .titulo a:hover, .magazine .linha-1 .titulo a:hover, .magazine .linha-2 .titulo a:hover, .triangle-down-btn:hover img {
    opacity: .7
}

.header-menu {
    padding: 15px 20px;
    position: fixed;
    width: 100%;
    z-index: 10000;
    transition: background-color .5s ease;
    background-color: transparent
}

.header-menu.scroll {
    background-color: rgba(0, 0, 0, .8)
}

.header-menu.scroll:hover {
    background-color: rgba(0, 0, 0, 1)
}

.bannerHome-topo {
    height: 100vh;
    background-image: url(/assets/frontend/img/banners/banner-topo.jpg);
    overflow: hidden
}

.bannerHome-topo::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-image: url(/assets/frontend/img/banners/banner-capa.png);
    opacity: .7
}

.bannerHome-topo h2 {
    font-family: BebasNeueBold;
    color: #ffffff;
    font-size: 60px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1)
}

.bannerHome-topo h3 {
    font-family: OpenSansSemiBold;
    color: #FFF;
    font-size: 20px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1)
}

.bannerHome-topo .btn {
    padding: 15px 40px;
    border: 1px solid #000;
    font-family: OpenSansBold;
    color: #FFF;
    font-size: 16px;
    background-color: rgba(0, 0, 0, .8);
    cursor: pointer;
    text-transform: uppercase
}

.img-effect > div > div.titulo, h2 {
    font-family: BebasNeueRegular;
    color: #58595B
}

.bannerHome-topo .btn:hover {
    background-color: rgba(0, 0, 0, .3);
    color: #FFF
}

#myVideo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.img-effect {
    margin: 50px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center
}

.img-effect > div {
    float: left;
    width: 38%
}

.img-effect > div > div.imagem {
    float: left;
    width: 100%;
    height: 400px;
    -webkit-clip-path: polygon(0 0, 30% 100%, 100% 100%, 70% 0);
    clip-path: polygon(0 0, 30% 100%, 100% 100%, 70% 0)
}

.img-effect > div > div.titulo {
    font-size: 23px;
    margin-bottom: 15px;
    text-align: center;
    padding-right: 30%
}

.img-effect > div > div.mais {
    position: absolute;
    bottom: 0
}

.img-effect > div:nth-child(1) > div.mais {
    left: 40px
}

.img-effect > div:nth-child(2) > div.mais {
    right: -75px
}

h2 {
    font-size: 35px
}

.info-triangle-down, .info-triangle-up {
    margin: 0 auto;
    text-align: center;
    padding: 0 25%
}

.info-triangle-down .autor, .info-triangle-down .descricao, .info-triangle-up .autor, .info-triangle-up .descricao {
    font-family: OpenSansRegular;
    color: #58595B;
    font-size: 14px
}

.triangle-down-btn {
    margin: 0 auto
}

.triangle-down-btn img {
    height: 40px
}

.triangle-down-btn .title {
    text-align: center;
    font-family: BebasNeueRegular;
    color: #414042;
    font-size: 17px
}

.triangle-down-btn:hover .title {
    color: #DA020A
}

.portefolio {
    float: left;
    width: 100%;
    background-color: #FFF;
    padding: 0 0 30px
}

.portefolio-align-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center
}

.portefolio .item {
    float: left;
    width: 25%;
    text-align: center
}

.portefolio .item:nth-child(2), .portefolio .item:nth-child(3), .portefolio .item:nth-child(4) {
    margin-left: -2%
}

.portefolio .item .imagem {
    width: 295px;
    height: 295px;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%)
}

.portefolio .item .imagem:after {
    content: '';
    background-color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(/assets/frontend/img/ver-mais.png);
    background-size: 60px 60px;
    background-position: center 295px;
    background-repeat: no-repeat;
    -webkit-transition: background-color .5s ease-in-out, background-position .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out, background-position .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out, background-position .5s ease-in-out;
    -ms-transition: background-color .5s ease-in-out, background-position .5s ease-in-out;
    transition: background-color .5s ease-in-out, background-position .5s ease-in-out
}

.magazine .destaque .imagem, .magazine .linha-1 .item .imagem {
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(15% 0, 0 100%, 85% 100%, 100% 0);
    float: left
}

.portefolio .item:hover .imagem:after {
    background-color: rgba(255, 255, 255, .6);
    background-position: center center
}

.portefolio .item .imagem img {
    display: block;
    width: 100%
}

.portefolio .item h3 {
    padding: 20px 10px 0;
    font-family: BebasNeueRegular;
    color: #414042;
    font-size: 25px
}

.portefolio .item .descricao {
    font-family: OpenSansRegular;
    color: #414042;
    font-size: 12px;
    padding: 0 35px
}

.magazine {
    float: left;
    width: 100%;
    background-color: #FFF;
    padding: 30px 0
}

.magazine .destaque {
    height: auto;
    float: left;
    overflow: hidden;
    border:1px solid #ccc;
    padding: 30px;
    margin-bottom: 30px;
}

.magazine .destaque .titulo {
    float: left;
    width: 25%;
    height: 350px;
}

.magazine .destaque .texto {
    float: left;
    width: 25%;
    height: 350px;
    padding-bottom: 0;
    font-family: OpenSansRegular;
    font-size: 12px;
    color: #6D6E71;
    text-align: justify;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-end;
}

.magazine .destaque h3 {
    font-family: BebasNeueRegular;
    color: #414042;
    font-size: 35px
}

.magazine .destaque .titulo .autor {
    font-family: OpenSansRegular;
    color: #DA020A;
    font-size: 12px
}

.magazine .destaque .titulo .data {
    font-family: OpenSansRegular;
    color: #6D6E71;
    font-size: 12px;
    position: absolute;
    bottom: 0
}

.magazine .destaque .titulo a {
    position: absolute;
    bottom: 0;
    right: 10px
}

.magazine .destaque .titulo a img {
    height: 20px
}

.magazine .destaque .imagem {
    width: 50%;
    height: 350px;
    background-size: cover;
    background-position: center center;
    clip-path: polygon(15% 0, 0 100%, 85% 100%, 100% 0);
}

.magazine .linha-1
{
    margin-bottom: 30px;
}

.magazine .linha-1,
.magazine .linha-2
{
    float: left;
    width: 100%;
    overflow: hidden;
}

.magazine .linha-1 .item,
.magazine .linha-2 .item
{
    float: left;
    height: auto;
    border:1px solid #ccc;
    padding: 25px;
}

.magazine .linha-1 .item:nth-child(1),
.magazine .linha-2 .item:nth-child(1)
{
    width: calc(50% - 15px);
    margin-right: 15px;
}

.magazine .linha-1 .item:nth-child(2),
.magazine .linha-2 .item:nth-child(2)
{
    width: calc(50% - 15px);
    margin-left: 15px;
}

.magazine .linha-1 .item .titulo,
.magazine .linha-2 .item .titulo
{
    float: left;
    height: 175px;
}

.magazine .linha-1 .item .titulo,
.magazine .linha-2 .item .titulo
{
    width: 50%
}

.magazine .linha-1 h3,
.magazine .linha-2 h3
{
    font-family: BebasNeueRegular;
    color: #414042;
    font-size: 25px
}

.magazine .linha-1 .titulo .autor,
.magazine .linha-2 .titulo .autor
{
    font-family: OpenSansRegular;
    color: #DA020A;
    font-size: 12px
}

.magazine .linha-1 .titulo .data,
.magazine .linha-2 .titulo .data
{
    font-family: OpenSansRegular;
    color: #6D6E71;
    font-size: 12px;
    position: absolute;
    bottom: 0
}

.magazine .linha-1 .titulo a,
.magazine .linha-2 .titulo a
{
    position: absolute;
    bottom: 0;
    right: 10px
}

.magazine .linha-1 .titulo a img,
.magazine .linha-2 .titulo a img
{
    height: 20px
}

.magazine .linha-1 .item .imagem,
.magazine .linha-2 .item .imagem
{
    width: 50%;
    float: right;
    height: 175px;
    background-position: center center;
    background-size: cover;
    clip-path: polygon(30% 0, 0 100%, 100% 100%, 100% 0)
}

@media (min-width: 500px) and (max-width: 767px) {
    .magazine .linha-1 h3, .magazine .linha-2 h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .bannerHome-topo h2 {
        font-size: 40px;
        padding: 0 10px
    }

    .bannerHome-topo h3 {
        font-size: 25px;
        padding: 0 10px
    }

    .bannerHome-topo .btn {
        font-size: 11px;
        margin: 0 auto 10px;
        padding: 15px 25px
    }

    .homepage-portugal {
        display: block !important;
        position: relative !important;
        margin: 20px auto 0 !important
    }

    .info-triangle-down {
        padding: 0 10px
    }

    .img-effect {
        display: block
    }

    .img-effect > div {
        float: left;
        width: 50%;
        padding: 0 10px
    }

    .img-effect > div > div.titulo {
        padding-right: 0
    }

    .info-triangle-up, .magazine {
        padding: 0 10px
    }

    .img-effect > div > div.imagem {
        height: 240px;
        -webkit-clip-path: polygon(0 0, 15% 100%, 100% 100%, 85% 0);
        clip-path: polygon(0 0, 15% 100%, 100% 100%, 85% 0)
    }

    .img-effect > div > div.mais {
        position: relative;
        float: left;
        width: 100%;
        margin: 20px 0 35px
    }

    .img-effect > div:nth-child(1) > div.mais {
        left: 0
    }

    .img-effect > div:nth-child(2) > div.mais {
        right: 0
    }

    .portefolio-align-flex {
        display: flex;
        flex-wrap: wrap
    }

    .portefolio .item {
        float: left;
        width: 50%;
        padding: 0 10px;
        margin-bottom: 55px
    }

    .portefolio .item .imagem {
        width: 210px;
        height: 210px;
        margin: auto
    }

    .magazine .linha-1 .item:nth-child(1), .magazine .linha-2 .item:nth-child(1) {
        margin-right: 1%
    }

    .portefolio .item:nth-child(2), .portefolio .item:nth-child(3), .portefolio .item:nth-child(4) {
        margin-left: 0
    }

    .magazine .linha-1 .item:nth-child(2), .magazine .linha-2 .item:nth-child(2) {
        margin-left: 1%
    }

    .portefolio .item:last-child {
        margin-bottom: 0
    }

    .magazine {
        padding: 0
    }

    .magazine .destaque{
        border:none;
        padding: 10px;
        margin-bottom: 0;
    }

    .magazine .linha-1 {
        margin-bottom: 0;
    }

    .magazine .linha-1 .item:nth-child(1),
    .magazine .linha-2 .item:nth-child(1)
    {
        width: 100%;
        margin-right: 0;
    }

    .magazine .linha-1 .item:nth-child(2),
    .magazine .linha-2 .item:nth-child(2)
    {
        width: 100%;
        margin-left: 0;
    }

    .magazine .linha-1 .item, .magazine .linha-2 .item {
        border: none;
        padding: 10px;
    }

    .magazine .destaque .titulo {
        float: left;
        width: 100%;
        height: auto;
        text-align: center
    }

    .magazine .destaque h3 {
        font-size: 26px;
        margin-bottom: 3px
    }

    .magazine .destaque .titulo .autor {
        margin-bottom: 3px
    }

    .magazine .destaque .titulo .data {
        font-size: 12px;
        position: relative;
        bottom: 0;
        margin-bottom: 5px
    }

    .magazine .destaque .imagem {
        width: 100%;
        height: 300px;
        -webkit-clip-path: none;
        clip-path: none;
        margin-bottom: 7px
    }

    .magazine .destaque .texto {
        width: 100%;
        height: auto;
        display: block
    }

    .magazine .linha-1 .item {
        height: auto;
        margin-bottom: 20px;
        width: 49%
    }

    .magazine .linha-1 .item .titulo {
        height: 100%
    }

    .magazine .linha-1 .item:nth-child(1) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-1 .titulo .autor, .magazine .linha-1 h3 {
        margin-bottom: 3px
    }

    .magazine .linha-1 .titulo .data {
        position: relative;
        bottom: 0;
        margin-bottom: 5px
    }

    .magazine .linha-1 .item .imagem {
        width: 100%;
        height: 175px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .magazine .linha-1 .item:nth-child(2) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-2 .item {
        width: 49%
    }

    .magazine .linha-2 .item:nth-child(1) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-2 .item .titulo {
        float: left;
        height: auto;
        padding: 15px 0 0
    }

    .magazine .linha-2 .titulo .autor, .magazine .linha-2 h3 {
        margin-bottom: 3px
    }

    .magazine .linha-2 .titulo .data {
        position: relative;
        bottom: 0;
        margin-bottom: 5px
    }

    .magazine .linha-2 .item:nth-child(1) .imagem {
        width: 100%;
        height: 175px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .magazine .linha-2 .item {
        height: auto;
        margin-bottom: 20px
    }

    .magazine .linha-2 .item:nth-child(2) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-2 .item:nth-child(2) .imagem {
        width: 100%;
        height: 175px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .triangle-down-btn img {
        height: 30px
    }

    .triangle-down-btn .title {
        font-size: 11px
    }

    .btn-homepage-mais {
        display: block;
        width: 100%;
        clear: both;
        text-align: center;
        float: left;
        margin: 20px 0
    }

    .btn-homepage-mais img {
        height: 30px;
        margin: auto
    }
}

@media only screen and (max-width: 499.98px) {
    .bannerHome-topo h2 {
        font-size: 25px;
        padding: 0 10px
    }

    .bannerHome-topo h3 {
        font-size: 15px;
        padding: 0 10px
    }

    .homepage-btn-1, .homepage-btn-2 {
        padding: 0 10px;
        display: block !important;
        margin: 0;
        text-align: center
    }

    .homepage-btn-1 a, .homepage-btn-2 a {
        display: block;
        max-width: 230px
    }

    .bannerHome-topo .btn {
        font-size: 11px;
        margin: 0 auto 10px;
        padding: 10px 15px
    }

    .homepage-portugal {
        display: block !important;
        position: relative !important;
        margin: 20px auto 0 !important
    }

    .btn-homepage-mais, .img-effect, .portefolio-align-flex {
        display: block
    }

    .info-triangle-down {
        padding: 0 10px
    }

    .img-effect > div {
        float: left;
        width: 100%;
        padding: 0 10px
    }

    .img-effect > div > div.titulo {
        padding-right: 0
    }

    .info-triangle-up, .magazine {
        padding: 0 10px
    }

    .img-effect > div > div.imagem {
        height: 240px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .img-effect > div > div.mais {
        position: relative;
        float: left;
        width: 100%;
        margin: 20px 0 35px
    }

    .img-effect > div:nth-child(1) > div.mais {
        left: 0
    }

    .img-effect > div:nth-child(2) > div.mais {
        right: 0
    }

    .portefolio .item {
        float: left;
        width: 100%;
        padding: 0 10px;
        margin-bottom: 55px
    }

    .portefolio .item .imagem {
        width: 265px;
        height: 265px;
        margin: auto
    }

    .portefolio .item:nth-child(2), .portefolio .item:nth-child(3), .portefolio .item:nth-child(4) {
        margin-left: 0
    }

    .portefolio .item:last-child {
        margin-bottom: 0
    }


    .magazine {
        padding: 0
    }

    .magazine .destaque{
        border:none;
        padding: 10px;
        margin-bottom: 0;
    }

    .magazine .linha-1 {
        margin-bottom: 0;
    }

    .magazine .linha-1 .item:nth-child(1),
    .magazine .linha-2 .item:nth-child(1)
    {
        width: 100%;
        margin-right: 0;
    }

    .magazine .linha-1 .item:nth-child(2),
    .magazine .linha-2 .item:nth-child(2)
    {
        width: 100%;
        margin-left: 0;
    }

    .magazine .linha-1 .item, .magazine .linha-2 .item {
        border: none;
        padding: 10px;
    }


    .magazine .destaque .titulo {
        float: left;
        width: 100%;
        height: auto;
        text-align: center
    }

    .magazine .destaque h3 {
        font-size: 26px;
        margin-bottom: 3px
    }

    .magazine .destaque .titulo .autor {
        margin-bottom: 3px
    }

    .magazine .destaque .titulo .data {
        font-size: 12px;
        position: relative;
        bottom: 0;
        margin-bottom: 5px
    }

    .magazine .destaque .imagem {
        width: 100%;
        height: 250px;
        -webkit-clip-path: none;
        clip-path: none;
        margin-bottom: 7px
    }

    .magazine .destaque .texto {
        width: 100%;
        height: auto;
        display: block
    }

    .magazine .linha-1 .item {
        height: auto;
        margin-bottom: 20px
    }

    .magazine .linha-1 .item .titulo {
        height: 100%
    }

    .magazine .linha-1 .item:nth-child(1) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-1 .titulo .autor, .magazine .linha-1 h3 {
        margin-bottom: 3px
    }

    .magazine .linha-1 .titulo .data {
        position: relative;
        bottom: 0;
        margin-bottom: 5px
    }

    .magazine .linha-1 .item .imagem {
        width: 100%;
        height: 175px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .magazine .linha-1 .item:nth-child(2) .titulo, .magazine .linha-2 .item:nth-child(1) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-2 .item .titulo {
        float: left;
        height: auto;
        padding: 15px 0 0
    }

    .magazine .linha-2 .titulo .autor, .magazine .linha-2 h3 {
        margin-bottom: 3px
    }

    .magazine .linha-2 .titulo .data {
        position: relative;
        bottom: 0;
        margin-bottom: 5px
    }

    .magazine .linha-2 .item:nth-child(1) .imagem {
        width: 100%;
        height: 175px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .magazine .linha-2 .item {
        height: auto;
        margin-bottom: 20px
    }

    .magazine .linha-2 .item:nth-child(2) .titulo {
        width: 100%;
        text-align: center
    }

    .magazine .linha-2 .item:nth-child(2) .imagem {
        width: 100%;
        height: 175px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .triangle-down-btn img {
        height: 30px
    }

    .triangle-down-btn .title {
        font-size: 11px
    }

    .btn-homepage-mais {
        width: 100%;
        clear: both;
        text-align: center;
        float: left;
        margin: 20px 0
    }

    .btn-homepage-mais img {
        height: 30px;
        margin: auto
    }
}