/* COMMON */

input, select, textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	outline:0;
	background:transparent !important;
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
	background:transparent !important;
}

div.mode.desktop {
	display:block;
}
div.mode.tablet,
div.mode.mobile,
div.mob-hr {
	display:none;
}

html, body {
	margin:0;
	padding:0;
	font-family:  'Cormorant Garamond', serif;
	xfont-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:300;
	color:#000;
}
	
a,
a:hover,
a:active,
a:focus	{
	color:#000;
	text-decoration:none;
	cursor:pointer;
}

.fb {
	text-transform:uppercase;
	font-weight: 700;
}

.muted {
	color:#333;	
}

.italic {
	font-style:italic;
}

h1 {
	xfont-family: Arial, sans-serif;
	font-family:  'Cormorant Garamond', serif;
	font-size:26px;
	line-height:26px;
	padding:20px 25px 25px 25px;
	margin:0;
	font-weight:700;
}

/* NAVIGATION */

#desktop-nav-bar {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#mobile-nav-bar {
	display:none;
}

#nav-container {
	position:fixed;
	top:135px;
	left:0;
	width:240px;
	height:100%;
	font-size:14px;
	text-transform:uppercase;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing:0.2px;
	z-index:100;
	overflow:hidden;
}

#nav {
	position:relative;
	top:0;
}

#desktop-logo {
	width:185px;
	height:100px;
}

header.white #nav,
header.white #nav a,
header.white #nav a:active,
header.white #nav a:hover,
header.white #nav a:visited,
header.white #desktop-nav-bar,
header.white #desktop-nav-bar a,
header.white #desktop-nav-bar a:active,
header.white #desktop-nav-bar a:hover,
header.white #desktop-nav-bar a:visited {
	color:#fff;
}

header.white #desktop-header-basket-container svg path {
	fill: #fff;
}

header.white #desktop-logo {
	background-image:url('../images/dave-ayre-logo-desktop-white-bold.png');
}

header.white #desktop-search-bar {
	border-bottom:1px solid #fff;
}
 
header.black #nav,
header.black #nav a,
header.black #nav a:active,
header.black #nav a:hover,
header.black #nav a:visited,
header.black #desktop-nav-bar,
header.black #desktop-nav-bar a,
header.black #desktop-nav-bar a:active,
header.black #desktop-nav-bar a:hover,
header.black #desktop-nav-bar a:visited {
	color:#000;
}

header.black #desktop-header-basket-container svg path {
	fill: #000;
}

header.black #desktop-logo {
	background-image:url('../images/dave-ayre-logo-desktop-black-bold.png');
}

header.black #desktop-search-bar {
	border-bottom:1px solid #000;
}

header.grey #nav,
header.grey #nav a,
header.grey #nav a:active,
header.grey #nav a:hover,
header.grey #nav a:visited,
header.grey #desktop-nav-bar,
header.grey #desktop-nav-bar a,
header.grey #desktop-nav-bar a:active,
header.grey #desktop-nav-bar a:hover,
header.grey #desktop-nav-bar a:visited {
	color:#333;
}

header.grey #desktop-header-basket-container svg path {
	fill: #333;
}

header.grey #desktop-logo {
	background-image:url('../images/dave-ayre-logo-desktop-grey-bold.png');
}

header.grey #desktop-search-bar {
	border-bottom:1px solid #333;
}

header.red #nav,
header.red #nav a,
header.red #nav a:active,
header.red #nav a:hover,
header.red #nav a:visited,
header.red #desktop-nav-bar,
header.red #desktop-nav-bar a,
header.red #desktop-nav-bar a:active,
header.red #desktop-nav-bar a:hover,
header.red #desktop-nav-bar a:visited {
	color:#000;
}

header.red #desktop-header-basket-container svg path {
	fill: #000;
}

header.red #desktop-logo {
	background-image:url('../images/dave-ayre-logo-desktop-red-bold.png');
}

header.red #desktop-search-bar {
	border-bottom:1px solid #000;
}

#nav ul {
	text-align:right;
	list-style-type:none;
	margin:0;
	padding:0 35px 0 0;
}

#nav ul li {
	padding-top:5px;
	padding-bottom:5px;
	font-weight:700;
}

#nav ul li.parent-nav {
	padding-bottom:10px;
}

#nav ul li.mobile-logo {
	display:none;
}

#nav ul li.active {
	font-weight:700;
	border-bottom:1px solid #333;
}

#nav li.cms-nav {
	text-transform:none;
}

#nav li.cms-nav ul {
	list-style-type: none;
	font-size:14px;
	padding:14px 0 0 0;
}

#nav li.cms-nav ul li {
	padding-top:4px;
	padding-bottom:4px;
}
	
