@charset "utf-8";

/*
Theme Name: Captura - Brand & Product Photographer HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

Responsive stylesheet - desktop first: 1399 / 1199 / 991 / 767 / 575
*/

/*======================
(min-width: 1600px)
========================*/
@media (min-width: 1600px) {
  /* 1. General */
  .container {
    max-width: 1440px;
  }

  /* 9. Home One */
  .hero-nav {
    max-width: 1440px;
  }

  /* 10. Home Two */
  .split-panel {
    padding-left: max(24px, calc((100vw - 1440px) / 2 + 12px));
  }
}

/*======================
(min-width: 1960px)
========================*/
@media (min-width: 1960px) {
  /* 1. General */
  .container {
    max-width: 1560px;
  }
  html {
    font-size: 17px;
  }
  body {
    font-size: 18px;
  }

  /* 9. Home One */
  .hero-nav {
    max-width: 1560px;
  }

  /* 10. Home Two */
  .split-panel {
    padding-left: max(24px, calc((100vw - 1560px) / 2 + 12px));
  }
}

/*======================
(max-width: 1399px)
========================*/
@media (max-width: 1399px) {
  /* 1. General */
  .sec-pt-130 {
    padding-top: 110px;
  }
  .sec-pb-130 {
    padding-bottom: 110px;
  }

  /* 3. Header */
  .cp-header .wide {
    padding: 0 20px;
  }
  .header-main .wide {
    gap: 20px;
  }
  .header-top .top-addr {
    display: none;
  }
  /* the theme switch and saved kit live in the offcanvas below 1400: the bar keeps the menu and the booking button */
  .header-actions .is-wish,
  .header-actions .cp-theme-toggle {
    display: none;
  }

  /* 3. Header */
  /* the gap grows with the room: 12px at 1200, about 21px at 1399 */
  .cp-nav > ul {
    gap: clamp(12px, calc(4.5vw - 42px), 22px);
  }
  .cp-nav > ul > li > a {
    font-size: 12px;
    letter-spacing: 0.03em;
  }
}

/*======================
(max-width: 1199px)
========================*/
@media (max-width: 1199px) {
  /* 3. Header */
  .cp-nav {
    display: none;
  }
  .header-main .wide {
    height: 80px;
  }
  .header-top .top-right > a {
    display: none;
  }

  /* 9. Home One */
  .hero-card {
    width: 290px;
  }

  /* 9. Home One */
  .cp-meter {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 10. Home Two */
  .bw-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 11. Home Three */
  .spec-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .spec-bar li:nth-child(4) {
    border-inline-start: 0;
  }
  .spec-bar li:nth-child(n+4) {
    border-top: 1px solid var(--cp-line);
  }

  /* 13. Booking, Contact & Account */
  .wz-choices {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 14. Captura Pages */
  .cp-filterbar .fb-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cp-filterbar .fb-search {
    grid-column: 1 / -1;
  }
  .cp-masonry {
    column-count: 3;
  }

  /* 14. Captura Pages */
  .brand-index .bi-row {
    grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr) 110px 20px;
  }
  .brand-index .bi-city {
    display: none;
  }

  /* 14. Captura Pages */
  .cp-compare-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: transparent;
    box-shadow: none;
  }
  .cmp-col.is-labels {
    display: none;
  }
  .cmp-col {
    border: 0;
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow);
  }
  .cmp-cell {
    justify-content: space-between;
    gap: 16px;
  }
  .cmp-cell .cmp-l {
    display: inline;
    color: var(--cp-muted);
  }
  .cmp-cell b {
    text-align: end;
  }
}

