.top-banner-slides {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background: #662BBC;
   text-rendering: optimizeLegibility;
   font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   font-family: 'Playfair Display', serif;
   overflow: hidden;
   height: 85px;
   top: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
   position: fixed;
   width: 100%;
   z-index: 99999;
}
.top-banner-slides .banner-layer {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:85px;
	padding: 23px 0;
}

.top-banner-slides .banner-container {
  max-width: 1103px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  height:85px;
}

.slide-shape-pink,
.slide-shape-blue {
  background-color: #EE065E;
	position: absolute;
	z-index: 500;
	top: -96%;
	left: 10%;
	width: 80%;
	height: 200%;
	border-radius: 10px;
  -webkit-transform:translateY(100%) scale(1);
  transform:translateY(100%) scale(1);
  box-shadow:0 3px 10px rgba(0,0,0,0.5);
}


.slide-shape-blue {
  background-color: #0091F8;
	z-index: 1000;
}

.stage-pink .slide-shape-pink,
.stage-blue .slide-shape-pink,
.stage-blue .slide-shape-blue {
   -webkit-transition: 1s cubic-bezier(1,0,1,1);
   transition: 1s cubic-bezier(1,0,1,1);
   
   -webkit-transform:translateY(0) scale(1.3);
   transform:translateY(0) scale(1.3);
}

.top-banner-slides a {
   box-sizing: border-box;
   background: rgba(0,0,0,0);
   color: #fff;
   padding: 27px 0;
   height: 85px;
   text-align: center;
   text-decoration: none !important;
   display: block;
   -webkit-transition: 0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
   transition: 0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
}

.top-banner-slides .logo-slides {
   position: absolute;
   left: 0;
   top: -8px;
   fill: #fff;
   
   -webkit-animation:logo 0.8s 0.75s backwards ease-out;
   animation:logo 0.8s 0.75s backwards ease-out;
}

.top-banner-slides .slides-text {
   font-size: 40px;
   letter-spacing:-0.02em;
   -webkit-animation:text 0.8s 1s backwards ease-out;
   animation:text 0.8s 1s backwards ease-out;
}

.top-banner-slides .slides-button {
   position: absolute;
   right: 0;
   top: -5px;
   
   font-family: 'Source Sans Pro', sans-serif;
   background: #fff;
   color:#662BBC;
   letter-spacing:0.8px;
   line-height: 33px;
   font-size: 26px;
   padding: 7px 26px 9px;
   border-radius:30px;
   
   -webkit-transition: 0.35s;
   -moz-transition: 0.35s;
   -o-transition: 0.35s;
   transition: 0.35s;
   
   -webkit-animation:button 0.8s 1.25s backwards ease-out;
   animation:button 0.8s 1.25s backwards ease-out;
}

.banner-layer.stage3 .slides-text {
	position: relative;
	top: -6px;
}

.banner-layer.stage3 .slides-text svg {
  vertical-align: middle;
	position: relative;
	top: -5px;
	padding: 0 5px;
   
  -webkit-transition: 0.35s;
  transition: 0.35s;
}

.top-banner-slides:hover .banner-layer.stage3 .slides-text svg {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

.banner-layer.stage2 .slides-button {
   color:#EE065E;
}

.banner-layer.stage3 .slides-button {
   color:#0091F8;
}

/* animation */
.banner-layer {
   display:none;
}

.top-banner-slides.stage-purple .stage1,
.top-banner-slides.stage-pink .stage1,
.top-banner-slides.stage-pink .stage2,
.top-banner-slides.stage-blue .stage2,
.top-banner-slides.stage-blue .stage3 {
   display:block;
}

.top-banner-slides.stage-pink .stage2 {
   z-index:750;  
}

.top-banner-slides.stage-blue .stage3 {
   z-index:1250;  
}

/* close-icon */
.top-banner-slides .close-icon {
  height: 40px;
  width: 40px;
  display:block;
  position:absolute;
  top:23px;
  right:0px;

  stroke:#fff;
  cursor:pointer;
  opacity:0;
  z-index:2000;

  -webkit-transition:0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
  transition:0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
}

.top-banner-slides:hover .close-icon {
    opacity:1;
    right:30px;
}

.top-banner-slides .close-icon .circle,
.top-banner-slides .close-icon .progress  {
    opacity:0;
}

.top-banner-slides:hover .close-icon .circle {
    opacity:0.05;
}

.top-banner-slides:hover .progress {
    -webkit-transition:0.5s;
    transition:0.5s;
}

.top-banner-slides .close-icon .progress {
    stroke-dasharray:0,120;
}

.top-banner-slides:hover .close-icon .progress {
    stroke-dasharray:25,120;
}

.top-banner-slides:hover  .close-icon .progress {
   opacity:1;
}

.top-banner-slides .close-icon:hover .progress {
    stroke-dasharray:90,120;
    -webkit-transition:0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
    transition:0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
}

.top-banner-slides .close-icon:active .progress {
    opacity:1;
    stroke-dasharray:120,120;
}

@-webkit-keyframes logo { 0% { -webkit-transform:scale(0.8); transform:scale(0.8); opacity:0;} }
@keyframes logo { 0% { transform:scale(0.8); opacity:0;} }

@-webkit-keyframes button { 0% { transform:translateX(-40px); -webkit-transform:translateX(-40px); opacity:0; } }
@keyframes text { 0% { transform:translateX(-40px); opacity:0; } }

@-webkit-keyframes button { 0% { -webkit-transform:scale(0.8); transform:scale(0.8); opacity:0; } }
@keyframes button { 0% { transform:scale(0.8); opacity:0; } }

@media screen and (max-width: 1108px) {
  .top-banner-slides { display: none; }
}