/*
 Theme Name:   Bricks Child Theme (BEM Rewrite)
 Theme URI:    https://bricksbuilder.io/
 Description:  BEM-structured version of the original CSS.
 Author:       Bricks + BEM
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/*==========GENERAL==========*/
.u-pos-relative {
  position: relative;
}

.u-pos-absolute {
  position: absolute;
}

.u-overflow-hidden {
  overflow: hidden;
}

.u-full-width {
  width: 100%;
}

/*==========TEXTS==========*/
.text--italic {
  font-style: italic;
}

.text--uppercase {
  text-transform: uppercase;
}

.text--right {
  text-align: right;
}

.text--left {
  text-align: left;
}

.text--center {
  text-align: center;
}

.text--bold {
  font-weight: 700;
}

.text--s {
  font-size: var(--v--text-s);
}

.text--m {
  font-size: var(--v--txt-m);
	line-height: 1.4;
}

.text--l {
  font-size: var(--v--txt-l);
}

.text--xl {
  font-size: var(--v--txt-xl);
}

.text--2xl {
  font-size: var(--v-txt-2xl);
}

/*==========COLORS==========*/
.color--primary {
  color: var(--v_color_primary);
}

.color--secondary {
  color: var(--v_color_secondary);
}

.color--accent {
  color: var(--v_color_accent);
}

/*==========GRID==========*/
.grid {
  display: grid;
  width: 100%;
}

.grid--2-cols { grid-template-columns: repeat(2, 1fr); }
.grid--3-cols { grid-template-columns: repeat(3, 1fr); }
.grid--4-cols { grid-template-columns: repeat(4, 1fr); }
.grid--5-cols { grid-template-columns: repeat(5, 1fr); }
.grid--6-cols { grid-template-columns: repeat(6, 1fr); }
.grid--7-cols { grid-template-columns: repeat(7, 1fr); }
.grid--8-cols { grid-template-columns: repeat(8, 1fr); }
.grid--9-cols { grid-template-columns: repeat(9, 1fr); }
.grid--10-cols { grid-template-columns: repeat(10, 1fr); }
.grid--11-cols { grid-template-columns: repeat(11, 1fr); }
.grid--12-cols { grid-template-columns: repeat(12, 1fr); }

.gap--s { grid-gap: var(--v--space-s); }
.gap--m { grid-gap: var(--v--space-m); }
.gap--l { grid-gap: var(--v--space-l); }
.gap--xl { grid-gap: var(--v--space-xl); }

.col-gap--s { grid-column-gap: var(--v-space-s); }

.row-gap--s { grid-row-gap: var(--v--space-s); }
.row-gap--m { grid-row-gap: var(--v--space-m); }
.row-gap--l { grid-row-gap: var(--v--space-l); }
.row-gap--xl { grid-row-gap: var(--v--space-xl); }
.row-gap--2xl { grid-row-gap: var(--v--space-2xl); }
.row-gap--3xl { grid-row-gap: var(--v--space-3xl); }
.row-gap--4xl { grid-row-gap: var(--v--space-4xl); }

.grid--stretch {
  align-items: stretch;
}

.col-span--2 { grid-column: auto / span 2; }
.col-span--3 { grid-column: auto / span 3; }
.col-span--4 { grid-column: auto / span 4; }
.col-span--5 { grid-column: auto / span 5; }
.col-span--6 { grid-column: auto / span 6; }
.col-span--7 { grid-column: auto / span 7; }
.col-span--8 { grid-column: auto / span 8; }
.col-span--9 { grid-column: auto / span 9; }
.col-span--10 { grid-column: auto / span 10; }
.col-span--11 { grid-column: auto / span 11; }
.col-span--12 { grid-column: auto / span 12; }

.col-start--2 { grid-column-start: 2; }
.col-start--3 { grid-column-start: 3; }
.col-start--4 { grid-column-start: 4; }
.col-start--5 { grid-column-start: 5; }
.col-start--6 { grid-column-start: 6; }
.col-start--7 { grid-column-start: 7; }
.col-start--8 { grid-column-start: 8; }
.col-start--9 { grid-column-start: 9; }
.col-start--10 { grid-column-start: 10; }
.col-start--11 { grid-column-start: 11; }
.col-start--12 { grid-column-start: 12; }

.row-span--2 { grid-row: auto / span 2; }
.row-span--3 { grid-row: auto / span 3; }
.row-span--4 { grid-row: auto / span 4; }
.row-span--5 { grid-row: auto / span 5; }

.row-start--2 { grid-row-start: 2; }
.row-start--3 { grid-row-start: 3; }
.row-start--4 { grid-row-start: 4; }

.grid--rows-equal { grid-auto-rows: 1fr; }

