
/* ==================================================
   FIRST STORY IMAGE
================================================== */

.story-image{

    width:100%;

    padding:0 40px 160px;

    display:flex;
    justify-content:center;

    overflow:hidden;

}


.story-image img{

    width:auto;

    max-width:100%;
    max-height:90vh;

    object-fit:contain;

    display:block;

}


/* ==================================================
   STORY INTRO
================================================== */

.story-intro{

    max-width:800px;

    margin:0 auto;

    padding:140px 40px 160px;

    text-align:center;

}


.story-intro p{

    color:#222;

    font-size:26px;
    font-weight:300;

    line-height:1.5;

}


/* ==================================================
   STORY WIDE IMAGE
================================================== */

.story-wide-image{

    width:100%;

    padding:0 40px 160px;

}


.story-wide-image img{

    width:100%;
    max-width:1400px;

    height:auto;

    margin:auto;

    display:block;

}


/* ==================================================
   STORY QUOTE
================================================== */

.story-quote{

    max-width:800px;

    margin:0 auto;

    padding:160px 40px;

    text-align:center;

}


.story-quote p{

    color:#222;

    font-size:25px;
    font-weight:300;

    line-height:1.5;

}


/* ==================================================
   STORY PHOTO ANIMATION
================================================== */

.story-photo{

    transform:scale(1.08);

    transition:transform 2s ease;

}


.fade.show .story-photo{

    transform:scale(1);

}


/* Primeira imagem com entrada mais cinematográfica */

.story-image .story-photo{

    opacity:0;

    transform:scale(1.06);

    transition:
        opacity 1.5s ease,
        transform 4s ease;

}


.story-image.fade.show .story-photo{

    opacity:1;

    transform:scale(1);

}



/* ==================================================
   PARALLAX
================================================== */

.parallax-image{

    overflow:hidden;

}


.parallax-image img{

    transform:translateY(0) scale(1.03);

    transition:transform .2s linear;

}