*{
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Berlin Sans FB' !important;
	overflow-x: hidden !important;
	overflow: overlay;
}

.back-right-top{
	position: absolute;
	width: 60vw;
	top: -72vh;
	right: -20vw;
}

.img-fluid{
	max-width: 100%;
	display: flex;
}

#hero{
	min-height: calc(85vh - 100px);
	width: 100%;
}

#features{
	min-height: calc(65vh - 100px);
	width: 100%;
}

.main-container{
	min-height: calc(65vh - 100px) !important;
	width: 100%;
	position: relative;
}

.main-container-new{
	min-height: calc(65vh - 100px) !important;
	width: 100%;
	position: relative;
}

.hire{
	width: 14vw;
	top: 35%;
	left: 3% !important;
	position: absolute;
	animation: pulse-white 2s infinite;
	border-radius: 50%;
	z-index: 2;
}

.hire-txt{
	font-size: 3.4vw;
	color: #fff;
	top: 40%;
	left: calc(4% + 15vw) !important;
	position: absolute;
	z-index: 2;
	text-align: left;
	min-width: 45%;
}

.hire-content{
	width: 100%;
	position: absolute;
	font-size: 1.4vw;
	color: #fff;
	z-index: 2;
	text-align: left;
}

.hire-design{
	width: 22vw;
	top: 10%;
	left: -15% !important;
	position: absolute;
	z-index: 1;
}

.free-ads-txt{
	min-width: 50%;
	font-size: 3.4vw;
	color: #fff;
	top: calc(95% + 15vw);
	left: 10% !important;
	position: absolute;
	z-index: 2;
	text-align: left;
}

.free-ads-design{
	width: 22vw;
	top: 18vw;
	left: 10vw !important;
	position: absolute;
	z-index: 1;
}

.free-ads{
	width: 14vw;
	top: 95% !important;
	left: 35% !important;
	position: absolute;
	animation: pulse-white 2s infinite;
	border-radius: 50%;
	z-index: 2;
}

.free-ads-content{
	position: absolute;
	width: 100%;
	left: 0;
	font-size: 1.4vw;
	color: #fff;
	z-index: 2;
	text-align: left;
}

.dating-side{
	width: 90vw;
	top: -30% !important;
	right: -60% !important;
	position: absolute;
	z-index: 2;
	transition: transform 1s;
}

.dating-txt{
	min-width: 40%;
	font-size: 3.4vw;
	color: #2CA089;
	bottom: -96%;
	right: 25% !important;
	position: absolute;
	z-index: 4;
	text-align: right;
}

.dating-content{
	position: absolute;
	width: 100%;
	left: 0;
	font-size: 1.4vw;
	color: #2CA089;
	z-index: 2;
	text-align: left;
}

.chatting-txt{
	min-width: 45%;
	font-size: 3.4vw;
	color: #2CA089;
	top: 45%;
	left: 40% !important;
	position: absolute;
	z-index: 4;
	text-align: left;
}

.jobs-txt{
	min-width: 45%;
	font-size: 3.4vw;
	color: #2CA089;
	top: 45%;
	left: 50% !important;
	position: absolute;
	z-index: 4;
	text-align: left;
}

.invoice-txt{
	min-width: 45%;
	font-size: 3.4vw;
	color: #2CA089;
	top: 45%;
	left: 5% !important;
	position: absolute;
	z-index: 4;
	text-align: left;
}

.invoice-content{
	position: absolute;
	width: 100%;
	left: 0;
	font-size: 1.4vw;
	color: #2CA089;
	z-index: 2;
	text-align: left;
}

.chatting-content{
	position: absolute;
	width: 100%;
	left: 0;
	font-size: 1.4vw;
	color: #2CA089;
	z-index: 2;
	text-align: left;
}

.volunteer-txt{
	min-width: 45%;
	font-size: 3.4vw;
	color: #2CA089;
	top: 45%;
	left: 5% !important;
	position: absolute;
	z-index: 4;
	text-align: left;
}

.volunteer-content{
	position: absolute;
	width: 100%;
	left: 0;
	font-size: 1.4vw;
	color: #2CA089;
	z-index: 2;
	text-align: left;
}

.dating-ico{
	top: 45% !important;
	right: 10%;
	position: absolute;
	z-index: 3;
}

.dating-text-ico{
	top: -18px !important;
	right: -18%;
	position: absolute;
	z-index: 3;
	width: 8vw !important;
}

.hire-text-ico{
	top: -24px !important;
	left: 16%;
	position: absolute;
	z-index: 3;
	width: 4vw !important;
}

