s/* RESET */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section { display:block}

/* MAIN ELEMENTS */
html {overflow-x: hidden; position: relative}
body {font-family: 'Work Sans', sans-serif; font-size: 20px; font-weight: 300; color: #444; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); overflow-x: hidden; position: relative}
.inner-section {width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 0}
.outer-section {width: 100%}
.flex-holder { display: flex; align-content: center; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: wrap}
a {text-decoration: none}
/* ANIMATIONS */
.wow {visibility: hidden}
.green-svg-icon {filter: invert(46%) sepia(9%) saturate(4958%) hue-rotate(36deg) brightness(85%) contrast(59%)}
p {line-height: 130%}
p:last-child {margin-block-end: 0}
a[href^="tel"] {color: inherit; text-decoration: none}

/* FONTS */
@font-face {
	font-family: 'Intro Rust G Base 2 Line';
	src: url('fonts/IntroRustG-Base2Line.woff2') format('woff2'),
		url('fonts/IntroRustG-Base2Line.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}



/* TEXT */ 
header .title, h1, h2, h3, h4, h5, h6 {font-family: 'Ubuntu', sans-serif; font-weight: 700; color: #687a34; margin-block-start: 0; margin-block-end: 0; text-wrap: balance;}
header .title {font-size: 100px; text-shadow: #666 1px 1px 1px; color: white; text-align: center; padding: 0 0 10px; width: fit-content; margin: 0 auto; color: white; max-width: 1200px; font-family: 'Intro Rust G Base 2 Line'; font-weight: normal; font-style: normal; line-height: 100%}
header .subtitle {color: white; text-shadow: #666 1px 1px 1px; text-align: center; width: fit-content; margin: 0 auto; margin-top: 20px; font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 60px; text-wrap: balance;}
h1 {font-size: 60px; margin-bottom: 10px}
h2 {font-size: 60px}
h3 {font-size: 36px}
h4 {font-size: 30px}
strong {font-weight: 500}
.line {width: 100%; height: 1px; border-top: 1px solid #e4e4e4; margin: 40px auto 60px}
.details {font-size: 16px}
.italy {width: 80%; max-width: 700px; height: 5px; margin: 10px auto 0; background-image: url(imgs/italy.svg); background-size: cover}
.main-titles-holder {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); min-width: 92%}

/* BARBECUE COLOURS */
/* .barbecues h1, .barbecues h3, .barbecues h2, .barbecues h4, .barbecues .accessory-holder-outer h1, .barbecues header .title, .barbecues header .subtitle {color: #af5304}
.direct-wood-fired-ovens h1, .direct-wood-fired-ovens h3, .direct-wood-fired-ovens h2, .direct-wood-fired-ovens h4, .direct-wood-fired-ovens .accessory-holder-outer h1, .direct-wood-fired-ovens header .title, .direct-wood-fired-ovens header .subtitle {color: #ce2b36}
.heating h1, .heating h2, .heating h4, .heating .accessory-holder-outer h1, .heating header .title, .heating header .subtitle {color: #617781}
.heating h3, .direct-wood-fired-ovens h3 {color: white}
.barbecues header .title, .barbecues header .subtitle, .heating header .title, .heating header .subtitle  {color: white}
.direct-wood-fired-ovens header .title, .direct-wood-fired-ovens header .subtitle, .direct-wood-fired-ovens header .title, .direct-wood-fired-ovens header .subtitle  {color: white}
.barbecues .table-titles, .barbecues .controls__dot:hover, .barbecues .controls__dot:focus, .barbecues .controls__dot-active {background-color: #af5304}
.heating .table-titles, .heating .controls__dot:hover, .heating .controls__dot:focus, .heating .controls__dot-active {background-color: #617781}
.direct-wood-fired-ovens .table-titles, .direct-wood-fired-ovens .controls__dot:hover, .direct-wood-fired-ovens .controls__dot:focus, .direct-wood-fired-ovens .controls__dot-active {background-color: #ce2b36}
.barbecues .product-holder h3 {height: 83px}
.heating .product-holder:hover h3, .heating .product-holder:hover h4, .heating .product-holder:hover .view-more {color: #617781}
.heating .product-holder:hover {border: 1px solid #617781}
.heating .product-holder:hover .arrows {filter: invert(44%) sepia(12%) saturate(668%) hue-rotate(154deg) brightness(98%) contrast(87%)}

.direct-wood-fired-ovens .product-holder:hover h3, .direct-wood-fired-ovens .product-holder:hover h4, .direct-wood-fired-ovens .product-holder:hover .view-more {color: #ce2b36}
.direct-wood-fired-ovens .product-holder:hover {border: 1px solid #ce2b36}
.direct-wood-fired-ovens .product-holder:hover .arrows {filter: invert(31%) sepia(77%) saturate(7435%) hue-rotate(354deg) brightness(96%) contrast(97%);}

.barbecues .product-holder:hover h3, .barbecues .product-holder:hover h4, .barbecues .product-holder:hover .view-more {color: #af5304}
.barbecues .product-holder:hover {border: 1px solid #af5304}
.barbecues .product-holder:hover .arrows {filter: invert(28%) sepia(70%) saturate(2350%) hue-rotate(23deg) brightness(94%) contrast(97%);} */

/* HEADER */
header {width: 100%; padding: 10px 0; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella.jpg); background-size: cover; background-repeat: no-repeat; background-position: center 60%; height:600px; position: relative}
#ovens header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens.jpg)}
#pucinella header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-fish.jpg); background-position: center 60%}
#pucinella-stone header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-stone.jpg); background-position: center 60%}
#contact-us header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-contact.jpg); background-position: center 60%}
#clementino header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-clementino-pizza.jpg); background-position: 100% top}
#family header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-family.jpg); background-position: center top}
#wood-fired-ovens header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-wood-fired-ovens.jpg); background-position: 100% right}
#master header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-master.jpg); background-position: center 60%}
#smart header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-smart.jpg); background-position: center 60%}
#pizza-party header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-pizza-party.jpg); background-position: center top}
#family-stone header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-family-stone.jpg); background-position: center center}
#gas-pizza-ovens header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-gas.jpg); background-position: center center}
#pucinella-gas header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-gas.jpg); background-position: center center}
#family-gas header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-family-gas.jpg); background-position: center center}
#pizza-party-gas header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-pizza-party-gas.jpg); background-position: center bottom}
#clementino-hybrid header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-clementino-hybrid.jpg); background-position: center center}
#smile header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-smile.jpg); background-position: center center}
#smile-built-in header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-smile-built-in.jpg); background-position: center center}
#piccolo-gioiello header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-piccolo-gioiello.jpg); background-position: center center}
#wood-fired-ovens-built-in header, #master-built-in header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-built-in.jpg); background-position: center center}
#smart-built-in header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-pizza-ovens-smart-built-in.jpg); background-position: center center}
#barbecues header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-barbecues.jpg); background-position: 100% bottom}
#gringo header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-barbecues-gringo.jpg); background-position: center bottom}
#colorado header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-barbecues-colorado.jpg); background-position: center center}
#colorado-with-worktop header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-barbecues-colorado-with-worktop.jpg); background-position: center center}
#flipper header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-barbecues-flipper.jpg); background-position: center center}
#california header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-barbecues-california.jpg); background-position: center center}
#ducted-wood-stoves header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/heating/clementi-canada-wood-ducted-stoves-heating.jpg); background-position: center 50%}
#elite-classica header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-heating-elite-classica.jpg); background-position: center center}
#elite-moderna header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-heating-elite-moderna.jpg); background-position: center center}
#elite-hydro header {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url(imgs/backgrounds/clementi-canada-heating-elite-hydro.jpg); background-position: center center}

/* NAV */
.nav-holder-inner {width: 100%; max-width: 1200px; height: auto; margin: 0 auto}
nav li {margin-right: -3px; display: inline; color: white; cursor: pointer; pointer-events: auto; position: relative; z-index: 1}
nav li:last-of-type {margin: 0}
nav a, .sub-menus a, .sub-menus-title, .mobile-menu a {color: white; text-decoration: none; font-family: 'Ubuntu', sans-serif; font-weight: 500; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); padding: 5px 10px; box-sizing: border-box; background-color: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 17px}
:lang(fr) nav a, :lang(fr) .sub-menus a, :lang(fr) .sub-menus-title, :lang(fr) .mobile-menu a {font-size: 18px}
nav a {padding: 20px 10px}
nav a.current, nav a:hover, nav a.sub-current, .mobile-menu a.current {color: #687a34}
nav a.no-sub-btn:hover {padding-bottom: 0; border-bottom: 1; border-radius: 4px; color: #687a34}
.nav-logo, .footer-logo-holder  {background-image: url(imgs/clementi-canada-pizza-ovens.svg); width: 90px; height: 115px; background-size: 100%; background-position: center center; background-repeat: no-repeat; transition: all 0.35s cubic-bezier(0.86, 0, 0.07, 1); border: 1px solid transparent; border-radius: 4px}
.nav-logo:hover {filter: invert(46%) sepia(9%) saturate(4958%) hue-rotate(36deg) brightness(85%) contrast(59%); background-size: 85%; border: 1px solid white}
/* nav a.barbecues-btn.current, .bbq-sub-menu.sub-menus ul li a.current {color: #af5304} */

/* MAIN NAV SUB MENUS */
.pizza-ovens-main-sub-menu, .outdoor-ovens-main-sub-menu, .gas-ovens-main-sub-menu, .hybrid-ovens-main-sub-menu, .built-in-ovens-main-sub-menu, .heating-wood-main-sub-menu, .heating-pellet-main-sub-menu, .heating-hybrid-main-sub-menu   {opacity: 0; margin-left: 10px; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); height: 0; margin-bottom: 0!important; pointer-events: none}
.main-sub-menu-show {opacity: 1; height: 25px; margin-bottom: 10px!important; pointer-events: all}
.current a {color: #687a34}


/* SUB MENUS */
.sub-menus, .mobile-menu {transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); padding: 10px 20px; box-sizing: border-box; background-color: #687a34; background-image: url(imgs/backgrounds/dark_matter.png); position: absolute; color: white; border-radius: 4px; border: 1px solid #e4e4e4; min-width: 270px; z-index: 3} 
.mobile-menu {min-width: 350px}
.oven-sub-menu {margin-left: 352px; opacity: 1; top: 100px}
:lang(fr) .oven-sub-menu {margin-left: 202px}
.stoves-sub-menu {margin-left: 832px; opacity: 1; top: 100px}
:lang(fr) .stoves-sub-menu {margin-left: 772px}
.bbq-sub-menu {margin-left: 720px; opacity: 1; top: 100px}
:lang(fr) .bbq-sub-menu {margin-left: 643px}
.indirect-sub-menu {margin-left: 555px; opacity: 1; top: 100px}
:lang(fr) .indirect-sub-menu {margin-left: 455px;}
.contact-sub-menu {margin-left: 905px; opacity: 1; top: 100px}
:lang(fr) .contact-sub-menu {margin-left: 883px}
.contact-sub-menu .arrow-up {left: 70%}
.sub-menu-hide {opacity: 0; top: 80px; pointer-events: none}
.sub-menus li, .mobile-menu li {list-style-type: none; margin-bottom: 7px}
.sub-menus li:hover, .sub-menus li a:hover, .sub-menus li a.current, .mobile-menu li a.current {color: #687a34}
.sub-menus ul, .mobile-menu ul {padding-inline-start: 0; padding-bottom: 20px; border-bottom: 1px solid #e4e4e4}
.sub-menus ul:last-child, .mobile-menu ul:last-child {padding-bottom: 0; border: 0}
.mobile-menu ul {padding-bottom: 10px}
.sub-menu-main-title {font-family: 'Ubuntu', sans-serif; font-weight: 500; color: #687a34; font-size: 120%; padding-left: 10px}
.sub-menus-title {padding-left: 0; color: #687a34; font-size: 110%; pointer-events: none}
.sub-menus-title:hover, .sub-menus-title a:hover {color: #687a34}
.sub-menus-title:hover, .sub-menus li.sub-menus-title:hover {color: #fff; cursor: default}
.arrow-up { width: 0;  height: 0;  border-left: 10px solid transparent; border-right: 10px solid transparent;  border-bottom: 10px solid #fff; position: absolute; top: -11px; left: 50%; transform: translateX(-50%)}
.dropdown-btn span {background-image: url(imgs/chevron.svg); background-position: center 75%; background-size: contain; background-repeat: no-repeat; display: inline-block; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); padding: 5px 5px 0}
.dropdown-btn:hover span, .dropdown-btn.current span {background-image: url(imgs/chevron-green.svg)}
.mobile-sub-menus {transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); overflow: hidden; padding: 0; margin: 0}
.mobile-menu ul {border-width: 0; padding-bottom: 0}
.mobile-menu ul.solo-link {margin: 5px 0 0; padding-bottom: 7px}
.mobile-menu ul:last-child {margin-top: 10px}
.mobile-menu .line {margin: 10px auto 20px}
.mobile-sub-menus li {margin-left: 25px; margin-bottom: 0; padding-bottom: 0}
.mobile-sub-menus li.sub-menu-main-title {margin-left: 0}
.mobile-sub-menus li.sub-menus-title {padding-bottom: 10px; font-size: 100%; margin-left: 10px}



/* MOBILE NAV */
.mobile-nav-btn {padding: 5px 10px; box-sizing: border-box; background-color: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; pointer-events: auto; background-image: url(imgs/menu-icon.svg); background-size: 60%; width: 40px; height: 40px; border: 1px solid white; background-position: center center; background-repeat: no-repeat; transition: all 0.35s cubic-bezier(0.86, 0, 0.07, 1); display: none}
.mobile-nav-btn:hover {background-color: white; background-image: url(imgs/menu-icon-hover.svg)}
.mobile-menu {top: 0; opacity: 1; right: 0; border-radius: 0 0 0 4px; border-width: 0 0 1px 1px; margin-right: 0; z-index: 2}
.mobile-menu a {pointer-events: auto}
.mobile-menu-hide {opacity: 0; margin-right: -250px; pointer-events: none}
.mobile-menu-hide a {pointer-events: none}
.mobile-menu .arrow-up {left: 90%}
a.close-menu-btn {top: 10px; right: 10px; position: absolute; text-align: center; border: 1px solid #e4e4e4; padding: 5px; width: 40px; height: 40px; border-radius: 4px; line-height: 23px}
a.close-menu-btn:hover {color: #687a34}

.direct-heat-mobile-menu-sub, .direct-gas-mobile-menu-sub, .direct-hybrid-mobile-menu-sub, .indirect-outdoor-mobile-menu-sub, .indirect-built-in-mobile-menu-sub, .bbq-mobile-menu-sub, .wood-stoves-mobile-menu-sub, .air-pellet-mobile-menu-sub, .multi-fuel-mobile-menu-sub {opacity: 0; margin-left: 10px; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); height: 0; margin-bottom: 0!important; pointer-events: none}
.mobile-sub-menu-show-list {opacity: 1; height: 25px; margin-bottom: 10px!important; pointer-events: all}

/* FOOTER */
footer {background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(imgs/backgrounds/clementi-canada-pizza-ovens-footer.jpg); background-size: cover; background-position: center 80%; color: white; padding: 40px 0; text-align: center; width: 100%}
.footer-logo-holder {padding: 0; background-size: 100% auto}
.address-holder {text-align: left}
.address-holder p {margin-bottom: -20px}
.copyright {margin-top: 60px}
.map {background-image: url(imgs/clementi-canada-map.jpg); background-repeat: no-repeat; background-position: center center; width: 480px; height: 270px; border: 10px solid white; border-radius: 4px; background-size: cover; transition: all 0.35s cubic-bezier(0.86, 0, 0.07, 1); cursor: pointer}
.map:hover {border-color: #687a34}
.footer-info-holder {align-items: flex-start}

/* FOOTER-NAV */
.footer-nav-holder {align-items: flex-start; border-bottom: 1px solid #e4e4e4; margin: 0 auto 60px; padding-bottom: 40px; max-width: 1200px}
.footer-nav-holder ul {padding-inline-start: 0}
.footer-nav-holder ul li  {text-align: left; list-style-type: none; margin-bottom: 5px}
.footer-nav-holder ul li a {color: white; 	font-family: 'Ubuntu', sans-serif; font-weight: 500}
.footer-nav-holder ul li.current a, .footer-nav-holder ul li:hover a, .footer-nav-holder ul li a:hover, .footer-nav-holder ul li a.current {color: #687a34}

/* MAIN ICONS */
.main-icon-holder {justify-content: flex-start}
.main-icon {padding: 10px 15px 10px 40px; border: 1px solid white; border-radius: 4px; color: white;  font-family: 'Ubuntu', sans-serif; font-weight: 700; width: fit-content; background-position: center left; background-size: contain; background-repeat: no-repeat; font-size: 16px; margin: 0 5px 5px 0}
.pizza-oven {background-color: red; background-image: url(imgs/icons/multiple-cooking.svg)}
.direct-heat {background-color: #961212; background-image: url(imgs/icons/fire.svg); padding-left: 35px}
.propane {background-color: #006699; background-image: url(imgs/icons/gas.svg); background-size: 30px auto; padding-left: 35px; background-position: 5px center}
.hybrid {background-color: #006699; background-image: url(imgs/icons/heating/wood.svg); background-size: 15% auto; padding-left: 45px; background-position: 5px center}
.stone {background-color: #4c4a48; background-image: url(imgs/icons/stone.svg); padding-left: 45px; background-position: 5px center}
.multi-cooking {background-color: #437F97; background-image: url(imgs/icons/three-levels.svg);  background-size: 30px auto; padding-left: 35px; background-position: 5px center}
.indirect-heat {background-color: #FD151B; background-image: url(imgs/icons/heating/hydrolic-main.svg);  background-size: 25px auto; padding-left: 35px; background-position: 5px center}
.ventilation-main {background-color: #687a34; background-image: url(imgs/icons/heating/ventilation.svg);  background-size: 30px auto; padding-left: 35px; background-position: 5px center}
.multi-cooking-2 {background-color: #437F97; background-image: url(imgs/icons/two-levels.svg);  background-size: 30px auto; padding-left: 35px; background-position: 5px center}
.barbecue {background-color: #af5304; background-image: url(imgs/icons/barbecue.svg);  background-size: 30px auto; padding-left: 40px; background-position: 5px center}
.table {background-color: #4c4a48; background-image: url(imgs/icons/table.svg);  background-size: 30px auto; padding-left: 40px; background-position: 5px center}
.wheel {background-color: #4c4a48; background-image: url(imgs/icons/height.svg);  background-size: 30px auto; padding-left: 40px; background-position: 5px center}
.oven {background-color: #4c4a48; background-image: url(imgs/icons/oven.svg);  background-size: 45px auto; padding-left: 55px; background-position: 5px center}
.heats-home {background-color: #87a3b1; background-image: url(imgs/icons/heating/ventilation.svg);  background-size: 30px auto; padding-left: 35px; background-position: 5px center}
.plate-cooking {background-color: #FD151B; background-image: url(imgs/icons/plate.svg);  background-size: 30px auto; padding-left: 40px; background-position: 5px center}
.grill-cooking {background-color: #961212; background-image: url(imgs/icons/grill.svg);  background-size: 30px auto; padding-left: 40px; background-position: 5px center}

/* PRODUCT SELECTOR */
.pizza-oven-selector {width: 100%; padding-top: 2%; background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(imgs/backgrounds/fire.jpg); background-size: cover; background-position: bottom center}
.pizza-oven-selector h1 {margin: 0 auto; max-width: 1200px; width: 100%; color: white}
.product-holder-outer {max-width: 1200px; padding: 2%; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; margin: 0 auto; transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); align-items: stretch}
.product-holder {width: 340px; height: auto; min-height: 404px; border-radius: 4px; padding: 2%; cursor: pointer; pointer-events: auto; background-image: url(imgs/backgrounds/dark_matter.png); flex-shrink: 0; margin-right: 20px; border: 1px solid #e4e4e4}
.product-holder:hover {border: 1px solid #687a34}
.product-holder:hover h3, .product-holder:hover h4 {color: #687a34}
.product-holder h3, .product-holder h4 {color: white}
.product-holder h4 {margin-top: 20px; font-size: 18px}
.product-holder-img {width: 100%; height: 147px; background-size: cover; border-radius: 4px; border: 1px solid #444; margin-top: 2%; box-sizing: border-box; transition: all 0.35s cubic-bezier(0.86, 0, 0.07, 1); cursor: pointer; background-repeat: no-repeat}
.product-holder:hover .product-holder-img {border: 1px solid white}
.pucinella .product-holder-img {background-image: url(imgs/ovens/pucinella.jpg)}
.pucinella-stone .product-holder-img {background-image: url(imgs/ovens/pucinella-stone.jpg)}
.family-stone .product-holder-img {background-image: url(imgs/ovens/family-stone.jpg)}
.piccolo-gioiello .product-holder-img {background-image: url(imgs/ovens/piccolo-gioiello.jpg)}
.clementino .product-holder-img {background-image: url(imgs/ovens/clementino.jpg); background-position-y: 30%}
.clementino-hybrid .product-holder-img {background-image: url(imgs/ovens/clementino-hybrid.jpg)}
.smile .product-holder-img {background-image: url(imgs/ovens/smile.jpg)}
.smile-built-in .product-holder-img {background-image: url(imgs/ovens/smile-built-in.jpg)}
.pizza-party .product-holder-img {background-image: url(imgs/ovens/pizza-party.jpg)}
.family .product-holder-img {background-image: url(imgs/ovens/family.jpg)}
.master .product-holder-img {background-image: url(imgs/ovens/master.jpg)}
.master-built-in .product-holder-img {background-image: url(imgs/ovens/master-built-in.jpg)}
.smart .product-holder-img {background-image: url(imgs/ovens/smart.jpg)}
.smart-built-in .product-holder-img {background-image: url(imgs/ovens/smart-built-in.jpg)}
.gringo .product-holder-img {background-image: url(imgs/barbecues/gringo.jpg)}
.colorado .product-holder-img {background-image: url(imgs/barbecues/colorado.jpg)}
.flipper .product-holder-img {background-image: url(imgs/barbecues/flipper.jpg)}
.california .product-holder-img {background-image: url(imgs/barbecues/california.jpg)}
.colorado-with-worktop .product-holder-img {background-image: url(imgs/barbecues/colorado-with-worktop-small.jpg)}
.elite-classica .product-holder-img {background-image: url(imgs/heating/elite-classica.jpg)}
.elite-moderna .product-holder-img {background-image: url(imgs/heating/elite-moderna.jpg)}
.elite-hydro .product-holder-img {background-image: url(imgs/heating/elite-hydro.jpg)}
.colour-holder {width: 15px; height: 15px; margin-right: 5px}
.red {background-color: red}
.black {background-color: black}
.stainless {background-color: silver}
.charcoal {background-color: #494c4b}
.copper {background-color: #624023}
.corten {background-color: #af5304}
.sand {background-color: #be9f86}
.grey {background-color: #B7B4B4}
.white {background-color: white; color: #444!important}
.ivory {background-color: rgb(248, 220, 180)}
.bordeaux {background-color: rgb(150, 19, 19)}
.product-holder .flex-holder {justify-content: flex-start; margin-top: 5px; align-content: flex-start}
.product-holder-colour-holder {height: 45px}
.product-holder .details {color: white; margin-right: 10px}
.view-more {padding: 5px 10px; border: 1px solid white; text-align: center; color: white; width: fit-content; border-radius: 4px; font-family: 'Ubuntu', sans-serif; font-weight: 700; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1)}
.product-holder:hover .view-more {background-color: white; color: #687a34}
.view-more.flex-holder {margin-top: 20px}
.colour-outer-holder {display: flex; margin-bottom: 5px}
.plus-sign {color: #687a34; border-radius: 150px; height: 150px; width: 150px; line-height: 150px; text-align: center; margin: 0 auto; background-color: white; font-size: 100px; font-weight: 700; border: 2px solid #687a34; transform: translateY(-40%); top: 50%; position: sticky}

.scroll-control {scroll-snap-type: x mandatory; scroll-padding: 50%}
.product-holder-scroll-control {scroll-snap-align: center}

/* ALL PRODUCTS NO SCROLL */
.main-browser .product-holder-outer {overflow: auto; flex-wrap: wrap; max-width: 1220px; justify-content: space-between}
.main-browser .product-holder  {width: 27.75%; margin-right: 0; margin-bottom: 2.25%; animation-name: fadeInUp}

/* ICONS */
.arrows {width: 20px; height: 20px; background-image: url(imgs/icons/arrows.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; margin-left: 5px; filter: brightness(1000); transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1)}
.product-icon-holder-outer {background-image: url(imgs/backgrounds/dark_matter.png); color: white} 
.product-holder:hover .arrows {filter: none; margin-left: 10px}
.product-icon-holder {justify-content: flex-start; margin: 10px 0 30px; padding: 2%; margin: 0 auto; max-width: 1200px; width: 100%}
.product-holder:last-child {margin-right: 0}
.product-icon-holder h2 {width: 100%; color: white; margin-bottom: 20px}
.product-icon-holder-outer h2 {color: white; margin-bottom: 20px}
.product-icons {width: 150px; height: 150px; background-repeat: no-repeat; background-position: center 5%; border: 1px solid white; border-radius: 4px; background-size: 65%; margin-right: 2%; padding: .5%; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1)}
.product-icons:hover {background-color: #687a34}
.product-icons:last-child {margin-right: 0}
.product-icon-large {width: 50px; height: 50px; border: 1px solid #e4e4e4; background-color: transparent; border-radius: 4px; padding: 10px; background-position: center center; background-size: contain; background-repeat: no-repeat; margin-bottom: 2%}
.air-plus {background-image: url(imgs/icons/air-plus.svg)}
.insulation {background-image: url(imgs/icons/insulation.svg)}
.weather {background-image: url(imgs/icons/weather.svg)}
.fast-heating {background-image: url(imgs/icons/fast-heating.svg)}
.multiple-cooking {background-image: url(imgs/icons/multiple-cooking.svg)}
.fast-cooking {background-image: url(imgs/icons/fast-cooking.svg)}
.stainless-steel {background-image: url(imgs/icons/stainless-steel.svg)}
.three-levels {background-image: url(imgs/icons/three-levels.svg)}
.two-levels {background-image: url(imgs/icons/two-levels.svg)}
.plate {background-image: url(imgs/icons/plate.svg)}
.grill {background-image: url(imgs/icons/grill.svg)}
.corten-steel {background-image: url(imgs/icons/corten-steel.svg)}
.clean {background-image: url(imgs/icons/clean.svg)}
.height {background-image: url(imgs/icons/height.svg)}
.grease {background-image: url(imgs/icons/grease.svg)}
.plus-ventilation {background-image: url(imgs/icons/plus-ventilation.svg)}
.smart-ventilation {background-image: url(imgs/icons/smart-ventilation.svg)}
.fine-finish {background-image: url(imgs/icons/fine-finish.svg)}
.thermal-flywheel {background-image: url(imgs/icons/thermal-flywheel.svg)}
.pressed-fire-grill {background-image: url(imgs/icons/pressed-fire-grill.svg)}
.halogen-lamps {background-image: url(imgs/icons/halogen-lamps.svg)}
.cooking-walls {background-image: url(imgs/icons/cooking-walls.svg)}
.integrated-hood {background-image: url(imgs/icons/integrated-hood.svg)}
.low-consumption {background-image: url(imgs/icons/low-consumption.svg)}
.gas {background-image: url(imgs/icons/gas.svg)}
.product-icons .product-icon-text {text-align: center; color: white; font-family: 'Ubuntu', sans-serif; margin: 0 auto; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1)}
.product-icons:hover .product-icon-text {transform: scale(1.2)}
.product-feature-large-holder {align-content: flex-start; border-bottom: 1px solid #e4e4e4; align-items: flex-start; display: -webkit-box}
.product-feature-large-holder:last-of-type {border: 0}
.product-feature-inside-holder {align-content: flex-start;  width: 60.9%; padding: 4%; box-sizing: content-box}
.right-border {border-right: 1px solid #e4e4e4}
.left-border {border-left: 1px solid #e4e4e4}
.full-width {width: 92%}
.no-padding-left {padding-left: 0}
.no-padding-right {padding-right: 0}
.product-feature-inside-holder-smaller {width: 30%; margin: 0; border-right: 0}
.feature-description {color: white; width: 100%}
.feature-description p {margin-bottom: 0}
.one-third-flex {width: 27%}
.half-flex {width: 43%}

/* HEATING ICONS */
/* .heating .product-icon-holder-outer {background-image: linear-gradient(0deg, rgba(97,119,129,.5) 0%, rgba(97,119,129,.25) 100%), url(imgs/backgrounds/dark_matter.png)}
.barbecues .product-icon-holder-outer {background-image: linear-gradient(0deg, rgba(175,83,4,.15) 0%, rgba(175,83,4,.25) 100%), url(imgs/backgrounds/dark_matter.png)}
.direct-wood-fired-ovens .product-icon-holder-outer {background-image: linear-gradient(0deg, rgba(242,21,21,.45) 0%, rgba(242,21,21,.45) 100%), url(imgs/backgrounds/dark_matter.png)} */
.twin-flame {background-image: url(imgs/icons/heating/twin-flame.svg)}
.multifuel {background-image: url(imgs/icons/heating/multifuel.svg)}
.auto-control {background-image: url(imgs/icons/heating/auto-control.svg)}
.hydrolic {background-image: url(imgs/icons/heating/hydrolic-main.svg)}
.hot-water {background-image: url(imgs/icons/heating/hot-water.svg)}
.spring-filter {background-image: url(imgs/icons/heating/spring-filter.svg)}
.oven {background-image: url(imgs/icons/heating/oven.svg)}
.vented-oven {background-image: url(imgs/icons/heating/vented-oven.svg)}
.ventilation {background-image: url(imgs/icons/heating/ventilation.svg)}
.canalization {background-image: url(imgs/icons/heating/canalization.svg)}
.certified {background-image: url(imgs/icons/heating/certified.svg)}
.economy {background-image: url(imgs/icons/heating/economy.svg)}
.integrated-hydraulic {background-image: url(imgs/icons/heating/integrated-hydraulic.svg)}

/* HEATING PAGE QUALITY FEATURES */
.quality-features-holder {margin-top: 2%}
.quality-features {width: 12%; height: 218px; margin-bottom: 2%; text-align: center; border-radius: 4px; padding: 2%; box-sizing: content-box}
.quality-features.flex-holder {align-content: flex-start}
.quality-features-icon-holder { background-position: center top; background-repeat: no-repeat; background-size: 70%; width: 100%; height: 100px;  margin: 0 auto; padding-bottom: 6%; filter: invert(46%) sepia(3%) saturate(3514%) hue-rotate(154deg) brightness(94%) contrast(71%);}
.quality-features p {font-family: 'Ubuntu', sans-serif; width: 100%; margin-block-start: 0; padding-top: 6%; border-top: 1px solid #e4e4e4; color: #617781}
.silence {background-image: url(imgs/icons/heating/silence.svg)}
.easy-cleaning {background-image: url(imgs/icons/heating/easy-cleaning.svg)}
.gas-boiler-interface {background-image: url(imgs/icons/heating/gas-boiler-interface.svg)}
.remote-control {background-image: url(imgs/icons/heating/remote-control.svg)}
.gsm {background-image: url(imgs/icons/heating/gsm.svg)}
.turbolators {background-image: url(imgs/icons/heating/turbolators.svg)}
.prog-thermostat {background-image: url(imgs/icons/heating/prog-thermostat.svg)}
.single-ignition {background-image: url(imgs/icons/heating/single-ignition.svg)}
.wood {background-image: url(imgs/icons/heating/wood.svg)}
.self-cleaning-glass {background-image: url(imgs/icons/heating/self-cleaning-glass.svg)}
.security {background-image: url(imgs/icons/heating/security.svg)}
.high-performance {background-image: url(imgs/icons/heating/high-performance.svg)}
.remote-thermostat {background-image: url(imgs/icons/heating/remote-thermostat.svg)}
.easy {background-image: url(imgs/icons/heating/easy.svg)}
.condensation {background-image: url(imgs/icons/heating/condensation.svg)}
.maintenance {background-image: url(imgs/icons/heating/maintenance.svg)}
.lcd {background-image: url(imgs/icons/heating/lcd.svg)}
.ceramic {background-image: url(imgs/icons/heating/ceramic.svg)}

/* SIZE TABLE */
.size-table {width: 41%; padding: 4%; border: 1px solid #e4e4e4}
.size-table h4 {margin-bottom: 20px}
.size-table h4 .details {font-weight: 400}
.size-code-holder {align-items: flex-start}
.size-table .flex-holder {border-bottom: 1px solid #e4e4e4}
/* .size-table .flex-holder:nth-child(odd) {background-color: #f3f3f3} */
.size-table .flex-holder:first-of-type {border-top: 1px solid #e4e4e4}
.size-table .flex-holder div {padding: 5%}
.size-table .flex-holder div:first-of-type {border-right: 1px solid #e4e4e4; width: 14%; color: #687a34; font-weight: 500}
.colour-holder-table .flex-holder div:first-of-type {width: 30px; height: 30px}

/* SPECS TABLE */
.specs-table {width: 100%; margin-top: 1.65%}
table {border-collapse:collapse; width: 100%}
.specs-table table td {border: 1px solid #e4e4e4; padding: 2%}
.table-titles {font-weight: 500; background-color: #687a34; color: white; width: 25%}
.specs-table table tr:nth-child(even) {background-color: #f3f3f3}
.specs-table .colour-holder {display: inline-block; color: white; padding: 1% 2%; width: fit-content; height: auto; border-radius: 4px; margin-right: 2%}


/* PRODUCT PAGE PRODUCTS */
.product-page-main-text {width: 60%}
.product-page-product-holder {width: 350px; height: auto; padding: 2%; border: 1px solid #e4e4e4; border-radius: 4px; background-image: url(imgs/backgrounds/dark_matter.png)}
.main-product-image-holder {background-size: contain; background-repeat: no-repeat; width: 100%; height: 348px; background-position: center center; border: 1px solid #e4e4e4; border-radius: 4px; background-color: white}
.pucinella-product {background-image: url(imgs/ovens/pucinella-hero.jpg)}
.pucinella-stone-product {background-image: url(imgs/ovens/pucinella-stone-hero.jpg)}
.family-product {background-image: url(imgs/ovens/family-hero.jpg)}
.clementino-product {background-image: url(imgs/ovens/clementino-hero.jpg)}
.master-product {background-image: url(imgs/ovens/master-hero.jpg)}
.smart-product {background-image: url(imgs/ovens/smart-hero.jpg)}
.pizza-party-product {background-image: url(imgs/ovens/pizza-party-hero.jpg)}

/* RESELLERS */
.resellers-holder, .index-text-holder {background-image: url(imgs/backgrounds/dark_matter.png)}
.resellers-holder a {background-position: center; background-size: contain; width: 18%; height: 100px; background-repeat: no-repeat; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); border: 1px solid transparent; border-radius: 4px; cursor: pointer}
.resellers-holder a:hover {border: 1px solid #e4e4e4}
.bm-logo {background-image: url(imgs/resellers/brault-et-martineau.png)}
.resellers-holder a.nella-logo {background-image: url(imgs/resellers/nella.png); background-size: 70% auto}
.resellers-holder a.clementi-logo {background-image: url(imgs/clementi-canada-pizza-ovens-showroom.svg); background-size: 70% auto}
.resellers-holder a.tanguay-logo {background-image: url(imgs/resellers/tanguay-logo.svg); background-size: 70% auto}
.resellers-holder a.archipel-logo {background-image: url(imgs/resellers/archipel-logo.svg); background-size: 70% auto}
.resellers-holder a.palomino-logo {background-image: url(imgs/resellers/palomino.png); background-size: 70% auto}
.resellers-holder h3 {color: #fff; width: 100%; margin-bottom: 30px}

/* INDEX TEXT */
.index-text-holder, .index-text-holder h2 {color: white}
.index-category {outline: 1px solid white; width: 49%; height: 560px; border-radius: 4px; box-sizing: border-box; margin-bottom: 20px; color: white; padding: 2%;  background-position:  top center, center center, center center; background-size: contain, 100% auto, 7px 7px; background-repeat: no-repeat, repeat, repeat; position: relative; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1)}
.index-category h4 {color: white; font-family: 'Intro Rust G Base 2 Line'; font-weight: normal; font-style: normal; line-height: 100%; font-size: 42px; transition: all 0.2s ease}
.pizza {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-fish.jpg), linear-gradient(0deg, rgba(255,0,0,.45) 0%, rgba(255,0,0,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.ovens {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-built-in.jpg), linear-gradient(0deg, rgba(104,122,52,.45) 0%, rgba(104,122,52,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.bbqs {background-image: url(imgs/backgrounds/clementi-canada-barbecues.jpg),  linear-gradient(0deg, rgba(175,83,4,.55) 0%, rgba(175,83,4,.55) 100%), url(imgs/backgrounds/dark_matter.png)}
.stoves {background-image: url(imgs/backgrounds/clementi-canada-heating-elite-classica.jpg), linear-gradient(0deg, rgba(4, 128, 175, 0.55) 0%, rgba(4, 128, 175, 0.55) 100%), url(imgs/backgrounds/dark_matter.png)}
.index-category-text-holder {position: absolute; bottom: 4%; left: 4%; padding-right: 4%}
:lang(fr) .index-category-text-holder {font-size: 18px}
.index-btn {padding: 15px; border: 1px solid white; border-radius: 4px; width: fit-content; font-family: 'Ubuntu', sans-serif; font-weight: 700}
.pizza .index-btn {background-image: linear-gradient(0deg, rgba(255,0,0,.45) 0%, rgba(255,0,0,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.ovens .index-btn {background-image: linear-gradient(0deg, rgba(104,122,52,.45) 0%, rgba(104,122,52,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.bbqs .index-btn {background-image: linear-gradient(0deg, rgba(175,83,4,.55) 0%, rgba(175,83,4,.55) 100%), url(imgs/backgrounds/dark_matter.png)}
.stoves .index-btn {background-image: linear-gradient(0deg, rgba(4, 128, 175, 0.55) 0%, rgba(4, 128, 175, 0.55) 100%), url(imgs/backgrounds/dark_matter.png)}
.index-category:hover {outline: 1px solid #687a34}
.index-category:hover .index-btn {background-image: url(imgs/backgrounds/dark_matter.png)}
.index-category:hover h4 {transform: scale(1.1); transform-origin: top left}

/* CAROUSEL */
.carousel-container {
  position: relative;
}

.carousel {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.carousel__item {
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.carousel__image {
  display: block;
  width: 100%; height: auto;
  border-radius: 3px
}

.controls {
  position: relative;
  right: 0;
  bottom: -.55em;
  left: 0;
  text-align: center;
}

.controls__dot {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  outline: none;
  background-color: #fff;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s;
  }

  .controls__dot:hover,  .controls__dot:focus, .controls__dot-active {
	opacity: 1;
	background-color: #687a34;
	cursor: pointer; pointer-events: auto;
  }
}

.wrapper {
  margin-right: auto;
  margin-left: auto;
  max-width: 60em;
  min-height: 100vh;
  box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
  padding-bottom: 6em;
}

.intro {
  margin-top: 3.5em;
  max-width: 42em;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.slide-title {position: relative; font-family: 'Ubuntu', sans-serif; font-weight: 700; color: white; margin-bottom: 1em; font-size: 110%}

.swiper {
  width: 350px;
  height: 410px;
  color: white
}

.swiper-slide span {position: absolute; text-align: center; font-family: 'Ubuntu', sans-serif; font-weight: 700; width: 100%; padding-top: 4%; z-index: 11}
.swiper-pagination {background-image: url(imgs/backgrounds/dark_matter.png); margin: 0 auto; bottom: 0!important}
.swiper-pagination-bullet-active, .swiper-pagination-bullet {background-color: white!important}
.swiper-button-next, .swiper-button-prev {color: white!important; top:95.5%!important; width: calc(var(--swiper-navigation-size)/ 44 * 20)!important;}
.swiper-button-next:hover, .swiper-button-prev:hover {color: #687a34!important}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 32px!important}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0!important}
.swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0!important}

.accessory-holder-outer {} 
.accessory-holder-outer .inner-section.flex-holder {justify-content: flex-start; padding: 0; margin-bottom: -20px}
.accessory-holder-outer h1 {width: 100%; color: #687a34}
.accessory {border: 1px solid #e4e4e4; width: 220px; padding: 20px; height: 270px; background-size: contain; background-position: center 90%; background-repeat: no-repeat; border-radius: 4px; background-color: white; margin-right: 1%; box-sizing: content-box; flex-shrink: 0}
.accessory:last-of-type {margin-right: 0}
.trolley {background-image: url("imgs/accessories/trolley.png")}
.pro-kit {background-image: url("imgs/accessories/pro-kit.png")}
.base {background-image: url("imgs/accessories/base.jpg")}
.top-plate {background-image: url("imgs/accessories/top-plate.jpg")}
.top-grill {background-image: url("imgs/accessories/top-grill.jpg")}
.stand {background-image: url("imgs/accessories/stand.jpg")}
.shovels-kit {background-image: url("imgs/accessories/shovels-kit.png")}
.rounded-shovel {background-image: url("imgs/accessories/rounded-shovel.jpg"); background-size: 20% auto}
.square-shovel {background-image: url("imgs/accessories/square-shovel.jpg"); background-size: 25% auto}
.brush {background-image: url("imgs/accessories/brush.jpg"); background-size: 14% auto}
.multicooking-system {background-image: url("imgs/accessories/multi-cooking-system.jpg"); background-position: center 100%}
.glass-window {background-image: url("imgs/accessories/glass-window.jpg"); background-position: center 100%}
.covers {background-image: url("imgs/accessories/covers.jpg"); background-size: 55% auto}
.pizza-oven-selector .scroll-btn-holder {margin: 10px auto -10px; max-width: 1200px; color: white}
.scroll-btn-holder {margin: 10px auto 10px 0; max-width: 300px; text-align: center; display: flex; align-items: center}
.scroll-btn-holder a {padding: 10px; color: #687a34; font-size: 30px; display: inline-block}
.scroll-btn-holder a div {width: 30px; height: 30px; background-image: url(imgs/chevron-green.svg); background-repeat: no-repeat; background-size: contain;  transition: all 0.35s cubic-bezier(0.86, 0, 0.07, 1)}
.horizon-prev div {transform: rotate(90deg); background-position: center 60%;}
.horizon-prev:hover div {background-position: center 100%;}
.horizon-next div {transform: rotate(-90deg); background-position: center 60%;}
.horizon-next:hover div {background-position: center 100%;}
.horizon-prev-product div {transform: rotate(90deg); background-position: center 60%;}
.horizon-prev-product:hover div {background-position: center 100%; filter: brightness(0) invert(1);}
.horizon-next-product div {transform: rotate(-90deg); background-position: center 60%;}
.horizon-next-product:hover div {background-position: center 100%; filter: brightness(0) invert(1);}

/* MIXITUP */
.mix {width: 24.4%; height: 270px; margin-bottom: 1%; background-color: #444; background-image: linear-gradient(0deg, rgba(255,0,0,.45) 0%, rgba(255,0,0,.45) 100%), url(imgs/backgrounds/dark_matter.png); border-radius: 4px; padding: 1.5%; border: 1px solid transparent; box-sizing: border-box}
.mix h4 {color: white; font-size: 24px; margin-top: 5%; font-family: 'Intro Rust G Base 2 Line'; font-weight: normal; font-style: normal; line-height: 105%}
.mix p {color: white; margin-block-start: 0; font-family: 'Ubuntu', sans-serif; font-size: 16px; opacity: .8}
.mix-pic {background-size: cover; background-position: top center; background-repeat: no-repeat; width: 100%; height: 130px; border-radius: 4px; border: 1px solid #e4e4e4}
.mix:hover {background-image: url(imgs/backgrounds/dark_matter.png); border: 1px solid #687a34}
.bbq-mix {background-image: linear-gradient(0deg, rgba(175,83,4,.55) 0%, rgba(175,83,4,.55) 100%), url(imgs/backgrounds/dark_matter.png)}
.mix:hover p {opacity: 1}
.heating-mix {background-image: linear-gradient(0deg, rgba(4, 128, 175, 0.55) 0%, rgba(4, 128, 175, 0.55) 100%), url(imgs/backgrounds/dark_matter.png)}
.indirect-mix {background-image: linear-gradient(0deg, rgba(104,122,52,.45) 0%, rgba(104,122,52,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.container {width: 74%}
.control {color: white; background-color: transparent; padding: 5px 10px; border-radius: 4px; font-family: 'Work Sans', sans-serif; transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); border: 1px solid #e4e4e4; display: block; margin-bottom: 10px; text-align: left; font-size: 16px}
.control:last-of-type {margin: 0}
.control:hover {cursor: pointer; background-image: linear-gradient(0deg, rgba(104,122,52,.45) 0%, rgba(104,122,52,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.control-holder-outer {align-items: flex-start; justify-content: flex-start; flex-direction: column}
.control-holder {padding: 10%; border-bottom: 1px solid #e4e4e4; border-radius: 0; width: 80%; background-image: url(imgs/backgrounds/dark_matter.png)}
.control-holder-outer-level {width: 25%}
.product-selector {align-items: flex-start; margin-top: 10px}
.control-holder:first-of-type {border-radius: 4px 4px 0 0; margin: 0}
.control-holder:first-of-type h4 {margin: 0; font-size: 24px}
.control-holder:last-of-type {border-radius: 0 0 4px 4px; border-color: transparent}
.control-holder h4 {color: white; margin-bottom: 10px; font-size: 20px}
.mixitup-control-active {background-image: linear-gradient(0deg, rgba(104,122,52,.45) 0%, rgba(104,122,52,.45) 100%), url(imgs/backgrounds/dark_matter.png)}
.check {width: 25px; height: 22px; margin-bottom: -4px; background-image: url("imgs/icons/check.svg"); background-size: contain; display: inline-block; background-repeat: no-repeat; display: none}
.mix-icon {background-size: contain; height: 45px; width: 45px; background-color: transparent!important; padding: 0!important; background-position: -10px center; background-repeat: no-repeat; margin-right: -10px}
.mix-icon.wood {background-position: 0 center; margin-left: -5px}
.mix-icon.indirect-heat {background-size: 40px; background-position: -6px center} 
.mix-icon.oven {background-size: 50px; background-position: -5px center} 
.mix-icon-holder {justify-content: flex-start}
.mixitup-control-active .check {display: inline-block}
.mix-btn:hover {color: white; background-color: #9db84e; cursor: pointer}
.control-holder-outer-level h3 {padding: 2%; text-align: left; border: 1px solid #e4e4e4; border-radius: 4px 4px 0 0; border-bottom: 0; color: white; background-image: url(imgs/backgrounds/dark_matter.png)}
.pucinella-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-fish.jpg)}
.pucinella-gas-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-gas.jpg)}
.pucinella-stone-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-pucinella-stone.jpg)}
.clementino-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-clementino.jpg)}
.clementino-hybrid-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-clementino-hybrid.jpg)}
.family-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-family.jpg)}
.family-gas-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-family-gas.jpg)}
.family-stone-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-family-stone.jpg)}
.pizza-party-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-pizza-party.jpg)}
.pizza-party-gas-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-pizza-party-gas.jpg)}
.colorado-worktop-mix {background-image: url(imgs/backgrounds/clementi-canada-barbecues-colorado-with-worktop.jpg)}
.master-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-master.jpg)}
.smart-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-smart.jpg)}
.smile-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-smile.jpg)}
.piccolo-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-piccolo-gioiello.jpg)}
.master-built-in-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-built-in.jpg)}
.smart-built-in-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-smart-built-in.jpg)}
.smile-built-in-mix {background-image: url(imgs/backgrounds/clementi-canada-pizza-ovens-smile-built-in.jpg)}
.colorado-mix {background-image: url(imgs/backgrounds/clementi-canada-barbecues-colorado.jpg)}
.gringo-mix {background-image: url(imgs/backgrounds/clementi-canada-barbecues-gringo.jpg)}
.flipper-mix {background-image: url(imgs/backgrounds/clementi-canada-barbecues-flipper.jpg)}
.california-mix {background-image: url(imgs/backgrounds/clementi-canada-barbecues-california.jpg)}
.elite-classica-mix {background-image: url(imgs/backgrounds/clementi-canada-heating-elite-classica.jpg)}
.elite-moderna-mix {background-image: url(imgs/backgrounds/clementi-canada-heating-elite-moderna.jpg)}
.elite-hydro-mix {background-image: url(imgs/backgrounds/clementi-canada-heating-elite-hydro.jpg)}

/* LINKS */
.links-holder a {width: 22%; border: 1px solid #e4e4e4; box-sizing: border-box; height: 250px; border-radius: 4px; background-size: 75% auto; background-position: 50% 30%; background-repeat: no-repeat; background-image: url(imgs/links/de-manincor-canada.png);  transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); text-align: center; font-family: 'Ubuntu', sans-serif; font-weight: 700; color: white; position: relative; margin-bottom: 3%; background-color: olive}
.links-holder a:hover {background-size: 70% auto; background-color: #444}
.links-holder a div {border-top: 1px solid #e4e4e4; position: absolute; bottom: 10%; padding-top: 10%; width: 80%; left: 0; right: 0; margin-left: auto; margin-right: auto}
.links-holder a.gi-metal {background-image: url(imgs/links/gi-metal.png); 	background-color: #065496;}
.links-holder a.big-green-egg {background-image: url(imgs/links/big-green-egg.png); background-color: #007935;}
.links-holder a.sopka {background-image: url(imgs/links/sopka.png); background-color: rgba(51,51,51,0.8);}
.links-holder a.louisiana {background-image: url(imgs/links/louisiana-grills.png); background-color: #223a5e}
.links-holder a.palomino {background-image: url(imgs/links/palomino.png); background-color: #8ec63f}
.links-holder a:hover {background-size: 180px; background-color: #444}

/* BREAK POINTS */
@media screen and (max-width: 1200px)
 {
	 header {padding: 0 4%; width: 92%}
	 .product-icon-holder {padding: 4%; width: 92%}
	 .inner-section {padding: 4%; width: 92%}
	 .product-holder-outer {padding: 2% 4%}
	 .nav-holder-inner {padding-top: 2%}
	 footer {padding: 0}
	 .size-table {padding: 2%; width: 45%}
	 .size-table .flex-holder div {padding: 4% 2%}
	 #pizza-ovens header .title {font-size: 80px}
	 .pizza-oven-selector h1 {width: 92%; padding: 0 4%}
	 .oven-sub-menu {margin-left: 468px; opacity: 1; top: 11%}
	 .stoves-sub-menu {margin-left: 698px; opacity: 1; top: 11%}
	 .sub-menu-hide {opacity: 0; top: 12%; pointer-events: none;}
	 .mobile-nav-btn {display: flex}
	 .sub-menus-title {pointer-events: auto}
	 nav {display: none}
	 .nav-holder-inner {align-items: flex-start; padding-top: 4%}
	 .sub-menu-hide {display: none; pointer-events: none}
	 .footer-nav-holder {padding: 4%; width: 92%}
}

@media screen and (max-width: 1024px){
	.product-page-main-text {width: 50%}
	.main-browser .product-holder {width: 44%; margin-bottom: 3.5%}
	.index-category {height: 520px}
	.mix {width: 32.4%}
	.control {font-size: 16px}
}

@media screen and (max-width: 915px){
	.size-code-holder {overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap}
	.size-table {flex-shrink: 0; width: 55%}
	.size-table:first-of-type {margin-right: 2%}
	.size-table .flex-holder div {padding: 2%}
	.size-table .flex-holder div:first-of-type {width: 18%}
	.colour-holder-table .flex-holder div:first-of-type {width: 30px}
	.colour-holder-table {width: 45%}	
}

@media screen and (max-width: 800px) {
	header .title {font-size: 70px; padding-top: 30px}
	header .subtitle {font-size: 40px}
	header {height: 530px}
	.map {width: 300px}
	body, .mobile-menu {font-size: 18px} 
	h1 {font-size: 50px}
	h2 {font-size: 50px}
	h3 {font-size: 30px}
	h4 {font-size: 20px}
	.details {font-size: 14px}
	.specs-table-holder {overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap}
	.specs-table {width: 140%}
	.product-page-product-holder {margin-top: 4%; width: 100%; padding: 2em}
	.main-product-image-holder {background-size: cover; height: 600px}
	.product-page-main-text {width: 100%}
	#pizza-ovens header .title {font-size: 55px}
	/* .product-holder-outer {scroll-snap-type: x mandatory; scroll-padding: 50%} */
	.product-holder {padding: 4%; margin-right: 4%; margin-bottom: 2%}
	/* .accessory-holder-outer .product-holder-outer {scroll-padding: 5%}
	.accessory {scroll-snap-align: start} */
	.pizza-oven-selector {padding: 4% 0 2%}
	.mobile-sub-menu-show {height: 110px}
	.pellet-stoves-sub-menu-show {height: 190px}
	.bbq-sub-menu-show {height: 70px}
	.mobile-menu {width: 40%}
	.mobile-menu-hide {margin-right: -40%}
	.resellers-holder a {width: 48%; height: 155px}
	.resellers-holder h3 {font-size: 40px; margin-bottom: 10px}
	.accessory-holder-outer h1 {margin-bottom: 20px}
	.main-browser .product-holder {width: 40%}
	.quality-features {width: 15%; height: 185px; border: 1px solid #e4e4e4; margin-bottom: 1%}
	.quality-features p {font-size: 16px}
	.index-category h4 {font-size: 36px}
	.index-category {height: 480px}
	.links-holder a {width: 31%}
	.footer-nav-holder div {width: 31%}
	.swiper {width: 81vw; height: 92vw}
	.scroll-btn-holder {display: none}
}

@media screen and (max-width: 768px) {
	.mix h4 {font-size: 20px}
	.mix p {font-size: 14px}
	.mix {height: 250px}
}

@media screen and (max-width: 700px) {
	.size-table {width: 60%}
	.colour-holder-table .flex-holder div:first-of-type {width: 30px}
	.product-icons {margin-bottom: 4%; width: 29%; margin-right: 0}
	.product-icon-holder {padding-bottom: 2%; justify-content: space-between}
	#index header {height: 560px}
	.resellers-holder a {width: 48%; height: 115px} 
}

@media screen and (max-width: 650px) {
	.size-code-holder {overflow-x: auto; overflow-y: auto; flex-wrap: wrap}
	.size-table {width: 95%; margin-right: 0}
	.size-table:first-of-type {margin: 0 0 2%}
	.mobile-menu {width: 55%}
	.mobile-menu-hide {margin-right: -55%}
	.accessory {height: 250px; margin-right: 2%}
	.quality-features {width: 20%; height: 180px}
	.index-category {height: 440px}
	.links-holder a {height: 210px}
}

@media screen and (max-width: 600px) {
	.map {width: 240px; height: 240px}	
	.copyright {margin-top: 50px}
	body {font-size: 16px}
	h1 {font-size: 40px}
	h2 {font-size: 40px}
	h3 {font-size: 30px}
	h4 {font-size: 10px}
	.details {font-size: 12px}
	#wood-fired-ovens header .title {font-size: 12vw}
	.product-page-product-holder {padding: 1em}
	.accessory h4 {font-size: 16px}
	.index-category {height: 520px; width: 100%}
	.mix {width: 49.4%}
}

@media screen and (max-width: 540px) {
.product-feature-inside-holder-smaller, .product-feature-inside-holder {width: 100%; padding: 6% 0; border-bottom: 1px solid #e4e4e4}
.product-feature-large-holder {display: flex}
.left-border, .right-border {border-right: 0; border-left: 0}
.one-third-flex:last-child, .full-width.no-border  {border: 0; padding-bottom: 0}
.one-third-flex.force-border {border-bottom: 1px solid #e4e4e4; padding-bottom: 6%}
.product-icon-large {width: 30px; height: 30px}
.specs-table .colour-holder:last-of-type {margin-top: 2%}
.map {width: 100%; margin-top: 8%}
.address-holder p {margin-bottom: -10px}
.address-holder p.copyright {margin-top: 20px; margin-bottom: 4%}
.product-feature-large-holder {border-bottom: 0}
.product-holder-colour-holder {height: auto}
.product-holder-colour-holder .details {display: none}
.product-holder {width: 280px; min-height: 339px}
.product-holder-outer {padding: 4% 4% 2%}
.main-product-image-holder {height: 300px; background-position: center top}
.pucinella-product, .clementino-product {background-position: center center}
.map {display: none}
.mobile-menu {font-size: 20px}
.mobile-menu {width: 100%; border-left-width: 0; border-radius: 0; padding: 5% 4%}
.mobile-menu-hide {margin-right: -100%}
.mobile-sub-menu-show {height: 120px}
.pellet-stoves-sub-menu-show {height: 200px}
.bbq-sub-menu-show {height: 75px}
a.close-menu-btn {top: 10px; right: 10px}
.product-holder-img {height: 121px; margin-top: 4%}
.resellers-holder a {height: 85px}
.resellers-holder a.clementi-logo, .resellers-holder a.tanguay-logo, .resellers-holder a.nella-logo {margin-left: 1%; border-left: 1px solid #e4e4e4; background-position: center; border-radius: 0; margin-top: 4%}
.main-browser .product-holder {width: 92%; animation-delay: 0.1s !important}
.main-browser .product-holder-img {height: 180px}
.quality-features {width: 28.5%}
.quality-features:nth-child(3n+1) {animation-delay: 0.1s !important}
.quality-features:nth-child(2n+2) {animation-delay: 0.10s !important}
.quality-features:nth-child(3n+3) {animation-delay: 0.20s !important}
.index-category {height: 490px}
.footer-nav-holder {margin-bottom: 0}
}

@media screen and (max-width: 414px) {
	header .title {font-size: 12vw; padding-top: 50px}
	header .subtitle {font-size: 30px}
	header {height: 360px}
	.nav-logo {width: 70px; height: 77px}
	.italy {height: 3px}
	#pizza-ovens header .title {font-size: 40px}
	.product-icons {width: 46%}
	#index header {height: 430px}
	#wood-fired-ovens header {height: 490px}
	.resellers-holder h1 {margin-bottom: 0}
	.main-product-image-holder {height: 230px} 
	.accessory {height: 165px; width: 44%}
	.accessory-holder-outer .product-holder-outer {padding: 4%}
	.accessory-holder-outer .inner-section.flex-holder {padding-bottom: 10px}
	.accessory-holder-outer h1 {margin-bottom: 0}
	.main-browser .product-holder-img {height: 150px}
	.quality-features {height: 150px}
	.quality-features p {font-size: 14px}
	.quality-features-icon-holder {height: 80px}
	#ducted-wood-stoves header {height: 460px}
	.main-icon {font-size: 14px}
	.index-category {height: 410px}
	.index-category h4 {font-size: 30px}
	.mix {width: 100%; padding: 3.5%}
	.container {width: 65%}
	.control-holder-outer-level {width: 34%}
	.control-holder:first-of-type h4 {font-size: 18px}
	.control-holder h4 {font-size: 16px}
	.control {font-size: 14px}
	.links-holder a {width: 49%}
	.footer-nav-holder div {width: 42%}
	.swiper {height: 94vw}
}

@media screen and (max-width: 375px) {
	.resellers-holder h3 {font-size: 36px}
	.resellers-holder a {height: 60px}
	.swiper {height: 95vw}
}

@media screen and (max-width: 360px) {
	#pizza-ovens header .title {font-size: 32px}
}

@media screen and (max-width: 320px) {
	#wood-fired-ovens header {height: 420px}
	.resellers-holder h3 {font-size: 30px}
	.quality-features {width: 44.5%; height: 155px}
	.quality-features:nth-of-type(odd) {animation-delay: 0.1s !important}
	.quality-features:nth-of-type(even) {animation-delay: 0.20s !important}
	.index-category p {font-size: 14px}
	.index-category {height: 390px}
	.links-holder a {height: 160px}
}