/*------------------------------------------------------------------
[Animate Stylesheet]

Template Name  	: Unisa
Description 	: Unisa Responsive HTML Template
Author      	: TivaTheme
Version     	: 1.0
Created     	: 15/09/2018
-------------------------------------------------------------------*/

.effect > .image-wrap {
  position: relative;
  display: inherit;
  max-width: 100%; }
  .effect > .image-wrap:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: auto;
    background-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.3);
    zoom: 1;
    background-color: transparent\9;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
  .effect > .image-wrap:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    background-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.1);
    zoom: 1;
    background-color: transparent\9;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
  .effect > .image-wrap:hover:before, .effect > .image-wrap:hover:after {
    width: 100%;
    height: 100%; }

.effectbanner {
  position: relative; }
  .effectbanner:before, .effectbanner:after {
    position: absolute;
    content: "";
    display: block;
    z-index: 1;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
  .effectbanner:before {
    height: 1px;
    top: 10px;
    left: 50%;
    right: 50%;
    background-color: #FFFFFF; }
  .effectbanner:after {
    width: 1px;
    top: 50%;
    bottom: 50%;
    background-color: #FFFFFF;
    left: 10px; }
    .rtl .effectbanner:after {
      right: 10px;
      left: auto; }
  .effectbanner > .image-wrap {
    position: relative;
    display: inherit;
    max-width: 100%; }
    .effectbanner > .image-wrap:before, .effectbanner > .image-wrap:after {
      position: absolute;
      content: "";
      display: block;
      z-index: 1;
      -webkit-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out; }
    .effectbanner > .image-wrap:before {
      height: 1px;
      bottom: 10px;
      left: 50%;
      right: 50%;
      background-color: #FFFFFF; }
    .effectbanner > .image-wrap:after {
      width: 1px;
      top: 50%;
      bottom: 50%;
      background-color: #FFFFFF;
      right: 10px; }
      .rtl .effectbanner > .image-wrap:after {
        left: 10px;
        right: auto; }
    .effectbanner > .image-wrap:hover:before {
      left: 10px;
      right: 10px; }
    .effectbanner > .image-wrap:hover:after {
      top: 10px;
      bottom: 10px; }
  .effectbanner:hover:before {
    left: 10px;
    right: 10px; }
  .effectbanner:hover:after {
    top: 10px;
    bottom: 10px; }