img.arrow {
    display: block;

    margin-top: 1.5rem;

    -webkit-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;

    float: right;
}

img.arrow:hover {
    margin-top: 2rem;
}

img.arrow.short-text {
    margin-top: 2rem;

    float: none;
}

img.arrow:hover {
    margin-top: 2.5rem;
}

section.obra {
    width: 80vw;

    position: absolute;
    top: 8em;
    right: 2rem;

    
    padding-bottom: 7.5rem;
}


    section.obra div.obra-text h1 {
        margin-bottom: 2rem;
    }

    section.obra div.obra-text h4 {
        text-transform: uppercase;
        margin-bottom: 1.5rem;
    }
        
    article+article, article+div, div+div {
        margin-top: 7.5rem;
    }

    


section.obra article {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

    /* para páginas Seres e paisagens */

    section.obra article.obra-template div.obra-text h1.subtitle {
        margin-bottom: .5rem;
    }

    section.obra article.obra-template div.obra-image.width img {
        width: 100%;
    }

    section.obra article.obra-template div.obra-image.centered img {
        min-width: auto;
        width: auto;
        height: 100%;
    }

    a.read {
        border-bottom: 1px solid var(--color-primary);
    }
    
    section.obra article.obra-template div.obra-text a {
        display: inline-block;
        margin-top: 1.5rem;
    }

    section.obra-image div.image img {
        -webkit-box-sizing: content-box;
                box-sizing: content-box;
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;

        min-width: 100%;
        min-height: 100%;
    }



section.obra div.obra-image,
section.obra div.obra-text {
    width: 39vw;
    height: auto;

    display: inline-block;
    position: relative;

    margin-top: 0;
    margin-bottom: 3rem;

    overflow: hidden;
}

section.obra div.obra-image img {
    width: auto;
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;

    -webkit-box-sizing: content-box;

            box-sizing: content-box;

    min-width: 100%;
    max-height: 60vh;
}


section.obra div.obra-image div.image {
    width: 100%;
    height: 17rem;

    margin-bottom: 1rem;

    overflow: hidden;
}

/* read more action */

div.obra-text p {
    line-height: 1.5;
}

span.ficha-tecnica {
    font-size: .85rem;
}



/* Outras páginas
****************************************************/


section.obra.obra2 {
    left: 2rem;
    width: auto;
}


section.obra.obra2 div.obra-text {
    margin-left: 6rem;
}


/* START hovered image ***********************/


div.obra-image img+div.hovered{
    margin-top: .5rem;
}

div.obra-image div.hovered {
    width: 100%;
    height: 16rem;

    margin-bottom: 1rem;
}

div.obra-image div.hovered img {
    width: 100%;
    height: auto;

    min-height: 100%;

    -webkit-transform: translateY(-20%);

        -ms-transform: translateY(-20%);

            transform: translateY(-20%);
}

 div.hovered.wide img {
    width: 100%;
    height: auto;

    min-height: 100%;
}



div.hovered {
    width: 100%;

    margin: 0;
    padding: 0;
    line-height: 0;

    display: inline-block;
    position: relative;

    overflow: hidden;
}


div.info {
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;
    margin: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;

    z-index: 6;

    color: transparent;
    text-align: left;

    -webkit-transition: all 0.25s;

    -o-transition: all 0.25s;

    transition: all 0.25s;
}

div.hovered div.info p{
    border-bottom: none;
    padding: 0 0 2rem 2rem;
    line-height: 1.6;

    font-weight: 300;
    color: transparent;
}

div.hovered:hover div.info,
div.hovered:focus div.info {
    background-color: rgba(0, 0, 0, 0.5);
}

div.hovered:hover div.info p,
div.hovered:focus div.info p {
    color: #ffffff;
    border-bottom: none;
}


/* END hovered image ************************/

div.wide {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
}

div.wide img{
    width: 100%;
    height: auto;

    min-width: 100%;
    min-height: 100%;

    -webkit-transform: translateY(-20%);

        -ms-transform: translateY(-20%);

            transform: translateY(-20%);
}

section.obra.obra2 div.galery {
    width: 80vw;
    margin-right: auto;
    margin-left: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

div.galery img {
    width: 25vw;
    height: auto;

    -o-object-fit: cover;

       object-fit: cover;
}

div.galery div.image {
    width: 25vw;
    height: 18vw;

    margin: 0;

    overflow: hidden;
}

div.galery div.image img {
    min-height: 100%;
}

div.galery div.image img.center {
    -webkit-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
            transform: translateY(-25%);
}

body#sala div.galery img.vertical {
    -webkit-transform: translateY(-20%);
        -ms-transform: translateY(-20%);
            transform: translateY(-20%);
}


section.obra.obra2 div.galery.four {
    width: 55vw;
    line-height: 0;
}

section.obra.obra2 div.galery.four div,
section.obra.obra2 div.galery.six div {
    width: 25vw;
    height: 18vw;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

section.obra.obra2 div.galery.four div img {
    -webkit-moz-width: 100%;
    -webkit-moz-height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

section.obra.obra2 div.galery.four div.bottom-line,
section.obra.obra2 div.galery.six div.bottom-line {
    padding: 0;
    margin: 3rem 0 0 0;
}

section div.galery.six {
    width: 80vw;
}

div.single{
    width: 40vw;
    margin: 7.5rem auto;
    text-align: center;
}

div.single img {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}

/*ponto de encontro*/

div.wide.ponto img {
    -webkit-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
            transform: translateY(-25%);
}

/*slider - carousel*/

div.slider-bg {
    position: relative;

    width: 100%;
    height: 90vh; 

    display: -webkit-box; 

    display: -ms-flexbox; 

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background-color: #e4e4e4;

    overflow: hidden;

    margin-bottom: 7.5rem;
}

div.slider {
    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;
  
}

div.slider div.image {
    min-width: 100%;

    margin: 0 5rem 0 0;
    padding: 0;

    font-size: .875rem;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
}

div.slider div.image img {
    max-width: 30vw;
    width: 25vw;
    max-height: 75vh;
    height: auto;

    margin: 0 2rem 0 0;
}

div.slider div.image p {
    width: 20vw;
}

div.slider-bg img#seta-esquerda {
    position: absolute;
    top: 50%;
    left: 4rem;

    cursor: pointer;

    z-index: 310;
}

div.slider-bg img#seta-direita {
    position: absolute;
    top: 50%;
    right: 4rem;

    cursor: pointer;

    z-index: 10;
}

.up-slider {
    -webkit-transform: translateX(0)!important;
        -ms-transform: translateX(0)!important;
            transform: translateX(0)!important;
}

/*parabola*/

div.parabola-final {
    height: 80vh;
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

div.parabola-final div {
    width: 30vw;
    height: auto;
    margin: 0 2rem 0 0;

    overflow: hidden;
}

div.parabola-final div img {
    max-width: 100%;
}

div.parabola-final p {
    width: 30vw;
    margin: 0;
}

/* Image wide effect
***************************************************/

div.hovered,
img.effect {
    cursor: pointer;
}

div#underlay img#closeImage {
    position: fixed;
    top: 2rem;
    right: 2rem;

    cursor: pointer;

    z-index: 30;
}

div#underlay div.image img {
    max-height: 80vh;
    max-width: 90vw;
    width: auto;
    height: auto;

    position: fixed;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

    z-index: 40;
}


