/* MENU GŁÓWNE */
div.ct-header-cta, a.register-button-header {
	min-height: 85px;
}

div[data-row="middle:boxed"] {
	margin-top: 32px;
}


/* ZMIENNE */
body {
	--cta-color: var(--theme-palette-color-11);
}


/* CZĘSTO UŻYWANE ELEMENTY */
svg.default-logo {
	width: inherit;
	max-height: min-content;
    max-width: min-content;
}

svg.default-logo rect {
	fill: var(--logo-color-header, var(--theme-palette-color-1));	
}

a.promo-button {
	padding: 11px 11px 11px 23px;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 3px solid var(--theme-palette-color-8);
	border-radius: 100px;
	max-width: max-content;
	font-size: 16px;
	font-weight: 400;
	background: var(--theme-palette-color-8);
}

a.promo-button.cta {
	font-weight: 600;
	color: var(--theme-palette-color-8);
	background: var(--cta-color);
}

a.promo-button > span {
	min-width: 34px;
	height: 34px;
	background-repeat: no-repeat;
	background-position: center;
}

a.promo-mini-button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
}

div.promo-main-content {
	width: 100%;
	max-width: 1400px;
	margin: 64px auto;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

div.promo-main-content {
	max-width: 1400px;
	width: var(--theme-container-width);
	margin-left: auto;
	margin-right: auto;
}

div.header-start {
	width: var(--theme-container-width);
	margin-left: auto;
	margin-right: auto;
}


/* HEADER */
div.hero-section, body.archive.post-type-archive-usluga main > div.hero-section {
	position: relative;
	overflow: hidden;
}

div.header-start {
	padding-top: 123px;
	padding-bottom: 82px;
	max-width: 1400px;
	margin: auto;
}


/* GŁÓWNA TREŚĆ - LEWA KOLUMNA */
div.main-content {
	max-width: 556px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	position: relative;
	z-index: 3;
}

div.hero-logo {
	max-width: 440px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

div.hero-logo img {
	min-width: 537px;
}

div.hero-description p {
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 0;
}

div.hero-buttons-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}


/* POMOCNICZE STYLOWANIE */
div.header-image {
	width: 100%;
	max-width: calc(60vw + 100px);
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-position: left center;
	background-size: cover;
	z-index: 1;
}

div.header-image-left > svg {
	width: 100%;
	min-height: 750px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

div.header-end {
	width: 100%;
	height: 75px;
	position: absolute;
	bottom: -1px;
	background-image: url('/wp-content/themes/hopsiup/images/header/header-end.svg');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	z-index: 3;
}

div.hero-section:before, div.hero-section:after {
	content: " ";
	background-image: url('/wp-content/themes/hopsiup/images/header/header-round.svg');
	width: 240px;
	height: 240px;
	position: absolute;
	z-index: 2;
	background-size: cover;
}

div.hero-section:before {
	top: -100px;
	right: -120px;
}

div.hero-section:after {
	bottom: -60px;
	right: -60px;
}


/* SKRÓCONA WERSJA BANERU */
div.hero-section.title div.main-content {
	padding: 64px 0;
}

div.hero-section.title div.hero-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
}

div.hero-section.title div.hero-title > h1 {
	margin-top: 4px;
	line-height: normal;
}


/* NAWIGACJA OKRUSZKOWA  */
div.breadcrumbs > ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0.8;
}

div.breadcrumbs > ol > li, div.breadcrumbs > ol > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--theme-palette-color-10);
}

div.breadcrumbs > ol > li > a > span {
	color: var(--theme-palette-color-10);
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
}

div.breadcrumbs > ol > li.hidden {
	display: none;
}


