@charset "utf-8";
/* Nigel Tyas CSS Document */
/* new black is 221e1f */
body {font-family: 'Noto Serif', serif;font-weight:500;font-size:17px;color:#eef8fd;margin:0px; background-color:#505559}
p{font-family: 'Noto Sans', sans; line-height:30px; font-weight:400}
li{font-family: 'Noto Sans', sans; line-height:30px; font-weight:400}
h1,h2,h3,h4 {font-weight:400;}
h1{font-size:30px} /*was 34*/
h2{font-size:28px} /*was 28*/
h3{font-size:20px; font-weight:400;font-family: 'Noto Sans', sans;}
h4{font-size:17px; font-weight:500;font-family: 'Noto Sans', sans;}
a:link, a:visited {color:#80d4ff;text-decoration:none;}
a:hover, a:active {color:#ff1925;text-decoration:underline;}

.centred{text-align:center; margin:0px auto; float:none !important}
.hideme{display:none !important}

input[type=text], textarea {
	  font-family: 'Noto Serif', serif;
    font-size: 14px;
    color: #3f4142;
		background-color:#fff;
    width: 50%;
    line-height: 25px;
		margin:5px 0px;
		border-width: 1px;
		border-style:solid;
		border-color:#bdc687;
		border-radius:3px;
}
select{ background-color:#bdc687;
height:30px;
border:none;
border-radius:5px;
}
input[type=checkbox]{accent-color:#bdc687;}

.footer input[type=text], footer input:focus {
    font-family: 'Noto Serif', serif;
    font-size: 14px;
    color: #fff;
    border-style: none;
    border-bottom: white;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    background-color: #655b63;
    width: 80%;
    line-height: 25px;
    outline: none !important;

}
	
	
input::selection {background-color:#bdc687;}

.logopara{ padding:15px 0px 6px 0px; margin:0px}
.thelogo{width:20%; max-width:200px; height:auto; position:absolute; z-index:1000; left:50%; translate:-50%; }
.row-container{margin: 0px;
padding: 0px;
clear: both;
width: 100%;}
.container{width:1300px;margin:0px auto}
.topline{background-color:#505559;
font-size:16px;
color:#fff;
padding:4px}
.topline a:link, .topline a:visited {color:#fff;text-decoration:none;}
.topline a:hover, .topline a:active {color:#bdc687;text-decoration:none;}
.bread{font-size:12px}
.breadcurrent{ color:#ccc}
.bread a:link, .bread a:visited {color:#eee;text-decoration:none;}
.bread a:hover, .bread a:active {color:#eee;text-decoration:underline;}

.tight{padding:0px ;margin:0px}
.close-lines{line-height:inherit; font-size:90%}
.nopadding{padding:0px !important;}
.smallprint{font-size:70%}
.clearall{clear:both}
.menu-text{font-size:18px; text-align:center}
.menu-text a:link, .menu-text a:visited {color:#3f4142;text-decoration:none;padding:10px}
.menu-text a:hover, .menu-text a:active {color:#3f4142;text-decoration:none; background-color:#f0f0f0}

.fleft{float:left; padding-left:1%}
.fright{float:right; padding-top:4px; padding-bottom:5px}

.onlymobile{display:none !important;}
.notmobile{display:inherit}
.col2{width:50%; max-width:50%; float:left}
.col3{width:33.33%; max-width:33.33%;}
.col2-3{width:66.66%; float:left}
.col4{width:25%; max-width:25%}
.col5{max-width:20%; width:20%;}
.col6{width:16.66%;max-width:16.66%;}

.greyborder {border: 1px solid #ddd;}


.spaced-row {padding: 0px 5%;}

.cell-text p{font-size:11px; line-height:16px; text-align:left; padding:0px}
.cell-text h4{padding:0px; margin:10px 0px}

.white{background-color:#fff;
color:#3f4142;}
.slatewhite{background-color:#eef8fd;
color:#3f4142;}
.grey-quote {
    font-size: 1.2em;
    padding: 20px 15%;
    line-height: 1.6em;
    background-color: #655b63;
    color: #fff;
    border-radius: 5px;
}
.dark-grey{background-color:#505559;
color:#f0f0ee;
padding:5px}
.mid-grey {
background-color: #ddd ;
color: #000;
padding: 5px;}
.light-grey{background-color:#f0f0ee;
color:#3f4142;
padding:5px}
.green{background-color:#bdc687;
color:#fff;
padding:5px}
.green a:link, .green a:visited {color:#fff;text-decoration:none;}
.green a:hover, .green a:active {color:#3f4142;text-decoration:underline;}

.dark-text{color:#3f4242; !important}
.footer p{ font-size:12px; line-height:18px}
.footer a:link, .footer a:visited {color:#eee;text-decoration:none;}
.footer a:hover, .footer a:active {color:#ff1925;text-decoration:underline;}

.copyright{font-size:13px; text-align:center; line-height:15px !important}

.flex-container {display:flex; flex-wrap:wrap}
.flex-container-42{display:flex; flex-wrap:wrap;}
.flex-reverse{flex-direction: row-reverse;}
.flex-item-21 {	flex:0 0 50%; box-sizing: border-box;}
.flex-item-22 {	flex:0 0 50%; box-sizing: border-box;}
.flex-item-32 {	flex:0 0 33.3%; box-sizing: border-box; display:flex}
.flex-item-42 {	flex:0 0 25%; box-sizing: border-box;display:flex}
.flex-item-52 {	flex:0 0 20%; box-sizing: border-box;}
.flex-item-62, .flex-item-63 {	flex:0 0 16.6%; box-sizing: border-box;}
.inside-flex{margin:0px 20px 10px 0px}
.inside-flex2{margin:0px 20px 15px 0px}

.flex-col {
	flex:1;
	margin: 10px 20px 10px 0px;
	padding: 10px;
}
.flex-center{display:flex;flex-direction: column;justify-content: center;}
.flex-link:hover, .flex-link:active {background-color:#655b63}
.flex-link a:link, .flex-link a:visited {color:#3f4142;text-decoration:none;}
.flex-link a:hover, .flex-link a:active {color:#fff; text-decoration:underline;}
/* header styles */
.flex-top-left{
    flex: 0 0 40%;
    box-sizing: border-box;
    display: flex;
}
.flex-top-centre{
    flex: 0 0 20%;
    box-sizing: border-box;
    display: flex;
}
.flex-top-right{
    flex: 0 0 40%;
    box-sizing: border-box;
    display: flex;
		justify-content:flex-end;
}

.flex-top-right a:link, .flex-top-right a:visited{color:#eee}
.flex-top-right a:hover{color:#00a9ff; text-decoration:none}
/* end header styles */

.tightlist ul {margin:0px}

.img100 {width:100%;height:auto;}
.img95 {width:95%;height:auto;}
.img75 {width:75%;height:auto;}

.img-container{position: relative;}

/* This creates the floating box for banner text */
.img-overlay{
	font-family: "Old Standard TT", serif;
	color:#FFF;
	width: 50%;
	height: 82%;
	position: absolute;
	left: 1%;
	bottom:3%;
	padding: 0% 0% 2% 2%;
	overflow:hidden;
	z-index:10;
	display: flex;
	align-content: flex-start;
	flex-direction: column;
	justify-content: flex-end;
}
.img-overlay h2 {font-size:48px; font-weight:400; margin:8px 0px; line-height:52px }
.img-overlay h3 {font-size:22px; font-weight:400; margin:8px 0px; }
.img-overlay p  {font-size:22px; font-weight:400; margin:8px 0px; line-height:27px;}

.img-text{
    position: absolute;
    left: 50%;
		top:50%;
		color:#FFF;
		translate: -50% -50%;
		text-align:center;
		width:100%;
}
.img-text h2{ font-size:36px; font-weight:500;}
.img-text p { font-size:20px; font-weight:500; text-decoration:underline; font-variant-caps:all-small-caps}

a.faux-link{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.sales p{font-size:13px; text-align:center; line-height:16px}

.btn-style, .btn-style:link, .btn-style:visited{
	color : #000;
	padding : 7px 10px 8px 10px;
	background-color : #80d4ff;
	cursor:pointer;
	transition: background-color 0.5s;
	border-radius:10px;
	text-decoration:none !important;
	border:none;
}
.btn-style:hover, .btn-style:active{
	color : #fff !important;
	background-color : #ff1925;
}
.btn-inv, .btn-inv:link, .btn-inv:visited{
	color : #3f4142 ;
	background-color : #fff;
}
.btn-inv:hover, .btn-inv:active{
	color : #fff;
	background-color : #3f4142;
}
.btn-on-light, .btn-on-light:link, .btn-on-light:visited{
	color : #fff ;
	background-color : #3f4142;
}
.btn-on-light:hover, .btn-on-light:active{
	color : #3f4142 !important;
	background-color : #fff;
}
.wide {width:100%;}

img.response850 {object-fit: cover;
width:100%;
height: auto;
max-height:82vh;
object-position:50% 15%;
}

img.response550 {object-fit: cover;
width:100%;
height: auto;
max-height:550px;
object-position:50% 15%;
}
img.response550-mid {object-fit: cover;
width:100%;
height: auto;
max-height:550px;
object-position:50% 45%;
}

img.response550bottom {object-fit: cover;
width:100%;
height: auto;
max-height:550px;
object-position: bottom;
}

/* Accordion styles */
button.accordion {
    background-color: #655b63;
		margin-bottom:2px;
    color: #fff;
		font-family:Raleway,sans-serif;
		font-weight:500;
		font-size:17px;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
    background-color: #bdc687;
		color:#FFF
}
button.accordion:hover:before {
	color:#FFF;
}
button.accordion:before {
	content: '\276f';
	color: #fff;
	margin: 0px 10px 0 0;
	padding: 1px 3px;
	font-size:1.0em;
}
button.accordion.active:before {
	content: "\2716";
	color:#FFF;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0px;
    overflow: hidden;
    transition: 0.8s;
    opacity: 0;
}
div.panel.show {
    opacity: 1;
    max-height: 800px;  
}
/* Image zoom */
.img-hover-zoom {
  overflow: hidden;
	line-height:0px;
}
.img-hover-zoom img {
  transform: scale(1.05);
  transition: transform .5s ease;
}
.img-hover-zoom:hover img, .img-container:hover img {
  transform: scale(1.00);
}
.zoombox {overflow:hidden;}

/* image fader */
.img-fader  {
	transition:0.5s;
}
.img-fader:hover  {
  opacity:0.5;
}

/* basket */
.basket { background-color: #fff; text-align: right }
tr.basket {background-color:#FFF;
color:#333;
font-size:11pt;
}
tr.basket:hover {background-color:#fcfcfc;
}
.basket > td {border-bottom:1px solid #CCC;
vertical-align:text-top;
}
.basket > td > p {line-height:1.3em;
margin:10px 0px;
}
.subs {font-size:9pt;
color:#999;
}
.del {font-size:9pt;
color:#999;
cursor:pointer;
}
.del:hover {color:#ff0000; text-decoration:underline}
.ship { background-color: #fff; text-align: right; border-top: 1px solid #939393; border-bottom: 1px solid #939393 }
.spaced-row-10 {
	padding: 0px 10%;
}
.spaced-row-15 {
	padding: 0px 15%;
}
/* scroll to top button */
#gotoTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #80d4ff;
  color: white;
  cursor: pointer;
  padding: 15px 20px;
  border-radius: 4px;
	opacity:80%;
	transition: background-color 0.5s;
}

#gotoTop:hover {
  background-color: #555;
}
/*making the video responsive*/
.vimeo-youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
}
.vimeo-youtube iframe,
.vimeo-youtube object,
.vimeo-youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Tabbed panels */
.tab-row {
	background-color:#fff;
	width:100%;
	float:left;
	line-height: 50px;
	margin-top:40px;
	border-bottom-style:solid;
	border-bottom-color:#ccc;
	border-bottom-width:1px;
}
.tab-item {
	float:left;
	background-color:#EEE;
	padding:0px 10px;
	margin:0px 2px;
	line-height:40px;
	cursor:pointer;
	border-radius:5px 5px 0px 0px;
	transition: background-color 0.4s;
}
.tab-black {
	background-color:#3f4142;
	color:#FFF;
}
.tab-item:hover, .tab-item:active{
	background-color:#bdc687;
	color:#FFF;
}
.tab-body{
	float:left;
	clear:both;
	width:100%;
	opacity: 0;
	overflow:hidden;
	max-height:0px;
	border-bottom-style:solid;
	border-bottom-color:#ccc;
	border-bottom-width:1px;	
	transition: opacity 1s;
}
.tab-body.show{
	opacity: 1;
	max-height:2000px;
}



@media all and (max-width: 1350px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.container{width:975px;}
.img-overlay p {font-size:20px; line-height:25px;}/*was 14/20*/
.img-overlay h2 {font-size:44px;}/*was 30*/
.img-text h2{ font-size:34px;}
input[type=text], textarea {width: 60%;}

}

@media all and (max-width: 975px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.container{width:768px;}
.img-overlay{width: 70%; right: 4%;}
.img-overlay p {font-size:18px; line-height:22px;}/*was 13/18*/
.img-overlay h2 {font-size:36px; margin-bottom:5px}/*was 24*/
.img-overlay h3 {font-size:16px;margin-top:8px}
.img-text h2{ font-size:28px;}
input[type=text], textarea {width: 70%;}
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.container {width: 100%;}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px;}
h4{font-size:18px;}
p{font-size:16px;line-height:24px}
.copyright{font-size:10px;line-height:14px !important}
.topline{font-size:16px; background-color:#333}
.notmobile {display:none !important;}
.onlymobile{display:inherit !important; }
.col2, .col3, .col2-3, .col4{width:100%; max-width:100%}

.flex-col {margin: 0px 10px 0px 0px;}
.flex-item-22, .flex-item-32, .flex-item-42, .flex-item-62 { flex: 0 0 50%;}
.flex-item-63{flex: 0 0 33.333%}
.flex-item-21{ flex: 0 0 100%;}

.flex-top-centre, .flex-top-right{display:none;}
.flex-top-left{ flex: 0 0 100%;}

.img-overlay{
    width: 97% !important;
    height: auto;
		left:0%;
		bottom:0%;
}
.img-overlay p {font-size:15px; line-height:20px;}
.img-text h2{ font-size:26px;}
input[type=text], textarea {width: 80%;}
.cell-text h4{font-size:14px}
.spaced-row{
	padding:0px;
	}

tr.basket {font-size:9pt;}
tr.basket p {font-size:9pt;}

}

@media all and (max-width: 450px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.flex-container {flex-direction:column}
.flex-col{width:auto !important;margin: 4px }
.inside-flex, .inside-flex2{margin:10px}
.col2, .col3, .col2-3, .col4, .col5, .col6{width:100%; max-width:100%; float: none}
.img-overlay p {font-size:12px; line-height:15px; margin-top:0px}
.img-overlay h2 {font-size:24px; font-weight:400; line-height:24px }
.img-overlay h3 {font-size:12px; font-weight:400; line-height:12px; margin-top:0px }

.img-text h2{ font-size:36px;}
.img-text p { font-size:18px;}
input[type=text], textarea {width: 95%;}
img.response850 {height: 70vh; object-position:24% 0%;}
.sales p{font-size:10px; line-height:14px}


}