@font-face {
    font-family: 'Helvetica Neue LT GEO';
    src: url('/assets/2022/fonts/helvetica-neue/HelveticaNeue.eot');
    src: url('/assets/2022/fonts/helvetica-neue/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
    url('/assets/2022/fonts/helvetica-neue/HelveticaNeue.woff2') format('woff2'),
    url('/assets/2022/fonts/helvetica-neue/HelveticaNeue.woff') format('woff'),
    url('/assets/2022/fonts/helvetica-neue/HelveticaNeue.svg#Helvetica Neue LT GEO') format('svg');
}

@font-face {
    font-family: 'BPG Nino Mtavruli Bold';
    src: url('/assets/2022/fonts/bpg-nino-mtavruli/bpg-nino-mtavruli-bold-webfont.eot'); /* IE9 Compat Modes */
    src: url('/assets/2022/fonts/bpg-nino-mtavruli/bpg-nino-mtavruli-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/2022/fonts/bpg-nino-mtavruli/bpg-nino-mtavruli-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('/assets/2022/fonts/bpg-nino-mtavruli/bpg-nino-mtavruli-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('/assets/2022/fonts/bpg-nino-mtavruli/bpg-nino-mtavruli-bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/2022/fonts/bpg-nino-mtavruli/bpg-nino-mtavruli-bold-webfont.svg#bpg_nino_mtavrulibold') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Helvetica-Neue-Bold';
    src: url('/assets/2022/fonts/helvetica-neue/HelveticaNeue-Bold.eot');
    src: url('/assets/2022/fonts/helvetica-neue/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
    url('/assets/2022/fonts/helvetica-neue/HelveticaNeue-Bold.woff2') format('woff2'),
    url('/assets/2022/fonts/helvetica-neue/HelveticaNeue-Bold.woff') format('woff'),
    url('/assets/2022/fonts/helvetica-neue/HelveticaNeue-Bold.svg#Helvetica Neue LT GEO') format('svg');
}

@font-face {
    font-family: 'FiraGO-Book';
    src: url('../fonts/FiraGO/FiraGO-Book.eot?#iefix') format('embedded-opentype'), url('../fonts/FiraGO/FiraGO-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'FiraGO-Bold';
    src: url('../fonts/FiraGO/FiraGO-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/FiraGO/FiraGO-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'FiraGO-Medium';
    src: url('../fonts/FiraGO/FiraGO-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/FiraGO/FiraGO-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
}

body {
    overflow-x: hidden !important;
    background-color: #F5F8F9;
}

.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-top: 60px;
    box-sizing: border-box;
}

.book-section {
    width: 100%;
    text-align: center;
}

.book-section > .container {
    height: 450px;
    width: 900px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2%;
    margin-bottom: 30px;
    perspective: 1200px;
}

.container > .right {
    position: absolute;
    height: 100%;
    width: 50%;
    transition: transform 0.7s ease-in-out;
    transform-style: preserve-3d;
}

.book-section > .container > .right {
    right: 0;
    transform-origin: left;
    border-radius: 10px 0 0 10px;
}

.right > figure.front, .right > figure.back {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 200%;
    background-repeat: no-repeat;
    color: white;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    visibility: visible;
    backface-visibility: hidden;
    background-color: white;
    overflow: hidden;
}

.right > figure.front {
    background-position: right;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 15px -2px rgba(0, 0, 0, 0.2);
}

.right > figure.back {
    background-position: left;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 15px -2px rgba(0, 0, 0, 0.2);
    transform: rotateY(180deg);
}

.flip {
    transform: rotateY(-180deg);
}

.book-section > button {
    border: 2px solid #ef9f00;
    background-color: transparent;
    color: #ef9f00;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: 0.3s ease-in-out;
}

.book-section > button:focus, .book-section > button:active {
    outline: none;
}

.book-section > p {
    color: rgba(0, 0, 0, 0.7);
    font-size: 24px;
}

.book-section > p > a {
    text-decoration: none;
    color: #ef9f00;
}

.book-section > button:hover {
    background-color: #ef9f00;
    color: #fff;
}

.front#cover, .back#back-cover {
    background-color: #CDEBEC;
    text-align: left;
    padding: 0 30px;
}

.front#cover h1 {
    color: #fff;
}

.front#cover p {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
}


.main {
    flex: 1;
}

.page {
    box-sizing: border-box;
    padding: 30px 50px;
    background-color: white;
    width: 100%;
    /*box-shadow: 0px 11px 47px #0000000F;*/
    border-radius: 40px;
}

.mobile-years {
    position: relative;
}

.mobile-years.active .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
}

.mobile-years .item.current {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #99D7E3;
    color: white;
    border-radius: 31px;
    cursor: pointer;
    width: 100%;
    padding: 20px;
    font-family: 'FiraGO-Medium', sans-serif;
    font-size: 1.188rem;
    position: relative;
    z-index: 2;
}

.mobile-years .sub-menu .item {
    font-family: 'FiraGO-Medium', sans-serif;
    font-size: 1rem;
    display: block;
    color: #393838;
    margin: 20px 0;
}

.mobile-years .sub-menu a:last-child {
    margin: 0;
}


.mobile-years .sub-menu {
    -webkit-box-shadow: 0px 16px 48px rgb(0 0 0 / 24%);
    box-shadow: 0px 16px 48px rgb(0 0 0 / 24%);
    border-radius: 13px;
    position: absolute;
    left: 0;
    top: 30px;
    margin: 0;
    background-color: white;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transform: scaleY(.9);
    -moz-transform: scaleY(.9);
    -ms-transform: scaleY(.9);
    transform: scaleY(.9);
    transition: all 250ms ease;
    padding: 40px 20px 20px;
    width: -webkit-fill-available;
}

.years {
    display: flex;
}

.years .item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F8F9;
    border-radius: 31px;
    cursor: pointer;
    width: 43px;
    height: 73px;
    transition: width .2s, background-color .8s;
}

