@charset "UTF-8";
/* CSS Document */




header#mainheader {
	background-color: #fff;
	width: 100%;
	height: 70px;
	margin: 0;
	padding: 0;
}

#mainheader-inner {
	height: 70px;
	background: #fff;
	background-image:	radial-gradient(rgba(198,231,246, 0.3) 11%, transparent 14%),
						radial-gradient(rgba(198,231,246, 0.3) 11%, transparent 14%);
	background-position: 0 0, 18px 18px;
	background-size: 36px 36px;
}

#mainnavigation {
	display: none;
}




/* b of MOB NAV */
#mobnavbtn {
	width: 80px;
	height: 60px;
	cursor: pointer;
	position: fixed;
	top: 2px;
	right: 10px;
	z-index: 9960;
}

#mobnavbtn img {
	width: 100%;
}

.overlay {
	height: 0%;
	width: 100%;
	position: fixed;
	z-index: 9970;
	top: 0;
	left: 0;
	background-color: #fff;
	background-image: url(../images/common/nav/dots.png);
	background-repeat: repeat;
	background-size: 30px;
	overflow-y: hidden;
	transition: 0.5s;
}

.overlay-content {
	position: relative;
	top: 70px;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align:left;
}

.overlay a {
	display: block;
	transition: 0.3s;
	color: #fff;
}

.overlay a:hover, .overlay a:focus {
	color: #333;
}

.overlay .closebtn {
	width: 80px;
	height: 60px;
	margin: 0;
	position: absolute;
	top: 5px;
	right: 10px;
}

.overlay .closebtn img {
	width: 100%;
}

.overlay ul {
	width: 100%;
	margin: 0;
	list-style: none;
}

.overlay ul li {
	padding: 14px;
	padding-left: calc(5% + 74px);
	border-bottom: 1px solid #666;
	color: #fff;
	background-repeat: no-repeat;
	background-position: 5% 50%;
	background-size: auto 55px;
	font-size: 1.1em;
	font-family: 'Arya', arial;
	line-height: 1em;
	border-top: 1px dashed #fff;
	border-bottom: 1px dashed #fff;
}

.overlay ul li span {
	font-family: 'Montserrat', arial;
	font-size: 0.8em;
}




.overlay ul li.mobnav-newbeginnings {
	background-color: #029ce8;
	background-image: url(../images/common/nav/cow.png);
}

.overlay ul li.mobnav-newbeginnings-on { background-image: url(../images/common/nav/cow-on.png); }




.overlay ul li.mobnav-returntonature {
	background-color: #e72e8c;
	background-image: url(../images/common/nav/horse.png);
}

.overlay ul li.mobnav-returntonature-on { background-image: url(../images/common/nav/horse-on.png); }




.overlay ul li.mobnav-thedatingpool {
	background-color: #1fa743;
	background-image: url(../images/common/nav/hen.png);
}

.overlay ul li.mobnav-thedatingpool-on { background-image: url(../images/common/nav/hen-on.png); }




.overlay ul li.mobnav-welcometotown {
	background-color: #e37f18;
	background-image: url(../images/common/nav/sheep.png);
}

.overlay ul li.mobnav-welcometotown-on { background-image: url(../images/common/nav/sheep-on.png); }





.overlay ul li.mobnav-lifeonthefarm {
	background-color: #009e91;
	background-image: url(../images/common/nav/capybara.png);
}

.overlay ul li.mobnav-lifeonthefarm-on { background-image: url(../images/common/nav/capybara-on.png); }





.overlay ul li.mobnav-moretoexplore {
	background-color: #c347f9;
	background-image: url(../images/common/nav/alpaca.png);
}

.overlay ul li.mobnav-moretoexplore-on { background-image: url(../images/common/nav/alpaca-on.png); }




.overlay ul li.mobnav-newbeginnings-on,
.overlay ul li.mobnav-returntonature-on,
.overlay ul li.mobnav-thedatingpool-on,
.overlay ul li.mobnav-welcometotown-on,
.overlay ul li.mobnav-lifeonthefarm-on,
.overlay ul li.mobnav-moretoexplore-on {
	text-shadow: 
		#69b4d5 1px 1px 4px, #69b4d5 -1px 1px 4px,
		#69b4d5 1px -1px 4px, #69b4d5 -1px -1px 4px;
}

.overlay ul li.mobnav-newbeginnings-on a:hover,
.overlay ul li.mobnav-returntonature-on a:hover,
.overlay ul li.mobnav-thedatingpool-on a:hover,
.overlay ul li.mobnav-welcometotown-on a:hover,
.overlay ul li.mobnav-lifeonthefarm-on a:hover,
.overlay ul li.mobnav-moretoexplore-on a:hover {
	color: #fff;
}

.mobnav-bottom {
	width: 50%;
	max-width: 200px;
	margin: 0 auto;
}

