@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

body {margin: 0;}

a {color:blue;text-decoration:none}

a:hover {color: #64A2FF}

#wrapper {background-color:#FFFFFF;padding:10px;}

#content p {font-size:13pt;line-height:18pt;}
	
h1,h2, h3 {color:#376240}

h3.date {font-weight:800;margin-bottom:5px;}

h3.date + p {margin-top:0;}


* {font-family: 'PT Sans', sans-serif;}

#logo {
	background-image: url('/images/logo.png');
	background-repeat: no-repeat;
	height:79px;
	width:454px;
	float:left;
}

#menu {
	clear: both;
/*	background-color: #D7FFD7;
	margin: 10px -20px;*/
}

#menu li {
	display:inline-block;
	padding:1em 0.8em;
	font-weight:600;
	color:#D38F01;
}

#menu a {color:#275F33;}

#menu a:hover {color:#339966}

.active {color:#D38F01 !important;}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
	visibility:hidden;
	opacity:0;
	position: absolute;
	z-index: 1;
	padding: 0;
	background-color: #E3F2D2
}

.dropdown-content li {padding:8px !important;}

.dropdown-content a {display:block;min-width:12em;}

.dropdown:hover .dropdown-content {visibility:visible;opacity:1;transition: 0.4s}

#side-menu {display:inline-block;width:14em;float:left;margin-right:40px;}

.side-menu-content li {list-style: none;}

.side-menu-content {
	width: 195px;
	padding: 5px 5px 5px 10px;
	margin: -20px 0 0 5px;
	background-color: #E3F2D2;
	border:1px #aaaaaa solid;
	visibility:hidden;
	height:0;
	overflow:hidden;
}


