body {
  background-color: white;
}

.shopCartHolder {
  margin-right: 10px;
}

#cart_holder {
  display: flex;
}

#cart_holder > * + * {
  margin-left: 10px;
}

#cart_holder img {
  filter: invert(1);
}



html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.mobileElem {
  display: none !important;
}

#b2b {
  width: 100%;
  max-width: 1000px;
  margin: auto;

}




#b2b input {
  width: 100%;
  height: 40px;

  outline: none;
  border:none;

  border-bottom: 1px solid #9fa5ac;
  margin-bottom: 20px;

  padding-left: 10px;
}

#b2b p {
  display: inline;
}

#b2b #woman, #booking #man,
#b2b #brow, #booking #lash {
  display: inline;
  width: unset;
  height: unset;
}

#b2b #lash {
  margin-left: 20px;
}

#b2b textarea {
  width: 100%;
  height: 300px;
  padding: 20px 10px;

  outline: none;
  border:none;

  border-bottom: 1px solid #9fa5ac;
}

#b2b .blueButton {
  background-color: var(--mainBlue);
  color: white;
  outline: none;
  border: none;
  cursor: pointer;

  margin: 20px 0 100px;

  font-size: 24px;

}

.bookingButtonHolder {
  position: relative;
  display: flex;
  justify-content: center;

}

:root {
  --mainBlue: #003063;
  --lightGreyBG: #EEF1F4;
  --brown: #987467;
  --darkbrown: #6F5248;
}

.brown {
  background-color: var(--brown) !important;
}

.darkBrown {
  color: white !important;
  background-color: var(--darkbrown) !important;
}

.writtenText {
  font-size: 48px;
  text-align: center;
  margin-bottom: 30px;
}

.written {
  font-size: 64px;
  width: 70%;
  min-width: 420px;
}

.written p {
  line-height: 1.2em;
}

#item_container {
  margin-top: 0px !important;
}


#col_container a {
  text-decoration: underline;
}
#col_container a:hover {
  text-decoration: underline !important;
}

.blueButton {
  cursor: pointer;
}



.logo {
  margin-left: 20px;
}

.allIcons {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  margin-right: 30px;
}


.iconHolder {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}

.iconHolder img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: invert(1);
}


.div {
  width: 400px
}


.pageHeadline, .pageIntro {
  text-align: center;
}


