.modal-content {
background: #F7F6F2;
}
/* Removing .build-pit to make it work on other pages*/
.modal-fullscreen .modal-body {
overflow-y: unset;
}
/* Removing .build-pit to make it work on other pages*/
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, 0px);
}
/* Removing .page-template-build-pit to make it work on other pages*/
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #F7F6F2;
}
/* Removing .page-template-build-pit to make it work on other pages*/
.modal-backdrop.show {
opacity: 1;
}
/* Removing .page-template-build-pit to make it work on other pages*/
.fade {
transition: opacity 0.25s linear;
}
.modal-progress-bar {
width: 100%;
z-index: 1;
position: fixed;
}
.modal-progress-bar ul {
width: 100%;
height: 6px;
background: #ffeaf3;
z-index: 1;
}
.modal-progress-bar.start-bar {
z-index: -1;
opacity: 0;
}
.modal-progress-bar.start-bar.active {
background: #F7F6F2;
z-index: 2;
opacity: 1;
}
.steps-counter {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: rgba(0, 0, 0, 0.8);
}
.steps-counter {
display: block;
}
.outdoor-pit .steps-counter {
display: none;
}
.steps-counter.outdoor-steps-counter {
display: none;
}
.outdoor-pit .steps-counter.outdoor-steps-counter {
display: block;
}
.contact-expert {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 130%;
text-align: right;
color: rgba(53, 53, 53, 0.8);
max-width: 152px;
padding-right: 15px;
}
@media (min-width: 768px) {
.contact-expert {
max-width: 215px;
display: none !important;
}
}
.contact-expert a {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 130%;
text-align: right;
text-decoration-line: underline;
color: #C74428;
}
.contact-expert span:before {
content: url("data:image/svg+xml;utf8,");
position: relative;
top: 10px;
right: 5px;
}
.modal-header {
border-bottom: 0px solid transparent;
position: fixed;
left: auto;
right: 20px;
z-index: 9;
}
.modal-body h3 {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 125%;
text-align: center;
letter-spacing: -0.02em;
color: #171717;
}
@media (min-width:768px) {
.modal-body h3 {
font-size: 32px;
}
}
@media (min-width:992px) {
.modal-body h3 {
font-size: 36px;
}
}
.pit-modal-menu {
min-width: 10rem;
padding: 0.5rem 0;
margin: 5px 0 0;
list-style: none;
background-clip: padding-box;
position: relative;
}
.modal:not(.modal-step-start) .pit-modal-menu .menu-image {
height: 210px;
}
.pit-modal-menu .material-image {
border-radius: 10px;
}
.pit-modal-menu .menu-image-title-below.menu-image-not-hovered>img,
.pit-modal-menu .menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper,
.pit-modal-menu .menu-image-title-below .menu-image-hover-wrapper {
padding-bottom: 0px;
margin: auto !important;
position: relative;
display: flex;
min-height: 210px;
width: 100%;
justify-content: center;
align-items: center;
position: unset;
background: #F6F1EA;
border: 1px solid #F0E6D9;
border-radius: 10px;
}
.pit-modal-menu .dropdown-item>span {
display: flex;
flex-direction: column;
max-width: 100%;
min-height: 10px;
align-items: center;
margin: auto;
justify-content: flex-start;
height: 100%;
position: relative;
}
.pit-modal-menu .menu-item .hovered-image {
height: 210px;
width: 100%;
opacity: 0;
border: 1px solid #F0E6D9;
border-radius: 10px;
object-fit: cover;
}
.pit-modal-menu .menu-item:hover .hovered-image {
opacity: 1;
}
.modal-step-start .pit-modal-menu .menu-item:hover .dropdown-item:not(.hover-none) .menu-image,
.modal-step-size .pit-modal-menu .menu-item:hover .dropdown-item:not(.hover-none) .menu-image {
opacity: 1;
}
@media (min-width: 992px) {
.modal-step-start .pit-modal-menu .menu-item:hover .dropdown-item:not(.hover-none) .menu-image,
.modal-step-size .pit-modal-menu .menu-item:hover .dropdown-item:not(.hover-none) .menu-image {
opacity: 0;
}
}
.pit-modal-menu .dropdown-item:hover,
.pit-modal-menu .dropdown-item:focus {
background-color: transparent;
}
.pit-modal-menu .dropdown-item .menu-image-title {
padding: 12px 10px;
margin-bottom: 0;
margin-top: 0;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-align: center;
color: rgba(23, 23, 23, 0.8);
border: none;
background: 0;
display: flex;
flex-direction: column;
}
.pit-modal-menu input.menu-radio-check {
position: absolute;
opacity: 0;
}
/*
.pit-modal-menu input.menu-radio-check:checked+label.menu-image-hovered.menu-image-title-below:not(.this-unchecking) .menu-image-hover-wrapper img {
background: #FFF;
border: 3px solid #C74428;
border-radius: 10px;
}
.modal.modal-step-start .pit-modal-menu input.menu-radio-check:checked+label.menu-image-hovered.menu-image-title-below:not(.this-unchecking) .menu-image-hover-wrapper img {
background: #FFF;
border: 3px solid #C74428;
border-radius: 10px;
}*/
.modal .pit-modal-menu input.menu-radio-check:checked+label.menu-image-hovered.menu-image-title-below:not(.this-unchecking) .menu-image-hover-wrapper img {
background: #FFF;
border: 3px solid #C74428;
border-radius: 10px;
}
.ui-checkboxradio-icon,
.ui-checkboxradio-icon-space {
display: none !important;
}
.pit-modal-menu input.menu-radio-check:checked+label .item-pit-title,
.pit-modal-menu input.menu-radio-check:checked+label .menu-image-title {
font-weight: 600;
}
.step--next-wrap {
right: 40px;
top: 0;
bottom: 0;
height: 30px;
margin: auto;
border: none;
opacity: 0;
z-index: 2;
}
.step--back-wrap {
left: 20px;
top: 0;
bottom: 0;
height: 30px;
margin: auto;
border: none;
opacity: 1;
z-index: 2;
}
.step--next-wrap.visible {
opacity: 1;
z-index: 2;
}
.step--next-wrap.always-visible {
opacity: 1 !important;
z-index: 2 !important;
}
.btn-step {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 14px;
color: #C74428;
height: 30px;
display: flex;
align-items: center;
cursor: pointer;
}
.btn-back-build-step {
color: rgba(23, 23, 23, 0.7);
}
.btn-next-build-step::after {
content: url("data:image/svg+xml;utf8,");
margin-left: 10px;
}
.btn-back-build-step::before {
content: url("data:image/svg+xml;utf8,");
margin-right: 10px;
transform: rotate(180deg);
}
@media (min-width: 768px) {
.btn-step {
font-size: 16px;
line-height: 16px;
}
.btn-next-build-step::after {
content: url("data:image/svg+xml;utf8,");
}
.btn-back-build-step::before {
content: url("data:image/svg+xml;utf8,");
}
}
.item-pit-title {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 128%;
text-align: center;
color: #171717;
white-space: normal;
}
.item-price {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 128%;
text-align: center;
color: rgba(23, 23, 23, 0.8);
}
.ajax-wrap .item-price {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 128%;
text-align: center;
color: #C74428;
}
.inner-item .item-pit-title {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 128%;
text-align: center;
color: #171717;
}
.ajax-wrap .inner-item .item-price {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 128%;
text-align: center;
color: #C74428;
}
/*
.more-info {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 2;
color: #C74428;
cursor: pointer;
text-decoration: underline;
}*/
.more-info {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 2;
color: #C74428;
cursor: pointer;
text-decoration: none;
/* Remove the underline */
border: 2px solid #C74428;
/* Add a red outline */
background-color: transparent;
/* Set the background to transparent */
padding: 5px 10px;
/* Add some padding for better appearance */
display: inline-block;
/* Make it an inline-block element to apply the padding and border */
text-align: center;
/* Center the text within the button */
border-radius: 5px;
/* Add rounded corners */
}
.more-info.disabled {
color: #999;
/* Change the text color to a lighter shade */
border-color: #999;
/* Change the border color to a lighter shade */
cursor: not-allowed;
/* Change the cursor to indicate it's disabled */
}
/*.more-info:before {
content: url('http://ironembers.com/wp-content/uploads/2022/09/info.svg');
position: absolute;
left: -20px;
top: 5px;
}*/
.accessory-optional {
display: none;
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.8);
background: #F0E6D9;
border: 1px solid #F0E6D9;
border-radius: 6px;
padding: 8px;
}
.pit-modal-menu.grill-menu .menu-image-title-below.menu-image-not-hovered>img,
.pit-modal-menu.grill-menu .menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper,
.pit-modal-menu.grill-menu .menu-image-title-below .menu-image-hover-wrapper {
padding-bottom: 0px;
margin: auto !important;
position: relative;
display: flex;
min-height: 180px;
width: 100%;
justify-content: center;
align-items: center;
position: unset;
background: #F6F1EA;
border: 1px solid #F0E6D9;
border-radius: 10px;
}
.pit-modal-menu.grill-menu .menu-item .hovered-image {
height: 180px;
width: 100%;
/*opacity: 0;*/
border: 1px solid #F0E6D9;
border-radius: 10px;
object-fit: cover;
}
.modal:not(.modal-step-start) .pit-modal-menu.grill-menu .menu-image {
height: 180px;
}
.pit-modal-menu.hidden-menu .menu-image-title-below.menu-image-not-hovered>img,
.pit-modal-menu.hidden-menu .menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper,
.pit-modal-menu.hidden-menu .menu-image-title-below .menu-image-hover-wrapper {
padding-bottom: 0px;
margin: auto !important;
position: relative;
display: flex;
min-height: 70px;
width: 100%;
justify-content: center;
align-items: center;
position: unset;
background: #F6F1EA;
border: 1px solid #F0E6D9;
border-radius: 10px;
}
.modal:not(.modal-step-start) .pit-modal-menu.hidden-menu .menu-image {
height: 70px;
}
@media (min-width: 992px) {
.pit-modal-menu.hidden-menu li {
width: 130px;
}
}
.pit-modal-menu.hidden-menu .item-pit-title {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 120%;
text-align: center;
color: rgba(23, 23, 23, 0.8)
}
.pit-modal-menu.hidden-menu .item-price {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 130%;
text-align: center;
color: rgba(23, 23, 23, 0.8);
}
.hidden-menu {
opacity: 0;
}
.hidden-menu {
opacity: 0;
margin-top: -180px;
z-index: -1;
transition: margin-top 0.5s, opacity 0s;
}
.hidden-menu.visible {
opacity: 1;
margin-top: 0px;
z-index: 9;
transition: margin-top 0.5s, opacity 0.8s;
}
.hidden-menu.visible {
opacity: 1;
}
.modal-footer {
display: none;
}
.modal-footer.visible {
display: flex;
height: 65px;
z-index: 1111;
opacity: 1;
background: #F7F6F2;
border-bottom: 1px solid #dee2e6;
box-shadow: 0px -4px 15px rgba(219, 214, 196, 0.32);
}
.modal-footer:not(.visible) .items-amount>span {
display: none;
}
@media (min-width: 768px) {
.modal-footer {
opacity: 0;
z-index: -1;
}
.modal-footer.visible {
height: 95px;
z-index: 1111;
opacity: 1;
}
}
#modalFooter.items-wrap {
width: calc(100% - 220px);
overflow-x: overlay;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
transition: all 0.2s;
transform: scale(1);
will-change: transform;
user-select: none;
cursor: pointer;
/*padding-right: 220px;*/
}
.items-wrap.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
#modalFooter.items-wrap::-webkit-scrollbar {
width: 0;
}
.ajax-wrap {
margin-bottom: 65px;
}
@media (min-width: 768px) {
.ajax-wrap {
margin-bottom: 95px;
}
}
.hover-none .hovered-image {
display: none;
}
.total-title {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 33px;
color: #171717;
}
.total-material-title {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: rgba(23, 23, 23, 0.8);
}
.accessories-list {
min-height: 200px;
border-bottom: 1px solid rgba(102, 102, 102, 0.4);
}
.item-price.total-price {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 33px;
color: #171717;
}
.btn-secondary.btn-white {
border: 1px solid #171717;
border-radius: 6px;
background: transparent;
color: #171717;
}
.form-group input,
.form-group textarea {
background: transparent;
}
.modal-footer-item {
min-width: 180px;
width: 180px;
display: flex;
order: 15;
align-items: center;
}
.modal-footer-item .menu-image {
width: 100%;
height: auto;
max-height: 80px;
object-fit: cover;
height: 80px;
border-radius: 10px;
}
.modal-footer-item .item-pit-title {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 11px;
line-height: 140%;
color: rgba(23, 23, 23, 0.8);
max-height: 30px;
overflow: hidden;
}
.modal-footer-item .item-price {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 11px;
line-height: 16px;
color: #171717;
}
.pit-modal-menu .menu-image-hovered.menu-image-title-below .modal-footer-item .menu-image-hover-wrapper,
.pit-modal-menu .menu-image-title-below .modal-footer-item .menu-image-hover-wrapper {
min-height: 1px;
}
.modal-footer-item .menu-image-hover-wrapper {
padding-bottom: 0px;
margin: auto !important;
position: relative;
display: flex;
min-height: 10px;
width: 100%;
justify-content: center;
align-items: center;
position: unset;
background: #F6F1EA;
border: 1px solid #F0E6D9;
border-radius: 10px;
max-height: 80px;
}
.items-digital,
.items-currency {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 44px;
text-align: right;
color: #171717;
}
.items-amount {
border-left: 0px solid transparent;
height: 100%;
display: flex;
justify-content: start;
align-items: center;
max-height: 90px;
background: linear-gradient(90deg, rgba(247, 246, 242, 0.95), #F7F6F2);
box-shadow: -10px 6px 10px rgba(247, 246, 242, 0.96);
min-width: 190px;
}
@media (min-width: 768px) {
.items-amount {
border-left: 0px solid rgba(107, 107, 107, 0.4);
min-width: 220px;
}
}
.items-title {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: rgba(23, 23, 23, 0.8);
padding-top: 10px;
}
.items-slider {
overflow-x: hidden;
}
.accessories-list .item-size,
.accessories-list .item-material {
display: none !important;
}
.accessories-list .modal-footer-item {
min-width: 100px;
width: 100px;
display: flex;
flex-direction: column;
}
.accessories-list .modal-footer-item .col-6 {
width: 100%;
}
.icon-edit {
cursor: pointer;
background: url(https://ironembers.com/wp-content/uploads/2022/10/edit.svg) no-repeat;
width: 17px;
height: 17px;
background-size: cover;
opacity: 0;
}
.icon-trash {
cursor: pointer;
background: url(https://ironembers.com/wp-content/uploads/2022/10/trash.svg) no-repeat;
width: 17px;
height: 17px;
background-size: cover;
opacity: 0;
}
.modal-footer-item:hover .icon-edit,
.modal-footer-item:hover .icon-trash {
opacity: 1;
}
/* More Details Size */
.modal-details-wrap {
margin: auto !important;
}
.in-modal {
position: fixed;
background: rgba(23, 23, 23, 0.6);
top: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
z-index: 9;
}
.modal-details-wrap .slick-list.draggable {
overflow: visible;
}
.modal-details-wrap .text-image-grid.slick-slide .block-overlay {
background: rgb(0, 0, 0, 0.5);
border-radius: 10px;
z-index: 9;
transition: z-index 0.5s;
}
.modal-details-wrap .text-image-grid.slick-slide.slick-current .block-overlay {
z-index: -1;
transition: z-index 0.5s;
}
.text-image-grid img.image-content {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
max-height: 430px;
height: 430px;
}
.text-image-grid .end-content {
background: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.text-image-grid .text-content {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.modal-details-wrap .slick-prev {
left: 10px;
z-index: 99;
transform: rotate(180deg);
}
.modal-details-wrap .slick-prev:before {
content: url("data:image/svg+xml;utf8,") !important;
position: absolute;
top: 0;
bottom: 0;
}
.modal-details-wrap .slick-next {
right: 10px;
z-index: 99;
}
.modal-details-wrap .slick-next:before {
content: url("data:image/svg+xml;utf8,") !important;
position: absolute;
top: 0;
bottom: 0;
}
.modal-details-wrap .slick-dots li button:before {
font-family: slick;
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: #fff !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.modal-details-wrap .slick-dots {
bottom: -40px;
}
.modal-details-wrap .slick-dots li {
width: 10px;
height: 10px;
}
.modal-details-wrap h3 {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 113%;
color: #171717;
}
.modal-details-wrap h5 {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 140%;
color: rgba(23, 23, 23, 0.8);
}
.modal-details-wrap h6 {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 130%;
color: rgba(23, 23, 23, 0.6);
}
.modal-details-wrap p {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 130%;
color: rgba(23, 23, 23, 0.7);
margin: 0;
}
.modal-details-wrap hr {
background: rgba(102, 102, 102, 0.4);
margin-top: 0.3rem;
margin-bottom: 0.3rem;
}
@media (min-width: 768px) {
.modal-details-wrap p {
font-size: 14px;
line-height: 150%;
}
.modal-details-wrap h5 {
font-size: 16px;
line-height: 150%;
}
.modal-details-wrap h6 {
font-size: 16px;
line-height: 150%;
}
.modal-details-wrap hr {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}
.btn-close.inner-close {
position: absolute;
top: 15px;
right: 20px;
}
.btn-close.inner-close {
box-sizing: content-box;
width: 12px;
height: 12px;
padding: 0.25em 0.25em;
color: #C74428;
background: transparent url("data:image/svg+xml,") center / 1em auto no-repeat;
border: 0;
border-radius: 0;
opacity: 1;
}
.add-blur .pit-modal-menu,
.add-blur .modal-body>h3,
.add-blur .modal-body>p,
.add-blur .modal-body .more-info,
.add-blur .modal-footer,
.add-blur .modal-header,
.add-blur .accessory-optional,
.add-blur .start-bar,
.add-blur .modal-button {
filter: blur(3px);
z-index: -1;
}
.add-blur .modal-footer {
border: none;
box-shadow: none;
}
.add-blur .modal-footer-overlay {
background: rgba(23, 23, 23, 0.6);
display: block !important;
}
.add-blur .modal-footer>* {
margin: 1px;
}
#stepPost .form-wrap {
margin: auto;
height: 100%;
z-index: -1;
visibility: hidden;
opacity: 0;
transition: opacity 0.4s;
}
#stepPost .form-wrap.active {
z-index: 9;
visibility: visible;
opacity: 1;
transition: opacity 0.4s;
}
.zip-wrap {
padding-left: 12px;
}
.error:not(.hs-input) {
font-size: 12px;
color: #C74428;
position: absolute;
white-space: nowrap;
bottom: -40px;
display: none;
}
.error.active:not(.hs-input) {
display: block;
}
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
cursor: not-allowed;
pointer-events: all;
}
label[data-holder] {
z-index: 9;
position: relative;
}
.inner-row-hidden {
opacity: 0;
margin-top: -180px;
z-index: -1;
transition: margin-top 0.5s, opacity 0s;
}
.modal:not(.modal-step-start) .pit-modal-menu input.menu-radio-check:checked~.inner-row-hidden {
opacity: 1;
margin-top: 0px;
z-index: 9;
transition: margin-top 0.5s, opacity 0.8s;
}
.modal:not(.modal-step-start) .pit-modal-menu input.menu-radio-check:checked+label.this-unchecking+div.inner-row-hidden {
opacity: 0;
margin-top: -180px;
z-index: -1;
transition: margin-top 0.5s, opacity 0s;
}
@keyframes nextarrow {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-20px);
opacity: 1;
}
}
@-webkit-keyframes nextarrow {
0% {
-webkit-transform: translateX(0);
opacity: 1
}
100% {
-webkit-transform: translateX(-20px);
opacity: 1
}
}
.modal-button .btn-next-build-step {
-webkit-animation: nextarrow 1.2s infinite alternate ease-in-out;
}
.modal-button .btn-next-build-step:hover {
opacity: 1;
}
.accessories-list .items-slider {
width: calc(100%);
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
transition: all 0.2s;
transform: scale(1);
will-change: transform;
user-select: none;
cursor: pointer;
padding-right: 65px;
}
.accessories-list .items-slider.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
.accessories-list .items-slider::-webkit-scrollbar {
width: 0;
}
.slider-gradient {
width: 65px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(90deg, rgba(247, 246, 242, 0.95), #F7F6F2);
box-shadow: -10px 6px 20px 10px rgba(247, 246, 242, 0.95);
}
.modal-details-wrap .slick-next.slick-disabled:before,
.modal-details-wrap .slick-prev.slick-disabled:before {
opacity: 0;
}
.menu-image {
border-radius: 10px;
}
/*
.modal:not(.modal-step-start) .pit-modal-menu input.menu-radio-check+label.menu-image-hovered.menu-image-title-below.this-checking .menu-image-hover-wrapper img {
background: #FFF;
border: 3px solid #C74428;
border-radius: 10px;
}*/
.modal-step-post #modalPostHTML img {
object-fit: cover;
object-position: center;
width: 100%;
}
/* Modal content styles */
.popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.4s;
}
.popup-container .hidden {
visibility: hidden;
}
.popup-inner {
background: #fff;
border-radius: 10px;
width: 80%;
max-width: 800px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
}
.popup-header {
display: flex;
justify-content: space-between;
width: 100%;
padding: 20px 20px 0 20px;
}
.popup-header h2 {
text-align: left;
margin: 0;
text-align: center;
}
.close-button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 1.5rem;
}
.popup-content {
position: relative;
display: flex;
width: 100%;
overflow: hidden;
min-height: 350px;
}
.popup-text {
padding: 20px 2rem 40px 20px;
display: flex;
flex-direction: column;
width: 50%;
justify-content: space-between;
margin-top: 0;
margin-bottom: 0;
}
.popup-content-button {
margin-top: 15px;
align-self: center;
}
.popup-image--container {
width: 70%;
position: relative;
overflow: hidden;
}
.popup-image {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
object-position: left bottom;
border-bottom-right-radius: 10px;
}
@media screen and (max-width: 850px) {
.popup-header h2 {
text-align: center;
}
.popup-inner {
border-radius: 10px;
}
.popup-content {
flex-direction: column;
align-items: center;
min-height: auto;
}
.popup-text {
width: 100%;
padding: 30px 20px 0 20px;
margin-bottom: 0;
}
.popup-image--container {
width: 100%;
height: auto;
padding: 0;
}
.popup-image {
position: static;
right: auto;
bottom: auto;
width: 100%;
min-height: auto;
max-height: none;
margin-top: 20px;
object-fit: cover;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
}
.summary-snippet--wrapper {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.summary-snippet-width {
width: 50%;
}
.summary-snippet--content {
display: flex;
align-items: center;
}
.summary-snippet--content img {
width: 85px;
}
.summary-snippet--content p {
margin: 0;
font-size: 0.85rem;
}
@media screen and (max-width: 850px) {
.summary-snippet--wrapper {
flex-direction: column;
}
.summary-snippet-width {
width: 100%;
}
}
/*
* Flip Animation
* ATAMMINGA 23.05.03
*/
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.menu-image-hover-wrapper {
perspective: 1000px;
position: relative;
display: inline-block;
}
.tile-flip .menu-image-hover-wrapper {
transition: transform 1s;
transform-style: preserve-3d;
}
.tile-flip .menu-image-hover-wrapper.flip {
transform: rotateY(180deg);
}
.tile-flip .menu-image,
.tile-flip .hovered-image {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.tile-flip .menu-image {
animation: fadeIn 0.5s forwards;
}
.tile-flip .menu-image-hover-wrapper.flip .menu-image {
animation: fadeOut 0.5s forwards;
}
.tile-flip .hovered-image {
transform: rotateY(180deg);
animation: fadeOut 0.5s forwards;
}
.tile-flip .menu-image-hover-wrapper.flip .hovered-image {
animation: fadeIn 0.5s forwards;
}