// 1665 ============================================ @include xlg-xxlg { // Nav ============================ .nav { &_list { li { &:nth-last-child(2) { display: none; } } } } // Nav end ======================== } // 1500 ====================================== @include lg-xxlg { .auto_container { padding: 0 30px; } .m-rl { margin: 0 25px; } // Header ================ .header { &_item { &-link { padding: 15px; } } .lang { &_current { padding: 15px; } } } // Header end ============ // Nav end ================ .nav { &.active { top: 133px; } } // Nav end ================ } // 1400 ============================================ @include lg-xlg { // Header ================ .header { &_item { &-link { display: none; } } .user { display: none; } } // Header end ============ // Nav end ================ .nav { display: none; } // Nav end ================ // Menu ==================== .menu { &.active { top: 130px; height: calc(100% - 130px); } .mobile { &_buttons { display: block; margin-bottom: 60px; .row { display: flex; align-items: center; justify-content: space-around; padding: 40px; background: $black; border-radius: 5px; } &-link { font-weight: 700; font-size: 20px; line-height: 1.4; color: #fff; margin-right: 10px; display: block; &:last-child { margin-right: 0; } a { font-weight: 700; font-size: 20px; line-height: 1.4; color: #fff; margin-right: 10px; display: block; margin: 40px 0 0 0; display: none; &.active { display: block; } } } } &_user { &-link { width: calc(100% - 40px); text-align: center; margin-top: 20px; padding: 30px 20px; background: $black; display: block; position: relative; &.active { span { &::after { transform: rotate(180deg); top: 20%; } } } span { font-weight: 700; font-size: 20px; line-height: 1.4; color: #fff; display: inline-block; cursor: pointer; position: relative; &::after { content: ''; background: url("../images/svg/mouse-arrow.svg") no-repeat center; background-size: contain; width: 15px; height: 15px; position: absolute; top: 50%; right: -40px; @include transformY; @include transition; } } a { font-weight: 700; font-size: 20px; line-height: 1.4; color: #fff; display: block; margin: 40px 0 0 0; display: none; &.active { display: block; } } } } } &_box { flex-wrap: wrap; } &_col { width: calc(33.33% - 50px); margin: 0 50px 30px 0; &::after { right: -10px; } &:nth-child(3) { margin-right: 0; &::after { display: none; } } } } // Menu end ================ // Hero ==================== .hero { &_item { &-photo { height: 650px; } } } // Hero end ================ // Shops ================ .shops { .auto_container { padding: 0 15px; } &_item { height: 420px; } } // Shops end ============ // Footer ================ .footer { &_box { flex-wrap: wrap; } &_col { width: calc(33.33% - 34px); // margin-right: 50px; margin: 0 50px 30px 0; &:nth-child(3) { margin-right: 0; } &::after { display: none; } } } // Footer end ============ // Intro ================ .intro { &_info { &-title { font-size: 44px; line-height: 1.5; } &-txt { font-size: 20px; line-height: 1.5; } } } // Intro end ============ // About ================= .about { &_item { &-photo { width: calc(50% - 25px); } &-info { width: calc(50% - 25px); } &-title { font-size: 40px; } &-txt { font-size: 22px; } } } // About end ============= // Bills ================= .bill { &_aside { padding: 25px; margin-right: 25px; } // &_info { // width: calc(100% -); // } } // Bills end ============= // Post ================= .post { &_photo { width: 400px; height: 400px; margin-left: 40px; } &_info { width: calc(100% - 440px); &-title { font-size: 34px; } &-txt { font-size: 20px; } &-cnt { margin-right: 20px; } &-row { flex-wrap: wrap; } } &_slider { &-title { font-size: 36px; } } } // Post end ============= } // 1200 ======================================= @include lg-lg { // Restaurants ================ .rest { &.page { padding: 40px 0; .rest { &_item { width: calc(33.33% - 28px); } } } &_block { justify-content: center; } &_item { width: calc(50% - 54px); &-photo { height: 190px; } } } // Restaurants end ============ // Shops ================ .shops { &_item { height: 350px; } } // Shops end ============ // Copyright ================ .copy { &_row { flex-direction: column; align-items: unset; } &_txt { margin-bottom: 20px; } &_info { flex-direction: column; align-items: unset; &-item { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } } } // Copyright end ============ // Bills ================= .bill { &_box { flex-direction: column; } &_aside { padding: 30px; margin-right: 0; } &_info { margin-top: 50px; max-width: 100%; width: 100%; } } // Bills end ============= // Contact ================= .contact { &_form { flex-direction: column-reverse; } &_box { width: calc(100% - 90px); } &_info { width: calc(100% - 90px); } &_map { height: 550px; } } // Contact end ============= // Post ================= .post { .rest_item { margin: 15px; } } // Post end ============= // Result ================= .result { padding: 40px 0; &.page { .rest { &_box { justify-content: unset; } &_item { width: calc(33.33% - 28px); } } } } // Result end ============= } // 1000 ======================================= @include md-xlg { // Crumb ==================== .crumb { padding-bottom: 40px; } // Crumb end ================ // Shops ====================== .shops { &_item { width: calc(50% - 16px); margin: 10px 8px; height: 400px; &-name { font-size: 17px; } &-floor { font-size: 28px; } } } // Shops end ================== // Intro ====================== .intro { min-height: 660px; &_info { min-height: 660px; max-width: 100%; } } // Intro end ================== // About ====================== .about { &_item { flex-direction: column-reverse; &:nth-of-type(even) { flex-direction: column-reverse; } &-photo { width: 100%; height: 500px; } &-info { width: 100%; margin-bottom: 40px; } } } // About end ================== } // 900 ======================================== @include md-lg { // Menu ==================== .menu { .mobile_buttons { justify-content: space-between; &-link { font-size: 18px; } } &_search { padding-top: 30px; &-title { font-size: 32px; } &-input { width: calc(100% - 166px); input { padding: 15px 20px; } } &-btn { padding: 15px 40px; font-size: 16px; } } &_row { flex-direction: column; align-items: unset; } &_info { flex-direction: column; align-items: unset; margin-top: 15px; a { margin-bottom: 15px; } } &_col { width: calc(50% - 20px); margin: 0 40px 30px 0; &::after { right: -10px; } &:nth-child(3) { margin-right: 40px; &::after { display: block; } } &:nth-child(2), &:nth-child(4) { margin-right: 0; &::after { display: none; } } } } // Menu end ================ // Hero ====================== .hero { &_item { &-photo { height: 600px; } &-link { right: unset; left: 50%; @include transformX; } } &_slider { .slick { &-prev, &-next { display: none !important; } } } .slider { &__counter { display: none; } } } // Hero end ================== // Shops ====================== .shops { &_item { width: calc(50% - 16px); margin: 10px 8px; height: 370px; &-name { font-size: 15px; padding: 15px 10px; } &-floor { font-size: 24px; padding: 12px 25px; } &-content { &-txt { font-size: 18px; } } } } // Shops end ================== // Restaurants ====================== .rest { &.page { .rest { &_item { width: calc(50% - 28px); } } } } // Restaurants end ================== // Footer ================ .footer { &_box { flex-wrap: wrap; } &_col { width: calc(50% - 20px); margin-right: 40px; &:nth-child(3) { margin-right: 40px; } &:nth-child(2), &:nth-child(4) { margin-right: 0; } &::after { display: none; } } } // Footer end ============ // Post ================= .post { padding: 40px 0; &_box { flex-direction: column-reverse; } &_photo { width: 100%; margin-left: 0; margin-bottom: 40px; } &_info { width: 100%; } } // Post end ============= // Result ================= .result { &.page { .rest { &_item { width: calc(50% - 28px); } } } } // Result end ============= } // 720 ============================================== @include md-sm { // Header ================ .header { .logo { width: calc(100% - 210px); height: 35px; } } // Header end ============ // Menu ================ .menu { .mobile_buttons { .row { justify-content: center; flex-wrap: wrap; align-items: unset; padding: 20px 30px; } &-link { font-size: 16px; width: calc(50% - 20px); margin: 15px 10px; text-align: center; } } } // Menu end ============ // Shops ================= .shops { &_tab { flex-wrap: wrap; justify-content: center; &-link { width: calc(50% - 60px); max-width: 160px; margin: 10px 5px; text-align: center; } } &_item { width: 100%; margin: 10px 0; } } // Shops end ============= // Movie ================== .movie { &_row { flex-direction: column; } &_link { font-size: 24px; margin: 40px 0; } &_item { &-info { margin: 0 auto; } &-link { max-width: 350px; margin: 60px auto 0; } &-photo { height: 520px; img { @include ImgCon; } } } &_all { display: none; } } // Movie end ============== // Modal ================== .modal { .login { &_form { padding: 75px 40px 65px; } &_title { font-size: 20px; margin-bottom: 30px; } &_input { label { font-size: 16px; } input { font-size: 14px; } } } } // Modal end ============== // Restaurants ================== .rest { &.page { .rest { &_item { &-info { text-align: center; } &-row { flex-direction: column; align-items: unset; } &-floor { margin-bottom: 15px; text-align: center; } &-link { justify-content: center; } } } } &_tabs { flex-wrap: wrap; justify-content: center; &-link { width: calc(50% - 60px); max-width: 160px; margin: 10px 5px; text-align: center; } } &_item { width: 100%; max-width: 450px; margin: 15px 0; &-floor { font-size: 16px; } &-link { font-size: 16px; span { width: 20px; height: 20px; } } } } // Restaurants end ============== // About ====================== .about { &_item { &-photo { height: 370px; } &-info { &-title { font-size: 34px; margin-bottom: 15px; } &-txt { font-size: 20px; margin-bottom: 10px; } } } } // About end ================== // Bills ================= .bill { &_aside { width: calc(100% - 60px); &-title { font-size: 20px; padding-bottom: 30px; &.active { &::after { bottom: 15px; } } } } &_item { flex-direction: column; align-items: unset; &>div { max-width: 100%; } &-link { margin-top: 20px; } } } // Bills end ============= // Contact ================= .contact { &_info { background: #fff; padding: 30px 20px; width: calc(100% - 40px); &-title { color: $gray; line-height: 1.4; } &-txt { color: $gray; span { svg { path { fill: $yellow; } } } } &-media { a { padding: 10px; border-radius: 5px; background: $gray; width: 26px; height: 26px; svg { path { fill: $yellow; } } } } .wave { display: none; } } &_box { padding: 30px 20px; width: calc(100% - 40px); &-title { font-size: 24px; line-height: 1.4; } &-row { span { width: 30px; height: 30px; } } } &_input { width: 100%; margin: 20px 0; } &_message { width: 100%; margin: 20px 0; } } // Contact end ============= // Post ================= .post { .rest_item { max-width: unset; &-row { flex-direction: column; align-items: unset; text-align: center; } &-floor { margin-bottom: 15px; } &-link { justify-content: center; } } } // Post end ============= // Result ================= .result { &.page { .rest { &_item { width: calc(50% - 28px); &-info { text-align: center; } &-row { flex-direction: column; align-items: unset; } &-floor { margin-bottom: 15px; text-align: center; } &-link { justify-content: center; } } } } .menu { &_search { margin-bottom: 35px; &-title { font-size: 26px; } &-txt { font-size: 16px; } &-input { width: 100%; input { font-size: 16px; padding: 12px 15px; width: calc(100% - 0px); line-height: 1.4; } } &-btn { width: 100%; margin-top: 15px; } } } } // Result end ============= } // 520 ========================================== @include sm-xl { .auto_container { padding: 0 15px; } // Header ================ .header { padding: 25px 0; .lang { &_current { padding: 8px; } &_arrow { display: none; } &_flag { width: 15px; height: 15px; } } .logo { width: calc(100% - 160px); } .burger { width: 36px; height: 36px; } } // Header end ============ // Menu ================ .menu { &.active { top: 85px; height: calc(100% - 85px); } .mobile { &_buttons { background: none; .row { background: none; padding: 0; } &-link { flex-direction: column; width: calc(100% - 30px); margin: 0 0 15px; padding: 20px 15px; background: #171717; font-size: 18px; } } &_user { &-link { padding: 15px 20px; margin-top: 5px; span { font-size: 18px; } a { font-size: 18px; } } } } &_search { &-title { font-size: 28px; } &-btn { padding: 15px 25px; font-size: 14px; } &-input { width: calc(100% - 99px); margin-right: 0; input { font-size: 14px; } } } } // Menu end ============ // Hero ==================== .hero { &_item { &-photo { height: 500px; } &-link { font-size: 13px; } } } // Hero end ================ // Shops ================ .shops { padding: 50px 0; &_tab { &-link { font-size: 15px; line-height: 1.3; } } &_item { height: 320px; } } // Shops end ============ // Movie ================ .movie { &_link { font-size: 19px; margin-bottom: 25px; } &_item { &-photo { height: 380px; } } } // Movie end ============ // Modal ================ .modal { .inner { width: calc(100% - 20px); } .movie { &_desc { &-info { padding: 15px 20px; } &-photo { height: 280px; } } } .login { &_form { padding: 75px 30px 65px; } &_title { font-size: 16px; margin-bottom: 30px; } &_btn { font-size: 16px; } } } // Modal end ============ // Restaurants ================ .rest { &.page { .rest { &_box { margin: 0; } &_item { width: 100%; margin: 15px 0; } } } &_tabs { &-link { font-size: 15px; line-height: 1.3; } } &_item { &-photo { height: 180px; padding: 15px; width: calc(100% - 30px); } } } .pag { flex-direction: column; &_txt { font-size: 16px; margin-top: 15px; } } // Restaurants end ============ // Footer ================ .footer { &_col { width: calc(50% - 15px); margin-right: 15px; &:nth-child(3) { margin-right: 20px; } } } // Footer end ============ // Intro ================ .intro { min-height: 590px; &_info { min-height: 590px; margin-top: 30px; &-title { font-size: 36px; } &-txt { font-size: 18px; } } } // Intro end ============ // About ================ .about { padding: 40px 0; &_item { &-title { font-size: 32px; line-height: 1.4; margin-bottom: 20px; } &-txt { font-size: 18px; line-height: 1.8; } &-photo { height: 320px; } } } // About end ============ // Contact ================ .contact { margin-top: -140px; &_box { &-title { font-size: 20px; } &-row { margin-bottom: 20px; } } &_info { &-title { font-size: 20px; } &-media { justify-content: space-between; a { margin-right: 15px; } } } &_map { height: 460px; } } // Contact end ============ // Post ================= .post { .rest { &_item { &-info { text-align: center; } } } &_photo { height: 350px; } &_info { &-title { font-size: 28px; padding-bottom: 15px; margin-bottom: 20px; } &-txt { font-size: 18px; } &-cnt { margin: 10px 20px 10px 0; padding: 10px 12px; font-size: 12px; } } &_slider { &-title { font-size: 25px; margin: 30px 0; } .slick { &-dots { bottom: -25px; } } } &_link { margin-top: 65px; } } // Post end ============= // Result ================= .result { &.page { .rest { &_box { margin: 0; justify-content: center; } &_item { width: 100%; margin: 15px 0; } } } .menu { &_search { margin-bottom: 35px; &-title { font-size: 26px; } &-input { margin-right: 0px; input { font-size: 16px; padding: 12px 15px; width: calc(100% - 30px); line-height: 1.4; } } &-btn { font-size: 14px; padding: 12px 25px; } } } } // Result end ============= } // 350 =================================================== @include sm-md { // Footer ================ .footer { &_col { &-link { font-size: 12px; } } } // Footer end ============ // Intro ================ .intro { &_info { margin-top: 55px; &-title { font-size: 30px; } &-txt { font-size: 16px; } } } // Intro end ============ // About ================ .about { &_item { &-title { font-size: 26px; } &-txt { font-size: 16px; line-height: 1.8; } &-photo { height: 320px; } } } // About end ============ // Bills ================ .bill { &_item { &>div { p { font-size: 16px; } } } } // Bills end ============ }