// 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 ============ } // 1400 ============================================ @include lg-xlg { // Header ================ .header { padding: 25px 0; .logo { width: 310px; height: 40px; } .lang { &_current { padding: 10px; } } &_item { &-link { display: none; } } .user { display: none; } } // Header end ============ // Navs ================ .nav { &.active { top: 100px; } &.fixed { top: 100px; } } // Navs end ============ // Menu ================ .menu { &.active { top: 149px; height: calc(100% - 148px); } .footer { &_navs { border-top: 1px solid #fff; margin-top: 50px; padding-top: 50px; } } } // Menu end ============ // Hero ==================== .hero { &_item { height: calc(100vh - 110px); &-photo { height: calc(100vh - 110px); } } .slider { &__counter { font-size: 18px; line-height: 22px; width: 205px; } } &_slider { .slick { &-next { width: 44px; } &-prev { width: 44px; left: 105px; } } } } // Hero end ================ // Shops ================ .shops { padding: 40px 0; .auto_container { padding: 0 15px; } &_item { height: 300px; &-label { font-size: 12px; line-height: 12px; padding: 10px 15px; } &-content { &-txt { font-size: 18px; } } &-name { font-size: 14px; padding: 15px 10px; } &-floor { padding: 10px 15px; font-size: 24px; span { font-size: 14px; } } } &_tab { &-link { font-size: 16px; line-height: 20px; padding: 10px 20px; } } } // Shops end ============ // Movie ================ .movie { padding: 40px 0; &_logo { font-size: 18px; line-height: 1.3; span { width: 60px; height: 60px; } } &_link { font-size: 18px; } &_item { &-title, &-genre { font-size: 16px; } &-link { padding: 12px 10px; } &-photo { height: 320px; } } .slick { &-dots { li { button { height: 6px; width: 20px; } } } } } // Movie end ============ // Rest ================ .rest { padding: 40px 0; &_tabs { margin-bottom: 20px; &-link { font-size: 16px; line-height: 20px; padding: 10px 20px; } } &_item { width: calc(33.33% - 28px); margin: 12px; &-floor { font-size: 12px; } &-link { font-size: 12px; } } } // Rest end ============ // Footer ================ .footer { padding: 40px 0; &_box { display: none; } &_navs { margin-top: 0; padding-top: 0; border-top: none; } // &_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 { min-height: 550px; &_info { min-height: 550px; margin-top: 15px; &-title { font-size: 32px; line-height: 1.5; } &-txt { font-size: 18px; line-height: 1.5; } } } // Intro end ============ // Contact ================ .contact { margin-top: -120px; &_box { &-title { font-size: 24px; } &-row { margin-bottom: 40px; span { width: 30px; height: 30px; } } } &_input { input { font-size: 16px; } } &_btn { button { font-size: 15px; } } &_info { &-title { font-size: 24px; } &-txt { margin-bottom: 25px; } } &_map { height: 500px; } } // Contact end ============ // About ================= .about { &_item { &-photo { width: calc(50% - 25px); &.flex { &>div { height: 400px; &:nth-child(2) { margin: 60px 0 0 20px; } } } &>div { height: 250px; &:nth-child(2) { margin-top: 20px; } } } &-info { width: calc(50% - 25px); } &-title { font-size: 32px; line-height: 1.3; margin-bottom: 20px; } &-txt { font-size: 18px; line-height: 1.3; } } } // About end ============= // Bills ================= .bill { &_aside { padding: 25px; margin-right: 25px; } // &_info { // width: calc(100% -); // } } // Bills end ============= // Post ================= .post { padding: 40px 0 60px; &_photo { width: 300px; margin-left: 30px; } &_info { width: calc(100% - 330px); &-title { font-size: 30px; padding-bottom: 10px; margin-bottom: 14px; } &-txt { font-size: 16px; margin-top: 15px; } &-cnt { margin-right: 20px; font-size: 13px; } &-row { flex-wrap: wrap; } } &_slider { &-title { font-size: 30px; } .slick { &-dots { li { button { height: 6px; width: 20px; } &.slick-active { button { width: 20px; } } } } } } } // Post end ============= // Result ================= .result { .menu { &_search { &-input { width: calc(100% - 146px); input { font-size: 16px; padding: 15px 20px; } } &-btn { font-size: 16px; padding: 15px 30px; } } } } // Result end ============= } // 1200 ======================================= @include lg-lg { .auto_container { padding: 0 20px; } // Menu ======================= .menu { &_box { flex-wrap: wrap; } &_col { width: calc(33.33% - 80px); &:nth-child(3) { &::after { display: none; } } } } // Menu end =================== // 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: 20px 0 40px 0; &.page { .rest { &_box { justify-content: unset; } &_item { width: calc(33.33% - 28px); } } } } // Result end ============= } // 1024 ======================================= @include md-xlg { // Nav end ================ .nav { display: none; } // Nav end ================ // Menu ==================== .menu { &.active { top: 90px; height: calc(100% - 89px); } .mobile { &_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 ================ // Shops ====================== .shops { &_item { width: calc(50% - 16px); margin: 10px 8px; } } // Shops end ================== // Intro ====================== .intro { &_info { max-width: 100%; } } // Intro end ================== // About ====================== .about { &_item { flex-direction: column-reverse; &:nth-of-type(even) { flex-direction: column-reverse; } &-photo { width: 100%; &.flex { justify-content: center; &>div { height: 400px; margin-top: 0; width: unset; &:nth-child(2) { margin: 60px 0 0 20px; } } } &>div { height: 250px; &:nth-child(2) { margin-top: 20px; } } } &-info { width: 100%; margin-bottom: 40px; } } } // About end ================== // Footer ====================== .footer { &_navs { flex-wrap: wrap; &-col { width: calc(50% - 20px); max-width: unset; margin-bottom: 30px; &:nth-child(3) { order: 1; } } } } // Footer end ================== // 404 ====================== .error { padding: 50px 0; &_icon { display: none; } &_info { align-items: center; text-align: center; width: 100%; } } // 404 end ================== } // 900 ======================================== @include md-lg { // Menu ==================== .menu { &_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 { height: calc(100vh - 90px); &-photo { height: calc(100vh - 90px); } &-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; } &-info { top: 20px; right: 20px; } &-label { top: 20px; left: 20px; } &-content { bottom: 20px; left: 20px; &-txt { font-size: 16px; } } } } // 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; } .shop_slider-item { height: 300px; } &_info { width: 100%; } } // Post end ============= // Result ================= .result { &.page { .rest { &_item { width: calc(50% - 28px); } } } } // Result end ============= .slick-list { height: unset !important; } } // 720 ============================================== @include md-sm { // Header ================ .header { .logo { width: calc(100% - 210px); height: 35px; } .burger { height: 32px; border-radius: 50%; span { margin-right: 0; } p { display: none; } } } // Header end ============ // Menu ================ .menu { &_col { margin: 0; width: 100%; &:last-child { margin-bottom: 0; } &:nth-child(3) { margin-right: 0; &::after { content: none; } } &::after { content: none; } &-group { margin-bottom: 15px; &:last-child { margin-bottom: 15px; } } &-title { font-size: 18px; } &-box { overflow: hidden; max-height: 0; @include transition; &::-webkit-scrollbar { display: none; } } &-link { position: relative; padding-left: 50px; &::before { content: ''; position: absolute; top: 50%; left: 20px; @include transformY; width: 10px; height: 10px; background: url("../images/svg/nav_link-arrow.png") no-repeat center; } } } .footer { &_navs { margin-top: 30px; padding-top: 30px; padding-bottom: 20px; } } } // 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 ============== // Intro ================= .intro { min-height: 400px; &_info { min-height: 400px; &-title { font-size: 26px; line-height: 1.3; } &-txt { font-size: 16px; line-height: 1.3; } &-link { margin-top: 25px; a { font-size: 14px; } span { width: 15px; height: 15px; } } } } // Intro end ============== // About ====================== .about { padding: 40px 0; &_item { &-title { font-size: 24px; } &-txt { font-size: 16px; } &-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; margin-bottom: 30px; &.active { &::after { bottom: -15px; } } } } &_item { flex-direction: column; align-items: unset; &>div { max-width: 100%; } &-link { margin-top: 20px; } } &_form { margin: 0; } &_input { width: 100%; margin: 10px 0; input { font-size: 15px; line-height: 1.3; } } &_btn { margin: 10px 0 0 0; button { font-size: 15px; line-height: 1.3; padding: 12px 10px; max-width: 160px; } } } // Bills end ============= // Contact ================= .contact { &_info { background: #fff; padding: 30px 20px; width: calc(100% - 40px); &-title { color: $gray; line-height: 1.4; margin-bottom: 20px; } &-txt { color: $gray; span { svg { path { fill: $yellow; } } } } &-media { a { padding: 10px; border-radius: 5px; background: $gray; width: 20px; height: 20px; 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; } &_map { height: 350px; } } // Contact end ============= // Post ================= .post { &_info { &-title { font-size: 24px; padding-bottom: 5px; margin-bottom: 5px; } &-cnt { margin: 20px 20px 0 0; } } &_slider { &-title { font-size: 24px; margin: 30px 0 20px; } } .rest_item { max-width: unset; &-photo { height: 170px; } &-row { flex-direction: column; align-items: unset; text-align: center; } &-floor { margin-bottom: 15px; font-size: 14px; } &-link { justify-content: center; font-size: 14px; padding: 7px; } } } // 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: 20px; } &-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 ============= // 404 ====================== .error { &_sup-title { font-size: 60px; } &_title { font-size: 22px; } &_txt { font-size: 14px; } &_link { font-size: 14px; } } // 404 end ================== } // 520 ========================================== @include sm-xl { .auto_container { padding: 0 15px; } // Header ================ .header { padding: 25px 0; .burger { height: 28px; span { width: 20px; &::before, &::after { width: 20px; } } } .lang { &_current { padding: 8px; } &_arrow { display: none; } &_flag { width: 15px; height: 15px; } } .logo { width: calc(100% - 160px); } } // Header end ============ // Menu ================ .menu { &.active { top: 85px; height: calc(100% - 85px); } &_col { &-title { font-size: 16px; } } .mobile { &_user { &-link { padding: 15px 20px; margin-top: 5px; span { font-size: 18px; } a { font-size: 18px; } } } } &_search { flex-direction: column; &-title { font-size: 28px; } &-btn { padding: 12px 20px; margin-top: 15px; font-size: 14px; width: 100%; } &-input { width: 100%; margin-right: 0; input { font-size: 14px; padding: 12px 15px; width: calc(100% - 30px); } } } } // Menu end ============ // Hero ==================== .hero { &_item { height: 500px; &-photo { height: 500px; } &-link { font-size: 13px; } } } // Hero end ================ // Shops ================ .shops { padding: 20px 0 40px; &_sort { flex-direction: column; .custom-select { width: 100%; } } &_search { margin-bottom: 15px; margin-right: 0; width: 100%; input { width: calc(100% - 60px); } } &_tab { margin-bottom: 25px; &-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%; max-width: 350px; margin: 15px 0; } } } &_tabs { &-link { font-size: 15px; line-height: 1.3; } } &_item { &-photo { height: 180px; width: 100%; } } } .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; } } &_navs { &-col { width: 100%; margin-right: 0; } } } // Footer end ============ // Intro ================ .intro { min-height: 300px; &_info { min-height: 300px; margin-top: 30px; } } // Intro end ============ // About ================ .about { padding: 40px 0; &_item { margin-bottom: 40px; &-title { margin-bottom: 20px; } &-info { margin-bottom: 20px; } &-photo { &.flex { &>div { height: unset; } } &>div { height: unset; } } } } // About end ============ // Contact ================ .contact { margin-top: -70px; &_box { &-title { font-size: 20px; } &-row { margin-bottom: 20px; span { display: none; } } } &_info { &-title { font-size: 20px; } &-media { a { margin-right: 15px; } } } } // Contact end ============ // Post ================= .post { padding: 15px 0 60px; .rest { &_item { &-info { text-align: center; } } } // &_photo { // height: 300px; // } &_info { &-title { font-size: 20px; } &-cnt { margin: 10px 20px 10px 0; padding: 10px 12px; font-size: 12px; } } &_slider { &-title { font-size: 20px; } .slick { &-dots { bottom: -25px; } } } &_link { margin-top: 65px; } } // Post end ============= // Result ================= .result { &.page { .rest { &_box { margin: 0; justify-content: center; } &_item { width: 100%; max-width: 350px; margin: 15px 0; } } } .menu { &_search { margin-bottom: 35px; &-input { margin-right: 0px; input { font-size: 14px; padding: 10px 15px; width: calc(100% - 30px); line-height: 1.4; } } &-btn { font-size: 14px; padding: 10px 25px; } } } } // Result end ============= // Bills ================= .bill { overflow: hidden; &_aside { padding: 20px 15px; width: calc(100% - 30px); &-title { font-size: 16px; } } &_item { &>div { p { font-size: 15px; } } &-link { font-size: 15px; } } &_input { label { font-size: 15px; } input { padding: 12px; width: calc(100% - 26px); } } } // Bills 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; } } } // About end ============ // Bills ================ .bill { &_item { &>div { p { font-size: 16px; } } } } // Bills end ============ }