@charset "utf-8";

/* CSS Document */





@font-face {
    font-family: 'exo_2_blackregular';
    src: url('../fonts/exo2-black-webfont.eot');
    src: url('../fonts/exo2-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo2-black-webfont.woff2') format('woff2'),
         url('../fonts/exo2-black-webfont.woff') format('woff'),
         url('../fonts/exo2-black-webfont.svg#exo_2_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exo_2bold';
    src: url('../fonts/exo2-bold-webfont.eot');
    src: url('../fonts/exo2-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo2-bold-webfont.woff2') format('woff2'),
         url('../fonts/exo2-bold-webfont.woff') format('woff'),
         url('../fonts/exo2-bold-webfont.svg#exo_2bold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exo_2_lightregular';
    src: url('../fonts/exo2-light-webfont.eot');
    src: url('../fonts/exo2-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo2-light-webfont.woff2') format('woff2'),
         url('../fonts/exo2-light-webfont.woff') format('woff'),
         url('../fonts/exo2-light-webfont.svg#exo_2_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exo_2_mediumregular';
    src: url('../fonts/exo2-medium-webfont.eot');
    src: url('../fonts/exo2-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo2-medium-webfont.woff2') format('woff2'),
         url('../fonts/exo2-medium-webfont.woff') format('woff'),
         url('../fonts/exo2-medium-webfont.svg#exo_2_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exo_2regular';
    src: url('../fonts/exo2-regular-webfont.eot');
    src: url('../fonts/exo2-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo2-regular-webfont.woff2') format('woff2'),
         url('../fonts/exo2-regular-webfont.woff') format('woff'),
         url('../fonts/exo2-regular-webfont.svg#exo_2regular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exo_2_thinregular';
    src: url('../fonts/exo2-thin-webfont.eot');
    src: url('../fonts/exo2-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo2-thin-webfont.woff2') format('woff2'),
         url('../fonts/exo2-thin-webfont.woff') format('woff'),
         url('../fonts/exo2-thin-webfont.svg#exo_2_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



/**/



::-moz-selection { background: #E50457;color: #fff }
::selection { background: #E50457; color: #fff }


.card-img-top {border-radius: 0;}

.text-plink {color: #E50457}



a {transition:all 0.5s}


img { max-width:100%;}



body { 
		
		color:#777777;
		font-size:20px;
		line-height: 1.5;
	   
		font-family: 'exo_2_mediumregular';
}


a { color:#E50457}

a:hover,
a:focus,
a:active  { color:#a8353a; text-decoration:none !important}


strong{ font-family: 'proxima_novabold';}

h1,
h2,
h3,
h4,
h5 { color: #E50457 }

.font-20 p , 
.font-20 {font-size:20px }


.h4 {color: #3D2667; font-size: 22px; }

.wow.fadeIn {visibility:hidden ; }



.homepage {height: 100%;}

/* header */



#main-header-home {  position: absolute; top: 0; width: 100%; z-index: 333}





#main-header {position: static; height: 200px; margin-bottom: 80px;z-index: 999; position: fixed; top: 0; width: 100%; }


#main-header.sticky { position: fixed; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.8); height: auto; border-bottom: 1px solid #ebebeb;  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);}




#main-header.sticky .navbar-brand {       margin: 10px 80px;}

#main-header.sticky .navbar-brand img {width:90px }

#main-header.sticky  .menu-btn { margin-top: 10px; width: 80px; height: 80px;}




.menu-btn {float: right;  display: block; width: 100px; height: 100px; text-align: center; vertical-align: middle;line-height: 100px; cursor: pointer; border-radius: 10px; position: relative; margin-right: 30px; margin-top: 30px; background: #fff}

.menu-btn:hover {background: #fff; background: #3D2667}

.menu-btn img { vertical-align: middle; width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px}

.menu-btn .a2 { display: none}


.menu-btn:hover  .a1 {display: none}
.menu-btn:hover  .a2 {display: inline-block;}


#home-logo-block {text-align: center;  position: relative; position: fixed;top: 50%; width: 100%; margin-top:-180px; z-index: 3}

#logo-intro {text-align: center;vertical-align: middle;}

#logo-intro h3 {font-weight: normal !important; font-size: 26px !important ; margin-top: 4rem;  color: #3D2667;  }


#logo-intro h3  span { background-color: #fff}

#logo-intro p {color:#AAAAAA; font-weight: normal; letter-spacing: 1px}


#logo-intro p span {background-color: #fff}

#menu-icon { width: 100%; }

/* logo  */
.navbar-brand {float: left; margin: 30px 80px;}

.homepage .navbar-brand  {display: none}

/* menu  */
#bt-close-menu { margin: 0 !important; display: inline-block; padding: 35px; position: fixed; top: 30px; right: 30px; z-index: 999; }

#bt-close-menu:hover { transition: 1s all; transform: rotate(90deg)}



/* pushy menu */

.pushy{
    padding: 0;
}

/* submenu */
.pushy  {padding: 0rem; background-color: #3D2667; text-transform: uppercase; overflow: hidden}


.pushy-content  {height:100vh; position: relative; z-index: 3}

.pushy-content  ul {list-style: none; margin: 0; padding: 0; text-align: center;}


.pushy-content  ul  {position: relative;top: 50%; margin-top: -265px}

.pushy-submenu button:hover { color: #fff }


.pushy a {display: inline-block; width: auto; padding: 1rem 50px;}

.pushy a,.pushy-submenu button {color: #fff !important; font-size: 60px; text-transform: capitalize}





.pushy-submenu-open ul {padding-left: 40px}

.pushy ul  a {border-bottom: 11px solid  transparent; position: relative ; }

.pushy ul  a:hover  { border-bottom: 11px solid #E50457}

.pushy ul .active a { padding-left: 30px;border-bottom: 11px solid #E50457;} 

.pushy ul .active a:before  { content: url("../images/svg/menu-active.svg"); display: inline-block; float: left;  margin-right: 1rem; margin-left: -2rem; margin-top: 1.2rem;}

.pushy{
    width: 100%; /* Changed the width to 400px */
}

.pushy-left{
    transform: translate3d(0,-100%,0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}

.pushy-open-left #container,
.pushy-open-left .push {
    transform: translate3d(0, 100%, 0); /* Updated the values */
}





/* footer  */

#copyright {color: #AAAAAA; font-size: 12px;}

#copyright copyright {vertical-align: middle; padding: 0rem 1rem; display: inline-block}

#copyright copyright a {color: #AAAAAA;}

#copyright copyright a:hover {/*color: #E50457*/ text-decoration: underline !important}

#main-footer  {text-align: center; height: 100px; line-height: 100px; z-index: 9 }

.homepage #main-footer {position: fixed; bottom: 0px; text-align: center; width: 100%;}


/*.inner-content {padding-bottom: 100px}*/

.inner-content .container  { position: relative;z-index: 2}

/* Who we are  */
.who-we-are-page .inner-content  {margin-bottom: 100px}

.title-page {margin-bottom: 30px; font-size: 60px}

.title-page h1 {font-size: 60px; display: inline-block; position: relative}

.title-page h1:after {content: url("../images/svg/menu-active.svg") ; display: inline-block; position: absolute; top: -20px ;right: -20px;}

.inner-content section h3 { font-size: 30px}


.ul-styl1 {color: #777777; list-style: none; padding-left: 0; margin-bottom: 30px}

.ul-styl1 li:before   { content: "" ; background-color: #D9D9D9; width: 32px; height: 2px; display:inline-block; margin-right: 1.5rem; margin-bottom: 5px}


/* animaiton  who we are  */

#pink-left-bottom  { width: 220px; height: 180px;position: absolute; top: 70%; left: 30px;}

#pink-right-top { width: 330px; height: 280px;  position: absolute; top: -13%; right: 15%;}


#pink-right-top img { animation-name: pinktopwho; animation-duration: 8s; animation-iteration-count: 
infinite; animation-timing-function: linear; animation-delay: 2s; transition: all 0.5s}

@keyframes pinktopwho {
0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}






#pink-left-bottom img { animation-name: pinkleftwho; animation-duration: 9s; animation-iteration-count: 
infinite; animation-timing-function: linear;  transition: all 0.5s}

@keyframes pinkleftwho {
0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}


#pink-right-bottom2 {  display: block;  bottom: 0px; right: 0px; position: absolute; width: 30%; max-width: 500px;  z-index: 1}


#pink-right-bottom2 img {}


#pink-right-bottom2 img { animation-name: pinkrightwho; animation-duration: 9s; animation-iteration-count: 
infinite; animation-timing-function: linear;  transition: all 0.5s}

@keyframes pinkrightwho {
    0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}



/* what we do  */

#animationtext-slide {height: 300px}

#animationtext-slide h2 {color:#3D2667}

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: 1s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}



#what-plink-top img { animation-name: pinkcenterwhat; animation-duration: 9s; animation-iteration-count: 
infinite; animation-timing-function:linear;  transition: all 0.5s}

@keyframes pinkcenterwhat {
0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}



#what-pink-left-center img { animation-name: pinkleftwhat; animation-duration: 8s; animation-iteration-count: 
infinite; animation-timing-function: linear; animation-delay: 1s; transition: all 0.5s}


@keyframes pinkleftwhat {
    0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}







#what-plink-bottom2 {   bottom: 0%; 
						position: absolute; width: 40%;  right: 0%  ;
					
						z-index: 1; max-width: 1000px; overflow: hidden; height: 50%;
					   
					}

#what-plink-bottom2  img { position: absolute; right: -30%; bottom: -5%}


#what-plink-bottom2  img { animation-name: pinkrightbottom; 
					 animation-duration: 8s; 
					animation-iteration-count: infinite; 
					animation-timing-function: linear; 
					animation-delay: 2s; 
					transition: all 0.5s}


@keyframes pinkrightbottom {
		0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,20px)		}
	20% { transform: rotate(4deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-30px)	}
	60% { transform: rotate(4deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,20px)		}
	90% { transform: rotate(3deg)  translate(-40px,20px)		}
	95% { transform: rotate(3deg)  translate(-10px,10px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}





#what-plink-right img { animation-name: pinkrightwhat; animation-duration: 9s; animation-iteration-count: 
infinite; animation-timing-function:linear;  transition: all 0.5s}

@keyframes pinkrightwhat {
	0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,20px)		}
	20% { transform: rotate(4deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-30px)	}
	60% { transform: rotate(4deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,20px)		}
	90% { transform: rotate(3deg)  translate(-40px,20px)		}
	95% { transform: rotate(3deg)  translate(-10px,10px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}



/* animation text   */
#animation-text1 h2 { color: #3D2667}



/*  contact us  */ 

.contact-form   .form-control,
.contact-form .nonacitve  .form-control { border:0; border-radius: 0; border-bottom: 1px solid #E50457; color: #E50457; background: none}


.contact-form   .form-control::placeholder ,
.contact-form  .nonacitve .form-control::placeholder  { color:  #E50457; } 

.contact-form   .form-control::-webkit-input-placeholder,
.contact-form  .nonacitve .form-control::-webkit-input-placeholder { color:  #E50457; }  /* WebKit, Blink, Edge */

.contact-form   .form-control:-moz-placeholder,
.contact-form  .nonacitve  .form-control:-moz-placeholder { color:  #E50457; }  /* Mozilla Firefox 4 to 18 */

.contact-form    .form-control::-moz-placeholder ,
.contact-form  .nonacitve  .form-control::-moz-placeholder { color:  #E50457; }  /* Mozilla Firefox 19+ */

.contact-form   .form-control:-ms-input-placeholder ,
.contact-form  .nonacitve .form-control:-ms-input-placeholder { color:  #E50457; }  /* Internet Explorer 10-11 */


.contact-form    .form-control::-ms-input-placeholder ,
.contact-form  .nonacitve  .form-control::-ms-input-placeholder { color:  #E50457; }  /* Microsoft Edge */


.contact-form    .form-control:focus,
.contact-form  .nonacitve  .form-control:focus {    color: #495057;
    					background-color: #fff;
   					border-bottom: 1px solid #3D2667;
					box-shadow: none ;
   					 outline: 0; 
   					}



.contact-form   select.form-control,
.contact-form   .nonacitve  select.form-control {background: url("../images/svg/dropdown.svg") no-repeat top right ; background-color: transparent !important}



.contact-form  .nonacitve  .form-control:focus {    color: #fff;
    					background-color: none;
   					border-bottom: 1px solid #fff;
					    box-shadow: 0 0 0 0rem rgba(0,123,255,.0);
   					 outline: 0;
   					}


.contact-form    select.form-control ,
.contact-form   .nonacitve  select.form-control {
 -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	background: url("../images/svg/dropdown.svg") no-repeat 100% 50%; 

}




.contact-form .active  .form-control { border:0; border-radius: 0; border-bottom: 1px solid #fff; color: #fff; background: none}


.contact-form  .active .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:  #fff;
  opacity: 1; /* Firefox */
}


.contact-form  .active .form-control::-webkit-input-placeholder { color:  #fff; }  /* WebKit, Blink, Edge */
.contact-form  .active  .form-control:-moz-placeholder { color:  #fff; }  /* Mozilla Firefox 4 to 18 */
.contact-form  .acitve  .form-control::-moz-placeholder { color:  #fff; }  /* Mozilla Firefox 19+ */

.contact-form  .acitve .form-control:-ms-input-placeholder { color:  #fff; }  /* Internet Explorer 10-11 */
.contact-form  .acitve  .form-control::-ms-input-placeholder { color:  #fff; }  /* Microsoft Edge */



.contact-form  .active  .form-control:focus {    color: #fff;
    					background-color: none;
   					border-bottom: 1px solid #fff;
					    box-shadow: 0 0 0 0rem rgba(0,123,255,.0);
   					 outline: 0;
   					}



.contact-form   .active  select.form-control {
 -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	background: url("../images/svg/dropdown-white.svg") no-repeat 100% 50%; 

}



.contact-form   select.form-control option,
.contact-form  .active select.form-control option {color: #000 !important}

.contact-form  .active button.btn.btn-outline-dange {background-color: #fff; border: 2px solid #fff}

.contact-form  .active button.btn.btn-outline-dange span {transition: all 1s}

.contact-form  .active button.btn.btn-outline-dange:hover span{  position: relative; left: 20px}

.quform-spacer {position: relative}

.quform-errors-wrap {position: absolute; right: 0; top: 5px;}

button.btn.btn-outline-dange {  color: #E50457; border: 2px solid #E50457; height: 40px; width: 200px; background-color: transparent; border-radius: 30px}

button.btn.btn-outline-dange mark {background: none; color: #E50457}

button.btn.btn-outline-dange span {display: inline; padding-left: 10px; padding-right: 0}

button.btn.btn-outline-dange span:after {content: url("../images/svg/icon-arrow.svg"); display: inline; }

button.btn.btn-outline-dange:hover span:after {content: url("../images/svg/icon-arrow-active.svg");display: inline;  }

button.btn.btn-outline-dange:hover {background: #E50457; color: #fff}
button.btn.btn-outline-dange:hover mark {color: #fff}
button.btn.btn-outline-dange:hover img {color: #fff; background-color: #fff}

.active button.btn.btn-outline-dange:hover {border: 2px solid #fff; }
 .active button.btn.btn-outline-dange:hover mark{color: #E50457 !important}

 .active button.btn.btn-outline-dange:hover span:after {content: url("../images/svg/icon-arrow.svg");display: inline;  }



/*Success message*/
.quform-success-message, .quform-outer-no-js .quform-success-message {
	background:url('../quform/images/success.png') no-repeat 14px center ;
	padding: 8px 20px 8px 45px;
	line-height: 18px;
	margin: 10px 0;
	border:0;
	font-weight: normal;
	color: #fff;
}






/* animaiton  what i do */



.what-page  {overflow-x: hidden; position: relative; }

.what-page #copyright { position: relative; }


#what-plink-top {  display: block; top: -15%; right: 20%; position: absolute; width: 40%; transform: rotate(-180deg);z-index: 0; max-width: 820px}


#what-plink-top img { position: relative;  }


#what-plink-right {  display: block; top: 30%; right: 2%; position: absolute; width: 15%;z-index: 1 ; max-width: 220px; transform: rotate(-180deg);}


#what-plink-right img { position: relative;  }


#what-pink-left-center { width: 18%; height: 180px; position: absolute; top: 40%; left: 30px; max-width: 400px }





/* animaiton  home  */
.extra-box {height:100vh; width: 100%;  position: relative; overflow: hidden}

.homepage { position: static; overflow: hidden}



#home-left-white { width: 775px; height: 860; position: absolute; top: -20%; left: -12%;}

#home-left-white img {display: block}


#home-bottom-white {width:1200px; height: 850px;  left: 50%; margin-left: -280px; bottom: -8%;  position: absolute}


#home-bottom-white img {display: block; }



#home-right-white { width: 1200px; height: 850px; position: absolute; top: 15%;  right:-5%;}

#home-right-white img {  display: block}


/* animaiton  ccontact   */

.contact-page .inner-content  {padding-bottom: 0;}

.contact-page .inner-content > .container {position: relative; height: 950px}

.contact-page .inner-content .container > .row {position: relative;z-index: 3}

#contact-pink-center { width: 85%; position: absolute; top:0; right:0; height: 1000px; z-index: 0;}

#contact-pink-center img { display: block}

#contact-pink-bottom { width: 45%; position: absolute;bottom: 0%; right:5%; height: 430px; z-index: 3; transform: rotate(-180deg); }

#contact-pink-bottom img { display: block;  position: relative; bottom: 25%}

.form-group {margin-bottom: 5px; padding-bottom: 0}


#contact-pink-bottom img { animation-name: pinkbottomcontact; animation-duration: 7s; animation-iteration-count: 
infinite; animation-timing-function: linear; animation-delay: 0s; transition: all 0.5s ;}

@keyframes pinkbottomcontact {
0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}


#contact-pink-center img { animation-name: pinktopcontact; animation-duration: 8s; animation-iteration-count: 
infinite; animation-timing-function: ease-in-out; animation-delay: 1s; transition: all 0.5s}


@keyframes pinktopcontact {
0% { transform: rotate(0deg) }
	10% { transform: rotate(3deg)   translate(30px,30px)		}
	20% { transform: rotate(0deg) translate(10px,-10px)	}
	40% { transform: rotate(2deg)  translate(-20px,-20px)	}
	60% { transform: rotate(0deg)  translate(-45px,0px)	 	}
	80% { transform: rotate(-3deg)  translate(-30px,30px)		}
	100% { transform: rotate(0deg) translate(0px,0px)	}
}








/* inner page   */
.inner-page  {padding-top: 250px}

.inner-content { position: relative; overflow: hidden; padding-top: 30px; padding-bottom: 100px}

.bg-right  {  width:220px; height:100%; background-position: right top; background-repeat: repeat-y; position:absolute; right: 15px; top:0;  }


.bullet-icon { width: 100px ; display: table-cell}

.boxer { display: table}


.inner-page  #main-footer {padding: 0;}


.inner-page  #main-footer.sticky { position: fixed; bottom: 0; width: 100%; line-height: normal; height: inherit;background-color: #fff;z-index: 2}


.inner-page  #main-footer.sticky  copyright { padding: 10px 0}

/* animation text  */

#text-slide  {height: 280px}

#text-slide h2 {color: #3D2667; overflow: hidden;position: relative}

#text-slide > div  { transition: 1s all; transition-timing-function: ease-in-out; animation-duration: 6s;  animation-iteration-count: infinite;  animation-delay: 0s; }

#text-slide > div  { opacity: 0;}

#text-slide > div:nth-child(1) {   animation-name:text1}

#text-slide > div:nth-child(2) {   animation-name:plusicon}

#text-slide > div:nth-child(3) {   animation-name:text2}


#text-slide > div:nth-child(4) {  animation-name:text3;/* position: relative;bottom: 50%; */margin-top: 40px}

@keyframes text1 {
  0%   { opacity: 0;}
  1%  { opacity: 0;transform: translate3d(0, -20px,0);}
  3%  { opacity: 1;transform: translate3d(0,0,0);}
	98%	{ opacity: 1;}		
  100% { opacity: 0;}
}


@keyframes plusicon {
  0%   { opacity: 0;}
  20%  { opacity: 0;transform: translate3d(0, -20px,0);}
  23%  { opacity: 1;transform: translate3d(0,0,0);}	 
 98%	{ opacity: 1;}		
  100% { opacity: 0;}
}




@keyframes text2 {
  0%   { opacity: 0;}
  40%  { opacity: 0;transform: translate3d(0, -20px,0);}
  43%  { opacity: 1;transform: translate3d(0,0,0);}
	98%	{ opacity: 1;}		
  100% { opacity: 0;}
}


@keyframes text3 {
  0%   { opacity: 0;}
  60%  { opacity: 0;transform: translate3d(0, -20px,0);}
  63%  { opacity: 1;transform: translate3d(0,0,0);} 
  99%	{ opacity: 1;}		
  100% { opacity: 0;}
}