.side-menu-content a {color:#275F33}

.side-menu-content a:hover {color:#15A512}

#side-menu:hover .side-menu-content {visibility:visible;height:18em;transition:0.8s}

.contact {
	padding: 0 1em;
	font-weight: bold;
	font-size: 14pt;
	margin:10px 0;
	background-repeat:no-repeat;
}


.contact a {color:#275F33}

.contact a:hover {color: #3F9A53}

.carousel-content,
.carousel-images,
.carousel,
.carousel span {
	width: 890px;
	height: 382px;
	overflow: hidden;
	display: inline-block;
}

.carousel {margin-left:50px}

#slide_1 {display:inline-block;}

.carousel-content {
	position: relative;
}
.carousel {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.carousel .text {
	background: url("/images/carousel-text-bg.png") transparent;
	position: absolute;
	right: 80px;
	top: 150px;
	padding: 10px 20px;
}
.carousel .text h2,
.carousel .text p {color: #fff;margin-left:30px;}
.carousel .text h2 {
	width: 360px;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	margin-bottom: 5px;
}
.carousel .text p {
	width: 360px;
	font-size: 24px;
	line-height: 30px;
}
.carousel-content .prev {
	background: url("/images/prev.png") no-repeat;
	position: absolute;
	left: 0;
	top: 150px;
	z-index: 10001;
	width: 33px;
	height: 64px;
	display: inline-block;
	text-indent: -2000px;
	cursor: pointer;
}
.carousel-content .next {
	background: url("/images/next.png") no-repeat;
	position: absolute;
	right: 0;
	top: 150px;
	z-index: 10001;
	width: 33px;
	height: 64px;
	display: inline-block;
	text-indent: -2000px;
	cursor: pointer;
}

.wide-image {width:100%;height:auto;}

.event {
	border-bottom: 1px solid #2e6547;
	position: relative;
	padding-bottom: 15px;
	}

.readmore {
	position: absolute;
	right: 0;
	bottom: -12px;
	display: inline-block;
	padding: 5px 10px;
	background: #cda63e;
	color: #fff;
	text-transform: uppercase;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.readmore:hover {
	color: #000000;
	background-color: #B69130
}

@media (min-width:880px)
	{
	#footer-contact {position:absolute;top:20px;left:660px;}
	
	#contact-block {float:right;width:18em}
	}
	

#tel {background-size: 25px;background-image: url('/images/phone.png');}

#email {background-size: 25px;background-image:url('/images/email.png')}

#twitter {background-size: 25px;background-image:url('/images/twitter.png')}

#linked-in {background-size: 25px;background-image: url('/images/linkedin-icon.png')}


#menu ul li.icon {display:none;}

#welcome p {
	margin-top: 50px;
	font-size: 26px;
	font-family:'EB Garamond', serif;
	line-height:30px;
	font-weight:bold;
}

.ESP-logo {
	background-position: center;
	display: inline-block;
	background-image: url('images/ESP.png');
	background-repeat: no-repeat;
	font-size: 0;
	vertical-align: middle;
	width: 90px;
	height: 50px;
}

.nudge-right .pics3 img {width:200px;}

.pics3-nocap img {width:200px;height:auto;margin:10px;border: 1px #DDDDDD solid;}

.pics2-nocap img {width:310px;height:auto;margin:10px;border: 1px #DDDDDD solid;}

figcaption {padding:5px;text-align: center;color: #FFFFFF;}

.pics3 figcaption {margin-top:12px}

figcaption.nudge-up {margin-top:2px}

figure {
	border: 1px #999999 solid;
	display: inline-block;
	background-color: #3C5D3E;
	margin:20px 5px;
	height:200px;
	vertical-align:middle;
}

figure a {
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
}

figure a:hover {opacity: 0.7;}

td {padding:5px 10px 5px 0;}

#footer-wrapper {min-height:12em;}

#footer-wrapper, footer {background-color:#3C5D3E;color:#DDDDDD;}

footer {padding:30px 0;position:relative;}

#footer-highlight {color:#FFFF66}

footer a {color:#00CCFF;text-decoration:none;}

footer a:hover {color: #0099BF;}

#footer-contact p {margin:0}

footer p.contact {margin:1em 1em 1em 0 !important}

footer p.contact a {color:#EEEEEE;}

footer p.contact a:hover {color:#BBBBBB;}

.footer-title {color:#FFC969;padding-bottom:3px;}

#footer-menu {display:inline-block;margin:0 0 0 -20px;}

#footer-menu li {margin: 2px;list-style-image: url('/images/right-arrow.png');
}

#footer-menu a {color:#CCCCCC;}

#footer-menu a:hover {color:#FFFFFF}

.centred {text-align:center}

.video {display:block;width:450px;height:300px;margin:10px auto;}

.FL {float:left;margin-right:50px;}

.clear {clear:both;}

.thin-border {border:thin #808080 solid;margin:20px 20px 20px 0;}

.prod-image {width:250px;height:auto;}

.product {clear:both;padding:50px 5px;border-bottom:medium #94CE55 dashed;}

.product:last-of-type {border:none;}

.description ul {padding:0 20px;}

li {
	list-style-image: url('/images/bullet.PNG');
	font-size:14pt;
	margin:0 0 10px 0;
}

.product a {
	border-radius: 10px;
	border: 2px solid #29412B;
	text-decoration: none;
	padding: 10px;
	background-color: #3C5D3E;
	color: #FFFFFF;
}

a.plain  {
	border:none;
	text-decoration:underline;
	background:none;
	color:blue;
	position:static;
	padding:0;
}

a.plain:hover {font-weight:600;background:none !important;}

.highlight {font-size:large;font-weight:bold;}

.product a:hover {background-color: #15A512;}

.dimensions p {margin:0;}

.nudge-right {margin-left:270px;}

@media (min-width:561px)
{
header {
	background-color: #F2F2F2;
	padding: 10px 20px 5px 20px;
}

.banner {width:900px;height:auto;}

#wrapper, footer {
	width:950px;
	margin-left:auto;
	margin-right:auto;
}

.description {margin-left:278px;}

.product a
	{	
	position:relative;
	left:320px;
	top:-80px;
	}	

.prod-image {float:left;margin-right:30px;}
}


@media(max-width:560px) /*Mobile*/
 {
 	img {max-width:100%;height:auto;}
 	
	.banner {width:100%;height:auto;padding-right:5px;}
	 
 	.product a {margin-top:1em;}
 	
	#logo {width:100px;height:120px;background-image:url('/images/mobile-logo.png');margin:-5px 10px 10px 10px;}
	
	.contact {margin-left:110px;font-size:11pt;}
	
	#wrapper, footer {width:100%;}
	
	footer {padding:10px}
	
	.video {width:90%;}
	
	#menu {position:relative;top:-40px; background-color:#DFFFDF;}
	
    #menu ul li:not(:first-child) {display: none}

    #menu ul li.icon {
        float: right;
        display: inline-block;
        margin: 0 5px 0 0
    }


    #menu.responsive ul {position: relative}
    
    #menu.responsive ul li.icon {
        position: absolute;
        top: 0;
        right: 0
    }
    #menu.responsive ul li {
        float: none;
        display: block;
        border: none;
        padding: 3px
    }
    #menu.responsive ul li a {
        display: block;
        text-align: left
    }
    
    #side-menu {display:block;float:none}
    
    .dropdown-content {display:none;}
    
	.carousel-content,
	.carousel-images,
	.carousel,
	.carousel span {
		width: 300px;
		height: 300px;
	}

	.carousel .text {left:35px;right:auto;padding:5px 2px;width:226px;}
	
	.carousel .text h2 {
		width: 200px;
		font-size: 15px;
		font-weight: 700;
		line-height: 20px;
		margin-left:5px;
		margin-bottom: 5px;
	}
	.carousel .text p {
		width: 200px;
		font-size: 16px;
		line-height: 20px;
		margin-left:5px;
	}

	.FL {float:none;}
  
	.nudge-right {margin:0 5px 5px 0}

	#footer-menu {display:block;margin-top:20px;padding-top:20px;border-top:thin #EC9F46 solid;}
}

@media (min-width:760px) and (max-width:900px) /*ipad*/
	{
	footer {padding:30px;}
	}

#prod-menu {visibility:hidden;height:0;}

#prod-menu-header:hover #prod-menu {visibility:visible;height:auto;}