#wrap {
  /* width: 80%; */
  max-width: 80%;
  margin: 0 auto;
  padding: 0.25em 0.625em;
  background: #fdfdfd /*#EAE6DA*/;
  z-index: 1;
}

#wrapHeader {
  width: 100%;
  background: #fdfdfd; /*#EAE6DA*/
  z-index: 1;
}

button {
  background-color: white;
  font-size: 22px;
  color: #2e4a62;
}

/*
img{
  max-width: 100%;
  max-height: 100%;
  width:12%;
  height: 25%;
  float: left;
  position: absolute;
  top:15%;
  left:20%;
  
}
*/

#dividerLineAboutServices,
#dividerLineServicesBooking,
#dividerLineBookingContact {
  color: #be9ec9;
}

hr {
  display: block;
  position: relative;
  padding: 0;
  margin: 8px auto;
  height: 0;
  width: 100%;
  max-height: 0;
  font-size: 1px;
  line-height: 0;
  clear: both;
  border: none;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #ffffff;
}

h1 {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 60px;
  color: #2a4b7c;
  margin-block-start: 20%;
}

h2 {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 30px;
  color: #2a4b7c;
}

#motto1,
#motto2,
#motto3 {
  /*font-family: 'Seaweed Script', cursive; font-family: "Ubuntu";*/
  font-family: "Playfair Display", sans-serif;
  font-size: 120%;
  color: #2a4b7c;
}

body {
  /*background-color: rgb(245, 252, 255);*/
  /* background-image: linear-gradient(to bottom, #d0d7fc, #f5f8ff, #d0d7fc); */
  /*background-repeat: no-repeat;*/
  background-color: white;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*background-position: 50% 80%; */
  /*background-color: #2A4B7C*/
  max-width: 100% !important;
  width: 100%;
  overflow-x: hidden;
  z-index: 0;
}

#aboutHeader,
#servicesHeader,
#booking,
#contactHeader,
#homeHeader,
#pricing,
#pricingBookingHeader {
  font-family: "Playfair Display", serif;
  font-size: 34px;
  color: #2a4b7c;
  text-align: left;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}

#servicesText,
#lifeCoachingServicesText,
#businessCoachingServicesText,
#howIWorkServicesText,
#changeForTheBetterServicesText {
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  color: black;
}

#lifeCoachingServicesSub,
#businessCoachingServicesSub,
#howIWorkServicesSub,
#changeForTheBetterServicesSub {
  font-size: 24px;
  color: #2a4b7c;
  text-align: left;
  font-family: "Montserrat", sans-serif;
}

#bookingText {
  height: 150%;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  color: black;
}

#homeText,
#aboutText,
#pricingText {
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  color: black;
}

/*
.carousel {
  height:500px;
}
*/
.carousel-inner,
.item,
.img {
  margin: auto;
  object-fit: contain;
  float: center;
  z-index: 1;
}

.carousel-indicators {
  z-index: 3;
}

#facebook {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  width: 13%;
  height: 13%;
  top: 38%;
  left: 77%;
}

#linkedin {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  width: 13%;
  height: 13%;
  top: 38%;
  left: 81%;
}

/* Main content */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}

#footer {
  display: block;
  color: #2a4b7c;
  /*background-color: #f0f0f0e5;*/
  background-image: linear-gradient(to top, #cadee7b6, #f2fbff);
  position: relative;
  text-align: center;
  left: 0;
  width: 100%;
  max-width: 100% !important;
  text-align: left;
  margin-bottom: 0;
  border-top: 1px solid #1f1209;
  box-shadow: 0 0 10px 0 #2a4b7c;
  margin-top: 10px;
}

#contactText {
  /*float: right;*/
  width: 100% !important;
  height: 100% !important;
}

#contactDetails {
  float: left;
  display: block;
  font-family: "Monserrat", sans-serif;
  font-size: 22px;
  color: #2e4a62;
  text-align: justify;
  padding: 14px 16px;
  text-decoration: none;
  width: 80%;
}
#goomap {
  width: 100%;
  float: right;
  clear: right;
  /*width: 100% !important;
  height: 100% !important;*/
}

