*
{
	margin: 0;
	padding: 0;
}

.img-wrapper
{ 
	width: 300px;
	height: 400px;
	position: relative;
	overflow: hidden;
    margin:20px 30px ;

} 

.img-wrapper:before
{
	content: '';
	position: absolute;
	top: 0;
	left: 180%;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,.3);
	z-index: 1;
	transform: skew(45deg);
	transition: .5s;
	
}

.img-wrapper:hover:before
{
	left: -180%;
}

.img-wrapper img
{
	height: 400px;
	width: 300px;
	transition: 0.7s;
  border-radius: 10%;
  border-width: 3px;
  border-color:  #c5b0b0 ;
  border-style: inherit;
}
.img-wrapper:hover img
 {/*	filter: grayscale(0%); */
	filter : grayscale (100%);
	filter: grayscale(var(--value, 100%));
	transform: scale(1.1);
}

.img-wrapper h2
{
	/* background: tomato; */
	/* background: #7520ff; */
    background: linear-gradient(45deg,  #6c24df, #f14979);
	/* font-family: cursive; */
	font-size: x-large;
font-family:initial;
font-style: italic;
font-weight: bold;
	color: rgb(0, 0, 0);
	text-align: center;
	text-transform: uppercase;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	bottom: 0;
	width: 100%;
	transform: perspective(400px) rotateY(90deg);
	transform-origin: right;
	transition: 1s;
}
.img-wrapper h2 small{
    background: linear-gradient(45deg,  #6c24df, #f14979);
	
}

.img-wrapper:hover h2
{
	transform: perspective(400px) rotateY(0deg);
}

/* h6 */
.img-wrapper h6
{
	/* background: tomato; */
	/* background: #7520ff; */
    background: linear-gradient(45deg, #6c24df, #f14979);
	font-family:initial;
	font-style: italic;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	margin: 0;
	padding: 5px 0;
	position: absolute;
	bottom: 0;
	width: 100%;
	transform: perspective(400px) rotateY(90deg);
	transform-origin: right;
	transition: 1s;
font-size: smaller;
}
.img-wrapper:hover h6
{
	transform: perspective(400px) rotateY(0deg);
}


/* h5 */
.img-wrapper h5
{
	/* background: tomato; */
	/* background: #7520ff; */
    background: linear-gradient(45deg, #6c24df, #f14979);
	font-family:initial;
	font-style: italic;
	color: rgb(255, 255, 255);
	text-align: center;
	text-transform: uppercase;
	margin: 0;
	padding: 5px 0;
	position: absolute;
	bottom: 0;
	width: 100%;
	transform: perspective(400px) rotateY(90deg);
	transform-origin: right;
	transition: 1s;
font-size: smaller;
}
.img-wrapper:hover h5
{
	transform: perspective(400px) rotateY(0deg);
}


.img-wrapper ul
{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255,255,255,0);
}

.img-wrapper ul li
{
	background: #333;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	transform: perspective(800px) rotateY(90deg);
	transition: .5s;
	transform-origin: left;
}

.img-wrapper:hover ul li
{
	transform: perspective(800px) rotateY(0deg);
}

.img-wrapper:hover ul li:nth-child(1)
{
	transition-delay: .2s;
}

.img-wrapper:hover ul li:nth-child(2)
{
	transition-delay: .6s;
}

.img-wrapper:hover ul li:nth-child(3)
{
	transition-delay: .8s;
}

.img-wrapper:hover ul li:nth-child(4)
{
	transition-delay: 1s;
}

.img-wrapper ul li a
{
	/* color: tomato; */
	
    color: #7520ff;
	background: rgba(255,255,255,0);
}

.img-wrapper ul li i
{
	/* color: tomato; */
    color: #7520ff;
	background: rgba(255,255,255,0);
}

.img-wrapper ul li i:hover
{
	/* color: #fff; */
    color:  #df144d;
	background: rgba(255, 255, 255, 0);
}

.imgContainer{
  display: flex;
  flex-wrap: wrap;
  box-shadow: hsl(343, 84%, 40%) 0px 20px 30px -10px;
  background-color: #f1f1f1;
}

.imgContainer > div{

margin-left: auto;
 margin-right: auto;
padding: 10px;
 -webkit-background-clip: text; 
border-radius:20%;
box-shadow:  #7520ff 0px 20px 30px -10px;
}


 .deconstructed {
  position: relative;
  margin-left: 200px;
  height: 2.71em;
  color: transparent;
  font-family: 'Cambay', sans-serif;
  font-size: 10vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 4.03em;
}

.deconstructed > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #9dc6ec;
  pointer-events: none2;
}

.deconstructed > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
  mask-image: linear-gradient(black 25%, transparent 25%);
  animation: deconstructed1 5s infinite;
}

.deconstructed > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  animation: deconstructed2 5s infinite;
}

.deconstructed > div:nth-child(3) {
   -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  animation: deconstructed3 5s infinite;
}

.deconstructed > div:nth-child(4) {
   -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
  mask-image: linear-gradient(transparent 75%, black 75%);
  animation: deconstructed4 5s infinite;
}

@keyframes deconstructed1 {
  0% {
    transform: translateX(100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
  100% {
    transform: translateX(-120%);
  }
}

@keyframes deconstructed2 {
  0% {
    transform: translateX(100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(-125%);
  }
}

@keyframes deconstructed3 {
  0% {
    transform: translateX(100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-130%);
  }
}

@keyframes deconstructed4 {
  0% {
    transform: translateX(100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-135%);
  }
}
  header {
	width: 100%;
	height: 71%;
	background-size: cover;
  }
  
  .logo {
	font-family: "Pattaya", sans-serif;
	line-height: 60px;
	position: absolute;
	float: left;
	margin: 16px 46px;
	color: #7520ff;
	background: linear-gradient(45deg, #7520ff, #e96188);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	font-size: 50px;
	letter-spacing: 2px;
  }
  .logo .fas {
	font-size: 70px;
  }
  .fas {
	font-size: xx-large;
	color: #7520ff;
	background: linear-gradient(45deg, #7520ff, #e96188);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
  nav {
	position: fixed;
	z-index: 100;
	top: 0;
	width: 100%;
	z-index: 100;
	top: 0;
	line-height: 60px;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
	  rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
	  rgba(235, 162, 162, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  }
  
  nav.scrolled {
	background: #fff;
  }
  
  nav ul {
	line-height: 60px;
	list-style: none;
	background: rgba(0, 0, 0, 0);
	overflow: hidden;
	color: #000;
	padding: 0;
	text-align: right;
	margin: 0;
	padding-right: 40px;
	transition: 1s;
  }
  
  nav.black ul {
	background: #000;
  }
  
  nav ul li {
	display: inline-block;
	padding: 16px 40px;
  }
  
  nav ul li a {
	text-decoration: none;
	color: #7520ff;
	font-size: 32px;
	font-weight: 600;
	background: linear-gradient(45deg, #7520ff, #e96188);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
  
  @media (max-width: 786px) {
	.logo {
	  position: fixed;
	  top: 0;
	  margin-top: 16px;
	}
  
	nav ul {
	  max-height: 0px;
	  background: #000;
	}
  
	nav.black ul {
	  background: #000;
	}
  
	.showing {
	  max-height: 34em;
	}
  
	nav ul li {
	  box-sizing: border-box;
	  width: 100%;
	  padding: 24px;
	  text-align: center;
	}
  
	.menu-icon {
	  display: block;
	}
  }