/* Constructor .constructor-page-title h1 { text-align: center; margin: 45px 0; font-family: "AvenirNextLTPro-Demi"; color: #1D1D1F; font-weight: 200; } */ .constructor-page-title { background: #1D1D1F; text-align: center; margin-bottom: 45px; padding: 11px 0; } .constructor-page-title h1 { display: inline-block; font-family: "AvenirNextLTPro-Demi"; font-weight: lighter; font-size: 25px; color: #fff; } .constructor-wrapper { margin-bottom: 30px; display: flex; justify-content: center; padding: 0; } .constructor { margin-right: 6vw; width: 20vw; } .constructor-cart { display: flex; align-items: stretch; align-content: stretch; } .constructor-day { cursor: pointer; user-select: none; margin-right: 15px; } .constructor-day__type { background-color: #fefffa; } .constructor-day__type-title { font-size: 16px; color: #f4f4f4; background: #1d1d1f; display: block; margin: 0; text-align: center; padding: 3px; font-weight: normal; } /*Accordion*/ .accordion { user-select: none; width: 100%; max-width: 400px; min-height: 0; display: block; position: relative; margin: 0 auto; padding: 0; background: rgba(29,29,31,0.1); border-right: 1px inset #1d1d1f; border-left: 1px inset #1d1d1f; } .accordion__title, .constructor-day__title { font-size: 19px; font-weight: 600; letter-spacing: 1px; display: block; margin: 0; padding: 10px 25px; cursor: pointer; color: #f4f4f4; background: #1d1d1f; border-bottom: 2px solid #000; font-weight: normal; } .constructor-day__title { margin-bottom: 10px; border-bottom: none; text-align: center; } .accordion__content { position: relative; max-height: 800px; transform: translate(0, 0); z-index: 2; } .accordion ul { list-style: none; perspective: 900; padding: 0; margin: 0; } .accordion ul li { position: relative; padding: 0; margin: 0; z-index: 3; } .accordion ul li:nth-of-type(1) { animation-delay: 0.5s; } .accordion ul li:nth-of-type(2) { animation-delay: 0.75s; } .accordion ul li:nth-of-type(3) { animation-delay: 1s; } .accordion ul li:last-of-type { padding-bottom: 0; } .accordion ul li i { position: absolute; transform: translate(-6px, 0); margin-top: 16px; right: 25px; } .accordion ul li i:before, .accordion ul li i:after { content: ""; position: absolute; background-color: #fff; width: 3px; height: 9px; } .accordion ul li i:before { transform: translate(-2px, 0) rotate(45deg); } .accordion ul li i:after { transform: translate(2px, 0) rotate(-45deg); } .accordion ul li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; } .accordion ul li input[type=checkbox]:checked ~ div.accordion__content { margin-top: 0; max-height: 0; opacity: 0; transform: translate(0, 50%); } .accordion ul li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); } .accordion ul li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); } div.accordion__content, ul li i:before, ul li i:after { transition: all 0.5s ease-in-out; } /* CAROUSEL */ .slick-slider { margin-bottom: 0; } .slick-container { position: relative; width: 60vw; } /* Selected - items */ .constructor-meals__item img{ width: 100%; position: relative; bottom: 150%; } .constructor-meals__img { width: 100%; overflow: hidden; height: 35px; border-radius: 3px; } .constructor-meals__title { position: absolute; z-index: 1; top: 0; background: rgba(29, 29, 31, 0.25); width: 100%; height: 100%; } .constructor-meals__item { transition: all 0s ease 0s; width: 85%; position: relative; border-radius: 10px; overflow: hidden; margin: 0 auto; margin-bottom: 10px; /* border: 6px outset blue; */ box-shadow: -3px 0 3px 0 rgba(0,0,0,0.5), 3px 0 3px 0 rgba(255,255,255,0.5); } .constructor-meals__item:nth-last-of-type { margin-bottom: 0; } .constructor-meals__title h3 { text-align: center; text-transform: capitalize; color: #fff; letter-spacing: 0.7px; font-weight: bold; margin-top: 7px; } .constructor-meals { display: flex; flex-direction: column; padding-top: 10px; background: rgba(29,29,31,0.1); overflow: hidden; } .accordion__content .constructor-meals { background-color: transparent; cursor: -webkit-grab; } .constructor-meals__btn-add { display: flex; justify-content: center; align-items: center; width: 85%; height: 35px; margin: 0 auto; border-radius: 10px; margin-bottom: 10px; background: #fcfcfe; font-weight: bold; box-shadow: 0px 3px 3px #313131, 0px 3px 3px #393939; border: 1px solid rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(0,0,0,0.2); font-weight: normal; } .constructor-day__type .constructor-meals { border-left: 2px inset #1d1d1f; border-right: 2px inset #1d1d1f; } .constructor-meals--border { border-bottom: 2px inset #1d1d1f; } /*Arrows carousel*/ .slick-prev { left: -45px; } [dir='rtl'] .slick-prev { right: -45px; left: auto; } .slick-next { right: -20px; } [dir='rtl'] .slick-next { right: auto; left: -20px; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 30px; line-height: 1; opacity: .75; color: #2a2a2d; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*Scroll-To-Top*/ .scrollTop{ display: block; position: fixed; z-index: 10; object-fit: fill; background: url('../images/scroll-top2.png'); border: 0px solid black; outline: none; width: 48px; height: 48px; bottom: 30px; left: 2%; cursor: pointer; } .scrollTop:hover { animation-name: pulse; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(0.9); } } /* button to basket */ .btn-basket { margin: 0 auto; z-index: 5; position: relative; display: block; border: 2px solid #2e2e2e; text-transform: uppercase; letter-spacing: .3rem; padding: 15px 10px; text-align: center; width: 19vw; cursor: pointer; overflow: hidden; background: #1d1d1f; transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1); } .btn-basket .btn-basket__link { color: #f1f1f5; text-decoration: none; } .btn-basket .btn-basket__mask { background: #fff; background: rgba(255,255,255,0.5); } .btn-basket .btn-basket__mask { position: absolute; display: block; width: 200px; height: 100px; transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg); transition: all 1.1s cubic-bezier(0.19,1,.22,1); } .btn-basket:hover { background: black; border-color: #fff; box-shadow: 0 0 5px rgba(255,245,245,0.8); /* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */ } .btn-basket:hover .btn-basket__link { color: #fff; } .btn-basket:hover .btn-basket__mask { background: white; -webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg); transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg); } /* constructor-meals__btn-delete */ .constructor-meals__btn-delete { position: absolute; right: 9px; top: 9px; height: 20px; width: 20px; background: rgba(29, 29, 31,1); border-radius: 50%; text-align: center; z-index: 1; cursor: pointer; opacity: 0; } .constructor-meals__btn-delete span { color: #F1F1F5; position: relative; top: 1px; } .constructor-meals__item:hover .constructor-meals__btn-delete { opacity: 1; } .constructor-total-price { margin-bottom: 50px; text-align: center; } /* Responsive */ .select-menu-page .meal-item-ingredients { opacity: 0; } .select-menu-page .meal-item:hover .meal-item-ingredients{ opacity: 1; } .one-week2 { display: none; } .constructor-meals--snacks { border-bottom: 1px inset #1d1d1f; } @media screen and (max-width: 1100px){ .select-menu-page .meal-items { padding: 50px 20px; } /* .search-buttons-wrapper { padding-right: 50px; } */ .constructor { width: 25vw; } .constructor-meals__title { font-size: 15px; display: flex; justify-content: center; align-items: center; } .constructor-meals__title h3 { margin: 0; } .scrollTop { bottom: 60px; left: 2%; } @media screen and (max-width: 800px){ .select-menu-page .meal-item-title h2 { padding: 3px 0; font-size: 18px; } .select-menu-page .meal-items { padding: 40px 20px; } .select-menu-page .meal-item-ingredients { padding: 5px 0; } .select-menu-page .meal-item-ingredients li { font-size: 13px; margin: 2px 5px; } .select-menu-page .meal-item-bottom-container { padding: 0; } .select-menu-page .meal-item-price { display: flex; align-content: center; } .select-menu-page .meal-item-price span { padding-top: 1.5px; font-size: 16px; } .select-menu-page .meal-item-btn { padding: 3px; } .slick-prev { left: -30px; } [dir='rtl'] .slick-prev { right: -30px; left: auto; } .slick-next { right: -17px; } [dir='rtl'] .slick-next { right: auto; left: -17px; } .constructor { margin-right: 5vw; width: 25vw; } .slick-container { width: 65vw; } .constructor-wrapper { padding-left: 10px; justify-content: left; } .constructor-day { margin-right: 8px; } .slick-prev:before, .slick-next:before { font-size: 25px; } .constructor-meals__title { font-size: 13.5px; display: flex; justify-content: center; align-items: center; } .constructor-meals__title h3 { margin: 0; } .btn-basket { width: 25vw; letter-spacing: .1rem; } .scrollTop { bottom: 155px; left: 1%; } } @media screen and (max-width: 400px){ .select-menu-page .meal-items { flex-direction: column; padding: 20px 20px; } .select-menu-page .meal-item { width: 80%; margin: 10px auto; } .select-menu-page .meal-item-title h2 { padding: 3px 0; font-size: 22px; } .select-menu-page .meal-item-ingredients { padding: 0; } .select-menu-page .meal-item-ingredients li { font-size: 15px; margin: 4px 5px; } .scrollTop { bottom: 210px; left: 3%; } .select-menu-page .search-description { padding: 15px 15px; text-align: center; font-size: 23px; } .select-menu-page .meal-item-price span { padding-top: 3px; font-size: 18px; } .one-week { display: none; } .one-week2 { display: block; } .constructor-day { margin-right: 5px; } .btn-basket { width: 45vw; } .slick-prev { left: -11px; bottom: 25px; z-index: 1; } [dir='rtl'] .slick-prev { right: -11px; left: auto; z-index: 1; } .slick-next { right: -2px; } [dir='rtl'] .slick-next { right: auto; left: -2px; z-index: 1; } .constructor { margin-right: 5vw; width: 45vw; } .slick-container { width: 45vw; } .accordion__title { font-size: 17px; } .slick-prev:before, .slick-next:before { color: black; } .slick-prev, .slick-next { top: 45%; } } }