// 4.3 Mobile @media (max-width: 767px) { /* BODY-RESTAURANT */ .body-restaurant { .restaurant_item { .text { h2 { margin-top: 0; } } } } .body-restaurant-2 { .nav { text-align: center; li { float: none; width: 100%; padding-top: 12px; display: block; border-bottom: 2px solid #e7e7e7; &:last-child { border-bottom: none; } } } } .body-restaurant-3 { .reservation { .reservation_form { .date, .awe-input { margin-bottom: 20px; } } } } /* END BODY-RESTAURANT */ .header-top { text-align: center; .header-top-left { float: none !important; border-bottom: 1px solid rgba(245, 240, 240, 0.23); } .header-top-right { float: none !important; display: inline-block; line-height: 38px; margin-bottom: -8px; .icon-v3-top { float: left; } ul { float: left; } } } .events-v3 { &.events-v4 { margin-top: 30px; .events-item { .v4 { font-size: 30px; } } } .events-content { bottom: -68%; p { margin: 0; font-size: 12px; } h3, { margin: 0; font-size: 30px; } } } .best { margin-bottom: 30px; } .navbar-header-v3 { background: rgba(9, 8, 8, 0.79); .navbar-nav {} } /* UOR GALLERY */ .gallery-our { padding-top: 20px; .gallery { margin: 0; .nav-tabs { li { float: none; display: inherit; margin-bottom: 5px; } } } } /* END/OUR GALLERY*/ .gallery__description-block { padding: 10px 0; .gallery__description-block__description { font-size: 12px; margin: 0; padding: 0 20px; } } /*TESTIMONIALS */ .testimonials { &.testimonials-v2 { .testimonials-content { .testimonials-img { padding: 0; } top: 20% !important; .content-testimonials { p { font-size: 13px; padding: 0; margin-bottom: 11% !important; } } } } .testimonials-h { min-height: 330px; .testimonials-content { top: 8%; .img-testimonials { margin-bottom: 10px; } .testimonials-p { font-size: 12px; padding: 0; margin-bottom: 0; span { font-size: 28px; } } .testimonials-p1 { font-size: 13px; margin-bottom: 13px; } } } } /* END / TESTIMONIALS */ /* NEWS */ .news { padding-top: 30px; padding-bottom: 60px !important; } /* END/NEWS*/ /* FOOTER */ .footer-sky { &.footer-sky-v4 { .footer-top { padding: 0; } .footer-bottom { line-height: 35px !important; } .textbox { .input-group { width: 100% !important; } } } .footer-top { &.footer-top-v3 { padding-bottom: 15px; .footer-icon-l .fa { padding: 0 10px; } .bg-v3 { padding: 20px 15px; } .input-group { width: 420px !important; } } .textbox { .form-inline { .form-group { .input-group { width: 450px; margin: 0 auto; } } } } .icon-email img { margin: 0 auto; margin-bottom: 10px; } padding: 25px 0px; .footer-icon-l { text-align: center; margin-top: 10px; .fa { line-height: 0px; padding: 0px 18px; } } } .footer-bottom { text-align: center; padding-top: 10px; .no-padding { line-height: 30px; } .payments { text-align: center; padding-bottom: 13px; ul { li { padding: 0px 9px; } } } } .footer-mid { .padding-footer-mid { padding: 15px 0px 20px 0px; .list-content { text-align: center; img { max-width: 170px; vertical-align: middle; } margin-top: 35px; margin-bottom: 10px; ul { li { text-align: left; } } } } } } /* END/FOOTER*/ /* ROOMS */ .rooms { padding-top: 30px; padding-bottom: 50px; .rooms-p { width: 100%; } .wrap-rooms { .sky-h4 { font-size: 20px !important; } .price { font-size: 14px !important; } } &.rooms-v2 { .content { p { font-size: 14px !important; } .bottom-room { ul { li { font-size: 10px !important; img { width: 20px !important; } } } } } .rooms-content {} } } /* END/ROOMS */ /*ABOUT */ .about { &.about-v2 { margin-bottom: 60px; .about-img { text-align: center; left: initial; right: initial; .img-1 { width: 100%; img { display: inline-block; } .img-2 { display: none; } } } .about-centent { p { font-size: 14px; } } } margin-top: 50px; margin-bottom: 7rem; .about-img { margin-top: 35px; float: none; .img-1 { width: 100%; img { width: 100%; } .img-2, .img-3 { display: none; } } } .about-centent { text-align: center; .line { margin-left: auto; margin-right: auto; margin-bottom: 30px; } p { padding: 0; font-size: 14px; margin-bottom: 30px; } } } /* END / ABOUT */ /* section-slider */ .section-slider { &.height-v { .item { img { width: 290%; max-width: 300%; } } } .check-avail { position: inherit; background: rgba(2, 2, 2, 0.78); &.check-avail-v3 { padding: 0; } .container { flex-direction: row; display: inline-block; .date-title { &:nth-child(2), &:nth-child(4) { float: right; } &:nth-child(5) { width: 100%; margin-bottom: 5px; border: none; } height: 85px; width: 49%; margin-top: 10px; float: left; margin-right: 0px; label { font-size: 13px; } img { width: 40px; } } .arrival, .departure { padding: 10px 5px 27px 15px; } .adults, .children { padding-top: 10px; .btn-group { margin-top: -28px; .dropdown-menu { min-width: 80px; top: 100%; left: 0; } .btn { width: 80px; font-size: 50px; margin-top: 10px; } } } .find_btn { .text-find { padding-top: 23px; font-size: 12px; } } } } .item { .carousel-caption { transform: translate(-50%, -55%); h1 { font-size: 30px; margin-bottom: 0px; } p { letter-spacing: 2px; font-size: 16px; margin-top: 7px; .line-t { width: 15px; margin-right: 7px } .line-b { width: 15px; margin-left: 5px; } } } } } /* end-section-slider */ .header-sky { &.header-top-sky { .menu-header {} .navbar .navbar-nav { margin-top: 0px !important; .dropdown-menu { background: transparent; -webkit-box-shadow: none; box-shadow: none; } } .navbar-toggle { margin-top: 15px; margin-bottom: 15px; } } .header-top { line-height: 28px; border: none; .header-top-left { span { margin-right: 15px; i { font-size: 10px; padding-right: 3px; } } } .header-top-right { .icon-v3-top { margin-right: 0; .fa { font-size: 12px; } } .dropdown-menu { min-width: 90px; } } ul { li { a { font-size: 12px; padding: 6px 10px; } } } } .navbar-toggle { margin-top: 12px; border: 1px solid white; border-radius: 0px; .icon-bar { background: #FFF; } } .navbar { .navbar-header { .navbar-brand { padding-top: 10px !important; img { width: 70%; } } } .page { margin-top: 8px !important; } height: 65px; .navbar-collapse { border: none; -webkit-box-shadow: none; box-shadow: none; margin-right: -15px; margin-left: -15px; height: 100vh; } .navbar-nav { background: rgba(9, 8, 8, 0.79); margin-top: 11px; li { padding: 10px 15px !important; width: 100%; display: inline-block; .submenu-hover { min-width: 160px; margin-left: 20px; -webkit-box-shadow: none !important; box-shadow: none !important; margin-bottom: -15px; .submenu-hover1 { .caret { top: -20px; } } .dropdown-margin { margin-left: 20px; margin-top: 0px; } li { a { position: relative; padding: 5px 20px; color: #FFF !important; display: block; } &:hover { a { background: transparent; color: $color-hover !important; } .dropdown-margin { li { a { color: #FFF !important; &:hover { color: $color-hover !important; } } } } } } } } .dropdown { &.open { .dropdown-toggle { .caret { border-bottom: 0px dashed; border-top: 4px dashed; } } } .dropdown-toggle { .caret { float: right; margin-top: 7px; right: 0px; } } } } } } /* 404-page */ .body-page { &.page-v3 { .content { .h1-v3 { font-size: 55px !important; } .h3-v3 { font-size: 30px !important; } .pp-v3 { color: #C4C4C4; font-size: 20px; } .wrap { margin: 27px 0; #timer { border: 2px solid #fff; display: inline-block; .padding { padding-right: 15px; &:last-child { padding: 0px; padding-right: 15px !important; } } padding: 0; #days { font-size: 27px; } #hours { font-size: 27px; &:before, &:after { left: -5%; height: 3px; width: 3px; } } #minutes { font-size: 27px; &:before, &:after { left: 0%; height: 3px; width: 3px; } } #seconds { font-size: 27px; &:before, &:after { left: -15%; height: 3px; width: 3px; top: 39%; } &:after { top: 56%; } } span { font-size: 12px; } } } } } &.page-login { height: 70rem; } .content { .navbar-form { .form-control { width: 100%; } .btn { margin-left: 10px; } } } } .page-v1 { .content { .sky-h3 { font-size: 30px; } .p-v1 { font-size: 14px !important; } } } /* END/404-page */ .section-map-v4 { iframe { height: 27rem; } } .section-map { height: 300px; iframe { height: 30rem; } } .video-v4 { .section-video { .btn-play { width: 40px; height: 40px; } } } .body-room-1 { .room-wrap-1 { .content { ul { li { width: calc(50% - -50%) !important; } } } } } .body-room-2 { .wrap-room2 { .img, .img1 { &:before { right: 7%; width: 86%; bottom: 0; height: 10%; top: auto; } } .text { padding-left: 80px; padding-right: 80px; padding-top: 0px; margin-top: -25px; .h2-rooms { font-size: 30px; } p { font-size: 14px; } .h5-room { margin-bottom: 16px; margin-top: 12px; } } } } .body-room-3 { .wrap-room-3 { .wrap-item { .text-room-3 { margin-left: 40px; margin-right: 40px; .img1, .img2 { display: none; } .text { width: auto; .line { display: none; } } } } } } .body-room-4 { .wrap-room-4 { .wrap-item { .text-room-4 { margin-left: auto; &.room-right { margin-right: auto; } .text { padding: 0; .h2-rooms { font-size: 20px; margin-top: 0; } .h5-room { font-size: 12px; margin-top: 10px; margin-bottom: 15px; } p { font-size: 12px; } } .img1 { display: none; } } } } } .body-room-5 { .wrap-room-5 { .wrap-item { &:hover { .img:before { opacity: 0.7; @include transition-3; overflow: visible; } } .img { position: relative; &:before { bottom: 0; left: 0; right: 0; top: 50%; position: absolute; content: ''; opacity: 0; pointer-events: none; background-color: transparent; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#1e1818)); background: -webkit-linear-gradient(top, transparent, #1e1818); background: -moz-linear-gradient(top, transparent, #1e1818); background: -ms-linear-gradient(top, transparent, #1e1818); background: -o-linear-gradient(top, transparent, #1e1818); @include transition-3; overflow: hidden; } } .text-room-5 { bottom: 10px; left: 10px; .h2-rooms { font-size: 15px; margin: 0; margin-bottom: 3px; } .h5-room { font-size: 10px; margin: 0; } } .text-hover { display: none; } } } } .banner-tems { padding-top: 130px; } .check-out { .col-lg-offset-1 { margin-left: auto; } .col-lg-5 { width: auto; } .card { display: block !important; margin-left: 25px; margin-top: 10px; } } .section-event-restaurant { .event-restaurant { .event-restaurant_header { margin-top: -20px; text-align: center; margin-bottom: 50px; padding-right: 0px; p { font-size: 15px; } } .event-restaurant_content { .text { h2 { font-size: 15px !important; } } } } } .section-blog, .blog-detail { padding-bottom: 35px !important; &.blog-detail { .blog-content { .share-tag, .comments, .comment-respond { margin-left: 0px; } } } .blog { .sidebar { margin-right: 0px; } } } .section-team { padding-bottom: 60px; padding-top: 30px; } .section-about { .wrap-about { .about-item { .no-padding-right { padding-right: 15px; .text { padding: 0; margin: 0; } } .no-padding-left { padding-left: 15px; .text { padding: 0; margin-top: 20px; } } } } } .section-statistics { padding-top: 30px; padding-bottom: 50px; .statistics { .statistics_content { margin-top: -20px; .item { .count { font-size: 35px; } span { font-size: 13px; } } } } } } /* END/768PX*/ @media (max-width: 480px) { .gallery__controls-buttons { top: 40%; } .body-room-2 { .wrap-room2 { margin-bottom: 40px; .img, .img1 { &:before { content: initial; } } .text { padding: 0; margin: 0; .h2-rooms { font-size: 20px; } p { font-size: 14px; } .h5-room { margin-bottom: 10px; margin-top: 12px; font-size: 14px; } } } } .body-room-1 { .room-wrap-1 { .room-item-1 { .bottom { .btn { width: 115px; } } } } } .body-room-3 { .wrap-room-3 { .wrap-item { .text-room-3 { margin-left: 0px; margin-right: 0px; .img1, .img2 { display: none; } .text { width: auto; padding: 0; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); .h2-rooms { font-size: 20px; } .h5-room { margin-bottom: 10px; margin-top: 12px; font-size: 14px; } p { font-size: 14px; } .line { display: none; } } } } } } .body-room-4 { .wrap-room-4 { .wrap-item { margin-bottom: 60px; .text-room-4 { .text { padding: 17px 0 0 0; .h2-rooms { font-size: 20px; } .h5-room { font-size: 14px; } p { font-size: 14px; } } } } } } .body-room-5 { .wrap-room-5 { .wrap-item { .text-room-5 { bottom: 15px; left: 15px; .h2-rooms { font-size: 20px; } .h5-room { font-size: 14px; } } } } } .body-room-6 { .wrap-room-6 { .wrap-item { .text, .text-1 { h2 { font-size: 24px; } p { font-size: 13px; } ul { li { font-size: 12px; } } } } } } .page-v1 { .content { .form-group { width: 100% !important; } .form-control { width: 100% !important; } .sky-h3 { font-size: 24px; } } } .col-xs-pull-6 { right: 0; } .col-xs-push-6 { left: 0; } .col-xs-6 { width: 100%; } .events .owl-carousel .owl-nav .owl-prev::before { margin-left: -25px; } .events-v2 { .events-title { text-align: initial; } .line-v2 { width: 290px; margin-left: 0; } } .header-sky { &.header-top-sky { .menu-header {} .navbar-toggle { margin-top: 15px; margin-bottom: 15px; } } .header-top { margin: 0; .header-top-left { display: none; } ul { li { a { font-size: 11px; .caret { border-top: 3px dashed; border-top: 3px solid \9; border-right: 3px solid transparent; border-left: 3px solid transparent; } } } } .header-top-right { margin: 0; text-align: center; .icon-v3-top, ul { float: none; } } } .navbar { height: 65px; margin-top: 0px; .navbar-header { .navbar-brand { padding-top: 10px !important; img { width: 70%; } } } .page-404 { margin-top: 8px !important; } .navbar-nav { margin-top: 8px; li { a { font-size: 12px; } .dropdown-menu { min-width: 160px; margin-top: auto; li { a { padding: 5px 20px; } } } } } } .navbar-toggle { margin-top: 15px; } } .footer-sky { &.footer-sky-v4 { .footer-top { padding: 0; h2 { font-size: 30px; } p { font-size: 12px; } } } .footer-top { &.footer-top-v3 { .input-group { width: 100% !important; } } .textbox { .form-inline { .form-group { .input-group { width: 100%; } } } } } .footer-mid { .padding-footer-mid { .col-xs-4 { width: 100%; } padding: 15px 0px 40px 0px; .list-content { ul { li { padding-left: 10%; text-align: left; } } } } &.footer-v3 { .padding-footer-mid { padding: 30px 0px 40px 0px; } } } } .about { &.about-v4 { margin-bottom: 6rem; .img-v4 { display: none; } } } /*TESTIMONIALS */ .testimonials { &.testimonials-v2 { .testimonials-content { top: 20% !important; .content-testimonials { padding: 0; p { font-size: 10px; padding: 0; text-align: justify; margin-bottom: 20% !important; } .testimonials-pp { &:before, &:after { font-size: 30px; } } .title-tes { .line { font-size: 9px; padding-left: 7px; margin-left: 5px; } .sky-h5 { font-size: 14px; } } } } } .testimonials-h { .testimonials-content { .img-testimonials { margin-bottom: 0px; } .testimonials-p { font-size: 10px; padding: 0; margin-bottom: 0; } .sky-h5 { font-size: 14px; } .testimonials-p1 { font-size: 13px; margin-bottom: 5px; } } } } /* END / TESTIMONIALS */ .section-slider { .check-avail { position: inherit; background: rgba(2, 2, 2, 0.78); .container { flex-direction: column; .date-title { height: 85px; width: 100%; margin-top: 10px; label { font-size: 14px; } img { width: 40px; } } .arrival, .departure { padding: 10px 5px 27px 15px; } .adults, .children { padding-top: 10px; .btn-group { margin-top: -28px; .dropdown-menu { min-width: 80px; top: 101%; left: 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.47); } .btn { width: 80px; font-size: 50px; margin-top: 10px; } } } .find_btn { .text-find { padding-top: 23px; font-size: 12px; } } } } .item { img { // height: 40em; } .carousel-caption { transform: translate(-50%, -55%); h1 { font-size: 32px; margin-bottom: 0px; } p { font-size: 14px !important; letter-spacing: 2px; .line-t { width: 10px; margin-right: 5px; } .line-b { width: 10px; margin-left: 3px; } } } } } /* ROOMS */ .rooms { &.rooms-v4 { .wrap-rooms { .wrap-box-v4 { .rooms-content { padding-top: 0px; padding-bottom: 0px; .sky-h4 { margin-bottom: 3px; font-size: 20px !important; } .price { font-size: 13px !important; } } .content { .btn { font-size: 12px; height: 30px; width: 110px; line-height: 18px; margin-top: 5px; } padding: 10px 10px 26px; .rooms-content1 { .sky-h4 { margin-bottom: 5px; font-size: 20px !important; } .price { margin-bottom: 5px; } } p {} .bottom-room { padding: 20px 10px; ul { li { padding: 6px 0px 6px 10px; img { vertical-align: middle; width: 18px !important; } } } } } } } } &.rooms-v2 { .content { p { font-size: 13px !important; } .bottom-room { ul { li { padding-left: 11% !important; font-size: 10px !important; img { width: 20px !important; } } } } } } } /* END/ROOMS */ .body-page { &.page-v3 { .content { .h1-v3 { font-size: 35px !important; } .h3-v3 { margin-bottom: 20px !important; font-size: 18px !important; } .p-v3 { font-size: 15px !important; } .wrap { margin: 27px 0; #timer { border: 2px solid #fff; display: inline-block; .padding { padding-right: 10px; padding-left: 10px; &:last-child { padding: none; padding-right: 10px !important; } } padding: 0; #days { font-size: 25px; } #hours { font-size: 25px; &:before, &:after { left: -8%; height: 3px; width: 3px; } } #minutes { font-size: 25px; &:before, &:after { left: -4%; height: 3px; width: 3px; } } #seconds { font-size: 25px; &:before, &:after { left: -15%; height: 3px; width: 3px; top: 30%; } &:after { top: 50%; } } #hours, #minutes { &:after { top: 50%; } &:before { top: 40%; } } span { font-size: 11px; } } } } } .content { .page404 { font-size: 153px; } .h3-404 { font-size: 23px; margin-top: -22px; } .p-404 { font-size: 12px; } } &.page-login { height: 70rem; .content { padding-top: 200px; .form-control { width: 100%; } } } } .banner-tems { padding-top: 125px; .banner-content { h2 { font-size: 20px; margin-top: 10px; margin-bottom: 5px; } p { font-size: 14px; } } } .check-out { h2 { font-size: 16px; } .check-right { .checkout_cart { padding: 0px 10px 15px 10px; } .checkout-option { .card { .img-responsive { width: 40px; } } } } } .body-restaurant { .restaurant_item { .text { margin-top: 20px; margin-bottom: 20px; } } } .body-restaurant-1, .body-restaurant-2 { .restaurant_item { .img { float: none !important; width: 100% !important; } .text { margin-top: 15px !important; } } } .body-restaurant-3 { .reservation { padding: 25px 15px; } } .wrap-gallery-restaurant { .gallery-restaurant { .h2-rooms { font-size: 25px; margin-bottom: -10px; } } } .section-blog { .blog { .sidebar { margin-right: 0px; } .post { .entry-media { .wrap { .timer { padding: 0 5px !important; .padding { padding: 5px; font-size: 14px !important; span { font-size: 8px; } } } } .posted-on { display: none; } } .entry-header, .entry-content, .entry-footer { padding-left: 0; } } .page-navigation { text-align: center; margin-top: 40px; .first { margin-right: 20px; } .last { margin-left: 5px; margin-right: 0; } li { margin-right: 15px; } } } } .section-about { .wrap-about { .about-item { .heading { font-size: 20px; } } } } .section-statistics { padding-top: 10px; padding-bottom: 30px; .statistics { .heading { font-size: 20px; } .statistics_content { margin-top: -20px; .item { margin-top: 25px; .count { font-size: 20px; margin-bottom: -10px; } span { font-size: 7px; } } } } } .section-team { .sub-heading { font-size: 15px; } } } /* END /480 */ @media (min-width: 580px) and(max-width:768px) { .rooms-v4 { .wrap-rooms { .wrap-box-v4 { .rooms-content { .sky-h4 { font-size: 20px; margin-bottom: 3px; } .price { font-size: 12px !important; margin-bottom: 5px; } } .content { .wrap-content { position: absolute; top: 50%; right: 0; left: 0; transform: translate(0%, -50%); padding: 25px; } .btn { font-size: 13px !important; height: 35px !important; width: 125px !important; line-height: 21px !important; margin-top: 5px !important; } padding: 15px 10px 26px; .rooms-content1 { .sky-h4 { font-size: 20px; margin-bottom: 5px; } .price { font-size: 15px !important; margin-bottom: 5px; } } p { font-size: 11px !important; } .bottom-room { padding: 25px 5px !important; ul { li { padding: 3px 0px 3px 10px !important; img { vertical-align: middle; width: 18px !important; } } } } } } } } } @media (min-width: 480px) and(max-width:580px) { .rooms-v4 { .wrap-rooms { .wrap-box-v4 { .rooms-content { padding-top: 0px; padding-bottom: 0px; .sky-h4 { font-size: 16px; margin-bottom: 3px; } .price { font-size: 10px !important; margin-bottom: 5px; } } .content { .wrap-content { position: absolute; top: 50%; right: 0; left: 0; transform: translate(0%, -50%); padding: 5px; } .btn { font-size: 9px !important; height: 22px !important; width: 85px !important; line-height: 10px !important; margin-top: -15px !important; } padding: 15px 10px 26px; .rooms-content1 { .sky-h4 { font-size: 15px; margin-bottom: 5px; } .price { font-size: 12px !important; margin-bottom: 0px; } } p { font-size: 11px !important; } .bottom-room { padding: 10px !important; ul { li { padding: 2px 0px 3px 5px !important; font-size: 9px !important; img { vertical-align: middle; width: 18px !important; } } } } } } } } .page-v2 { .content { .field-icon {} } } } @media (min-width: 768px) { .navbar-nav .dropdown-menu .caret { transform: rotate(-90deg); } .submenu-hover1 { position: relative; .dropdown-margin { position: absolute; left: 100% !important; top: 0; margin: 0; border: none; padding: 0; box-shadow: 1px 1px 4px; } } .section-blog, .blog-detail { padding-bottom: 55px !important; } }