/* _________________________________________________________________________________________________

title:		TDA: Main Style Sheet
version:	1.0
author:		andy shaw
email:		andy@seventy4.design
web:		http://www.seventy4.design

____________________________________________________________________________________________________ */

/* Vertical Align text options:
	top, middle, bottom, super, sub, text-top, text-bottom
	0.2em: -1em: 20%: -100%
*/

/* --- RESET --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus { outline: 0; }
body {
	line-height: 1;
	color: black;
	background: white; /* TEMP-TEST */
}
ol, ul { list-style: none; }
table {
	border-collapse: separate;
	border-spacing: 0;
	width:  100%;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
input { vertical-align:middle; }
img { display:inline-block!important;}
}
/* --- END OF RESET --- */

/* _________________________________________________________________________________________________ */

.popover {
  background: red;
  margin-bottom: -5px; }
  .popover .popover-body {
    text-align: center;
    color: blue;
    font-size: 0.8125rem;
    font-weight: 600; }
  .popover .arrow {
    bottom: calc((0.9375rem + 1px) * -1); }
    .popover .arrow:after {
      border-top-color: red;
      border-width: 0.9375rem 0.9375rem 0; }
    .popover .arrow::before {
      border-width: 0.9375rem 0.9375rem 0; }

.shop-wrapper .sr-element.sr-products {
	/*justify-content: left;*/
	max-width: 100%;
}

.shop-wrapper .sr-element.sr-filters-wrap {
	display: none;
}

.shop-wrapper .sr-product-summary::before, .shop-wrapper .sr-product-summary::after {
	content: '"';
}

.shop-wrapper .sr-product-summary {
	font-family: MontXLig;
	line-height: 1.750em;
	color: #1e1e1e; /* was #505050 */
}

.shop-wrapper .sr-product-name{
	font-family: 'TrajanReg' !important;
	font-size: 20px !important;
	color: #282828 !important;
}

.shop-wrapper .sr-image-holder{
	/*height: 265px !important;*/
}

.shop-wrapper .sr-image-holder img{
	width: 80% !important;
	margin: 0 auto;
}

.shop-wrapper .sr-int-manufacturer {
	margin-top: -10px;
	margin-bottom: 10px;
	display: block;
}

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
		
}

.shop-wrapper .sr-item .sr-item-inner {
	border-bottom: 1px solid lightgrey;
	padding-bottom: 30px;
}

#cntnt { }
					
.container { background: #fff; height: 100%; min-width: 200px; 	background: transparent; padding-bottom: 0px;
} /* TEMP-TEST: #f1f1f1 */

.row {
	background: transparent;
}

.container-fluid.banner {
	background:url('../img/assets/tda-header-backdrop.jpg');
	/* tda-header-backdrop.jpg | tda-header-home.jpg | tda-header-home-inverted.jpg */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
	overflow: hidden;
    margin-bottom: 60px!important;
}

.container-fluid.banner .container {
	padding-bottom: 0px;
}

.container-fluid.banner .overlay {
	position: absolute;
	bottom: 0;
}

.container-fluid.banner .overlay.lft img.crisps,
.container-fluid.banner .overlay.rgt img.rings { background-repeat: no-repeat; }

.banner .container { background: none; }

.banner .container .lft,.banner .container .rgt {
	height: 355px;
	position:  relative;
}

.banner .container .lft img {
	position: absolute;
	bottom: 0px;
	left: -225%; /* -35% */
	max-width: 295px; /* 230% */
}
.banner .container .rgt img {
	width: 100%;
	margin: 55px auto 0 auto;
	max-width: 245px;
 }

.banner .container .rgt img.brand {  }
.banner .container .rgt img.subrand { margin-top: 6px; }

.d-block .mobrand img.brand {
	margin-top: 20px;
	width: 100%;
	max-width: 350px;
}
.d-block .mobrand img.subrand {
	width: 100%;
max-width: 350px;
margin-bottom: 15px;
}

.v-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
 }
	 .balancer { height: 100%;}


 .shop-wrapper .sr-int-manufacturer {
 	font-family: 'MontXLig';
 	color: #505050;
 }


/* New Stuff to check */

.footer .d-md-none .img-responsive {
	width: 50%;
}
.footer .d-md-block .img-responsive {
	width: 80%;
	max-width: 250px;
}

.footer p.ftr-cpy {
	color: #000;
}
 
