.gyan-animation-box {position: relative;}.gyan-animation-box:before, .gyan-animation-box:after {position: absolute;opacity: 1;content: '';left: 0;top: 0;width: 100%;height: 100%;transition: all 700ms ease;-webkit-transition: all 700ms ease;-ms-transition: all 700ms ease;-o-transition: all 700ms ease;}.gyan-animation-box-none .gyan-animation-box:before {display: none;}.gyan-animation-box:after {display: none;}.gyan-animation-box-fade .gyan-animation-box:before {opacity: 0;}.gyan-animation-box-fade .gyan-animation-box:hover:before {opacity: 1;}.gyan-animation-box-sb .gyan-animation-box:before, .gyan-animation-box-st .gyan-animation-box:before {-webkit-transform: scaleY(0);-ms-transform: scaleY(0);-moz-transform: scaleY(0);transform: scaleY(0);}.gyan-animation-box-sb .gyan-animation-box:hover:before, .gyan-animation-box-st .gyan-animation-box:hover:before {-webkit-transform: scaleY(1);-ms-transform: scaleY(1);-moz-transform: scaleY(1);transform: scaleY(1);}.gyan-animation-box-sb .gyan-animation-box:before {-webkit-transform-origin: top;-ms-transform-origin: top;-moz-transform-origin: top;transform-origin: top;}.gyan-animation-box-st .gyan-animation-box:before {-webkit-transform-origin: bottom;-ms-transform-origin: bottom;-moz-transform-origin: bottom;transform-origin: bottom;}.gyan-animation-box-sr .gyan-animation-box:before, .gyan-animation-box-sl .gyan-animation-box:before, .gyan-animation-box-br-tsr .gyan-animation-box:before, .gyan-animation-box-br-tsl .gyan-animation-box:before, .gyan-animation-box-br-bsr .gyan-animation-box:before, .gyan-animation-box-br-bsl .gyan-animation-box:before, .gyan-animation-box-br-et .gyan-animation-box:before, .gyan-animation-box-br-eb .gyan-animation-box:before {-webkit-transform: scaleX(0);-ms-transform: scaleX(0);-moz-transform: scaleX(0);transform: scaleX(0);}.gyan-animation-box-sr .gyan-animation-box:hover:before, .gyan-animation-box-sl .gyan-animation-box:hover:before, .gyan-animation-box-br-tsr .gyan-animation-box:hover:before, .gyan-animation-box-br-tsl .gyan-animation-box:hover:before, .gyan-animation-box-br-bsr .gyan-animation-box:hover:before, .gyan-animation-box-br-bsl .gyan-animation-box:hover:before, .gyan-animation-box-br-et .gyan-animation-box:hover:before, .gyan-animation-box-br-eb .gyan-animation-box:hover:before {-webkit-transform: scaleX(1);-ms-transform: scaleX(1);-moz-transform: scaleX(1);transform: scaleX(1);}.gyan-animation-box-sr .gyan-animation-box:before, .gyan-animation-box-br-tsr .gyan-animation-box:before, .gyan-animation-box-br-bsr .gyan-animation-box:before {-webkit-transform-origin: left;-ms-transform-origin: left;-moz-transform-origin: left;transform-origin: left;}.gyan-animation-box-sl .gyan-animation-box:before, .gyan-animation-box-br-tsl .gyan-animation-box:before, .gyan-animation-box-br-bsl .gyan-animation-box:before {-webkit-transform-origin: right;-ms-transform-origin: right;-moz-transform-origin: right;transform-origin: right;}.gyan-animation-box-br-tsr .gyan-animation-box:before, .gyan-animation-box-br-tsl .gyan-animation-box:before, .gyan-animation-box-br-bsr .gyan-animation-box:before, .gyan-animation-box-br-bsl .gyan-animation-box:before, .gyan-animation-box-br-et .gyan-animation-box:before, .gyan-animation-box-br-eb .gyan-animation-box:before {height: 4px;}.gyan-animation-box-br-bsr .gyan-animation-box:before, .gyan-animation-box-br-bsl .gyan-animation-box:before, .gyan-animation-box-br-eb .gyan-animation-box:before {top: auto;bottom: 0;}.gyan-animation-box-br-et .gyan-animation-box:before, .gyan-animation-box-br-eb .gyan-animation-box:before {-webkit-transform-origin: center;-ms-transform-origin: center;-moz-transform-origin: center;transform-origin: center;}.gyan-animation-box-br-tt .gyan-animation-box:before, .gyan-animation-box-br-ttb .gyan-animation-box:before {top: 0;height: 0;}.gyan-animation-box-br-tt .gyan-animation-box:hover:before, .gyan-animation-box-br-ttb .gyan-animation-box:hover:before {top: -10px;height: 10px;width: calc(100% - 30px);margin: 0 15px;transition: all 0.2s ease-in-out;}.gyan-animation-box-br-tb .gyan-animation-box:before, .gyan-animation-box-br-ttb .gyan-animation-box:after {bottom: 0;height: 0;top: auto;display: block;}.gyan-animation-box-br-tb .gyan-animation-box:hover:before, .gyan-animation-box-br-ttb .gyan-animation-box:hover:after {bottom: -10px;height: 10px;width: calc(100% - 30px);margin: 0 15px;transition: all 0.2s ease-in-out;}.gyan-animation-box-co .gyan-animation-box:before, .gyan-animation-box-cs .gyan-animation-box:before {left: 50%;top: 50%;right: 50%;bottom: 50%;width: 0;height: 0;border-radius: 100%;}.gyan-animation-box-co .gyan-animation-box:hover:before, .gyan-animation-box-cs .gyan-animation-box:hover:before {right: 0;top: 0;left: 0;bottom: 0;width: 100%;height: 100%;border-radius: 0;}.gyan-animation-box-cs .gyan-animation-box:before {border-radius: 0;}