/* NASZE USŁUGI - MODUŁ LINKOWANIA */
div.our-services {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

div.our-services > div.boxes {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

div.our-services > div.boxes > div.service-box {
	max-width: calc((100% - 32px) / 2);
	border-radius: 32px;
	overflow: hidden;
	background: var(--theme-palette-color-9);
}
div.our-services > div.boxes > div.service-box > a {
	display: flex;
	gap: 16px;
}

div.our-services > div.boxes > div.service-box > a > div.service-icon {
	padding: 16px;
	background: var(--theme-palette-color-8);
	border: 4px solid var(--theme-palette-color-9);
	border-radius: 32px;
}

div.our-services > div.boxes > div.service-box > a > div.service-info {
	height: min-content;
	margin-top: auto;
	margin-bottom: auto;
}

div.our-services > div.boxes > div.service-box > a > div.service-info > div.service-name {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: start;
	max-width: fit-content;
	position: relative;
}

div.our-services > div.boxes > div.service-box > a > div.service-info h3 {
	font-size: 24px;
	line-height: normal;
	text-transform: uppercase;
	margin-bottom: 4px;
}

div.our-services > div.boxes > div.service-box > a > div.service-info > div.service-name svg {
	position: absolute;
	bottom: 0;
	left: 0;
}

div.our-services > div.boxes > div.service-box > a > div.service-info > div.service-description > p {
	margin-top: 16px;
	margin-bottom: 0;
}

div.our-services > div.boxes > div.service-box > a > div.service-see-more {
	min-width: 40px;
	border-radius: 8px 32px 32px 8px;
	border: 4px solid var(--theme-palette-color-9);
	display: flex;
	align-items: center;
	justify-content: center;
}


/* NASI SPECJALIŚCI - MODUŁ LINKOWANIA */

div.our-specialists {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

div.our-specialists > div.boxes {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	justify-content: center;
}

div.our-specialists > div.boxes > div.specialist-box {
	min-width: 326px;
}

div.our-specialists > div.boxes > div.specialist-box > a {
	display: flex;
	flex-direction: column;
	align-items: center;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.box-images {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.box-images > div.circle-background {
	position: absolute;
	bottom: -10px;
	left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
	z-index: 1;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.box-images > div.specialist-image {
	position: relative;
	z-index: 2;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.box-images > div.specialist-image > img {
	object-fit: cover;
	height: 300px;
	max-height: 300px;
	max-width: 252px;
}


div.our-specialists > div.boxes > div.specialist-box > a > div.specialist-info {
	display: flex;
	padding: 16px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	border-radius: 16px;
	background: var(--theme-palette-color-9);
	width: 100%;
	position: relative;
	z-index: 3;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.specialist-info > p {
	text-align: center;
	line-height: normal;
	margin: 0;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.specialist-info > p.position {
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}

div.our-specialists > div.boxes > div.specialist-box > a > div.specialist-info > p.name {
	color: var(--theme-palette-color-6);
	font-size: 18px;
	font-weight: 600;
}


/* ZAREZERWUJ WIZYTĘ */

div.book-appointment-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

div.book-appointment-box > div.heading-2 {
	display: flex;
	padding: 16px 64px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	border: 3px solid;
	background: var(--theme-palette-color-8);
	margin-bottom: -31px;
	z-index: 2;
}

div.book-appointment-box > div.heading-2 > h2 {
	line-height: normal;
	text-transform: uppercase;
}

div.book-appointment-box > div.background {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	position: relative;
	padding: 64px;
	border-radius: 200px;
	gap: 32px;
}

div.book-appointment-box > div.background > div.advantage-box {
	display: flex;
	align-items: flex-start;
	flex: 1 0 0;
	border-radius: 100px;
border: 3px solid var(--theme-palette-color-8);
background: var(--theme-palette-color-8);
	align-items: center;
	gap: 16px;
	padding-right: 32px;
}

div.book-appointment-box > div.background > div.advantage-box > div.icon {
	aspect-ratio: 1 / 1;
	display: flex;
	padding: 16px;
	align-items: center;
	border-radius: 100px;
	background: var(--theme-palette-color-1);
}

div.book-appointment-box > div.background > div.advantage-box > div.icon > span {
	max-height: -webkit-fill-available;
}

div.book-appointment-box > div.background > div.advantage-box > div.description {
	font-size: 16px;
	line-height: 28px;
}

div.book-appointment-box > div.background > svg {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
}

div.book-appointment-box > div.background svg.desktop {
	display: block;
}
	
div.book-appointment-box > div.background svg.mobile {
	display: none;
}

div.book-appointment-box > div.background > svg > rect {
	width: calc(100% - 2px);
	height: calc(100% - 2px);
}

div.book-appointment-box > div.cta-button {
	margin-top: -28px;
	z-index: 2;
}

div.book-appointment-box > div.cta-button > a {
	font-size: 20px;
	font-weight: 600;
	/*text-transform: uppercase;*/
}


/* BOKS Z LOKALIZACJĄ */
div.location-info {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 64px;
}

div.location-info > div {
	flex: 1 0 0;
	align-self: stretch;
}

div.location-info > div.column-one > iframe {
	width: 100%;
	height: 100%;
	border-radius: 32px;
}

div.location-info > div.column-two {
	display: flex;
	padding: 64px 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

div.location-info > div.column-two > div.adress-bus {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

div.location-info > div.column-two > div.adress-bus > div.street-city, div.location-info > div.column-two > div.adress-bus > div.bus-stop {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-weight: 700;
	justify-content: center;
	align-items: center;
}

div.location-info > div.column-two > div.adress-bus > div.bus-stop > p, div.location-info > div.column-two > div.descritpion > p, div.location-info > div.column-two > h2 {
	margin: 0;
}

div.location-info > div.column-two > div.bottons > a.promo-button {
	font-weight: 600;
}

/* MODUŁ LINKOWANIA DO BLOGA */
div.blog-posts-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

div.blog-posts-list > div.heading-2 {
	align-self: center;
	margin: 0;
}

div.blog-posts-list .rr-carousel {
  --gap: 16px;
  --radius: 16px;
  --shadow: 0 8px 22px rgba(0, 0, 0, .08);
  --container: var(--theme-container-width, 1400px);
  --gutter: max(0px, calc((100vw - var(--container)) / 2));
  --bleed: var(--gutter);
  --media-ratio: 16 / 9;
  position: relative;
  width: 100%;
}

div.blog-posts-list .rr-carousel__viewport {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--bleed);
  margin-right: calc(-1 * var(--bleed));
  scroll-behavior: smooth;
  scrollbar-width: none;
}

div.blog-posts-list .rr-carousel__viewport::-webkit-scrollbar {
	display: none;
}

div.blog-posts-list .rr-carousel__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

div.blog-posts-list .rr-carousel__track {
  display: flex;
  gap: var(--gap);
  overflow: visible;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 16px;
}

div.blog-posts-list .rr-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
  border-radius: 32px;
  overflow: hidden;
  background: var(--theme-palette-color-9);
  transform: translateZ(0);
}

div.blog-posts-list .rr-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

div.blog-posts-list .rr-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

div.blog-posts-list .rr-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}

div.blog-posts-list .rr-card__link:hover .rr-card__img {
  transform: scale(1.03);
}

div.blog-posts-list .rr-card__meta {
  padding: 0 32px;
}

div.blog-posts-list .rr-card__cat {
	display: flex;
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px; 
	border: 4px solid var(--theme-palette-color-9);
	background: var(--theme-palette-color-8);
	max-width: max-content;
	font-size: 14px;
	line-height: normal;
	margin-top: -17px;
	margin-bottom: 16px;
	position: relative;
	z-index: 2;
}

div.blog-posts-list .rr-card__date { 
	color: var(--theme-palette-color-10);
	font-size: 14px;
	line-height: normal;
}

div.blog-posts-list .rr-card__title {
  padding: 8px 32px 32px;
  margin: 0;
}

div.blog-posts-list .rr-card.is-visible {
  opacity: 1;
}
div.blog-posts-list .rr-card.is-hidden {
  opacity: .55;
  filter: grayscale(.12);
}

div.blog-posts-list .rr-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
	padding: 0 32px;
}

div.blog-posts-list .rr-carousel__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}

div.blog-posts-list .rr-dot {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  opacity: .45;
  transition: opacity .2s ease, transform .2s ease;
}

div.blog-posts-list .rr-dot svg {
	display: block;
}

div.blog-posts-list .rr-dot svg * {
	fill: var(--theme-palette-color-10);
}

div.blog-posts-list button.is-enabled svg * {
	stroke: var(--theme-palette-color-10);
}

div.blog-posts-list .rr-dot.is-active {
  opacity: 1;
  transform: scale(1.05);
}

div.blog-posts-list .rr-dot.is-inactive {
	opacity: .45;
}

div.blog-posts-list .rr-carousel__arrows {
  display: flex;
  gap: 10px;
}

div.blog-posts-list .rr-arrow {
  border: 0;
  background: var(--theme-palette-color-8);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

div.blog-posts-list .rr-arrow.is-enabled {
  opacity: 1;
  background: var(--theme-palette-color-9);
}

div.blog-posts-list .rr-arrow:active { transform: scale(.98); }
.rr-carousel__viewport,
.rr-carousel__track,
.rr-card__link {
  -webkit-user-select: none;
  user-select: none;
}

div.blog-posts-list .rr-carousel__track {
  display: flex;
  gap: var(--gap);
  overflow: visible;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 16px;
}

div.blog-posts-list .rr-carousel__track::after {
  content: "";
  flex: 0 0 var(--bleed);
}

div.blog-posts-list .rr-carousel__viewport {
  scroll-padding-right: var(--bleed);
	border-radius: 32px;
}


/* STOPKA STRONY */
footer div[data-column="menu"]:before {
	content: "Nasza oferta";
}

footer div[data-column="menu-secondary"]:before {
	content: "Ważne odnośniki";
}

footer div[data-column="menu"]:before, footer div[data-column="menu-secondary"]:before {
	color: var(--theme-palette-color-6);
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
	margin-top: 64px;
	margin-bottom: 26px;
}

footer div.ct-container-fluid {
	margin: 0;
	width: 100vw;
}

footer div.footer-image-start {
	min-height: 50px;
	width: 100%;
	background-image: url(/wp-content/themes/hopsiup/images/footer/footer-start.svg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

footer.ct-footer[data-id="type-1"] {
	position: relative;
	background-image: url(/wp-content/themes/hopsiup/images/footer/footer-background.png);
	background: var(--footer-background-color, var(--theme-palette-color-1));
	background-size: contain;
}

footer .ct-widget p {
	margin: 0;
}

footer div.footer-middle-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	flex: 1 0 0;
	align-self: stretch;
	margin: 0;
}

footer div.footer-middle-column div.social-media {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

footer div.footer-middle-column div.social-media > a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--theme-palette-color-6);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
}

footer div.footer-middle-column div.adres-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
}

footer div.footer-middle-column a.promo-button {
	font-weight: 600;
}


/* ANIMACJE */
/* PODSTAWOWE */
a.promo-button:hover, a.promo-mini-button:hover {
	transform: translatey(-3px);
}

div.our-services > div.boxes > div.service-box:hover, div.our-specialists > div.boxes > div.specialist-box *, a.promo-mini-button {
	transition: all 0.12s;
}

div.our-services > div.boxes > div.service-box * {
	transition: all 0.08s;
}


/* HEADER - ANIMACJE */
div.hero-section:before, div.hero-section:after {
	animation-name: HeroRound;
	animation-duration: 0.5s;
}

div.hero-section:before, div.hero-section:after, div.header-image-left svg g#linia1 {
	animation-name: RoundAndRound;
	animation-duration: 120s;
	animation-iteration-count: infinite;
}

div.hero-section:after {
	animation-name: RoundAndRoundReverse;
}

div.header-image-left svg g#linia1 {
	transform-origin: 435px 375px!important;
	animation-duration: 240s;
}

div.header-image-left svg {
	animation-name: HeroEnter;
	animation-duration: 0.5s;
}

div.hero-logo, div.hero-description {
	animation-name: HeroEnterLogo;
  animation-duration: 0.75s;
}

div.hero-buttons-group > a.cta {
	animation-name: HeroEnterButtons1;
	animation-duration: 1s;
}

div.hero-buttons-group > a {
	animation-name: HeroEnterButtons2;
	animation-duration: 1.15s;
}

div.header-image-left svg g#grupa4, div.header-image-left svg g#grupa2, div.header-image-left svg g#grupa3 {
	animation-name: HeroEnterCircle1;
	animation-duration: 1s;
}

div.header-image-left svg g#grupa7, div.header-image-left svg g#grupa5, div.header-image-left svg g#grupa6 {
	animation-name: HeroEnterCircle2;
	animation-duration: 1.5s;
}


div.header-image-left svg g#grupa1, div.header-image-left svg g#grupa8 {
	animation-name: HeroEnterCircle3;
	animation-duration: 2s;
}


/* NASZE USŁUGI - ANIMACJE */
div.our-services > div.boxes > div.service-box:hover span {
	color: var(--theme-palette-color-1)!important;
}

div.our-services > div.boxes > div.service-box:hover h3 svg line {
	stroke: var(--theme-palette-color-1)!important;
}

div.our-services > div.boxes > div.service-box:hover div.service-see-more {
	background-color: var(--theme-palette-color-1)!important;
}


/* NASI SPECJALIŚCI */
div.our-specialists > div.boxes > div.specialist-box:hover > a svg > path {
	fill: var(--theme-palette-color-1)!important;
}


div.boxes > div.service-box.animation {
	opacity: 0;
}

div.boxes > div.service-box.is-active.animation {
	animation-name: SlideLeft;
  animation-duration: 0.8s;
}

div.boxes > div.service-box.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}