/*-------------SidenavStyle---------------*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(1, 5, 19, 0.966);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  z-index: 11;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #62c0ff;
  display: block;
  transition: 0.3s;
}

.fa {
  color: #62c0ff;
  float: right;
  padding-right: 20px;
  padding-top: 8px;
}

.sidenav a:hover,
.fa-caret-down:hover {
  color: #ffffff;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.dropdown-btn {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #62c0ff;
  display: block;
  transition: 0.3s;
  border: none;
  background: none;
  width: 100%;
  outline: none;
  cursor: pointer;
  text-align: left;
}

.dropdown-btn:hover {
  color: white;
  outline: none;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: rgba(6, 24, 87, 0.89);
  color: #62c0ff;
  outline: none;
  border: 2px solid #62c0ff;
}

.active:hover {
  color: white;
  outline: none;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: rgba(1, 5, 19, 0.966);
  z-index: 1;
  font-size: 15px;
  text-align: left;
  padding-left: 20px;
}

.dropdown-container a {
  font-size: 20px;
  float: center;
}

.dropdown-container:hover {
  outline: none;
  border: none;
}

.dropdown-container a:hover {
  outline: none;
  border: none;
}

#burger {
  color: #2a4b7c;
  font-family: "Montserrat", sans-serif;
  max-width: 100%;
  min-width: 50px;
  min-height: 50px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  float: left;
}

#navigationBurger {
  z-index: 10;
  width: 100%;
  max-width: 100%; /*70em*/
  margin: 0 auto;
  padding: 0.25em 0.625em;
  background: #fdfdfd /*#EAE6DA*/;
  margin-top: 0;
  border-bottom: 0.5px solid #0000008c;
  border-top: 0.2px solid #0000006b;
  box-shadow: 10px 20px 20px -20px #2a4b7c;
  margin: -50px auto 10px;
  padding-top: 25px;
}

.thumbnail {
  text-align: center;
  border-bottom: 0.5px solid #0000008c;
  box-shadow: 10px 20px 20px -20px #2a4b7c;
  margin: 0px auto 10px;
  height: 100%;
}

#myCarousel {
  text-align: center;
  border-bottom: 0.5px solid #0000008c;
  box-shadow: 10px 20px 20px -20px #2a4b7c;
  margin: 10px auto 10px;
  background-color: #f3f3f3;
  width: 100%;
  height: 750px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 100%, 100%;
  border-radius: 50%;
  background-image: none;
}

.carousel-control-next-icon:after {
  content: ">";
  font-size: 55px;
  color: rgb(6, 174, 252);
}

.carousel-control-prev-icon:after {
  content: "<";
  font-size: 55px;
  color: rgb(6, 174, 252);
}

@media only screen and (max-width: 1000px) {
  .carousel {
    display: none;
  }
}

.card-columns,
.carousel-item {
  background-color: #f3f3f3;
}

.card-title,
.card-text {
  color: black;
}
.card-title {
  font-family: "Montserrat", sans-serif;
  font-size: 23px;
}

.card-text {
  font-family: "Montserrat", serif;
  font-size: 15px;
}

.card {
  text-align: center;
  width: 100px;
  height: 610px;
}

#navbarLinks a {
  color: #2a4b7c;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

#navbarLinks a:hover {
  text-decoration: none;
  color: rgb(6, 174, 252);
}

.flip-card {
  background-color: white;
  width: 360px;
  height: 300px;
  perspective: 1000px;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  padding: 10px;
  /*transform-origin: center right;*/
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  background-color: white;
  box-shadow: 7px 7px 20px -10px #000000;
  border: solid 1px rgba(158, 158, 158, 0.767);
  /* border-radius: 10px;
  border-color: red; */
  /*transform-origin: center right;*/
}

@media only screen and (min-width: 1200px) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(-180deg);
  }
}

@media only screen and (min-width: 992px) {
  /*.flip-card:hover .flip-card-inner,*/
  .flip-card-inner.flipped {
    transform: rotateY(180deg);
  }
  .flip-card-inner {
    transform: rotateY(0);
  }
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: rgb(255, 255, 255);
  color: black;
}

