/*
Theme Name: Tetra Books
Theme URI: https://tetrabooks.gr/
Author:            <a href="https://antartis.eu/" target="_blank">D. Antartis - Web Development</a>
Description:  Tetra Books
Version: 1.0
License: Tetra Books
Tags: Tetra Books
Text Domain: Tetra Books
*/
:root {
    --body-color: #f7f4f0
}
@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Myriad Pro Regular'),
    url('assets/webfonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 700;
    src: local('Myriad Pro Bold'),
    url('assets/webfonts/MYRIADPRO-BOLD.woff') format('woff');
}
html { margin-top: 0 !important;}
body {padding: 0;margin: 0;background-color: var(--body-color);color:#000; font-size: 21px; line-height: 1.2; font-family: 'Myriad Pro', sans-serif;}

a {text-decoration: none; font-weight:bold; color: #000;}
.row {
    --bs-gutter-x: 2rem;
}
.w-120 {width: 120px;}

.simple-line { border-bottom: 1px solid #000;}

.fs-21 {font-size: 21px;}
.fs-24 {font-size: 24px;}

.btn-simple {border:2px solid #000; padding:5px 20px; background-color: var(--body-color); color:#000; font-weight: bold; cursor: pointer; transition: all 0.3s;}
.btn-simple:hover { background-color: #000; color: #fff;}


.home-logo {position: relative; height: 100vh;}
@keyframes homeLogoAnimation { to {width: 263px; height: 336px;left:10px; top:103px;transform: translate(0);} }
.splash-page {opacity:1; top:0;position: fixed; z-index: 10000000000000; height: 100vh; width: 100vw;background-color: #f7f4f0; }
@keyframes homeSplashAnimation { to {opacity: 0; pointer-events: none;} }
header {margin-top:110px;}
header .menu {background: var(--body-color); top:-30px;}
header.dynamic-header .menu {position: fixed; top:0; left:0; width: 100%; z-index: 10000000000000; border-bottom: 1px solid #000; transition: top 0.3s;}

.main-logo {width: 280px; height: 318px;}
.logo-with-animation { position: absolute;width:50vw;height:50vh;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.logo-with-animation .logo-line-1-animation {stroke-dasharray: 400;stroke-dashoffset: 400;animation: drawLogo 2s ease forwards 0.5s;}
.logo-with-animation .logo-line-2-animation {stroke-dasharray: 400;stroke-dashoffset: 400;animation: drawLogo 2s ease forwards 0.7s;}
@keyframes drawLogo { to {stroke-dashoffset: 0;} }
.logo-with-animation .word-tetra {opacity:0;animation: fadeIn 0.3s ease forwards 1s;}
.logo-with-animation .word-books {opacity:0;animation: fadeIn 0.3s ease forwards 1.5s;}
@keyframes fadeIn { to {opacity:1;} }

.start-home-animation .home-logo svg {animation: homeLogoAnimation 0.5s ease forwards ;}
.start-home-animation .splash-page {animation: homeSplashAnimation 0.3s ease forwards 0.5s; }


.mt-70 {margin-top: 70px;}

.container-fluid {max-width: 2000px;padding-right: var(--bs-gutter-x);
    padding-left: var(--bs-gutter-x);}

.line {border-bottom: 1px solid #1a1a18;}

.menu-item { position: relative; font-weight: bold; padding-top: 15px; padding-bottom: 15px; cursor: pointer; }

.masonry-container {margin-left: -10px; margin-right: -10px;}
.book-box {padding: 10px;margin-top: 50px;}
.book-box .image-container {aspect-ratio : 1 / 1; width: 100%;max-height: 100vh;}
.book-box .image-container .image-inner {width: 100%; height: 100%; position: relative;}
.book-box .image-container .image-inner img {object-fit: cover;position: absolute; width: 100%;height: 100%;top: 50%;left: 50%;transition: transform 0.3s; transform: translate(-50%, -50%); }
.book-box:hover .image-container .image-inner img { transform: translate(-50%, -50%) scale(1.05);}
.book-box .image-container .slick-current { z-index: 10; position: relative;}
.book-box .title {font-weight: bold; font-size: 39px; margin-top: 10px; }
.book-box .details {}
.book-box .description {margin-top: 15px;}
.book-box .line {margin-top: 15px; margin-bottom: 15px;}
.book-box .price {}

.book-box ::selection {background: transparent;}

.add-cart {cursor: pointer;}
.qty-btn {margin: 0 10px;
    color: #000;
    width: 20px;
    height: 20px;
    text-align: center;
    border: 1px solid #000;
    font-weight: bold;cursor: pointer;
    border-radius: 50%;
    line-height: 20px;}



.slick-slider .slick-list { height: 100%; }
.slick-slider .slick-track {height: 100%; }
.slick-slider .slide {height: 100%; }

.cart-badge:not(:empty) {
    position: absolute;
    top: 2px;
    border: 1px solid;
    padding: 3px;
    font-size: 12px;
    line-height: 12px;
    min-width: 20px;
    right: -1px;
    text-align: center;

    border-radius: 18px;
}

.grid-sizer { width: 25%; }
.grid-item { width: 25%; }

.cart-icon {width: 30px; height: 30px;}

.custom-input {width: 100%;position: relative;border-bottom: 2px solid rgba(255,255,255,0.24);}
.custom-input input {width:100%; outline:0; padding: 5px 20px; border-radius: 0; line-height: 22px;border: 1px solid #000;background: var(--body-color); color: #000;}
.custom-input.number input { padding: 5px 5px 5px 20px; }
.custom-input input::-webkit-input-placeholder { color: #000;}
.custom-input input:-moz-placeholder { color: #000;}
.custom-input input::-moz-placeholder { color: #000;}
.custom-input input:-ms-input-placeholder { color: #000;}
.custom-input .focus-input {position: absolute;display: block;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;color: #000;font-size: 17px;}
.custom-input .focus-input:after {color: #000;content: attr(data-placeholder);display: block;position: absolute;top: 6px;left: 0px;margin-left: 14px;-webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;}
.custom-input input:focus + .focus-input:after {top: -10px;font-size: 12px;background-color: var(--body-color); display: inline-block; padding: 0 6px; margin-left: 8px;}
.custom-input input:not(:placeholder-shown) + .focus-input:after {top: -10px;font-size: 12px;background-color: var(--body-color); display: inline-block; padding: 0 6px; margin-left: 8px;}


.custom-input {width: 100%;position: relative;border-bottom: 2px solid rgba(255,255,255,0.24);}
.custom-input textarea {width:100%; outline:0; border-radius: 0; padding: 5px 20px; line-height: 22px;border: 1px solid #000;background: var(--body-color); color: #000;}
.custom-input textarea::-webkit-input-placeholder { color: #000;}
.custom-input textarea:-moz-placeholder { color: #000;}
.custom-input textarea::-moz-placeholder { color: #000;}
.custom-input textarea:-ms-input-placeholder { color: #000;}
.custom-input .focus-input {position: absolute;display: block;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;color: #000;}
.custom-input .focus-input:after {color: #000;content: attr(data-placeholder);display: block;position: absolute;top: 6px;left: 0px;margin-left: 14px;-webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;}
.custom-input textarea:focus + .focus-input:after {top: -10px;font-size: 12px;background-color: var(--body-color); display: inline-block; padding: 0 6px; margin-left: 8px;}
.custom-input textarea:not(:placeholder-shown) + .focus-input:after {top: -10px;font-size: 12px;background-color: var(--body-color); display: inline-block; padding: 0 6px; margin-left: 8px;}

.custom-input.invalid input {border-color: red; color: red;}
.custom-input.invalid textarea {border-color: red; color: red;}
.custom-input.invalid .focus-input:after  { color: red;}


.custom-dropdown input {cursor: pointer;}
.custom-dropdown select { position: absolute; left: 0; width: 100%; height: 100%; opacity: 0;}
.custom-dropdown .dropdown-arrow {position: absolute; right: 8px;top: 5px; transform: rotate(180deg);}
.custom-dropdown .dropdown-items {position: absolute; z-index: 1; border: 1px solid #000;width: 100%;border-top: 0;background-color: var(--body-color); list-style: none;}
.custom-dropdown .dropdown-items > li {padding: 5px 25px;cursor: pointer;}
.custom-dropdown .dropdown-items > li:hover {font-weight: bold;}
.custom-dropdown .dropdown-items > li.active {font-weight: bold;}


@media (max-width: 1399.98px) {
    .grid-sizer { width: 33.3%; }
    .grid-item { width: 33.3%; }
}
@media (max-width: 1199.98px) {

}
@media (max-width: 991.98px) {
    .grid-sizer { width: 50%; }
    .grid-item { width: 50%; }
}
@media (max-width: 767.98px) {

}
@media (max-width: 575.98px) {
    .grid-sizer { width: 100%; }
    .grid-item { width: 100%; }

    .mt-xs-20 {margin-top: 20px;}
}