.hide {
    display: none;
}


div.slider.up-slider,
div.slider.up-slider div.image {
    position: static;
}

div.slider div.image img.open-wide {
    z-index: 40;
}


.bg-under {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background-color: rgba(0, 0, 0, 0.75);

    z-index: 20;
}


/* Media query
***************************************************/


@media (max-width: 1050px) {
    section.obra {
        width: 100%;
        right: 0;

        padding: 0 2rem 7.5rem 2rem;

        -webkit-box-sizing: border-box;

                box-sizing: border-box;
    }

    section.obra.obra2 {
        width: auto;
        left: 0;
    }

    a.back-to {
        top: 5rem;
        z-index: 19;
    }

    section.obra article.obra-template {
        width: 100%;
    }

    section.obra article.obra-template div.obra-image,
    section.obra article.obra-template div.obra-text {
        width: 45%;
        margin-left: 0;
    }

    body#desvio div.obra-image div.hovered img {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }

    body#sala div.obra-image div.image img {
        width: 100%;
        height: auto;
        min-height: auto;
    }

    section.obra div.obra-image div.image {
        height: 16rem;
    }

    div.hovered.wide, div.wide {
        height: 60vh;
        width: auto;

        min-width: 100%;
    }

    div.wide img {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }

    div.slider div.image {
        margin: 0 4rem 0 0;
    }
    
}

