@keyframes textColorChange {
  25% {
    color: #f7c774;
		border-color: #f7c774
  }
	50% {
		opacity: .5
	}
  75% {
    color: #fff;
		border-color: #fff
  }
	100% {
		opacity: 1
	}
}

.fp-icons {
	font-size: 28px
}

.fp-icons .icomoon {
	padding-right: 3px;
	vertical-align: middle
}

.fp-stats {
	padding-top: 10px
}

.fp-data-holder h2 {
	letter-spacing: 4px;
	font-size: 48px
}

.head-bg {
	background-image: url('../img/img_head_floor_plans.jpg')
}

.textColorChange:hover, .textColorChange:focus {
	animation: textColorChange .75s
}

.floorplans-bg {
	background-image: url('../img/img_bg_floor_plans.jpg');
	background-size: cover;
	background-position: top center
}

.middle-section  {
  border-bottom: none
}

.middle-section .left-side {
    min-height: 377px
}

.middle-section .right-side nav {
	text-align: center;
	padding-left: 0;
	padding-right: 0
}

.middle-section .right-side {
	padding: 60px 0
}

.middle-section .right-side section {
	padding-top: 10px;
	padding-bottom: 10px
}

.middle-section .right-side section[data-fptype] a {
	padding: 5px 10px;
	font-size: 4rem;
	display: inline-block
}

body[data-bed='A'] .right-side .one a,
body[data-bed='B'] .right-side .two a,
body[data-bed='siteplan'] .right-side .siteplan a
{
	border: 2px solid #fff
}

#nav-holder .fptypekey {
	z-index: -1;
	opacity: 0;
	position: absolute
}

body[data-bed='A'] #nav-holder .fptypekey#A,
body[data-bed='B'] #nav-holder .fptypekey#B  {
	z-index: 0;
	position: relative;
	opacity: 1;
	transition-duration: 1s;
	transition-property: opacity
}

.nav-holder {
	margin-bottom: 40px
}

.floorplans-section {
	text-align: center
}

.floorplans-section nav {
	font-size: 24px;
	display: block
}

.floorplans-section select {
	color: #000;
	width: 90%;
	max-width: 500px;
	background: #fff url(http://mmccdn.com/mits/selectbox-arrow.png) no-repeat 100% 50%;
	font-size: 2em;
	padding-left: 10px;
	border-radius: 0px;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
}

.floorplans-section select::-ms-expand {
    display: none;
}


.floorplans-section nav span ~ span {
	margin-left: 40px
}

.floorplans-section .fp-content-section {
	vertical-align: top;
	font-size: 24px;
	margin-left: auto;
	margin-right: auto
}

.floorplans-section .fp-svg-holder {
	min-width: 200px;
	max-width: 800px
}

.floorplans-section .fp-svg {
	width: 100%;
	margin-left: auto;
	margin-right: auto
}

.floorplans-section .fp-data-holder ul {
	list-style-type: none
}

.approx-disclaimer p {
	font-size: 10px;
	text-align: center
}

.selectFp > span {
	cursor: pointer
}

.selectFp > span[data-fpid].active {
	border-bottom: 1px solid #fff
}

@media screen and (min-width: 480px) {
	.middle-section .right-side {
    padding-left: 45px;
		padding-right: 45px
	}
	.floorplans-section .fp-svg {
	}
}

@media screen and (max-width: 768px) {
	.floorplans-section .center-float-parent {
		float: none;
		position: static;
		left: auto
	}

	.floorplans-section .center-float-child {
		position: static;
		left: auto
	}
	.floorplans-section .fp-svg {
		width: 80%
	}
}

@media screen and (min-width: 768px) {
	.middle-section .right-side {
		position: absolute;
		left: calc((100% / 2) + 1px);
		top: 0;
		bottom: 0;
		right: 0;
		padding: 0
	}
	.middle-section .right-side nav {
		overflow: hidden;
		position: absolute;
		top: 50%;
		transform: translateY(-50%)
	}
	.floorplans-section {
		overflow: hidden
	}
	.floorplans-section .fp-content-section {
		float: left
	}
	.floorplans-section .fp-svg-holder {
		/*
			The photo behind the floor plans (the couple at dinner)- we’d like for the area and the background to stay the height of the largest floor plan. This is so it doesn’t look so disorienting when clicking through different plans. No background resizing.
		*/
		height: 739px;
	}
	.floorplans-section .fp-svg-holder .fp-svg {
		/*height: 100%;*/
		width: auto
	}
	
	html.-ms- .floorplans-section .fp-svg-holder .fp-svg {
		/* hack just for ie rendering svg */
		width: 100%
	}

	.floorplans-section .fp-data-holder {
		text-align: left
	}
}

@media screen and (min-width: 992px) {
	.middle-section .right-side {
		left: calc((100% / 3) + 1px);
	}
	.middle-section .right-side .one {
		text-align: right;
	}
	.middle-section .right-side .two {
		text-align: center;
	}
	.middle-section .right-side .siteplan{
		text-align: left;
	}
}