body.loaded { overflow-y: auto; } .overlay-2 { overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000000; } .overlay-2 .overlayDoor-2:before, .overlay-2 .overlayDoor-2:after { content: ""; position: absolute; width: 50%; height: 100%; background: #fff; -webkit-transition: 0.8s cubic-bezier(0.77, 0, 0.18, 1); -o-transition: 0.8s cubic-bezier(0.77, 0, 0.18, 1); transition: 0.8s cubic-bezier(0.77, 0, 0.18, 1); -webkit-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .overlay-2 .overlayDoor-2:before { left: 0; } .overlay-2 .overlayDoor-2:after { right: 0; } .overlay-2.loaded .overlayDoor-2:before { left: -50%; } .overlay-2.loaded .overlayDoor-2:after { right: -50%; } .overlay-2.loaded .overlayContent-2 { opacity: 0; visibility: hidden; margin-top: -15px; } .overlay-2 .overlayContent-2 { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1); -o-transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1); } .loader-2 { width: 128px; height: 128px; border: 3px solid #111; border-bottom: 3px solid transparent; border-radius: 50%; position: relative; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .loader-2 .inner-2 { width: 64px; height: 64px; border: 3px solid transparent; border-top: 3px solid #111; border-radius: 50%; -webkit-animation: spinInner 1s linear infinite; animation: spinInner 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spinInner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-720deg); transform: rotate(-720deg); } } @keyframes spinInner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-720deg); transform: rotate(-720deg); } } .header .darken { background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contentOther { background: #fff; width: 900px; margin: 0 auto; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); } .contentOther .video { height: 484px; width: 100%; border-radius: 5px; } .contentOther h1 { font-family: "Roboto"; margin: 0 0 10px 0; font-weight: 400; } .books { min-height: calc(100vh - 200px); margin-bottom: 40px; } .books__block { overflow: hidden; position: relative; } .books__back-img { border-radius: 20px 0 20px 0; max-width: 100%; } .bib-13 { width: 310px; height: 105px; position: absolute; right: 20px; top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(332deg); -ms-transform: rotate(332deg); transform: rotate(332deg); } .books__items { display: -webkit-box; display: -ms-flexbox; display: flex; } .bi-13 { width: 72px; left: 31px; top: -12px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: rotate(28deg); -ms-transform: rotate(28deg); transform: rotate(28deg); height: 105px; } .bi-13 img { position: relative; } .second { position: absolute; bottom: -7px; right: -15px; background-color: #e2d9cf; z-index: 10; height: 9px; width: 108%; } .books__item { overflow: hidden; display: block; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } .books__item img { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); overflow: hidden; max-height: 105px; } .bi13-1 { max-width: 28px; overflow: hidden; right: 50px; top: 35px; cursor: pointer; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .bi13-1:hover { right: 58px; max-width: 60px; } .bi13-2 { max-width: 28px; overflow: hidden; right: 30px; top: 24px; cursor: pointer; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .bi13-2:hover { right: 38px; max-width: 60px; } .bi13-3 { max-width: 28px; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); top: 13px; right: 10px; cursor: pointer; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .bi13-3:hover { right: 20px; max-width: 60px; } .bi13-4 { max-width: 20px; cursor: pointer; top: 5px; right: 0; -webkit-transition: all 0.3s; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi13-4:hover { right: 0px; max-width: 60px; } .bi-12 { width: 72px; left: 158px; top: -12px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: rotate(28deg); -ms-transform: rotate(28deg); transform: rotate(28deg); height: 105px; } .bi-12 img { position: relative; } .bi12-1 { max-width: 34px; overflow: hidden; right: 72px; top: 50px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi12-1:hover { right: 72px; max-width: 65px; } .bi12-2 { max-width: 34px; overflow: hidden; right: 48px; top: 37px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi12-2:hover { right: 48px; max-width: 65px; } .bi12-3 { max-width: 34px; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); top: 24px; right: 24px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi12-3:hover { right: 24px; max-width: 65px; } .bi12-4 { max-width: 25px; cursor: pointer; top: 10px; right: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi12-4:hover { right: 0px; max-width: 70px; } .fancybox__carousel.is-draggable .fancybox__slide, .fancybox__carousel.is-draggable .fancybox__slide .fancybox__content { cursor: pointer !important; } .bib-9 { width: 344px; height: 92px; position: absolute; right: -15px; top: 161px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(332deg); -ms-transform: rotate(332deg); transform: rotate(346deg); } .bi-9 { width: 72px; left: 33px; top: -13px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: rotate(14deg); -ms-transform: rotate(14deg); transform: rotate(14deg); height: 105px; } .bi-9 img { max-height: 95px; } .bi9-1 { max-width: 28px; overflow: hidden; right: 50px; top: 25px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi9-1:hover { right: 55px; max-width: 50px; } .bi9-2 { max-width: 28px; overflow: hidden; right: 30px; top: 20px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi9-2:hover { right: 38px; max-width: 50px; } .bi9-3 { max-width: 28px; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); top: 10px; right: 10px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi9-3:hover { right: 20px; max-width: 50px; } .bi9-4 { max-width: 20px; cursor: pointer; top: 5px; right: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi9-4:hover { right: 0px; max-width: 50px; } .bi9-5 { max-width: 28px; overflow: hidden; right: 70px; top: 30px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi9-5:hover { right: 75px; max-width: 50px; } .second2 { position: absolute; bottom: -9px; right: -41px; background-color: #e2d9cf; z-index: 10; -webkit-transform: rotate(0.1deg); -ms-transform: rotate(0.1deg); transform: rotate(0.1deg); height: 8px; width: 108%; } /* .fancybox__container, .has-image[data-image-fit="contain"] .fancybox__content, .has-image[data-image-fit="contain"] .fancybox__image, .has-image[data-image-fit="contain"], .fancybox__track { transition: 1s; } */ .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop, .fancybox__container.is-animated[aria-hidden=false] .fancybox__caption, .fancybox__container.is-animated[aria-hidden=false] .fancybox__nav, .fancybox__container.is-animated[aria-hidden=false] .carousel__dots, .fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close { -webkit-animation: 0.5s ease-out backwards fancybox-fadeIn; animation: 0.5s ease-out backwards fancybox-fadeIn; } .bi-9-2 { width: 72px; left: 150px; top: -23px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: rotate(14deg); -ms-transform: rotate(14deg); transform: rotate(14deg); height: 105px; } .bi-9-2 img { max-height: 105px; } .bi-9-3 { width: 72px; left: 268px; top: -38px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: rotate(14deg); -ms-transform: rotate(14deg); transform: rotate(14deg); height: 105px; } .bi-9-3 img { max-height: 120px; } .bii9-1 { top: 30px; max-width: 30px; right: 66px; } .bii9-1:hover { right: 70px; max-width: 65px; } .bii9-2 { top: 25px; max-width: 30px; right: 44px; } .bii9-2:hover { right: 50px; max-width: 60px; } .bii9-3 { top: 20px; max-width: 30px; right: 22px; } .bii9-3:hover { right: 25px; max-width: 60px; } .bii9-4 { top: 13px; max-width: 25px; } .bii9-4:hover { right: 0px; max-width: 55px; } .books__item-hidden { display: none; } .fancybox__thumb { background-color: rgba(0, 0, 0, 0) !important; } .fancybox__thumbs { height: 150px !important; } .carousel__viewport { height: 150px !important; } .carousel__track { height: 150px !important; } .fancybox__thumb { height: 85px; } .bib-8 { width: 344px; height: 105px; position: absolute; right: -15px; top: 271px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(0deg); } .bi-8 { width: 72px; left: 35px; top: 6px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-8 img { max-height: 90px; } .bi8-5 { max-width: 28px; overflow: hidden; right: 48px; top: 20px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi8-5 img { max-height: 82px; } .bi8-5:hover { right: 40px; max-width: 50px; } .bi8-1 { max-width: 28px; overflow: hidden; right: 34px; top: 18px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi8-1 img { max-height: 84px; } .bi8-1:hover { right: 30px; max-width: 50px; } .bi8-2 { max-width: 28px; overflow: hidden; right: 21px; top: 16px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi8-2 img { max-height: 86px; } .bi8-2:hover { right: 20px; max-width: 50px; } .bi8-3 { max-width: 28px; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); top: 14px; right: 7px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi8-3 img { max-height: 88px; } .bi8-3:hover { right: 10px; max-width: 50px; } .bi8-4 { max-width: 20px; cursor: pointer; top: 12px; right: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi8-4:hover { right: 0px; max-width: 50px; } .bi8-6 { max-width: 28px; overflow: hidden; right: 64px; top: 22px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi8-6 img { max-height: 82px; } .bi8-6:hover { right: 50px; max-width: 50px; } .bi-8-2 { width: 72px; left: 147px; top: -19px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-8-2 img { max-height: 105px; } .bi-8-2 .bi8-4 { top: 22px; } .bi-8-2 .bi8-4 img { max-height: 105px; } .bi-8-2 .bi8-3 { top: 24px; } .bi-8-2 .bi8-3:hover { right: 20px !important; } .bi-8-2 .bi8-3 img { max-height: 103px; } .bi-8-2 .bi8-2 { top: 26px; } .bi-8-2 .bi8-2:hover { right: 30px !important; } .bi-8-2 .bi8-2 img { max-height: 101px; } .bi-8-2 .bi8-1 { top: 28px; } .bi-8-2 .bi8-1:hover { right: 40px !important; } .bi-8-2 .bi8-1 img { max-height: 99px; } .bi-8-2 .bi8-5 { top: 30px; } .bi-8-2 .bi8-5:hover { right: 50px !important; } .bi-8-2 .bi8-5 img { max-height: 97px; } .bi-8-2 .bi8-6 { top: 32px; } .bi-8-2 .bi8-6:hover { right: 60px !important; } .bi-8-2 .bi8-6 img { max-height: 95px; } .bi-8-3 { width: 72px; left: 257px; top: -14px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-8-3 img { max-height: 120px; } .bi-8-3 .bi8-4 { top: 2px; } .bi-8-3 .bi8-4 img { max-height: 120px; } .bi-8-3 .bi8-3 { right: 10px; top: 4px; } .bi-8-3 .bi8-3:hover { right: 20px !important; } .bi-8-3 .bi8-3 img { max-height: 118px; } .bi-8-3 .bi8-2 { right: 30px; top: 6px; } .bi-8-3 .bi8-2:hover { right: 30px !important; } .bi-8-3 .bi8-2 img { max-height: 116px; } .bi-8-3 .bi8-1 { right: 48px; top: 8px; } .bi-8-3 .bi8-1:hover { right: 55px !important; } .bi-8-3 .bi8-1 img { max-height: 114px; } .bi-8-3 .bi8-5 { right: 70px; top: 10px; } .bi-8-3 .bi8-5:hover { right: 60px !important; } .bi-8-3 .bi8-5 img { max-height: 112px; } .bi-8-3 .bi8-6 { top: 12px; } .bi-8-3 .bi8-6:hover { right: 60px !important; } .bi-8-3 .bi8-6 img { max-height: 110px; } .bib-11 { width: 150px; height: 105px; position: absolute; right: 224px; top: 380px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-11 { width: 72px; left: 79px; top: -3px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-11 img { max-height: 90px; } .bi11-1 { max-width: 28px; overflow: hidden; right: 34px; top: 17px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi11-1 img { max-height: 82px; } .bi11-1:hover { right: 40px; max-width: 50px; } .bi11-2 { max-width: 28px; overflow: hidden; right: 21px; top: 17px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi11-2 img { max-height: 84px; } .bi11-2:hover { right: 30px; max-width: 50px; } .bi11-3 { max-width: 28px; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); top: 17px; right: 7px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi11-3 img { max-height: 86px; } .bi11-3:hover { right: 15px; max-width: 50px; } .bi11-4 { max-width: 20px; cursor: pointer; top: 17px; right: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi11-4:hover { right: 0px; max-width: 50px; } .bib-10 { width: 110px; height: 125px; position: absolute; right: 109px; top: 388px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-10 { width: 72px; left: 39px; top: 1px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-10 img { max-height: 115px; } .bi10-1 { left: 23px; top: 11px; width: 49px; transition: 0.3s; height: 107px; } .bi10-1:hover { transition: 0.3s; left: -7px; max-width: 50px; } .bi10-2 { max-width: 28px; overflow: hidden; right: 21px; top: 12px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi10-2 img { max-height: 107px; } .bi10-2:hover { right: 30px; max-width: 50px; } .bi10-3 { max-width: 28px; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); top: 12px; right: 7px; cursor: pointer; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .bi10-3 img { max-height: 111px; } .bi10-3:hover { right: 15px; max-width: 50px; } .bi10-4 { max-width: 20px; cursor: pointer; top: 12px; right: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi10-4:hover { right: 0px; max-width: 50px; } .bib-14 { z-index: 2; width: 110px; height: 155px; position: absolute; right: 0px; top: 390px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-14 { width: 72px; left: 39px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-14 img { max-height: 140px; } .bi14-1 { max-width: 20px; cursor: pointer; top: 12px; right: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi14-1:hover { right: 0px; max-width: 70px; } .ib14-1 { max-width: 100px; cursor: pointer; top: 6px; left: -23px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; } .ib14-1:hover { left: -30px; } .ib14-1 img { -webkit-transform: rotate3d(1, 1, 1, 355deg); transform: rotate3d(1, 1, 1, 355deg); -webkit-transform: rotate3d(2, 2, 20, 0deg); transform: rotate3d(2, 2, 20, 0deg); max-height: 120px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .bib-7 { z-index: 6; width: 110px; height: 100px; position: absolute; left: 64px; top: 126px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-7 { width: 72px; left: 39px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-7 img { max-height: 100px; } .bi7-1 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 20px; left: 20px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi7-1:hover { max-width: 70px; } .bi7-1:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi7-1 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-66%); -ms-transform: translateX(-66%); transform: translateX(-66%); } .bi7-2 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 12px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi7-2:hover { max-width: 70px; } .bi7-2:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi7-2 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .ib7-1 { max-width: 100px; cursor: pointer; top: 39px; left: 40px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .ib7-1:hover { left: 70px; } .ib7-1 img { max-height: 105px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .ib7-2 { max-width: 100px; cursor: pointer; top: 36px; left: 25px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .ib7-2:hover { left: 50px; } .ib7-2 img { max-height: 100px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .second3 { background-color: #cfc3b8; position: absolute; bottom: -21px; right: -114px; z-index: 10; -webkit-transform: rotate(13deg); -ms-transform: rotate(13deg); transform: rotate(13deg); height: 10px; width: 499px; } .second4 { background-color: #cfc3b8; position: absolute; bottom: 51px; right: -25px; z-index: 10; -webkit-transform: rotate(0.1deg); -ms-transform: rotate(0.1deg); transform: rotate(27deg); height: 10px; width: 499px; } .bib-6 { width: 110px; height: 100px; position: absolute; left: 173px; top: 53px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-6 { width: 72px; left: 39px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-6 img { max-height: 100px; } .bi6-2 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 42px; left: 45px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi6-2:hover { max-width: 70px; } .bi6-2:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi6-2 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .bi6-3 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 34px; left: 30px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .bi6-3:hover { max-width: 70px; } .bi6-3:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi6-3 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .bi6-4 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 26px; left: 15px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 4; } .bi6-4:hover { max-width: 70px; } .bi6-4:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi6-4 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .bi6-5 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 18px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 5; } .bi6-5:hover { max-width: 70px; } .bi6-5:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi6-5 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .bib-5 { width: 110px; height: 90px; position: absolute; left: 211px; top: 206px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-5 { width: 72px; left: -6px; top: -18px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-5 img { max-height: 100px; } .bi5-4 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 1px; left: 15px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi5-4:hover { max-width: 70px; } .bi5-4:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi5-4 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .bi5-5 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: -6px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi5-5:hover { max-width: 70px; } .bi5-5:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi5-5 img { -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; position: relative; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); } .ib5-4 { max-width: 100px; cursor: pointer; top: 26px; left: 22px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .ib5-4:hover { left: 50px; } .ib5-4 img { max-height: 80px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .ib5-5 { max-width: 100px; cursor: pointer; top: 20px; left: 7px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .ib5-5:hover { left: 25px; } .ib5-5 img { max-height: 84px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .second5 { background-color: #cfc3b8; position: absolute; bottom: 46px; right: 33px; z-index: 10; -webkit-transform: rotate(13deg); -ms-transform: rotate(13deg); transform: rotate(13deg); height: 10px; width: 499px; } .bib-3 { z-index: 5; width: 110px; height: 100px; position: absolute; left: -36px; top: 241px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-3 { z-index: 4; width: 72px; left: 37px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-3 img { max-height: 120px; } .ib3-4 { max-width: 100px; cursor: pointer; top: 16px; left: 16px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .ib3-4:hover { left: 50px; } .ib3-4 img { max-height: 120px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .ib3-5 { max-width: 100px; cursor: pointer; top: 18px; left: 1px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .ib3-5:hover { left: 50px; } .ib3-5 img { max-height: 120px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .bi-3-2 { width: 72px; left: 139px; top: 18px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; z-index: 3; } .bi-3-2 img { max-height: 120px; } .bi-3-2 .bi3-1 { max-width: 25px; max-width: 20px; cursor: pointer; top: 27px; left: 78px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi-3-2 .bi3-1 img { max-height: 95px; } .bi-3-2 .bi3-1:hover { max-width: 70px; } .bi-3-2 .bi3-1:hover img { -webkit-transform: translateX(-17%); -ms-transform: translateX(-17%); transform: translateX(-17%); } .bi-3-2 .bi3-1 img { left: 0; position: relative; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); } .bi-3-2 .bi3-2 { left: 60px; max-width: 25px; } .bi-3-2 .bi3-2 img { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); max-height: 100px; } .bi-3-2 .bi3-3 { left: 40px; max-width: 25px; } .bi-3-2 .bi3-3 img { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); max-height: 105px; } .bi-3-2 .bi3-4 { left: 20px; max-width: 25px; } .bi-3-2 .bi3-4 img { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); max-height: 110px; } .bi-3-2 .bi3-5 { max-width: 25px; } .bi-3-2 .bi3-5 img { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); max-height: 115px; } .bi3-2 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 23px; left: 45px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .bi3-2:hover { max-width: 70px; } .bi3-2:hover img { -webkit-transform: translateX(-17%); -ms-transform: translateX(-17%); transform: translateX(-17%); } .bi3-2 img { max-height: 115px; left: 0; position: relative; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-76%); -ms-transform: translateX(-76%); transform: translateX(-76%); } .bi3-3 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 18px; left: 30px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 4; } .bi3-3:hover { max-width: 70px; } .bi3-3:hover img { -webkit-transform: translateX(-17%); -ms-transform: translateX(-17%); transform: translateX(-17%); } .bi3-3 img { position: relative; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-76%); -ms-transform: translateX(-76%); transform: translateX(-76%); left: 0; } .bi3-4 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 13px; left: 15px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 5; } .bi3-4:hover { max-width: 70px; } .bi3-4:hover img { -webkit-transform: translateX(-17%); -ms-transform: translateX(-17%); transform: translateX(-17%); } .bi3-4 img { max-height: 125px; position: relative; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-76%); -ms-transform: translateX(-76%); transform: translateX(-76%); left: 0; } .bi3-5 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 8px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 6; } .bi3-5:hover { max-width: 70px; } .bi3-5:hover img { -webkit-transform: translateX(-17%); -ms-transform: translateX(-17%); transform: translateX(-17%); } .bi3-5 img { max-height: 130px; position: relative; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-76%); -ms-transform: translateX(-76%); transform: translateX(-76%); left: 0; } .bib-4 { width: 110px; height: 90px; position: absolute; left: 174px; top: 290px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-4 { width: 72px; left: 37px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; z-index: 2; } .bi-4 img { max-height: 120px; } .bi4-2 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 10px; left: 45px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi4-2:hover { max-width: 70px; } .bi4-2:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi4-2 img { max-height: 78px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); left: 0; } .bi4-3 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 8px; left: 30px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .bi4-3:hover { max-width: 70px; } .bi4-3:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi4-3 img { max-height: 80px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); left: 0; } .bi4-4 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: 3px; left: 15px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 4; } .bi4-4:hover { max-width: 70px; } .bi4-4:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi4-4 img { max-height: 85px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); left: 0; } .bi4-5 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: -2px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 5; } .bi4-5:hover { max-width: 70px; } .bi4-5:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi4-5 img { max-height: 90px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); left: 0; } .bib-1 { z-index: 5; width: 110px; height: 100px; position: absolute; left: -35px; top: 398px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-1 { width: 72px; left: 37px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-1 img { max-height: 120px; } .bi-1-2 { width: 72px; left: 137px; top: -6px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; -webkit-transform: rotate(359deg); -ms-transform: rotate(359deg); transform: rotate(359deg); } .bi-1-2 img { max-height: 110px; } .bi-1-2 .bi1-1 { max-width: 25px; cursor: pointer; top: 8px; left: 78px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi-1-2 .bi1-1 img { max-height: 95px; } .bi-1-2 .bi1-1:hover { max-width: 70px; } .bi-1-2 .bi1-1:hover img { -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } .bi-1-2 .bi1-1 img { position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); left: 0; } .bi-1-2 .bi1-2 img { max-height: 100px; } .bi-1-2 .bi1-3 img { max-height: 105px; } .bi-1-2 .bi1-4 img { max-height: 110px; } .bi-1-2 .bi1-5 img { max-height: 115px; } .bi1-2 { max-width: 25px; cursor: pointer; top: 8px; left: 60px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .bi1-2:hover { max-width: 70px; } .bi1-2:hover img { -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } .bi1-2 img { max-height: 115px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); left: 0; } .bi1-3 { max-width: 25px; cursor: pointer; top: 8px; left: 40px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 4; } .bi1-3:hover { max-width: 70px; } .bi1-3:hover img { -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } .bi1-3 img { position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); left: 0; } .bi1-4 { max-width: 25px; cursor: pointer; top: 8px; left: 20px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 5; } .bi1-4:hover { max-width: 70px; } .bi1-4:hover img { -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } .bi1-4 img { max-height: 125px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); left: 0; } .bi1-5 { max-width: 25px; cursor: pointer; top: 8px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 6; } .bi1-5:hover { max-width: 70px; } .bi1-5:hover img { -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } .bi1-5 img { max-height: 130px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); left: 0; } /* Другая стенка */ .ib1-1 { max-width: 100px; cursor: pointer; top: -2px; left: 16px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .ib1-1:hover { left: 50px; } .ib1-1 img { max-height: 120px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } /* Другая стенка */ .bib-2 { width: 110px; height: 100px; position: absolute; left: 208px; top: 341px; top: 390px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .bi-2 { width: 72px; left: 3px; top: 5px; position: absolute; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 105px; } .bi-2 img { max-height: 120px; } .bi2-4 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: -1px; left: 15px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi2-4:hover { max-width: 70px; } .bi2-4:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi2-4 img { max-height: 85px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); left: 0; } .bi2-5 { /* transform: scale(-1, 1); */ max-width: 20px; cursor: pointer; top: -1px; left: 0; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .bi2-5:hover { max-width: 70px; } .bi2-5:hover img { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .bi2-5 img { max-height: 90px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; -webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); transform: translateX(-68%); left: 0; } .ib2-4 { max-width: 100px; cursor: pointer; /*top: -4px;*/ top: 4px; left: 16px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 2; } .ib2-4:hover { left: 50px; } .ib2-4 img { max-height: 80px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .ib2-5 { max-width: 100px; cursor: pointer; /*top: -1px;*/ top: 5px; left: 0px; -webkit-transition: all 0.3s 0.2s; -o-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; overflow: hidden; z-index: 3; } .ib2-5:hover { left: 20px; } .ib2-5 img { max-height: 82px; position: relative; left: 0; -webkit-transition: 0.3s 0.2s; -o-transition: 0.3s 0.2s; transition: 0.3s 0.2s; } .books__russia { position: absolute; right: 118px; bottom: 173px; } .books__russia img { height: 110px; } .books__grom { position: absolute; left: 103px; top: 48px; overflow: hidden; max-height: 89px; width: 120px; -webkit-transform: rotate(28deg); -ms-transform: rotate(28deg); transform: rotate(28deg); } .books__grom img { -webkit-transform: rotate(343deg); -ms-transform: rotate(343deg); transform: rotate(343deg); -webkit-transform: rotate(337deg); -ms-transform: rotate(337deg); transform: rotate(337deg); height: 110px; } .bib-10 { z-index: 2; } .bib-11 { z-index: 2; } .bi-10 { z-index: 2; } .bi-10 .books__item { z-index: 2; } .bib-4 { width: 110px; height: 90px; position: absolute; left: 174px; top: 290px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(248deg); -ms-transform: rotate(332deg); transform: rotate(1deg); } .fancybox__thumbs { bottom: 10px; } .fancybox__caption { position: relative; top: 20px; color: #111; font-weight: 700; } .fancybox__caption::first-letter { text-transform: uppercase; } .fancybox__backdrop { background-color: rgba(235, 235, 235, 0.6); } /* .carousel__track { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } */ .bib-4 { z-index: 20; } .bib-3 { z-index: 30; } .fancybox__thumbs { position: relative; } .fancybox__thumbs::before { content: "Книги в данном цикле"; position: absolute; z-index: 5; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: -30px; color: #111; font-weight: 700; } .carousel__button.is-prev { right: auto !important; left: 40px !important; } .carousel__button.is-prev svg { /* -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); */ stroke: #3a3a3a !important; } .carousel__button.is-next { left: auto !important; right: 40px !important; fill: #3a3a3a; } .carousel__button.is-next svg { /* -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); */ stroke: #3a3a3a !important; } .books__back-img.mobile { display: none; } @media (max-width: 1215px) { .overlay-2{display: none;} .books__back-img { display: none; } .books__back-img.mobile { display: block; } .books__items-block { display: none; } .books__russia { display: none; } .books__grom { display: none; } }