.flip-card-back {
  background-color: #f5f5f5;
  color: #2a4b7c;
  transform: rotateY(180deg);
  font-family: "Montserrat", sans-serif;
}

#flipCardBackHeader {
  font-size: 23px;
}

.flipCardImageText {
  font-family: "Montserrat", sans-serif;
  font-size: 23px;
  color: #e6f4ff;
  position: absolute;
  bottom: 10%;
  left: 5%;
  background-color: #1f1209;
}

.collapsible {
  background-color: #fcfcfc;
  color: #2a4b7c;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #e1f2ff;
  color: #2a4b7c;
}

.collapsible:after {
  content: "\002B";
  color: #2a4b7c;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f7fdff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}


/* -------------------------------------------------------------------------------------*/
body,
html {
  height: 100%;
  width: 100%;
  zoom: 90%;
}

html {
  overflow-y: scroll;
}

.navbar-collapse.collapse.in {
  display: block !important;
}

ul.nav.navbar-nav.ml-auto.w-100.justify-content-end {
  display: flex;
  flex-direction: row;
}

.nav-item {
  padding-left: 3px;
  padding-right: 3px;
}

.navbar {
  background-image: linear-gradient(
    to left,
    rgb(255, 255, 255),
    rgba(236, 244, 255, 0.781)
  );
}
/*
a:hover {
  background-size: 4px 50px;
}
*/

a.nav-link {
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgb(0, 198, 224),
    rgb(0, 121, 190) 50%,
    rgb(0, 29, 37) 50%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
}

.footer a,
.contact > a {
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgb(0, 198, 224),
    rgb(0, 121, 190) 50%,
    rgb(255, 255, 255) 50%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
}

a :not(.card) > a :not(.footer) > a,
h1 > a,
h2 > a,
h3 > a,
.certLink > a,
li > a,
p > a {
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgb(109, 238, 255),
    rgb(0, 129, 161) 50%,
    rgb(129, 196, 252) 50%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
}

a:hover {
  background-position: 0 100%;
}
.text {
  background-color: rgb(224, 224, 224);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}

.avatar {
  border-radius: 50%;
  border: 7px solid rgb(113, 196, 252);
  /*border: 7px solid rgba(226, 11, 11, 0.932);*/
  background-color: white;
}

.thumbnail_homepage {
  border-radius: 5%;
  border: 4px solid rgb(113, 196, 252);
  /*border: 7px solid rgba(226, 11, 11, 0.932);*/
  background-color: white;
  width: 280px;
  height:250px;
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: 0.5px solid #0000008c;
  box-shadow: 10px 20px 20px -20px #2a4b7c;
  /* margin: 0px auto 10px; */
}
.homepage_header {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );*/
  background-color:white;
  /*background-image: url("joe-woods-4Zaq5xY5M_c-unsplash.jpg");*/
  padding-top: 50px;
  padding-bottom: 100px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .homepage_header {
    background-attachment: inherit;
  }
}

.img2 {
  /*
  background-image: linear-gradient(
    to right,
    rgba(124, 124, 124, 0),
    rgb(219, 219, 219)
  );
  */
  background-color:rgb(255, 255, 255);
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  
}

@media screen and (max-width: 768px) {
  .img2 {
    background-attachment: inherit;
  }
}

.img3 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:blue;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .img3 {
    background-attachment: inherit;
  }
}

.img4 {
  background-image: linear-gradient(
    to right,
    rgba(124, 124, 124, 0),
    rgb(189, 189, 189)
  );
  /*background-image: url("anna-pelzer-QcUJLRMDryQ-unsplash.jpg");*/
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

@media screen and (max-width: 768px) {
  .img5 {
    background-attachment: inherit;
  }
}

.img5 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:green;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .img6 {
    background-attachment: inherit;
  }
}

.img6 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:purple;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .img7 {
    background-attachment: inherit;
  }
}

.img7 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:beige;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .img8 {
    background-attachment: inherit;
  }
}

