/***************************************************
	MODAL START
    The following CSS is consistent between example themes and should not be altered.
***************************************************/
#modal, #modal-overlay, #modal-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 12000;
	overflow: hidden;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#modal-wrapper {
	max-width: none;
}
#modal-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
}
#modal-middle-left, #modal-bottom-left {
	clear: left;
}
#modal-content {
	position: relative;
}
#modal-loaded-content {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#modal-title {
	margin: 0;
}
#modal-loading-overlay, #modal-loading-graphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#modal-previous, #modal-next, #modal-close, #modal-slideshow {
	cursor: pointer;
}
.modal-photo {
	float: left;
	margin: auto;
	border: 0;
	display: block;
	max-width: none;
	-ms-interpolation-mode: bicubic;
}
.modal-iframe {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
#modal, #modal-content, #modal-loaded-content {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}
/***************************************************
	USER STYLE
	Change the following styles to modify the appearance of modal. They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
    Normalize the following...
	1. Vendor Prefixes 
	   Always us in this order i.e
	   "-webkit-border-radius" Safari 3-4, iOS 1-3.2, Android 1.6
	   "-moz-border-radius" Firefox 1-3.6
	   "border-radius" Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ 
***************************************************/
#modal-overlay {
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	opacity: 0.9;
	filter: alpha(opacity = 90);
}
#modal {
	outline: 0;
	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.5s;
	animation-name: animatetop;
	animation-duration: 0.5s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top: -300px; opacity: 0} 
  to {top: 30px; opacity: 1}
}
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 30px; opacity: 1}
}
#modal-top-left {
	width: 0;
	height: 60px;
}
#modal-top-center {
	height: 60px;
    background-color: #A2A95D;
	-webkit-border-radius: 6px 6px 0 0; /* 1 */
	-moz-border-radius: 6px 6px 0 0; /* 1 */
	border-radius: 6px 6px 0 0; /* 3 */
}
#modal-top-right {
	width: 0px;
	height: 60px;
}
#modal-bottom-left {
	width: 0;
	height: 60px;
}
#modal-bottom-center {
	height: 60px;
	background-color: #F8F8F8;
	-webkit-border-radius: 0 0 6px 6px; /* 1 */
	-moz-border-radius: 0 0 6px 6px; /* 1 */
	border-radius: 0 0 6px 6px; /* 3 */
}
#modal-bottom-right {
	width: 0;
	height: 60px;
}
#modal-middle-left {
	width: 0;
}
#modal-middle-right {
	width: 0;
}
#modal-content {
	background: #F8F8F8;
	overflow: visible;
}
.modal-iframe {
	padding: 0;
	background: #F8F8F8;
}
#modal-error {
	padding: 50px;
	border: 1px solid #ccc;
}
#modal-loaded-content {
	margin: 0;
}
#modal-loading-overlay {
	background: url('https://www.livingwithnature.co.uk/indexes/template/default/images/modal/icon_loading_background.png') no-repeat center center;
}
#modal-loading-graphic {
	background: url('https://www.livingwithnature.co.uk/indexes/template/default/images/modal/icon_loading.gif') no-repeat center;
}
#modal-title {
	position: absolute;
	top: -42px;
	left: 20px;
	right: 20px;
	width: 100%;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #F8F8F8;
	padding: 0 20px 0 0;
}
#modal-current {
	display: none;
}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#modal-close {
	border-style: none;
	border-color: inherit;
	border-width: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
	position: absolute;
	top: -42px;
	background: url('https://www.livingwithnature.co.uk/indexes/template/default/images/modal/icon_close.png') no-repeat;
	width: 24px;
	height: 24px;
	text-indent: -9999px;
}
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#modal-close:active {
	outline: 0;
}
#modal-close {
	right: 20px;
}
#modal-close:hover {
	background: url('https://www.livingwithnature.co.uk/indexes/template/default/images/modal/icon_close_hover.png') no-repeat;
}
/***************************************************
	CUSTOM LOADED HTML CONTENT STYLES 
***************************************************/
#modal-html-header,
#modal-html-body,
#modal-html-footer {
	margin: 0;
	background-color: #F8F8F8;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 100%;
	font-weight: 400;
}
#modal-html-header.full,
#modal-html-body.full,
#modal-html-footer.full {
	max-width: 100% !important;
}
#modal-html-header.pad,
#modal-html-body.pad,
#modal-html-footer.pad {
	padding-right: 60px !important;
	padding-left: 60px !important;
}
#modal-html-header.no-pad,
#modal-html-body.no-pad,
#modal-html-footer.no-pad {
	padding: 0 !important;
}
#modal-html-body {
	height: 100% !important;
	overflow-y: auto;
}
@media only screen and (max-width: 767px) {
	#modal-html-header.pad,
	#modal-html-body.pad,
	#modal-html-footer.pad {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}
}
/***************************************************
	CUSTOM HEADER HTML CONTENT
***************************************************/
#modal-html-header {
	padding-top: 20px !important;
	padding-bottom: 6px !important;
}
#modal-html-header .title-bar {
	padding: 0;
	margin: 0;
	min-height: 36px;
}
#modal-html-header .title-bar h1 {
	padding: 0;
	margin: 7px 0 0 0;
	display: inline-block;
	float: left;
}
#modal-html-header .title-bar a {
	display: inline-block;
	float: right;
}
#modal-html-header .title-bar a.m-btn {
	margin: 0 0 0 20px;
}
/***************************************************
	CUSTOM BODY HTML CONTENT
***************************************************/
#modal-html-body {
	padding-top: 0 !important;
	padding-bottom: 6px !important;
}
#modal-html-body #messages div.error,
#modal-html-body #messages div.success,
#modal-html-body #messages div.notice {
	margin-top: 0 !important;
	margin-bottom: 6px !important;
}
#modal-html-body fieldset:first-of-type {
	margin-top: 9px !important;
}
#modal-html-body .detail {
	padding: 10px 10px 9px 10px;
	margin: 10px 0 6px 0;
	background-color: #E6E6E6;
	border-radius: 5px;
}
#modal-html-body h2 {
	margin: 6px 0 4px 0;
}
#modal-html-body label {
	margin: 0;
	width: 100%;
	font-weight: 600;
	display: block;
}
#modal-html-body label span {
	font-weight: 400;
	padding-bottom: 5px;
}
#modal-html-body label span.inline {
	display: inline;
}
#modal-html-body label span.no-pad {
	padding-bottom: 0 !important;
}
#modal-html-body a i.fa {
	padding-right: 5px;
	font-weight: 400;
}
#modal-html-body div.mini {
	width: 48%;
	display: inline-block;
}
#modal-html-body div.mini.first {
	margin-right: 4%;
}
#modal-html-body a:link {
	color: #328AAF;
	text-decoration: none; 
	-webkit-transition-duration: 0.5s; /* 1 */
    transition-duration: 0.5s;
}
#modal-html-body a:visited,
#modal-html-body a:hover,
#modal-html-body a:active,
#modal-html-body a.active {
	text-decoration: underline;
	color: #444444;
}
/***************************************************
	CUSTOM FOOTER HTML CONTENT
**************************************************
#modal-html-footer {
	padding-top: 20px;
	background-color: bisque;
	border-top: 1px #D9DCDE solid;
	
}
*/
/***************************************************
	LOGOS AND IMAGES
***************************************************/
#modal-html-body #logo-img-preview,
#modal-html-body #listing-img-preview {
	padding: 40px;
	min-height: 271px;
	background-color: #E6E6E6;
	border-radius: 5px;
	text-align: center;
}
#modal-html-body #logo-img-preview label,
#modal-html-body #listing-img-preview label {
	margin-top: -5px;
	text-align: left;
}
#modal-html-body #logo-img,
#modal-html-body #listing-img {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: 5px solid #FFFFFF;
	border-radius: 5px;
	display: block;
}
#modal-html-body #logo-img {
	margin-top: 50px;
	margin-bottom: 48px;
	height: 75px;
}
#modal-html-body #listing-img {
	height: 173px;
}
/***************************************************
	BANNERS
***************************************************/
#modal-html-body #banner-img-preview {
	padding: 40px;
	background-color: #E6E6E6;
	border-radius: 5px;
	text-align: center;
}
#modal-html-body #banner-img-preview label {
	margin-top: -5px;
	text-align: left;
}
#modal-html-body #banner-img {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: 5px solid #FFFFFF;
	border-radius: 5px;
	display: block;
}
#modal-html-body #banner-img {
	height: 100%;
}
/***************************************************
	MODAL END
***************************************************/