.limitWidth {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

.limitWidth1000 {
  max-width: 1000px;
  width: 100%;
  margin: auto;
}

.blueColor {
  color: var(--mainBlue);
}

.subText {
  margin: 40px 0;
}


/* LUKAS */
.productDescription1 {
  margin-top: 40px;
}

.productDescription1 p {
  font-size: 22px;
}

.productDescription2 {
  text-transform: uppercase;
}

.sliderArrowHolder {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}


.leftArrowHolder {
  position: absolute;
  left: 0;
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  rotate: 180deg;
}

.leftArrowHolder img {
  width: 20px;
  height: 20px;
  filter: invert(16%) sepia(40%) saturate(2547%) hue-rotate(187deg) brightness(96%) contrast(109%);
  pointer-events: visible;
  cursor: pointer;
}


.rightArrowHolder {
  position: absolute;
  right: 0;
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.rightArrowHolder img {
  width: 20px;
  height: 20px;
  filter: invert(16%) sepia(40%) saturate(2547%) hue-rotate(187deg) brightness(96%) contrast(109%);
  pointer-events: visible;
  cursor: pointer;
}




.df {
  display: flex;
}

.df-fdc {
  display: flex;
  flex-direction: column;
}

.df-fdc-jcsb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.df-jcc {
  display: flex;
  justify-content: center;
}

.df-jcsb {
  display: flex;
  justify-content: space-between;

  width: 100%;
}

.df-jcsb {
  display: flex;
  justify-content: space-between;

  width: 100%;
}

.df-aic {
  display: flex;
  align-items: center;
}

.df-jcc-aic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.df-jcsb-aic {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mainNavigation {
  display: none !important;
}


.menuPoint {
  position: relative;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
}

.subsubMenuHolder {
  display: none;
  position: absolute;
  top: 80px;
  width: 200px;
  /* height: 200px; */
  background-color: black;
  color: white;
}

.menuPoint:hover .subsubMenuHolder {
  display: block;
  z-index: 20000;

}

.subsubMenuPoint {
  padding: 10px;
  opacity: 0.7;

}




.subsubMenuPoint:hover {
  background-color: var(--mainBlue);
  opacity: 1;
  z-index: 20000;
}

.thirdMenu {
  height: 50px;
  width: 100%;

}

.thirdElem {
  height: 100%;
  padding: 10px;
  color: #2369B3;
  transition: all 400ms ease;
}

.thirdElem:hover {
  color: white;
  background-color: var(--mainBlue);
  transition: all 400ms ease;
}



.popupOverlay {
  display: none;
  position: fixed;

  width: 100vw;
  height: 100vh;
  top: 0;
  background-color: #00000048;
  z-index: 10000000000;
}

.popupElem {
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 400px;

}

.popupImg {
  width: 100%;
  height: 200px;
}

.popupImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popupBottom {
  padding: 20px;
  background-color: white;
  color: var(--mainBlue);
}

.popupTitle {
  font-weight: 700;

}

.popupX {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: var(--mainBlue);
  cursor: pointer;
}

.popupXInner {
  display: flex;
  align-items: center;

  position: relative;
  width: 20px;
  height: 20px;
  rotate: 45deg;
}

.popupLine {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
}

.popupLine.rotate{
  rotate: 90deg;
}


.popupLink {
  color: #2369b3;
}


















.flag {
  width: 40px;
  height: 40px;
}

.socialIcon {
  width: 40px;
}




.bigFont {
  font-size: 48px;
}

.specialFont {
  font-size: 36px;
}




.firstHeader {
  color: white;
  background-color: #09213a;
  width: 100%;
  height: 60px;

  justify-content: flex-end;

}

.secondHeader {
  color: white;
  background-color: var(--mainBlue);
  width: 100%;
  height: 80px;


 }

 .fullWidthImg {
  width: 100vw;
  height: 500px;

 }

 .fullWidthImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }



.nlBox {
  background-color: #987567;
  /* height: 80px; */
  width: 100%;
  color: white;
}

.nlTextRight {
  text-align: right;
}

.opposeNlImg {
  flex-shrink: 20;
  flex-basis: 400px;
  margin-right: 20px;
}

.nlImgHolder {
  flex-basis: 120px;
  width: 120px;
  height: 120px;

      transform: translateY(-40px);
}

.nlImgHolder img {
  width: 100%;
  height: 100%;

}



#item_container {
  max-height: unset !important;
}


 .fullHero {
  width: 100%;
  height: calc(100vh - 140px);
 }

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

 .flatLeftRightHolder {
  height: 380px;
  width: 100%;
 }


 .flatLeftRightHolder.reversed {
  flex-direction: row-reverse;
  height: 350px;
  width: 100%;
 }

 .flatLeftRightHolder .imgHolder {
  width: 50%;

 }

 .flatLeftRightHolder .imgHolder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

 }



 .flatLeftRightHolder .textHolder {
  width: 50%;
  background-color: #3d3328;
  padding: 1.5em 3em;
  color: white;
 }

.flatLeftRightHolder .textHolder.popupBox {
  width: 50%;
  background-color: white;
  padding: 1.5em 3em;
  color: black;
  flex-direction: column;
 }

@media (max-width: 800px) {
  .flatLeftRightHolder .textHolder.popupBox {
    width: 100%;
  }
}

 .flatLeftRightHolder .textHolder {
  position: relative;
  justify-content: center;
}

 .theTitle {
  width: 100%;
  font-size: 48px;
  text-align: center;

  align-items: center;
  justify-content: center;

  line-height: 1.2em;
}