.mobnav-bottom img {
	width: 46%;
	margin: 10% 2%;
	float: left;
	display: inline;
}
/* e of MOB NAV */




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

	#mobnavbtn {
		display: none;
	}

	header#mainheader {
		position: fixed;
		height: 70px;
		top: 0;
		z-index: 999;
		box-shadow: 0 0 5px rgba(0,0,0,.3);
	}

	header#mainheader .inner {
		height: 70px;
	}
	
	
	
	
	#mainnavigation {
		width: 98%;
		margin: 0 2% 0 0;
		padding: 0;
		display: block;
	}
	
	#mainnavigation ul {
		list-style: none;
		text-align: right;
		padding: 0 0;
		height: 70px;
	}
	
	#mainnavigation ul li {
		display: inline-block;
		padding: 0 0 0 10px;
		font-size: 0.9em;
	}
	
	
	
	
	.navbutton {
		position: relative;
		display: inline-block;
		border-radius: 50em;
		text-align: center;
	}
	
	.navbutton span,
	.navbutton em {
		width: 100%;
		height: 100%;
		left: 0;
	}
	
	.navbutton img {
		width: 80px;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.navbutton span {
		overflow: hidden;
	}
	
	.navbutton em {
		top: 0;
		padding: 0;
		line-height: 70px;
		font-family: 'Arya', arial;
		font-weight: bold;
		text-transform: uppercase;
	}
	
	.navbutton img {
		top: 20px;
		opacity: 0;
	}
	
	.navbutton:hover em {
		opacity: .2;
	}
	
	.navbutton:hover img {
		top: 8px;
		opacity: 1;
	}
	
	.navbutton em,
	.navbutton img {
		transition: all ease 0.3s;
	}
	
	.navbutton::before,
	.navbutton::after {
		position: absolute;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
	}
	
	.navbutton::before {
		content: '';
		width: 160px;
		height: 40px;
		border-radius: 10px;
		top: 80px;
		line-height: 40px;
		left: calc(50% - 80px);
		font-size: 15px;
		font-family: 'Montserrat', arial;
		font-weight: 500;
	}
	
	.navbutton::after {
		content: '';
		width: 0px;
		height: 0px;
		border: 10px solid transparent;
		border-bottom-color: #e72e8c;
		top: 60px;
		left: calc(50% - 10px);
	}
	
	
	
	
	.navbutton-newbeginnings em {
		color: #029ce8;
	}
	
	
	.navbutton-returntonature em {
		color: #e72e8c;
	}
	
	
	.navbutton-thedatingpool em {
		color: #1fa743;
	}
	
	
	.navbutton-welcometotown em {
		color: #e37f18;
	}
	
	
	.navbutton-lifeonthefarm em {
		color: #009e91;
	}
	
	
	.navbutton-moretoexplore em {
		color: #c347f9;
	}
	
	
	
	
	.navbutton-newbeginnings::before {
		content: 'Story Prologue';
		background: #029ce8;
		color: #029ce8;
		background: #fff;
	}
	
	.navbutton-newbeginnings::after {
		border-bottom-color: #029ce8;
		border-bottom-color: #fff;
	}
	
	
	.navbutton-returntonature::before {
		content: 'Key Features';
		background: #e72e8c;
		color: #e72e8c;
		background: #fff;
	}
	
	.navbutton-returntonature::after {
		border-bottom-color: #e72e8c;
		border-bottom-color: #fff;
	}
	
	
	.navbutton-thedatingpool::before {
		width: 260px;
		content: 'Bachelors & Bachelorettes';
		background: #1fa743;
		color: #1fa743;
		background: #fff;
	}
	
	.navbutton-thedatingpool::after {
		border-bottom-color: #1fa743;
		border-bottom-color: #fff;
	}
	
	
	.navbutton-welcometotown::before {
		width: 200px;
		content: 'Friends & Facilities';
		background: #e37f18;
		color: #e37f18;
		background: #fff;
	}
	
	.navbutton-welcometotown::after {
		border-bottom-color: #e37f18;
		border-bottom-color: #fff;
	}
	
	
	.navbutton-lifeonthefarm::before {
		content: 'Game Systems';
		background: #009e91;
		color: #009e91;
		background: #fff;
	}
	
	.navbutton-lifeonthefarm::after {
		border-bottom-color: #009e91;
		border-bottom-color: #fff;
	}
	
	
	.navbutton-moretoexplore::before {
		content: 'Multimedia';
		background: #c347f9;
		color: #c347f9;
		background: #fff;
	}
	
	.navbutton-moretoexplore::after {
		border-bottom-color: #c347f9;
		border-bottom-color: #fff;
	}
	
	.navbutton-moretoexplore::before {
		left: calc(50% - 100px);
	}
	
	.navbutton-thedatingpool::before {
		left: calc(50% - 130px);
	}
	
	.navbutton-welcometotown::before {
		left: calc(50% - 100px);
	}
	
	
	
	
	.navbutton:hover::before,
	.navbutton:hover::after,
	.navbutton.hover::before,
	.navbutton.hover::after{
		opacity: 1;
		visibility: visible;
	}
	
	.navbutton:hover::before,
	.navbutton.hover::before{
		bottom: 80px;
	}
	
	.navbutton:hover::after,
	.navbutton.hover::after{
		bottom: 60px;
	}
	
	
	
	
	.slide {
		top: 70px;
	}

}




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

	#mainnavigation ul li {
		font-size: 1em;;
	}

}