/*
Theme Name: CoffeeCircus
Theme URI: https://coffeecircus.eu
Author: Punkcakes
Author URI: http://www.punkcakes.com
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

* {box-sizing: border-box;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top; outline: none; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
table { border-collapse: collapse; border-spacing: 0; }
button, input, select, textarea { margin: 0; font-family: inherit; font-size: inherit; }
button::-moz-focus-inner { border: 0; padding: 0; }
input[type="radio"], input[type="checkbox"], input[type="submit"] { width: auto; }
input[type="text"].small-text { width: auto; }

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-smooth: always;
  -webkit-font-smoothing: subpixel-antialiased;
  position: relative;
  font-size: 14px; 
  line-height: 26px; 
  color: #666;
}
html { overflow-x: hidden; }
html, body { min-height: 100%; min-width: 360px; }

/* Common */
p, ul, ol { margin-bottom: 25px; }
ul, ol { margin: 25px 0 25px 40px; }
i, oblique { font-style: italic; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
sup { font-size: 11px; position: relative; top: -4px; left: 1px; }
sub { font-size: 11px; position: relative; bottom: -4px; left: 1px; }

table { width: 100%; margin-bottom: 25px; border-collapse: collapse; overflow: scroll; }
table th, table td { padding: 5px 10px; border: 1px solid #ddd; text-align: left; vertical-align: middle; }
table th { color: #c7a17a; }
@media only screen and (max-width: 640px) { table th, table td { padding: 3px; } }

h1, h2, h3, h4 { font-family: 'Oswald', Helvetica, Arial, sans-serif; color: #30271c; font-weight: 700; margin: 25px 0; text-transform: uppercase; }
h1 { font-size: 60px; line-height: 1.11667em; }
div h1:first-child { margin-top: 40px; }
h2 { font-size: 35px; line-height: 1.14286em; }
h3 { font-size: 22px; letter-spacing: .5px; line-height: 1.22727em; }
h4 { font-size: 19px; line-height: 1.31579em; }
h5 { font-weight: bold; }
h2 mark { background: #eee; font-size: 0.7em; }
a, a:active { text-decoration: none; color: #c7a17a; }
a:hover { color: #B89571; }

form label {}
form p { margin-bottom: 25px; }
input, textarea, select {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 20px;
  font-size: 14px;
  line-height: 28px;
  color: #666;
  background: none;
  border: 1px solid #ddd;
  outline: none;
}
input::placeholder { color: #B89571; }
textarea { height: 150px; }
.button, input[type="submit"], .button:focus {
  display: inline-block;
  padding: 15px 35px;
  text-align: center;
  background: #c7a17a;
  border: none;
  color: #fff;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  letter-spacing: 1.7px;
  font-size: 14px;
  line-height: 1.7em;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  margin: 25px 0;
}
.button:hover, input[type="submit"]:hover { background: #30271C; color: #fff; }
@media only screen and (max-width: 360px) { 
  .button, input[type="submit"], .button:focus { padding: 10px 20px; }
}

.required, .wpcf7-not-valid-tip, .wpcf7-validation-errors { color: #ee0000; }
.wpcf7-not-valid-tip, .wpcf7-validation-errors { font-size: 12px !important; margin-left: 20px; }
.wpcf7 .wpcf7-response-output { border: none !important; font-size: 12px; line-height: 18px; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { color: #ee0000 !important; }
.wpcf7 form.sent .wpcf7-response-output { color: #00CF1E !important; }
.wpcf7-list-item { display: block; }
input.material-icons {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 28px;
  vertical-align: middle;
  padding: 0;
  color: #000;
  text-transform: none;
}
.gallery .gallery-item { padding: 0 20px 10px 20px !important; }
.gallery img { width: 100%; height: 100%; border: none !important; }

.clearfloat { clear: both; }
.wrap { margin: 0 auto; max-width: 1300px; padding: 20px; position: relative; }
.wrap::after { content: " "; display: table; clear: both; }
.wrap .wp-caption, .wrap img { max-width: 100%; height: auto; }
.wrap .alignright { float: right; margin-left: 30px; margin-bottom: 20px; }
.wrap .alignleft { float: left; margin-right: 30px; margin-bottom: 20px; }
.green { color: #007010; }
.red, .error, .woocommerce-error { color: #ee0000; }

.columns-2 > div, .columns-2 > li { display: block; float: left; width: 48%; margin-bottom: 5%; }
.columns-2 > div:nth-child(odd), .columns-2 > li:nth-child(odd) { margin-right: 4%; }
.columns-2::after { content: " "; display: table; clear: both; }
.columns-3 > div, .columns-3 > li { display: block; float: left; width: 31%; margin: 0 3.5% 4% 0; }
.columns-3 > div:nth-child(3n), .columns-3 > li:nth-child(3n) { margin-right: 0; }
.columns-3::after { content: " "; display: table; clear: both; }
.columns-4 > div, .columns-4 > li { display: block; float: left; width: 22.75%; margin: 0 3% 3% 0; }
.columns-4 > div:nth-child(4n), .columns-4 > li:nth-child(4n) { margin-right: 0; }
.columns-4::after { content: " "; display: table; clear: both; }
.columns-2 .woocommerce-notices-wrapper, .columns-3 .woocommerce-notices-wrapper, .columns-4 .woocommerce-notices-wrapper { width: 100%; margin-bottom: 25px; }
@media only screen and (max-width: 960px) {
  .columns-4 > div, .columns-4 > li { display: block; float: left; width: 48%; margin: 0 0 5% 0; }
  .columns-4 > div:nth-child(odd), .columns-4 > li:nth-child(odd) { margin-right: 4%; }
}
@media only screen and (max-width: 460px) {
  .columns-3 > div, .columns-3 > li { width: 100%; margin-right: 0; }
}
@media only screen and (max-width: 360px) {
  .columns-2 > div, .columns-2 > li,
  .columns-4 > div, .columns-4 > li { width: 100%; margin-right: 0; }
}

.two-columns { columns: 2; column-gap: 50px; text-align: left; }
.half-column { display: inline-block; width: 48%; margin: 0 0 20px 3%; text-align: left; }
.three-columns { columns: 3; column-gap: 50px; text-align: left; }
.third-column { display: inline-block; width: 31%; margin: 0 0 20px 3%; text-align: left; }
.four-columns { columns: 4; column-gap: 40px; text-align: left; }
.fourth-column { display: inline-block; width: 23%; margin: 0 0 25px 2%; text-align: left; }
.half-column:first-child, .third-column:first-child, .fourth-column:first-child { margin-left: 0; }

.column-left { text-align: left; }
.column-center { text-align: center; }
.column-right { text-align: right; }
@media only screen and (max-width: 960px) {
  .four-columns { columns: 2; }
  .fourth-column { width: 48%; margin: 0 0 20px 3%; }
  .fourth-column:nth-child(odd) { margin-left: 0; }
}
@media only screen and (max-width: 640px) {
	table th, table td { font-size: 12px; }
	.two-columns, .three-columns, .four-columns { columns: 1; }
	.half-column, .third-column, .fourth-column { width: 100%; }
}

/* main */
#main { padding-top: 60px; position: relative; z-index: 50; background: #fff; margin-bottom: 560px; }
#top-banner {
  width: 100%; 
  height: 350px; 
  overflow: hidden;
  background-color: #000;
  background-position: center; 
  background-image: url(pics/main.jpg); 
  background-repeat: no-repeat;
  position: relative;
  display: table;
  margin-bottom: 20px;
}
#top-banner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.2;
  position: absolute;
  top: 0;
  z-index: 0;
}
#top-banner h1 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  position: relative;
  z-index: 1;
}
#content { width: 72%; float: left; }
#sidebar { width: 25%; float: right; }
#sidebar .widget { margin-bottom: 40px; }
#main-bottom { width: 100%; height: 90px; background: #eae7de; }
.excerpt p, .excerpt ul { margin: 0 0 10px 0; }

.woocommerce-info,
.woocommerce-message { border-left: 3px solid #c7a17a; font-family: Merriweather, serif; font-style: italic; padding: 15px; margin-bottom: 40px; background: #FAF7ED; }
.woocommerce-message .button { margin: -7px 0 0 0; float: right; padding: 10px 25px; font-size: 12px; }

@media only screen and (max-width: 800px) {
  #content, #sidebar { width: 100% }
  #top-banner { margin-bottom: 0; }
}
@media only screen and (max-width: 360px) {
  #top-banner { height: 300px; }
}

/* Widgets */
a.remove { color: #666; font-size: 20px; font-weight: bold; }
a.remove:hover { color: #B89571; }
.widget ul { margin: 0; list-style: none; }
.widget ul li { display: block; width: 100%; height: 112px; border-bottom: 2px solid #eee; margin-bottom: 20px; }
.widget ul li a { display: block; width: 100%; line-height: 16px; }
.widget ul li a.remove { width: 15px; float: right; margin: 0 0 10px 10px; }
.widget ul li img { width: 90px; height: 90px; float: left; margin: 0 10px 0 0; }
.widget .amount { font-size: 16px; }
.widget p { margin-bottom: 15px; }
.widget a.button { margin: 0 0 5px 0; padding: 10px 25px; }
.widget a.checkout { float: right; }
.woocommerce-mini-cart__buttons::after { content: " "; display: table; clear: both; }


/* Header */
header#site-header {
  padding: 0 25px;
  background: #fff;
  position: fixed;
  z-index: 100;
  width: 100%;
  text-align: right;
}
#logo {
  float: left;
  text-decoration: none;
  margin: 5px 15px 0 0;
}
.menu-top-menu-container { display: inline-block; }
.menu { margin: 0; text-align: right; }
.menu li { display: inline-block; padding: 0; position: relative; margin: 0; }
.menu li a {
  display: block;
  position: relative;
  text-decoration: none;
  font-family: Oswald, sans-serif;
  letter-spacing: 1.5px;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 17px;
  color: #30271c;
  font-weight: 700;
  text-transform: uppercase;
}
.menu > .current-menu-item > a, .menu > li:hover > a { color: #B89571; }
.menu ul.sub-menu {
  display: none;
  position: absolute;
  min-width: 200px;
  top: 60px;
  z-index: 15;
  border-top: 2px solid #B89571;
  padding: 5px 0;
  margin: 0;
  background: #fff;
  text-align: left;
}
.menu li:hover > ul.sub-menu { display: block; }
.menu ul.sub-menu li { display: block; padding: 0; }
.menu ul.sub-menu li a {
  padding: 10px 17px;
  font-family: Oswald, sans-serif;
  font-weight: normal;
  letter-spacing: 1.5px;
  height: auto;
  font-size: 13px;
  color: #666;
}
.menu ul.sub-menu li a:hover { color: #B89571; }
.menu input.material-icons { color: #dc0405; }
.menu input.material-icons:hover { background: none; }
#header-controls { float: right; }
#header-separator {
  display: inline-block;
  height: 20px;
  border-right: 2px solid #30271c;
  margin: 20px 10px;
}
#header-cart,
#header-search { display: inline-block; position: relative; padding: 20px 5px 14px 10px; }
#cart-icon, #search-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(pics/icon_cart_alt.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
#cart-icon-number {
  display: inline-block;
  background: #B89571;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  height: 16px;
  width: 16px;
  line-height: 16px;
  text-align: center;
  position: absolute;
  top: 15px;
  right: -2px;
}
#header-cart-widget {
  display: none;
  width: 300px;
  position: absolute;
  top: 60px;
  right: -20px;
  background: #fff;
  border-top: 2px solid #B89571;
  padding: 20px;
  text-align: left;
}
#header-cart:hover #header-cart-widget { display: block; }
#header-cart-widget ul li { min-height: 92px; }
#header-cart-widget ul li img { width: 70px; height: 70px; }
#header-cart-widget a.button { font-size: 11px; }
#header-search { margin-right: 0; }
#search-icon { background-image: url(pics/icon_search2.png); cursor: pointer; }
#header-search-form {
  display: none;
  background: #fff; 
  position: absolute; 
  width: 100%; 
  height: 60px; 
  top: 0; 
  left: 0; 
  padding: 0 200px 0 0;
}
#header-search-form input[type='search'] { margin: 5px; }
#header-search-form input[type='submit'] { margin: 0; position: absolute; top: 5px; right: 50px; }
#header-search-form a.remove { position: absolute; padding: 10px; top: 5px; right: 10px; }
#menu-burger {
  width: 65px;
  height: 65px;
  background-image: url(pics/icon_menu.png);
  background-repeat: no-repeat;
  background-position: center;
  float: right;
  display: none;
  margin: 0 -20px 0 0;
  cursor: pointer;
}
@media only screen and (max-width: 640px) {
  #logo img { height: 30px; margin-top: 10px; }
  #header-controls { display: none; }
  #menu-burger { display: block; }
  .menu-top-menu-container {
  	display: none;
		width: 100%;
		margin: 66px 0 0 0;
    padding: 0 0 15px 0;
  }
  .menu { text-align: center; }
  .menu li { display: block; }
  .menu li a { padding: 8px 15px; }
  .menu-top-menu-container .menu ul.sub-menu { position: relative; top: 0; }
  .menu ul.sub-menu li a { padding: 5px; text-align: center; }
}


/* Footer */
footer {
  background-color: #212121;
  background-position: center center;
  background-size: cover;
  background-image: url(pics/footer-background.jpg);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 30px;
}
footer h4 { color: #fff; }
footer p { color: #acacac; }
footer .widget ul li { border-bottom: none; margin-bottom: 0; }
footer .widget .amount { color: #fff; }
#footer-bottom { background: #000; border-top: 1px solid #333; }
#footer-bottom p { margin-bottom: 0; }
#footer-bottom a { margin: 0 10px; }
#footer-bottom a img { filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(113deg) brightness(107%) contrast(101%); }
#footer-bottom a:hover img { filter: invert(66%) sepia(9%) saturate(1413%) hue-rotate(350deg) brightness(92%) contrast(88%); }
#footer-bottom .columns-3 > div { margin-bottom: 0; }

@media only screen and (max-width: 960px) {
  footer { position: relative; }
  #main { margin-bottom: 0 !important; }
}


/* Products */
p.woocommerce-result-count { display: inline-block; margin-bottom: 45px; }
form.woocommerce-ordering { float: right; }
form.woocommerce-ordering select { width: auto; }
ul.products { list-style: none; margin: 0; }
ul.products li a:hover h2 { color: #B89571; }
ul.products h2 { font-size: 19px; line-height: 1.31579em; margin: 15px 0 0 0; }
ul.products h2.woocommerce-loop-category__title { font-size: 35px; }
ul.products .price { font-size: 17px; }
ul.products .button { margin: 15px 0; float: right; padding: 5px 10px; font-size: 12px; }
.woocommerce-pagination { text-align: center; margin: 25px 0 45px 0; }
ul.page-numbers { display: inline-block; list-style: none; margin: 0; }
ul.page-numbers li { display: inline-block; }
ul.page-numbers li span, ul.page-numbers li a { display: block; width: 30px; height: 30px; line-height: 26px; font-weight: bold; border: 1px solid #c7a17a; margin: 0 5px; }
ul.page-numbers li a:hover { background: #c7a17a; color: #fff; }
@media only screen and (max-width: 420px) {
  p.woocommerce-result-count { margin-bottom: 10px; }
  form.woocommerce-ordering { margin-bottom: 25px; }
}


/* Single product */
.product .woocommerce-product-gallery { width: 47%; margin-right: 5%; margin-bottom: 40px; display: inline-block; }
.product .summary { width: 47%; display: inline-block; }
a.woocommerce-product-gallery__trigger { display: none; }
.woocommerce-product-gallery__image img.zoomImg { display: none !important; }
ol.flex-control-nav { margin: 0; list-style: none; }
ol.flex-control-nav li { display: inline-block; margin: 0 10px 5px 0; cursor: pointer; }
.product .summary .price { font-family: Merriweather, serif; font-size: 36px; line-height: 42px; font-weight: 700; color: #c7a17a; margin-bottom: 25px; }
.product .summary ul { margin: 0 0 5px 25px; }
.product .summary p { margin: 0 0 5px 0; }
.product_meta { padding: 15px 0; margin: 0 0 25px 0; border-top: 2px solid #efefef; border-bottom: 2px solid #efefef; }
.product_meta span {
  font-size: 15px;
  line-height: 20px;
  color: #30271c;
  font-family: Oswald,sans-serif;
  display: inline-block;
  width: 100px;
  font-weight: 700;
  text-transform: uppercase;
} 
.product_meta span.posted_in { width: 320px; }
.product_meta .sku, .product_meta a { font-weight: normal; }
.woocommerce-variation-price,
.woocommerce-product-details__short-description { margin-bottom: 25px; }
.product .summary .quantity { display: inline-block; width: 100px; margin-right: 20px; }
.product .summary .button { margin-top: 0; }
.related.products { border-top: 2px solid #efefef; margin-top: 50px; padding-top: 50px; }
#get_equipment_banner {
  display: block;
  width: 266px;
  height: 161px;
  background: url('pics/get_equipment.png') no-repeat;
  float: right;
  position: relative;
  margin-right: -50px;
  margin-left: 50px;
}
@media only screen and (max-width: 640px) {
  .product .woocommerce-product-gallery { width: 100%; margin-right: 0; }
  .product .summary { width: 100%; }
}
@media only screen and (max-width: 360px) {
  #get_equipment_banner { float: none; margin: 0; }
}


/* Cart / Checkout */
.shop_table th, .shop_table td { font-family: Merriweather, serif; font-size: 16px; color: #30271c; }
.shop_table th { font-weight: 600; font-style: italic; }
.shop_table img { width: 100px; }
.shop_table input { width: 100px; font-size: 18px; font-weight: 600; }
input#coupon_code { width: 200px; }
.shop_table .actions { text-align: right; }
.coupon .button { margin: 0 0 0 25px; }
.shop_table .shipping input { width: auto; margin-right: 7px; }
#shipping-calculator-form .button { margin: 0; }
#woocommerce-checkout-form-coupon .button { margin: 0; }

@media only screen and (max-width: 640px) {
  .shop_table th, .shop_table td { font-size: 12px; }
  .shop_table input { width: 50px; font-size: 14px; padding: 5px; }
}


/* My Account */
.woocommerce-MyAccount-navigation { width: 30%; padding-right: 30px; float: left; margin-bottom: 50px; }
.woocommerce-MyAccount-content { width: 70%; padding-left: 30px; float: left; margin-bottom: 50px; }
.woocommerce-MyAccount-navigation ul { margin: 0; list-style: none; border-top: 1px solid #ddd; }
.woocommerce-MyAccount-navigation ul li { padding: 10px 0; border-bottom: 1px solid #e1e1e1; }
.woocommerce-MyAccount-navigation ul li a { font-weight: 600; color: #30271c; font-family: Merriweather,serif; font-style: italic; }
.woocommerce-MyAccount-navigation ul li.is-active a { color: #c7a17a; }
.woocommerce::after { content: " "; display: table; clear: both; }
.password-input { position: relative; }
button.show-password-input {
  position: absolute; 
  right: 20px; 
  width: 16px; 
  height: 16px; 
  background: none; 
  border: none; 
  background-image: url('pics/icon_key_alt.png'); 
  background-size: 100%; 
}
.order_details ul { margin: 0 0 0 50px; }
.order_details p { margin: 0; }