#cms-nav-collapse {
	display:none;
}

#desktop-search-bar {
	height:1px;
	border-bottom:1px solid #000;
	margin-top:-1px;
}

#desktop-header-basket-container { 
	position:relative;
	display:inline-block;
	float:right;
	line-height: 32px;
    margin-right: 16px;
    font-size: 11px;
    xletter-spacing: 0.2px;
	height: 32px;
    width: 32px;
    text-align: center;
}

#desktop-header-basket-container svg {
	position:absolute;
	top:0px;
	right:0px;
}

/* MAIN */

.fs-image {
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
	width:100%;
	height:100vh;
}

.fs-video {
	position:relative;
	width:100%;
	height:100vh;
	overflow: hidden;
}

.fs-video video {
	position:relative;
	object-fit: cover;
	width:100%;
	height:100%;
}

/* CATEGORY */

.category-description {
	max-width:1024px;
	font-size:18px;
	line-height:25px;
	xletter-spacing:0.2px;
	padding:0 25px 30px 25px;
	text-align:justify;
	margin:0 auto 0 auto;
}

ul.category-tabs {
	font-family:  'Cormorant Garamond', serif;
	xfont-family: Arial, sans-serif;
	list-style-type:none;
	margin:0 auto 20px auto;
	padding:0;
	text-align:center;
}

ul.category-tabs li {
	display:inline-block;
	margin:0;
	padding:0 10px 20px 10px;
	text-align:center;
}

ul.category-tabs a,
ul.category-tabs a:active,
ul.category-tabs a:visited,
ul.category-tabs a:hover {
	text-decoration:none;
	font-size:26px;
	font-weight:300;
	xletter-spacing:1px;
}

ul.category-tabs a:hover,
ul.category-tabs a.active {
	border-bottom:3px solid #ccc;
}

.category {
	margin-left:-20px;
}

.category .item {
	padding-left:20px;
	margin-bottom:40px;
}

.category .title {
	display:block;
	font-size:14px;
	font-stretch:100%;
	line-height:16px;
	margin:5px 0px 4px 0px;
	xletter-spacing:0.2px;
	text-overflow:ellipsis;
	overflow-x:hidden;
	overflow-y:hidden;
	height:16px;
	white-space:nowrap;
}

.category .price {
	display:block;
	font-size:14px;
	font-stretch:100%;
	line-height:16px;
	xletter-spacing:0.2px;
	text-transform:uppercase;
}

.category .price .price-was {
	text-decoration:line-through;
}

.category .price .price-now {
	color:#f61111;
}

/* CMS & SEARCH */

.cms-page {
	margin-top:135px;
}

.cms-page a,
.cms-page a:hover,
.cms-page a:active,
.cms-page a:focus {
	color:#666;
	text-decoration:underline;
}	

.cms-container {
	max-width:1024px;
	margin:80px auto 80px auto;
}

.cms-no-container {
	margin:80px 0 80px 0;
}

.cms-container-homepage {
	max-width:1024px;
	margin:120px auto 80px auto;
}

.cms-container-homepage h1 {
	font-family:  'Cormorant Garamond', serif;
	xfont-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:14px;
	xletter-spacing:0.2px;
	font-weight:300;
	text-transform:uppercase;
}

.cms {
	font-size:18px;
	xletter-spacing:0.2px;
	line-height:25px;
	text-align:justify;
	margin:0 20px 0 260px;
}

blockquote {
	margin:0;
	padding:0;
}

blockquote cite {
	text-transform:uppercase;
	font-weight: 700;
	color:#333;
}

blockquote cite::before {
	content: "\2014\00A0";
}

/* PRODUCT */

.product-slide {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width:100%;	
}

.item-slider-container {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
	margin:0 0 0 80px;
}

.item-image {
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
	background-image:url('../images/1920x2880.png');
	width:100%;
	height:auto;
	margin-bottom:32px;
}

.item-image-wide {
	background-position: center; 
    background-repeat: no-repeat;
	background-image:url('../images/2880x1920.png');
	background-size: contain;
	width:100%;
	height:auto;
	margin-bottom:32px;
}

.product {
	position: relative;	
	-ms-flex-preferred-size: 0;
	  flex-basis: 0;
	  -ms-flex-positive: 1;
	  flex-grow: 1;
	width:100%;
	margin-right:0;
}

@media screen and (min-height:700px) {
	.product {
		position: -webkit-sticky;
		position: sticky;
		top: 135px;
		align-self: flex-start; 	
	}
}

.product-inner,
.product-description {
	position:relative;
	display:block;
	max-width:450px;
	margin:0 auto 0 auto;
}
	
.product-description {
	margin:0 auto 190px auto;
}

