/*----------------
ALL EFFECT BANNER
----------------*/

/*Effect style1*/
.banner-effect {
    position: relative ;
    display: block;
    overflow:hidden;  }

.banner-effect1:before {
    width: 100%;
    height: 100%;
    content: "";
    background: #ffffff;
    transition:all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;  }

.banner-effect1:hover:before {
    left: 50%;
    width: 0;
    opacity: 0.5;  }

.banner-effect1:after {
    width: 100%;
    height: 100%;
    content: "";
    background: #ffffff;
    opacity: 0;
    transition:all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;  }

.banner-effect1:hover:after {
    top: 50%;
    height: 0;
    opacity: 0.5;  }

/*Effect style2*/
.banner-effect2:before {
    width: 300%;
    height: 300%;
    border-radius: 100%;
    border:solid 3px #ffc2b3;
    content: "";
    position: absolute;
    z-index: 2;
    transition:all 0.4s ease-out 0s;
    -webkit-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    opacity: 0;
    left: -100%;
    top: -100%;
    background: #ffc2b3;
    visibility: inherit;  }

.banner-effect2:after {
    width: 300%;
    height: 300%;
    border-radius: 100%;
    border:solid 3px #ffffff;
    content: "";
    position: absolute;
    z-index: 1;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s;
    opacity: 0;
    left: -100%;
    top: -100%;
    background: #ffffff;
    visibility: inherit;  }

.banner-effect2:hover:before,
.banner-effect2:hover:after {
    width: 0;
    height: 0;
    opacity: 0.7;
    left: 50%;
    top: 50%;
    visibility: hidden;  }

/*Effect style3*/
.banner-effect3:before {
    background: #ffffff;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    content: "";
    position: absolute;
    z-index: 1;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s;
    opacity: 0.7;
    visibility: hidden;  }

.banner-effect3:hover:before {
    transform: rotate(360deg);
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    visibility: visible;  }

/*Effect style4*/
.banner-effect4:before {
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    width: 0;
    height: 80%;
    border-top: solid 1px #d60d46;
    border-bottom: solid 1px #d60d46;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s;
    visibility: hidden;  }

.banner-effect4:hover:before {
    width: 80%;
    left: 10%;
    visibility: visible;  }

.banner-effect4:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 0;
    border-left: solid 1px #d60d46;
    border-right: solid 1px #d60d46;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s;
    visibility: hidden;  }

.banner-effect4:hover:after {
    height: 80%;
    top: 10%;
    visibility: visible;  }

/*Effect style5*/
.banner-effect5:before{
    width: 0;
    height: 100%;
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    opacity: 0.5;
    background: #98c1d5;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s;  }

.banner-effect5:after{
    width: 0;
    height: 100%;
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    opacity: 0.5;
    background: #98c1d5;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s;  }

.banner-effect5:hover:before,
.banner-effect5:hover:after {
    width: 50%;  }

/*Effect style6*/
.banner-effect6:before,
.banner-effect6:after  {
    width: 50%;
    position: absolute;
    z-index: 1;
    top: -100%;
    left: 0;
    height: 100%;
    content: "";
    opacity: 0.5;
    background: #ffffff;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s; }

.banner-effect6:hover:before{
    top: 0; }

.banner-effect6:after {
    left: inherit;
    bottom: -100%;
    top: inherit;
    right: 0; }

.banner-effect6:hover:after{
    bottom: 0;  }

/*Effect style7*/
.banner-effect7:before,
.banner-effect7:after  {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: -100%;
    height: 50%;
    content: "";
    opacity: 0.5;
    background: #333333;
    transition:all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    -ms-transition: all 0.7s ease-out 0s;
    -moz-transition: all 0.7s ease-out 0s; }

.banner-effect7:hover:before{
    left: 0; }

.banner-effect7:after {
    left: inherit;
    bottom: 0;
    top: inherit;
    right: -100%; }

.banner-effect7:hover:after {
    right:  0;  }

/*Effect style8*/
.banner-effect8:before {
    width: 50%;
    position: absolute;
    z-index: 1;
    top: -100%;
    left: 0;
    height: 100%;
    content: "";
    opacity: 0.5;
    background: #333333;
    transition:all 0.4s ease-out 0s;
    -webkit-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s; }

.banner-effect8:after{
    width: 50%;
    position: absolute;
    z-index: 1;
    top: -100%;
    left: 50%;
    height: 100%;
    content: "";
    opacity: 0.5;
    background: #333333;
    transition:all 0.9s ease-out 0s;
    -webkit-transition: all 0.9s ease-out 0s;
    -ms-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s; }

.banner-effect8:hover:before,
.banner-effect8:hover:after {
    top: 0; }
.banner-effect9 img{
    -webkit-transition: all .4s ease-in;
    transition: all .4s ease-in;
}
.banner-effect9:hover img {
    filter: grayscale(1) blur(3px);
    -webkit-filter: grayscale(1) blur(3px);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}