/** animated work text **/

.animated-work-div {
    justify-content: center;
    display: grid;
    width: 66%;
    margin: 0 auto;
}

.animated-work {
	text-align: center;
	width: 100%;
	height: 12vw;
	display: inline-block;
}

.animated-work span{
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 10vw;
	line-height: 15vw;
	
	position: absolute;
	display: inline-block;
	
    margin: 0px auto;
    left: calc(50% - 16vw);
}

.animated-work span:nth-child(1){
	color: #000;
	z-index: 100;
}

.animated-work span:nth-child(2){
	color: #fff;
	-webkit-text-stroke-width: 0.4vw;
	-webkit-text-stroke-color: black;
	z-index: 99;
}

@keyframes workanimation {
	100% {
		
  }
}

.animated-work.animate span {
  animation: workanimation 1.5s forwards;
}

.animated-work.animate span:nth-child(1) {
  transform: translate(-12vw);
  transition: transform 1330ms ease-in-out;
}

.animated-work.animate span:nth-child(2) {
  transform: translate(16vw);
  transition: transform 1330ms ease-in-out;
}

.work {
position: relative;
}

.work_backend {
    max-width: 90%;
    padding-top: 5vw;
    /* background-image: url(../img/bg_orb.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain; */
    /* margin: 0 auto; */
}

.work .item {
    width: 100%;
    height: auto;
    /* margin-bottom: 30px; */
}

.work .photo {
    width: 100%;
    height: 400px;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;  
}

.masonry { /* Masonry container */
    -webkit-column-count: 2;
  -moz-column-count:2;
  column-count: 2;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
   margin: 1.5em;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}
.item {
    display: inline-block;
    background: #fff;
    /* padding: 1em; */
    /* margin: 0 0 1.5em; */
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* box-shadow: 2px 2px 4px 0 #ccc; */
}
.item img {
    max-width:100%;
    border-radius:5px;
}

@media only screen and (max-width: 500px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 501px) and (max-width: 768px){
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 1201px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

.projecttitle {
    float: left;
    position: relative;
    /* bottom: 60px; */
    left: 25px;
    font-weight: 600;
    font-size: 1em;
    color: #fff;
    visibility: hidden;
    -webkit-transition:1s ease all;
}

.work .item:hover .projecttitle {
    visibility: visible;
    transform: translateY(-60px);
    -webkit-transition:1s ease all;
}

.project-img-gradient{
  position:relative;
  display:inline-block;
  overflow:hidden;
      border-radius:5px;
}

.work .item:hover img {
    transform: scale(1.1);
      transition-duration: 1s;
}

.work .item img {
    transition-duration: 1s;
}

/* 
#002f4b,#dc4225 
Convert HEX to RGBA - http://hex2rgba.devoth.com/
*/
.project-img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.5) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.5) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.project-img-gradient img{
  display:block;
}