/* celestra font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800&subset=cyrillic&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700&subset=cyrillic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');
html, body {font-family: 'Roboto', sans-serif; font-size: 20px;}

@media screen and (max-width: 480px) {html, body {font-size:16px;}}
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6,.digit {font-weight:500;}
body, .btn {font-weight: 400;}

.navbar-nav {font-weight: 500;}
.navbar .btn {font-weight: 500;}
body, .btn {line-height: 1.6;}
h1, h2, .h1, .h2 {margin-bottom:2rem;}
.mb-3 {margin-bottom:2rem !important;}
.lightbox .mb-3 {margin-bottom:1rem !important;}

p.lead {margin-bottom:2rem;}

.article-body p {margin-bottom: 1rem;}
.article-body h2 {margin-bottom: 1rem; font-size: 1.5rem;}
.article-body h3 {margin-bottom: 1rem; font-size: 1.25rem;}

:root {
    --list-gutter: 2rem;
    --fm-gutter-x: 2rem;
}
.h-underline-1 {
    margin-bottom: 4rem;
}
@media (min-width: 1200px) {
  .h1, h1 {
    font-size: 3rem;
  }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Oswald', serif;}
html, body {font-family: 'Golos Text', serif;}


/* from.biz color scheme */
:root {
--body-color: #343a40;
--primary: #0d6efd;
--primary-active: #0c63e4;
--primary-rgb: 13, 110, 253;
--secondary: #6c757d;
--secondary-active: #616971;
--secondary-rgb: 108, 117, 125;
--warning: #ffc107;
--warning-active: #e6ae06;
--warning-rgb: 255, 193, 7;
--info: #0dcaf0;
--info-active: #0cb6d8;
--info-rgb: 13, 202, 240;
--success: #198754;
--success-active: #177a4c;
--success-rgb: 25, 135, 84;
--light: #f8f9fa;
--light-active: #ecedee;
--light-rgb: 248, 249, 250;
--dark: #343a40;
--dark-active: #2f343a;
--dark-rgb: 52, 58, 64;
--danger: #dc3545;
--danger-active: #c6303e;
--danger-rgb: 220, 53, 69;
--mobile-bg: var(--body-bg);
--header-height: 128px;
--navbar-font-size: 13px;
--navbar-hover-bg: var(--primary);
--navbar-hover-color: #ffffff;
}
.btn-primary {border-color:#0d6efd !important; background-color:#0d6efd !important}
.btn-primary:hover {border-color:#0c63e4 !important; background-color:#0c63e4 !important}
.btn-primary.active {border-color:#0c63e4 !important; background-color:#0c63e4 !important}
.bg-primary .btn-primary {border-color:#0c63e4 !important; background-color:#0c63e4 !important}
.bg-primary .btn-primary:hover {border-color:#0b59cd !important; background-color:#0b59cd !important}
.btn-secondary {border-color:#6c757d !important; background-color:#6c757d !important}
.btn-secondary:hover {border-color:#616971 !important; background-color:#616971 !important}
.btn-secondary.active {border-color:#616971 !important; background-color:#616971 !important}
.btn-warning {border-color:#ffc107 !important; background-color:#ffc107 !important}
.btn-warning:hover {border-color:#e6ae06 !important; background-color:#e6ae06 !important}
.btn-warning.active {border-color:#e6ae06 !important; background-color:#e6ae06 !important}
.btn-info {border-color:#0dcaf0 !important; background-color:#0dcaf0 !important}
.btn-info:hover {border-color:#0cb6d8 !important; background-color:#0cb6d8 !important}
.btn-info.active {border-color:#0cb6d8 !important; background-color:#0cb6d8 !important}
.bg-info .btn-info {border-color:#0cb6d8 !important; background-color:#0cb6d8 !important}
.bg-info .btn-info:hover {border-color:#0ba4c2 !important; background-color:#0ba4c2 !important}
.btn-success {border-color:#198754 !important; background-color:#198754 !important}
.btn-success:hover {border-color:#177a4c !important; background-color:#177a4c !important}
.btn-success.active {border-color:#177a4c !important; background-color:#177a4c !important}
.btn-light {border-color:#f8f9fa !important; background-color:#f8f9fa !important}
.btn-light:hover {border-color:#dfe0e1 !important; background-color:#dfe0e1 !important}
.btn-light.active {border-color:#dfe0e1 !important; background-color:#dfe0e1 !important}
.bg-light .btn-light {border-color:#ecedee !important; background-color:#ecedee !important}
.bg-light .btn-light:hover {border-color:#d4d5d6 !important; background-color:#d4d5d6 !important}
.bg-light .btn-light.active {border-color:#d4d5d6 !important; background-color:#d4d5d6 !important}
.btn-dark {border-color:#343a40 !important; background-color:#343a40 !important}
.btn-dark:hover {border-color:#2f343a !important; background-color:#2f343a !important}
.btn-dark.active {border-color:#2f343a !important; background-color:#2f343a !important}
.btn-danger {border-color:#dc3545 !important; background-color:#dc3545 !important}
.btn-danger:hover {border-color:#c6303e !important; background-color:#c6303e !important}
.btn-danger.active {border-color:#c6303e !important; background-color:#c6303e !important}



/* Preloader */

/*  custom css */
#flipbook .page-wrapper{
   -webkit-perspective:2000px;
   -moz-perspective: 2000px;
   -ms-perspective: 2000px;
   perspective: 2000px;
}

#flipbook .shadow,
#flipbook.shadow{
  -webkit-box-shadow: 0 4px 10px #666;
  -moz-box-shadow: 0 4px 10px #666;
  -ms-box-shadow: 0 4px 10px #666;
  -o-box-shadow: 0 4px 10px #666;
  box-shadow: 0 4px 10px #666;
}

#flipbook {
    width: 400px;
    height: 300px;
    margin: 50px auto;
    perspective: 1500px;
    position: relative;
}

#flipbook .journal-page{
    width: 200px;
    height: 300px;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    
    background: var(--light);
}

#flipbook .hard {
    background: var(--secondary);
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

#flipbook .journal-page div {
    padding: 1rem;
}

#flipbook .journal-page:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}


#flipbook-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 500px;
}

.loader {
    width: 48px;
    height: 48px;
    border: 4px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}