@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body, div, ul, li, p, h1, h2{
	margin:0;
	padding:0;
}

/* GRID */
.row:before,
.row:after {
	display: table;
	content:" ";
	clear:both;
}

.one{
    width:100%;
}
.half{
    width: calc(100% / 2);
}
.one-third{
    width: calc(100% / 3);
}
.one-fourth{
    width: calc(100% / 4);
}
.two-thirds{
    width: calc(100% / 3 * 2);
}
.one-sixth{
    width: calc(100% / 6);
}
.column{
    float: left;
}


/*GENERAL*/
body{
	background-color: #DDD4D7;
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden;
	box-sizing: border-box;
}
.container{
	max-width: 1366px;
	margin:0 auto;
}


/*NAVIGATION*/
.space{
	background-color: #F2EBEC;
	min-height: 98px;
	width:100vw;
}
.header{
	background-color: #FFFFFF;
	min-height: 98px;
	width:100vw;
	position:fixed;
	z-index: 4;
}
.nav{
	margin-right:-110px;
	padding-top:10px;
}
ul{
	margin-top: 12px;
	padding:0;
	box-sizing: border-box;
	text-align: right;
}
li{
	display: inline-block;
	list-style-type: none;
	margin-top: 12px;
}
li a{
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding:0 0 0 90px;
	color:#031528;
	font-size: 20px;
    font-weight:300;

}
li a:hover{
	color:#E23A72;
}
.header img{
    width:65px;
    height: 65px;
    margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.drop {
	border: none;
}
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #DDD4D7;
	margin-left: 50px;
	min-width: 130px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 4;
}
.dropdown-content a {
	color: #031528;
	padding: 10px 25px;
	text-decoration: none;
	display: block;
	font-size: 18px;
	font-family: 'Poppins', sans-serif;
	font-weight:300;
	text-align: center;
}
  
.dropdown-content a:hover {
	background-color: #DDD4D7;
	color:#E23A72;
}
  
.dropdown:hover .dropdown-content {
	display: block;
}
.arrowdown {
	border: solid #031528;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	vertical-align: middle;
	margin-bottom: 5px;
}
.arrowdown:hover{
	border:solid #E23A72;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	vertical-align: middle;
	margin-bottom: 5px;
}


/*CONTENT*/
.content{
	background-color: #F2EBEC;
	height: auto;
 	padding: 70px 0 0 0;
	z-index: 1;
}