/* --- PRODUCTS --- */
#plistings { }

	.product {
		border-bottom: 1px solid lightgrey;
		height:  100%;
		position: relative;
		padding-top: 50px;
	}
	
	.product .pvisuals {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	
	.product .pvisuals img.pthumb { margin: 0 auto; max-height: 300px; }
	
	.product .pvisuals a img.pbadge {
		position: absolute;
		bottom: 0;
		right: 0;
	    width: 75px;
	    transition: all 0.25s ease-out;
	    -webkit-transition: all 0.25s ease-out;
	    -moz-transition: all 0.25s ease-out;
	    -o-transition: all 0.25s ease-out;
	}
	
	.product .pvisuals a img.pbadge:hover {
		opacity: .25;
		cursor: pointer;
	}
	
	.product .pvisuals img.pstyle {
		position: absolute;
		bottom: 0;
		right: 0;
	    width: 75px;
	}

	
	.product .psummary {
		margin-bottom: 65px;
		padding: 0;
	}
	
	.product .pname {
		min-height: 25px; /* TO-DO - once font is finalised set height */
		vertical-align: middle;
/*		margin-top: 30px;*/
		text-align: center;
		/*background-color:  pink;*/
	}
	.product .pname h4 {
		margin: 0;
		background: white;
	}
	
	#snacks .product .pname h4 { margin-left: -20px; /* Required as images are off-centered. TO-DO - we need them centered really. */ }
	
	.product .pdetail {
		position: absolute;
		bottom: 0;
		right: 0;
		text-align: right;
		margin-bottom: 25px;
		padding-right: 10px;
	    line-height: 24px;
	}
	
	#wine .product .pdetail {
		position: absolute;
		bottom: 0;
		right: 0;
		text-align: center;
		margin-bottom: 25px;
		/*padding-left: 6%;*/
		width: 100%;
	}
	
	.fake-hr { border-bottom: 1px solid lightgrey; }
		
	#wine .product .psummary { margin-bottom: 115px!important; }
	
	#wine .product .pdetail span { display: inline-block; white-space: nowrap; }
	
	.product .pdetail .by,
	.product .pdetail .price,
	.product .pdetail .price2,
	.product .pdetail .size,
	.product .pdetail .strength,
	.product .pdetail .abv
	{ display: inline-block; margin-bottom: 0; }
	
	.product .pdetail .price,
	.product .pdetail .price2 {
		font-weight: 600;
	}
	
	.product .pdetail .by,.product .pdetail .size,.product .pdetail .strength::after,.product .pdetail .strength::before,.product .pdetail .price2::before {
		color: grey; /* TO-DO */
		font-size: 12px;
		vertical-align: 5%;
		text-transform: uppercase;
	}
	
	.product .pdetail .by { padding-right: 5px; }
	
	.product .psummary::before,.product .psummary::after { content:'"'; /*color: fuchsia;*/ /* TEMP-TEST */}
	.product .pdetail .strength::before,.product .pdetail .price2::before { content:'/'; padding: 0px 8px 0 2px;}
	.product .pdetail .strength::after { content:' ABV';}
	.product .pdetail .by::after { content:':';}

.container.prointro {
	/*background: #e3e3e3;*/ /* TEMP-TEST */
	/*margin-top: 55px;*/
	position: relative;
	/*margin-bottom: 45px;*/	
}

.prointro .etching {
	width: 300px;
	height: 300px;
	position:  absolute;
	top: 0;
	right: 15px;
	z-index: 0;
	opacity: .5;
}

.prointro h1 {
	/*background: pink;*/
	position: relative;
	z-index: 30;
	min-height: 30px;
	margin-bottom: 33px;
}

hr.internal { margin: 30px 0 60px 0;
	border-top: 1px solid lightgrey; }

#wine .prointro.rgt { background: fuchsia!important; }

	.prointro .lft,.prointro .rgt {
		position: relative;	
		z-index: 30;
		/*background: #f1f1f1;*/
		/*margin-left: -15px;*/
		/*border-bottom: 1px solid teal;	*/
	}

	#wine .prointro .etching {
		background: url('../img/assets/drapers-arms_wine-illustration.png');
		background-size: cover;
	}
	#cider .prointro .etching {
		background: url('../img/assets/drapers-arms_cider-illustration.png');
		background-size: cover;
	}
	#beer .prointro .etching {
		background: url('../img/assets/drapers-arms_beer-illustration.png');
		background-size: cover;
	}
	#snacks .prointro .etching {
		background: url('../img/assets/drapers-arms_snacks-illustration.png');
		background-size: cover;
	}	

/*.beermats {
	display: none;
}

.no-show {
	display: none;
}*/
/* https://getcssscan.com/css-box-shadow-examples */

#beer-archive .beermats img {
	width:100%;
	/*border: solid #ebebeb 1px!important;*/
	margin-bottom: 20px;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}