div.book-appointment-box div.animation {
	opacity: 0;
}

div.book-appointment-box div.is-active.animation {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

div.book-appointment-box div.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}



div.boxes > div.specialist-box.animation div.specialist-image {
	opacity: 0;
}

div.boxes > div.specialist-box.is-active.animation div.specialist-image {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

div.boxes > div.specialist-box.was-on-screen.animation div.specialist-image {
	animation-name: none;
	opacity: 1;
}

div.about-me div.animation {
	opacity: 0;
}

div.about-me div.is-active.animation {
	animation-name: SlideLeft;
  animation-duration: 0.8s;
}

div.about-me div.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}



div.about-us div.animation {
	opacity: 0;
}

div.about-us div.is-active.animation {
	animation-name: SlideLeft;
  animation-duration: 0.8s;
}

div.about-us div.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}



div.blog-posts-list article.rr-card.animation h3, div.blog-posts-list article.rr-card.animation img {
	opacity: 0;
}

div.blog-posts-list article.rr-card.is-active.animation h3, div.blog-posts-list article.rr-card.is-active.animation img {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

div.blog-posts-list article.rr-card.was-on-screen.animation h3, 
div.blog-posts-list article.rr-card.was-on-screen.animation img {
	animation-name: none;
	opacity: 1;
}



div.entries > article h3, div.entries article img {
	opacity: 0;
}

div.entries article.is-active h3, div.entries article.is-active img {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

div.entries article.was-on-screen h3, 
div.entries article.was-on-screen img {
	animation-name: none;
	opacity: 1;
}



div.photo-gallery-box div.tile.animation {
	opacity: 0;
}

div.photo-gallery-box div.tile.is-active.animation {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

div.photo-gallery-box div.tile.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}



div.location-info > div.animation {
	opacity: 0;
}

div.location-info > div.is-active.animation {
	animation-name: SlideLeft;
  animation-duration: 0.8s;
}

div.location-info > div.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}





div.contact-info div.animation {
	opacity: 0;
}

div.contact-info div.is-active.animation {
	animation-name: SlideLeft;
  animation-duration: 0.8s;
}

div.contact-info div.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}