.years .item.active {
    width: 100%;
    background-color: #99D7E3;
    transition: width .5s, background-color .8s;
}


.years .item:not(:last-child) {
    margin-right: 20px;
}

.years .item .title {
    font-family: 'FiraGO-Medium', sans-serif;
    font-size: 1.188rem;
    transform: rotate(-90deg);
    color: #707070;
    opacity: 1;
    transition: .3s opacity .1s ease;
}

.years .item .second-title {
    text-align: center;
    white-space: nowrap;
    color: white;
    font-family: 'FiraGO-Medium', sans-serif;
    font-size: 1.188rem;
    opacity: 0;
    overflow: hidden;
}

.years .item.active .second-title {
    transition: .3s opacity .1s ease;
    opacity: 1;
}

.years .item.active .title {
    display: none;
    opacity: 0;
}

.greeting-logo {
    position: relative;
    bottom: 83px;
}

.info-box {
    background-color: #F5F8F9;
    border-radius: 56px;
    padding: 30px;
    box-sizing: border-box;
    height: 100%;
    width: 49%;
    transition: width .5s ease, height .2s ease;
    position: relative;
}


.info-box p {
    color: #4A4A4A;
    font-family: 'FiraGO-Book', sans-serif;
    font-size: 1rem;
    margin-bottom: 20px;
}

.action-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-buttons button {
    background-color: #99D7E3;
    border-radius: 31px;
    border: 0;
    outline: 0;
    width: 130px;
    height: 50px;
    display: flex;
    align-items: center;
    touch-action: manipulation;
    justify-content: center;
    color: white;
    font-family: 'FiraGO-Medium', sans-serif;
    font-size: 1.188rem;
    cursor: pointer;
    transition: background-color .2s ease;
}

.action-buttons button:hover {
    background-color: #8dccd9;
}