.img8 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:brown;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .img9 {
    background-attachment: inherit;
  }
}

.img9 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:yellow;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .img10 {
    background-attachment: inherit;
  }
}

.img10 {
  /*
  background-image: linear-gradient(
    to right,
    rgb(219, 219, 219),
    rgba(124, 124, 124, 0)
  );
  */
  background-color:orange;
  padding-top: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img11 {
  /*
  background-image: linear-gradient(
    to right,
    rgba(124, 124, 124, 0),
    rgb(219, 219, 219)
  );
  */
  background-color:gray;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .img11 {
    background-attachment: inherit;
  }
}

.text {
  background-color: rgb(250, 248, 248);
  font-size: 37px;
  font-family: Ubuntu;
  border-width: 5px;
  border: 0;
  box-shadow: inset 0px 15px 10px -10px #8c8c8c;
}


* {
  box-sizing: border-box;
}

.item {
  border-radius: 25px;
  border: 3px solid rgb(255, 68, 68);
  width: 100%;
  height: 125px;
  margin: 50px auto;
  padding-top: 10px;
  padding-right: 50px;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-size: 2em;
  font-family: Ubuntu;
  text-align: center;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-top: 10px;
  border-style: inset;
  border-width: 1px;
  height: 10px;
  border: 0;
  box-shadow: 0 10px 10px -10px #8c8c8c inset;
}

.certHr {
  background-color: black;
  display: block;
  margin-top: 0.1em;
  margin-bottom: 0em;
  padding-top: 0px;
  border-style: inset;
  border-width: 1px;
  height: 0px;
  border: 0;
  box-shadow: 0 10px 10px -10px #8c8c8c inset;
}

.row {
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}
.block {
  width: 100px;
}

.card {
  display: inline-block;
}

/* .collapsible {
  background-color: rgb(0, 0, 0);
  cursor: pointer;
  width: 100%;
  padding: 20px;
  border: 2px;
  border-color: black;
  outline: none;
}

.active,
.collapsible:hover {
  background-color: rgb(0, 0, 0);
} */

/* .content {
  padding: 20px 20px;
  display: none;
  overflow: hidden;
  background-image: linear-gradient(
    to right,
    rgb(255, 255, 255),
    rgba(227, 239, 255, 0.781)
  );
  border-radius: 10px;
  border: 2px;
  border-color: black;
} */


a:hover {
  color: #75acff;
  text-decoration: none;
  cursor: pointer;
}


/* Darker background on mouse-over */
.btn:hover {
  background-color: rgb(113, 196, 252);
}

/*--------Navbar collapse custom breakpoint ---------*/
@media (min-width: 1500px){
  .navbar-expand-custom {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
      flex-direction: row;
  }
  .navbar-expand-custom .dropdown-menu {
      position: absolute;
  }
  .navbar-expand-custom .nav-link {
      padding-right: .5rem;
      padding-left: .5rem;
  }
  .navbar-expand-custom > .container {
      flex-wrap: nowrap;
  }
  .navbar-expand-custom .navbar-collapse {
      display: flex!important;
      flex-basis: auto;
  }
  .navbar-expand-custom .navbar-toggler {
      display: none;
  }
}

/*-------- "Billy Tsouvalas" remove in smaller than 1500px, which is the navbar collapse limit (see above)----*/

@media (min-width: 1500px){
  .d-custom-block {
    display: block;
  }
}
@media (max-width: 1500px){
  .d-custom-block {
    display: none;
  }

}

/*-------- THM Hover tooltips --------------*/

/* -------- Badge Hover --------------------*/

/*#box-wrap{
  align-items: center;
  justify-content: center;
}

#box-wrap:hover #thmBadge {
  filter: blur(3px);
  opacity: 0.8;
  transform: scale(1);
  box-shadow: none;
  z-index: 100;
}
#box-wrap:hover #thmBadge:hover {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
  transform: scale(1.5);
}
*/
/* ------------ Footer -------------------*/
.footer {
  background-color: #060922de;
  color: white;
  text-align: center;
  width: 100%;
}