/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/



#container {
    width: 100%;
    min-height: 100%;
    margin-top: 10px;
    /*        position: absolute;*/
    /*        display: inline;*/
}

.wrapper {
    margin: 0 auto;
    width: 80%;
}

.story-wrapper {
    margin: 0 auto;
    width: 90%;
}





.story-content {
	display: inline-block;
	padding-left: 5vw;
	padding-right: 10vw;
	width: 40%;
}







/* Masonry grid */
.masonry {
	width: 100%;
	margin: 0 auto;
	 -webkit-box-sizing: border-box;
	         box-sizing: border-box;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-column-gap: 2vw;
       -moz-column-gap: 2vw;
            column-gap: 2vw;
/*	grid-row-gap: 2vw;*/
	-webkit-column-fill: initial;
	   -moz-column-fill: initial;
	        column-fill: initial;
    display: -ms-grid;
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.masonry .brick {
    padding: 0;
	width: inherit;
	outline: 1px solid lightgrey;
/*    margin-bottom: 1.5vw;*/
    display: inline-block;
    /* Fix the misalignment of items */
    vertical-align: top;
    /* Keep the item on the very top */
}

/* Masonry image effects */
.masonry .brick .img {
	    display: block;
     width: 100%;
      height: 100%;
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: cover;
	-webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
	-webkit-perspective: 0;
     -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    
}

/* Masonry image effects */
/*
.masonry .brick .img_overlay {
	display: block;
     width: 100%;
      height: auto;
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: cover;
	-webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
*/

.brick .img:hover, .brick .img:focus {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

/*
.masonry .brick:hover .img {
    opacity: 0.75;
}
*/

.text-container {
    text-align: center;
/*    position: relative;*/
	padding: 10px 0;
/*    top: 50%;*/
}


/* [1] The container */
.img-hover-zoom {
    overflow: hidden;
    /* [1.2] Hide the overflowing of child elements */
    content: '';
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    -webkit-transition: transform 5.5s ease;
    -o-transition: transform 5.5s ease;
    -webkit-transition: -webkit-transform 5.5s ease;
    transition: -webkit-transform 5.5s ease;
    transition: transform 5.5s ease;
    transition: transform 5.5s ease, -webkit-transform 5.5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);

}

.hvrbox,
.hvrbox *,
.hvrbox-press,
.hvrbox-press *{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.hvrbox {
/*    position: relative;*/
/*    display: block;*/
    overflow: hidden;
/*    height: inherit;*/
/*    max-width: 100%;*/
}

.hvrbox-press {
    position: relative;
    display: block;
    overflow: hidden;
    height: inherit;
    max-width: 100%;
}

.hvrbox-press img {
    max-width: 100%;
}

.hvrbox .hvrbox-layer_bottom {
    display: block;
}

.hvrbox-press .hvrbox-layer_bottom {
    display: block;
}

.hvrbox .hvrbox-layer_top,
.hvrbox-press .hvrbox-layer_top {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #AEAEAE;
    padding: 15px;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}



.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top,
.hvrbox-press:hover .hvrbox-layer_top,
.hvrbox-press.active .hvrbox-layer_top{
    opacity: 1;
}

.hvrbox .hvrbox-text,
.hvrbox-press .hvrbox-text{
    text-align: center;
    font-size: 18px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}





/* Masonry on tablets */
@media only screen and (min-width: 800px){
	
	.masonry {
		-webkit-column-count: 2;
		   -moz-column-count: 2;
		        column-count: 2;
	}

	
	.masonry .brick .img {
        height: 50%;
		height: 25vw;
	}

}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
	
	.masonry {
		-webkit-column-count: 3;
		   -moz-column-count: 3;
		        column-count: 3;
		-webkit-column-gap: 1vw;
		   -moz-column-gap: 1vw;
		        column-gap: 1vw;
		grid-row-gap: 1vw;
	}

	.masonry .brick .img {
        height: 35%;
		height: 15vw;
	}
/*
	.text_copy h2 {
    font-size: 1.25em;
	}

	.text_copy h5 {
		font-size: .75em;
	}
*/
}



/* [1] The container */
.img-hover-zoom {
    overflow: hidden;
    /* [1.2] Hide the overflowing of child elements */
    content: '';
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    -webkit-transition: transform 5.5s ease;
    -o-transition: transform 5.5s ease;
    -webkit-transition: -webkit-transform 5.5s ease;
    transition: -webkit-transform 5.5s ease;
    transition: transform 5.5s ease;
    transition: transform 5.5s ease, -webkit-transform 5.5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);

}



img {
    object-fit: cover;
}