.theSubtitle {
  width: 80%;
  margin-left: 10%;
  font-size: 24px;

  position: absolute;
  bottom: 20px;
  left: 0;
  text-align: center;
}


 .squareLeftRightHolder {
  height: 650px;
  width: 100%;
 }



 .squareLeftRightHolder.reversed {
  flex-direction: row-reverse;
  height: 650px;
  width: 100%;
 }

 .squareLeftRightHolder .imgHolder {
  width: 50%;
 }

 .squareLeftRightHolder .imgHolder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

 .squareLeftRightHolder .textHolder {

  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50%;
  background-color: #3d3328;
  padding: 1.5em 3em;
  color: white;
 }

 .squareLeftRightHolder .bigFont {

  line-height: 0.2em;
 }







 .relProdsHolder {
  padding: 40px;
 }

 h2 {
  text-align: center;
    font-size: 24px;
    color: var(--mainBlue);
    margin-bottom: 40px;
    font-weight: bold;
 }


 .relProdsGrid {
  display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 20px;
    margin-bottom: 20px;
 }

 .relImg {
  background-color: #F6F7F7;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
 }

 .relImg > div {
  width: 80%;
  height: 80%;
 }

 .relImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;

 }

 .relInfo {
  text-align: center;
  background-color: #F1F2F3;
  padding: 20px;
  min-height: 150px;
 }

 .relTitle {
  color: var(--mainBlue);
  margin-bottom: 1em;
  font-size: 16px;
  font-weight: 700;
 }

 .relText {
  font-size: 13px;
  margin-bottom: 2em;
 }



 .relProdElem img {
  transform: scale(1) translateZ(0);
  transition: transform .3s;
 }

 .relProdElem:hover img {
  transform: scale(1.1) translateZ(0);
  transition: transform .3s;
 }







 .ButtonHolder {
    margin: 50px 0;
 }

 .Button {
  background-color: #7c6751;
  color: white;
  padding: 10px;
  width: 150px;
  margin: auto;
  margin-top: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
 }

 .Button.noWidth {
  width: unset;
}




 .videoHolder h2 {
  text-align: center;
    font-size: 24px;
    color: var(--mainBlue);
    margin-bottom: 40px;
 }

 .videoElem {
  width: calc(100% - 80px);
  margin: auto;
  height: calc(9/16*100vw);
  background-color: grey;
}

.newsletterIcon {
  display: flex;
  align-items: center;

}

.newsletterIcon .iconHolder{
  padding: 4px;
  border-radius: 20px;
  border: 2px solid white;
}

.videoComment {

  width: calc(100% - 80px);
  margin: auto;
  padding: 40px;
  color: var(--mainBlue);
  background-color: var(--lightGreyBG);
 }


 .imageShifter  {
  position: relative;

  width: calc(100% - 80px) !important;
  margin: auto;
  height: calc(9/16*100vw);
  background-color: lightgray;
 }

 .imageShifter img {
  width: 100%;
  height: 100%;
  position: absolute;
 }





 .gapHolder {
  height: 100px;
  width: 100%;
 }


 .collapHolder {
  width: calc(100% - 80px);
  /* min-height: 640px; */
    min-height: 350px;
  height: 1500px;
  margin: auto;
 }

 .collapImgHolder {
  /* height: 650px; */
  height: 100%;

 }

 .collapButton3 {
  flex-grow: 1;
  margin-right: 0 !important;
 }

 .collapImgHolder img {
  height: 100%;
  width: 100%;
  object-fit: contain;
 }

 .collapImgHolder .slick-list {
  height: 100%;
 }
 .collapImgHolder .slick-track {
  height: 100%;
 }

 .collapMenuPoint {
  padding: 10px 20px;
  color: #2369B3;
  background-color: #EFF1F4;
  margin-right: 5px;

  cursor: pointer;
 }

 .collapMenuPoint.active {
  background-color: var(--mainBlue);
  color: white;
 }