@media (max-width: 991px) {
  .grid--l-1-col { grid-template-columns: 1fr; }
  .grid--l-2-cols { grid-template-columns: repeat(2, 1fr); }
  .col-span--l-1 { grid-column: auto / span 1; }
  .col-span--l-2 { grid-column: auto / span 2; }
	.col-start--l-2 { grid-column-start: 2; }
  .row-start--l-1 { grid-row-start: 1; }
  .row-start--l-2 { grid-row-start: 2; }
  .row-start--l-3 { grid-row-start: 3; }
  .row-span--l-1 { grid-row: auto / span 1; }
  .grid--rows-equal { grid-auto-rows: auto; }
}

@media (max-width: 767px) {
  .grid--m-1-col { grid-template-columns: 1fr; }
  .grid--m-2-cols { grid-template-columns: repeat(2, 1fr); }
  .grid--m-4 { grid-template-columns: repeat(4, 1fr); }
  .grid--m-5 { grid-template-columns: repeat(5, 1fr); }
  .grid--m-7 { grid-template-columns: repeat(7, 1fr); }
  .col-span--m-1 { grid-column: auto / span 1; }
  .col-span--m-3 { grid-column: auto / span 3; }
  .col-span--m-5 { grid-column: auto / span 5; }
  .col-start--m-2 { grid-column-start: 2; }
  .row-start--m-1 { grid-row-start: 1; }
  .row-start--m-2 { grid-row-start: 2; }
}

@media (max-width: 478px) {
  .grid--s-1 { grid-template-columns: 1fr; }
  .grid--s-2 { grid-template-columns: repeat(2, 1fr); }
  .col-span--s-1 { grid-column: auto / span 1; }
  .col-start--s-1 { grid-column-start: 1; }
  .row-gap--s-xl { grid-row-gap: var(--v--space-xl); }
  .row-gap--s-3xl { grid-row-gap: var(--v--space-3xl); }
  .row-start--s-2 { grid-row-start: 2; }
}

.center-items {
	justify-items: center;
}


/*==========SPACING==========*/
.margin--b-xs { margin-bottom: var(--v--space-xs); }
.margin--b-s { margin-bottom: var(--v--space-s); }
.margin--b-m { margin-bottom: var(--v--space-m); }
.margin--b-l { margin-bottom: var(--v--space-l); }
.margin--b-xl { margin-bottom: var(--v--space-xl); }
.margin--b-2xl { margin-bottom: var(--v--space-2xl); }
.margin--b-3xl { margin-bottom: var(--v--space-3xl); }
.margin--b-4xl { margin-bottom: var(--v--space-4xl); }

@media (max-width: 478px) {
  .margin--s-b-s { margin-bottom: var(--v--space-s); }
  .margin--s-t-s { margin-top: var(--v--space-s); }
  .margin--s-none { margin: 0; }
}

.padding--s { padding: var(--v--space-s); }
.padding--m { padding: var(--v--space-m); }
.padding--l { padding: var(--v--space-l); }
.padding--xl { padding: var(--v--space-xl); }

.padding--t-xs { padding-top: var(--v--space-xs); }
.padding--t-s { padding-top: var(--v--space-s); }
.padding--t-m { padding-top: var(--v--space-m); }
.padding--t-l { padding-top: var(--v--space-l); }
.padding--t-xl { padding-top: var(--v--space-xl); }
.padding--t-2xl { padding-top: var(--v--space-2xl); }
.padding--t-3xl { padding-top: var(--v--space-3xl); }
.padding--t-4xl { padding-top: var(--v--space-4xl); }

.padding--b-xs { padding-bottom: var(--v-_space_xs); }
.padding--b-s { padding-bottom: var(--v--space-s); }
.padding--b-m { padding-bottom: var(--v--space-m); }
.padding--b-l { padding-bottom: var(--v--space-l); }
.padding--b-xl { padding-bottom: var(--v--space-xl); }
.padding--b-2xl { padding-bottom: var(--v--space-2xl); }
.padding--b-3xl { padding-bottom: var(--v--space-3xl); }
.padding--b-4xl { padding-bottom: var(--v--space-4xl); }
.padding--b-xl-4xl { padding-bottom: var(--v--space-xl-4xl); }
.padding--b-s-xl { padding-bottom: var(--v--space-s-xl); }

.padding--r-s { padding-right: var(--v--space-s); }
.padding--l-s { padding-left: var(--v--space-s); }

.padding--x-s {
  padding-left: var(--v--space-s);
  padding-right: var(--v--space-s);
}
.padding--x-m {
  padding-left: var(--v--space-m);
  padding-right: var(--v--space-m);
}
.padding--x-l {
  padding-left: var(--v--space-l);
  padding-right: var(--v--space-l);
}
.padding--x-xl {
  padding-left: var(--v--space-xl);
  padding-right: var(--v--space-xl);
}

