.mouse {
	width: 40px;
	height: 75px;
	border: 3px solid #e0d5e9;
	border-radius: 60px;
	position: relative;
}

.mouse::before {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e0d5e9;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 2s infinite;
    -webkit-animation: wheel 2s infinite;
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}


.scroll {
	width: 60px;
	height: 60px;
	border: 2px solid #e0d5e9;
	border-radius: 50%;
	position: relative;
	animation: down 1.5s infinite;
	-webkit-animation: down 1.5s infinite;
}

.scroll::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 18px;
    width: 18px;
    height: 18px;
    border-left: 2px solid #e0d5e9;
    border-bottom: 2px solid #e0d5e9;
    transform: rotate(-45deg);
}

@keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(15px);
	}
	40% {
		transform: translate(0);
	}
}

@-webkit-keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(15px);
	}
	40% {
		transform: translate(0);
	}
}

.landing-bg {
	background-image: url('../media/svg/illustrations/landing.svg');
}

.add-plot, .login-member {
	display: inline-flex;
	width: calc(1.5em + 1.5rem + 2px);
	height: calc(1.5em + 1.5rem + 2px);
	align-items: center;
	padding: 0;
	justify-content: center;
	overflow: hidden;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	white-space: nowrap; /*this was suggested by jaunt, thanks */
}

.add-plot:hover, .login-member:hover {
	width: calc(1.5em + 1.5rem + 140px);
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}

.add-plot:hover::after {
	content: ' | Become A Member';
}

.login-member:hover::after {
	content: ' | Member Login';
}

.header-main {
	font-size: 4rem;
}
.header-sub {
	font-size: 3rem;
}


/* effect 3 */

.hover3{
	cursor: pointer;
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding-top: 5px; 
	transition: 0.3s;
}

.hover3:hover {
	color: #d4af37;
}
  
.hover3:after{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
    background-color: black;
	color: #d4af37;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translate3d(-100%, 0, 0);
	transition: transform .2s ease-in;
}

.hover3:hover:after,
.hover3:focus:after{
	transform: translate3d(0, 0, 0);
	color: #d4af37;
}

.tooltip-inner {
    max-width: 100% !important;
}

@media only screen and (max-width: 400px) {
	.header-main {
		font-size: 2.5rem;
	}
	.header-sub {
		font-size: 1.5rem;
	}
}