.collapContentHolder {
  position: relative;
  width: 100%;
  background-color: white;
  height: 600px;
  height: 100%;
}

.collapWrapper {
  position: relative;

}

.partWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.collapWrap {
  /* position: absolute;
  top: 0;
  left: 0; */
  position: relative;

  height: 500px;
  width: 100%;

  background-color: white;
}

.collapWrap2, .collapWrap3 {
  /* display: none; */
  /* visibility: hidden; */
}

.partWrapper {
  z-index: 0;
  visibility: hidden;
}

/* .partWrapper1 {
  z-index: 1;
  visibility: visible;
} */

.partWrapper.zzz {
  z-index: 1;
  visibility: visible;
}

/* .partWrapper1.zzz {
  z-index: 1;
} */

.collapTextHolder {
  padding: 80px;
  background-color: lightgray;
  color: var(--mainBlue);
  font-size: 20px;
}

.collapTextHolder:empty {
  padding: 0;
}


/* color filter start */

.filterColorElem{
  width: 55px;
  /* height: 55px; */
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}

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

.colorContainer {
  /* display: flex; */

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  padding: 10px !important;

}




.filterRadio {

    position: absolute;
    bottom: 5px;
    right: 5px;
    height: 20px;
    border-radius: 100px;
    width: 20px;
    background-color: white;
}

.activeR {
	/* background-color: black; */
	background-color: grey;
}



 /* products */

 .fullBannerProducts {
  width: 100%;
  height: 380px;
  background-color: lightblue;
 }

 .fullBannerProducts img {
  height: 100%;
  width: 100%;
  object-fit: cover;
 }

 .fullBanner {
  width: 100%;
  height: 380px;
 }

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

.filterPageContainer {
  min-height: 90vh;
  max-width: 1200px;
  margin: 100px auto;
}


.filterContainer {
  flex-basis: 300px;
  color: grey;
  padding: 20px;
  background-color: #F6F7F7;
}


.filterCheck {
  width: 20px;
  height: 20px;
  border: 2px solid grey;
  margin-right: 10px;
}


.filterCheck.active {
  background-color: lightgray;
}

.filter1 {
  background-color: white;
}

.filter2, .filter3 {
  background-color: #F6F7F7;
}


.filterElem {
  display: flex;
  padding: 6px;
  border: 1px solid #F6F7F7;
  border-top: unset;
  background-color: white;
}


.filter2Elem {
  margin-left: 20px;
}


.filter3Elem {
  margin-left: 40px;
}

.filterName {
  font-size: 14px;
}



.leftHolder {
  flex-basis: 250px;
}

.productGrid {
  flex-basis: 500px;
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  margin-left: 20px;
  margin-bottom: 40px;
}



.autoAcademyContainer {
  margin-bottom: 40px;
}







/* faq */


.boldLink {
  font-weight: 700;
  color: #2369B3;
}

.boldHeader {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 400;

  color: var(--mainBlue);
}

.smallTextFaq {
  text-align: left;
}




.faqGrid {
  /* flex-basis: 500px;
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px; */
  /* display: flex;
  flex-wrap: wrap; */
  /* display: grid; */

  /* grid-template-columns: repeat(3, minmax(auto-fill, 1fr)); */

  flex-basis: 500px;
  flex-grow: 1;
  margin-left: 20px;

}


.faqElem {
  width: 250px;
  display: inline;
  float:left;
  margin-right: 10px;
  margin-bottom: 10px;
  grid-row: 1;
  cursor: pointer;

  background-color: #987567;
  color: white;

  transition: all 200ms ease;
}

.faqElem.opened {
  width: 510px;
  grid-row: 2;
  transition: all 200ms ease;
}

.faqInnerElem {

}

.faqQuestion {
  padding: 20px;
  font-size: 16px;
  padding-bottom: 20px;
}

.faqAnswer {
  padding: 20px;
  padding-top: 0;
  font-size: 14px;
  display: none;
}

