/* USER VARIABLES SECTION */

:root {
	--accent: #9E1F44;
	--text: #4b4646;
	--inverted-color: #ffffff;
	--regular-text: 16px;
	--lineheight: 1.2;
	--userfont: roboto-st, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* FONTS LOAD SECTION */

@font-face { src: url("../fonts/roboto-regular-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 700; font-style: normal; }
@font-face { src: url("../fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-family: "playfair-st"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/PlayfairDisplay-Bold.woff2") format("woff2"); font-family: "playfair-st"; font-weight: 700; font-style: normal; }

/* GENERAL CSS SETTINGS */

::placeholder { color: #666; }
::selection { background-color: var(--accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; }
input:required:valid, textarea:required:valid { border-color: green; }

body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}

/* USER STYLES */

.container {
	max-width: 1140px;
	padding: 0 16px;
	margin: 0 auto;
}

.container--center {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.section {
	padding: 64px 0;
}

.main-header {
	font-family: playfair-st, sans-serif;
	font-size: 42px;
	font-weight: 400;
	text-align: center;
	margin-bottom: 32px;
}

.divider {
	content: "";
	margin: 0 auto;
	width: 340px;
	height: 1px;
	background-color: var(--text);
	margin-bottom: 64px;
}

.divider--white {
	background-color: var(--inverted-color);
}

.button-arrow-down {
	padding: 12px;
}

.button-arrow-down svg {
	fill: var(--inverted-color);
	width: 50px;
}

.button-arrow-down:hover svg {
	animation: bounce 2.5s cubic-bezier(0.280, 0.840, 0.420, 1) infinite;
}

@keyframes bounce {
	0%   { transform: scale(1,1)    translateY(0); }
  10%  { transform: scale(1,1) translateY(0); }
  30%  { transform: scale(1.1,.9) translateY(30px); }
  50%  { transform: scale(1,1)    translateY(0); }
  57%  { transform: scale(1,1)    translateY(3px); }
  64%  { transform: scale(1,1)    translateY(0); }
  100% { transform: scale(1,1)    translateY(0); }
}

.header	{
	min-height: 100vh;
	background: no-repeat center/cover;
	display: flex;
	align-items: center;
}

.slide-bg-header {
	backface-visibility: hidden;
	animation: slideBgHeader 12s linear infinite 0s;
	animation-timing-function: ease-in-out;
}

@keyframes slideBgHeader {
	0%, 60%, 100% {background-image: url(../images/hero-bucharest.jpg);}
	10%, 50% {background-image: url(../images/hero-warsaw.jpg);}
}

.header-content {
	padding: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	color: var(--inverted-color);
	background-color: rgba(0,0,0,.5);
}

.info-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.info-header__logo {
	max-width: 400px;
}

.sublogotype {
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	position: relative;
}

.sublogotype::before, .sublogotype::after {
	position: absolute;
	content: "";
	height: 2px;
	width: 32px;
	background-color: var(--inverted-color);
	top: 50%;
}

.sublogotype::before {
	left: -48px;
}

.sublogotype::after {
	right: -48px;
}

.info-header__dates {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.info-header__date {
	font-family: playfair-st, sans-serif;
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 2px;
}

.info-header__description {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 400;
	text-align: center;
	max-width: 680px;
}

.button-main {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--inverted-color);
	background-color: var(--accent);
	padding: 16px 32px;
}

.button-main:hover {
	animation: bounce-button 1s ease 1;
}

@keyframes bounce-button {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(10px); }
	100% { transform: translateY(0); }
}

.section--intro {
	background: no-repeat center/cover;
	padding: 128px 0;
}

.intro-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
	color: var(--inverted-color);
}

.intro-content__text {
	font-size: 20px;
}

.intro-content__header {
	font-size: 32px;
}

.organizers-info {
	display: flex;
	align-items: center;
	gap: 32px;
}

.organizers-info__photo {
	flex: 460px 1 1;
}

.org-photo {
	position: relative;
}

.org-photo__signature {
	color: var(--inverted-color);
	font-size: 14px;
	line-height: 1;
	position: absolute;
	bottom: 24px;
}

.org-photo__signature--left {
	left: 24px;
}

.org-photo__signature--right {
	right: 24px;
}

.organizers-info__text {
	flex: auto 1 10;
}

.organizers-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.organizers-text__text {
	margin-bottom: 16px;
}

.organizers-text__text--signature {
	margin-bottom: 64px;
	text-align: right;
	align-self: flex-end;
	font-weight: 700;
}

.organizers-text__button {
	margin: 0 auto;
}

.section--venue {
	background: no-repeat center/cover;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slide-bg-venue {
	backface-visibility: hidden;
	animation: slideBgVenue 24s linear infinite 0s;
	animation-timing-function: ease-in-out;
}

@keyframes slideBgVenue {
	0% {background-image: url(../images/buhro-exterior-1937-hor-clsc.jpg);}
	25% {background-image: url(../images/wawlc-exterior-7823-hor-clsc.webp);}
	50% {background-image: url(../images/buhro-lounge-0178-hor-clsc.webp);}
	75% {background-image: url(../images/buhro-ballroom-0186-hor-clsc.jpg);}
}

.venue-content {
	padding: 64px;
	background-color: rgba(0,0,0,.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	color: var(--inverted-color);
}

.info-venue {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}


.info-venue__logo {
	max-width: 400px;
}

.info-venue__venue-container {
	width: auto;
	display: flex;
	justify-content: center;
	gap: 64px;
}

.info-venue__venue-column {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.info-venue__venue {
	max-width: 320px;
	font-weight: 400;
	font-size: 24px;
}

.info-venue__hotel {
	max-width: 200px;
}

.section--purpose {
	position: relative;
	min-height: 100vh;
	background: no-repeat center/cover;
	isolation: isolate;
	display: flex;
	align-items: center;
}

.section--purpose::after {
	position: absolute;
	content: "";
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: -1;
}

.purpose__header {
	color: var(--inverted-color);
}

.purpose-items {
	padding: 32px 64px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
}

.purpose-item {
	flex: 0 1 200px;
	background-color: var(--inverted-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 32px 16px;
}

.purpose-item__icon {
	max-width: 128px;
}

.purpose-item__icon path {
	fill: var(--accent);
}

.purpose-item__info {
	text-align: center;
	line-height: 1.2;
}

.section--participants {
	background: no-repeat center/cover;
}

.participants {
	padding: 64px 32px;
	display: flex;
	gap: 64px;
	color: var(--inverted-color);
}

.participants-item {
	text-align: center;
	flex: 50% 1 1;
}

.participants-item__title {
	font-family: playfair-st, serif;
	font-size: 32px;
	line-height: 1;
	font-weight: 400;
	margin-bottom: 16px;
}

.participants-item__text {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 400;
	margin-bottom: 16px;
}

.participants-item__text span {
	font-weight: 700;
}

.section--gallery {
	padding: 64px 32px;
}

.main-subheader {
	text-align: center;
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
}

.gallery__subheader {
	margin-bottom: 48px;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-pagination {
	position: relative;
	margin-top: 32px;
}

.swiper-pagination-bullet-active {
	background-color: var(--accent);
}

.swiper-button-next, .swiper-button-prev {
	color: var(--accent);
}

.section--fee {
	background: no-repeat center/cover;
}

.fee-wrapper {
	padding: 64px;
	background-color: rgba(255,255,255,.9);
	text-align: center;
}

.fee-wrapper .divider {
	margin-bottom: 32px;
}

.fee__prices {
	display: flex;
	justify-content: center;
	gap: 64px;
}

.fee__price {
	width: 150px;
	height: 150px;
	background-color: var(--accent);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin: 0 auto; */
	margin-top: 0px;
	margin-bottom: 32px;
}

.fee__price > p {
	display: block;
	font-size: 36px;
	line-height: 1;
	font-weight: 700;
	color: var(--inverted-color);
	z-index: 10;
}

.fee__price span {
	display: block;
	font-size: 16px;
	font-weight: 400;
	margin-top: 8px;
}

.fee__desc {
	font-size: 14px;
	margin-bottom: 32px;
}

.fee__include {
	margin: 0 auto;
	text-align: center;
	font-size: 32px;
	line-height: 1;
	font-weight: 400;
	margin-bottom: 32px;
}

.fee-items{
	margin: 0 auto;
	column-count: 2;
	column-gap: 64px;
	column-rule: 1px solid var(--text);
	max-width: 860px;
}

.fee-item {
	font-size: 18px;
	line-height: 1.1;
	font-weight: 400;
	margin-bottom: 16px;
	position: relative;
	padding-left: 12px;
	text-align: left;
}

.fee-item::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: var(--text);
	border-radius: 50%;
	top: 8px;
	left: -6px;
}

.program-day{
	display: inline-block;
	margin: 0 auto;
	margin-bottom: 32px;
}

.day-row {
	max-width: 640px;
	font-size: 18px;
	line-height: 1;
	display: grid;
	grid-template-columns: 60px auto;
	gap: 10px;
	margin-bottom: 16px;
}

.day-row--period {
	grid-template-columns: 120px auto;
}

.day-row__time {
	font-weight: 700;
	text-align: left;
}

.day-row__event {
	font-weight: 400;
	text-align: left;
}

.section--fairs {
	background-color: #54595F;
	padding-top: 128px;
}

.main-subheader--fairs {
	margin: 0 auto;
	max-width: 720px;
	color: var(--inverted-color);
	margin-bottom: 64px;
	font-size: 24px;
	line-height: 1.5;
}

.fair-cards {
	display: flex;
	flex-flow: wrap;
	gap: 32px;
	justify-content: center;
	padding: 0 16px;
}

.fair-card {
	max-width: 225px;
	padding: 16px;
	padding-bottom: 24px;
	background-color: #fff;
	text-align: center;
}

.fair-card__image {
	margin-bottom: 16px;
}

.fair-card__country {
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
	margin-bottom: 12px;
}

.fair-card__town {
	font-size: 18px;
	line-height: 1;
	font-weight: 500;
	margin-bottom: 20px;
}

.fair-card__date {
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
}

.fair-buttons {
	padding: 64px 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 64px;
}

.fair-button {
	min-width: 275px;
}

.footer {
	background-color: #303030;
	padding: 32px 16px;
}

.footer-wrapper {
	margin: 0 auto;
	max-width: 960px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.footer__logo img {
	padding: 16px;
	width: 150px;
}

.footer__row {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: var(--inverted-color);
	padding: 4px;
}

.footer__row:first-child{
	padding-bottom: 16px;
}

.footer__icon svg {
	fill: var(--inverted-color);
	width: 24px;
	height: 24px;
}

.footer__link a {
	color: var(--inverted-color);
	padding-right: 8px;
}

.footer__link__mail a {
	display: block;
}