@charset "utf-8";
/* CSS Document */
@font-face {font-family:Metropolis-Black;src:url(../fonts/Metropolis-Black.otf);}
@font-face {font-family:Metropolis-BlackItalic;src:url(../fonts/Metropolis-BlackItalic.otf);}
@font-face {font-family:Metropolis-Bold;src:url(../fonts/Metropolis-Bold.otf);}
@font-face {font-family:Metropolis-BoldItalic;src:url(../fonts/Metropolis-BoldItalic.otf);}
@font-face {font-family:Metropolis-ExtraBold;src:url(../fonts/Metropolis-ExtraBold.otf);}
@font-face {font-family:Metropolis-ExtraBoldItalic;src:url(../fonts/Metropolis-ExtraBoldItalic.otf);}
@font-face {font-family:Metropolis-ExtraLight;src:url(../fonts/Metropolis-ExtraLight.otf);}
@font-face {font-family:Metropolis-ExtraLightItalic;src:url(../fonts/Metropolis-ExtraLightItalic.otf);}
@font-face {font-family:Metropolis-Light;src:url(../fonts/Metropolis-Light.otf);}
@font-face {font-family:Metropolis-LightItalic;src:url(../fonts/Metropolis-LightItalic.otf);}
@font-face {font-family:Metropolis-Medium;src:url(../fonts/Metropolis-Medium.otf);}
@font-face {font-family:Metropolis-MediumItalic;src:url(../fonts/Metropolis-MediumItalic.otf);}
@font-face {font-family:Metropolis-Regular;src:url(../fonts/Metropolis-Regular.otf);}
@font-face {font-family:Metropolis-RegularItalic;src:url(../fonts/Metropolis-RegularItalic.otf);}
@font-face {font-family:Metropolis-SemiBold;src:url(../fonts/Metropolis-SemiBold.otf);}
@font-face {font-family:Metropolis-SemiBoldItalic;src:url(../fonts/Metropolis-SemiBoldItalic.otf);}
@font-face {font-family:Metropolis-Thin;src: url(../fonts/Metropolis-Thin.otf);}
@font-face {font-family:Metropolis-ThinItalic;src: url(../fonts/Metropolis-ThinItalic.otf);}
@font-face {font-family:montserrat-black;src: url(../fonts/montserrat-black.otf);}
@font-face {font-family:montserrat-semibold;src: url(../fonts/montserrat-semibold.ttf);}
@font-face {font-family:swis721-cn-bt-bold-roman;src: url(../fonts/swis721-cn-bt-bold-roman.ttf);}
@font-face {font-family:swis721-cn-bt-bold;src: url(../fonts/swis721-cn-bt-bold.ttf);}
@font-face {font-family:roboto-regular;src: url(../fonts/roboto-regular.ttf);}
@font-face {font-family:roboto-bold;src: url(../fonts/roboto-bold.ttf);}
@font-face {font-family:swis721;src: url(../fonts/swis721.ttf);}
@font-face {font-family:poppinsregular;src: url(../fonts/poppinsregular.ttf);}
@font-face {font-family:poppins-semibold;src: url(../fonts/poppins-semibold.ttf);}
@font-face {font-family:roboto-regular;src: url(../fonts/roboto-regular.ttf);}
@font-face {font-family:roboto-bold;src: url(../fonts/roboto-bold.ttf);}

