| Current Path : /home/chauffn/vuzelia/2023/templates/travelin/scss/ |
| Current File : /home/chauffn/vuzelia/2023/templates/travelin/scss/responsive.scss |
@media (min-width: 1200px) {
.spbooking .spbooking-container {
max-width: 1320px !important;
}
}
@media (max-width: 1400px) {
.topbar-search-options #topbar-filter-form {
flex-wrap: wrap;
}
}
@media (max-width: 1199px) {
#sp-header.full-header {
padding-left: 15px;
padding-right: 15px;
}
#sp-header.header-with-social {
#sp-menu .social-wrap {
padding-left: 0px;
}
}
.sp-megamenu-parent {
> li {
> a,
span {
padding: 0 10px;
}
}
}
.accomodation-available-rooms .sale-price span {
font-size: 20px;
line-height: 30px;
}
.accomodation-available-rooms .rooms-info-body .spbooking-select {
font-size: 16px;
line-height: 24px;
}
.accomodation-available-rooms .rooms-info-body .title {
font-size: 16px;
line-height: 24px;
}
.topbar-search-options #topbar-filter-form {
flex-direction: column;
}
.topbar-search-options #topbar-filter-form .spbooking-col {
flex: 1 0 33%;
max-width: 33%;
}
.topbar-search-options .filter-button {
padding: 15px 30px;
}
.topbar-search-options .topbar-filter-submit {
font-size: 14px;
}
.topbar-search-options .spbooking-btn-link {
font-size: 14px;
}
.topbar-search-options .topbar-filter .form-groups:after,
.topbar-search-options .topbar-filter .topbar-range:after {
display: none;
}
.topbar-search-options .filter-button {
align-items: center;
}
.spbooking-accomodation-listing
.spbooking-package-info
.spbooking-price-wrap {
flex: 1 0 100%;
max-width: 100%;
}
.spbooking-accomodation-listing
.spbooking-package-info
.spbooking-price-wrap
small {
flex: auto;
}
.spbooking-package .spbooking-price-wrap {
margin-bottom: 5px;
}
.spbooking-accomodation-listing
.spbooking-package-info
.spbooking-price-wrap
span {
font-size: 18px;
line-height: 1.5;
}
.topbar-search-options .filter-button {
padding: 8px 20px;
}
.spbooking-accomodation-listing .spbooking-package-info {
align-items: center;
}
.spbooking-accomodation-listing
.spbooking-package-info
.accomocation-location {
line-height: 1.2;
}
.accomodation-gallery .ac-gallery .image-holder {
height: 400px;
}
.accomodation-info-wrapper .other-info-description {
font-size: 22px;
line-height: 1.4;
}
.accomodation-gallery .carousel-content-wrapper .carousel-title {
font-size: 40px;
line-height: 1.4;
margin-bottom: 10px;
}
.view-packages
.spbooking-package-contents
.spbooking-package
.spbooking-package-info
.spbooking-price-wrap
.spbooking-package-meta {
padding-right: 0;
}
.com-spbooking.view-package {
.tour-overview-details {
padding: 15px;
}
}
.view-package .spbooking-container {
width: auto !important;
}
}
@media (min-width: 992px) {
#sp-header.header-with-modal-menu #offcanvas-toggler.offcanvas {
display: none !important;
}
}
@media (max-width: 991px) {
:root {
--header_height: $header_height_sm;
}
.sp-megamenu-parent {
> li {
> a,
> span {
line-height: $header_height_sm;
}
}
}
#sp-header {
height: $header_height_sm;
.logo {
height: $header_height_sm;
}
&.header-with-modal-menu {
#offcanvas-toggler {
display: flex !important;
}
#modal-menu-toggler {
display: none;
}
}
&.full-header-center,
&.header-with-modal-menu,
&.full-header-left,
&.lg-header,
&.header-with-social {
#offcanvas-toggler.mega {
display: flex !important;
}
}
&.lg-header {
#offcanvas-toggler.mega {
display: none !important;
}
.offcanvas-toggler-left.offcanvas {
display: flex !important;
}
}
}
#sp-header-topbar {
.container-inner {
> .row {
min-height: $header_height_sm;
}
}
}
#modal-menu {
top: $header_height_sm;
}
#offcanvas-toggler {
height: $header_height_sm;
line-height: $header_height_sm;
}
#sp-logo {
&.has-border > .sp-column {
border-right: none;
padding-right: 0px;
}
}
#sp-menu .social-wrap,
#sp-logo.has-border {
&:after {
display: none;
}
}
#sp-logo.has-border {
padding-right: 15px;
}
#sp-menu .social-wrap {
padding-left: 15px;
}
#sp-header.header-with-modal-menu.center-layout .sp-contact-info,
#sp-header.header-with-modal-menu.classic-layout .sp-contact-info {
display: none;
}
#sp-header-topbar {
margin: 10px 0px;
.container-inner {
padding-bottom: 10px;
}
}
#sp-footer1 {
margin-bottom: 50px;
}
#sp-footer .container-inner {
padding: 50px 0px 50px 0px;
}
#sp-bottom {
padding: 50px 0 20px;
}
#sp-footer ul.menu li a {
font-size: 14px;
line-height: 20px;
}
#sp-footer ul.menu li {
padding: 8px 0px 8px 15px;
}
#sp-footer .container-inner {
padding: 40px 0px 50px 0px;
}
// Home page
.spbooking-search {
form {
padding: 15px;
.spbooking-row {
.spbooking-col {
padding: 0px 15px;
width: 50%;
flex: 0 0 50%;
input.form-control,
.toggle-person-info,
select.form-control {
padding: 15px 20px;
border-right: 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
}
.custom-width {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 15px;
.btn.search-btn {
width: auto;
padding: 12px 25px;
}
}
}
}
}
.blog {
.leading-article-top-title-wrap {
h2 {
font-size: 26px;
line-height: 36px;
}
p {
font-size: 62px;
line-height: 72px;
}
}
}
.article-list {
.article {
margin-bottom: 40px;
.article-header {
h2 {
font-size: 20px;
line-height: 30px;
}
}
.article-info {
span {
font-size: 15px;
line-height: 25px;
}
}
}
&.articles-leading {
.article-body {
padding: 40px;
}
.article-header {
h2 {
font-size: 32px;
line-height: 42px;
}
}
.article-info {
margin-bottom: 10px;
}
}
}
.accomodation-available-rooms .rooms-info-body {
.spbooking-col {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.spbooking-select-text {
margin: 0px;
}
}
.accomodation-gallery
.carousel-content-wrapper
.spbooking-btn.spbooking-btn-primary {
font-size: 16px;
line-height: 20px;
padding: 13px 20px;
}
.accomodation-gallery .carousel-content-wrapper .carousel-title {
font-size: 40px;
line-height: 60px;
}
.topbar-search-options #topbar-filter-form .spbooking-col {
flex: 1 0 50%;
max-width: 50%;
}
.sp-page-title .sp-page-title-heading {
font-size: 54px;
line-height: 70px;
}
.com-spbooking.view-accomodations .sp-module-title {
font-size: 44px;
line-height: 56px;
}
.spbooking-accomodation-module .jeetravel-accomodation-wrap {
margin: 0px;
}
.tour-activities {
.itenary-tab {
.itenary-nav {
padding-right: 20px;
li {
margin-bottom: 20px;
padding-bottom: 20px;
}
}
.itenary-panel {
padding-left: 20px;
.spbooking-activity-content ul li {
padding-bottom: 20px;
}
}
}
}
.com-users.view-login .logout {
margin-left: 0%;
}
.spbooking-package .spbooking-price-wrap {
display: flex;
flex-direction: inherit;
}
.view-packages
.spbooking-package-contents
.spbooking-package
.spbooking-package-info
.spbooking-price-wrap
.spbooking-package-meta {
padding-right: 0;
}
.view-package
.package-details-top-wrapper
.spbooking-package-details-image-thumb
.package-gallery
.image-holder {
max-height: 400px;
}
.view-package .package-details-top-wrapper .spbooking-details-top-left {
padding-left: 35px;
padding-bottom: 20px;
padding-top: 10px;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
p.spbooking-title {
font-size: 52px;
line-height: 64px;
}
.view-package .spbooking-container.package-details-bottom-wrapper,
.view-package
.spbooking-container.package-details-bottom-wrapper
.tour-overview {
padding: 0 20px;
}
.view-package .package-details-gallery-bottom-wrap .spbooking-details-custom {
padding: 0;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
.spbooking-title-bottom
.spbooking-details-date-wrap
span.spbooking-details-start-date
div
p {
font-size: 20px;
line-height: 28px;
}
.spbooking-details-image .package-gallery .image-holder {
height: 350px;
}
.com-spbooking .owl-carousel.owl-theme .owl-nav {
display: none;
}
.topbar-search-options .topbar-filter .form-groups,
.topbar-search-options .topbar-filter .topbar-range {
margin-bottom: 10px;
}
.spbooking-search form .spbooking-row .spbooking-col .form-groups:after,
.spbooking-search form .spbooking-row .spbooking-col .topbar-range:after {
display: none;
}
.spbooking-search form .spbooking-row .spbooking-col input.form-control,
.spbooking-search form .spbooking-row .spbooking-col .toggle-person-info {
padding: 0px;
margin: 0px;
border: none;
}
html.coming-soon .coming-soon-title {
font-size: 54px;
line-height: 60px;
}
}
@media (max-width: 767px) {
body .sppb-btn,
body .btn {
padding: 1em 1.2em;
font-size: 14px;
}
#sp-menu .social-wrap {
padding-left: 10px;
&:after {
display: none;
}
}
#sp-header .menu-wrap {
display: none;
}
.home-slider {
&.sp-slider {
.sp-nav-control {
max-width: 120px;
top: unset !important;
bottom: 30px;
}
}
}
// Home page
.spbooking-search {
form {
padding: 10px;
.spbooking-row {
.spbooking-col {
width: 100%;
flex: 0 0 100%;
input.form-control,
.toggle-person-info,
select.form-control {
padding: 15px 20px;
border-right: 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
}
.custom-width .btn.search-btn {
font-size: 14px;
max-width: auto;
}
}
}
}
.blog {
.leading-article-top-title-wrap {
margin-top: 50px;
h2 {
font-size: 24px;
line-height: 34px;
margin-bottom: 10px;
}
p {
font-size: 44px;
line-height: 54px;
margin-bottom: 25px;
}
}
}
.article-list {
.article {
margin-bottom: 25px;
.article-intro-image {
margin-bottom: 10px;
}
.article-header {
margin-bottom: 5px;
h2 {
font-size: 18px;
line-height: 28px;
margin-bottom: 8px;
}
}
.article-info {
span {
font-size: 14px;
line-height: 24px;
}
}
}
&.articles-leading {
.article {
margin-bottom: 40px;
.article-intro-image {
margin-bottom: 15px;
}
.article-info {
margin-bottom: 6px;
span {
color: $text-color;
}
}
}
.article-body {
max-width: 100%;
position: relative;
padding: 0;
}
.article-header {
margin-bottom: 0px;
h2 {
font-size: 22px;
line-height: 32px;
margin-bottom: 0px;
a {
color: $text-color;
}
}
}
}
}
.intro-article-top-title-wrap {
margin-bottom: 25px;
h2 {
margin-bottom: 15px;
}
}
.view-category {
#sp-main-body {
padding: 50px 0px;
}
}
.pagination {
margin: 0px !important;
}
.accomodation-available-rooms .rooms-info-body {
.spbooking-col {
flex: 0 0 50%;
max-width: 50%;
}
.spbooking-select-text {
margin: 0px;
}
}
.accomodation-available-rooms .spbooking-room-booknow {
padding: 6px 15px;
font-size: 14px;
}
.accomodation-available-rooms
input.accomodation-checkin-out-range.form-control[type="text"] {
font-size: 14px;
line-height: 24px;
width: 300px;
}
.accomodation-gallery .carousel-content-wrapper {
display: flex;
align-items: flex-start;
padding: 0px 0px 25px 15px;
flex-direction: column;
justify-content: flex-end;
}
.accomodation-gallery .carousel-content-wrapper .carousel-title {
font-size: 26px;
line-height: 34px;
}
.accomodation-gallery .carousel-content-wrapper .carousel-title {
margin-bottom: 0px;
}
.accomodation-gallery .carousel-content-wrapper .carousel-left {
margin: 0px 0px 30px 0px;
}
.accomodation-gallery .carousel-content-wrapper .carousel-price .price {
font-size: 30px;
line-height: 40px;
}
.accomodation-gallery .carousel-content-wrapper .carousel-price {
margin-bottom: 20px;
}
.accomodation-gallery
.carousel-content-wrapper
.spbooking-btn.spbooking-btn-primary {
padding: 8px 15px;
}
.accomodation-info-wrapper {
margin: 0px 0px 50px 0px;
}
.accomodation-gallery {
margin-bottom: 50px;
}
.accomodation-overview .amenities-wrapper ul {
grid-template-columns: 1fr;
}
.accomodation-overview .amenities-wrapper .amenities-holder span:last-child {
font-size: 16px;
}
.com-spbooking.view-accomodation .rating-travellers-rating .review-category {
font-size: 16px;
line-height: 26px;
}
.com-spbooking.view-accomodation
.rating-travellers-rating
li.traveller-review-item {
margin-bottom: 10px;
}
.accomodation-info-wrapper .other-info-description {
font-size: 20px;
line-height: 30px;
}
.accomodation-info-wrapper .other-info-title {
font-size: 14px;
line-height: 18px;
}
.accomodation-info-wrapper .accomodation-info-item:not(:last-child) {
padding-bottom: 0px;
}
.accomodation-info-wrapper .accomodation-info-item {
margin-bottom: 20px;
}
.accomodation-map-wrapper {
margin-bottom: 50px;
}
.accomodation-user-comments .comment-header .user-name {
font-size: 20px;
line-height: 32px;
}
.user-feedback .spbooking-btn.spbooking-btn-primary {
font-size: 14px;
line-height: 20px;
height: 48px;
}
.accomodation-user-comments .comment-header img {
width: 44px;
height: 44px;
}
.accomodation-user-comments ul li {
padding: 0px 0px 20px 60px;
}
.com-spbooking.view-accomodation
.accomodation-policies
.accomodation-policies-title {
font-size: 18px;
line-height: 28px;
}
.accomodation-gallery .owl-carousel.owl-theme .owl-nav [class*="owl-"] {
width: 44px;
height: 44px;
}
.sppb-addon-optin-forms input[type="email"]:not(.form-control) {
padding: 10px 0px 8px 0px;
}
.topbar-search-options #topbar-filter-form .spbooking-col {
flex: 1 0 100%;
max-width: 100%;
}
.sp-page-title .sp-page-title-heading {
font-size: 34px;
line-height: 45px;
}
.sp-page-title {
padding: 120px 0px 100px 0px;
}
.com-spbooking.view-accomodations .sp-module-title {
font-size: 34px;
line-height: 45px;
}
.spbooking-accomodation-module .accomodation-img-wrap {
height: 120px;
flex: 1 0 140px;
max-width: 140px;
margin-right: 20px;
}
.spbooking-accomodation-module .accomodation-title h5 {
font-size: 20px;
line-height: 30px;
}
.spbooking-accomodation-module .spbooking-price-wrap > span {
font-size: 20px;
line-height: 30px;
}
.sppb-addon-accordion {
.sppb-panel-faq {
padding: 10px 0px;
.sppb-panel-heading {
.sppb-panel-title {
font-size: 16px;
line-height: 26px;
}
}
}
}
.tour-activities {
.itenary-title {
padding-bottom: 10px;
margin-bottom: 25px;
}
.itenary-tab {
display: block;
.itenary-nav,
.itenary-panel {
width: 100%;
padding: 0px;
}
.itenary-nav {
li {
margin-bottom: 15px;
padding-bottom: 15px;
a.nav-link {
font-size: 18px;
line-height: 28px;
margin-bottom: 2px;
}
}
}
.itenary-panel {
.time-slot.text-mute {
font-size: 14px;
line-height: 22px;
margin-bottom: 0px;
.activity-time-image {
padding-right: 10px;
}
span span {
font-size: 18px;
line-height: 24px;
}
}
.spbooking-activity-content ul li {
padding-bottom: 8px;
}
.activity-desc {
padding-left: 35px;
}
}
}
}
.topbar-search-options .topbar-filter .form-groups:after,
.topbar-search-options .topbar-filter .topbar-range:after {
display: none;
}
.topbar-search-options .topbar-filter .topbar-search-wrapper:after {
right: 0px;
}
.topbar-search-options .topbar-filter .topbar-range .range-icon {
right: 0px;
}
.com-spbooking.view-packages
.topbar-search-options
.spbooking-col:nth-child(2)
.topbar-search-wrapper:after {
right: 0px;
}
.spbooking-view-pakcages .topbar-search-wrapper .range-icon {
right: 0px;
}
.com-spbooking.view-packages
.topbar-search-options
.topbar-search-wrapper
.range-icon {
top: 30px;
}
.topbar-search-options .topbar-filter .person-caret {
right: 0px;
}
.spbooking-search form .spbooking-row .spbooking-col input.form-control,
.spbooking-search form .spbooking-row .spbooking-col .toggle-person-info {
padding: 0px;
margin: 0px;
border: none;
}
.article-details .article-header h1,
.article-details .article-header h2 {
max-width: 100%;
font-size: 25px;
line-height: 1.4;
padding-bottom: 24px;
}
.article-details .header-info-wrap {
max-width: 100%;
bottom: 0px;
padding: 0px;
}
.article-details .article-details-top-img-wrapper {
margin-bottom: 0px;
}
.article-details .article-full-image {
margin-bottom: 20px;
}
.view-packages .spbooking-sidebar {
border: none !important;
padding: 0;
}
.view-packages .spbooking-sidebar .custom-checkbox {
margin-bottom: 5px;
font-size: 13px;
line-height: 1.4;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
.spbooking-package-details-price-wrap {
margin-top: 10px;
padding-top: 10px;
width: 100%;
}
html.coming-soon .coming-soon-title {
font-size: 34px;
line-height: 40px;
margin-bottom: 30px;
max-width: 100%;
}
}
@media (max-width: 575px) {
:root {
--header_height: $header_height_xs;
}
.sp-megamenu-parent {
> li {
> a,
> span {
line-height: $header_height_xs;
}
}
}
#sp-header {
height: $header_height_sm;
.logo {
height: $header_height_sm;
}
}
#sp-header-topbar {
.container-inner {
> .row {
min-height: $header_height_xs;
}
}
}
#modal-menu {
top: $header_height_xs;
}
#offcanvas-toggler {
height: $header_height_sm;
line-height: $header_height_sm;
}
#sp-header {
.sp-module {
margin-left: 10px;
.sp-sign-in .text {
display: none;
}
}
}
#sp-menu {
ul.social-icons {
> li:not(:last-child) {
margin-right: 10px;
}
}
}
#sp-header {
&.lg-header {
.top-part {
border-bottom: none;
}
#sp-contact {
order: 1;
}
#sp-logo {
order: 3;
}
#sp-social {
order: 2;
.sp-column {
justify-content: center !important;
}
.social-icons {
margin: 0;
> li:not(:last-child) {
margin-right: 10px;
}
}
}
.sp-contact-info {
text-align: center;
margin: 5px 0;
}
}
}
.header-has-modules {
.container-inner > .row {
flex-wrap: wrap !important;
}
#offcanvas-toggler {
height: auto;
line-height: 1.2;
}
}
html.coming-soon #coming-soon-countdown {
.coming-soon-days,
.coming-soon-hours,
.coming-soon-minutes,
.coming-soon-seconds {
width: 50%;
margin-bottom: 15px;
.coming-soon-number {
font-size: 2.5rem;
}
.coming-soon-string {
font-size: 14px;
}
}
}
//result page btn group
.view-search #search-form {
.btn-group {
flex-wrap: wrap;
}
button,
.btn {
border-radius: 3px;
}
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
p.spbooking-title {
font-size: 42px;
line-height: 54px;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
p.spbooking-title {
margin-bottom: 10px;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
.spbooking-major-activities
.spbooking-details-custom
.spbooking-custom-item
.spbooking-custom-description
.package-details-short-intro {
width: 100%;
margin-bottom: 30px;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
.spbooking-major-activities
.spbooking-details-major-activities
.spbooking-major-activities-item {
margin-right: 30px;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
.spbooking-package-details-price-wrap,
.view-package
.spbooking-container.package-details-bottom-wrapper
.spbooking-details-overview
.description {
width: 100%;
}
.package-details-gallery-bottom-info {
padding: 0 35px;
.left-content,
.right-content {
width: 100%;
}
}
.view-package
.package-details-gallery-bottom-wrap
.spbooking-details-custom
.left-content
h4 {
font-size: 28px;
line-height: 32px;
}
.view-package
.package-details-gallery-bottom-wrap
.spbooking-details-custom
.left-content
p {
font-size: 16px;
margin-bottom: 15px;
}
.view-package
.package-details-gallery-bottom-wrap
.spbooking-details-custom
.right-content
.content-wrap
p {
font-size: 16px;
}
.view-package
.package-details-top-wrapper
.spbooking-details-top-left
.spbooking-title-bottom
.spbooking-details-date-wrap
span.spbooking-details-start-date
i {
font-size: 25px;
}
.spbooking-details-image .package-gallery .image-holder {
height: 175px;
}
.accomodation-available-rooms .sale-price {
font-size: 12px;
line-height: 1.3;
flex-direction: column;
}
.view-packages
.spbooking-package-contents
.spbooking-package
.spbooking-package-info
.spbooking-price-wrap
.spbooking-package-meta
small {
font-size: 12px;
line-height: 1.4;
}
.view-packages
.spbooking-package-contents
.spbooking-package
.spbooking-package-info
.spbooking-price-wrap
.spbooking-package-meta
span {
padding-left: 0px;
font-size: 12px;
line-height: 1.4;
}
.view-packages
.spbooking-package-contents
.spbooking-package
.spbooking-package-info
.spbooking-price-wrap
.price
ins {
font-size: 20px;
line-height: 1.4;
}
.view-package
.package-details-top-wrapper
.spbooking-package-details-image-thumb
.package-gallery
.image-holder {
height: 300px;
}
.view-package
.spbooking-container.package-details-bottom-wrapper
.spbooking-details-overview
h4.overview {
font-size: 22px;
line-height: 1.4;
}
.view-package
.spbooking-container.package-details-bottom-wrapper
.spbooking-details-overview
.description {
width: 100%;
font-size: 14px;
line-height: 1.4;
}
}