/*WRAPPER TOP*/
.wrappertop{
    background-color: #F2EBEC;
    height:600px;
    margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.wrappertop h2{
    font-family: 'Poppins';
	font-size: 25px;
	font-weight: 500;
	color: #00213F;
	margin-bottom: 10px;
    margin-top: 100px;
}
.wrappertop p{
    font-family: 'Roboto';
	font-size: 16px;
	font-weight: lighter;
	color: #031528;
	line-height: 1.8;
    padding-right: 75px;
}
.wrappertop img{
    height:465px;
    width:auto;
    float:left;
}
.kiri{
	width:600px;
	margin-left:170px;
}
.kanan{
	width:335px;
	float: left;
	margin-right: 90px;
}

/*WRAPPER 1*/
.wrapper1{
    background-color: #EADFE2;
    height:520px;
    display:flex;
	flex-direction: row;
  	justify-content: center;
}
.wrapper1 h3{
	color:#00213F;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 25px;
	text-align: center;
    margin-bottom: 10px;
    padding-top:20px;
}
.wrapper1 img{
    width:70%;
    margin-left:auto;
    margin-right:auto;
    display: block;
}

/*WRAPPER 2*/
.wrapper2{
    background-color: #F2EBEC;
    height:720px;
	display:flex;
	flex-direction: row;
  	justify-content: center;
}
.wrapper2 h3{
	color:#00213F;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 25px;
	text-align: center;
    margin-bottom: 10px;
    padding-top:20px;
}
.bar{
    padding: 30px 0;
	margin-left: auto;
	margin-right:auto;
	display: block;
}
.bar p{
    padding-left:20px;
	padding-bottom: 10px;
}
.backbar{
    width: 1100px;
    background-color: #EADFE2;
    border-radius: 25px;
}
  
.skills {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}
.ui {width: 80%; background-color: #DD8EA3;border-radius: 25px;}
.photo {width: 75%; background-color: #DD8EA3;border-radius: 25px;}
.brand {width: 75%; background-color: #DD8EA3;border-radius: 25px;}
.illus {width: 60%; background-color: #DD8EA3;border-radius: 25px;}



/*WRAPPER BOTTOM*/
.wrapperbottom{
	background-color: #EADFE2;
	height:550px;
}
h1 {
	width: 60%; 
	text-align: center; 
	border-bottom: 3.5px solid #DD8EA3;
	line-height: 0.1em;
    margin-top: 80px;
} 
h1 span { 
	background:#EADFE2; 
	padding:0 85px;
	color:#00213F;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 25px;
	text-align: center;
}
.judul{
	display:flex;
	flex-direction: row;
  	justify-content: center;
	margin-bottom:10px;
}
/* CARDS PORTFOLIO */
.cards{
	display:flex;
	flex-direction: row;
  	justify-content: center;
	grid-template-columns: repeat(8,1fr);
	gap:30px;
	position:relative;
	padding:60px 0 90px 0;
	z-index: 1;
}

.card1 {
 	background-image: url('../images/brand.png');
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
  	width: 300px;
	height:300px;
	background-size: 300px 300px;
  	border-radius: 3px;
	position: relative;
}

.hov {
	position: absolute;
	margin:0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #DD8EA3;
}
  
.card1:hover .hov {
	opacity: 1;
}
.card2:hover .hov {
	opacity: 1;
}
.card3:hover .hov {
	opacity: 1;
}
.texthover{
	color: #031528;
	font-size: 16px;
	font-weight: 300;
	position: absolute;
	margin-top: 85%;
	margin-left: 50%;
	margin-right: -30%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


.card2 {
	background-image: url('../images/photo.png');
   	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
	width: 300px;
   	height:300px;
   	background-size: 300px 300px;
	border-radius: 3px;
   	position: relative;
}

.card3 {
	background-image: url('../images/layout.png');
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
	width: 300px;
	height:300px;
	background-size: 300px 300px;
	border-radius: 3px;
	position: relative;
}

.box {
	background-color: rgba(221, 142, 163, 0.63);
	height: 65px;
	position: absolute;
	width: 50%;
	bottom: 0px;
	width:100%;
}
  
.box h2 {	
	text-align: center;
	font-weight: 400;
	font-size: 22px;
	color:#031528;
	padding-top:15px;
}

/*FOOTER*/
.footer{
	background-color: #DDD4D7;
	height: 100px;
	padding-top: 30px;
	width:100%;
	margin:0 auto;
}
.sosmed{
	display:flex;
	flex-direction: row;
  	justify-content: center;
}
.sosmed img{
	width:30px;
	height:30px;
	padding: 0 12px 0 12px;

}
.footer p{
	font-family:'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 300;
	text-align: center;
	padding-top:10px;
	padding-bottom: 20px;
}


/* ANIMASI */

:root {
	--animate-duration: 1s;
	--animate-delay: 1s;
	--animate-repeat: 1;
  }
  .animate__animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-duration: var(--animate-duration);
	animation-duration: var(--animate-duration);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
  }
  .animate__animated.animate__infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
  }
  .animate__animated.animate__repeat-1 {
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: var(--animate-repeat);
	animation-iteration-count: var(--animate-repeat);
  }
  .animate__animated.animate__repeat-2 {
	-webkit-animation-iteration-count: calc(1 * 2);
	animation-iteration-count: calc(1 * 2);
	-webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
	animation-iteration-count: calc(var(--animate-repeat) * 2);
  }
  .animate__animated.animate__repeat-3 {
	-webkit-animation-iteration-count: calc(1 * 3);
	animation-iteration-count: calc(1 * 3);
	-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
	animation-iteration-count: calc(var(--animate-repeat) * 3);
  }
  .animate__animated.animate__delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-delay: var(--animate-delay);
	animation-delay: var(--animate-delay);
  }
  .animate__animated.animate__delay-2s {
	-webkit-animation-delay: calc(1s * 2);
	animation-delay: calc(1s * 2);
	-webkit-animation-delay: calc(var(--animate-delay) * 2);
	animation-delay: calc(var(--animate-delay) * 2);
  }
  .animate__animated.animate__delay-3s {
	-webkit-animation-delay: calc(1s * 3);
	animation-delay: calc(1s * 3);
	-webkit-animation-delay: calc(var(--animate-delay) * 3);
	animation-delay: calc(var(--animate-delay) * 3);
  }
  .animate__animated.animate__delay-4s {
	-webkit-animation-delay: calc(1s * 4);
	animation-delay: calc(1s * 4);
	-webkit-animation-delay: calc(var(--animate-delay) * 4);
	animation-delay: calc(var(--animate-delay) * 4);
  }
  .animate__animated.animate__delay-5s {
	-webkit-animation-delay: calc(1s * 5);
	animation-delay: calc(1s * 5);
	-webkit-animation-delay: calc(var(--animate-delay) * 5);
	animation-delay: calc(var(--animate-delay) * 5);
  }
  .animate__animated.animate__faster {
	-webkit-animation-duration: calc(1s / 2);
	animation-duration: calc(1s / 2);
	-webkit-animation-duration: calc(var(--animate-duration) / 2);
	animation-duration: calc(var(--animate-duration) / 2);
  }
  .animate__animated.animate__fast {
	-webkit-animation-duration: calc(1s * 0.8);
	animation-duration: calc(1s * 0.8);
	-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
	animation-duration: calc(var(--animate-duration) * 0.8);
  }
  .animate__animated.animate__slow {
	-webkit-animation-duration: calc(1s * 2);
	animation-duration: calc(1s * 2);
	-webkit-animation-duration: calc(var(--animate-duration) * 2);
	animation-duration: calc(var(--animate-duration) * 2);
  }
  .animate__animated.animate__slower {
	-webkit-animation-duration: calc(1s * 3);
	animation-duration: calc(1s * 3);
	-webkit-animation-duration: calc(var(--animate-duration) * 3);
	animation-duration: calc(var(--animate-duration) * 3);
  }
  @media print, (prefers-reduced-motion: reduce) {
	.animate__animated {
	  -webkit-animation-duration: 1ms !important;
	  animation-duration: 1ms !important;
	  -webkit-transition-duration: 1ms !important;
	  transition-duration: 1ms !important;
	  -webkit-animation-iteration-count: 1 !important;
	  animation-iteration-count: 1 !important;
	}
  
	.animate__animated[class*='Out'] {
	  opacity: 0;
	}
  }
  /* Attention seekers  */
  @-webkit-keyframes bounce {
	from,
	20%,
	53%,
	to {
	  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	40%,
	43% {
	  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
	  transform: translate3d(0, -30px, 0) scaleY(1.1);
	}
  
	70% {
	  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
	  transform: translate3d(0, -15px, 0) scaleY(1.05);
	}
  
	80% {
	  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
	  transform: translate3d(0, 0, 0) scaleY(0.95);
	}
  
	90% {
	  -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
	  transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
  }
  @keyframes bounce {
	from,
	20%,
	53%,
	to {
	  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	40%,
	43% {
	  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
	  transform: translate3d(0, -30px, 0) scaleY(1.1);
	}
  
	70% {
	  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	  -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
	  transform: translate3d(0, -15px, 0) scaleY(1.05);
	}
  
	80% {
	  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
	  transform: translate3d(0, 0, 0) scaleY(0.95);
	}
  
	90% {
	  -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
	  transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
  }
  .animate__bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
  }
  @-webkit-keyframes flash {
	from,
	50%,
	to {
	  opacity: 1;
	}
  
	25%,
	75% {
	  opacity: 0;
	}
  }
  @keyframes flash {
	from,
	50%,
	to {
	  opacity: 1;
	}
  
	25%,
	75% {
	  opacity: 0;
	}
  }
  .animate__flash {
	-webkit-animation-name: flash;
	animation-name: flash;
  }
  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  @-webkit-keyframes pulse {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.05, 1.05, 1.05);
	  transform: scale3d(1.05, 1.05, 1.05);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  @keyframes pulse {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.05, 1.05, 1.05);
	  transform: scale3d(1.05, 1.05, 1.05);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  .animate__pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
  }
  @-webkit-keyframes rubberBand {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	30% {
	  -webkit-transform: scale3d(1.25, 0.75, 1);
	  transform: scale3d(1.25, 0.75, 1);
	}
  
	40% {
	  -webkit-transform: scale3d(0.75, 1.25, 1);
	  transform: scale3d(0.75, 1.25, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.15, 0.85, 1);
	  transform: scale3d(1.15, 0.85, 1);
	}
  
	65% {
	  -webkit-transform: scale3d(0.95, 1.05, 1);
	  transform: scale3d(0.95, 1.05, 1);
	}
  
	75% {
	  -webkit-transform: scale3d(1.05, 0.95, 1);
	  transform: scale3d(1.05, 0.95, 1);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  @keyframes rubberBand {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	30% {
	  -webkit-transform: scale3d(1.25, 0.75, 1);
	  transform: scale3d(1.25, 0.75, 1);
	}
  
	40% {
	  -webkit-transform: scale3d(0.75, 1.25, 1);
	  transform: scale3d(0.75, 1.25, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.15, 0.85, 1);
	  transform: scale3d(1.15, 0.85, 1);
	}
  
	65% {
	  -webkit-transform: scale3d(0.95, 1.05, 1);
	  transform: scale3d(0.95, 1.05, 1);
	}
  
	75% {
	  -webkit-transform: scale3d(1.05, 0.95, 1);
	  transform: scale3d(1.05, 0.95, 1);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  .animate__rubberBand {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand;
  }
  @-webkit-keyframes shakeX {
	from,
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	10%,
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: translate3d(-10px, 0, 0);
	  transform: translate3d(-10px, 0, 0);
	}
  
	20%,
	40%,
	60%,
	80% {
	  -webkit-transform: translate3d(10px, 0, 0);
	  transform: translate3d(10px, 0, 0);
	}
  }
  @keyframes shakeX {
	from,
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	10%,
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: translate3d(-10px, 0, 0);
	  transform: translate3d(-10px, 0, 0);
	}
  
	20%,
	40%,
	60%,
	80% {
	  -webkit-transform: translate3d(10px, 0, 0);
	  transform: translate3d(10px, 0, 0);
	}
  }
  .animate__shakeX {
	-webkit-animation-name: shakeX;
	animation-name: shakeX;
  }
  @-webkit-keyframes shakeY {
	from,
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	10%,
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: translate3d(0, -10px, 0);
	  transform: translate3d(0, -10px, 0);
	}
  
	20%,
	40%,
	60%,
	80% {
	  -webkit-transform: translate3d(0, 10px, 0);
	  transform: translate3d(0, 10px, 0);
	}
  }
  @keyframes shakeY {
	from,
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	10%,
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: translate3d(0, -10px, 0);
	  transform: translate3d(0, -10px, 0);
	}
  
	20%,
	40%,
	60%,
	80% {
	  -webkit-transform: translate3d(0, 10px, 0);
	  transform: translate3d(0, 10px, 0);
	}
  }
  .animate__shakeY {
	-webkit-animation-name: shakeY;
	animation-name: shakeY;
  }
  @-webkit-keyframes headShake {
	0% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	}
  
	6.5% {
	  -webkit-transform: translateX(-6px) rotateY(-9deg);
	  transform: translateX(-6px) rotateY(-9deg);
	}
  
	18.5% {
	  -webkit-transform: translateX(5px) rotateY(7deg);
	  transform: translateX(5px) rotateY(7deg);
	}
  
	31.5% {
	  -webkit-transform: translateX(-3px) rotateY(-5deg);
	  transform: translateX(-3px) rotateY(-5deg);
	}
  
	43.5% {
	  -webkit-transform: translateX(2px) rotateY(3deg);
	  transform: translateX(2px) rotateY(3deg);
	}
  
	50% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	}
  }
  @keyframes headShake {
	0% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	}
  
	6.5% {
	  -webkit-transform: translateX(-6px) rotateY(-9deg);
	  transform: translateX(-6px) rotateY(-9deg);
	}
  
	18.5% {
	  -webkit-transform: translateX(5px) rotateY(7deg);
	  transform: translateX(5px) rotateY(7deg);
	}
  
	31.5% {
	  -webkit-transform: translateX(-3px) rotateY(-5deg);
	  transform: translateX(-3px) rotateY(-5deg);
	}
  
	43.5% {
	  -webkit-transform: translateX(2px) rotateY(3deg);
	  transform: translateX(2px) rotateY(3deg);
	}
  
	50% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	}
  }
  .animate__headShake {
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-name: headShake;
	animation-name: headShake;
  }
  @-webkit-keyframes swing {
	20% {
	  -webkit-transform: rotate3d(0, 0, 1, 15deg);
	  transform: rotate3d(0, 0, 1, 15deg);
	}
  
	40% {
	  -webkit-transform: rotate3d(0, 0, 1, -10deg);
	  transform: rotate3d(0, 0, 1, -10deg);
	}
  
	60% {
	  -webkit-transform: rotate3d(0, 0, 1, 5deg);
	  transform: rotate3d(0, 0, 1, 5deg);
	}
  
	80% {
	  -webkit-transform: rotate3d(0, 0, 1, -5deg);
	  transform: rotate3d(0, 0, 1, -5deg);
	}
  
	to {
	  -webkit-transform: rotate3d(0, 0, 1, 0deg);
	  transform: rotate3d(0, 0, 1, 0deg);
	}
  }
  @keyframes swing {
	20% {
	  -webkit-transform: rotate3d(0, 0, 1, 15deg);
	  transform: rotate3d(0, 0, 1, 15deg);
	}
  
	40% {
	  -webkit-transform: rotate3d(0, 0, 1, -10deg);
	  transform: rotate3d(0, 0, 1, -10deg);
	}
  
	60% {
	  -webkit-transform: rotate3d(0, 0, 1, 5deg);
	  transform: rotate3d(0, 0, 1, 5deg);
	}
  
	80% {
	  -webkit-transform: rotate3d(0, 0, 1, -5deg);
	  transform: rotate3d(0, 0, 1, -5deg);
	}
  
	to {
	  -webkit-transform: rotate3d(0, 0, 1, 0deg);
	  transform: rotate3d(0, 0, 1, 0deg);
	}
  }
  .animate__swing {
	-webkit-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing;
	animation-name: swing;
  }
  @-webkit-keyframes tada {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	10%,
	20% {
	  -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
	  transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
	}
  
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
  
	40%,
	60%,
	80% {
	  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
  
	to {
	  -webkit-transform: