/* Authenia */
@font-face {
  font-family: 'Authenia';
  font-style: normal;
  font-weight: 400;
  src: url('/extras/font/Authenia.otf') format('opentype'); /* IE9 Compat Modes */
}


#adminPanel,
.productList {
	font-size:16px;
}

.introText {
  margin-bottom: calc(10px + 15 * (100vw - 480px)/ 1320);
  font-size: clamp(1.5rem, 1.216rem + 0.71vw, 1.75rem);
  font-weight:400;
  text-transform:uppercase;

}

.bgPage {
	background-repeat: no-repeat;
	background-size:contain;
	background-image: none !important;
}



/**** home aus map ****/

.intro .title {
 font-size:40px;
 max-width:320px;
 margin-bottom:40px;
 line-height:1
}
.page-template-about .intro .content,
.page-template-about .intro .title {
 max-width:960px
}

@media screen and (min-width:480px) {
 .intro .title {
  font-size:calc(40px + 50 * (100vw - 480px)/ 1320)
 }
 .intro .title {
  max-width:calc(320px + 580 * (100vw - 480px)/ 1320)
 }
}

@media screen and (min-width:1800px) {
 .intro .title {
  font-size:90px
 }
 .intro .title {
  max-width:900px
 }
} 

.page-template-about .intro .content,
.page-template-about .intro .title {
 max-width:960px
}

.foodService__intro p:first-child {
  margin-bottom: calc(10px + 15 * (100vw - 480px)/ 1320);
  font-size: calc(15px + 4 * (100vw - 480px)/ 1320);
  font-weight:600;
}

@media (min-width: 1921px) {
	.foodService__intro p:not(first-child) {font-size:25px}
}	
@media (min-width: 481px) and (max-width:1920px) {
	.foodService__intro p:not(first-child) {font-size: calc(16px + 6 * ((100vw - 480px)/ 1440));}
}
@media (max-width: 480px) {
	.foodService__intro p:not(first-child) {font-size:16px}
}

.foodService__intro p:not(first-child) {
  margin-bottom: calc(10px + 15 * (100vw - 480px)/ 1320);
  
}
.foodService__intro {
  max-width:calc(320px + 370 * (100vw - 480px)/ 1320);
  margin:auto;
  text-align:center;
  font-weight:400;
 }

@media screen and (min-width:480px) {
 .foodService__intro {
  margin-top:calc(60px + 40 * (100vw - 480px)/ 1320)
 }
 .foodService__intro {
  margin-bottom:calc(60px + 40 * (100vw - 480px)/ 1320)
 }
}

@media (min-width:1401px) {
 .foodService__intro {
  max-width:880px
 }

} 



 
/**********************************************/

.marker__trigger svg > * {
  stroke: #fff;
}


:target::before {
  content: "";
  display: block;
  height: 100px; /* fixed header height*/
  margin: -100px 0 0; /* negative fixed header height */
}

/* layout */

.boxlayout {
	display:grid;
	justify-items:center;
}

@media (min-width:901px){
	.boxlayout-2 {grid-template-columns:repeat(2, 1fr);}
	.boxlayout-3 {grid-template-columns:repeat(3, 1fr);}
	.boxlayout-4 {grid-template-columns:repeat(4, 1fr);}
	.boxlayout-5 {grid-template-columns:repeat(5, 1fr);}
}
@media (max-width:900px){
	.boxlayout-2 {grid-template-columns:(1fr);}
	.boxlayout-3 {grid-template-columns:repeat(2, 1fr);}
	.boxlayout-4 {grid-template-columns:repeat(3, 1fr);}
	.boxlayout-5 {grid-template-columns:repeat(4, 1fr);}
}

/* wide is for wobjects that have a description. like search and photo gallery (see livos) */

@media (min-width:1280px){
	.boxlayout-2-wide {grid-template-columns:repeat(2, 1fr);}
	.boxlayout-3-wide {grid-template-columns:repeat(3, 1fr);}
	.boxlayout-4-wide {grid-template-columns:repeat(4, 1fr);}
	.boxlayout-5-wide {grid-template-columns:repeat(5, 1fr);}
}
@media (max-width:900px){
	.boxlayout-3-wide {grid-template-columns:repeat(2, 1fr);}
	.boxlayout-4-wide {grid-template-columns:repeat(3, 1fr);}
	.boxlayout-5-wide {grid-template-columns:repeat(4, 1fr);}
}


/* boxlayout needs normal and wide like the photo gallery styles - then we need breakpoints for all of the above */

.flexBoxLayout3 {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.flexBoxLayout3 > div {flex-basis:30%}

@media (min-width:451px) and (max-width:830px){
	.flexBoxLayout3 > div {flex-basis:45%}
}
@media (max-width:450px){
	.flexBoxLayout3 > div {flex-basis:100%}
}


h2 a,
h3 a {
	font-size:1em;
	text-decoration:none;
	color:inherit;
}
h2 a:hover,
h3 a:hover {color:inherit;} 
strong {font-weight:700;}


.articleImageRight {margin-left:140px;}

.middleHome .imageFolderCarouselArrows {margin-bottom:50px;}


/** article templates using flex **/

/* NOTE - QUESTION: page layouts using floats are to replaced with either flex or grid - I'm thinking flex as it's easier to create new layouts */ 



.columns50-50 {
	display:flex;
	width:100%;
}

@media (min-width:900px) {
	.columns50-50 {
		column-gap:5%;
		margin-bottom:60px;
	}
	.columns50-50 > div {
		flex-basis:50%;
	}
}

@media (max-width:899px) {
	.columns50-50 {
		margin-bottom:40px;
	}	
	.columns50-50.imageLeft {
		flex-direction:column;
	}
	.columns50-50.imageRight {
		flex-direction:column-reverse;
	}

}



/** search **/







/* did you know on home page and our products */

.didYouKnow {
	max-width:1100px;
	margin:40px auto;
	background-image: url(watermark-crayfish@3x-20.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain; 
	border:1px solid #ccc;
	padding:40px 10%;
	text-align:center;
}
.didYouKnow h2 {font-family:'Authenia', cursive;color:#22bacc;}
.didYouKnow h3 {font-size:1.750rem;line-height:120%;color:#1a2a56;font-family: 'Open Sans', sans-serif;}


/* brands */

.slick-track {width:100%;} /* trying to fix - didn't work */







/* our products */

.wobjectCatalogue .slick-slider {margin-bottom:70px;}

.catalogueHome h1 {text-align:center}

.categories {
	max-width:1100px;
	margin:auto;
	justify-items:center;
	row-gap:50px;
	column-gap: 40px;
	margin-bottom:30px;
	}
@media (max-width:840px) {
	.categories {row-gap:30px;}
}	
.categories > div {text-align:center;max-width:400px;}
.categories h2 {font-weight:700;font-size:1.500rem;font-family: 'Open Sans', sans-serif;margin-bottom:16px;}
.categories h2 a {text-decoration:none;font-size: 1.500rem;text-transform: none;font-weight: 700;}
.categories p {font-size:1rem;font-weight:500;}




/* browse */

/* filter */

.filterHeader {
	text-align:center;
	font-weight:700;
	color:#1a2a56;
}
.filterContainer {display:flex;margin-bottom:50px;}
.filterContainer	ul{list-style: none;padding: 0px;min-width:10em}

#filterMenu {
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
	box-shadow: 0 2px 15px rgba(0,0,0,.15);
	border-radius: 50px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #fff;
	margin: 0 auto;
	}
li.parent {
	font-size:18px;
	cursor:pointer;
	padding:10px;
}
li.parent:not(:last-child) {
	border-right:#CCC 1px solid;
}
li.parent span {font-weight:700;padding:0 10px 0 16px;color:#1a2a56}
li.parent:hover > .child {display:block;position:absolute;}
	
.child {
	display: none;
	margin-top: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,.15);
	background-color: #fff;
	z-index: 1;
	border-radius: 8px;
	border: 1px solid #eaf2f6;
	background-color: #fff;
}
.child::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 10px;
	height: 10px;
	-webkit-transform: translate(-5px,-5px) rotate(45deg);
	-ms-transform: translate(-5px,-5px) rotate(45deg);
	transform: translate(-5px,-5px) rotate(45deg);
	background-color: #fff;
	-webkit-box-shadow:0 2px 5px rgba(0,0,0,.15);
	box-shadow:0 2px 5px rgba(0,0,0,.15);
	border:1px solid #eaf2f6
}
.child li a {	
	color: #1a2a56;
	text-decoration:none;
	font-size:0.875rem;
	font-weight:500;
	margin:0 20px;
	padding:8px 0 8px 2px;
	position:relative;		
	display:block;
	background-color: #fff;
}
.child li:not(:last-child) a:after {
	content: "";
	background: #eaf2f6;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
}	
.child li a:hover {
	text-decoration: underline;
}	
/***************************************/

/* category menu */

.allSubCatList {
	background:#eaf2f6;
}
.allSubCatList ul {
	padding:0;
	list-style: none;
	display:flex;
}
.allSubCatList li {
	width:25%;
	text-align:center;
	padding:20px;
}
.allSubCatList li.selectedItem {
	background:#fff;
}
.allSubCatList a {
	text-decoration:none;
	font-size:0.938rem;
	font-weight:600;
	color:#1a2a56;
}
.allSubCatList a:hover {color:#1a2a56;}
.allSubCatList li div {height:90px;}
.allSubCatList li:hover img {width:105px;}
.allSubCatList img {
  mix-blend-mode: multiply;
  width:100px;
  margin:auto;
}
/***************************************/

.browseCategory h1 {text-align:center;}

.products {
	row-gap:60px;
	column-gap: 10px;
}
.products > div {text-align:left;border-radius:15px;padding:20px 20px 0;}
.products > div:hover {box-shadow: 0 0 40px rgba(26,42,86,.1);}

.products h2 {font-size:1.250rem;font-family: 'Open Sans', sans-serif;font-weight:700;color:var(--dark-blue);text-transform:none;}
.products p {font-size:0.875rem;color:#1a2a56;font-weight:500;}
.products a {text-decoration: none;}

/* product page */

.productPageV2 {padding-top:30px;}


.ausHlthy {display:flex;justify-content:center;margin-top:20px;}
.ausHlthy div {font-size:1rem;font-weight:600;}
.ausHlthy div:nth-of-type(2) {padding-left:30px;} 
.ausHlthy svg {margin-right:4px;vertical-align:middle}
.aus circle {fill:#fbb92c;}
.hlthy circle {fill:#fa851e;}

.cook {
	color:#1a2a56;
	font-size:0.983rem;
	font-weight:500;
	display:flex;
	}
.cook img {margin-right:30px;vertical-align:middle}

.detailsLoop {
	display:flex;
	color:#1a2a56;
	font-size:0.875rem;
	max-width:400px;
	gap:20px;
	flex-wrap:wrap;
	margin-top:30px;
}
.detailsLoop div {flex-basis:calc(50% - 10px);}
.detailsLoop p:first-child {font-weight:600}

.enqButton {margin-top:40px;}

/*
.enqButton a {
	display:inline-block;
	padding:10px 58px;
	line-height:30px;
	background-color:#1a2a56;
	color:#fff;
	font-size:1rem;
	font-weight:600;
	text-decoration: none;
	text-align:center;
	-webkit-appearance:none;
	margin-bottom:16px;
}
.enqButton a:hover {background-color:#22bacc;}

/* tabs */

#tabs ul {width:100%;display:flex;}
#tabs > ul li {
	text-align:center;
	flex-grow:1;
	padding:20px 12px;
	line-height:100%;
	}
.tabInstructions {padding-top:10px;}

#tabs svg {width:48px;fill:#8c96ae;}
#tabs .ui-state-active svg {fill:#22bacc;}

#tabs svg {width:48px;fill:#8c96ae;}
#tabs .ui-state-active svg {fill:#22bacc;}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: none;
    padding:0;
}
.ui-tabs-nav span {
	display:block;
	padding-top:6px;
	color:#1a2a56;
	font-weight:600;
	font-size:0.873rem;
	}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
    background: #eaf2f6;
    font-weight: 500;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: none;
    background: #fff;
    color: #212121;
}
.ui-tabs-panel {font-size:0.875rem;padding-top:30px !important;font-weight:500;}
.ui-tabs-panel strong {color:#1a2a56;font-weight:600;}

.ui-tabs-panel table {width:100%;border-collapse:collapse;}
.ui-tabs-panel tr:nth-child(even){background-color:#eaf2f6;}

.ui-tabs-panel td {
	padding:6px;
	font-weight:500;
	vertical-align:top;
}
.ui-tabs-panel h3 {font-size:1.125rem}

#tabs .ui-tabs-nav li {
	white-space:normal;
}




/* mobile version of tabs */

 
.mobileTabs {font-size:0.875rem;padding-top:30px !important;font-weight:500;}
.mobileTabs strong {color:#1a2a56;font-weight:600;}

.mobileTabs table {width:100%;border-collapse:collapse;}
.mobileTabs tr:nth-child(even){background-color:#eaf2f6;}

.mobileTabs td {
	padding:6px;
	font-weight:500;
	vertical-align:top;
}
.mobileTabs h3 {font-size:1.125rem}





/* related and featured recipes */

.relatedHeading {
	font-family: 'Open Sans', sans-serif;
	color:#1a2a56;
	font-size:3.313rem;
	font-weight:500;
	margin-bottom:30px;
}

@media (min-width:900px){
	.related,
	.homeFeatured {
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:30px;
	}
}
@media (max-width:899px){
	.relatedRecipe {margin-bottom:30px;}
}

.related {
	row-gap:50px;	
}
.homeFeatured {
	row-gap:30px;	
}

.relatedRecipe {
	display:grid;
	grid-template-columns:0.8fr 2.2fr;
	column-gap:30px;
}
.relatedRecipe > div img {display:block;}
.relatedRecipe > div:first-child:hover {padding:6px;}

.recipeTitle a {
	font-family: 'Open Sans', sans-serif;
	color:#1a2a56;
	text-decoration:none;
	font-size:1.5rem;
	font-weight:500;
	}
	
.recipeIcons {
	font-weight:500;
	color:#5a6989;
	padding-top:20px;
	display:flex;
	flex-wrap:wrap;
}
.recipeIcons svg {vertical-align:middle;margin-right:10px;}
.recipeIcons div:first-child {padding-right:20px;}
.recipeIcons div {padding-bottom:10px;}

.relatedRecipe .recipeIcons {font-size:0.750em;}
.recipes a .recipeIcons {font-size:0.750rem;}

.homeFeatured {margin:60px 0;}

/* pdf links */

.fileInfo {
	margin-top:20px;
	padding:20px 0;
	border-top:1px solid #f0f0f0;
	border-bottom:1px solid #f0f0f0;	
}
.fileInfo img,
.fileInfo a,
.fileInfo span {display:inline-block}

.fileInfo a {
	text-decoration:none;
	color:#1a2a56;
	font-weight:600;
	}

.fileInfo span {margin-left:6px;width:20px;font-weight:400;}
.fileInfo:hover span {
	margin-left:6px;
	text-align:right;
	}

.fileInfo:hover  {
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}





/*** Food Services ****/

.fsCategories {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	
}










/*** Recipes ***/


.recipes {
	justify-items:center;
	row-gap:60px;
	column-gap: 40px;
	}
.recipes > div {max-width:400px;}
.recipes h2 {
	font-weight: 700;
	font-size: 1.250rem;
	font-family: 'Open Sans', sans-serif;
	margin-top: 0;
	line-height: 120%;
	text-transform: none;
	margin-bottom: 0;
	}

.recipes a {text-decoration:none;color:#1a2a56;}	
.recipes a:hover {color:#1a2a56;}	
.typeName {
	background-color: var(--dark-blue);
	color: #fff;
	display: inline-block;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 1.188rem;
	font-weight: 400;
	position: relative;
	top: -28px;
	left: 16px;
	min-width: 158px;
	text-align: center;
}

.difficulty {
	display:flex;
	gap:20px;
	font-size:0.750rem;
	font-weight:500;
	margin-top: 8px;
}
.difficulty img {max-width:60px;}



/* hacking **/

/* recipe browse */

.recipeProductPage h1 {line-height:120%;font-size:2.75rem;}

.recipeDetailsLoopContainer {
	border-bottom:2px solid #eaf2f6;
	margin-top:40px;
}

.recipeDetailsLoop {
	display:flex;
	color:#1a2a56;
	font-size:0.875rem;
	gap:20px;
	flex-wrap:wrap;
}
.recipeDetailsLoop div {flex-basis:calc(30% - 10px);}
.recipeDetailsLoop p:first-child {font-weight:600}

.recipesDesc {text-align:center;margin:auto;margin-bottom:60px;font-weight:500;}

@ media (min-width:768px){
	.recipesDesc {width:60%;}

}


.recipeFilters {
	margin-bottom:40px;
	text-align:center;
}
.recipeFilters > div, 
.recipeFilters span {
	display:inline-block;
	padding-bottom:16px;
}
.recipeFilters span:first-of-type {
	font-weight:700;
	padding-right:40px;
	color:#1a2a56;
	font-size:1.500rem;
}
.recipeFilters span:nth-of-type(2) {margin-right:20px;}

.recipeFilters ul {list-style:none;padding:0;margin:0;display:inline}
.recipeFilters li {
	display:inline-block;
	
}
.recipeFilters li:not(last-child) {
	margin-right:20px;
}

.recipeFilters a {
	text-decoration:none;
	color:#1a2a56;
	font-size:1.250rem;
	font-weight:600;
	padding:7px 20px;
	min-width: 142px;
	display: inline-block;
}






.recipeFilters .selectedItem a, .recipeFilters a:hover {
	background-color: var(--bright-blue);
	color:#fff;

	border-radius:20px;

}
.recipeFilters .selectedItem a,
.recipeFilters .selectedItem a:hover {color:#fff}
.recipeFilters ul li ul {display:none;}







/* recipe page */

.recipeCooking {margin-top:60px;}
.rhead {font-weight:700;margin-bottom:30px;}
.recipeIngredients {
	background-color: #eaf2f6;
	padding: 50px;
	font-weight:500;
}
.cookingMethod {font-weight:500}
.cookingMethod strong {color:#1a2a56;font-weight:700;}

.recipeInfo,
.recipeCooking {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;

}

.recipeImage {margin: auto;}
@media (min-width:768px){
	.recipeCooking > div {
		width:46%;
	}
}
@media (max-width:767px){
	.recipeInfo > div,
	.recipeCooking > div {
		width:100%;
	}
	.recipeInfo {flex-direction:column-reverse}
	.recipeInfo > div:first-child {margin-top:30px;}
	.recipeCooking {margin-top:30px;}
	.recipeCooking .recipeIngredients {margin-bottom:30px;padding:30px;}
	.recipeCooking .recipeIngredients p:last-child {}
}






/* Guides & Tips */




.guidesHeading {text-align:center;margin-bottom:30px}
.guidesHeading h1 {margin-bottom:10px;}
.guidesHeading .difficulty {justify-content:center;margin-bottom:20px}
.guidesHeading p {font-weight:500;}




/**************** Exports *************************/


.exports .homeFeatured {
	display:grid;
	grid-template-columns:repeat(4, 1fr);


}

.exports .homeFeatured > div {
	row-gap:60px;
	column-gap: 10px;
}
.exports .homeFeatured > div {text-align:center;border-radius:15px;padding:20px 20px 0;}
.exports .homeFeatured > div:hover {box-shadow: 0 0 40px rgba(26,42,86,.1);}

.exports .homeFeatured h2 {font-size:1.063rem;font-family: 'Open Sans', sans-serif;font-weight:600;color:#1a2a56}
.exports .homeFeatured p {font-size:0.875rem;color:#1a2a56;font-weight:500;}

.exHeader {width:60%;margin:auto;font-weight:500;}

/********* Search in header *******************/

html .mlddm ul {margin-top: 39px !important;transition:margin ease 0.5s;}
html .shrink .mlddm ul {margin-top: 8px !important;}
html .mlddm {justify-content:center;}
.mlddm li a, .mlddm li a#buttonnohover {
    padding: 0 15px;
    line-height: auto;
    color: var(--dark-blue);
    font-size: 1.063rem;
}


.header-main__search label {
 display:block;
 position:relative;
 min-width:50px;
 min-height:50px;
 cursor:pointer
}
.header-main__search label svg {
 position:absolute;
 left:20px;
 top:50%;
 width:24px;
 height:24px;
 display:block;
 margin-top:-12px;
 -webkit-transition:-webkit-transform .2s ease-in-out;
 transition:-webkit-transform .2s ease-in-out;
 -o-transition:transform .2s ease-in-out;
 transition:transform .2s ease-in-out;
 transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out
}
.header-main__search svg circle,
.header-main__search svg path {
	stroke:var(--blue-grey);
}

.header-main__search input[type=text] {
 background-color:transparent;
 border:0;
 font-size:1.063rem;
 line-height:1;
 font-weight:400;
 color:var(--blue-grey);
 width:140px;
 padding:15px 20px 15px 60px;
 -webkit-transition:background-color .2s linear,width .2s linear,opacity .2s linear;
 -o-transition:background-color .2s linear,width .2s linear,opacity .2s linear;
 transition:background-color .2s linear,width .2s linear,opacity .2s linear;
 border-radius:5px;
 
 
}
.header-main__search input[type=text]+svg>* {
 -webkit-transition:stroke .2s linear;
 -o-transition:stroke .2s linear;
 transition:stroke .2s linear;
 stroke-width:1.4
}
.header-main__search input[type=text]:focus {
 background-color:#fff;
 outline:0;
 width:200px
}
.header-main__search input[type=text]:focus+svg>* {
 stroke:#22bacc
}
.header-main__search input[type=text]:focus svg path {
 stroke:#22bacc
}
.header-main__search input[type=text]:focus+svg circle {
 stroke:#22bacc
}


.header-main__search input[type=text]::-webkit-input-placeholder {
 color:rgba(255,255,255,.55);
 -webkit-transition:color .2s linear;
 -o-transition:color .2s linear;
 transition:color .2s linear
}
.header-main__search input[type=text]:focus::-webkit-input-placeholder {
 color:#5a6989
}

.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px !important;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}




/*********** search page ******************/

.results img {margin:auto}


/*******************export video *******************/


/**************** data forms *******************/

.wobjectDataForm dt {font-size:16px;}

.wobjectDataForm input[type=text],
.wobjectDataForm select,
.wobjectDataForm textarea,
.wobjectWobjectProxy input[type=text],
.wobjectWobjectProxy select,
.wobjectWobjectProxy textarea {
	padding:4px;
	border:1px solid #ccc;
	font-size:16px;
	font-family: 'Open Sans', sans-serif;
	}

.formSubtext {font-size:0.875rem;}

/************** prawn page tables *****************/

.table-overflow-container {
  max-width: 100%;
  position: relative;
}

.table-overflow-container:before,
.table-overflow-container:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 15px;
  display: block;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: ease-in-out 0.2s opacity;
  -o-transition: ease-in-out 0.2s opacity;
  transition: ease-in-out 0.2s opacity;
}

.table-overflow-container:before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.table-overflow-container:after {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.table-overflow-container[data-overflow="both"]:before,
.table-overflow-container[data-overflow="both"]:after {
  opacity: 1;
}

.table-overflow-container[data-overflow="left"]:before {
  opacity: 1;
}

.table-overflow-container[data-overflow="right"]:after {
  opacity: 1;
}

.table-overflow-container > .table-overflow-container__inner {
  overflow: auto;
  position: relative;
  max-width: 100%;
}

@media (max-width: 480px) {
  .table-overflow-container {
    margin-left: -20px;
    margin-right: -20px;
    max-width: none;
  }




}