@media (max-width: 991px) {
  .padding--x-l-none {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 478px) {
  .padding--x-s-none {
    padding-left: 0;
    padding-right: 0;
  }
}


.padding--y-xs {
  padding-top: var(--v--space-xs);
  padding-bottom: var(--v--space-xs);
}


/*==========BORDERS==========*/
.border-dark {
	border: 1px solid var(--v--color--secondary-40)
}

.border--b-dark {
	border-bottom: 1px solid var(--v--color--secondary-40);
}

.border--b-light {
	border-bottom: 1px solid var(--v--color--primary-40);
}
/*==========BUTTONS & LINKS==========*/
.button-primary {
	color: var(--v--color--primary);
	background-color: var(--v--color--secondary);
	padding: var(--v--space-xs) var(--v--space-m);
	min-height: 5.6rem;
	align-self: flex-start;
	transition: background-color .3s ease-in-out;
	justify-content: center;
}

.button-secondary {
	color: var(--v--color--secondary);
	background-color: var(--v--color--primary);
	padding: var(--v--space-xs) var(--v--space-m);
	min-height: 5.6rem;
	transition: background-color .3s ease-in-out;
}

.ff-btn-submit {
	transition: background-color .3s ease-in-out, color .3s ease-in-out;
	width: 100%;
}

.ff-btn-submit:hover {
	background-color: #D5896F !important;
	color: var(--v--color--primary) !important;
	opacity: 1 !important;
}

.button-primary:hover {
	background-color: #D5896F;
}

.button-secondary:hover {
	background-color: #D5896F;
	color: var(--v--color--primary);
}

.menu-link, .basic-link, .lesson-link {
	transition: color .2s ease-in;
}

.menu-link:hover, .basic-link:hover {
	color: #D5896F;
}

/*==========STYLING==========*/
.testimoinals--item {
	display: flex;
	flex-direction: column;
	align-items: space-between;
	padding: var(--v--space-m);
	border: 1px solid var(--v--color--secondary-40);
}

.testimoinals--text {
	margin-bottom: var(--v--space-m);
}

/*FAQ*/
.faq--item {
	cursor: pointer;
}

.faq--icon {
	transition: transform 0.2s ease;
}

.faq--title {
	max-width: 90%;
}

.brx-open .faq--icon {
	transform: rotate(45deg);
}


/*teaching area*/
.image-wrapper {
	position: relative;
  	width: 100%;
	display: grid;
}

.image-area {
	grid-area: 1 / 1 / -1 / -1;
  	object-fit: cover;
	aspect-ratio: 4 / 3;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	transition: opacity 0.3s ease;
  	position: relative;
  	z-index: 0;
}

.image-visible {
	opacity: 1;
  	z-index: 1;
}

.image-small {
	display:none;
	aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
	.image-small {
		display:block;
	}
}

.area-mark {
	background-color: #D5896F;
	width: 0px;
	opacity: 0;
	transition: width .2s ease-in-out, opacity .2s ease-in-out;
}

.area-title {
	transition: padding-left .2s ease-in-out;	
}

.area-title {
	border-left-width: 0px;
	border-left-color: #D5896F;
	border-left-style: solid;
}

.area-title-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.area-icon {
	transition: transform .3s ease-in-out;
}


.area:hover .area-icon {
	transform: translate3d(8px, 0, 0);
}

.area:hover .area-title {
	padding-left: var(--v--space-m);
}

.area:hover .area-mark {
	width: 5px;
	opacity: 1;
}


/*lessons*/
.lesson-image {
	transition: transform .3s ease-in-out;
}

.lesson-link {
	transition: color .2s ease-in;
}

.lesson-icon {
	transition: color .2s ease-in, transform .2s ease-in-out;
}

.lesson-container:hover .lesson-image {
	transform: scale(1.1);
}

.lesson-container:hover .lesson-link, .lesson-container:hover .lesson-icon {
	color: #D5896F;
}

.lesson-container:hover .lesson-icon {
	transform: translate3d(8px, 0, 0);
}

.lesson-flag {
	width: 3.2rem;
}

@media (max-width: 991px) {
	.lesson-flag {
		width: 2.4rem;
	}
}

/*==========MAX WIDTH==========*/
.max-width-640 {
	width: 100%;
	max-width: 64rem;
}

.max-width-720 {
	width: 100%;
	max-width: 72rem;
}

/*==========CUSTOMIZING==========*/
#brxe-lovimt .splide__arrow--next, #brxe-lovimt .splide__arrow--prev,
#brxe-xbuwbm .splide__arrow--next, #brxe-xbuwbm .splide__arrow--prev {
	transition: background-color .3s ease-in-out;
}

#brxe-lovimt .splide__arrow--next:hover, #brxe-lovimt .splide__arrow--prev:hover,
#brxe-xbuwbm .splide__arrow--next:hover, #brxe-xbuwbm .splide__arrow--prev:hover {
	background-color: #D5896F;
}

#fluentform_3_success {
	border: 0;
	box-shadow: unset;
	color: var(--v--color--primary);
}