@font-face {
font-family: "Betmo";
src: url(//katrinbark.com/wp-content/themes/katebark/assets/fonts/Betmo-Regular-Cyr.woff2);
src:
local("OpenSans Regular"),
local("Betmo-Regular-Cyr.woff2"),
url(//katrinbark.com/wp-content/themes/katebark/assets/fonts/Betmo-Regular-Cyr.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--primary-color: #c01133;
--primary-color-hover: #b6082b;
--pink: #fee5e7;
--sm: 640px;
--md: 768px;
--lg: 1024px;
--xl: 1280px;
}
*,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
overflow-x: hidden;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Playfair Display", Verdana, sans-serif;
font-style: normal;
font-optical-sizing: auto;
line-height: 1.5;
}
a {
text-decoration: none;
transition: color 0.3s ease;
}
p:not(:last-child):not([class]) {
margin-bottom: 5px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
button {
border: 0;
background-color: transparent;
-webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
.container {
width: 100vw;
margin-inline: auto;
padding-inline: 16px;
}
@media (min-width: 1280px) {
.container {
width: 1280px;
padding-inline: 40px;
}
}
.container--flow {
width: 100vw;
max-width: 1920px;
padding-inline: 0;
}
.button {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color);
padding: 14px 16px;
font-weight: 500;
font-size: 16px;
line-height: 1.2;
text-transform: uppercase;
color: #fff;
transition:
color 0.3s ease,
background-color 0.3s ease;
}
@media (min-width: 768px) {
.button {
padding: 16px 22px;
}
}
@media (min-width: 1280px) {
.button {
padding: 16px 30px;
font-size: 18px;
}
}
.button:hover {
background-color: var(--primary-color-hover);
}
.button-text {
display: flex;
align-items: center;
column-gap: 15px;
color: #000;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.button-text {
font-size: 18px;
}
}
.button-text:hover {
color: var(--primary-color);
}
.button-text--white {
color: #fff;
}
.button-text--white:hover {
color: #fff;
}
.button-text--red {
color: var(--primary-color);
}
.button-text a {
color: inherit;
transition: color 0.3s ease;
}
.button-text span {
display: inline-block;
transition: transform 0.3s ease;
}
.button-text:hover span {
transform: skewX(-20deg);
}
.button-text::after {
content: "";
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow.svg);
width: 40px;
height: 18px;
background-size: 100% 100%;
background-repeat: no-repeat;
transition:
transform 0.3s ease,
background-image 0.3s ease;
}
.button-text:hover::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-red.svg);
}
.button-text--white::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-white.svg);
}
.button-text--white:hover::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-white.svg);
}
.button-text--red::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-red.svg);
}
.button-text--red:hover::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-red.svg);
}
.button-text:hover::after {
transform: translateX(5px);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
} .embla {
display: grid;
}
.embla__viewport {
overflow: hidden;
}
.embla__container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
touch-action: pan-y;
backface-visibility: hidden;
}
.embla__container--horizontal {
grid-auto-flow: row;
touch-action: pan-x;
}
.embla__buttons {
line-height: 0;
}
.embla__dots {
display: grid;
grid-auto-flow: column;
justify-content: center;
column-gap: 5px;
box-sizing: border-box;
}
@media (min-width: 1536px) {
.embla__dots {
column-gap: 7px;
}
}
.embla__dot {
display: grid;
place-items: center;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
touch-action: manipulation;
transition: background-color 0.3s ease;
cursor: pointer;
}
@media (min-width: 1536px) {
.embla__dot {
width: 8px;
height: 8px;
}
}
.embla__dot--selected {
background-color: rgba(255, 255, 255, 1);
}
.circle-text-figure {
display: inline-block;
max-width: unset;
min-width: 70px;
min-height: 70px;
width: 70px;
height: 70px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/model_of_the_year_circle.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation: rotating 40s linear infinite;
}
@media (min-width: 640px) {
.circle-text-figure {
min-width: 75px;
min-height: 75px;
width: 75px;
height: 75px;
}
}
@media (min-width: 768px) {
.circle-text-figure {
min-width: 80px;
min-height: 80px;
width: 80px;
height: 80px;
}
}
@media (min-width: 1280px) {
.circle-text-figure {
min-width: 90px;
min-height: 90px;
width: 90px;
height: 90px;
}
}
.slider {
position: relative;
}
.slider__viewport {
position: relative;
}
.slider__container {
height: 100%;
}
.slider__slide {
}
.slider__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider__controls {
}
.slider__buttons {
display: flex;
align-items: center;
column-gap: 15px;
}
@media (min-width: 640px) {
.slider__buttons {
column-gap: 20px;
}
}
.slider__prev,
.slider__next {
width: 40px;
height: 16px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow.svg);
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
transition:
border-color 0.3s ease,
background-image 0.3s ease;
cursor: pointer;
}
@media (min-width: 1280px) {
.slider__prev,
.slider__next {
width: 54px;
height: 20px;
}
}
.slider__prev:hover,
.slider__next:hover {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-red.svg);
}
.slider__prev {
transform: rotate(180deg);
}
.slider__next {
}
.slider__dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 1536px) {
.slider__dots {
bottom: 20px;
}
}
.lightbox {
display: none;
position: fixed;
z-index: 9999;
inset: 0;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
animation: fadeIn 0.5s ease;
}
.lightbox.open {
display: flex;
}
.lightbox__img {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
}
.lightbox__close {
position: absolute;
top: 20px;
right: 20px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
.poem {
font-family: "Betmo", sans-serif;
}
.video {
position: relative;
width: 100%;
height: 100%;
}
.video__stream {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video__play-button {
position: absolute;
inset: 0;
z-index: 1;
width: 80px;
height: 80px;
margin: auto;
background-color: transparent;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/play.svg);
background-repeat: no-repeat;
background-size: 16px 18px;
background-position: center center;
cursor: pointer;
pointer-events: none;
}
@media (min-width: 768px) {
.video__play-button {
width: 101px;
height: 101px;
background-size: 22px 25px;
}
}
.video__play-button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/text-watch-video.svg);
background-repeat: no-repeat;
background-size: 58px 75px;
background-position: left center;
animation: rotating 40s linear infinite;
}
@media (min-width: 768px) {
.video__play-button::after {
background-size: 78px 101px;
}
}
.video__play-button--white {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/play--white.svg);
}
.video__play-button--white::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/text-watch-video--white.svg);
}
.video__stream[data-is-play="true"] + .video__play-button {
display: none;
}
.audio {
position: relative;
}
.audio__play-button {
position: absolute;
inset: 0;
z-index: 1;
width: 90px;
height: 90px;
margin: auto;
background-color: transparent;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/play.svg);
background-repeat: no-repeat;
background-size: 16px 18px;
background-position: center center;
cursor: pointer;
pointer-events: none;
}
@media (min-width: 768px) {
.audio__play-button {
width: 110px;
height: 110px;
background-size: 22px 24px;
}
}
.audio__play-button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/text-listen-audio.svg);
background-repeat: no-repeat;
background-size: 90px 90px;
background-position: left center;
animation: rotating 40s linear infinite;
}
@media (min-width: 768px) {
.audio__play-button::after {
background-size: 110px 110px;
}
}
.audio__play-button--white {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/play--white.svg);
}
.audio__play-button--white::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/text-listen-audio--white.svg);
}
.audio__stream {
width: 100%;
}
.audio__stream[data-is-play="true"] + .audio__play-button {
display: none;
}
.contact-nav {
display: grid;
row-gap: 10px;
}
.contact-nav__item {
display: flex;
align-items: center;
column-gap: 8px;
font-size: 20px;
letter-spacing: 0.02em;
text-transform: uppercase;
transition:
color 0.3s ease,
background-image 0.3s ease;
}
.contact-nav__item:hover {
color: var(--primary-color);
}
.contact-nav__item::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow.svg);
}
.contact-nav__item:hover::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/arrow-red.svg);
}
.contact-nav__link {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
color: #000;
transition: color 0.3s ease;
}
.contact-nav__item:hover .contact-nav__link {
color: var(--primary-color);
}
.header {
padding-top: 20px;
}
@media (min-width: 1024px) {
.header {
padding-top: 0;
}
}
.header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo {
width: 180px;
}
@media (min-width: 1024px) {
.header__logo {
width: 200px;
}
}
@media (min-width: 1280px) {
.header__logo {
width: 250px;
}
}
.header__nav {
display: none;
}
@media (min-width: 1024px) {
.header__nav {
display: flex;
column-gap: 30px;
}
}
@media (min-width: 1280px) {
.header__nav {
column-gap: 60px;
}
}
.header__nav li a {
position: relative;
font-weight: 500;
font-size: 12px;
text-align: center;
color: #ffffff;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.header__nav li a.menu__link--active {
color: var(--primary-color);
}
@media (min-width: 1024px) {
.header__nav li a::after {
content: url(//katrinbark.com/wp-content/themes/katebark/assets/images/slash.svg);
position: absolute;
top: 50%;
right: -25px;
width: 10px;
height: 18px;
transform: translateY(-50%);
}
.home-header .header__nav li a::after {
filter: invert(1);
}
.header__nav li:last-child a::after {
display: none;
}
}
@media (min-width: 1280px) {
.header__nav li a::after {
right: -40px;
}
}
.header-video {
display: flex;
justify-content: center;
background-size: cover;
position: relative;
background-repeat: no-repeat;
z-index: 1;
overflow: hidden;
height: 100dvh;
}
.header-video__stream {
width: 100%;
height: 100%;
object-fit: cover;
}
.poster-button {
display: flex;
justify-content: center;
position: absolute;
left: 50%;
bottom: 0;
z-index: 2;
width: 105px;
height: 135px;
padding-bottom: 30px;
animation: fadeIn 2s ease-in;
cursor: pointer;
transform: translateX(-50%);
overflow: hidden;
}
.poster-button__img-text {
position: absolute;
top: 0;
width: 102px;
}
.poster-button__img-arrow {
position: relative;
top: 0;
width: 25px;
height: 65px;
animation: ArrowDown 3s ease-in-out infinite;
animation-delay: 2s;
}
@media (width <= 1024px) {
.burger-menu {
display: flex;
align-items: center;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
cursor: pointer;
}
.burger-menu span {
display: block;
font-size: 16px;
line-height: 0;
margin-left: 3px;
}
.burger-menu.active {
color: #c12335;
}
.burger-menu.active span {
font-size: 20px;
transform: rotate(45deg);
}
}
@media (min-width: 1024px) {
.burger-menu {
display: none;
}
}
@media (width <= 1024px) {
.header.burger-show {
height: 100dvh;
padding-top: 20px;
background-color: var(--pink);
}
.burger-show {
animation: fadeIn 0.6s ease-in-out;
}
.header.burger-show .header__nav {
display: flex;
flex-direction: column;
position: absolute;
right: 30%;
top: 20%;
}
.header.burger-show .header__logo {
filter: brightness(0);
}
.header.burger-show .header__nav li a {
font-size: 30px;
letter-spacing: 0.02em;
color: #000;
text-transform: unset;
margin-bottom: 25px;
}
.header.burger-show .header__nav li {
margin-bottom: 25px;
}
.header.burger-show .header__nav li:last-child {
margin-bottom: 0;
}
.header.burger-show .header__nav .menu__link--active {
color: #c12335;
font-style: italic;
position: relative;
left: 36px;
}
.header.burger-show .header__nav .menu__link--active::before {
content: "";
position: absolute;
top: 50%;
left: -36px;
width: 22px;
height: 1px;
background-color: #c12335;
}
.header__nav li a::after {
display: none;
}
}
.home-header,
.black-header {
position: absolute;
width: 100%;
margin: 0 auto;
z-index: 999;
}
@media (min-width: 1024px) {
.home-header,
.black-header {
padding-top: 30px;
}
}
.black-header .burger-menu {
color: #000;
}
.black-header .header__logo {
filter: brightness(0);
}
.black-header .header__nav li a {
color: #000;
}
.black-header .header__nav li.active a,
.black-header .header__nav .menu__link--active {
color: var(--primary-color);
}
.black-header .burger-menu.active {
color: var(--primary-color);
}
.black-header.burger-show {
position: absolute;
}
.contact-header .burger-menu {
color: #fff;
}
.contact-header .header__logo {
filter: none;
}
.page {
}
.page__main {
padding-top: 80px;
padding-bottom: 35px;
}
@media (min-width: 640px) {
.page__main {
padding-top: 90px;
padding-bottom: 45px;
}
}
@media (min-width: 768px) {
.page__main {
padding-top: 110px;
padding-bottom: 50px;
}
}
@media (min-width: 1280px) {
.page__main {
padding-top: 160px;
padding-bottom: 70px;
}
}
.page-header {
display: flex;
align-items: center;
column-gap: 10px;
margin-bottom: 25px;
}
@media (min-width: 1024px) {
.page-header {
column-gap: 15px;
margin-bottom: 40px;
}
}
@media (min-width: 1280px) {
.page-header {
column-gap: 20px;
margin-bottom: 60px;
}
}
.page-header img {
max-width: unset;
width: 75px;
height: 75px;
animation: rotating 40s linear infinite;
}
@media (min-width: 1280px) {
.page-header img {
width: 85px;
height: 85px;
}
}
.page-header__title {
position: relative;
max-width: 195px;
font-weight: 500;
font-size: 22px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary-color);
}
@media (min-width: 640px) {
.page-header__title {
max-width: 350px;
font-size: 26px;
}
}
@media (min-width: 768px) {
.page-header__title {
max-width: 450px;
font-size: 28px;
}
}
@media (min-width: 1024px) {
.page-header__title {
max-width: 650px;
font-size: 36px;
}
}
@media (min-width: 1280px) {
.page-header__title {
max-width: 900px;
font-size: 48px;
}
}
.page-header__figure {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 10px;
align-items: center;
}
@media (min-width: 640px) {
.page-header__figure {
column-gap: 15px;
max-width: 300px;
}
}
@media (min-width: 1280px) {
.page-header__figure {
column-gap: 20px;
}
}
.page-header__figure-redline {
min-width: 38px;
height: 1px;
background-color: var(--primary-color);
animation: fadeInRight 1.5s;
transition-property: opacity, transform;
}
@media (min-width: 1024px) {
.page-header__figure-redline {
min-width: 100px;
}
}
@media (min-width: 1280px) {
.page-header__figure-redline {
min-width: 170px;
}
} .section {
display: grid;
}
.section__title {
font-weight: 500;
font-size: 22px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.section__title {
font-size: 32px;
}
}
@media (min-width: 768px) {
.section__title {
font-size: 38px;
}
}
@media (min-width: 1024px) {
.section__title {
font-size: 44px;
}
}
@media (min-width: 1280px) {
.section__title {
font-size: 50px;
}
} .promo {
padding-top: 30px;
padding-bottom: 30px;
background-color: white;
}
@media (min-width: 768px) {
.promo {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media (min-width: 1024px) {
.promo {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media (min-width: 1280px) {
.promo {
padding-top: 70px;
padding-bottom: 70px;
}
}
.promo__header {
display: grid;
row-gap: 5px;
margin-bottom: 30px;
}
.promo__title {
font-weight: normal;
font-size: 24px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.promo__title {
font-size: 34px;
}
}
@media (min-width: 768px) {
.promo__title {
font-size: 48px;
}
}
@media (min-width: 1024px) {
.promo__title {
font-size: 54px;
}
}
@media (min-width: 1280px) {
.promo__title {
font-size: 90px;
}
}
.promo__tags {
font-size: 14px;
text-transform: uppercase;
text-align: right;
}
.promo__tags strong {
padding: 0 5px;
font-weight: normal;
}
@media (min-width: 1024px) {
.promo__tags strong {
padding: 0 7px;
}
}
@media (min-width: 640px) {
.promo__tags {
font-size: 16px;
}
}
@media (min-width: 768px) {
.promo__tags {
font-size: 20px;
}
}
@media (min-width: 1024px) {
.promo__tags {
font-size: 24px;
}
}
@media (min-width: 1280px) {
.promo__tags {
font-size: 30px;
}
}
.promo__body {
display: grid;
}
@media (min-width: 640px) {
.promo__body {
grid-template-columns: 280px 1fr;
align-items: center;
column-gap: 15px;
}
}
@media (min-width: 768px) {
.promo__body {
grid-template-columns: 350px 1fr;
column-gap: 20px;
}
}
@media (min-width: 1024px) {
.promo__body {
grid-template-columns: 500px 1fr;
}
}
@media (min-width: 1280px) {
.promo__body {
grid-template-columns: 570px 1fr;
}
}
.promo__figure {
position: relative;
width: 327px;
margin-inline: auto;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.promo__figure {
width: 279px;
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.promo__figure {
width: 359px;
}
}
@media (min-width: 1024px) {
.promo__figure {
width: 499px;
}
}
@media (min-width: 1280px) {
.promo__figure {
width: 570px;
}
}
.promo__image {
}
.promo__figure-poem {
position: absolute;
top: 35px;
left: 20px;
height: 150px;
transform: rotate(7deg);
}
@media (min-width: 640px) {
.promo__figure-poem {
height: 124px;
}
}
@media (min-width: 768px) {
.promo__figure-poem {
top: 40px;
left: 29px;
height: 159px;
}
}
@media (min-width: 1024px) {
.promo__figure-poem {
top: 55px;
left: 40px;
height: 220px;
}
}
@media (min-width: 1280px) {
.promo__figure-poem {
top: 55px;
left: 50px;
height: 270px;
}
}
.promo__figure-text {
height: 100%;
font-size: 17px;
line-height: 1.8;
text-align: center;
}
@media (min-width: 640px) {
.promo__figure-text {
font-size: 14px;
}
}
@media (min-width: 768px) {
.promo__figure-text {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.promo__figure-text {
font-size: 25px;
}
}
@media (min-width: 1280px) {
.promo__figure-text {
font-size: 28px;
line-height: 2;
}
}
.promo__content {
display: grid;
font-weight: 500;
text-transform: uppercase;
}
.promo__content-title {
margin-bottom: 10px;
font-weight: 500;
font-size: 24px;
color: var(--primary-color);
}
@media (min-width: 640px) {
.promo__content-title {
margin-bottom: 15px;
}
}
@media (min-width: 768px) {
.promo__content-title {
margin-bottom: 20px;
font-size: 32px;
}
}
@media (min-width: 1024px) {
.promo__content-title {
font-size: 40px;
}
}
@media (min-width: 1280px) {
.promo__content-title {
font-size: 48px;
}
}
.promo__content-text {
display: grid;
row-gap: 5px;
justify-self: end;
margin-bottom: 15px;
padding-left: 20px;
font-size: 14px;
}
@media (min-width: 768px) {
.promo__content-text {
margin-bottom: 30px;
padding-left: 30px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.promo__content-text {
margin-bottom: 60px;
padding-left: 45px;
}
}
@media (min-width: 1280px) {
.promo__content-text {
margin-bottom: 80px;
padding-left: 70px;
font-size: 20px;
}
}
.promo__button {
justify-self: end;
} .concert-poster {
padding-block: 45px;
background-color: #1c1c1c;
color: #fff;
}
@media (min-width: 640px) {
.concert-poster {
padding-block: 50px;
}
}
@media (min-width: 1024px) {
.concert-poster {
padding-block: 55px;
}
}
@media (min-width: 1280px) {
.concert-poster {
padding-block: 65px;
}
}
.concert-poster__wrapper {
position: relative;
}
.concert-poster__content {
position: relative;
z-index: 1;
display: grid;
row-gap: 35px;
}
.concert-poster__wrapper::before,
.concert-poster__wrapper::after {
content: "";
position: absolute;
top: 50%;
width: 350px;
height: 270px;
transform: translateY(-50%);
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/spotlight.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media (min-width: 1280px) {
.concert-poster__wrapper::before,
.concert-poster__wrapper::after {
top: calc(50% + 35px);
width: 470px;
height: 360px;
}
}
.concert-poster__wrapper::before {
left: -140px;
transform: translateY(-50%) scaleX(-1);
}
@media (min-width: 640px) {
.concert-poster__wrapper::before {
left: -50px;
}
}
@media (min-width: 1280px) {
.concert-poster__wrapper::before {
left: 0;
}
}
.concert-poster__wrapper::after {
right: -140px;
}
@media (min-width: 640px) {
.concert-poster__wrapper::after {
right: -50px;
}
}
@media (min-width: 1280px) {
.concert-poster__wrapper::after {
right: 0;
}
}
.concert-poster__title {
display: grid;
font-weight: 500;
font-size: 24px;
text-align: center;
text-transform: uppercase;
color: #fff;
}
@media (min-width: 640px) {
.concert-poster__title {
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 20px;
font-size: 28px;
}
}
@media (min-width: 768px) {
.concert-poster__title {
column-gap: 30px;
margin-bottom: 10px;
font-size: 38px;
}
}
@media (min-width: 1024px) {
.concert-poster__title {
column-gap: 50px;
font-size: 42px;
}
}
@media (min-width: 1280px) {
.concert-poster__title {
column-gap: 70px;
margin-bottom: 20px;
font-size: 50px;
}
}
@media (min-width: 640px) {
.concert-poster__title::before,
.concert-poster__title::after {
content: "";
height: 1px;
background-color: #fff;
}
}
.concert-poster__date {
display: grid;
row-gap: 10px;
justify-items: center;
font-weight: 500;
font-size: 24px;
text-align: center;
text-transform: uppercase;
}
@media (min-width: 640px) {
.concert-poster__date {
font-size: 26px;
}
}
@media (min-width: 768px) {
.concert-poster__date {
row-gap: 15px;
margin-bottom: 10px;
font-size: 30px;
}
}
@media (min-width: 1024px) {
.concert-poster__date {
font-size: 36px;
}
}
@media (min-width: 1280px) {
.concert-poster__date {
font-size: 40px;
}
}
.concert-poster__date::before,
.concert-poster__date::after {
content: "";
width: 150px;
height: 1px;
background-color: #fff;
}
.concert-poster__button {
width: auto;
}
@media (min-width: 640px) {
.concert-poster__button {
justify-self: center;
width: 330px;
}
}
.reportage {
display: grid;
padding: 30px 0;
}
@media (min-width: 640px) {
.reportage {
padding: 40px 0;
}
}
@media (min-width: 768px) {
.reportage {
padding: 45px 0;
}
}
@media (min-width: 1024px) {
.reportage {
padding: 60px 0;
}
}
@media (min-width: 1280px) {
.reportage {
padding: 80px 0;
}
}
.reportage__header {
display: grid;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.reportage__header {
display: flex;
align-items: baseline;
justify-content: space-between;
}
}
.reportage__title {
margin-bottom: 5px;
}
@media (min-width: 640px) {
.reportage__title {
margin-bottom: 0;
}
}
.reportage__headline {
justify-self: end;
max-width: 220px;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.reportage__headline {
max-width: 300px;
font-size: 20px;
}
}
@media (min-width: 768px) {
.reportage__headline {
max-width: 400px;
font-size: 28px;
}
}
@media (min-width: 1024px) {
.reportage__headline {
max-width: 600px;
font-size: 40px;
}
}
@media (min-width: 1280px) {
.reportage__headline {
max-width: 720px;
font-size: 50px;
}
}
.reportage__video {
height: 300px;
}
@media (min-width: 640px) {
.reportage__video {
height: 350px;
}
}
@media (min-width: 768px) {
.reportage__video {
height: 400px;
}
}
@media (min-width: 1024px) {
.reportage__video {
height: 500px;
}
}
@media (min-width: 1280px) {
.reportage__video {
height: 550px;
}
} .poetry-concerts {
display: grid;
padding: 30px 0;
background-color: var(--pink);
}
@media (min-width: 640px) {
.poetry-concerts {
padding: 40px 0;
}
}
@media (min-width: 768px) {
.poetry-concerts {
padding: 45px 0;
}
}
@media (min-width: 1024px) {
.poetry-concerts {
padding: 60px 0;
}
}
@media (min-width: 1280px) {
.poetry-concerts {
padding: 80px 0;
}
}
.poetry-concerts__header {
margin-bottom: 15px;
padding-right: 50px;
}
@media (min-width: 390px) {
.poetry-concerts__header {
padding-right: 60px;
}
}
@media (min-width: 430px) {
.poetry-concerts__header {
padding-right: 100px;
}
}
@media (min-width: 768px) {
.poetry-concerts__header {
margin-bottom: 20px;
padding-right: 120px;
}
}
@media (min-width: 1024px) {
.poetry-concerts__header {
margin-bottom: 25px;
}
}
@media (min-width: 1280px) {
.poetry-concerts__header {
margin-bottom: 30px;
}
}
.poetry-concerts__slider {
position: relative;
}
.poetry-concerts__list {
grid-auto-columns: calc(50% - 5px);
column-gap: 10px;
}
@media (min-width: 1280px) {
.poetry-concerts__list {
grid-auto-columns: calc(25% - 15px);
column-gap: 20px;
}
}
.poetry-concerts__item {
display: grid;
height: 260px;
cursor: pointer;
}
@media (min-width: 640px) {
.poetry-concerts__item {
height: 250px;
}
}
@media (min-width: 768px) {
.poetry-concerts__item {
height: 450px;
}
}
.poetry-concerts__item--row-2 {
grid-template-rows: repeat(2, 1fr);
row-gap: 10px;
}
@media (min-width: 1280px) {
.poetry-concerts__item--row-2 {
row-gap: 20px;
}
}
.poetry-concerts__item:last-child {
margin-right: 10px;
}
@media (min-width: 1280px) {
.poetry-concerts__item:last-child {
margin-right: 20px;
}
}
.poetry-concerts__item-picture {
position: relative;
display: grid;
width: 100%;
height: 100%;
overflow: hidden;
}
.poetry-concerts__item-picture:hover::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 50px;
height: 50px;
background-size: 100% 100%;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/button-plus.svg);
background-repeat: no-repeat;
animation: fadeIn 0.4s ease;
pointer-events: none;
}
@media (min-width: 640px) {
.poetry-concerts__item-picture:hover::after {
width: 60px;
height: 60px;
}
}
@media (min-width: 1280px) {
.poetry-concerts__item-picture:hover::after {
width: 70px;
height: 70px;
}
}
.poetry-concerts__item-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.poetry-concerts__item-picture:hover .poetry-concerts__item-image {
transform: scale(1.2);
}
.poetry-concerts__controls {
position: absolute;
top: -34px;
right: 0;
}
@media (min-width: 640px) {
.poetry-concerts__controls {
top: -42px;
}
}
@media (min-width: 768px) {
.poetry-concerts__controls {
top: -50px;
}
}
@media (min-width: 1024px) {
.poetry-concerts__controls {
top: -55px;
}
}
@media (min-width: 1280px) {
.poetry-concerts__controls {
top: -65px;
}
} .reviews {
display: grid;
padding: 30px 0;
background-color: #fff;
}
@media (min-width: 640px) {
.reviews {
padding: 40px 0;
}
}
@media (min-width: 768px) {
.reviews {
padding: 45px 0;
}
}
@media (min-width: 1024px) {
.reviews {
padding: 60px 0;
}
}
@media (min-width: 1280px) {
.reviews {
padding: 80px 0;
}
}
.reviews__header {
margin-bottom: 15px;
padding-right: 50px;
}
@media (min-width: 768px) {
.reviews__header {
margin-bottom: 20px;
padding-right: 120px;
}
}
@media (min-width: 1024px) {
.reviews__header {
margin-bottom: 25px;
}
}
@media (min-width: 1280px) {
.reviews__header {
margin-bottom: 30px;
}
}
.reviews__slider {
position: relative;
}
.reviews__list {
grid-auto-columns: calc(100% - 5px);
column-gap: 10px;
}
@media (min-width: 640px) {
.reviews__list {
grid-auto-columns: calc(50% - 5px);
}
}
@media (min-width: 1024px) {
.reviews__list {
grid-auto-columns: calc(33% - 5px);
}
}
@media (min-width: 1280px) {
.reviews__list {
grid-auto-columns: calc(25% - 15px);
column-gap: 20px;
}
}
.reviews__item {
display: grid;
align-content: start;
height: 410px;
padding: 10px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/bg-review-light.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; font-size: 14px;
}
@media (min-width: 640px) {
.reviews__item {
padding: 15px;
}
}
@media (min-width: 768px) {
.reviews__item {
height: 450px;
font-size: 13px;
}
}
.reviews__item:nth-child(even) {
height: 500px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/bg-review-dark.jpg);
color: #fff;
}
.reviews__item:last-child {
margin-right: 10px;
}
@media (min-width: 1280px) {
.reviews__item:last-child {
margin-right: 20px;
}
}
.reviews__controls {
position: absolute;
top: -34px;
right: 0;
}
@media (min-width: 640px) {
.reviews__controls {
top: -42px;
}
}
@media (min-width: 768px) {
.reviews__controls {
top: -50px;
}
}
@media (min-width: 1024px) {
.reviews__controls {
top: -55px;
}
}
@media (min-width: 1280px) {
.reviews__controls {
top: -65px;
}
} .invitation {
display: grid;
background-color: var(--pink);
}
.invitation__wrapper {
display: grid;
}
@media (min-width: 1024px) {
.invitation__wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
.invitation__content {
display: grid;
padding-top: 40px;
padding-bottom: 30px;
padding-inline: 16px;
}
@media (min-width: 640px) {
.invitation__content {
justify-items: center;
padding-top: 50px;
padding-bottom: 35px;
}
}
@media (min-width: 768px) {
.invitation__content {
max-width: 500px;
margin-inline: auto;
}
}
@media (min-width: 1024px) {
.invitation__content {
justify-items: start;
align-content: center;
max-width: unset;
padding-inline: 25px;
}
}
.invitation__poem {
width: 328px;
min-height: 100px;
font-size: 22px;
}
@media (min-width: 640px) {
.invitation__poem {
width: 343px;
min-height: 110px;
font-size: 24px;
text-align: center;
}
}
@media (min-width: 768px) {
.invitation__poem {
width: 370px;
min-height: 120px;
font-size: 26px;
}
}
@media (min-width: 1024px) {
.invitation__poem {
width: 462px;
min-height: 205px;
font-size: 34px;
text-align: left;
}
}
@media (min-width: 1280px) {
.invitation__poem {
width: 543px;
min-height: 172px;
font-size: 38px;
}
}
.invitation__title {
display: flex;
align-items: center;
column-gap: 10px;
margin-block: 25px;
font-weight: 500;
font-size: 22px;
color: var(--primary-color);
text-transform: uppercase;
}
@media (min-width: 640px) {
.invitation__title {
max-width: 340px;
margin-block: 35px;
font-size: 24px;
}
}
@media (min-width: 768px) {
.invitation__title {
max-width: 400px;
font-size: 28px;
}
}
@media (min-width: 1024px) {
.invitation__title {
max-width: unset;
margin-block: 45px;
font-size: 32px;
}
}
@media (min-width: 1280px) {
.invitation__title {
max-width: 500px;
font-size: 40px;
}
}
.invitation__links {
display: grid;
row-gap: 10px;
}
@media (min-width: 640px) {
.invitation__links {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 50px;
}
}
@media (min-width: 768px) {
.invitation__links {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.invitation__links {
display: grid;
row-gap: 20px;
}
}
.invitation__link {
font-weight: 500;
font-size: 16px;
text-transform: none;
}
.invitation__image {
width: 100%;
}
@media (min-width: 1024px) {
.invitation__image {
order: -1;
}
} .p-filming {
}
.p-filming__main {
display: grid;
row-gap: 45px;
padding-bottom: 35px;
}
@media (min-width: 640px) {
.p-filming__main {
row-gap: 60px;
padding-bottom: 45px;
}
}
@media (min-width: 1024px) {
.p-filming__main {
row-gap: 90px;
padding-bottom: 50px;
}
}
@media (min-width: 1280px) {
.p-filming__main {
row-gap: 130px;
padding-bottom: 70px;
}
} .videography {
display: grid;
row-gap: 30px;
}
@media (min-width: 640px) {
.videography {
display: grid;
row-gap: 35px;
}
}
@media (min-width: 768px) {
.videography {
display: grid;
row-gap: 60px;
}
}
@media (min-width: 1024px) {
.videography {
display: grid;
row-gap: 80px;
}
}
@media (min-width: 1280px) {
.videography {
display: grid;
row-gap: 100px;
}
}
.videography__item {
display: grid;
}
@media (min-width: 768px) {
.videography__item {
display: grid;
grid-template-columns: 0.55fr 0.4fr;
justify-content: space-between;
align-items: end;
}
}
@media (min-width: 768px) {
.videography__item:nth-child(even) {
grid-template-columns: 0.4fr 0.55fr;
}
}
@media (min-width: 1024px) {
.videography__item {
display: grid;
grid-template-columns: 0.5fr 0.4fr;
justify-content: space-between;
align-items: end;
}
}
@media (min-width: 1024px) {
.videography__item:nth-child(even) {
grid-template-columns: 0.4fr 0.5fr;
}
}
.videography__item-clip {
display: grid;
row-gap: 8px;
}
@media (min-width: 768px) {
.videography__item-clip {
height: 320px;
}
}
@media (min-width: 1024px) {
.videography__item-clip {
height: 350px;
}
}
@media (min-width: 1280px) {
.videography__item-clip {
height: 390px;
}
}
.videography__item-clip {
grid-template-rows: 240px auto;
}
@media (min-width: 640px) {
.videography__item-clip {
grid-template-rows: 320px auto;
}
}
@media (min-width: 768px) {
.videography__item-clip {
grid-template-rows: unset;
}
}
@media (min-width: 768px) {
.videography__item:nth-child(even) .videography__item-clip {
order: 1;
}
}
.videography__item-title {
text-transform: uppercase;
font-size: 14px;
}
@media (min-width: 768px) {
.videography__item-clip .videography__item-title {
display: none;
}
}
.videography__item-frame {
display: none;
}
@media (min-width: 768px) {
.videography__item-frame {
display: grid;
align-items: start;
align-content: start;
row-gap: 8px;
}
}
.videography__item-frame-image {
width: 100%;
} .photography {
display: grid;
row-gap: 45px;
}
@media (min-width: 640px) {
.photography {
row-gap: 80px;
}
}
@media (min-width: 768px) {
.photography {
row-gap: 80px;
}
}
@media (min-width: 1024px) {
.photography {
row-gap: 100px;
padding-inline: 40px;
}
}
@media (min-width: 1280px) {
.photography {
row-gap: 140px;
padding-inline: 110px;
}
}
.photography__item {
display: grid;
}
@media (min-width: 640px) {
.photography__item {
grid-template-columns: 0.6fr 0.4fr;
column-gap: 20px;
height: 503px;
}
}
@media (min-width: 768px) {
.photography__item {
column-gap: 40px;
height: 595px;
}
}
@media (min-width: 1024px) {
.photography__item {
column-gap: 120px;
height: 678px;
}
}
@media (min-width: 1280px) {
.photography__item {
column-gap: 160px;
height: 720px;
}
}
@media (min-width: 640px) {
.photography__item:nth-child(even) {
grid-template-columns: 0.4fr 0.6fr;
}
}
.photography__item-primary-image {
display: none;
}
@media (min-width: 640px) {
.photography__item-primary-image {
grid-row: span 2;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (min-width: 640px) {
.photography__item:nth-child(even) .photography__item-primary-image {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
}
.photography__item-details {
display: grid;
row-gap: 5px;
margin-bottom: 20px;
}
.photography__item-title {
display: grid;
font-size: 24px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.photography__item-title {
align-content: start;
}
}
@media (min-width: 1280px) {
.photography__item-title {
font-size: 40px;
}
}
.photography__item-title-tag {
font-weight: 500;
font-size: 12px;
}
@media (min-width: 1280px) {
.photography__item-title-tag {
font-size: 18px;
}
}
.photography__item-button {
font-weight: 500;
text-transform: capitalize;
}
@media (min-width: 640px) {
.photography__item-button {
align-self: end;
}
}
.photography__item-secondary-image {
width: 100%;
object-fit: cover;
}
@media (min-width: 640px) {
.photography__item-secondary-image {
height: 100%;
object-fit: cover;
}
} .p-poetry {
}
.p-poetry__main {
display: grid;
row-gap: 30px;
padding-bottom: 0;
}
@media (min-width: 640px) {
.p-poetry__main {
row-gap: 45px;
}
}
@media (min-width: 768px) {
.p-poetry__main {
row-gap: 55px;
}
}
@media (min-width: 1024px) {
.p-poetry__main {
row-gap: 70px;
}
}
@media (min-width: 1280px) {
.p-poetry__main {
row-gap: 100px;
}
}
.poetry {
display: grid;
}
.poetry__wrapper {
display: grid;
row-gap: 35px;
}
@media (min-width: 640px) {
.poetry__wrapper {
row-gap: 45px;
}
}
@media (min-width: 1280px) {
.poetry__wrapper {
row-gap: 75px;
}
}
.poetry__items {
display: grid;
row-gap: 20px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/bg-feather.png);
background-size: auto 270px;
background-position: center 150px;
background-repeat: no-repeat;
}
@media (min-width: 640px) {
.poetry__items {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
column-gap: 20px;
background-size: auto 350px;
}
}
@media (min-width: 768px) {
.poetry__items {
background-size: auto 410px;
}
}
@media (min-width: 1024px) {
.poetry__items {
grid-template-columns: repeat(3, 1fr);
column-gap: 30px;
row-gap: 30px;
}
}
@media (min-width: 1280px) {
.poetry__items {
column-gap: 35px;
row-gap: 35px;
background-position: 40% 150px;
}
}
.poetry__item {
position: relative;
border: 1px solid black;
font-weight: 500;
font-size: 14px;
}
@media (min-width: 1024px) {
.poetry__item:nth-child(1) {
justify-self: end;
}
}
@media (min-width: 1024px) {
.poetry__item:nth-child(2) {
grid-column: span 2;
width: 440px;
justify-self: center;
}
}
@media (min-width: 1024px) {
.poetry__item:nth-child(3) {
width: 420px;
}
}
@media (min-width: 1280px) {
.poetry__item:nth-child(4) {
margin-top: -125px;
}
}
.poetry__item::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/bg-poetry.jpg);
background-repeat: repeat-y;
background-size: cover;
opacity: 0.8;
}
.poetry__item p:not(:last-child) {
margin-bottom: 10px;
}
.poetry__item-text {
position: relative;
z-index: 1;
padding: 15px 10px;
}
.poetry__item-title {
position: relative;
z-index: 1;
margin-top: 5px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: var(--pink);
font-family: "Betmo", Verdana, Geneva, Tahoma, sans-serif;
font-size: 26px;
letter-spacing: 3px;
}
.poetry__button {
width: 100%;
} .single {
display: grid;
}
.single__wrapper {
display: grid;
}
@media (min-width: 640px) {
.single__wrapper {
grid-template-columns: 0.5fr 0.5fr;
column-gap: 30px;
}
}
@media (min-width: 768px) {
.single__wrapper {
column-gap: 40px;
}
}
@media (min-width: 1024px) {
.single__wrapper {
grid-template-columns: 0.4fr 0.6fr;
column-gap: 50px;
}
}
@media (min-width: 1280px) {
.single__wrapper {
column-gap: 60px;
}
}
.single__title {
margin-bottom: 15px;
font-size: 70px;
color: var(--pink);
text-transform: uppercase;
}
@media (min-width: 640px) {
.single__title {
margin-bottom: 0;
}
}
.single__cover {
position: relative;
display: grid;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.single__cover {
grid-row: 1 / 3;
margin-bottom: 0;
}
}
.single__cover::before,
.single__cover::after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.single__cover::before {
top: -10px;
left: -10px;
background-color: var(--primary-color);
}
.single__cover::after {
bottom: -10px;
right: -10px;
background-color: var(--pink);
}
.single__poster {
width: 100%;
}
.single__cover-stream {
position: absolute;
left: 50%;
bottom: 15px;
width: calc(100% - 20px);
transform: translateX(-50%);
}
.single__listen {
display: grid;
row-gap: 15px;
}
.single__listen-title {
color: var(--primary-color);
font-size: 34px;
}
.single__listen-list {
display: grid;
row-gap: 10px;
}
.single__listen-link {
font-weight: 500;
font-size: 20px;
}
.video-reading {
padding-top: 35px;
padding-bottom: 40px;
background-color: var(--pink);
}
@media (min-width: 640px) {
.video-reading {
padding-top: 45px;
padding-bottom: 55px;
}
}
@media (min-width: 1024px) {
.video-reading {
padding-top: 60px;
padding-bottom: 70px;
}
}
@media (min-width: 1280px) {
.video-reading {
padding-top: 70px;
padding-bottom: 80px;
}
}
.video-reading__title {
font-size: 19px;
color: #000;
}
@media (min-width: 640px) {
.video-reading__title {
font-size: 22px;
}
}
@media (min-width: 768px) {
.video-reading__title {
font-size: 30px;
}
}
@media (min-width: 1024px) {
.video-reading__title {
font-size: 40px;
}
}
@media (min-width: 1280px) {
.video-reading__title {
font-size: 50px;
}
}
.video-reading__items {
display: grid;
row-gap: 20px;
}
@media (min-width: 640px) {
.video-reading__items {
grid-template-columns: repeat(2, 1fr);
column-gap: 15px;
}
}
@media (min-width: 768px) {
.video-reading__items {
column-gap: 25px;
row-gap: 25px;
}
}
@media (min-width: 1024px) {
.video-reading__items {
column-gap: 70px;
row-gap: 35px;
}
}
@media (min-width: 1280px) {
.video-reading__items {
column-gap: 100px;
row-gap: 40px;
padding-left: 50px;
padding-right: 50px;
}
}
.video-reading__item {
position: relative;
display: grid;
height: 460px;
border: 1px solid #000;
}
@media (min-width: 390px) {
.video-reading__item {
height: 500px;
}
}
@media (min-width: 430px) {
.video-reading__item {
height: 560px;
}
}
@media (min-width: 640px) {
.video-reading__item {
height: 425px;
}
}
@media (min-width: 768px) {
.video-reading__item {
height: 500px;
}
}
@media (min-width: 1024px) {
.video-reading__item {
height: 635px;
}
}
@media (min-width: 1280px) {
.video-reading__item {
height: 695px;
}
}
@media (min-width: 640px) {
.video-reading__item:nth-child(2) {
margin-top: 60px;
}
.video-reading__item:nth-child(3) {
margin-top: -60px;
}
}
@media (min-width: 768px) {
.video-reading__item:nth-child(2) {
margin-top: 80px;
}
.video-reading__item:nth-child(3) {
margin-top: -80px;
}
}
@media (min-width: 1024px) {
.video-reading__item:nth-child(2) {
margin-top: 100px;
}
.video-reading__item:nth-child(3) {
margin-top: -100px;
}
}
@media (min-width: 1280px) {
.video-reading__item:nth-child(2) {
margin-top: 135px;
}
.video-reading__item:nth-child(3) {
margin-top: -135px;
}
}
.video-reading__video {
padding: 15px;
}
@media (min-width: 1024px) {
.video-reading__video {
padding: 20px;
}
} .p-about {
}
.p-about__main {
display: grid;
row-gap: 30px;
padding-bottom: 0;
}
@media (min-width: 640px) {
.p-about__main {
row-gap: 40px;
}
}
@media (min-width: 1024px) {
.p-about__main {
row-gap: 50px;
}
}
@media (min-width: 1280px) {
.p-about__main {
row-gap: 65px;
}
}
.about {
}
.about-childhood {
display: grid;
}
@media (min-width: 1024px) {
.about-childhood {
grid-template-columns: auto 1fr;
column-gap: 20px;
}
}
@media (min-width: 1280px) {
.about-childhood {
column-gap: 60px;
}
}
.about-childhood__header {
display: grid;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.about-childhood__header {
display: grid;
grid-template-columns: repeat(2, auto);
align-items: start;
justify-content: start;
column-gap: 15px;
margin-bottom: 25px;
}
}
@media (min-width: 768px) {
.about-childhood__header {
margin-bottom: 35px;
}
}
@media (min-width: 1024px) {
.about-childhood__header {
order: 1;
grid-column: 1 / -1;
row-gap: 10px;
margin-bottom: 45px;
}
}
@media (min-width: 1280px) {
.about-childhood__header {
align-items: end;
column-gap: 20px;
row-gap: 15px;
margin-bottom: 70px;
}
}
.about-childhood__title {
margin-bottom: 10px;
font-size: 24px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-childhood__title {
margin-bottom: 0;
font-size: 30px;
}
}
@media (min-width: 768px) {
.about-childhood__title {
font-size: 36px;
}
}
@media (min-width: 1024px) {
.about-childhood__title {
font-size: 40px;
}
}
@media (min-width: 1280px) {
.about-childhood__title {
font-size: 50px;
}
}
.about-childhood__subtitle {
justify-self: end;
max-width: 190px;
margin-bottom: 15px;
font-weight: 400;
font-family: "Open Sans", Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-childhood__subtitle {
justify-self: start;
padding-top: 8px;
}
}
@media (min-width: 768px) {
.about-childhood__subtitle {
padding-top: 12px;
}
}
@media (min-width: 1280px) {
.about-childhood__subtitle {
padding-top: 0;
}
}
.about-childhood__date {
justify-self: end;
font-weight: 500;
font-size: 24px;
color: var(--primary-color);
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-childhood__date {
grid-column: 1 / -1;
font-size: 30px;
}
}
@media (min-width: 768px) {
.about-childhood__date {
font-size: 36px;
}
}
@media (min-width: 1024px) {
.about-childhood__date {
margin-right: -280px;
font-size: 40px;
}
}
@media (min-width: 1280px) {
.about-childhood__date {
font-size: 50px;
}
}
.about-childhood__achieve {
display: grid;
row-gap: 10px;
font-size: 14px;
}
@media (min-width: 640px) {
.about-childhood__achieve {
margin-bottom: 10px;
padding-right: 30px;
}
}
@media (min-width: 768px) {
.about-childhood__achieve {
margin-bottom: 25px;
padding-right: 70px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.about-childhood__achieve {
order: 3;
row-gap: 15px;
margin-bottom: 0;
padding-right: 0;
}
}
@media (min-width: 1280px) {
.about-childhood__achieve {
padding-right: 0;
}
}
.about-childhood__achieve strong,
.about-childhood__achieve b {
font-weight: 400;
color: var(--primary-color);
}
.about-childhood__achieve-awards {
display: grid;
row-gap: 10px;
margin-bottom: 30px;
}
@media (min-width: 640px) {
.about-childhood__achieve-awards {
max-width: 450px;
}
}
@media (min-width: 768px) {
.about-childhood__achieve-awards {
max-width: 500px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.about-childhood__achieve-awards {
row-gap: 15px;
}
}
.about-childhood__achieve-awards-items {
display: grid;
grid-template-columns: 0.6fr 0.4fr;
}
@media (min-width: 640px) {
.about-childhood__achieve-awards-items {
grid-template-columns: 0.5fr 0.5fr;
}
}
.about-childhood__photos {
position: relative;
display: grid;
width: 100%;
min-height: 230px;
margin-inline: auto;
margin-bottom: 30px;
}
@media (min-width: 430px) {
.about-childhood__photos {
width: 395px;
min-height: 245px;
}
}
@media (min-width: 640px) {
.about-childhood__photos {
width: 550px;
min-height: 350px;
}
}
@media (min-width: 1024px) {
.about-childhood__photos {
order: 2;
margin-bottom: 0;
}
}
@media (min-width: 1280px) {
.about-childhood__photos {
width: 670px;
min-height: 430px;
}
}
.about-childhood__photo {
position: absolute;
top: 0;
}
.about-childhood__photo:nth-child(1) {
top: -15px;
width: 145px;
transform: rotate(-5deg);
}
@media (min-width: 430px) {
.about-childhood__photo:nth-child(1) {
width: 160px;
}
}
@media (min-width: 640px) {
.about-childhood__photo:nth-child(1) {
width: 230px;
}
}
@media (min-width: 1280px) {
.about-childhood__photo:nth-child(1) {
width: 275px;
}
}
.about-childhood__photo:nth-child(2) {
z-index: 1;
left: 33.33%;
width: 150px;
}
@media (min-width: 430px) {
.about-childhood__photo:nth-child(2) {
width: 165px;
}
}
@media (min-width: 640px) {
.about-childhood__photo:nth-child(2) {
width: 235px;
}
}
@media (min-width: 1280px) {
.about-childhood__photo:nth-child(2) {
top: 15px;
width: 280px;
}
}
.about-childhood__photo:nth-child(3) {
top: 25px;
right: 0;
width: 110px;
transform: rotate(5deg);
}
@media (min-width: 430px) {
.about-childhood__photo:nth-child(3) {
width: 140px;
}
}
@media (min-width: 640px) {
.about-childhood__photo:nth-child(3) {
width: 175px;
}
}
@media (min-width: 1280px) {
.about-childhood__photo:nth-child(3) {
top: 60px;
width: 210px;
}
}
.about-childhood__result {
display: grid;
row-gap: 10px;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
@media (min-width: 640px) {
.about-childhood__result {
font-size: 16px;
}
}
@media (min-width: 768px) {
.about-childhood__result {
row-gap: 15px;
font-size: 18px;
}
}
@media (min-width: 1024px) {
.about-childhood__result {
order: 4;
grid-column: 1 / -1;
row-gap: 20px;
max-width: 700px;
font-size: 20px;
margin-inline: auto;
margin-top: 40px;
}
}
@media (min-width: 1280px) {
.about-childhood__result {
row-gap: 25px;
max-width: 750px;
margin-top: 70px;
font-size: 22px;
}
}
.about-childhood__result strong,
.about-childhood__result b {
font-weight: 400;
color: var(--primary-color);
}
.about-youth {
padding-block: 35px;
background-color: var(--pink);
font-size: 14px;
}
@media (min-width: 640px) {
.about-youth {
padding-block: 45px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.about-youth {
padding-block: 65px;
}
}
@media (min-width: 1280px) {
.about-youth {
padding-block: 85px;
}
}
.about-youth strong {
font-weight: 400;
color: var(--primary-color);
}
.about-youth__title {
margin-bottom: 10px;
font-size: 24px;
}
@media (min-width: 640px) {
.about-youth__title {
font-size: 34px;
}
}
@media (min-width: 768px) {
.about-youth__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.about-youth__title {
font-size: 40px;
}
}
@media (min-width: 1280px) {
.about-youth__title {
font-size: 50px;
}
}
.about-youth__desc {
display: grid;
row-gap: 10px;
}
@media (min-width: 640px) {
.about-youth__desc {
row-gap: 15px;
margin-top: -50px;
padding-left: calc(33.33% + 5px);
}
}
@media (min-width: 1024px) {
.about-youth__desc {
row-gap: 20px;
padding-left: calc(33.33% + 10px);
}
}
@media (min-width: 1280px) {
.about-youth__desc {
row-gap: 30px;
padding-left: calc(33.33% + 20px);
}
}
.about-youth__desc-col-2 {
display: grid;
row-gap: 10px;
}
@media (min-width: 768px) {
.about-youth__desc-col-2 {
row-gap: 15px;
}
}
@media (min-width: 1024px) {
.about-youth__desc-col-2 {
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
}
}
@media (min-width: 1280px) {
.about-youth__desc-col-2 {
column-gap: 40px;
}
}
.about-youth__desc-col-2 p:nth-child(1) {
text-transform: uppercase;
}
@media (min-width: 1024px) {
.about-youth__desc-col-2 p:nth-child(1) {
font-size: 18px;
}
}
@media (min-width: 1280px) {
.about-youth__desc-col-2 p:nth-child(1) {
font-size: 20px;
}
}
.about-youth__photos {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
row-gap: 10px;
margin-block: 15px;
}
@media (min-width: 640px) {
.about-youth__photos {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.about-youth__photos {
column-gap: 20px;
margin-block: 20px;
}
}
@media (min-width: 1280px) {
.about-youth__photos {
column-gap: 40px;
}
}
.about-youth__photo {
width: 100%;
}
.about-youth__photo:nth-child(1) {
grid-column: 1 / -1;
}
@media (min-width: 640px) {
.about-youth__photo:nth-child(1) {
grid-column: unset;
margin-top: -130px;
}
}
.about-youth__photo:nth-child(2) {
align-self: center;
}
@media (min-width: 640px) {
.about-youth__photo:nth-child(2) {
align-self: unset;
margin-top: 25px;
}
}
.about-youth__realization {
position: relative;
column-gap: 10px;
min-height: 80px;
padding-left: 90px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-youth__realization {
margin-top: -90px;
margin-bottom: 20px;
padding-left: 0;
padding-right: calc(33.33% + 5px);
}
}
@media (min-width: 1024px) {
.about-youth__realization {
padding-right: calc(33.33% + 10px);
}
}
@media (min-width: 1280px) {
.about-youth__realization {
padding-right: calc(33.33% + 20px);
}
}
@media (min-width: 1024px) {
.about-youth__realization {
margin-bottom: 50px;
}
}
@media (min-width: 1280px) {
.about-youth__realization {
margin-bottom: 70px;
}
}
@media (min-width: 768px) {
.about-youth__realization {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.about-youth__realization {
font-size: 20px;
}
}
@media (min-width: 1280px) {
.about-youth__realization {
padding-left: 150px;
}
}
.about-youth__realization::before {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 75px;
height: 75px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/brands-logo.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation: rotating 40s linear infinite;
}
@media (min-width: 640px) {
.about-youth__realization::before {
content: none;
}
}
.about-youth__work-abroad {
display: grid;
row-gap: 5px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-youth__work-abroad {
position: relative;
row-gap: 10px;
padding-left: 110px;
}
}
@media (min-width: 768px) {
.about-youth__work-abroad {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.about-youth__work-abroad {
font-size: 20px;
}
}
@media (min-width: 1280px) {
.about-youth__work-abroad {
padding-left: 400px;
padding-right: 50px;
font-size: 20px;
}
}
@media (min-width: 640px) {
.about-youth__work-abroad::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 90px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/brands-logo.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation: rotating 40s linear infinite;
}
}
@media (min-width: 1280px) {
.about-youth__work-abroad::before {
left: 200px;
width: 135px;
height: 135px;
}
}
.about-education {
display: grid;
}
.about-education__header {
display: grid;
row-gap: 5px;
margin-bottom: 20px;
font-weight: 500;
font-size: 18px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-education__header {
margin-bottom: 25px;
font-size: 28px;
}
}
@media (min-width: 768px) {
.about-education__header {
margin-bottom: 30px;
font-size: 36px;
}
}
@media (min-width: 1024px) {
.about-education__header {
margin-bottom: 40px;
font-size: 40px;
}
}
@media (min-width: 1280px) {
.about-education__header {
margin-bottom: 50px;
font-size: 50px;
}
}
.about-education__title {
font-size: inherit;
}
.about-education__header span {
justify-self: end;
font-size: inherit;
}
.about-education__promo {
display: grid;
}
@media (min-width: 640px) {
.about-education__promo {
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 5px;
margin-bottom: 30px;
}
}
@media (min-width: 1024px) {
.about-education__promo {
grid-template-columns: 300px auto;
justify-content: space-between;
margin-bottom: 40px;
}
}
@media (min-width: 1024px) {
.about-education__promo {
grid-template-columns: 400px auto;
margin-bottom: 50px;
}
}
.about-education__promo-text {
display: grid;
row-gap: 10px;
font-size: 14px;
}
@media (min-width: 640px) {
.about-education__promo-text {
font-size: 16px;
}
}
@media (min-width: 1024px) {
.about-education__promo-text {
row-gap: 15px;
}
}
@media (min-width: 1280px) {
.about-education__promo-text {
row-gap: 25px;
}
}
@media (min-width: 1280px) {
.about-education__promo-text p:nth-child(1) {
text-indent: 70px;
}
.about-education__promo-text p:nth-child(2),
.about-education__promo-text p:nth-child(3) {
padding-left: 70px;
}
}
.about-education__promo-text strong {
font-weight: 400;
color: var(--primary-color);
}
.about-education__promo-photos {
position: relative;
display: grid;
justify-content: center;
width: 326px;
margin-inline: auto;
margin-block: 25px;
}
@media (min-width: 640px) {
.about-education__promo-photos {
margin-block: 0;
}
}
@media (min-width: 1024px) {
.about-education__promo-photos {
width: 500px;
}
}
@media (min-width: 1280px) {
.about-education__promo-photos {
width: 645px;
}
}
.about-education__promo-photos img:nth-child(1) {
width: 240px;
}
@media (min-width: 1024px) {
.about-education__promo-photos img:nth-child(1) {
width: 300px;
}
}
@media (min-width: 1280px) {
.about-education__promo-photos img:nth-child(1) {
width: 455px;
}
}
.about-education__promo-photos img:nth-child(2) {
position: absolute;
bottom: 50px;
left: 0;
width: 100px;
height: 150px;
object-fit: cover;
}
@media (min-width: 1024px) {
.about-education__promo-photos img:nth-child(2) {
bottom: 75px;
width: 150px;
height: 226px;
}
}
@media (min-width: 1280px) {
.about-education__promo-photos img:nth-child(2) {
bottom: 100px;
width: 195px;
height: 295px;
}
}
.about-education__promo-photos-figure {
position: absolute;
top: 65px;
right: -2px;
width: 90px;
height: 90px;
}
@media (min-width: 1024px) {
.about-education__promo-photos-figure {
right: 30px;
width: 140px;
height: 140px;
}
}
@media (min-width: 1280px) {
.about-education__promo-photos-figure {
top: 120px;
right: 2px;
width: 185px;
height: 185px;
}
}
.about-education__invite {
display: grid;
row-gap: 10px;
text-transform: uppercase;
}
.about-education__invite strong {
font-weight: 400;
color: var(--primary-color);
}
.about-education__invite p:nth-child(1) {
font-size: 18px;
}
@media (min-width: 640px) {
.about-education__invite p:nth-child(1) {
font-size: 20px;
}
}
@media (min-width: 1024px) {
.about-education__invite p:nth-child(1) {
margin-bottom: 30px;
padding-right: 90px;
font-size: 30px;
}
}
@media (min-width: 1280px) {
.about-education__invite p:nth-child(1) {
max-width: 1000px;
margin-bottom: 50px;
padding-right: 0;
font-size: 40px;
}
}
.about-education__invite p:nth-child(2) {
font-size: 14px;
}
@media (min-width: 640px) {
.about-education__invite p:nth-child(2) {
width: calc(50% - 16px);
justify-self: end;
}
}
@media (min-width: 1024px) {
.about-education__invite p:nth-child(2) {
margin-bottom: 30px;
}
}
@media (min-width: 1280px) {
.about-education__invite p:nth-child(2) {
width: calc(50% - 40px);
margin-bottom: 50px;
font-size: 20px;
}
}
.about-education__invite-clips {
display: grid;
row-gap: 30px;
margin-bottom: 35px;
}
@media (min-width: 640px) {
.about-education__invite-clips {
grid-template-columns: repeat(2, 1fr);
align-items: start;
column-gap: 16px;
margin-bottom: 40px;
}
}
@media (min-width: 768px) {
.about-education__invite-clips {
column-gap: 25px;
margin-bottom: 45px;
}
}
@media (min-width: 1024px) {
.about-education__invite-clips {
margin-bottom: 50px;
}
}
@media (min-width: 1280px) {
.about-education__invite-clips {
column-gap: 80px;
margin-bottom: 60px;
}
}
.about-education__invite-clip {
display: grid;
row-gap: 10px;
}
@media (min-width: 1024px) {
.about-education__invite-clip {
row-gap: 15px;
}
}
@media (min-width: 1280px) {
.about-education__invite-clip {
row-gap: 20px;
}
}
@media (min-width: 640px) {
.about-education__invite-clip:nth-child(1) {
margin-top: -50px;
}
}
@media (min-width: 1024px) {
.about-education__invite-clip:nth-child(1) {
margin-top: -80px;
}
}
@media (min-width: 1280px) {
.about-education__invite-clip:nth-child(1) {
margin-top: -115px;
}
}
.about-education__invite-clip-video {
height: 200px;
}
@media (min-width: 430px) {
.about-education__invite-clip-video {
height: 250px;
}
}
@media (min-width: 640px) {
.about-education__invite-clip-video {
height: 200px;
}
}
@media (min-width: 768px) {
.about-education__invite-clip-video {
height: 230px;
}
}
@media (min-width: 1024px) {
.about-education__invite-clip-video {
height: 275px;
}
}
@media (min-width: 1280px) {
.about-education__invite-clip-video {
height: 315px;
}
}
.about-education__invite-clip-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-weight: 500;
font-size: 14px;
color: black;
text-transform: uppercase;
}
@media (min-width: 768px) {
.about-education__invite-clip-title {
padding-block: 6px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.about-education__invite-clip-title {
padding-block: 8px;
}
}
@media (min-width: 1280px) {
.about-education__invite-clip-title {
padding-block: 10px;
}
}
.about-education__invite-clip-title:hover {
color: var(--primary-color);
}
.about-education__invite-clip-title::after {
content: "";
width: 14px;
height: 16px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/play-button.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
transition: background-image 0.3s ease;
}
.about-education__invite-clip-title:hover::after {
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/play-button--red.svg);
}
.about-education__awards {
display: grid;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (min-width: 640px) {
.about-education__awards {
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 50px;
}
}
@media (min-width: 1024px) {
.about-education__awards {
column-gap: 100px;
padding-right: 100px;
font-size: 18px;
}
}
@media (min-width: 1280px) {
.about-education__awards {
column-gap: 240px;
padding-right: 140px;
font-size: 20px;
}
}
.about-education__awards strong {
font-weight: 500;
color: var(--primary-color);
}
.about-education__awards-figure {
display: none;
}
@media (min-width: 640px) {
.about-education__awards-figure {
display: block;
width: 100px;
height: 100px;
}
}
@media (min-width: 1024px) {
.about-education__awards-figure {
display: block;
width: 120px;
height: 120px;
}
}
@media (min-width: 1280px) {
.about-education__awards-figure {
display: block;
width: 140px;
height: 140px;
}
}
.about-purpose {
display: grid;
}
.about-purpose__promo {
margin-bottom: 100px;
padding-block: 20px;
background-color: var(--pink);
}
@media (min-width: 768px) {
.about-purpose__promo {
padding-block: 30px;
}
}
@media (min-width: 1024px) {
.about-purpose__promo {
margin-bottom: 150px;
padding-block: 35px;
}
}
@media (min-width: 1280px) {
.about-purpose__promo {
padding-block: 45px;
}
}
.about-purpose__promo-wrapper {
display: grid;
row-gap: 15px;
}
@media (min-width: 640px) {
.about-purpose__promo-wrapper {
row-gap: 20px;
}
}
@media (min-width: 768px) {
.about-purpose__promo-wrapper {
row-gap: 25px;
}
}
@media (min-width: 1280px) {
.about-purpose__promo-wrapper {
row-gap: 45px;
}
}
.about-purpose__promo-header {
}
@media (min-width: 640px) {
.about-purpose__promo-header {
display: grid;
grid-template-columns: 300px 1fr;
}
}
@media (min-width: 768px) {
.about-purpose__promo-header {
display: grid;
grid-template-columns: 400px 1fr;
}
}
@media (min-width: 1024px) {
.about-purpose__promo-header {
display: grid;
grid-template-columns: 450px 1fr;
}
}
@media (min-width: 1280px) {
.about-purpose__promo-header {
display: grid;
grid-template-columns: 545px 1fr;
}
}
.about-purpose__title {
margin-bottom: 20px;
font-size: 24px;
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-purpose__title {
width: 300px;
margin-bottom: 0;
font-size: 28px;
}
}
@media (min-width: 768px) {
.about-purpose__title {
width: 400px;
font-size: 36px;
}
}
@media (min-width: 1024px) {
.about-purpose__title {
margin-bottom: 35px;
font-size: 40px;
}
}
@media (min-width: 1280px) {
.about-purpose__title {
margin-bottom: 50px;
font-size: 50px;
}
}
.about-purpose__promo-details {
display: grid;
}
@media (min-width: 640px) {
.about-purpose__promo-details {
grid-template-columns: 200px 1fr;
align-items: center;
column-gap: 20px;
}
}
@media (min-width: 768px) {
.about-purpose__promo-details {
grid-template-columns: 255px 1fr;
column-gap: 30px;
}
}
@media (min-width: 1024px) {
.about-purpose__promo-details {
column-gap: 0;
}
}
.about-purpose__promo-details-photo {
width: 100%;
}
@media (min-width: 640px) {
.about-purpose__promo-details-photo {
order: -1;
margin-top: -80px;
}
}
.about-purpose__promo-details-text {
display: grid;
row-gap: 10px;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.about-purpose__promo-details-text {
padding-bottom: 0;
}
}
@media (min-width: 1024px) {
.about-purpose__promo-details-text {
padding-inline: 70px;
}
}
.about-purpose__promo-details-text strong {
font-weight: 400;
color: var(--primary-color);
}
.about-purpose__promo-details-text p:nth-child(1) {
font-size: 14px;
}
@media (min-width: 1024px) {
.about-purpose__promo-details-text p:nth-child(1) {
font-size: 16px;
}
}
.about-purpose__promo-details-text p:nth-child(2) {
font-size: 18px;
}
@media (min-width: 1024px) {
.about-purpose__promo-details-text p:nth-child(2) {
font-size: 32px;
}
}
@media (min-width: 1280px) {
.about-purpose__promo-details-text p:nth-child(2) {
font-size: 36px;
}
}
.about-purpose__promo-details-text p:nth-child(3) {
font-size: 14px;
}
@media (min-width: 1024px) {
.about-purpose__promo-details-text p:nth-child(3) {
font-size: 16px;
}
}
.about-purpose__promo-photo-overboard {
width: 100%;
margin-bottom: -100px;
}
@media (min-width: 1024px) {
.about-purpose__promo-photo-overboard {
width: 750px;
margin-inline: auto;
margin-bottom: -150px;
}
}
@media (min-width: 1280px) {
.about-purpose__promo-photo-overboard {
width: 930px;
}
}
.about-purpose__leaving {
display: grid;
row-gap: 15px;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.about-purpose__leaving {
grid-template-columns: 0.4fr 0.6fr;
column-gap: 15px;
}
}
@media (min-width: 768px) {
.about-purpose__leaving {
grid-template-columns: 0.4fr 0.6fr;
column-gap: 20px;
}
}
@media (min-width: 1024px) {
.about-purpose__leaving {
column-gap: 35px;
}
}
@media (min-width: 1280px) {
.about-purpose__leaving {
column-gap: 50px;
}
}
.about-purpose__leaving-text {
display: grid;
row-gap: 10px;
font-size: 14px;
}
.about-purpose__leaving-text:nth-child(1) {
font-size: 16px;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.about-purpose__leaving-text:nth-child(1) {
font-size: 20px;
}
}
.about-purpose__leaving-text strong {
font-weight: 400;
color: var(--primary-color);
}
@media (min-width: 768px) {
.about-purpose__leaving-text:nth-child(2) {
row-gap: 15px;
font-size: 16px;
}
}
.about-purpose__searching {
}
.about-purpose__searching-title {
margin-bottom: 15px;
font-size: 24px;
color: var(--primary-color);
text-transform: uppercase;
}
@media (min-width: 640px) {
.about-purpose__searching-title {
margin-bottom: 20px;
font-size: 28px;
}
}
@media (min-width: 768px) {
.about-purpose__searching-title {
font-size: 36px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-title {
margin-bottom: 30px;
font-size: 58px;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-title {
margin-bottom: 40px;
font-size: 68px;
}
}
.about-purpose__searching-items {
display: grid;
row-gap: 20px;
}
@media (min-width: 768px) {
.about-purpose__searching-items {
row-gap: 25px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-items {
row-gap: 30px;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-items {
row-gap: 35px;
}
}
.about-purpose__searching-item {
display: grid;
row-gap: 15px;
}
@media (min-width: 640px) {
.about-purpose__searching-item--first {
grid-template-columns: 300px 1fr;
column-gap: 15px;
}
}
@media (min-width: 768px) {
.about-purpose__searching-item--first {
grid-template-columns: 345px 1fr;
align-items: center;
column-gap: 20px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-item--first {
grid-template-columns: 480px 1fr;
column-gap: 35px;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-item--first {
grid-template-columns: 545px 1fr;
column-gap: 45px;
}
}
.about-purpose__searching-item--second {
}
@media (min-width: 1024px) {
.about-purpose__searching-item--second {
grid-template-columns: repeat(2, 1fr);
align-items: start;
column-gap: 30px;
}
}
.about-purpose__searching-item--third {
}
@media (min-width: 640px) {
.about-purpose__searching-item--third {
grid-template-columns: repeat(2, 1fr);
align-items: center;
column-gap: 20px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-item--third {
column-gap: 30px;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-item--third {
grid-template-columns: 500px 1fr;
column-gap: 85px;
align-items: end;
margin-top: -200px;
}
}
.about-purpose__searching-item-photos {
}
.about-purpose__searching-item-photos--first {
position: relative;
width: 330px;
margin-inline: auto;
}
@media (min-width: 640px) {
.about-purpose__searching-item-photos--first {
width: 100%;
}
}
.about-purpose__searching-item-photos img {
width: 100%;
}
.about-purpose__searching-item-photos--first img:nth-child(1) {
width: 260px;
}
@media (min-width: 640px) {
.about-purpose__searching-item-photos--first img:nth-child(1) {
width: 100%;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-item-photos--first img:nth-child(1) {
width: 415px;
}
}
.about-purpose__searching-item-photos--first img:nth-child(2) {
position: absolute;
bottom: 30px;
right: 0;
width: 150px;
}
@media (min-width: 640px) {
.about-purpose__searching-item-photos--first img:nth-child(2) {
bottom: 45px;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-item-photos--first img:nth-child(2) {
width: 245px;
}
}
.about-purpose__searching-item-photos--second {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 16px;
}
@media (min-width: 768px) {
.about-purpose__searching-item-photos--second {
column-gap: 20px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-item-photos--second {
order: 1;
column-gap: 30px;
}
}
.about-purpose__searching-item-photos--second img:nth-child(2) {
margin-top: 65px;
}
@media (min-width: 1024px) {
.about-purpose__searching-item-photos--second img:nth-child(2) {
margin-top: 90px;
}
}
@media (min-width: 1280px) {
.about-purpose__searching-item-photos--second img:nth-child(2) {
margin-top: 120px;
}
}
.about-purpose__searching-item-text {
display: grid;
row-gap: 10px;
font-size: 14px;
}
@media (min-width: 768px) {
.about-purpose__searching-item-text {
font-size: 16px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-item--first .about-purpose__searching-item-text {
row-gap: 25px;
}
.about-purpose__searching-item--first .about-purpose__searching-item-text p:not(:first-child) {
font-size: 20px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-item--second .about-purpose__searching-item-text {
row-gap: 25px;
}
}
@media (min-width: 1024px) {
.about-purpose__searching-item--third .about-purpose__searching-item-text {
font-size: 20px;
}
}
.about-purpose__searching-item-text strong {
font-weight: 400;
color: var(--primary-color);
}
.uppercase {
text-transform: uppercase;
}
.post-scriptum {
padding-block: 30px;
background-color: var(--pink);
}
@media (min-width: 640px) {
.post-scriptum {
padding-block: 45px;
}
}
@media (min-width: 1024px) {
.post-scriptum {
padding-block: 65px;
}
}
@media (min-width: 1280px) {
.post-scriptum {
padding-block: 80px;
}
}
.post-scriptum__wrapper {
position: relative;
}
@media (min-width: 1024px) {
.post-scriptum__wrapper {
padding-inline: 90px;
}
}
@media (min-width: 1280px) {
.post-scriptum__wrapper {
padding-inline: 150px;
}
}
.post-scriptum__wrapper::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 80vw;
height: 40vh;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/ps.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media (min-width: 640px) {
.post-scriptum__wrapper::after {
width: 300px;
height: 150px;
}
}
@media (min-width: 768px) {
.post-scriptum__wrapper::after {
width: 450px;
height: 225px;
}
}
@media (min-width: 1024px) {
.post-scriptum__wrapper::after {
width: 730px;
height: 365px;
}
}
@media (min-width: 1280px) {
.post-scriptum__wrapper::after {
width: 730px;
height: 365px;
}
}
.post-scriptum__text {
position: relative;
z-index: 1;
min-height: 190px;
font-family: "Betmo", sans-serif;
font-size: 18px;
text-align: center;
}
@media (min-width: 640px) {
.post-scriptum__text {
min-height: 180px;
font-size: 24px;
}
}
@media (min-width: 768px) {
.post-scriptum__text {
min-height: 225px;
font-size: 30px;
}
}
@media (min-width: 1024px) {
.post-scriptum__text {
min-height: 270px;
font-size: 36px;
}
}
@media (min-width: 1280px) {
.post-scriptum__text {
min-height: 315px;
font-size: 42px;
}
}
.post-scriptum__text strong {
font-weight: 400;
color: var(--primary-color);
}
.post-photography {
}
.post-photography__main {
padding-bottom: 35px;
}
@media (min-width: 640px) {
.post-photography__main {
padding-bottom: 45px;
}
}
@media (min-width: 1024px) {
.post-photography__main {
padding-bottom: 60px;
}
}
@media (min-width: 1280px) {
.post-photography__main {
padding-bottom: 80px;
}
}
.post-photography {
row-gap: 40px;
}
@media (min-width: 1024px) {
.post-photography {
row-gap: 60px;
}
}
@media (min-width: 1280px) {
.post-photography {
row-gap: 80px;
}
}
.post-photography .photography__item {
row-gap: 45px;
height: auto;
}
.post-photography .photography__item-primary-image {
display: block;
object-fit: cover;
}
@media (min-width: 640px) {
.post-photography .photography__item { }
.post-photography .photography__item:nth-child(even) .photography__item-secondary-image {
grid-row: 1 / 3;
}
}
@media (min-width: 1280px) {
.post-photography .photography__item {
column-gap: 100px;
}
}
@media (min-width: 640px) {
.post-photography .photography__item .photography__item-primary-image {
grid-row: unset;
}
.post-photography .photography__item .photography__item-secondary-image {
align-self: center;
height: 70%;
}
} .contact {
position: relative;
background-color: var(--pink);
overflow: hidden;
}
@media (min-width: 768px) {
.contact {
height: 100dvh;
}
}
.contact__wrapper {
display: grid;
}
@media (min-width: 768px) {
.contact__wrapper {
grid-template-columns: repeat(2, 1fr);
height: 100%;
}
}
@media (min-width: 1024px) {
.contact__wrapper {
column-gap: 15px;
}
}
@media (min-width: 1280px) {
.contact__wrapper {
column-gap: 50px;
}
}
.contact__photo {
width: 100%;
height: 585px;
object-fit: cover;
}
@media (min-width: 390px) {
.contact__photo {
height: 620px;
}
}
@media (min-width: 430px) {
.contact__photo {
height: 680px;
}
}
@media (min-width: 768px) {
.contact__photo {
height: 100%;
}
}
.contact__content {
display: grid;
padding-inline: 16px;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.contact__content {
align-self: end;
grid-template-rows: 1fr auto auto;
height: calc(100% - 68px);
}
}
@media (min-width: 1024px) {
.contact__content {
height: calc(100% - 82px);
}
}
@media (min-width: 1280px) {
.contact__content {
height: calc(100% - 94px);
padding-bottom: 65px;
}
}
.contact__poem {
min-height: 140px;
margin-block: 30px;
padding-top: 25px;
font-size: 19px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/feather.svg);
background-size: 100px 130px;
background-repeat: no-repeat;
background-position: right top;
}
@media (min-width: 640px) {
.contact__poem {
max-width: 300px;
min-height: 139px;
}
}
@media (min-width: 768px) {
.contact__poem {
align-self: center;
max-width: 390px;
min-height: 170px;
margin-bottom: 150px;
background-size: 120px 150px;
font-size: 24px;
}
}
@media (min-width: 1024px) {
.contact__poem {
max-width: 450px;
min-height: 193px;
margin-bottom: 30px;
font-size: 28px;
}
}
@media (min-width: 1280px) {
.contact__poem {
max-width: 550px;
min-height: 217px;
margin-bottom: 100px;
padding-top: 25px;
background-size: 160px 205px;
background-position: 85% top;
font-size: 32px;
letter-spacing: 2px;
}
}
@media (min-width: 1920px) {
.contact__poem {
margin-bottom: 200px;
}
}
.contact__nav {
margin-bottom: 30px;
}
@media (min-width: 768px) {
.contact__nav {
align-self: end;
margin-bottom: 75px;
}
}
@media (min-width: 1280px) {
.contact__nav {
margin-bottom: 30px;
}
}
.made-by {
font-weight: 500;
font-size: 12px;
color: #7f7374;
}
@media (min-width: 768px) {
.made-by {
align-self: end;
font-size: 14px;
}
}
.made-by a {
color: #7f7374;
}
.made-by a:hover {
color: var(--primary-color);
}
.contact__made-by {
align-self: end;
}
.footer {
padding-top: 30px;
padding-bottom: 20px;
background-color: var(--primary-color);
}
@media (min-width: 1024px) {
.footer {
padding-top: 40px;
}
}
@media (min-width: 1280px) {
.footer {
padding-top: 50px;
}
}
.footer__wrapper {
display: grid;
grid-template-columns: 1fr auto;
justify-content: space-between;
row-gap: 30px;
background-image: url(//katrinbark.com/wp-content/themes/katebark/assets/images/footer-logo.svg);
background-size: 230px 64px;
background-position: center center;
background-repeat: no-repeat;
}
@media (min-width: 1024px) {
.footer__wrapper {
background-size: 460px 130px;
}
}
@media (min-width: 1024px) {
.footer__wrapper {
row-gap: 40px;
}
}
.footer__nav {
display: grid;
row-gap: 10px;
}
.footer__nav-item {
color: #fff;
text-transform: uppercase;
font-size: 16px;
transition: transform 0.3s ease;
}
.footer__nav-item:hover,
.footer__nav-item--active {
transform: skewX(-20deg);
}
.footer__nav-link {
color: #fff;
}
.footer__contact-nav > .footer__nav-item:hover {
transform: none;
}
.footer__cellar {
grid-column: 1 / -1;
display: grid;
row-gap: 5px;
}
@media (min-width: 640px) {
.footer__cellar {
grid-template-columns: repeat(2, auto);
align-items: center;
justify-content: space-between;
}
}
.footer__copyright {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 640px) {
.footer__copyright {
font-size: 14px;
}
}
.footer__made-by,
.footer__made-by a {
color: rgba(255, 255, 255, 0.5);
}
.footer__made-by a:hover {
color: #fff;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(-100px, 0, 0);
}
100% {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes ArrowDown {
0% {
top: 0px;
}
50% {
top: 20px;
}
100% {
top: 0px;
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
50% {
opacity: 0;
}
}