/*
 * created by Josef Vokner | vokner.com
 * copyrighht 2019, all rights reserved
 */

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/Roboto-Regular.woff');
	font-stretch: normal;
}

@font-face {
	font-family: 'Roboto Slab';
	src: url('./fonts/RobotoSlab-VariableFont_wght.woff');
	font-stretch: normal;
}

@font-face {
	font-family: 'Roboto Black';
	src: url('./fonts/RobotoSlab-Black.ttf');
	font-stretch: normal;
}


/* typography */
body, p, em {font-family: 'Roboto', sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Slab', serif;}
.extrabold {font-family: 'Roboto Black', serif;}

h1, h2, h3, h4 {font-weight: 700;}
h5, h6 {font-weight: 400;}
.extrabold {font-weight: 900;}
.btn > em {font-weight: 400; font-style: normal;}

h1 {font-size: 2.4rem;}
h1.extrabold {font-size: 3.8rem !important;}
h5.card-title {font-size: .8rem;}
.btn > em, .font-alt {font-size: .8rem;}
.font-great {font-size: 1.4rem !important;}
.font-large {font-size: 16px;}

.btn > em {line-height: .8rem;}

body, p, h1, h2, h3, h4, h5, h6, .font-black, .font-black:hover, a.note, a.black, a.black:hover {color: black !important;}
a, a:hover, a.note:hover {color: #a30000;}
ul.red > li {list-style: url("../images/icons/liRed.png");}
.font-red {color: #a30000 !important;}
.font-light, a.font-light {color: #737373 !important;}
.font-white, a.font-light:hover, a.nav-link, .hover-light:hover {color: white !important;}
.font-success {color: #128d12 !important;}
a:hover, a.black:hover {text-decoration: underline;}
a.font-light, a.font-light:hover, a.nav-link, a.note, a.black, a.nounderline, a.nounderline:hover {text-decoration: none;}
a.nav-link {border: 1px solid transparent; border-radius: .4rem;}
a.nav-link:hover {border: 1px solid white;}
a.nav-link.active {border: 1px solid black; background: black; color: white;}
a.darkness {color: black; text-decoration: none;}
a.darkness:hover {color: white;}


/* forms */
input:required {border-left: 6px solid #cf0303 !important;}
input:required:valid {border-left: 6px solid #00d607 !important;}


/* colors */
.bg-black {background: black;}
.bg-silver {background: #737373;}
.bg-grey {background-color: #d0d0d0 !important;}
.bg-light, .icon-link:hover {background: #f0f0f0 !important;}
.bg-red {background: #a30000;}
.bg-bottle {background: #1c7430;}
.bg-blue {background: #273b60;}
.bg-yellow {background: #fdc300;}
.bg-rainbowBlue {background: #0f5079;}
.bg-yelowGreen {background: #b5d38b;}
.bg-lightGreen {background: #4fb69a;}
.bg-lightBlue {background: #1e8aad;}
.bg-overmouse-silver {background-color: inherit;}
.bg-overmouse-silver:hover {background-color: #bdbdbd !important;}
.list-footer > li, .list-minimal > li {background: transparent;}
.list-footer > li:hover, .bg-grey {background: #acacac;}
.icon-link {background: transparent;}
.border-hover {border-color: black !important;}
.border-hover:hover {border-color: #a30000 !important;}


/* images */
img.logotype {width: 220px; margin: 0 0 1rem 0; padding: 0;}
img.footlogotype {width: 180px; margin: 0; padding: 0;}
#image-gallery .modal-footer{display: block;}


/* buttons */
.btn.align-center {margin: 1.8rem 0 0 0;}
.btn > em {display: block; text-align: left; float: right; margin: .2rem 0 0 .8rem;}
.btn-lightener, .btn-transparency {background-color: transparent;}
.btn-lightener {color: #737373;}
.btn-lightener:hover {color: white;}
.btn-transparency {color: black;}
.btn-transparency:hover {color: #a30000;}
.btn-xxl {font-size: 1.4rem; padding: 1rem 2rem;}
.btn-xs {font-size: .8rem; margin: -0.2rem 0 0 0; padding: 0;}
.btn-xs .py-0 {padding: 0 !important;}
.btn-link > span {color: #cbcbcb !important; float: right;}
#topButton {position: fixed; bottom: 80px; right: 15px; z-index: 999; font-size: 2rem; border: none; outline: none; background-color: #000000; opacity: 0; color: #ffffff; cursor: pointer; padding: 8px 18px; border-radius: 2rem;}
#topButton:hover {opacity: 1 !important;}
#chatbox {position: fixed; bottom: 15px; right: 15px; z-index: 999; font-size: 2rem; border: none; outline: none; background-color: #a30000; color: #ffffff; cursor: pointer; padding: 8px 16px; border-radius: 2rem;}


/* gird */
.wrapper {width: 100%;}
header, .wrapper {margin: 0; padding: 0;}
.margin-head {margin: -1.6rem 0 1rem 0; padding: 0;}
.list-footer > li, .list-minimal > li {border: 0; margin: 0; padding: 0;}
.nav-item {padding: 0 .13rem;}
.box {display: block; margin: .6rem 0 0 0;}
.box-2, .box-4 {display: inline-block;}
.box-2 {width: 140px;}
.box-4 {width: 140px;}
.max-1 {max-width: 95px;}
.popup-widget {position: fixed; bottom: 0 !important; z-index: 99999999; right: 0; width: 100%;}
.carousel-right {margin-left: 35%;}
.carousel-left {margin-left: -14%;}


/* list */
ul.list-font-standard > li {font-size: 16px; padding: 0.4rem;}


/* widget */
.shoptet-widget {display: none;}
.shoptetMobile-widget {position: absolute; display: flex; top: 18%; left: 0; width: 24px; margin: .4rem 0 0 0; padding: .6rem 0; background-color: #8afa00; border: 0; border-radius: 0 .6rem .6rem 0; float: left; z-index: 999999999;}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.font-great {font-size: 1rem !important;}
	.shoptetMobile-widget {top: auto; width: 26px;}
}




/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	h1 {font-size: 3rem;}
	img.logotype {width: 166px; margin: 0 0 -60px -10px; padding: 0;}
	img.footlogotype {width: 140px;}
	.font-big {font-size: larger;}
	.font-large {font-size: 19px;}
	.margin-head {margin: 0; padding: 0;}
	.box-2 {width: 70px;}
	.box-4 {width: 120px;}
	.popup-widget {max-width: 400px;}
	#topButton {bottom: 50px; right: 15px; padding: 5px 20px; font-size: 3rem; border-radius: 3rem;}
	.shoptetMobile-widget {width: 30px;}
	.btn-xxl {font-size: 1.8rem; padding: 1rem 2rem;}
	h5.card-title {font-size: 1.2rem;}
	.fixed-top {position: initial !important;}
}




/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.carousel-right {margin-left: 45%;}
}




/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.shoptetMobile-widget {display: none;}
	.shoptet-widget {position: absolute; display: flex; left: 0; width: 100px; margin: 3rem 0 0 0; padding: 0; float: left; z-index: 999999999;}
}