.ads-text-ico{
	top: -27px !important;
	left: 25%;
	position: absolute;
	z-index: 3;
	width: 6vw !important;
}

.dating{
	width: 30vw;
	top: 93% !important;
	right: 5% !important;
	position: absolute;
	z-index: 1;
	transition: transform 1s;
}

.dating:hover{
	transform: scale(1.05);
}

.home-svg{
	width: 40vw;
	top: 37% !important;
	left: 1% !important;
	position: absolute;
	z-index: -91;
	transition: transform 1s;
	transform: rotate(10deg);
}

.home-svg:hover{
	transform: scale(1.05);
}

.chating{
	width: 50vw;
	top: -25% !important;
	left: -5% !important;
	position: absolute;
	z-index: 2;
	transition: transform 1s;
}

.chating:hover{
	transform: scale(1.05);
}

.jobs{
	width: 45vw;
	top: -25% !important;
	left: 2% !important;
	position: absolute;
	z-index: 2;
	transition: transform 1s;
}

.jobs:hover{
	transform: scale(1.05);
}

.volunteer{
	width: 40vw;
	top: 0 !important;
	right: 7% !important;
	position: absolute;
	z-index: 2;
	transition: transform 1s;
}

.volunteer:hover{
	transform: scale(1.05);
}

.invoice{
	width: 40vw;
	top: 0 !important;
	right: 7% !important;
	position: absolute;
	z-index: 2;
	transition: transform 1s;
}

.invoice:hover{
	transform: scale(1.05);
}

#chating lottie-player{
	top: 0 !important;
	left: 50%;
	position: absolute;
	z-index: 3;
}

#jobs lottie-player{
	top: -10px !important;
	left: 10%;
	position: absolute;
	z-index: 3;
}

#volunteer lottie-player{
	top: 0 !important;
	left: 30%;
	position: absolute;
	z-index: 3;
}

#invoice lottie-player{
	top: 15px !important;
	left: 68%;
	position: absolute;
	z-index: 3;
}

#invoice .main-container-new{
	margin-top: 5% !important;
}

.main-back{
	width: 130vw;
	position: absolute;
	top: 52%;
	left: -60%;
	z-index: -90;
}

.more-back{
	width: 120vw;
	top: 0;
	left: -10% !important;
	position: absolute;
	z-index: -1;
}

.sub-side-back{
	width: 150vw;
	position: absolute;
	top: -10%;
	right: -95%;
	z-index: -100;
}

.more-img{
	height: 17vw !important;
    transition: transform 1s;
}

.more-img-width{
	width: 22vw !important;
    transition: transform 1s;
}

.more-img:hover{
	transform: scale(1.05);
}

.more-img-width:hover{
	transform: scale(1.05);
}

.copyright{
	background-color: #fff;
	color: #2ca089;
	font-size: 14px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.about{
	margin-top: 10%;
	background-image: url('../img/FlipTree_bg.svg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
}

.social-icons{
	width: 40px;
	max-width: 100%;
}

.social-icons-new{
	width: 40px;
	max-width: 100%;
}

.social-icons-new-right{
	width: 40px;
	max-width: 100%;
	text-align: right;
	float:right;
	position: absolute;
	right: 30px !important;
	top: 20px !important;
}

.black{
	color: #002B22 !important;
}

.white{
	color: #fff !important;
}

#contact{
	background-color: #2ca089;
}

#fd{
	background-color: #E6F4F1;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px transparent;
  background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #A4D6CC;
}

