html, body { margin: 0; padding: 0; }
body, input, select { font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6, p, table, tr, td { margin: 0; padding: 0; }
a { color: #4444bb; }
table { border-spacing: 0; }

.wrap { width: 1370px; max-width: calc(100vw - 40px); margin: 0 auto; position: relative; }
.clear { clear: both; }

#topbar { height: 42px; padding: 20px 0; background: #1f2120; }
#topbar .side { position: absolute; top: 5px; right: 0; }
#topbar .cart { display: inline-block; margin-right: 20px; }
#topbar .cart a { display: block; font-weight: bold; color: #fff; line-height: 34px; background: url('icon-cart.png') center left no-repeat; padding-left: 36px; text-decoration: none; }

#topbar .account { display: inline-block; }
#topbar .account .user { font-weight: bold; color: #fff; line-height: 34px; background: url('icon-account.png') center left no-repeat; padding-left: 36px; text-decoration: none; cursor: pointer; }

#topbar .account_menu { display: none; background: #1f2120; border: 1px solid #fff; position: absolute; right: 0; z-index: 1; min-width: 100px; }
#topbar .account_menu a { display: block; padding: 5px 10px; color: #fff; text-decoration: none; white-space: nowrap; }

#navbar { background: #373F50; }
#navbar a { display: inline-block; color: #fff; line-height: 34px; text-decoration: none; text-transform: uppercase; }
#navbar a+a { margin-left: 20px; }

#bottombar { padding: 20px 0; background: #1f2120; }
#bottombar .copyright { color: #fff; text-align: center; }
#bottombar .copyright a { color: #ccc; text-decoration: underline; }

#account { padding: 20px 0; }
#account div input[type=password] { margin: 5px; padding: 5px; width: 200px; border: 0; border-bottom: 1px solid #000; outline: none; }
#account div input[type=submit] { background: #1f2120; margin: 15px 5px 5px 5px; padding: 10px; width: 100px; color: #fff; border: 0; }

#account_addresses { padding: 20px 0; }
#account_addresses td { padding-right: 10px; padding-bottom: 5px; }
#account_addresses input[maxlength="25"] { width: 80px; }
#account_addresses input[maxlength="50"] { width: 180px; }
#account_addresses input[maxlength="100"] { width: 280px; }
#account_addresses select { width: 288px; padding: 3px 3px; }
#account_addresses div input[type=submit] { background: #1f2120; margin: 0; padding: 8px 16px; color: #fff; border: 0; }
#account_addresses .address_cards { display: flex; flex-wrap: wrap; gap: 20px; }
#account_addresses .address_cards .address { border: 1px solid #ccc; padding: 15px; flex: 310px 1 1; }

#account_login_form { padding: 60px 0; }
#account_login_form div { text-align: center; }
#account_login_form div input[type=email], #account_login_form div input[type=password] { margin: 5px; padding: 5px; width: 200px; border: 0; border-bottom: 1px solid #000; outline: none; }
#account_login_form div input[type=submit] { background: #1f2120; margin: 15px 5px 5px 5px; padding: 10px; width: 100px; color: #fff; border: 0; }

#password_forgotten { padding: 60px 0; }
#password_forgotten div { text-align: center; }
#password_forgotten div input[type=email] { margin: 5px; padding: 5px; width: 200px; border: 0; border-bottom: 1px solid #000; outline: none; }
#password_forgotten div input[type=submit] { background: #1f2120; margin: 15px 5px 5px 5px; padding: 10px; width: 150px; color: #fff; border: 0; }

#password_reset { padding: 60px 0; }
#password_reset div { text-align: center; }
#password_reset div input[type=password] { margin: 5px; padding: 5px; width: 200px; border: 0; border-bottom: 1px solid #000; outline: none; }
#password_reset div input[type=submit] { background: #1f2120; margin: 15px 5px 5px 5px; padding: 10px; width: 150px; color: #fff; border: 0; }

#your_logos { padding: 20px 0; }
#your_logos table { margin: 20px 0; border: 1px solid #373f50; padding: 2px; width: 100%; }
#your_logos table th { white-space: nowrap; text-align: left; background: #373f50; color: #fff; padding: 5px 10px;  }
#your_logos table td { vertical-align: middle; border-bottom: 1px solid #373f50; padding: 5px 10px; }
#your_logos table tr:last-child td { border-bottom: 0; }
#your_logos table td.thumbnail { width: 160px; height: 110px; }
#your_logos table td.thumbnail img { max-width: 150px; max-height: 100px; display: block; margin: 0 auto; }

#home_categories { padding: 60px 0; }
#home_categories .float { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 200px); grid-auto-flow: row; }
#home_categories .float a { width: 200px; display: inline-block; text-decoration: none; }
#home_categories .float a div.category_thumb { height: 200px; background: #373f50; }
#home_categories .float a div.category_name { text-align: center; line-height: 20px; font-size: 14px; color: #000; font-weight: bold; }

#sub_categories .float { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 200px); grid-auto-flow: row; }
#sub_categories .float a { width: 200px; display: inline-block; text-decoration: none; }
#sub_categories .float a div.category_thumb { height: 200px; background: #373f50; }
#sub_categories .float a div.category_name { text-align: center; line-height: 20px; font-size: 14px; color: #000; font-weight: bold; }

#category { padding: 20px 0 40px 0; }
#category .flex { margin: -10px; display: flex; flex-flow: wrap; }
#category .flex>div { flex: 0 0 200px; }
#category .flex a { width: 200px; display: inline-block; text-align: center; margin: 10px; text-decoration: none; font-size: 20px; color: #000; }
#category .flex a div.img { height: 200px; }
#category .flex h4 { font-size: 14px; }
#category .flex h5 { font-size: 14px; font-weight: normal; }
#category h1 { padding-bottom: 20px; }

#item { padding: 20px 0; }
#item h1 { padding-bottom: 20px; }
#item input[type=submit] { background: #1f2120; margin: 0; padding: 10px; width: 100px; color: #fff; border: 0; cursor: pointer; }
#item input.button { background: #1f2120; margin: 0; padding: 10px; width: 100px; color: #fff; border: 0; }
#item select { padding: 4px 0; }

#item iframe.customiser { width: 1410px; height: 735px; margin: -20px; border: 0; }
#item iframe.customiser { max-width: calc(100vw); max-height: calc(100vw * 0.52); }

#cart { padding: 20px 0; }
#cart table { margin: 20px 0; border: 1px solid #373f50; padding: 2px; width: 100%; }
#cart th { text-align: left; background: #373f50; color: #fff; padding: 5px 10px; }
#cart td { vertical-align: top; border-bottom: 1px solid #373f50; padding: 5px 10px; }
#cart tr.with_personalisations td { border-bottom: 0 !important; }

#item table { margin: 20px 0; border: 1px solid #373f50; padding: 2px; }
#item th { text-align: left; background: #373f50; color: #fff; padding: 5px 10px; }
#item td { vertical-align: top; border-bottom: 1px solid #373f50; padding: 5px 10px; }
#item tr:last-child td { border-bottom: 0; }

#cart .float { margin: 10px -10px; display: flex; flex-wrap: wrap; }
#cart .delivery { border: 1px solid #373f50; flex: 310px 0 0; margin: 10px; color: #666; padding: 2px;  cursor: pointer; }
#cart .delivery input { width: calc(100% - 8px); }
#cart .delivery select { width: calc(100%); padding: 4px 0; }
#cart .delivery.on { cursor: default; }
#cart .delivery>div { padding: 14px 14px 0 14px; }
#cart .delivery>div div.line { white-space: nowrap; overflow: hidden; height: 21px; }
#cart .delivery.on>div { background: #1f2120; color: #fff; height: calc(100% - 14px); }
#cart input[type=submit] { background: #1f2120; margin: 0; padding: 10px; width: 150px; color: #fff; border: 0; }

#order_confirmation { padding: 20px 0; }
#order_confirmation h1 { padding-bottom: 20px; }

#order_history { padding: 20px 0; }
#order_history table { margin: 20px 0; border: 1px solid #373f50; padding: 2px; width: 100%; }
#order_history th { text-align: left; background: #373f50; color: #fff; padding: 5px 10px; }
#order_history td { vertical-align: top; border-bottom: 1px solid #373f50; padding: 5px 10px; }
#order_history tr:last-child td { border-bottom: 0; }

#order_details { padding: 20px 0; }
#order_details table { margin: 20px 0; border: 1px solid #373f50; padding: 2px; width: 100%; }
#order_details th { text-align: left; background: #373f50; color: #fff; padding: 5px 10px; }
#order_details td { vertical-align: top; border-bottom: 1px solid #373f50; padding: 5px 10px; }
#order_history .dropship { position: relative; background: url(icon-dropship.png) no-repeat; height: 24px; width: 24px; display: inline-block; margin-bottom: -9px; top: -2px; }

@media screen and (max-width: 500px) {
  body { font-size: 16px; line-height: 1.6; }
  input, select { font-size: 20px; line-height: 2; }
  section { overflow-x: auto; }
  
  #account_login_form div input[type=email], #account_login_form div input[type=password] { width: 400px; }
  #account_login_form div input[type=submit] { width: 200px; margin-bottom: 20px; }
  
  #password_forgotten div input[type=email] { width: 400px; }
  #password_forgotten div input[type=submit] { width: 300px; }

  #password_reset div input[type=password] { width: 400px; }
  #password_reset div input[type=submit] { width: 300px; }
  
  #home_categories { padding: 20px 0; }
  #home_categories .float a { width: 220px; height: 220px; }
  
  #category .flex>div { flex: 0 0 220px; }
  #category .flex a { width: 220px; }
  #category .flex a div.img { height: 220px; }
  
  #item input[type=submit] { width: 200px; }
  #item select { padding: 10px 0; }
  
  #cart .delivery { width: 454px; }
  #cart input[type=submit] { background: #1f2120; margin: 0; padding: 10px; width: 460px; color: #fff; border: 0; }
}

input.button { background: #1f2120; margin: 0; padding: 10px 20px; color: #fff; border: 0; cursor: pointer; }

/* sticky footer */
html { min-height: 100%; position: relative; }
section { margin-bottom: 60px; }
#bottombar { position: absolute; bottom: 0; left: 0; right: 0; }