.product .drag {
	display:none;
}

.product .title {	
	padding:0;
	display:block;
	margin:60px 0px 2px 0px;
}

.product .title h1,
.product .title h2 {
	color:#810101;
	text-align:left;
	display:inline;
	padding:0;
	margin:0;
	font-size:18px;
	font-stretch:100%;
	line-height:25px;
	xletter-spacing:0.3px;	
}

.product .price {
	display:block;
	font-size:16px;
	font-stretch:100%;
	line-height:18px;
	height:18px;
	xletter-spacing:0.2px;
	text-transform:uppercase;
	margin:4px 0 0 0;
	font-weight:700;
}

.product .price .price-was {
	text-decoration:line-through;
}

.product .price .price-now {
	color:#f61111;
}

.product .product-inner span.add-btn,
.product .product-inner span.process-btn {
	display:none;
}

.product span.add-btn,
.product span.process-btn {
	display:block;
	position:absolute;
	bottom:-100px;
	left:0px;
	right:0px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center !important;
	align-items: center !important;
	justify-content: center;
	font-weight:700;
	height:40px;
	width:100%;
	color:#fff;
	border:1px solid #000;
	background-color:#000;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
}

.product span.process-btn {
	bottom:-160px;
}

.product span.add-btn:hover,
.product span.add-btn:focus,
.product span.add-btn:active,
.product span.process-btn:hover,
.product span.process-btn:focus,
.product span.process-btn:active, {
	background-color:#000;
	color:#fff;
}

.product span.white-btn {
	color:#000;
	background-color:#fff;
}

.product-description {
	color:#333;
	text-align:justify;
	font-size:16px;
	line-height:25px;
	font-stretch:100%;
	text-size-adjust:100%;
	font-weight:400;
	xletter-spacing:0.2px;
}

.product-description p {
	padding-top:4px;
}

.product-description h2 {
	display:none;
}

.product-return {
	display:none;
}

#mobile-product-basket {
	display:none;
}

/* CHECKOUT */

.checkout-page {
	margin-top:135px;
}

.checkout-container {
	max-width:1024px;
	margin:80px auto 80px auto;
}

.checkout-container h1 {
	text-align:center;
}

.checkout {
	font-size:14px;
	xletter-spacing:0.2px;
	line-height:21px;
	text-align:justify;
	margin:0 20px 0 260px;
}

.checkout .price {
	font-weight:700;
}

.checkout .price .price-was {
	text-decoration:line-through;
}

.checkout .price .price-now {
	color:#f61111;
}

.checkout .del {
	font-size:20px;
}

.checkout .summary {
	margin:20px 0 0 0;
	padding:20px;
	background-color:#eee;	
}

.checkout .note {
	margin:30px 0 0 0;
	font-size:12px;
	line-height:16px;
	font-stretch:100%;
	xletter-spacing:0.2px;
}

.checkout span.checkout-btn {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center !important;
	align-items: center !important;
	justify-content: center;
	font-weight:700;
	height:40px;
	width:100%;
	max-width:370px;
	color:#fff;
	border:1px solid #000;
	background-color:#000;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
	margin:30px 0 0 auto;
}

.checkout #addonform {
	margin-top:30px;
	padding-top:30px;
	border-top:1px solid #cccccc;
	text-align:justify;
	font-size:12px;
	line-height:16px;
	font-stretch:100%;
	xletter-spacing:0.2px;
}

.checkout #addonform .addondescription {
	margin-left:30px;
}

.checkout #addonform .addondescription h3 {
	text-align:left;
	display:inline;
	padding:0;
	margin:0;
	font-size:18px;
	font-stretch:100%;
	line-height:20px;
	xletter-spacing:0.3px;	
}

.checkout #addonform span.add-btn {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center !important;
	align-items: center !important;
	justify-content: center;
	font-weight:700;
	height:40px;
	width:100%;
	color:#fff;
	border:1px solid #000;
	background-color:#000;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
}

.checkout #addonform span.add-btn:hover,
.checkout #addonform span.add-btn:focus,
.checkout #addonform span.add-btn:active {
	background-color:#000;
	color:#fff;
}

.checkout tr.checkout-sold-item td {
	background-color:#ff0000;
}

/* FORMS */

.cms-no-container input,
.cms-no-container .btn {
	max-width:400px;
}

.login-inner-container,
.register-inner-container,
.update-inner-container,
.wants-inner-container-left,
.wants-inner-container-right,
.contact-us-inner-container {
	margin:0 30px 0 30px;
}

.cms-no-container-inner-container {
	margin:0 25px 0 25px;
}