@keyframes pulse-white {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  
  70% {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.line-top {
        width: 25vw;
        height:20vw;
        z-index: -1;
        background: transparent;
        border: none;
        border-top: dashed 0.4vw white;
        padding: 40px 40px;
        border-radius: 50%;
        left: -15%;
        top:10%;
        position: absolute;
        transform: rotate(32deg);
    }
    .line-bottom {
        width: 40vw;
        height:20vw;
        z-index: -1;
        background: transparent;
        border: none;
        border-top: dashed 0.4vw white;
        padding: 40px 40px;
        border-radius: 50%;
        left: 7%;
        top:35%;
        position: absolute;
        transform: rotate(-150deg);
    }

[data-aos=my_ex_1] {
  transform: rotate(0deg);
  opacity: 0;
  transition-property: transform, opacity;
}
[data-aos=my_ex_1].aos-animate {
  transform: rotate(32deg);
  opacity: 1;
}

[data-aos=my_ex_2] {
  transform: rotate(-150deg);
  opacity: 0;
  transition-property: transform, opacity;
}
[data-aos=my_ex_2].aos-animate {
  transform: rotate(-150deg);
  opacity: 1;
}

.fd-button{
	color: #fff;
	background-color: #005544;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
	font-size: 1.2vw;
	border-radius: 15px;
}

.fd-button:hover{
	background-color: #003d31;
	color: #fff;
}

.fd-div{
	border-left: 5px solid transparent;
  border-image: linear-gradient(to bottom, #2ca089, #2ca089, #4BAE9B, #fff, #4BAE9B, #2ca089, #2ca089);
  border-image-slice: 1;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: -15% !important;
}

.fd-video{
	position: absolute;
	height: 330px !important;
}

.card {
  width: 100%;
  height: 200px;
  max-height: 300px;
  perspective: 600px;
  transition: 0.5s;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  background-color: #fff;
  border-radius: 10px !important;
}
.card:hover .card-front {
  transform: rotateX(-180deg);
}
.card:hover .card-back {
  transform: rotateX(0deg);
}

.card-front {
	border-radius: 10px;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 98%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(0deg);
  transition: 0.5s;
  border: none !important;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

.card-back {
	border-radius: 10px;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 98%;
  height: 97%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  transition: 0.5s;
  color: #ffffff;
  text-align: center;
  border: none !important;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

.card-back-content{
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
}

.team-card{
	background-color: transparent;
  height: 100%;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.team-card-structure{
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  height: 200px;
  max-height: 300px;
}

.shadow-box{
	border-radius: 10px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

.contact-img{
	height: 100% !important;
	max-height: 200px;
	border-radius: 10px 0 0 10px !important;
}

.contact-img-board{
	height: 130px !important;
	max-height: 200px;
	border-radius: 40px;
}

.fd-logo{
	width: 50%;
	max-width: 200px;
	margin: auto !important;
	padding-top: 8%;
}

.background {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	z-index: -1000;
	width: 50vw;
	height: 100vh;
}

.width-80{
	width: 80%;
}

.align-items-right{
	align-items: right !important;
	justify-content: right;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  top: 15px;
  z-index: 996;
  background: #161616;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #000000;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

.menu-to {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
}

.menu-to.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader img{
  position: absolute;
  width: 200px;
  height: 200px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  /*animation: glow 1s infinite alternate;*/
}

@keyframes glow {
  from {
    -webkit-filter: drop-shadow(0 0 10px -10px #000);
  }
  to {
    -webkit-filter: drop-shadow(0 0 10px 10px #000);
  }
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #1B1B1B;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.priv-term-link{
	text-decoration: none !important;
	color: #2ca089;
	font-weight: bolder;
}

.alignleft {
  float: left;
  width:75%;
  text-align:left;
}

.alignright {
  float: left;
  width:25%;
  text-align:center;
}

.menu-div{
	height: 100vh;
	width: 400px;
	max-width: 90vw;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1000;
	right: -500px;
}

.menu-div.menu-div-active{
	right: 0;
	animation-duration: 1s;
  animation-name: slidein;
}

.menu-div.menu-div-closed{
	right: -500px;
	animation-duration: 1s;
  animation-name: slideout;
}

@keyframes slidein {
  from {
    right: -500px;
  }

  to {
    right: 0 !important;
  }
}

@keyframes slideout {
  from {
    right: 0;
  }

  to {
    right: -500px !important;
  }
}

.menu-area{
	height: 90vh;
	max-width: 90vh;
	width: 90%;
	margin-left: 5%;
	margin-top: 5vh;
	background-color: #333;
	border-radius: 10px;
	box-shadow:  20px 20px 60px #2b2b2b,
             -20px -20px 60px #3b3b3b;
}

@media screen and (max-width: 1025px) {
  #hero{
		min-height: calc(100vh - 11vh) !important;
	}
	.home-svg-2{
		width: 80%;
		height: 95% !important;
		top: 2% !important;
		left: 10% !important;
		position: relative;
		z-index: -91;
	}
	#features{
		min-height: 100% !important;
		background-color: #2ca089;
		/*border-top: 50px;
		border-bottom: 50px;
		border-left: 0;
		border-right: 0;
		border-style: solid;
		border-color: #E3F1EE;*/
		margin-top: 40px !important;
		padding-left: 30px;
		padding-right: 30px;
	}
  #more{
		min-height: 100% !important;
		background-color: #2ca089;
		/*border-top: 50px;
		border-bottom: 50px;
		border-left: 0;
		border-right: 0;
		border-style: solid;
		border-color: #E3F1EE;*/
		margin-top: 40px !important;
	}
	.mob-head{
		font-family: 'Berlin Sans FB';
		font-weight: 600;
		font-size: 4.5rem;
		text-align: left;
		margin-top: 60px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.mob-sub-head{
		font-size: 3.8rem;
		text-align: left;
		margin-top: 50px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.mob-content{
		font-family: 'Berlin Sans FB';
		font-size: 2.5rem;
		text-align: left;
		margin-top: 5px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.hire{
		width: 40%;
		left: 30% !important;
		top: 0;
		margin-bottom: 20px;
		position: relative;
		animation: pulse-white 2s infinite;
		border-radius: 50%;
		z-index: 2;
	}
	.free-ads{
		width: 40%;
		left: 30% !important;
		top: 0;
		margin-bottom: 20px;
		position: relative;
		animation: pulse-white 2s infinite;
		border-radius: 50%;
		z-index: 2;
	}
	.svg-anims{
		width: 80%;
		margin-left: 10% !important;
		top: 0;
		margin-bottom: 20px;
		z-index: 2;
	}
	@keyframes pulse-white {
	  0% {
	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	  }
	  
	  70% {
	    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
	  }
	  
	  100% {
	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	  }
	}
	.dating-ico{
		top: 8% !important;
		right: 30%;
		position: absolute;
		z-index: 3;
		width: 40%;
		height: 40%;
	}
	.more-img-mob-1,.more-img-mob-2{
		margin-top: 2%;
	}
	.about{
		margin-top: 10%;
		background-image: url('../img/FlipTree_bg.svg');
		background-size: 70%;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    background-position: center;
	}
	.contact-img-board{
		height: 80% !important;
		max-height: 200px;
		border-radius: 10px !important;
	}
	body{
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}
	.fd-logo{
		width: 50%;
		margin-top: 4%;
		margin-left: 20px;
		margin-right: 20px;
	}
	.content-fd{
		font-family: 'Berlin Sans FB' !important;
		font-size: 1.1rem !important;
		text-align: left !important;
		margin-top: 5px !important;
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
	.fd-button{
		color: #fff;
		background-color: #005544;
		text-align: center;
		text-decoration: none;
		border-radius: 12px;
    width: 90%;
    margin-left: 20px !important;
		margin-right: 20px !important;
    font-size: 1rem;
	}
	.bottom-foot{
		margin-top: 13% !important;
	}
	/* width */
	::-webkit-scrollbar {
	  width: 0 !important;
	}
	*{
		overflow-x: hidden !important;
	}
	.top-15{
		margin-top: 15%;
	}

	.top-5{
		margin-top: 5%;
	}
	.team-card-structure{
		box-shadow: none;
	  border: 2px solid #EBEDEF;
	}
	.menu-div{
		width: 100vw;
		max-width: 100vw;
	}
	.menu-area{
		height: 85vh;
		max-height: 85vh;
		width: 90%;
		margin-left: 5%;
		margin-top: 5vh;
		background-color: #333;
		border-radius: 10px;
		box-shadow:  8px 8px 16px #2c2c2c,
             -8px -8px 16px #3a3a3a;
	}
	.dating:hover{
	transform: none;
	}
	.home-svg:hover{
		transform: none;
	}
	.chating:hover{
		transform: none;
	}
	.jobs:hover{
		transform: none;
	}
	.volunteer:hover{
		transform: none;
	}
	.more-img:hover{
		transform: none;
	}
	.more-img-width:hover{
		transform: none;
	}
	.card-front {
		width: 99%;
	  height: 97%;
	  overflow-y: hidden !important;
	}
	.shadow-box{
		border-radius: 10px;
		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
		width: 98%;
		margin-left: 1% !important;
		margin-bottom: 1% !important;
	}
	#dating{
		padding-left: 30px;
		padding-right: 30px;
	}
	#chating{
		padding-left: 30px;
		padding-right: 30px;
	}
	#volunteer{
		padding-left: 30px;
		padding-right: 30px;
	}
	#jobs{
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media screen and (max-width: 768px) {
  #hero{
		min-height: calc(100vh - 11vh) !important;
	}
	.home-svg-2{
		width: 80%;
		height: 95% !important;
		top: 2% !important;
		left: 10% !important;
		position: relative;
		z-index: -91;
	}
	#features,#more{
		min-height: 100% !important;
		background-color: #2ca089;
		/*border-top: 50px;
		border-bottom: 50px;
		border-left: 0;
		border-right: 0;
		border-style: solid;
		border-color: #E3F1EE;*/
		margin-top: 40px !important;
		padding-left: 0px;
		padding-right: 0px;
	}
	.mob-head{
		font-family: 'Berlin Sans FB';
		font-weight: 600;
		font-size: 2.6rem;
		text-align: left;
		margin-top: 60px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.mob-sub-head{
		font-size: 1.8rem;
		text-align: left;
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.mob-content{
		font-family: 'Berlin Sans FB';
		font-size: 1.4rem;
		text-align: left;
		margin-top: 5px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.hire{
		width: 40%;
		left: 30% !important;
		top: 0;
		margin-bottom: 20px;
		position: relative;
		animation: pulse-white 2s infinite;
		border-radius: 50%;
		z-index: 2;
	}
	.free-ads{
		width: 40%;
		left: 30% !important;
		top: 0;
		margin-bottom: 20px;
		position: relative;
		animation: pulse-white 2s infinite;
		border-radius: 50%;
		z-index: 2;
	}
	.svg-anims{
		width: 80%;
		margin-left: 10% !important;
		top: 0;
		margin-bottom: 20px;
		z-index: 2;
	}
	@keyframes pulse-white {
	  0% {
	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	  }
	  
	  70% {
	    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
	  }
	  
	  100% {
	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	  }
	}
	.dating-ico{
		top: 8% !important;
		right: 30%;
		position: absolute;
		z-index: 3;
		width: 40%;
		height: 40%;
	}
	.more-img-mob-1,.more-img-mob-2{
		margin-top: 10%;
	}
	.about{
		margin-top: 10%;
		background-image: url('../img/FlipTree_bg.svg');
		background-size: 70%;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    background-position: center;
	}
	.contact-img-board{
		height: 80% !important;
		max-height: 200px;
		border-radius: 10px !important;
	}
	body{
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}
	.fd-logo{
		width: 50%;
		margin-top: 4%;
		margin-left: 20px;
		margin-right: 20px;
	}
	.content-fd{
		font-family: 'Berlin Sans FB' !important;
		font-size: 1.1rem !important;
		text-align: left !important;
		margin-top: 5px !important;
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
	.fd-button{
		color: #fff;
		background-color: #005544;
		text-align: center;
		text-decoration: none;
		border-radius: 12px;
    width: 90%;
    margin-left: 20px !important;
		margin-right: 20px !important;
    font-size: 1rem;
	}
	.bottom-foot{
		margin-top: 13% !important;
	}
	/* width */
	::-webkit-scrollbar {
	  width: 0 !important;
	}
	*{
		overflow-x: hidden !important;
	}
	.top-15{
		margin-top: 15%;
	}

	.top-5{
		margin-top: 5%;
	}
	.team-card-structure{
		box-shadow: none;
	  border: 2px solid #EBEDEF;
	}
	.menu-div{
		width: 100vw;
		max-width: 100vw;
	}
	.menu-area{
		height: 85vh;
		max-height: 85vh;
		width: 90%;
		margin-left: 5%;
		margin-top: 5vh;
		background-color: #333;
		border-radius: 10px;
		box-shadow:  8px 8px 16px #2c2c2c,
             -8px -8px 16px #3a3a3a;
	}
	.dating:hover{
	transform: none;
	}
	.home-svg:hover{
		transform: none;
	}
	.chating:hover{
		transform: none;
	}
	.jobs:hover{
		transform: none;
	}
	.volunteer:hover{
		transform: none;
	}
	.more-img:hover{
		transform: none;
	}
	.more-img-width:hover{
		transform: none;
	}
	.card-front {
		width: 75%;
	  height: 97%;
	  overflow-y: hidden !important;
	}
	#dating{
		padding-left: 0px;
		padding-right: 0px;
	}
	#chating{
		padding-left: 0px;
		padding-right: 0px;
	}
	#volunteer{
		padding-left: 0px;
		padding-right: 0px;
	}
	#jobs{
		padding-left: 0px;
		padding-right: 0px;
	}
}

@media screen and (max-width: 426px) {
	.card-front {
		width: 98%;
	  height: 97%;
	  overflow-y: hidden !important;
	}
}

@media screen and (max-width: 376px) {
	.card-front {
		width: 98%;
	  height: 80%;
	  overflow-y: hidden !important;
	}
}

@media screen and (max-width: 321px) {
	.card {
	  width: 100%;
	  height: 170px;
	  max-height: 100%;
	  perspective: 600px;
	  transition: 0.5s;
	  align-items: center;
	  align-content: center;
	  justify-content: center;
	  background: transparent;
	  border: none !important;
	  background-color: #fff;
	  border-radius: 10px !important;
	}
	.social-icons-new-right{
		width: 30px;
		max-width: 100%;
		text-align: right;
		float:right;
		position: absolute;
		right: 30px !important;
		top: 20px !important;
	}
	.card-front {
		width: 98%;
	  height: 80%;
	  overflow-y: hidden !important;
	}
}