/* XS  --- --- --- --- --- --- --- --- --- --- --- */
@media(max-width:767px){

	.container-fluid.banner {/* height: 280px;*/ /* 280px */ }
	
	
	.container-fluid.banner .overlay.lft { left: -250px; } /* -32.5%; */
	.container-fluid.banner .overlay.rgt { right: -640px; /* -79% */}
	.container-fluid.banner .overlay.lft img.crisps,
	.container-fluid.banner .overlay.rgt img.rings { width: 53%; }
	
	.coronavirus { padding: 30px 25px 0px 25px; }
	/*.product .pname { background: teal; }*/
	/*.banner .container .lft img {
		left: -60%; /* -35% *!/
	}*/
	
	.signature { margin-bottom: 0px!important!important; }

}	

/* SM  --- --- --- --- --- --- --- --- --- --- --- */
@media(min-width: 768px){
	
	.banner .container .lft,.banner .container .rgt { height: 382px; }
	.banner .container .lft img { max-width: 88%; }
	.banner .container .rgt img { max-width: 70%; margin-top: 75px; }
	
	.container-fluid.banner .overlay.lft { left: -130px; } /* -19% */
	.container-fluid.banner .overlay.rgt { right: -625px; /* -51.5% */ }
	.container-fluid.banner .overlay.lft img.crisps,
	.container-fluid.banner .overlay.rgt img.rings { width: 57%; margin-bottom: -10px; }
	
	.banner .container .lft img {
		left: 14.5%;
		width: 100%;
	}
	
	.banner .container .rgt img {
		margin: 55px auto 0 auto;
	}
	
	.product { border-bottom: 0px; }
	.product .pname { min-height: 44px; /*background: pink;*/ }
	
	.product .pvisuals a img.pbadge { width: 50px; bottom: 17px; }
	
	.product .pvisuals img.pstyle  { bottom: -1px; }
	

}

/* MD  --- --- --- --- --- --- --- --- --- --- --- */
@media(min-width: 992px){

.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;	
}

	.coronavirus { padding: 15px 25px 0px 25px!important; }

	.banner .container .lft,.banner .container .rgt { height: 500px; }
	.banner .container .lft img { left: 13%; }
	.banner .container .lft img { max-width: 90%;}
	.banner .container .rgt img { width: 70%; margin-top: 90px; }
	.banner .container .lft { background: none; }
	.banner .container .rgt { background: none; }
	.container-fluid.banner .overlay.lft { left: -200px; } /* 24% */
	.container-fluid.banner .overlay.rgt { right: -585px; /* -40% */ }
	.container-fluid.banner .overlay.lft img.crisps,
	.container-fluid.banner .overlay.rgt img.rings { width: 73.5%; margin-bottom: -10px;}
	
	.product .pname { min-height: 66px; /*background: red;*/ }
	.product { border-bottom: 1px solid lightgrey; }
	.row.divider { border-bottom: 0px; }
	
	hr.divider { border-top: 1px solid red!important; }
	.product .pvisuals a img.pbadge { bottom: 3px; }
	.product .pvisuals img.pstyle  { bottom: -15px; }
	
	
}

/* LG  --- --- --- --- --- --- --- --- --- --- --- */
@media (min-width: 1200px){




	.banner .container .lft,.banner .container .rgt { height: 590px; }
	.banner .container .lft img { width: 75%;}
	.banner .container .rgt img { width: 70%; margin-top: 100px; }
	.banner .container .lft img { left: 20%; }
	.container-fluid.banner .overlay.lft { left: -250px; } /* -29.5% */
	.container-fluid.banner .overlay.rgt { right: -535px; /* -36% */ }
	.container-fluid.banner .overlay.lft img.crisps,
	.container-fluid.banner .overlay.rgt img.rings { width: 87.5%; margin-bottom: -10px; }
	
	.product .pname { min-height: 44px; /*background: blue;*/ }
	.product .pvisuals a img.pbadge { bottom: 6px; width: 60px; }
	.product .pvisuals img.pstyle  { bottom: -6px; }
	

}

/* XLG  --- --- --- --- --- --- --- --- --- --- --- */
@media (min-width: 1320px){
	
	.container { width: 1320px; }
	.banner .container .lft,.banner .container .rgt { height: 550px; /* 678px */ }
	.banner .container .rgt img { margin-top: 25px; }
	.container-fluid.banner .crisps { right: 80%; display:  block; }
	.container-fluid.banner .rings { display: block; }
	.container-fluid.banner .overlay.lft { left: -275px; } /* -27% */
	.container-fluid.banner .overlay.rgt { right: -550px; /* -26.5% */ }
	.container-fluid.banner .overlay.lft img.crisps,
	.container-fluid.banner .overlay.rgt img.rings { width: 100%;    margin-bottom: -10px; }	
	
	#wine .product .psummary { margin-bottom: 95px!important; }
	.product .pvisuals a img.pbadge { bottom: 10px; }
	.product .pvisuals img.pstyle  { bottom: -2px; }
	
}
/* --- --- --- --- --- --- --- --- --- --- --- --- */