div.visit-preparation-step-by-step div.main-box.animation div.number, div.visit-preparation-step-by-step div.main-box.animation div.image {
	opacity: 0;
}

div.visit-preparation-step-by-step div.main-box.is-active.animation div.number, 
div.visit-preparation-step-by-step div.main-box.is-active.animation div.image {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

div.visit-preparation-step-by-step div.main-box.was-on-screen.animation div.number, div.visit-preparation-step-by-step div.main-box.was-on-screen.animation div.image {
	animation-name: none;
	opacity: 1;
}


div.price-list-heading.animation {
	opacity: 0;
}
div.price-list-heading.is-active.animation {
	animation-name: SlideLeft;
  animation-duration: 0.8s;
}

div.price-list-heading.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}



body.single-usluga img.animation {
	opacity: 0;
}
body.single-usluga img.is-active.animation {
	animation-name: SlightIn;
  animation-duration: 0.8s;
}

body.single-usluga img.was-on-screen.animation {
	animation-name: none;
	opacity: 1;
}

/* ANIMACJE - SZCZEGÓŁY */

@keyframes HeroRound {
	0% {
		width: 0px;
		height: 0px;
	}
	100% {
		width: 240px;
		height: 240px;
	}
}

@keyframes RoundAndRound {
	100% {
		transform:rotate(360deg);
	}
}

@keyframes RoundAndRoundReverse {
	100% {
		transform:rotate(-360deg);
	}
}

@keyframes HeroEnter {
	0% {
		transform: translatex(-100px);
	}
	100% {
		transform: translatex(0px);
	}
}

@keyframes HeroEnterLogo {
	0%, 50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes HeroEnterCircle1 {
	0%, 30% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes HeroEnterCircle2 {
	0%, 40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes HeroEnterCircle3 {
	0%, 50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes HeroEnterButtons1 {
	0%, 50% {
		opacity: 0;
		transform: translatey(100px);
	}
	100% {
		opacity: 1;
		transform: translatey(0px);
	}
}

@keyframes HeroEnterButtons2 {
	0%, 50% {
		opacity: 0;
		transform: translatey(100px);
	}
	100% {
		opacity: 1;
		transform: translatey(0px);
	}
}

@keyframes SlideLeft {
	0% {
		opacity: 0;
		transform: translatex(-100px);
	}
	100% {
		transform: translatex(0px);
		opacity: 1;
	}
}

@keyframes SlideRight {
	0% {
		opacity: 0;
		transform: translatex(100px);
	}
	
	100% {
		opacity: 1;
		transform: translatex(0px);
	}
}

@keyframes SlightIn {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}