@media (max-width: 800px) {

    section.obra {
        top: 10rem;
    }

    a.back-to {
        top: 6rem;
    }

    section.obra article.obra-template div.obra-image,
    section.obra article.obra-template div.obra-text {
        width: 100%;
    }

    section.obra article.obra-template {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;

        margin-bottom: 7.5rem;
    }

    body#cerrado section.obra article.obra-template {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    section.obra div.obra-image div.hovered,
    section.obra div.obra-image div.image {
        height: 24rem;
    }

    section.obra.obra2 div.galery,
    section.obra.obra2 div.galery.four,
    section.obra.obra2 div.galery.six {
        width: 100%;
    }
    
    section.obra.obra2 div.galery.four div {
        width: 42vw;
        height: 28vh;
    }

    section.obra.obra2 div.galery.six div {
        width: 44vw;
        height: 24vh;
        margin-bottom: 2rem;
    }

    div.galery img {
        width: 29vw;
    }

    div.galery.six img {
        width: 100%;
    }

    div.single {
        width: 80vw;
    }

    section.obra.obra2 div.galery.six div.bottom-line {
        margin-top: 0;
    }

    section.obra div.wide {
        height: 50vh;
    }

    body#ponto div.wide {
        height: 35vh;
    }

    div.slider div.image {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    div.slider div.image img {
        width: auto;
        max-width: 60%;
        margin: 0 0 2rem 0;
    }

    div.slider div.image p {
        width: 60%;
    }

    div.parabola-final {
        height: auto;
    }

    div.parabola-final div,
    div.parabola-final p {
        width: 60%;
    }

}

@media (max-width: 450px) {
    html, body {
        font-size: 87.5%;
    }

    section.obra article.obra-template div.obra-image {
        max-height: 50vh;
    }

    section.obra article.obra-template div.obra-image.centered img {
        width: 100%;
        height: auto;
    }

    section.obra div.obra-image img {
        width: 100%;
        height: auto;
    }

    section.obra {
        padding: 0 1rem 7.5rem 1rem;
    }

    section.obra div.obra-image div.hovered, section.obra div.obra-image div.image, section.obra div.wide {
        height: auto;
    }

    div.hovered.wide img, div.wide img {
        min-height: auto;
    }


    div.galery img {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    div.wide img {
        min-height: auto;
    }

    section.obra.obra2 div.galery.four div, section.obra.obra2 div.galery.six div,
    div.galery div.image {
        width: 100%;
        height: auto;
        max-height: 25vh;        

        margin-bottom: 1.5rem;
    }

    section.obra.obra2 div.galery.four div.bottom-line, section.obra.obra2 div.galery.six div.bottom-line {
        margin: 0 0 1.5rem 0;
    }

    div.wide.ponto img {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }

    div.slider-bg img#seta-esquerda {
        left: 1rem;
    }

    div.slider-bg img#seta-direita {
        right: 1rem;
    }

    div.slider div.image {
        margin: 0 2rem 0 0;
    }

    div.hovered.open-wide,
    div.obra-image div.hovered.open-wide {
        width: 90vw;
        height: auto;
    }

    
}