/* @import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8"; */
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');@charset "UTF-8";
/************ Basic Hacks ************/
html, body { background-color: #ecd9ed; font-family: 'Cardo', serif; margin: 0px; }
h1, h2, h3, h4 { font-family: sans-serif; text-transform: uppercase; color: #23cbbf; }
h3.title { color: #2388c0; font-weight: 600; }
ul { padding: 0px; }
a { font-family: sans-serif; text-decoration: none !important; color: #23cbbf; }
b { font-weight: bold; }
img { max-width: 100%; }
.hidden, .hide { display: none; }
div.alert { max-width: 1320px; margin: 32px auto; }
:focus { outline: none; } ::-moz-focus-inner { border: 0; }
b, strong { font-weight: 700; }
@media screen and (max-width: 767px) {
html, body { font-size: 12px; font-weight: 200; }
h1 { font-size: 24px; } h2 { font-size: 20px; }
h3 { font-size: 18px; } h4 { font-size: 14px; }
}
@media screen and (min-width: 768px) {
html, body { font-size: 16px; font-weight: 200; }
h1 { font-size: 36px; } h2 { font-size: 24px; }
h3 { font-size: 20px; } h4 { font-size: 18px; }
}
/***************** Colors ***************/
.grey { color: #aaa; }
.green { color: #23cbbf; }
.pink { color: #e08498; }
a.pink, a.pink-dark:hover { color: #ecd9ed; }
a.pink:hover, .pink-dark { color: #e08498; }
.btn-info { background: #6bb8e6!important; border-color:#6bb8e6!important; }
.btn-pink { text-shadow: none; color: #fff; background-color: #e08498; }
.btn-pink:hover { background-color: #ecd9ed; color: #000; }
.btn-green { background-color: #23cbbf; color: #fff; }
.btn-green:hover { background-color: #23cbbf; color: #000; }
.ui-widget-header { background: #e08498; }
.btn-outline-green { color: #23cddf; border-color: #23cddf; }
.btn-outline-green:hover { color: #fff; background-color: #23cddf; }
/***************** Layout ****************/
div.header { background-color: #393939; overflow: hidden; }
div.header, main.content { max-width: 1360px; margin: 0 auto; }
main.content { background-color: #fff; position: relative; min-height: 480px; margin-top: 24px; overflow: hidden; }
main.content .inner { padding-left: 2%; padding-right: 2%; }
div.responsive-menu { background-color: #23cbbf; }
span.form-required { color: red; }
@media screen and (max-width: 391px) {
div.main-logo { left: -222px; }
}
div.container { max-width: 100% !important; overflow: hidden; }
@media screen and (max-width: 661px) {
.flex-container { display: block; width: 100%; }
.left-fixed, .right-fluid { display: inline-block; width: 100%; }
.left-fixed { background-color: #23cbbf; position: relative; }
.left-fixed .main-menu { position: absolute; right: 0; top: 0; width: 220px; height: 48px; text-align: right; }
div.responsive-menu { display: none; position: relative; z-index: 9; }
div.toggler { display: inline-block; }
div.right-fluid { height: 244px; }
}
@media screen and (min-width: 662px) {
.flex-container { display: flex; width: 100%; }
.left-fixed { flex: 0 0 304px; }
.right-fluid { flex: 1; }
div.toggler { display: none; }
div.main-menu { width: 304px; }
}
.info-pruh { border-bottom: 24px solid #ecd9ed; }
.info-pruh img { height: 48px; padding-right: 12px; }
.info-pruh .hore { display: block; width: 100%; }
.info-pruh .csob { width: 208px; margin: 0 auto; }
.info-pruh .send { width: 275px; margin: 0 auto; }
.info-pruh .posta { width: 208px; margin: 0 auto; }
.info-pruh .cart { width: 220px; margin: 0 auto; }
/****************** Logo ****************/
div.main-logo { position: relative; overflow: hidden; height: 48px; width: 304px; z-index: 10; }
/***************** Slider ***************/
#slider { position: relative; overflow: hidden; }
#slider, .slides, .slider-slide, .slider-image { height: 100%; width: 100%; background-color: #ecd9ed; }
.slider .previous, .slider .next {
position: absolute; top: 50%; margin-top: -34px; font-size: 20px; padding: 10px; z-index: 8;
color: white; text-decoration: none; transition: all .3s; background-color: #ecd9ed;
}
.slider .previous:hover, .slider .next:hover { background-color: #e08498; }
.slider .previous { left: 0; }
.slider .next { right: 0; }
.slider .slides { height: 100%; }
.slider-slide { position: absolute; top: 0; left: 0; transform: scale(0.5,0.5); opacity: 0; transition: all 0.4s; }
.slider-slide.active { z-index: 5; left: 0; opacity: 1; transform: scale(1,1); }
.slider-image { display: inline-block; position: relative; transition: filter 0.3s; transform: scale(1.1); transition: transform 0.2s; }
.slider:hover .slider-image { filter: blur(2px); }
.slider-text {
display: inline-block; position: absolute; top: 10%; left: 2%; right: 2%; width: 96%; height: 48px; font-size: 18px;
color: #fff; text-align: left; text-transform: uppercase; text-shadow: 2px 1px 2px #000;
}
.slider-link { position: absolute; bottom: 50px; left: 3%; margin: 3%; text-shadow: none; color: #fff; background-color: #e08498; }
.slider-link:hover { color: #000; }
.slider .bullets { text-align: center; position: absolute; bottom: 10px; width: 100%; z-index: 5; }
.slider .bullets .bullet {
display: inline-block; position: relative; width: 18px; height: 18px; margin: 0 5px; cursor: pointer; z-index: 14;
background-color: #ecd9ed; border-radius: 50%; border: 2px solid transparent; transition: all .3s; }
.slider .bullets .bullet.active { background-color: #e08498; }
.slider .bullets .bullet:hover { border: 2px solid rgba(255,255,255,.8); background: transparent; }
.admin-slides { padding-bottom: 64px; }
.admin-slide:hover { background-color: #ecd9ed; }
.admin-slide .slider-image { width: 540px; height: 360px; }
.admin-slide .slider-text { max-width: 540px; max-height: 360px; }
.admin-slide .buttons .btn { width: 40px; height: 40px; }
.admin-slide.inactive { position: relative; background-color: #ddd; }
.admin-slide.inactive .left { opacity: 0.4; }
.admin-slide.inactive::after { content: "Neverejné"; position: absolute; bottom: 22px; right: 18px; font-size: 42px; color: red; }
@media screen and (max-width: 661px) {
.arrows { display: none; }
}
/****************** Main menu *************/
div.main-menu { display: inline-block; background-color: #23cbbf; z-index: 9; }
div.main-menu .item { display: block; border-top: 1px solid #fff; padding: 14px; }
div.main-menu a { color: #444; text-transform: uppercase; }
div.main-menu a:hover, div.main-menu .active { background-color: #23cbbf; color: #fff; }
div.main-menu .item.outlet { position: relative; background-color: #e08498; color: #fff; overflow: visible; border-bottom: 1px solid #23cbbf; }
div.main-menu .item.outlet:hover { color: #333; border-bottom: 1px solid #e08498; }
span.outlet { position: absolute; right: 12px; bottom: 4px; transform: rotate(-40deg); }
div.toggler { width: 52px; height: 48px; padding: 6px; cursor: pointer; }
.bar1, .bar2, .bar3 { width: 32px; height: 5px; background-color: #fff; margin: 6px 0; transition: 0.4s; }
.responsive .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }
.responsive .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }
.responsive .bar2 { opacity: 0; }
@media screen and (max-width: 661px) {
div.responsive-menu a { color: #fff; font-size: 18px; }
}
@media screen and (min-width: 662px) {
div.main-menu { width: 304px; }
}
.admin { padding: 14px; }
.admin h3 { color: #fff; }
.admin a { color: #ff5555 !important; padding: 6px; }
.admin .navbar-toggler-icon { color: #f35353; transform: rotate(90deg); font-size: 22px; }
/************* Quick Contact **************/
#qc { position: fixed; width: 345px; bottom: -460px; right: 0; padding: 12px; z-index: 9; background-color: #23cbbf; }
#qc a.show-form { display: block; position: fixed; right: 0; bottom: 0; padding: 12px 32px; background-color: #e08498; color: #fff; }
#qc a.show-form:hover { background-color: #23cbbf; }
#qc span.close { color: #e08498; }
/************* Home Page ***********/
.home .categories, .cart .categories { overflow: hidden; padding-top: 15px; } /* .row has display flex */
.home .category, .cart .category { position: relative; }
.image-border:hover > h2.title:after { transform: scale3d(1, 1, 1); transition: 0.5s cubic-bezier(0.5, 0.03, 0.41, 1); }
.image-border h2.title { position: absolute; line-height: 60px; width: 100%; height: 60px; padding: 0; text-align: center; }
.image-border h2.title:after { content: ""; position: absolute; width: 100%; height: 1px; background-color: #e08498;
bottom: 10px; left: 0; transform: scale3d(0, 1, 1); transition: 0.5s cubic-bezier(0.5, 0.03, 0.41, 1); }
.vitaj-text { font-size: 22px; }
@media screen and (min-width: 970px) {
.home .categories, .cart .categories { justify-content: space-around; }
.home .category, .cart .category { left: 10px; width: 320px; height: 380px; }
.image-border { width: 300px; height: 300px; background-size: 300px 300px; }
.image-border:after { width: 290px; height: 290px; left: 5px; top: 5px; }
.image-border .main-image { width: 290px; height: 290px; left: 5px; top: 5px; background-size: 300px 300px; }
.image-border { background-color: #eee; position: relative; z-index: 1; }
.image-border:after { content: ""; position: absolute; width: 290px; height: 290px; left: 5px; top: 5px; background-color: #fff; }
.image-border .main-image { position: absolute; background-position: center center; z-index: 2; transition: 0.5s cubic-bezier(0.5, 0.03, 0.41, 1); }
.image-border:hover > .main-image { transform: translate(-15px, -15px); transition: 0.5s cubic-bezier(0.5, 0.03, 0.41, 1); }
.image-border h2.title { bottom: -70px; }
}
@media screen and (max-width: 969px) {
.home .categories, .cart .categories { justify-content: space-around; }
.home .category, .cart .category { width: 30%; height: 300px; }
.home .main-image { display: none; }
.image-border { width: 100%; height: 240px; background-size: 100%; background-repeat: no-repeat; background-position: center; }
.image-border h2.title { bottom: 0px; }
}
@media screen and (max-width: 767px) {
.home .okuliare .item-2 { display: none; }
}
@media screen and (max-width: 511px) {
.home .category, .cart .category { width: 80%; height: 320px; margin-top: 36px; }
}
.home .okuliare { text-align: center; padding-bottom: 42px; }
.home .okuliare h3.green { border-bottom: 1px solid #e08498; }
.home .okuliare h3.pink { color: #e08498; border-bottom: 1px solid #23cbbf; }
/************ Koshik ************/
.cart .produkt-row { border-top: 12px solid #ecd9ed; border-bottom: 12px solid #ecd9ed; padding: 32px 12px; }
.cart-button-back { background-color: #23cbbf; color: #fff; padding: 12px 22px; border-radius: 3px; }
.cart-button-next { background-color: #e08498; color: #fff; padding: 12px 22px; border-radius: 3px; }
.cart-button-back:hover { background-color: #23cbbf; color: #fff; }
.cart-button-next:hover { background-color: #ecd9ed; color: #fff; }
.progress-icons div { text-align: center; }
.progress-icons div.w-8 { width: 8%; }
.progress-icons div.w-9 { width: 9%; }
.progress-icons div.w-16 { width: 16%; }
.progress-icons div.w-17 { width: 17%; }
.progress-icons, .progress-text > div { text-align: center; padding-top: 12px; }
.progress-text a:hover { color: #23cbbf; }
.progress-text div.will { color: #666; }
.progress-text div.active { color: #dd96c9; }
.progress-icons div.oddelovac { display: inline-block; height: 6px; border-radius: 3px; margin: 26px 0; }
.progress-icons div.oddelovac.will { background-color: #ccc; }
.progress-icons div.oddelovac.done { background-color: #23cbbf; }
#progress_cart { padding-left: 22px; }
#progress_payment { padding-left: 2px; }
/**** Obchodne podmienky, Odstupenie, Gdpr ****/
.vop, .oou { margin-bottom: 64px; }
.vop ol, .oou ol { counter-reset: item; }
.vop li { display: block }
.vop li h2 { margin-top: 32px; }
.vop li h2:before { content: counters(item, ".") " "; counter-increment: item; }
.vop li.children:before, .oou li:before { content: counters(item, ".") " "; counter-increment: item; margin-left: -30px; }
span.indent > b { color: #e08498; margin-left: -18px; }
span.ul:before { content: "- "; color: #8ec0a7; margin-left: -10px; }
/************** Kontakty **************/
.kontakty form button.btn { float: right; display: block; margin-bottom: 36px; }
#text { display: none; }
@media screen and (min-width: 512px) {
div.kontakty .left { display: inline-block; width: 50%; float: left; }
div.kontakty .right { display: inline-block; width: 44%; float: right; margin-top: 60px; }
}
/*************** Footer ****************/
.footer { background-color: #393939; border-top: 6px solid #23cbbf; padding: 64px 12px 92px; }
.footer div.oddelovac { width: 50%; margin: 0 auto; border-bottom: 1px solid #23cbbf; }
.footer .col-xs-12, .footer .col-sm-6 { margin-bottom: 36px; }
.footer img.logo-footer { width: 120px; }
/**************** throbber ***************/
span#throbber { position: absolute; left: 50%; margin-left: -176px; top: 50%; margin-top: -44px; }
span#throbber svg { scale: 0.6; }
div#imgModal.throbber { opacity: 0.77; }
@keyframes moveEyesLeft {
0% { transform: rotate(0deg); transform-origin: 87px; }
100% { transform: rotate(360deg); transform-origin: 87px; }
}
@keyframes moveEyesRight {
0% { transform: rotate(0deg); transform-origin: 276px; }
100% { transform: rotate(-720deg); transform-origin: 276px; }
}
.bulva-left { animation: moveEyesLeft 0.8s ease-in infinite; }
.bulva-right { animation: moveEyesRight 1s linear infinite; }