.info-box .content {
    display: -webkit-box;
    -webkit-line-clamp: 20;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-box .see-more {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-family: 'BPG Nino Mtavruli Bold', sans-serif;
    color: #53647A;
    border: 1px solid #E7F0F3;
    border-radius: 25px;
    background-color: white;
    padding: 18px 32px;
    margin-left: auto;
    font-size: 0.9375rem;
    cursor: pointer;
}

.info-box .see-more:hover img {
    filter: invert(37%) sepia(94%) saturate(1781%) hue-rotate(182deg) brightness(109%) contrast(104%);
}

.info-box .see-more img {
    transition: filter .2s ease;
}

.greeting-info.opened .info-box {
    width: 100%;
}


.greeting-info.opened .see-more span {
    display: none;
}

.greeting-info.opened .see-more img {
    margin: 0 !important;
    transform: rotate(180deg);
}

.greeting-info .see-more img {
    transition: transform .3s ease;
}


.info-box .bold {
    font-family: 'BPG Nino Mtavruli Bold', sans-serif;
    color: #393939;
    font-size: 1.125rem;
}

.greeting-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.greeting-photo {
    width: 49%;
    opacity: 1;
    transition: width .5s ease, opacity .3s;
}

.share-btn {
    float: right;
    position: relative;
}


.mother-info .row {
    box-sizing: border-box;
}

.mother-info .content .col-6 img {
    margin: .5rem !important;
    width: 100%;
}

.mother-info .content .col-xl-12 {
    display: block !important;
    height: 48%;
}

.mother-info .content .col-xl-12 img {
    height: 100%;
}

.mother-info .content .col-xl-12:first-child img {
    display: block;
    margin-right: auto;
}

.mother-info .content .col-xl-12:last-child img {
    display: block;
    margin-left: auto;
}


.greeting-info.opened .greeting-photo {
    width: 0;
    opacity: 0;
    transition: width .5s ease, opacity .3s;
}


.mousey {
    margin: 0 auto;
    width: 22px;
    height: 47px;
    border: 2px solid #425B81;
    border-radius: 18px;
    opacity: 0.75;
    box-sizing: content-box;
}

.scroller {
    margin: 5px auto;
    width: 10px;
    height: 23px;
    border-radius: 18px;
    background-color: #425B81;
    animation-name: scroll;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite;
}

@keyframes scroll {
    0% {
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}


.search {
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #F5F8F9;
    border-radius: 33px;
    width: 300px;
    height: 60px;
    padding: 4px;
    box-sizing: border-box;
}

.search input {
    padding-left: 12px;
    font-family: 'FiraGO-Book', sans-serif;
    background-color: transparent;
    border: 0;
    width: 100%;
    height: 100%;
    outline: none;
}

.search .btn {
    cursor: pointer;
    width: 90px;
    height: 46px;
    background-color: white;
    display: inline-flex;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0px 1px 8px #0000001A;
    border-radius: 27px;
    justify-content: center;
    align-items: center;
}

.search .btn:hover img {
    filter: invert(37%) sepia(94%) saturate(1781%) hue-rotate(182deg) brightness(109%) contrast(104%);
}

.mothers .box {
    text-align: center;
    margin-top: 3rem;
    padding: 0 20px;
}

.mothers .box .photo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 21px 44px -26px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 21px 44px -26px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 21px 44px -26px rgba(0, 0, 0, 0.75);
    border-radius: 37px;
    bottom: 0;
    transition: bottom .2s ease;
}


.mothers .box .photo-wrapper img:nth-child(2) {
    width: 100%;
    border-radius: 37px
}

.mothers .box .photo-wrapper .main-photo {
    position: absolute;
    z-index: 1;
    width: 120px;
}


.mothers .box:hover .photo-wrapper {
    bottom: -10px;
}

.mothers .box .content {
    text-align: left;
    background: transparent linear-gradient(181deg, #FFFFFF 0%, #F4F7F8 100%) 0% 0% no-repeat padding-box;
    border-bottom-left-radius: 46px;
    border-bottom-right-radius: 46px;
    padding: 30px 35px;
}

.mothers .box .title {
    font-family: 'BPG Nino Mtavruli Bold', sans-serif;
    color: #100F0F;
    font-size: 1.375rem;
}

.mothers .box .text {
    font-family: 'FiraGO-Book', sans-serif;
    color: #4A4A4A;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 130%;
}


.load-more {
    display: block;
    margin: 0 auto;
    outline: none;
    border: 0;
    color: white;
    font-size: 1.188rem;
    font-family: 'BPG Nino Mtavruli Bold', sans-serif;
    padding: 20px 80px;
    background: #00A2FF 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 17px #00A2FF40;
    border-radius: 35px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.load-more:hover {
    background-color: #0095ff;
}

.mother-info {
    background-color: #F5F8F9;
    border-radius: 56px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.mother-info .content {
    padding: 30px 136px 70px;
}

.mother-info .mother-name {
    font-family: 'BPG Nino Mtavruli Bold', sans-serif;
    font-size: 1.6875rem;
    color: #3A3A3A;
    font-weight: unset;
}

.mother-info .text {
    font-family: 'FiraGO-Book', sans-serif;
    color: #545454;
}

.mother-info .prev-btn, .next-btn {
    background-color: white;
    border-radius: 41px;
    padding: 100px 20px;
    cursor: pointer;
    box-shadow: 0px 0px 28px #2B2B2B0D;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
}

.mother-info .prev-btn img, .mother-info .next-btn img {
    height: 42px;
    filter: invert(88%) sepia(6%) saturate(285%) hue-rotate(146deg) brightness(102%) contrast(90%);
    transition: filter .2s ease;
}

.mother-info .prev-btn:hover img, .mother-info .next-btn:hover img {
    filter: invert(66%) sepia(55%) saturate(6289%) hue-rotate(173deg) brightness(95%) contrast(117%);
}


.mother-info .next-btn img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.mother-info .next-btn {
    right: -32px;
}

.mother-info .prev-btn {
    left: -32px;
}

.first-paper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/assets/2022/images/pattern.png');
    padding: 0 !important;
}

.first-paper .main-photo {
    position: absolute;
    z-index: 1;
    width: 182px;

}


@media screen and (min-width: 1399px) {
    .info-box {
        height: 611px;
    }
}

@media screen and (max-width: 1399px) {

    .years .item .second-title {
        font-size: .9rem;
    }

    .mothers .box .photo-wrapper .main-photo {
        width: 100px;
    }

    .greeting-logo {
        bottom: 77px;
    }

    .greeting-info {
        transition: height .2s ease;
    }

    .greeting-info.opened .info-box .content {
        -webkit-line-clamp: 18;
    }

    .info-box .content {
        -webkit-line-clamp: 17;
    }

    .greeting-info.opened .info-box {
        height: 620px;
    }

    .info-box {
        height: 519px;
    }

}

@media screen and (max-width: 1199px) {

    .book-section .container {
        width: 700px !important;
        height: 350px !important;
    }


    .mothers .box .photo-wrapper .main-photo {
        width: 130px;
    }

    .greeting-logo {
        bottom: 85px;
    }

    .navbar .logo {
        width: 130px;
    }

    .info-box {
        height: 427px;
    }

    .info-box .content {
        -webkit-line-clamp: 12;
    }

    .greeting-info.opened .info-box .content {
        -webkit-line-clamp: 50;
    }

    .greeting-info.opened .info-box {
        height: 680px;
    }
}

@media screen and (max-width: 991px) {

    .action-buttons {
        margin-bottom: 40px;
    }

    .action-buttons button {
        width: 130px;
        height: 50px;
    }

    .book-section .container {
        width: 480px !important;
        height: 240px !important;
    }

    .mother-info .content {
        padding: 50px;
    }

    .mother-info .prev-btn, .next-btn {
        padding: 70px 12px;
    }

    .mother-info .prev-btn {
        left: -22px;
    }

    .mother-info .next-btn {
        right: -22px;
    }

    .mothers .box .photo-wrapper .main-photo {
        width: 86px;
    }

    .greeting-info {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .greeting-info {
        height: auto !important;
    }

    .greeting-info .info-box, .greeting-info .greeting-photo {
        width: 100%;
    }

    .greeting-info .info-box {
        height: 100%;
    }

    .greeting-info .info-box .content {
        display: unset;
    }

}

@media screen and (max-width: 767px) {

    .mother-info .book-section .container {
        width: 65vw !important;
        height: 40vw !important;
    }

    .first-paper .main-photo {
        width: 47%;
    }

    .mother-info .arrows {
        display: none;
    }

    .greeting-logo {
        bottom: 72px;
    }

    .mothers .box .photo-wrapper .main-photo {
        width: 34%;
    }

}

@media screen and (max-width: 575px) {

    .first-paper .main-photo {
        width: 47%;
    }

    .page {
        padding: 30px;
    }

    .greeting-logo {
        bottom: 14vw;
    }

    .load-more {
        width: 100%;
        padding: 0;
        height: 60px;
    }

}

@media screen and (max-width: 400px) {

    .greeting-logo {
        bottom: calc(13.5vw + 3%);
    }
}

@media screen and (max-width: 350px) {
    .greeting-logo {
        bottom: calc(13.5vw + 5%);
    }
}