/*======================
(max-width: 991px)
========================*/
@media (max-width: 991px) {
  /* 1. General */
  .sec-pt-130 {
    padding-top: 90px;
  }
  .sec-pb-130 {
    padding-bottom: 90px;
  }
  .sec-pt-90 {
    padding-top: 70px;
  }
  .sec-pb-90 {
    padding-bottom: 70px;
  }
  .cp-photo-band::after {
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.86) 0%, rgba(20, 20, 20, 0.76) 60%, rgba(20, 20, 20, 0.58) 100%);
  }

  /* 1. General */
  .cp-title {
    margin-bottom: 46px;
  }
  .cp-title.is-split {
    display: block;
  }
  .cp-title.is-split .cp-lead,
  .cp-title .cp-aside {
    margin-top: 22px;
    text-align: start;
  }

  /* 7. Components */
  .title-side {
    align-items: flex-start;
    margin-top: 22px;
    text-align: start;
  }

  /* 8. Captura Components */
  .cp-choices.is-four {
    grid-template-columns: repeat(2, 1fr);
  }
  .cp-choices.is-three {
    grid-template-columns: 1fr;
  }
  .cp-quote .qt-step {
    padding: 28px 22px 12px;
  }

  /* 9. Home One */
  .cp-hero.is-full .swiper-slide {
    padding: 150px 0 140px;
  }
  .cp-hero.is-full .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-card {
    display: none;
  }
  .cp-hero.is-full .swiper-slide::after {
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.62) 0%, rgba(20, 20, 20, 0.42) 70%, rgba(20, 20, 20, 0.3) 100%);
  }

  /* 10. Home Two */
  .cp-hero.is-split .swiper-slide {
    flex-direction: column-reverse;
    min-height: 0;
  }
  .split-panel,
  .split-photo {
    width: 100%;
  }
  .split-panel {
    padding: 70px 24px 140px;
  }
  .split-photo {
    height: 52vw;
  }
  .hero-nav.is-seam {
    bottom: 34px;
    left: 24px;
    transform: none;
  }

  /* 10. Home Two */
  .cp-retouch {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 11. Home Three */
  .cp-hero.is-boxed .swiper-slide {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 50px 30px 110px;
  }
  .box-product {
    width: 100%;
  }
  .box-product img {
    max-width: 420px;
  }
  .hero-nav.is-boxed {
    left: 30px;
    bottom: 34px;
  }

  /* 11. Home Three */
  .cp-ways {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 13. Booking, Contact & Account */
  .wz-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .wz-side {
    position: static;
  }

  /* 14. Captura Pages */
  .pd-body {
    padding: 60px 0 50px;
  }

  /* 14. Captura Pages */
  .cp-space,
  .cp-space.is-flip {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cp-space.is-flip .sp-photo {
    order: 0;
  }
  .space-list {
    gap: 80px;
  }
  .pr-row {
    grid-template-columns: 54px 58px minmax(0, 1fr);
  }
  .pr-row .pr-who {
    grid-column: 3;
    text-align: start;
  }

  /* 15. Blog & Account */
  .account-wrap {
    grid-template-columns: 1fr;
  }
  .account-side {
    min-height: 460px;
  }

  /* 15. Blog & Account */
  .bare-grid {
    grid-template-columns: 1fr;
  }
  .bare-photo-side {
    height: 320px;
  }
  .bare-seal {
    top: auto;
    right: 30px;
    bottom: -60px;
    width: 120px;
    margin-top: 0;
  }
  .bare-inner {
    padding: 90px 24px 70px;
  }
  .bare-inner > .cp-gl {
    display: none;
  }

  /* 16. Subheader */
  .cp-subheader .container {
    min-height: 0;
  }
  .cp-subheader .sub-copy {
    padding: 84px 0 76px;
  }
  .sub-photo {
    width: 40%;
  }

  /* 17. Footer */
  .footer-call {
    padding: 90px 0 84px;
  }
  .footer-main {
    padding: 70px 0 50px;
  }
}

/*======================
(max-width: 767px)
========================*/
@media (max-width: 767px) {
  /* 1. General */
  /* Bootstrap's widest gutter is wider than the container's side padding on a phone: rows would spill past the screen */
  .g-5,
  .gx-5 {
    --bs-gutter-x: 1.5rem;
  }

  /* 2. Preloader */
  .cp-preloader .pre-scene,
  .cp-preloader .pre-shadow {
    top: 62%;
  }
  .cp-preloader .pre-cam {
    transform: rotateX(-17deg) scale(0.72);
  }
  .cp-preloader .pre-shadow {
    width: 380px;
    margin-left: -190px;
  }
  .cp-preloader .pre-logo {
    width: 170px;
  }

  /* 3. Header */
  .header-top {
    display: none;
  }
  .header-actions .is-wish,
  .header-actions .cp-theme-toggle,
  .header-actions .header-btn {
    display: none;
  }

  /* 8. Captura Components */
  .voices-wrap .swiper {
    padding: 14px 0 30px;
    margin: -14px 0 0;
  }

  /* 9. Home One */
  .um-stage {
    aspect-ratio: 1 / 1;
  }
  .um-phone {
    left: 28%;
    top: 6%;
    width: 44%;
    height: 76%;
  }
  .um-spread {
    left: 4%;
    width: 92%;
    top: 4%;
    height: 84%;
  }
  .um-board {
    left: 2%;
    width: 96%;
    top: 20%;
    height: 34%;
    border-width: 6px;
  }

  /* 10. Home Two */
  .bw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bw-plate {
    min-height: 140px;
    padding: 20px 18px 18px;
  }
  .bw-plate .bw-name {
    font-size: 21px;
  }

  /* 11. Home Three */
  .cp-catalogue-form {
    padding: 28px 20px 26px;
  }
  .cat-out {
    grid-template-columns: 1fr 1fr;
  }
  .cat-out li:nth-child(3) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .cat-out li:nth-child(n+3) {
    border-top: 1px solid var(--cp-line);
  }

  /* 14. Captura Pages */
  .cp-filterbar .fb-row {
    grid-template-columns: 1fr;
  }
  .cp-masonry {
    column-count: 2;
    column-gap: 12px;
  }
  .mz-item {
    margin-bottom: 12px;
  }

  /* 14. Captura Pages */
  .cp-pnav {
    grid-template-columns: 1fr 1fr;
  }
  .cp-pnav .pn-all {
    display: none;
  }
  .cp-pnav img {
    display: none;
  }
  .pd-hero img {
    aspect-ratio: 4 / 3;
  }

  /* 14. Captura Pages */
  .brand-index .bi-row {
    grid-template-columns: 72px minmax(0, 1fr) 20px;
    gap: 16px;
  }
  .brand-index .bi-thumb img {
    width: 72px;
    height: 56px;
  }
  .brand-index .bi-kind,
  .brand-index .bi-count {
    display: none;
  }
  .brand-index .bi-name {
    font-size: 22px;
  }

  /* 14. Captura Pages */
  .cp-compare-grid {
    grid-template-columns: 1fr;
  }
  .qs-stick {
    position: static;
  }
  .cp-licence-table,
  .cp-licence-form {
    padding: 24px 18px 20px;
  }
  .cp-licence-table th,
  .cp-licence-table td {
    padding: 12px 6px;
  }
  .cp-licence-table td {
    font-size: 17px;
  }

  /* 15. Blog & Account */
  .author-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 24px;
  }
  .comment-list ul {
    padding-inline-start: 30px;
  }
  .post-nav b {
    display: none;
  }
  .article-rows > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .article-quote {
    padding: 30px 24px;
  }

  /* 16. Subheader */
  .sub-photo,
  .cp-subheader .cp-gl {
    display: none;
  }
  .cp-subheader .sub-copy {
    padding: 66px 0 58px;
  }
}

/*======================
(max-width: 575px)
========================*/
@media (max-width: 575px) {
  /* 1. General */
  .cp-lead {
    font-size: 17.5px;
  }
  /* section titles may wrap on a phone; the heroes keep their set lines */
  h2 .line,
  .cp-h2 .line,
  h3 .line {
    white-space: normal;
  }

  /* 1. General */
  .sec-pt-130 {
    padding-top: 72px;
  }
  .sec-pb-130 {
    padding-bottom: 72px;
  }
  .sec-pt-90 {
    padding-top: 60px;
  }
  .sec-pb-90 {
    padding-bottom: 60px;
  }
  body {
    font-size: 16.5px;
  }

  /* 1. General */
  .cp-btn {
    height: 52px;
    padding: 0 22px;
  }

  /* 1. General */
  .cp-back-top {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }

  /* 3. Header */
  .cp-header .wide {
    padding: 0 16px;
  }
  .header-main .wide {
    height: 70px;
  }
  .cp-logo img {
    height: 19px;
  }
  .header-actions {
    gap: 6px;
  }

  /* 3. Header */
  .cp-header.is-sticky .header-main .wide {
    height: 64px;
  }

  /* 8. Captura Components */
  .cp-fan .fan-stack,
  .cp-fan .fan-meta {
    padding-right: 14%;
  }
  .cp-fan .fan-meta {
    display: block;
  }
  .cp-fan .fan-rate {
    align-items: flex-start;
    margin-top: 14px;
    text-align: start;
  }

  /* 8. Captura Components */
  .cp-choices.is-four,
  .cp-choices.is-two {
    grid-template-columns: 1fr;
  }
  .cp-qsum {
    padding: 30px 22px;
  }

  /* 9. Home One */
  .cp-hero.is-full .swiper-slide {
    min-height: 640px;
    padding: 130px 0 130px;
  }
  .hero-nav {
    bottom: 34px;
    padding: 0 16px;
  }

  /* 9. Home One */
  .cp-quick .quick-panel {
    padding: 26px 20px 24px;
  }

  /* 10. Home Two */
  .split-panel {
    padding: 56px 16px 110px;
  }
  .split-photo {
    height: 74vw;
  }
  .hero-nav.is-seam {
    left: 16px;
  }

  /* 11. Home Three */
  body.cp-framed {
    padding: 8px;
  }

  /* 11. Home Three */
  .cp-hero.is-boxed {
    padding-top: 20px;
  }
  .cp-hero.is-boxed .swiper-slide {
    padding: 40px 20px 100px;
  }
  .box-rate b {
    font-size: 44px;
  }
  .hero-nav.is-boxed {
    left: 20px;
  }

  /* 11. Home Three */
  .spec-bar {
    grid-template-columns: 1fr 1fr;
  }
  .spec-bar li {
    padding: 16px 16px;
    border-top: 1px solid var(--cp-line);
  }
  .spec-bar li:nth-child(-n+2) {
    border-top: 0;
  }
  .spec-bar li:nth-child(odd) {
    border-inline-start: 0;
  }
  .spec-bar li:nth-child(even) {
    border-inline-start: 1px solid var(--cp-line);
  }

  /* 11. Home Three */
  .cw-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 13. Booking, Contact & Account */
  .wz-choices {
    grid-template-columns: 1fr;
  }
  .cp-cal {
    padding: 16px 12px;
  }
  .cd-day {
    font-size: 14px;
  }

  /* 13. Booking, Contact & Account */
  .wz-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .wz-nav {
    flex-wrap: wrap;
  }

  /* 13. Booking, Contact & Account */
  .ab-row {
    grid-template-columns: 70px 1fr;
  }
  .ab-row img {
    width: 70px;
    height: 56px;
  }
  .acc-orders li {
    grid-template-columns: 1fr 1fr;
  }

  /* 14. Captura Pages */
  .pr-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pr-row .pr-who {
    grid-column: auto;
  }
  .sp-photo,
  .cu-photo {
    padding: 0 18px 18px 0;
  }
  .sp-paper,
  .cu-paper {
    inset: 18px 0 0 18px;
  }

  /* 15. Blog & Account */
  .blog-post.is-quote {
    padding: 40px 26px;
  }
  .bp-glyph {
    right: 20px;
    font-size: 80px;
  }
  .post-date {
    left: 16px;
    width: 64px;
    height: 70px;
  }
  .post-date b {
    font-size: 26px;
  }

  /* 15. Blog & Account */
  .account-form,
  .account-side {
    padding: 40px 24px;
  }

  /* 15. Blog & Account */
  .launch-count {
    grid-template-columns: 1fr 1fr;
  }
  .launch-count b {
    font-size: 38px;
  }
  .bare-news {
    flex-direction: column;
  }

  /* 17. Footer */
  .footer-call {
    padding: 72px 0 66px;
  }
  .footer-bottom .coords {
    display: block;
    margin: 6px 0 0;
  }
}