.faqImg {
  aspect-ratio: 16/9;
}

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

.faqElem.opened .faqQuestion {
  font-size: 14px;
}

.faqElem.opened .faqAnswer {
  font-size: 16px;
  display: block;
}

.faqLabel {
  position: relative;
  font-size: 14px;
  padding: 5px 20px;
  background-color: #b88c7a;
}

.faqButton {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 30px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.faqLine {
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: white;
}

.faqLine2 {
  rotate: 90deg;
}



/* education booking */


.bookingWrapper {
  background-color: #eef1f4;
}


#booking {
  width: 100%;
  max-width: 1000px;
  margin: auto;

}




#booking input {
  width: 100%;
  height: 40px;

  outline: none;
  border:none;

  border-bottom: 1px solid #9fa5ac;
  margin-bottom: 20px;

  padding-left: 10px;
}

#booking p {
  display: inline;
}

#booking #woman, #booking #man,
#booking #brow, #booking #lash {
  display: inline;
  width: unset;
  height: unset;
}

#booking #lash {
  margin-left: 20px;
}

#booking textarea {
  width: 100%;
  height: 300px;
  padding: 20px 10px;

  outline: none;
  border:none;

  border-bottom: 1px solid #9fa5ac;
}

#booking .blueButton {
  background-color: var(--mainBlue);
  color: white;
  outline: none;
  border: none;
  cursor: pointer;

  margin: 20px 0 100px;

  font-size: 24px;

}

.bookingButtonHolder {
  position: relative;
  display: flex;
  justify-content: center;

}

.greyColor {
  color: #8e8e8e;
}



/* styles guide */


.stylesPageContainer {
    min-height: 90vh;
    max-width: 1000px;
    margin: 20px auto 50px;

}



.header2 {
  font-size: 24px;
  color: var(--mainBlue);
  margin-bottom: 20px;
  font-weight: 700;
}


.stylesContainer {
  margin-left: 20px;
  flex-basis: 400px;
  flex-grow: 1;
}

.stylesHeader {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 50px;
}

.stylesSubtext {
  font-size: 22px;
  color: var(--mainBlue);
  margin-bottom: 20px;
}

.stylesMixture {
  padding: 5px;
  background-color: #eff1f4;
}

.stylesRatio {
  padding: 5px;
  background-color: #fefefe;
}

.stylesTime {
  padding: 5px;
  background-color: #eff1f4;
}

.stylesLabel {
  font-size: 14px;
  font-weight: 700;
  color: #878f97;
  margin-bottom: 10px;
}

.stylesDescription {
  font-size: 42px;
  color: var(--mainBlue);
}

.stylesColorMix {
  display: flex;
}

.colorMix {
  width: 50px;
  margin-right: 10px;
}

.stylesProducts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;

}