body{margin:0px; padding:0px;}
/**==========Header-Start=============**/
header {float: left;width: 100%;height: auto;position: fixed;top:0px;height:130px;background: #f45827;box-shadow: none;z-index: 9 !important;/*border-bottom: 1px solid #ac4e2a;*/}
.headeractive {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fee080+0,ba8428+100 */
background: #f45827; /* Old browsers */
z-index:9;top: 0px;}
.logo{position: absolute;left:50px;width:175px;top:0px;}
.logo img{width:100%;}
header .logo{top:0px;}
.headeractive .logo{top:0px;}
.mobile-nav-button {display:none;width: 35px;position: absolute;margin: 10px;right: 0;top: 20px;z-index: 9999;cursor: pointer;width: 35px;height: 18px;}
.mobile-nav-button .mobile-nav-button__line {width: 100%;height: 4px;background: #fff;position: relative;transition: 1s ease;}
.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) {margin: 0.5rem 0;}
.mobile-nav-button .mobile-nav-button__line--1 {transform: rotate(45deg);top: 13px;position: absolute;width:20px;}
.mobile-nav-button .mobile-nav-button__line--2 {display: none;}
.mobile-nav-button .mobile-nav-button__line--3 {transform: rotate(135deg);top: 13px;position: absolute;width:20px;}
.mobile-menu {display: contents;max-width: 80%;width: 100%;right: -100%;height: 84px;/* background:rgb(78 46 145 / 65%); */position: absolute;z-index: 9998;transition: 0.6s ease;top: 0;opacity: 0;padding:0px 20px;}
.mobile-menu ul {position: relative;top: 0%;transform: translateY(0%); padding: 45px 0px 45px 0px;float: right;margin-right: 45px;margin:0px 0px;}
.mobile-menu ul li {float: left;list-style: none;margin:1px 10px;/*border-style: solid;border-width: 1px;-webkit-border-image: -webkit-linear-gradient(left, rgb(255 255 255 / 0%) 1%, rgb(255 255 255) 50%, rgb(255 255 255 / 0%) 100% ) 0 0 100% 0/0 0 1px 0 stretch;-moz-border-image: -moz-linear-gradient( left, rgb(255 255 255 / 0%) 1%, rgb(255 255 255) 50%, rgb(255 255 255 / 0%) 100% ) 0 0 100% 0/0 0 1px 0 stretch;-o-border-image: -o-linear-gradient(left, rgb(255 255 255 / 0%) 1%, rgb(255 255 255) 50%, rgb(255 255 255 / 0%) 100% ) 0 0 100% 0/0 0 1px 0 stretch;border-image: linear-gradient( to left, rgb(255 255 255 / 0%) 1%, rgb(255 255 255) 50%, rgb(255 255 255 / 0%) 100% ) 0 0 100% 0/0 0 1px 0 stretch;*/}
.mobile-menu ul li a {width: 100%;/* margin: 0 auto; */display: block;text-align: center;text-decoration: none;color: #fff !important;font-size: 18px;padding: 5px 5px;font-family:poppinsregular;letter-spacing:0.5px;font-weight:normal;overflow: hidden;position: relative;margin: 0px 6px;}
.mobile-menu ul li a:after{content: ""; background: #1b1366;width: 100%;height: 100%;position: absolute;right: -100%;top: 0;z-index: -1;transition: 0.4s ease;border-radius:8px;border:none;}
.mobile-menu ul li a:hover{color: #fff !important;}
.mobile-menu ul li a:hover:after{right: 0;}
.mobile-menu img {position: absolute;width: 150px;display: block;left: 50%;top: 3rem;transform: translatex(-50%);padding: 0;text-align: center;}
.mobile-menu--open {right: 0;opacity: 1;}
.headeractive .mobile-menu ul li a{color:#fff !important;}
.headeractive .mobile-menu ul li:last-child a{color:#fff !important;/*border-bottom: 2px solid #361409;*/
background: #1b1366;}
.headeractive .mobile-menu ul li a:after{content: ""; background: #000;width: 100%;height: 100%;position: absolute;right: -100%;top: 0;z-index: -1;transition: 0.4s ease;border-radius:8px;border:none;}
.headeractive .mobile-menu ul li:hover a{color:#fff !important;background:#000;transition: 0.4s ease;border-radius:8px;}
.headeractive .mobile-menu ul li:hover a{color:#fff !important;}
.headeractive .mobile-menu ul li:last-child a.button-rainbow{animation: rainbow 3s infinite, heartbeat 0.6s infinite;background: #623629 !important;
background: -moz-radial-gradient(center, ellipse cover, #623629 1%, #331107 65%, #331107 100%) !important;background: -webkit-radial-gradient(center, ellipse cover, #623629 1%,#331107 65%,#331107 100%) !important;
background: radial-gradient(ellipse at center, #623629 1%,#331107 65%,#331107 100%) !important;filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#623629', endColorstr='#331107',GradientType=1 ) !important;
}

.button-rainbow {animation: rainbow 3s infinite, heartbeat 0.6s infinite;background: #af6a00; /* Old browsers */
background: -moz-linear-gradient(left,  #af6a00 0%, #f7d87d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #af6a00 0%,#f7d87d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #af6a00 0%,#f7d87d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af6a00', endColorstr='#f7d87d',GradientType=1 ); /* IE6-9 */}
.button-rainbow .rainbow {width: 120px;height: 120px;border-radius: 50%;position: absolute;left: 0;right: 0;margin: auto;top: -40px;
transition: 0.5s ease;opacity: 0;transform: rotate(0);color:#000 !important;}
.mobile-menu ul li:last-child a {border-radius: 20px;/*border: 3px solid #000;*/padding: 3px 10px;color: #fff !important;background: #1b1366 ;
/*background: -moz-linear-gradient(left, #af6a00 0%, #f7d87d 100%);background: -webkit-linear-gradient(left, #af6a00 0%,#f7d87d 100%);
background: linear-gradient(to right, #af6a00 0%,#f7d87d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af6a00', endColorstr='#f7d87d',GradientType=1 );*/
}
.mobile-menu ul li:last-child{margin-right:30px;}
.mobile-menu ul li:last-child a{font-size: 20px;   animation-name: blinker;animation-duration: 1s;animation-timing-function: linear;animation-iteration-count: infinite;}  
.mobile-menu ul li:last-child a span{color: #fff;animation: blink 1s linear infinite;font-weight: bold;}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
.headeractive .mobile-menu ul li:last-child a span{color:#fff;}
@keyframes rainbow {
0% {background:#fee080;background: -moz-linear-gradient(top, #fee080 0%, #ba8428 100%);background: -webkit-linear-gradient(top, #fee080 0%,#ba8428 100%);
background: linear-gradient(to bottom, #fee080 0%,#ba8428 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee080', endColorstr='#ba8428',GradientType=0 );}
25% {background: #fee080;background: -moz-linear-gradient(top, #fee080 0%, #ba8428 100%);background: -webkit-linear-gradient(top, #fee080 0%,#ba8428 100%);
background: linear-gradient(to bottom, #fee080 0%,#ba8428 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee080', endColorstr='#ba8428',GradientType=0 );}
50% {background: #fee080;background: -moz-linear-gradient(top, #fee080 0%, #ba8428 100%);background: -webkit-linear-gradient(top, #fee080 0%,#ba8428 100%);
background: linear-gradient(to bottom, #fee080 0%,#ba8428 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee080', endColorstr='#ba8428',GradientType=0 );}
75% {background: #fee080;background: -moz-linear-gradient(top, #fee080 0%, #ba8428 100%);background: -webkit-linear-gradient(top, #fee080 0%,#ba8428 100%);
background: linear-gradient(to bottom, #fee080 0%,#ba8428 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee080', endColorstr='#ba8428',GradientType=0 );}
100% {background: #fee080;background: -moz-linear-gradient(top, #fee080 0%,236 #ba8428 100%);background: -webkit-linear-gradient(top, #fee080 0%,#ba8428 100%);
background: linear-gradient(to bottom, #fee080 0%,#ba8428 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee080', endColorstr='#ba8428',GradientType=0 );}
}
/**==========Header-End=============**/
/**==============Banner-start=================**/
.banner{float:left; width:100%; height:auto;position:relative;margin:75px 0px 0px 0px;}
.banner img{width:100%;}
/**==========Banner-End=============**/

/**=================Container-Content====================**/
.jury-container {float: left;width: 100%;height: auto;margin: 50px 0px;}
.speaker-list {float: left;width: 100%;height: auto;min-height: 375px;text-align: center;}
.speaker-list img {width: 80%;max-width: 200px;transition: 0.3s;}
.speaker-list img:hover {transform: scale(1.1);border-radius:10px;}
.speaker-list h1 {color: #1b1366;text-align: center;margin: 0px 0px;display: inline-block;padding: 10px 5px 0px 5px;font-size:19px;
font-weight: bold;font-family: Metropolis-Bold;line-height: 30px;text-transform: capitalize;border: none;text-align: center;
width: 100%;text-transform:uppercase;}
.speaker-list em {text-align: center;width: 100%;float: left;color: #000;}
.speaker-list p {text-align: center;margin: 0px 0px;text-align: center;font-size: 15px;line-height: 22px;width: 100%;color: #000;}
.view-profilebtn{background: #fff;padding: 5px 30px 4px 30px;text-align: center;color: #1b1366;border-radius: 6px;max-width: 200px;
display: inline-block;transition: 0.25s ease;margin: 10px 0px 0px 0px;border: 2px solid #f45827;}
.view-profilebtn a{font-size:18px;color:#1b1366;font-weight:bold;text-align:center;text-decoration:none;}
.view-profilebtn:hover{transform: scale(1.1);background: #f45827 !important;color:#fff;font-size:18px;}
.view-profilebtn:hover a{color:#fff;}
.profile-mumbai{width: 96%;float:left;margin:50px 0px;}
.profile-mumbai ul, .profile-mumbai1 ul{padding:0px 0px 0px 15px;}
.profile-mumbai ul li {display: block;height: auto;width: 100%;margin-bottom: 3px;position: relative;border-radius: 15px;background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #f2f2f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffffff 0%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffffff 0%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 */
min-height:350px;box-shadow: 0px 15px 10px -15px #111;}
.profile-mumbai ul li:last-child {margin-bottom: 0;}
.profile-mumbai ul li a {color: #000;display: block;width: 100%;height: 100%;text-decoration: none;position: absolute;z-index: 1;}
.profile-mumbai ul li:before {display:none;content: "";position: absolute;background: #ccc;top: 0;left: 0;width: 0;height: 100%;-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;transition: all 0.3s ease-out;border-top-left-radius: 4px;
border-bottom-left-radius: 4px;}
.profile-mumbai ul li:after {content: "";position: absolute;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#77c1d6+0,00a8d7+100 */
background: #1b1366; /* Old browsers */
top: 0;left: 0;width: 0;height: 100%;z-index: 0;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;transition: all 0.3s ease-out;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.profile-mumbai ul li:hover:before {width: 10px;left: -10px;}
.profile-mumbai ul li:hover:after {width: 100%;color:#000 !important;}
.profile-mumbai ul li:hover p, .profile-mumbai ul li:hover h1{color:#fff !important;}
.profile-mumbai1{width:96%;float:left;margin:50px 0px;}
.profile-mumbai1 ul li {display: block;height: auto;width: 100%;margin-bottom: 3px;position: relative;border-radius: 4px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #f2f2f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffffff 0%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffffff 0%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 */
min-height:500px;box-shadow: 0px 15px 10px -15px #111;}
.profile-mumbai1 ul li:last-child {margin-bottom: 0;}
.profile-mumbai1 ul li a {color: #000;display: block;width: 100%;height: 100%;text-decoration: none;position: absolute;z-index: 1;}
.profile-mumbai1 ul li:before {content: "";position: absolute;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#77c1d6+0,00a8d7+100 */
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;display:none;}
.profile-mumbai1 ul li:after {content: "";position: absolute;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#77c1d6+0,00a8d7+100 */
background: #2d2672; /* Old browsers */
top: 0;left: 0;width: 0;height: 100%;z-index: 0;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;transition: all 0.3s ease-out;border-top
-right-radius: 4px;border-bottom-right-radius: 4px;color:#fff;}
.profile-mumbai1 ul li:after a{color:#fff !important;}
.profile-mumbai1 ul li:hover:before {width: 10px;left:-10px;color:#fff !important;}
.profile-mumbai1 ul li:hover:after {width:100%;color:#fff !important;}
.profile-mumbai1 ul li:hover p, .profile-mumbai1 ul li:hover h1{color:#fff !important;}
.profile-mumbai1 ul li:hover a{color:#fff !important;}
.content{padding: 50px 20px; float: left;width: 100%;}
.content h1 {font-size: 25px;color: #1b1366;margin: 0px 0px 20px 0px;padding: 0px 0px;font-weight: bold;text-align: center;}
.content p {font-size: 17px;line-height: 27px;padding: 20px 0px;text-align: justify;}
.content .image {width: 200px;height: 200px;margin: 0 auto;border-radius: 50%;overflow: hidden;box-shadow: 0 10px 20px rgb(0 0 0 / 20%);margin-bottom: 20px;}
.content .image img{width:100%;}
.content1{padding: 50px 20px 0px 20px;float: left;width: 100%;}
.content1 h1 {font-size: 23px;color: #1b1366;margin: 0px 0px 20px 0px;padding: 0px 0px;font-weight: bold;text-align: center;}
.content1 p {font-size:17px;line-height: 27px;padding: 0px 0px 0px 0px;text-align: justify;}
.content1 p:nth-child(2){padding:10px 20px 20px 0px}
.content1 .image {width: 200px;height: 200px;margin: 0 auto;border-radius: 50%;overflow: hidden;
box-shadow: 0 10px 20px rgb(0 0 0 / 20%);margin-bottom: 20px;}
.content1 .image img{width:100%;}
/**=================Content-Section-End====================**/

.gradient-border-golden {float: left;width: 100%;height: 20px;background: #ba8428;background: -moz-linear-gradient(top, #fee080 0%, #ba8428 100%);
background: -webkit-linear-gradient(top, #fee080 0%,#ba8428 100%);background: linear-gradient(to bottom, #fee080 0%,#ba8428 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee080', endColorstr='#ba8428',GradientType=0 );
}
/****==================Footer-Start================**/
footer {float: left;width: 100%;height: auto;font-weight: bold;padding: 50px 20px;background: #1b1366;}
.background-image-seprator-line {background-image: url(../images/pune-images/seprator-line-white.png);background-repeat: no-repeat;background-position: center right;}
.footer-listing {float: left;width: 100%;height: auto;}
.footer-listing h1 {margin: 0px 0px 10px 0px;padding: 0px 30px;float:left;color: #fff;font-size: 20px;text-align: center;
background: #f45827;line-height: 34px;letter-spacing: 0.3px;position: relative;border-radius: 5px;}
.footer-listing h1:hover{background:#fff;color:#000;}
.footer-listing ul {margin: 20px 0px;padding: 0px 0px;float:left;width:100%;}
.footer-listing ul li {float: left;font-size: 18px;color: #fff;list-style: none;border-right:2px solid #fff;padding:0px 20px;}
.footer-listing ul li a:hover{color:#000 !important;text-decoration:none;}
.footer-listing ul li a{font-weight:normal;}
.footer-listing ul li:hover a{color:#000;}
.footer-listing ul li:first-child{padding-left:0px;}
.footer-listing ul li:last-child{padding-right:0px;border-right:none;}
.padding-left60{padding-left: 60px;}
.footer-icon-listing{}
.footer-icon-listing ul{list-style:none;padding:0px 0px;}
.footer-icon-listing ul li{float:left;margin:10px 10px 0px 0px;width:35px; height:34px;}
.footer-icon-listing ul li:nth-child(5){padding: 5px 0px;}
.footer-icon-listing ul li img{vertical-align:middle;width:100%}
.footer-icon-listing ul li:nth-child(2){float:left;width:35px; height:34px;padding:0px 0px 0px 0px;}
html{scroll-behavior: smooth;}
.scroll-to-top {display: -webkit-box;display: -ms-flexbox;display: flex;position: fixed;right: 25px;bottom: 25px;-webkit-box-align: center;-ms-flex-align: center;
align-items: center;justify-content: center;width: 50px;height: 50px;float: right;border-bottom: 2px solid #bd3106;
background: #f45827;z-index: 213212;}
.scroll-to-top:hover {background: #1b1366;border-bottom: 2px solid #1b1366;color: #fff !important;}
svg:not(:root) {overflow: hidden;}
.scroll-to-top-icon {color: #fff;}
.scroll-to-top:hover .scroll-to-top-icon{color:#fff;}
.caret-icon {display: inline-block;width: 1em;fill:currentColor;}
/****==================Footer-End================**/

.btn-10 {color: #fff;border: none;transition: all 0.3s ease;overflow: hidden;}
.btn-10:after {position: absolute;content:" ";top: 0;left: 0;z-index: -1;width: 100%;height: 100%;transition: all 0.3s ease;
 -webkit-transform: scale(.1);transform: scale(.1);}
.btn-10:hover {color: #fff;border: none;background: transparent;}
.btn-10:hover:after {background: rgb(78,0,183);background: linear-gradient(0deg, rgb(78 0 183) 0%,  rgb(186 148 243)100%);
-webkit-transform: scale(1);transform: scale(1);}

/* hover effect */
.hover-effect { position: relative;z-index: 1;overflow: hidden;transition: all .4s;}
.hover-effect:before, .hover-effect:after {position: absolute;top: 50%;content: '';width: 20px;height: 20px;background-color: #3e0097;
border-radius: 50%;z-index: -1;transition: all .4s;}
.hover-effect:before {left: -20px;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.hover-effect:after {right: -20px;-webkit-transform: translate(5
0%, -50%);transform: translate(50%, -50%);}
.hover-effect:hover {color: #e5e3ec;transition: all .3s;}
.hover-effect:hover:before {-webkit-animation: criss-cross-left 0.8s both;animation: criss-cross-left 0.8s both;-webkit-animation-direction: alternate;
animation-direction: alternate;transition: all .3s;}
.hover-effect:hover:after {-webkit-animation: criss-cross-right 0.8s both;animation: criss-cross-right 0.8s both;-webkit-animation-direction: alternate;
animation-direction: alternate;transition: all .3s;}
@keyframes criss-cross-left {
    0% {left: -20px;transition:all .3s;}
    50% {left: 50%;width: 20px;height: 20px;transition: all .3s;}
	100% {left: 50%;width: 500px;height: 500px;transition: all .3s;}
}

@keyframes criss-cross-right {
    0% {right: -20px; transition: all .3s;}
    50% {right: 50%;width:20px;height: 20px;transition: all .3s;}
    100% {right: 50%;width:500px;height: 500px;transition: all .3s;}
}

/* hover effect1 */
.hover-effect1 {position: relative;z-index: 1;overflow: hidden;transition: all .4s;}
.hover-effect1:before, .hover-effect1:after {position: absolute;top: 50%;content: '';width: 20px;height: 20px;background-color: #5b006c;
 border-radius: 50%;z-index: -1;transition: all .4s;}
.hover-effect1:before {left: -20px;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.hover-effect1:after {right: -20px;-webkit-transform: translate(50%, -50%);transform: translate(50%, -50%);}
.hover-effect1:hover {color: #e5e3ec;transition: all .3s;}
.hover-effect1:hover:before {-webkit-animation: criss-cross-left1 0.8s both;animation: criss-cross-left1 0.8s both;-webkit-animation-direction: alternate;
animation-direction: alternate;transition: all .3s;}
.hover-effect1:hover:after {-webkit-animation: criss-cross-right1 0.8s both;animation: criss-cross-right1 0.8s both;
-webkit-animation-direction:alternate;animation-direction: alternate;transition: all .3s;}
@keyframes criss-cross-left1 {
    0% {left: -20px;transition: all .3s;}
    50% {left: 50%;width: 20px;height: 20px;transition: all .3s;}
    100% {left: 50%;width: 500px;height:500px;transition: all .3s;}
}

@keyframes criss-cross-right1 {
    0% {right: -20px;transition: all .3s;}
    50% {right: 50%;width: 20px;height: 20px;transition: all .3s;}
    100% {right: 50%;width: 500px;height: 500px;transition: all .3s;}
}