body {
		font-family: "Handlee", sans-serif;
		background-color: #040404;
		color: #B6FDFF;
		position: relative;
		background: transparent;
		}

		body::before {
		content: "";
		position: fixed;
		background: #040404 url("../img/bg2.jpg") top right no-repeat;
		background-size:cover;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		z-index: -1;
		}

		@media (min-width: 1024px) {
		body::before {
		background-attachment: fixed;
		}
		}

		a {
		color: #AA7CDF;
		text-decoration: none;
		}

		a:hover {
		color: #5FE3FF;
		text-decoration: none;
		}

		h1,
		h2,
		h3,
		h5,
		h6 {
		font-family: "Handlee", sans-serif;text-shadow:1px 1px 3px #000000,-1px -1px 3px #000000,2px -2px 15px #000000;
		}

		h4 {
		font-family: "Handlee", sans-serif;
		}

		/*--------------------------------------------------------------
		# Header
		--------------------------------------------------------------*/
		#header {
		transition: ease-in-out 0.3s;
		position: relative;
		height: 100vh;
		display: flex;
		align-items: center;
		z-index: 997;
		overflow-y: auto;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		align-content: space-around;
		justify-content: space-around;
		}


		#header h1 {
		font-size: 48px;
		margin: 0;
		padding: 0;
		line-height: 1;
		font-weight: 700;
		font-family: "Elsie", sans-serif;
		}

		#header h1 a,
		#header h1 a:hover {
		color: #fff;
		line-height: 1;
		display: inline-block;
		}

		#header h2 {
		font-size: 24px;
		margin-top: 20px;
		color: rgba(255, 255, 255, 0.8);
		}

		#header h2 span {
		color: #fff;
		border-bottom: 3px solid #AA7CDF;
		border-top: 3px solid #7CC4DF;
		padding-bottom: 0px;

		}

		#header img {
		padding-right: 10px;
		margin: 0;
		}

		#header .social-links {
		margin-top: 40px;
		display: flex;
		}

		#header .social-links a {
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
		line-height: 1;
		margin-right: 8px;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		}

		#header .social-links a:hover {
		background: #AA7CDF;
		}

		@media (max-width: 992px) {
		#header h1 {
		font-size: 36px;
		}

		#header h2 {
		font-size: 20px;
		line-height: 30px;
		}

		#header .social-links {
		margin: 15px;
		}

		#header .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		}
		}

		/* Header Top */
		#header.header-top {
		height: 80px;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		}

		#header.header-top .social-links,
		#header.header-top h2 {
		display: none;
		}

		#header.header-top h1 {
		margin-right: auto;
		font-size: 36px;
		}

		#header.header-top img {
		min-height: 50px; 
		min-width:174px;
		margin-right: -12px !important;
		}

		#header.header-top .container {
		display: flex;
		align-items: center;
		}

		#header.header-top .navbar {
		margin: 0;
		}

		@media (max-width: 768px) {
		#header.header-top {

		}

		#header.header-top h1 {
		font-size: 26px;
		}
		}

		/*--------------------------------------------------------------
		# Navigation Menu
		--------------------------------------------------------------*/
		/**
		* Desktop Navigation 
		*/
		.navbar {
		padding: 0;
		margin-top: 35px;
		}

		.navbar ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
		}

		.navbar li {
		position: relative;
		}

		.navbar li+li {
		margin-left: 30px;
		}


		@media screen and (max-width: 992px) {
		.navbar a,
		.navbar a:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		font-family: "Handlee", cursive;
		font-size: 16px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		white-space: nowrap;
		transition: 0.3s;
		}

		}

		@media screen and (min-width: 993px) {

		.navbar a,
		.navbar a:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		font-family: "Handlee", cursive;
		font-size: 18px;
		font-weight: 800;
		text-shadow:1px 1px 3px #000000,-1px -1px 3px #000000,2px -2px 15px #000000;
		white-space: nowrap;
		transition: 0.3s;
		color:#DDC8FF;
		}
		}

		.navbar a i,
		.navbar a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		}

		.navbar a:before {
		content: "";
		position: absolute;
		width: 0;
		height: 2px;
		bottom: -4px;
		left: 0;
		background-color: transparent;
		visibility: hidden;
		width: 0px;
		transition: all 0.3s ease-in-out 0s;	
		-webkit-box-shadow:5px -5px 2px 2px #9ef9ff ,-5px 5px 2px 2px #c885ff ;
		-moz-box-shadow:5px -5px 2px 2px #9ef9ff ,-5px 5px 2px 2px #c885ff ;
		box-shadow:5px -5px 2px 2px #9ef9ff ,-5px 5px 2px 2px #c885ff ;
		}

		.navbar a:hover:before,
		.navbar li:hover>a:before,
		.navbar .active:before {
		visibility: visible;
		width: 25px;
		}

		.navbar a:hover,
		.navbar .active,
		.navbar .active:focus,
		.navbar li:hover>a {
		color: #fff;
		}

		/**
		* Mobile Navigation 
		*/
		.mobile-nav-toggle {
		color: #fff;
		font-size: 28px;
		cursor: pointer;
		display: none;
		line-height: 0;
		transition: 0.5s;
		position: fixed;
		right: 15px;
		top: 15px;
		}

		@media (max-width: 991px) {
		.mobile-nav-toggle {
		display: block;
		}

		.navbar ul {
		display: none;
		}
		}

		.navbar-mobile {
		position: fixed;
		overflow: hidden;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.9);
		transition: 0.3s;
		z-index: 999;
		margin-top: 0;
		}

		.navbar-mobile .mobile-nav-toggle {
		position: absolute;
		top: 15px;
		right: 15px;
		}

		.navbar-mobile ul {
		display: block;
		position: absolute;
		top: 55px;
		right: 15px;
		bottom: 45px;
		left: 15px;
		padding: 10px 0;
		overflow-y: auto;
		transition: 0.3s;
		border: 0px solid rgba(255, 255, 255, 0);
		}

		.navbar-mobile li {
		padding: 12px 20px;
		}

		.navbar-mobile li+li {
		margin: 0;
		}

		.navbar-mobile a,
		.navbar-mobile a:focus {
		font-size: 16px;
		position: relative;
		}

		/*--------------------------------------------------------------
		# Sections General
		--------------------------------------------------------------*/
		section {
		overflow: hidden;
		position: absolute;
		width: 100%;
		top: 140px;
		bottom: 100%;
		opacity: 0;
		transition: ease-in-out 0.4s;
		z-index: 2;
		}

		@media screen and (max-width: 767px) {
		section.section-show {
		top: 100px;
		bottom: auto;
		opacity: 1;
		padding-bottom: 45px;
		display: block;
		margin-right: 2%;
		width:100%;
		}
		}

		@media screen and (min-width: 768px) {
		section.section-show {
		top: 100px;
		bottom: auto;
		opacity: 1;
		padding-bottom: 45px;
		display: block;
		margin-left: 10%;
		margin-right: 10%;
		width:80%;
		}
		}

		section .container {
		border-radius:10px;
		background-image:url("../img/transparent-textures/xv-hm.png") !important;
		opacity: 1;
		background-position:left top;
		background-repeat:repeat;
		background: rgba(24, 18, 35, .90);
		padding:30px;
		margin-bottom:10px;
		}

		@media (max-width: 768px) {
		section {
		top: 120px;
		}

		section.section-show {
		top: 100px;
		}
		}

		.section-title h2 {
		font-weight: 500;
		padding: 0;
		line-height: 1px;
		margin: 0 0 20px 0;
		letter-spacing: 0px;
		color: #fff;
		font-family: "Elsie", sans-serif;
		}

		.section-title h2::after {
		content: "";
		width: 120px;
		height: 1px;
		display: inline-block;
		background: #aa7cdf;
		margin: 4px 10px;
		}

		.section-title p {
		margin: 0;
		font-weight: 500;
		font-family: "Elsie", sans-serif;
		color: #81EEF0;
		}

		/*--------------------------------------------------------------
		# About
		--------------------------------------------------------------*/
		.about-me .content h3 {
		font-weight: 700;
		font-size: 26px;
		color: #AA7CDF;
		}

		.about-me .content ul {
		list-style: none;
		padding: 0;
		}

		.about-me .content ul li {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		}

		.about-me .content ul strong {
		margin-right: 10px;
		}

		.about-me .content ul i {
		font-size: 16px;
		margin-right: 5px;
		color: #AA7CDF;
		line-height: 0;
		}

		.about-me .content p:last-child {
		margin-bottom: 0;
		}

		/*--------------------------------------------------------------
		# Counts
		--------------------------------------------------------------*/
		.counts {
		padding: 70px 0 60px;
		}

		.counts .count-box {
		padding: 30px 30px 25px 30px;
		width: 100%;
		position: relative;
		text-align: center;
		background: rgba(255, 255, 255, 0.08);
		}

		.counts .count-box i {
		position: absolute;
		top: -25px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 30px;
		background: rgba(255, 255, 255, 0.1);
		padding: 20px;
		color: #AA7CDF;
		border-radius: 50px;
		line-height: 0;
		}

		.counts .count-box span {
		font-size: 36px;
		font-weight: 600;
		color: #fff;
		}

		.counts .count-box p {
		padding: 0;
		margin: 0;
		font-family: "Elsie", sans-serif;
		font-size: 125%;
		}

		/*--------------------------------------------------------------
		# Skills
		--------------------------------------------------------------*/
		.skills .progress {
		height: 60px;
		display: block;
		background: none;
		border-radius: 0;
		}

		.skills .progress .skill {
		padding: 10px 0;
		margin: 0;
		display: block;
		font-weight: 600;
		font-size:130%;
		font-family: "Elsie", sans-serif;
		}

		.skills .progress .skill .val {
		float: right;
		font-style: normal;
		}

		.skills .progress-bar-wrap {
		background: rgba(129, 238, 240, .2);
		}

		.skills .progress-bar-wrap2 {
		background: rgba(129, 238, 240, 1);
		}

		.skills .progress-bar {
		width: 1px;
		height: 10px;
		transition: 2.0s;
		background-color: #CFA7FF;
		}

		/*--------------------------------------------------------------
		# Interests
		--------------------------------------------------------------*/
		.interests .icon-box {
		display: flex;
		align-items: center;
		padding: 20px;
		background: rgba(255, 255, 255, 0.08);
		transition: ease-in-out 0.3s;
		}

		.interests .icon-box i {
		font-size: 32px;
		padding-right: 10px;
		line-height: 1;
		}

		.interests .icon-box h3 {
		font-weight: 700;
		margin: 0;
		padding: 0;
		line-height: 1;
		font-size: 16px;
		color: #fff;
		}

		.interests .icon-box:hover {
		background: rgba(255, 255, 255, 0.12);
		}

		/*--------------------------------------------------------------
		# Testimonials
		--------------------------------------------------------------*/
		.testimonials .testimonials-carousel,
		.testimonials .testimonials-slider {
		overflow: hidden;
		}

		.testimonials .testimonial-item {
		box-sizing: content-box;
		min-height: 320px;
		}

		.testimonials .testimonial-item .testimonial-img {
		width: 90px;
		border-radius: 50%;
		margin: -40px 0 0 40px;
		position: relative;
		z-index: 2;
		border: 6px solid rgba(255, 255, 255, 0.12);
		}

		.testimonials .testimonial-item h3 {
		font-size: 18px;
		font-weight: bold;
		margin: 10px 0 5px 45px;
		color: #fff;
		}

		.testimonials .testimonial-item h4 {
		font-size: 14px;
		color: #fff;
		margin: 0 0 0 45px;
		}

		.testimonials .testimonial-item .quote-icon-left,
		.testimonials .testimonial-item .quote-icon-right {
		color: rgba(255, 255, 255, 0.25);
		font-size: 26px;
		}

		.testimonials .testimonial-item .quote-icon-left {
		display: inline-block;
		left: -5px;
		position: relative;
		}

		.testimonials .testimonial-item .quote-icon-right {
		display: inline-block;
		right: -5px;
		position: relative;
		top: 10px;
		}

		.testimonials .testimonial-item p {
		font-style: italic;
		margin: 0 15px 0 15px;
		padding: 20px 20px 60px 20px;
		background: rgba(255, 255, 255, 0.1);
		position: relative;
		border-radius: 6px;
		position: relative;
		z-index: 1;
		}

		.testimonials .swiper-pagination {
		margin-top: 20px;
		position: relative;
		}

		.testimonials .swiper-pagination .swiper-pagination-bullet {
		width: 12px;
		height: 12px;
		opacity: 1;
		background-color: rgba(255, 255, 255, 0.3);
		}

		.testimonials .swiper-pagination .swiper-pagination-bullet-active {
		background-color: #AA7CDF;
		}

		/*--------------------------------------------------------------
		# Process
		--------------------------------------------------------------*/
		.process .process-title {
		font-size: 22px;
		font-weight: 700;
		margin-top: 20px;
		margin-bottom: 20px;
		color: #fff;
		}

		.process .process-item {
		padding: 0 0 20px 20px;
		margin-top: -2px;
		border-left: 2px solid rgba(129, 238, 240, .3);
		position: relative;
		}

		.process .process-item h4 {
		line-height: 18px;
		font-size: larger;
		font-weight: 600;
		font-family: "Elsie", sans-serif;
		color: #AA7CDF;
		margin-bottom: 10px;
		}

		.process .process-item h5 {
		font-size: 16px;
		background: rgba(255, 255, 255, 0.15);
		padding: 5px 15px;
		display: inline-block;
		font-weight: 600;
		margin-bottom: 10px;
		}

		.process .process-item ul {
		padding-left: 20px;
		}

		.process .process-item ul li {
		padding-bottom: 10px;
		}

		.process .process-item:last-child {
		padding-bottom: 0;
		}

		.process .process-item::before {
		content: '☯ ☯ ☯';
		position: absolute;
		width: 16px;
		height: 16px;
		border-radius: 50px;
		left: -9px;
		top: 0;
		background: transparent;
		border: 2px solid transparent;
		color: rgba(129, 238, 240, 1) !important;
		}

		/*--------------------------------------------------------------
		# Resume
		--------------------------------------------------------------*/
		.resume .resume-title {
		font-size: 26px;
		font-weight: 700;
		margin-top: 20px;
		margin-bottom: 20px;
		color: #fff;
		}

		.resume .resume-item {
		padding: 0 0 20px 20px;
		margin-top: -2px;
		border-left: 2px solid rgba(129, 238, 240, .3);
		position: relative;
		}

		.resume .resume-item h4 {
		line-height: 18px;
		font-size: 18px;
		font-weight: 600;
		font-family: "Elsie", sans-serif;
		color: #AA7CDF;
		margin-bottom: 10px;
		}

		.resume .resume-item h5 {
		font-size: 16px;
		background: rgba(255, 255, 255, 0.15);
		padding: 5px 15px;
		display: inline-block;
		font-weight: 600;
		margin-bottom: 10px;
		}

		.resume .resume-item ul {
		padding-left: 20px;
		}

		.resume .resume-item ul li {
		padding-bottom: 10px;
		}

		.resume .resume-item:last-child {
		padding-bottom: 0;
		}

		.resume .resume-item::before {
		content: '♡ ︎♡ ︎♡';
		position: absolute;
		width: 16px;
		height: 16px;
		border-radius: 50px;
		left: -9px;
		top: 0;
		background: transparent;
		border: 2px solid transparent;
		}


		/*--------------------------------------------------------------
		# Services
		--------------------------------------------------------------*/
		.services .icon-box {
		text-align: center;
		background: rgba(204, 204, 204, 0.1);
		padding: 80px 20px;
		transition: all ease-in-out 0.3s;
		}

		.services .icon-box .icon {
		margin: 0 auto;
		width: 64px;
		height: 64px;
		background: #AA7CDF;
		border-radius: 5px;
		transition: all 0.3s ease-out 0s;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		transform-style: preserve-3d;
		}

		.services .icon-box .icon i {
		color: #fff;
		font-size: 28px;
		}

		.services .icon-box .icon::before {
		position: absolute;
		content: "";
		left: -8px;
		top: -8px;
		height: 100%;
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 5px;
		transition: all 0.3s ease-out 0s;
		transform: translateZ(-1px);
		}

		.services .icon-box h4 {
		font-weight: 700;
		margin-bottom: 15px;
		font-size: 24px;
		}

		.services .icon-box h4 a {
		color: #fff;
		}

		.services .icon-box p {
		line-height: 24px;
		font-size: 14px;
		margin-bottom: 0;
		}

		.services .icon-box:hover {
		background: #AA7CDF;
		border-color: #AA7CDF;
		}

		.services .icon-box:hover .icon {
		background: #fff;
		}

		.services .icon-box:hover .icon i {
		color: #AA7CDF;
		}

		.services .icon-box:hover .icon::before {
		background: #35e888;
		}

		.services .icon-box:hover h4 a,
		.services .icon-box:hover p {
		color: #fff;
		}

		/*--------------------------------------------------------------
		# Portfolio
		--------------------------------------------------------------*/
		.portfolio .portfolio-item {
		margin-bottom: 30px;
		}

		.portfolio #portfolio-flters {
		padding: 0;
		margin: 0 auto 15px auto;
		list-style: none;
		text-align: center;
		border-radius: 50px;
		padding: 10px;
		}

		.portfolio #portfolio-flters li {
		cursor: pointer;
		display: inline-block;
		padding: 8px;
		/* padding: 8px 16px 10px 16px; */
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		color: #fff;
		background: rgba(255, 255, 255, 0.1);
		margin: 0 3px 10px 3px;
		transition: all 0.3s ease-in-out;
		border-radius: 4px;
		}

		.portfolio #portfolio-flters li:hover,
		.portfolio #portfolio-flters li.filter-active {
		background: #AA7CDF; 
		}

		.portfolio #portfolio-flters li:last-child {
		margin-right: 0;
		}

		.portfolio .portfolio-wrap {
		transition: 0.3s;
		position: relative;
		overflow: hidden;
		z-index: 1;
		background: rgba(0, 0, 0, 0);
		}

		.portfolio .portfolio-wrap::before {
		content: "";
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		left: 30px;
		right: 30px;
		top: 30px;
		bottom: 30px;
		transition: all ease-in-out 0.3s;
		z-index: 2;
		opacity: 0;
		}

		.portfolio .portfolio-wrap .portfolio-info {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		z-index: 3;
		transition: all ease-in-out 0.3s;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		}

		.portfolio .portfolio-wrap .portfolio-info::before {
		display: block;
		content: "";
		width: 48px;
		height: 48px;
		position: absolute;
		top: 35px;
		left: 35px;
		border-top: 3px solid #CFA7FF;
		border-left: 3px solid #CFA7FF;
		transition: all 0.5s ease 0s;
		z-index: 9994;
		}

		.portfolio .portfolio-wrap .portfolio-info::after {
		display: block;
		content: "";
		width: 48px;
		height: 48px;
		position: absolute;
		bottom: 35px;
		right: 35px;
		border-bottom: 3px solid #CFA7FF;
		border-right: 3px solid #CFA7FF;
		transition: all 0.5s ease 0s;
		z-index: 9994;
		}

		.portfolio .portfolio-wrap .portfolio-info h4 {
		font-size: 20px;
		color: rgba(129, 238, 240, 1);
		font-weight: 600;
		}


		.portfolio .portfolio-wrap .portfolio-info p {
		color: #ffffff;
		font-size: 14px;
		text-transform: uppercase;
		padding: 0;
		margin: 0;
		}

		.portfolio .portfolio-wrap .portfolio-links {
		text-align: center;
		z-index: 4;
		}

		.portfolio .portfolio-wrap .portfolio-links a {
		color: #fff;
		margin: 0 2px;
		font-size: 28px;
		display: inline-block;
		transition: 0.3s;
		}

		.portfolio .portfolio-wrap .portfolio-links a:hover {
		color: #844FBD;
		}

		.portfolio .portfolio-wrap:hover::before {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 1;
		}

		.portfolio .portfolio-wrap:hover .portfolio-info {
		opacity: 1;
		}

		.portfolio .portfolio-wrap:hover .portfolio-info::before {
		top: 15px;
		left: 15px;
		}

		.portfolio .portfolio-wrap:hover .portfolio-info::after {
		bottom: 15px;
		right: 15px;
		}

		/*--------------------------------------------------------------
		# Portfolio Details
		--------------------------------------------------------------*/
		.portfolio-details {
		padding-top: 0px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow-y: auto;

		border-radius:10px;
		background-image:url("../img/transparent-textures/xv-hm.png")!important;
		background-position:left top;
		background-repeat:repeat;
		background: rgba(28, 21, 40, 0.8);
		}

		.portfolio-details .container {
		padding-top: 20px;
		padding-bottom: 40px;
		}

		.portfolio-details .portfolio-title {
		font-size: 26px;
		font-weight: 700;
		margin-bottom: 20px;
		}

		.portfolio-details .portfolio-info {
		padding-top: 0px;
		}

		.portfolio-details .portfolio-info h3 {
		font-size: 22px;
		font-weight: 400;
		margin-bottom: 20px;
		}

		.portfolio-details .portfolio-info ul {
		list-style: none;
		padding: 0;
		font-size: 15px;
		}

		.portfolio-details .portfolio-info ul li+li {
		margin-top: 10px;
		}

		.portfolio-details .portfolio-info p {
		font-size: 15px;
		padding: 15px 0 0 0;
		}

		@media (max-width: 992px) {
		.portfolio-details .portfolio-info {
		padding-top: 20px;
		}
		}

		.portfolio-details .swiper-pagination {
		margin-top: 20px;
		position: relative;
		}

		.portfolio-details .swiper-pagination .swiper-pagination-bullet {
		width: 12px;
		height: 12px;
		opacity: 1;
		background-color: rgba(255, 255, 255, 0.3);
		}

		.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
		background-color: #AA7CDF;
		}

		/*--------------------------------------------------------------
		# Contact
		--------------------------------------------------------------*/
		.contact .info-box {
		color: #444444;
		padding: 20px;
		width: 100%;
		border-radius:10px;
		background: rgba(81,66,103, .8);
		}

		.contact .info-box i.bx {
		font-size: 24px;
		color: #AA7CDF;
		border-radius: 50%;
		padding: 14px;
		float: left;
		background: rgba(255, 255, 255, 0.1);
		}

		.contact .info-box h3 {
		font-size: 20px;
		color: rgba(255, 255, 255, 0.5);
		font-weight: 700;
		margin: 10px 0 8px 68px;
		}

		.contact .info-box p {
		padding: 0;
		color: #fff;
		line-height: 24px;
		font-size: 14px;
		margin: 0 0 0 68px;
		}

		.contact .info-box .social-links {
		margin: 5px 0 0 68px;
		display: flex;
		}

		.contact .info-box .social-links a {
		font-size: 18px;
		display: inline-block;
		color: #fff;
		line-height: 1;
		margin-right: 12px;
		transition: 0.3s;
		}

		.contact .info-box .social-links a:hover {
		color: #AA7CDF;
		}

		.contact .php-email-form {
		padding: 30px;
		background: rgba(255, 255, 255, 0.08);
		}

		.contact .php-email-form .error-message {
		display: none;
		background: rgba(255, 255, 255, 0.08);
		background: #ed3c0d;
		text-align: left;
		padding: 15px;
		font-weight: 600;
		}

		.contact .php-email-form .error-message br+br {
		margin-top: 25px;
		}

		.contact .php-email-form .sent-message {
		display: none;
		background: rgba(255, 255, 255, 0.08);
		background: #AA7CDF;
		text-align: center;
		padding: 15px;
		font-weight: 600;
		}

		.contact .php-email-form .loading {
		display: none;
		background: rgba(255, 255, 255, 0.08);
		text-align: center;
		padding: 15px;
		}

		.contact .php-email-form .loading:before {
		content: "";
		display: inline-block;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		margin: 0 10px -6px 0;
		border: 3px solid #AA7CDF;
		border-top-color: #eee;
		animation: animate-loading 1s linear infinite;
		}

		.contact .php-email-form input,
		.contact .php-email-form textarea {
		border-radius: 0;
		box-shadow: none;
		font-size: 14px;
		background: rgba(255, 255, 255, 0.08);
		border: 0;
		transition: 0.3s;
		color: #fff;
		}

		.contact .php-email-form input:focus,
		.contact .php-email-form textarea:focus {
		background-color: rgba(255, 255, 255, 0.11);
		}

		.contact .php-email-form input::-moz-placeholder,
		.contact .php-email-form textarea::-moz-placeholder {
		color: rgba(255, 255, 255, 0.3);
		opacity: 1;
		}

		.contact .php-email-form input::placeholder,
		.contact .php-email-form textarea::placeholder {
		color: rgba(255, 255, 255, 0.3);
		opacity: 1;
		}

		.contact .php-email-form input {
		padding: 10px 15px;
		}

		.contact .php-email-form textarea {
		padding: 12px 15px;
		}

		.contact .php-email-form button[type=submit] {
		background: #AA7CDF;
		border: 0;
		padding: 10px 30px;
		color: #fff;
		transition: 0.4s;
		border-radius: 4px;
		}

		.contact .php-email-form button[type=submit]:hover {
		background: #15bb62;
		}

		@keyframes animate-loading {
		0% {
		transform: rotate(0deg);
		}

		100% {
		transform: rotate(360deg);
		}
		}

		/*--------------------------------------------------------------
		# Credits
		--------------------------------------------------------------*/


		@media screen and (max-width: 992px) {
		.credits {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		padding: 15px;
		text-align: right;
		font-size: 13px;
		color: #fff;
		z-index: 999999;
		}
		}

		@media screen and (min-width: 993px) {
		.credits {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		padding: 15px;
		text-align: right;
		font-size: 125%;
		color: #fff;
		z-index: 999999;
		}
		}

		@media (max-width: 992px) {
		.credits {
		text-align: center;
		padding: 0px;
		background: rgba(0, 0, 0, .9);
		}
		}

		.credits a {
		color: #AA7CDF;
		transition: 0.3s;
		}

		.credits a:hover {
		color: #fff;
		}

		/*--------------------------------------------------------------
		# Chrysalis
		--------------------------------------------------------------*/

		/* small display  */
		@media screen and (max-width: 992px) {
		body {
		font-size:larger;
		}
		#header * {
		transition: ease-in-out 0.3s;
		padding:0px 2px 0px 2px;
		}
		.header-li {padding:30px 2px 4px 2px !important;}
		.butterfly-logo {    
		width: 8%;
		height: auto;
		position: relative;
		top: 20px;
		right:134px;}
		.container {
		padding-right: calc(var(--bs-gutter-x)* .5);
		padding-left: calc(var(--bs-gutter-x)* .5);}
		#header.header-top {
		background: rgba(0, 0, 0, 1);
		}
		.logo-size {padding-top:26px !important;	
		}
		.slogan {font-size:120%;}
		.header-shadow {border-radius:15px;
		-webkit-box-shadow:0px 0px 80px 20px #2A203C inset;
		-moz-box-shadow:0px 0px 80px 20px #2A203C inset;
		box-shadow:0px 0px 80px 20px #2A203C inset;}
		.inline-gif2 {width:10%; position:relative;top:-4px;left:0px; -webkit-transform: scaleX(-1);
		transform: scaleX(-1);}
		.section-title p {
		font-size: 24px;
		}
		.section-title2 p {
		font-size: 18px;
		}
		.delivery-pics {

		}
			
		.wip-pics {
		width:75% !important;
		height:auto;
		}
			
		.glightbox-mobile .glightbox-container .gslide-title {
    	color: #fff;
    	font-size: .7em;
		}
		}

		/* large display */
		@media screen and (min-width: 993px) {
			body {
		font-size:large;
			}
			#header * {
		transition: ease-in-out 0.3s;
		padding:4px 2px 4px 2px;
		}
		.butterfly-logo {    
		width: 8%;
		height: auto;
		position: relative;
		top: 40px;
		right: 40px;
		}
		.slogan {font-size:200%;}
		.container {
		padding-right: calc(var(--bs-gutter-x)* 1.2rem !important);
		padding-left: calc(var(--bs-gutter-x)* 1.2rem !important);
		}
		#header.header-top {
		background: rgba(0, 0, 0, .0);
		}
		.logo-size {padding:0 8px 0 8px;}
		.header-shadow {border-radius:15px; width:60%;
		-webkit-box-shadow:0px 0px 80px 20px #241F34 inset;
		-moz-box-shadow:0px 0px 80px 20px #241F34 inset;
		box-shadow:0px 0px 80px 20px #241F34 inset;
		background-image:url("../img/transparent-textures/xv-hm.png")!important;}
		.text-shadow {text-shadow:3px 3px 2px #5c366d; font-size:120% !important;} 
		.inline-gif2 {width:6%; position:relative;top:-4px;left:0px; -webkit-transform: scaleX(-1);
		transform: scaleX(-1);}
		.section-title p {
		font-size:xx-large;  margin: -15px 0 15px 0;
		}
		.section-title2 p {
		font-size:xx-large;  margin: -15px 0 15px 0;
		}
		.delivery-pics {
		width:70% !important;
		height:auto;
		}

		.wip-pics {
		width:50% !important;
		height:auto;
		}
		}

		.inline-gif {width:10%; position:relative;top:-10px;left:24px;}
		div::-webkit-scrollbar {
		display: none !important;
		}

		h2 {
    	font-size: calc(1.5rem + .9vw);
		}

		body::-webkit-scrollbar {
		display: none;
		}

		html::-webkit-scrollbar {
		display: none;
		}

		img {border-radius:15px !important;}

		/* Q & A */
		.accordion-button:not(.collapsed) {
		color: var(--bs-accordion-active-color);
		background-color: #e2c9ff;
		box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
		}
		.accordion {
		--bs-accordion-bg: #8669a8;
		}
		.accordion-button {
		--bs-accordion-btn-color: #E2C9FF;
		}
		.accordion-item {
		color: #E2C9FF;
		background-image:url("../img/transparent-textures/xv-hm.png")!important;
		background-color: var(--bs-accordion-bg);
		border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
		}
		.accordion-button {
		font-size: 1.2rem; 
		font-family: "Abril+Fatface", sans-serif;
		}


		.teal {
		color: rgba(129, 238, 240, 1) !important;
		}

		.lavender {
		color: #CFA7FF !important;
		}

		.accordion-button {
		padding: 4px 10px !important;
		}

		.btnb {
		width: 277px !important;
		line-height: 46px !important;
		}

		.btn {
		/* margin-top: calc(50% + 25px); */
		position: relative !important;
		display: inline-block;
		/* width: 277px; */
		font-size: 1em;
		font-weight: bold;
		/* line-height: 46px; */
		text-align: center;
		background-color: transparent;
		cursor: pointer;
		text-decoration:none;
		font-weight:900;
		font-size:22px;
		letter-spacing: 0.045em;
		}

		.btn svg {
		position: absolute;
		top: 0;
		left: 0;
		}

		.btn svg rect {
		//stroke: #5FE3FF;
		stroke-width: 4;
		stroke-dasharray: 353, 0;
		stroke-dashoffset: 0;
		-webkit-transition: all 2000ms ease;
		transition: all 2000ms ease;
		}

		.btn span{
		background: rgb(95,227,255);
		background: -moz-linear-gradient(left,  rgba(95,227,255,1) 0%, rgba(226,201,255,1) 100%);
		background: -webkit-linear-gradient(left,  rgba(95,227,255,1) 0%,rgba(226,201,255,1) 100%);
		background: linear-gradient(to right,  rgba(95,227,255,1) 0%,rgba(226,201,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5FE3FF', endColorstr='#E2C9FF',GradientType=1 );
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		}

		.btn:hover svg rect {
		stroke-width: 4;
		stroke-dasharray: 196, 543;
		stroke-dashoffset: 437;
		}

		btn:hover {
		color: rgba(129, 238, 240, 1) !important;
		background-color: background: #AA7CDF !important; 
		border-color: transparent;
		}

		.btn-secondary {
		--bs-btn-color: rgba(255,255,255, 1);
		--bs-btn-bg: #AA7CDF;
		/* --bs-btn-border-color: #AA7CDF; */
		--bs-btn-border-color: transparent;
		--bs-btn-hover-color: rgba(129, 238, 240, 1);
		--bs-btn-hover-bg: #AA7CDF;
		/* --bs-btn-hover-border-color: #AA7CDF; */
		 --bs-btn-hover-border-color: transparent; 
		--bs-btn-focus-shadow-rgb: 130, 138, 145;
		--bs-btn-active-color: rgba(129, 238, 240, 1);
		--bs-btn-active-bg: #AA7CDF;
		--bs-btn-active-border-color: #AA7CDF;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: rgba(129, 238, 240, 1);
		--bs-btn-disabled-bg: ##AA7CDF;
		--bs-btn-disabled-border-color: #AA7CDF;
	}

.dropdown-menu {
     --bs-dropdown-min-width: 0rem;
	 background-color: rgb(178, 254, 255, 1) !important;
	background-image:url("../img/transparent-textures/xv-hm.png")!important;
}

.dropdown-item  {
	font-weight:800 !important;
	font-size:larger;	
}
	
	.scrollable-menu {
    height: auto;
    max-height: 300px !important;
    overflow-x: hidden;
}

.gslide-external {
   /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-width: 100%; */
    background: transparent;
    /* padding: 0;
    overflow: auto;
    max-height: 75vh;
    height: 100%; */
}

		.zoom-in{
		transition: all 1s;
		}

		.zoom-in:hover{
		transition: all 1s;
		-webkit-transform: scale (1.1);
		-moz-transform: scale (1.1);
		-ms-transform: scale (1.1);
		transform: scale(1.1);
		}

/*  spin backwards  */
		.counter-spin {
		-webkit-transition: all 6s ease;
		-moz-transition: all 6s ease;
		-o-transition: all 6s ease;
		-ms-transition: all 6s ease;
		transition: all 6s ease;
		}

		.counter-spin:hover {
		-webkit-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		transform: rotate(-360deg);
		}

		.right-off {
		-webkit-transition: all 6s ease;
		-moz-transition: all 6s ease;
		-o-transition: all 6s ease;
		-ms-transition: all 6s ease;
		transition: all 6s ease;
		}
		.right-off:hover {
		position:relative;
		left:5%;
		}
		}


		.upside-down{
		display: inline-block;
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
		ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
		}


		.text-red {color:#800000;}