.twoColors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oneColor {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.threeColors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.written {
  font-family: Red_Velvet;
}

.written p {
  font-family: Red_Velvet;
}














/* contact */


.contactGrid {

  flex-basis: 500px;
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
}


.contactElem {
  width: 100%;
}



.contactContainer {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}


.contactFilterContainer {
  flex-basis: 300px;
  padding: 20px;
  padding-top: 0;
  padding-left: 0;
}

.contactHolder {
  flex-basis: 500px;
  flex-grow: 1;
}

.contactGrid {
  margin: 50px 0;

  font-size: 14px;
  text-align: left;
}

.contactCountry {
  text-align: left;
  padding: 5px 5px;
  color: white;
  background-color: #387Ed0;
}

.contactBottom {
  background-color: #f1f2f3;
  padding:5px 5px;
  color: var(--mainBlue)
}

.contactName {
  font-weight: bold;
  color: var(--mainBlue)
}

.salon .contactCountry {
  color: black;
  text-transform: uppercase;
}

.salon .contactField {
  margin-bottom: 10px;
}

.salon .salonOpening {
  /* margin-bottom: 30px; */
}

.salon .contactElem {
  position: relative;
}

.salonOpening {
  height: auto;
  max-height: 0;
  transition: all 400ms linear
}

.salonOpening.opened {
  max-height: 1000px;
  transition: all 400ms linear
}
.salon .contactBottom {
  overflow: hidden;
}

.salonOpenElem {
  /* position: absolute;
  bottom: 0; */
  width: calc(100% + 10px);
  transform: translate(-5px, 5px);
  /* height: 10px; */
  position: relative;

  padding: 5px 5px 10px;
  color: var(--mainBlue);
  background-color: #fafafa;
  cursor: pointer;

}

.soHolder {
  position: relative;
  width: 20px;
  height: 20px;
  transition: all 400ms linear

}

.soHolder.opened {
  rotate: 45deg;
  /* transition: all 400ms linear */

}


.soLine {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50%;
  width: 10px;
  height: 2px;
  background-color: var(--mainBlue);
}

.soLine2 {
  rotate: 90deg;
}


.pageIntro {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  text-align: left;
  color: var(--mainBlue);
  margin-bottom: 50px;
}




/* shop */

.colorText *{
  color: var(--mainBlue);
  line-height: 1.8em;

}

.grayShop {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  background-color: #eff1f4;
  padding: 10px;

  color: var(--mainBlue);
}

.grayShop * {

  line-height: 1.8em;
}

.buttonWrapper {
  margin-bottom: 50px;
}

/* .grayShop .Button {
  width: unset;
  display: inline;
} */

.flexGrey .imageGrey {
  flex-basis: 300px;
}
.flexGrey .textGrey {
  flex-basis: 400px;
  flex-grow: 1;
}

.textGrey {
  margin-left: 10px;
}

.fullBanner {
  display: flex;
}

/* lukas baner */

.fullBannerChild {
  width: 50%
  /* flex-basis: 400px;
  flex-grow: 1; */
}

@media (max-width: 800px) {
  .fullBannerChild {
    width: 100%;
  }
}
/* lukas baner */

.textChild {
  text-align: center;
  color: white;
  background-color: #aa9888;
  color: white;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* countries */

.countryCatName {
  border-bottom: 2px solid grey;
  margin-bottom: 10px;
}

.countryGroup {
  margin-bottom: 50px;
}

.countryList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
}

.countryItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  padding: 10px 5px;
  background-color: #F9fafa;
}

.countryFlag {
  margin-left: 10px;
  width: 30px;
  height: 30px;
}

.countryFlag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* course */

.courseCentralHolder {
  text-align: center;
}


#courseCentralTitle p {
  font-size: 48px;
  font-weight: 700;
}

#courseCentralSubtitle p {
  font-size: 24px;
  font-weight: 700;
}


.courseOuter p{
  line-height: 1.6;
}

.courseOuter p {
  font-size: 22px;
}

.courseImgHolder {
  display: flex;

  width: 90%;
  height: 200px;
  margin: 30px auto;

}

.courseImgHolder > * + * {
  margin-left: 5px;
}

.courseText {
  padding: 20px;
}

.courseGrey {
  padding: 20px;
  background-color: #eff1f4;
}

.cImgElem {
  overflow: hidden;
  transition: all 200ms ease;
}

.cImgElem img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.cImgElem img:hover {
  transform: scale(1.2);
  transition: all 200ms ease;


}

.floatingImg {
  float:left;

  width: 200px;
  height: 100%;
  margin-right: 20px;
  margin-bottom: 20px;
}









/* newsletter */





















 /* footer */

 @media screen and (max-width: 1300px) {

  .theTitle {
    font-size: 36px;

  }


}


@media screen and (max-width: 800px) {



  .flatLeftRightHolder .textHolder {
    min-height: 250px;
  }

  .theTitle {
    font-size: 36px;

  }
/* 
   .collapHolder {
  min-height: 640px;
 } */

   .collapTextHolder {
  padding: 40px;

 }


}