/**
* Customize CSS
*
* @author Ajay138
* @version 1.0
*
* "You can add your own style below this comment".
*/

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

/* ---- grid ---- */

.grid {
  background: #FFF;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

@media only screen and (min-width: 1024px) {

  	.grid-sizer,
	.grid-item {
	  width: 33.333%;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  	.grid-sizer,
	.grid-item {
	  width: 50%;
	}
}
@media only screen and (max-width: 768px) {

  	.grid-sizer,
	.grid-item {
	  width: 100%;
	}
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.p-15 {
  padding: 15px;
}

.zmdi.capital {font-family: "Open Sans", sans-serif;}

.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #06A8FF;
    border-right: 5px solid #06A8FF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}