/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#skylight-selector {
	background-image: url('../assets/pattern-01.svg');
	padding-top:2rem;
}


#skylight-selector h1, #skylight-selector h2, #skylight-selector h3, #skylight-selector h4 {
	font-family: "museo-sans",sans-serif;
	font-style: italic;
}/* h1 */

#skylight-selector p.lead {
	font-size: 18px;
	line-height: 26px;
	font-weight: 300;
	font-family: "museo-sans",sans-serif;
}

@media(min-width: 767px) {
	#skylight-selector p.lead {
		font-size: 20px;
	}
}

#skylight-selector p {
	font-family: "museo-sans",sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
}

#skylight-selector a.btn, #skylight-modal a.btn {
  font-size: 18px;
  border: 1px solid #e35a31 !important;
  border-radius: 25px;
  background-color: #fff;
  color: #000;
  padding: 10px 40px;
  box-shadow: none;
	font-family: "museo-sans",sans-serif;
	background: #e35a31;
	color: white;
	font-weight: 100 !important;
}

#skylight-selector a.btn:hover, #skylight-modal a.btn:hover {
	background: white;
	color: #e35a31;
	box-shadow: none;
}

/* 
	---------------
	ALL THE MODALS
	--------------- 
*/

#skylight-modal .modal-dialog {
	width: 90%;
}

#skylight-modal .modal-dialog {
	max-width: 720px;
}


@media(min-width: 940px) {
	#skylight-modal .modal-dialog {
		width: 900px;
	}
}

#skylight-modal .modal-body {
	padding: 0;
	position: relative;
}/* modal-body */

#skylight-modal .modal-body .big-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 30%;
}

#skylight-modal .modal-content {

	border-radius: 0;
	
}/* //.modal-content */

#skylight-modal .modal-footer {
	background: #eee;
	text-align: center;
}

#skylight-modal .modal-footer span {
	display: block;
	min-height: 50px;
}

#skylight-modal .modal-footer p {
	font-size: 12px;
	line-height: 14px;
	margin-bottom: 2rem;
}

@media(min-width: 767px) {
	#skylight-modal .modal-footer p {
		margin-bottom: 0;
	}
}


#skylight-modal .tab-content h2 {
	margin-top: 0;
	text-align: left;
	font-style: italic;
}

#skylight-modal .tab-content {
	padding-top: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

#skylight-modal .tab-content p {
	font-size: 14px;
	margin-bottom: 10px;
}

#skylight-modal .tab-content p.lead {
	font-size: 18px;
	margin-bottom: 10px;
}


@media(min-width: 767px) {
	#skylight-modal .tab-content {
		padding-top: 6rem;
	}
}


#skylight-modal .tab-content a.btn {
	float: right;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

@media(min-width: 767px) {
	#skylight-modal .tab-content a.btn {
		margin-top: 3rem;
	}
}

/* 
	-----------------
	ALL THE NAV TABS
	----------------- 
*/

#skylight-modal button.close {
	margin: 1rem 1rem 0 0;
	position: relative;
	z-index: 1;
}

#skylight-modal.modal {
	top: 60px;
	z-index: 9991;
}

#skylight-modal .nav > li {
	width: 100%;
	min-height: 100px;
	text-align: center;
}


#skylight-modal .nav > li > a {
	border-radius: 0;
	box-shadow: none !important;
	background: #ddd;
	border: 1px solid #ccc;
	border-right: none;
	padding: 30px 15px;
}

#skylight-modal .nav > li > a:hover {
	background: white;
	box-shadow: none;
}

#skylight-modal .nav > li.active > a {
	border-right: none !important;
	background: white;
}

#skylight-modal .nav > li.active > a:focus {
	outline: none;
}

#skylight-modal .nav > li > a img {
	max-width: 100%;
	width: 100%;
	height: auto;
	box-shadow: none !important;
}

/* 
	-----------------
	ACCORDION PANNIES
	----------------- 
*/

#skylight-selector .panel-group .panel {
	border: none;
	border-radius: 0;
}

#skylight-selector .panel-group .panel .panel-body {
	border: 1px solid #eee;
	padding: 15px 20px;
}

#skylight-selector .panel-group .panel .panel-body img {
	margin-bottom: 1rem;
	width: 100%;
}


#skylight-selector .panel-group .panel .panel-body h2:first-of-type {
	border-top: none;
	margin-top: 1rem;
	padding-top: 0;
}

#skylight-selector .panel-group .panel .panel-body h2 {
	padding-top: 3.5rem;
	margin: 4rem 0 3rem;
	border-top: 1px solid #888;
}

#skylight-selector .panel-group .panel .panel-body .mobile-big-image {
	height: 70vw;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}

#skylight-selector .panel-group .panel .panel-body a.btn {
	margin: 3rem auto 4rem;
	text-align: center;
	width: auto;
}

#skylight-selector .panel-group .panel .panel-body div.footer {
	text-align: center;
	position: relative;
	margin-top: 2rem;
}

#skylight-selector .panel-group .panel .panel-body div.footer:before {
	position: absolute;
	top: 2.3rem;
	left: 0;
	right: 0;
	height: 1px;
	width: 100%;
	content: "";
	background: #888;
}

#skylight-selector .panel-group .panel .panel-body div.footer button.close {
	float: none;
	opacity: 1;
	position: relative;
	z-index: 1;
}

#skylight-selector .panel-group .panel .panel-body div.footer button.close:hover {
	opacity: 0.8;
}

#skylight-selector .panel-group .panel .panel-body div.footer button.close small {
	display: block;
	font-family: "museo-sans",sans-serif;
	font-size: 12px;
	opacity: 1;
	margin-top: 0.5rem;
	font-weight: 300;
}


#skylight-selector .panel-default > .panel-heading {
	background: #373653;
	border-radius: 0;
}

#skylight-selector .panel-default > .panel-heading > h4.panel-title {
	font-family: "museo-sans",sans-serif;
	font-weight: 300;
	font-style: normal;
	color: white;	
}

#skylight-selector .panel-default > .panel-heading > h4.panel-title a {
	box-shadow: none;
	display: block;
}

#skylight-selector .panel-default > .panel-heading > h4.panel-title a:hover {
	box-shadow: none;
	color: white;
}

#skylight-selector .panel-default > .panel-heading > h4.panel-title a:focus {
	box-shadow: none;
	color: white;
}

#skylight-selector .icon-footer {
	background: #eee;
	padding: 2rem;
	text-align: center;
}

#skylight-selector .icon-footer p {
	margin-top: 5px;
	font-size: 12px;
	line-height: 14px;
}

#skylight-selector .icon-footer span {
	display: block;
	min-height: 40px;
	margin-top: 1rem;
}

#skylight-selector .tipso_bubble {
  position: absolute;
	text-align: center;
	border-radius: 0;
	z-index: 9999;
	opacity: 0.35;
	font-size: 18px;
	line-height: 1;
	font-weight: 300;
	font-family: "museo-sans",sans-serif;
	
}

#skylight-selector g.skylight-type {
	cursor: pointer;
}

#skylight-selector g.skylight-type:hover .skylight-circle {
	fill: #373653 !important;
}

#skylight-selector svg.skylight-house {
	margin-top: -10vh;
	height: 75vh;
}