@charset "utf-8";
/* CSS Document */
:root {
/* Units */
	--xs: 4px;
	--sm: 8px;
	--md: 16px;
	--lg: 24px;
	--xl: 32px;
	--xxl: 40px;
	--f-md: var(--md);
	--f-lg: var(--lg);
	--f-xl: var(--xl);
	--ff-heading: 'cardoregular';
	--r-xs: var(--xs);
/* Colors */
	--color-white: #FFFFFF;
	--color-off-white: #ebebeb;
	--color-primary: #000000;
	--color-secondry: #999999;
	--color-tertiary: #333333;
/* BG */
	--color-bg-primary: #BE9E53;
	--color-bg-secondry: #0066ff;
	--color-bg-thrtiary: #339093;
/* Margin */
	--m-sm: var(--sm);
	--m-md: var(--md);
	--m-lg: var(--lg);
/* Padding */
	--p-md: var(--md);
	--p-lg: var(--lg);
	--p-xl: var(--xl);
/* Box shadow */
	--box-md: 0px 0px 5px 5px rgba(0,0,0,0.15);
}

@font-face {
	font-family: 'cardoregular';
 src: url('/inc/fonts/cardo-regular-webfont.woff2') format('woff2'), url('/inc/fonts/cardo-regular-webfont.woff') format('woff');
' font-weight: normal;
}
html, body {
 line-height:1.5;
 color: var(color-primary);
 background-color: var(--color-tertiary);
 font-family: "Source Sans Pro", sans-serif;
 line-height: 1.65em;
 background-image: url("/img/BG.jpg");
}
.wow {
 visibility: visible !important;
}
._secondry {
 color: var(--color-secondry);
}
img {
 width:100%;
 height: auto;
}
h1, h2, h3, h6 {
 font-family: var(--ff-heading);
 margin: 0 0 var(--m-lg) 0;
 font-size: var(--f-xl);
 color: var(--color-white);
}
h1 {
 color: var(--color-white);
}
h1 span {
 display: block;
}
h2, h3, h6{
 font-size: var(--f-lg);
}
p {
 font-size: var(--f-md);
 margin: 0 0 var(--m-md) 0;
 color: var(--color-white);
}
a {
 transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 color: var(--color-bg-primary);
 text-decoration: none;
}
a:hover {
 border-bottom-color: transparent;
}
/* Buttons */
button {
 cursor: pointer;
}
button, .button {
 font-family: var(--ff-heading);
 border: none;
 display: inline-block;
 font-size: var(--f-md);
 background: var(--color-bg-primary);
 color: var(--color-primary);
 padding: var(--p-md);
 border-radius: var(--r-xs);
 font-size: var(--f-md);
 font-weight: bold;
 text-align: center;
 min-width: calc(var(--md) * 10);
}
._buttonlink {
 background: transparent;
 color: var(--color-bg-primary);
 padding: var(--p-sm);
 border-radius: none;
 min-width: auto;
}
/* Navigation */
#header.alt {
 -moz-animation: none;
 -webkit-animation: none;
 -ms-animation: none;
 animation: none;
 background: none;
 color: rgba(255, 255, 255, 0.75);
 position: absolute;
 z-index: 1000;
}
#navButton {
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-transition: -moz-transform 0.5s ease;
 -webkit-transition: -webkit-transform 0.5s ease;
 -ms-transition: -ms-transform 0.5s ease;
 transition: transform 0.5s ease;
 display: block;
 height: 44px;
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 900;
}
#header nav {
 height: inherit;
 line-height: inherit;
 position: absolute;
 right: var(--md);
 top: var(--md);
 vertical-align: middle;
}
nav > ul > li i.fa-shopping-cart {
 font-size:24px;
}
.fa[data-count] {
 position: relative;
}
.fa[data-count]:after{
 position: absolute;
 right: -25px;
 top: -.75em;
 content: attr(data-count);
 padding: 5px 10px;
 border-radius: 50%;
 color: white;
 background: var(--color-bg-primary);
 text-align: center;
 font-family: "Source Sans Pro", sans-serif;
 font-size: var(--md);
 font-weight: normal;
}
nav > ul > li > {
 white-space: nowrap;
}
nav > ul > li > a {
 font-size: var(--md);
 font-weight: normal;
}
nav > ul > li > a:hover {
 text-decoration: underline;
}
nav > ul > li i.fa-shopping-cart {
 font-size:24px;
}
/* Banner */
#banner {
 padding-left: var(--p-xl);
 padding-right: var(--p-xl);
 padding-bottom: var(--p-xl);
 background-repeat: no-repeat;
 text-align: center;
}
#banner img.logo {
 width: 180px;
 padding-top: var(--xl);
}
._home-page #banner {
padding:0;
}
._home-page #banner h1 {
display:block!important;
}
._home-page #banner .logo {
display:none!important;
}
._home-page #banner h1 span {
 display: block;
 font-size: var(--md);
 margin-top: var(--sm);
 margin-bottom: var(--md);
}
/* ._content-page._about_us #banner, ._content-page._about_us ._mid-content, ._home-page ._home-mid-content {
 height: 100vh;
 background-image: url("/img/rumbaclaat-about-mobile.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 display: flex;
 flex-direction: row;
 align-items: flex-end;
 justify-content: center;
 position: relative;
 z-index: 10;
}
._content-page._about_us ._mid-content {
 background-image: url("/img/rumbaclaat-about--mid-mobile.jpg");
 z-index: 20;
}
*/
._home-page ._home-mid-content:after {
 content: '';
 position: absolute;
 background-image: url("/img/rumbacallt-white-logo.png");
 width:100%;
 height: 300px;
 bottom: -300px;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 300px;
}
._home-mid-content h3 {
 background: rgba(255,255,255,0.7);
 display: block;
 position: relative;
 top: -200px;
 margin-bottom: -40px;
 box-shadow: 0 2px 0 0 #e5e5e5;
 padding: calc(var(--md));
 -webkit-box-shadow: var(--box-md);
 -moz-box-shadow: var(--box-md);
 box-shadow: var(--box-md);
 z-index:100;
 text-align: center;
 border-radius: var(--sm);
}
._home-mid-content h3 span {
 font-size: var(--xxl);
 display: block;
}
._content-page._about_us #banner h1 {
 color: var(--color-white);
 line-height: 2;
}
._content-page h2 {
 margin: var(--md);
 margin-left:0;
 color: var(--color-off-white);
}
/* ._home-page #banner p {
 text-align: right;
}
*/
/* Box */
.box, ._box-margin {
 border-radius: var(--xs);
 margin: var(--md);
 padding: var(--md);
 margin-bottom: var(--xxl);
}
._box-margin {
 padding-top:0;
 padding-bottom: 0;
 margin-bottom: 0;
}
.row .box {
 padding:0;
}
.box h3 {
 margin-top: -100px;
 position: relative;
}
/* ._home-page .box.content{
 background: var(--color-off-white);
 position: relative;
 top: -120px;
 margin-bottom: -40px;
 box-shadow: 0 2px 0 0 #e5e5e5;
 padding-top: calc(var(--md) *3);
 padding-bottom: calc(var(--md) *3);
 -webkit-box-shadow: var(--box-md);
 -moz-box-shadow: var(--box-md);
 box-shadow: var(--box-md);
 z-index:100;
}
*/
._home-page .box.content h2, ._home-page .box.content p, ._order-comp h2, ._order-comp p {
 color: var(--color-white);
}
header.major {
 padding-top: calc(var(--xl)*5);
;
 padding-bottom: calc(var(--xl)*5);
;
}
#main .container-fluid:nth-child(4) {
 display: none;
}
.image, .category{
 background: var(--color-white);
 border: 0;
 display: inline-block;
 position: relative;
 padding: var(--lg);
 padding-bottom: calc(var(--md) *7);
 border-radius: var(--xs);
 -webkit-box-shadow: var(--box-md);
 -moz-box-shadow: var(--box-md);
 box-shadow: var(--box-md);
}
.image img {
 width: 100%;
}
._content_image {
 width:100%;
 text-align: center;
}
.box.special a{
 position: relative;
 z-index: 100;
 -webkit-box-shadow: var(--box-md);
 -moz-box-shadow: var(--box-md);
 box-shadow: var(--box-md);
}
section#cta{
 margin: var(--md);
 background: none;
 color: var(--color-tertiary);
 margin-bottom: calc(var(--xxl) *2);
}
section#cta h6, section#cta p {
 color: var(--color-white);
}
section#cta input[type=email] {
 width:100%;
}
._page-content {
 position: relative;
 padding: var(--xl);
/* margin-top: calc(var(--xxl) *1.5);
*/
 margin-bottom: calc(var(--xxl) *1.5);
}
._page-content p {
 color: var(--color-off-white);
}
/* Shop */
.box.features .features-row section {
 border: 0;
 float: none;
 width: 100%;
}
.box.features .features-row .image.fit {
 display: block;
 width: 100%;
 margin-bottom: var(--xxl) 
}
._shop .box h3 {
 margin-top: 0;
 position: relative;
 color: var(--color-white);
}
._shop .box h3 span {
 display: block;
 margin-top: var(--lg);
}
._shop p {
 color: var(--color-white);
}
._shop .image {
 padding: var(--md);
}
.color-row {
 display: flex;
}
.color-row ul {
 display: flex;
}
.colors, .colors li, .color-row select{
 flex-grow: 1;
 flex-basis: 0;
 margin-bottom: var(--md);
}
.colors ul{
display:flex;
 margin:0;
 padding: 0;
 height: 100%;
 flex-flow: row wrap;
 justify-content: flex-start;
}
.colors li{
 display:flex;
 flex: 0 1 20%;
}
.colors label{
 margin:0;
 width:100%;
}
.swatch{
 font-family: var(--ff-heading);
 border: none;
 display: inline-block;
 font-size: var(--f-md);
 color: var(--color-primary);
 padding: var(--p-md);
 border-radius: var(--r-xs);
 font-size: var(--f-md);
 font-weight: bold;
 text-align: center;
 height:100%;
 width:100%;
}
.colors label{
cursor: pointer;
}
.colors input{
display:none;
}
.colors input[type="radio"], .swatch{
 position: relative;
}
.colors input[type="radio"]:checked + .swatch:after{
 content:'';
 position: absolute;
 width:100%;
 height: 3px;
 background: var(--color-bg-primary);
 left: 0;
 bottom: -10px;
}
.googlemaps {
 margin: var(--lg);
}
/* Footer */
#footer {
 margin: var(--md);
 padding: var(--xxl) var(--md);
 border-top: solid 1px var(--color-secondry);
}
#footer ul {
 margin-bottom: var(--md);
 text-align: center;
}
#footer p {
 color: var(--color-secondry);
 text-align: center;
 font-size: calc(var(--lg) /2);
}
#footer a {
 color: var(--color-secondry);
 font-size: calc(var(--lg) /2);
}
#footer .copyright li {
 display: inline-block;
 list-style: none;
 padding-right: var(--md);
 padding-left: var(--md);
}
#footer .logo {
 max-width: 200px;
}
.drinkaware {
 max-width: 100px;
}
.social img {
 width: var(--xl);
 height: var(--xl);
}
/* Age verification */
#ageVerification {
 display: none!important;
}
#ageVerification.modal {
 display: none;
 position: fixed;
 z-index: 100000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgba(0,0,0,0.8);
}
#ageVerification .modal-content {
 border-radius: var(--r-xs);
 padding: var(--p-lg);
 background-color: var(--color-off-white);
 margin: 15% auto;
 width: 80%;
 text-align: center;
}
#ageVerification .modal-content p {
 margin: 0 0 var(--m-lg) 0;
}
/* Forms */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="email"], select, textarea {
 font-size: var(--md);
 height: calc(var(--md) *3);
 margin-bottom:0;
 -moz-appearance: none;
 -webkit-appearance: none;
 -ms-appearance: none;
 appearance: none;
 background-color: var(--color-white);
 border-radius: var(--xs);
 padding: var(--sm);
 text-decoration: none;
 min-height: 55px;
 border: none;
 min-height: 55px;
 border: none;
min-height: 55px;
 border:none;
 font-family: "Source Sans Pro", sans-serif;
}
._contact-form input[type="text"], ._contact-form input[type="number"], ._contact-form input[type="email"], ._contact-form input[type="password"], ._contact-form input[type="email"], ._contact-form select, ._contact-form textarea {
 width:100%;
}
textarea {
 height: 200px;
}
input[type="checkbox"] + label, input[type="radio"] + label {
 text-decoration: none;
 color: var(--color-white);
 cursor: pointer;
 display: inline-block;
 font-size: 1em;
 font-weight: 300;
 padding-left: 2.55em;
 padding-right: 0.75em;
 position: relative;
}
table {
 color: var(--color-white) 
}
table th {
 color: var(--color-off-white);
 padding: var(--sm);
 text-align: left;
}
table thead {
 border-bottom: solid 2px #e5e5e5;
}
table tbody tr {
 border: solid 1px var(--color-tertiary);
 border-left: 0;
 border-right: 0;
}
.basket button {
 min-width: auto;
}
button.apply {
 padding: var(--md));
}
table td {
 padding: var(--sm);
 padding-left:0;
 padding-right:0;
}
table tbody tr:nth-child(2n + 1) {
 background-color: rgba(255,255,255,0.30);
}
div#buttons {
 margin-top: var(--md);
 flex-direction: row;
 align-items: center;
}
#msg {
 background: var(--color-bg-thrtiary);
}
.checkout {
 margin: var(--sm);
}
.checkout table {
 width:100%;
}
table.basket img {
 display: none;
}
div#buttons {
 flex-direction: row;
 justify-content: center;
 align-items: center;
}
/* Overrides */
#banner h2, #banner p {
 background: none!important 
}
@media (min-width:801px) {
 ._home-page ._home-mid-content {
	 background-image: url("/img/young-t-and-bugsy-desktop.jpg");
	 z-index: 20;
}
/* ._content-page._about_us #banner {
	 background-image: url("/img/rumbaclaat-about-desktop.jpg");
}
 */
 ._content-page._about_us ._mid-content{
	 background-image: url("/img/rumbaclaat-about--mid-desktop.jpg");
}
 table td {
	 padding-left:var(--sm);
	 padding-right:var(--sm);
}
 table.basket img {
	 display: block;
}
}


.video-wrapper {
position: relative;
 padding-bottom: 56.25%;
/* 16:9 */
 padding-top: 25px;
}
.video-wrapper iframe {
	position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}
video#mobilevideo,
video#tabletvideo,
video#dektopvideo {

		position: relative;

	 right: 0;
	 bottom: 0;
	 min-width: 100%;
	 
	 height: auto;
	 z-index: -100;
	 background-size: cover;
	 z-index: 1;
	 display:block!important 
}
video#dektopvideo,
video#tabletvideo{
	display: none!important 
}
@media (min-width:768px) {
	video#mobilevideo,
	video#dektopvideo {
		display: none!important 
	}
	video#tablet{
		display: block!important 
	}
}

@media (min-width:992px) {
	video#mobilevideo,
	video#tabletvideo {
		display: none!important 
	}
	video#dektopvideo {
		display: block!important;
		    left: -195px;
			min-width: 125%;
	}
}

@media (min-width:1200px) {
	video#mobilevideo,
	video#tabletvideo {
		display: none!important 
	}
	video#dektopvideo {
		display: block!important;
		    left: 0;
			min-width: 100%;
	}
}