.input label,
.login-inner-container label,
.register-inner-container label,
.update-inner-container label,
.wants-inner-container-left label,
.wants-inner-container-right label,
.contact-us-inner-container label,
.cms-no-container-inner-container label {
	font-weight:700;
	display:block;
}

.input input[type="text"],
.input input[type="password"],
.input select,
textarea.input,
.login-inner-container input[type="text"],
.login-inner-container input[type="password"],
.register-inner-container input[type="text"],
.register-inner-container input[type="password"],
.register-inner-container select,
.update-inner-container input[type="text"],
.update-inner-container input[type="password"],
.update-inner-container select,
.wants-inner-container-left input[type="text"],
.wants-inner-container-left input[type="password"],
.wants-inner-container-left select,
.wants-inner-container-right input[type="text"],
.wants-inner-container-right input[type="password"],
.wants-inner-container-right select,
.contact-us-inner-container input[type="text"],
.contact-us-inner-container textarea,
.cms-no-container-inner-container input[type="text"] {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center !important;
	align-items: center !important;
	width:100%;
	border:1px solid #000;
	padding:10px;
	margin:10px 0 10px 0;
	height:35px;
}

.contact-us-inner-container textarea {
	height:80px;
}

.input input.error,
.input select.error,
.login-inner-container input.error,
.register-inner-container input.error,
.register-inner-container select.error,
.update-inner-container input.error,
.update-inner-container select.error,
.wants-inner-container-left input.error,
.wants-inner-container-left select.error,
.wants-inner-container-right input.error,
.wants-inner-container-right select.error,
.contact-us-inner-container input.error,
.contact-us-inner-container textarea.error,
.cms-no-container-inner-container input.error {
	border:1px solid #f00;
}

.login-inner-container .btn,
.contact-us-inner-container .btn,
.cms-no-container-inner-container .btn {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center !important;
	align-items: center !important;
	justify-content: center;	
	font-weight:700;
	height:40px;
	width:100%;
	color:#fff;
	border:1px solid #000;
	background-color:#000;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
	margin-top:30px;
}

.register-inner-container span.btn,
.update-inner-container span.btn,
.wants-inner-container-left span.btn,
.wants-inner-container-right span.btn {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center !important;
	align-items: center !important;
	justify-content: center;
	font-weight:700;
	height:40px;
	width:100%;
	max-width:370px;
	color:#fff;
	border:1px solid #000;
	background-color:#000;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
	margin:30px 0 0 auto;
}

.login-inner-container .btn:hover,
.login-inner-container .btn:focus,
.login-inner-container .btn:active,
.register-inner-container .btn:hover,
.register-inner-container .btn:focus,
.register-inner-container .btn:active,
.update-inner-container .btn:hover,
.update-inner-container .btn:focus,
.update-inner-container .btn:active,
.wants-inner-container-left .btn:hover,
.wants-inner-container-left .btn:focus,
.wants-inner-container-left .btn:active,
.wants-inner-container-right .btn:hover,
.wants-inner-container-right .btn:focus,
.wants-inner-container-right .btn:active,
.contact-us-inner-container .btn:hover, 
.contact-us-inner-container .btn:focus, 
.contact-us-inner-container .btn:active,
.cms-no-container-inner-container .btn:hover,  
.cms-no-container-inner-container .btn:focus,  
.cms-no-container-inner-container .btn:active {
	background-color:#000;
	color:#fff;
}

/* FOOTER */

footer {	
	border-top:1px solid #efefef;
}

.footer-row-1 {
	font-weight: 700;
	text-align:center;
	font-size:26px;
	margin:120px 0 120px 0;
}

.footer-row-2 {
	font-size:12px;
	font-stretch:100%;
	xletter-spacing:1px;
}

.footer-row-2 ul {
	list-style-type:none;
	margin:0 auto 0 auto;
	padding:0;
	text-align:center;
}

.footer-row-2 ul li {
	text-transform:uppercase;
	display:inline-block;
	margin:0;
	padding:0 15px 15px 15px;
}

.footer-row-3 {	
	margin:80px 0 0 0;
	padding:80px 0 0 0;
	border-top:1px solid #efefef;
	text-align:center;	
	font-size:14px;
	line-height:16px;
	text-transform:uppercase;
}

.footer-row-3 .row {
	max-width:1024px;
	margin:0 auto 0 auto;
}

.footer-row-3 ul {
	list-style-type:none;
	margin:0;
	padding:16px 0 0 0;
	text-align:center;
}

.footer-row-3 ul li {
	margin:0;
	padding:0px 0px 16px 0px;
}

.footer-row-4 {
	border-top:1px solid #efefef;
	font-size:12px;
	text-align:right;
	margin:60px 10px 20px 0;
	padding-top:10px;
	text-transform:uppercase;
}

/* BOOTSTRAP */

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }  
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}