* {
  font-family: Poppins;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  background-color: #f3fdff;
}

#body-home, #body-contact, #body-tutorial {	
	background: linear-gradient(to right, #388AD2, #276195);
	background-size: 100%;
	background-repeat: no-repeat;
}

#body-home:before, #body-contact::before, #body-tutorial::before {
	content:'';
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: -1;
	background: linear-gradient(to right, rgba(255,255,255,0.2), #276195 75%);
}

.header {
  width: 100%;
  background-image: linear-gradient(to right, #4aa8fb, #357cb9);
  height: 10vh;
  padding: 0 20px;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.header_items {
  display: flex;
  align-items: center;
}

.header h3 {
  color: #e1f1ff;
  font-weight: 400;
  margin: 0 10px;
  cursor: pointer;
}

.header a {
  text-decoration: none;
}

.header .instructor {
  background-color: #e1f1ff;
  border-radius: 20px;
  color: #222;
  margin-left: 5px;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  cursor: pointer;
}

.header .instructor:hover {
  background-color: #ffa500;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.header_items_small {
  display: none;
}

.header_items_small i {
  color: #e1f1ff;
  font-size: 28px;
  cursor: pointer;
}

.header i {
  margin: 0;
  padding: 0;
}

.header .instructor h3 {
  color: #222;
  margin: 0;
  padding: 0;
  padding-left: 5px;
}

.menu-icon {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-line {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px;
  transition: transform 0.3s ease;
}

.header nav {
  display: flex;
  align-items: center;
}

.nav-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: max-height 0.3s ease;
  align-items: center;
}

.nav-links li {
  margin-right: 20px;
}

.nav-links li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  scroll-behavior: smooth;
}

.nav-links li a:hover {
  color: #ffa500;
}

.nav-links.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 100%;
  left: 0;
  background-image: linear-gradient(to right, #4aa8fb, #357cb9); /* Adjust background color as needed */
  width: 100%;
  padding: 10px 0;
  pointer-events: auto;
  border-top: 1px solid rgba(256, 256, 256, 0.2);
}

.show li {
  padding: 5px 0;
}

/* Open class to rotate the menu icon */
.menu-line.open:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-line.open:nth-child(2) {
  opacity: 0;
}

.menu-line.open:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.logo {
  display: flex;
  align-items: center;
}

.header img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.header h2 {
  color: #FFFFFF;
  padding-left: 10px;
}

h1, .instructor-main h2 {
  font-size: 50px;
  line-height: 50px;
}

h4 {
  font-size: 20px;
  padding-bottom: 20px;
  padding-top: 10px;
  font-weight: 500;
  line-height: 30px;
}

h1, h4, .instructor-main h2 {
  padding-left: 10px;
  margin: 0;
  text-shadow: 1px 1px 1px #444;
  color: #fff;
}

.section h1 {
  line-height: 60px !important;
}

.w_100 {
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search_container {
  padding-top: 10vh;
  background-image: linear-gradient(to right, #388AD2, #276195);
}

.center {
  min-width: 70%;
  max-width: 85%;
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.grid {
  min-width: 75%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
}

#body form {
  width: 80vw;
  border-radius: 20px;
  border-width: 0;
  display: flex;
  background-color: #fff;
  flex-direction: row;
  align-items: center;
  margin-bottom: 100px;
  box-shadow: 1px 1px 5px #444;
}

i {
  font-size: 20px;
  padding-left: 20px;
}

input {
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  border-width: 0;
  font-size: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

input:focus {
  border: none;
  outline: none;
}

#body form:hover, #body form:focus-within {
  outline-color: #4AA8FB;
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 3px;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown_btn {
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  background-color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #444;
}

.dropdown_btn:hover {
  cursor: pointer;
  /* background-color: #f0f0f0; */
}

.dropdown_content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  height: 300px;
  overflow: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.dropdown_content button {
  width: 100%;
  padding: 10px 10px;
  border: none;
  display: block;
  background-color: #f9f9f9;
  color: #444;
}

.dropdown_content button:hover, .dropdown_content button:active {
  background-color: #d1e9fe;
  border: none;
  cursor: pointer;
}

.dropdown_content_open {
  display: block;
}

.dropdown_parent {
  font-size: 20px;
  font-weight: 500;
}

.dropdown_parent:hover {
  background-color: #f9f9f9 !important;
  cursor: default !important;
}

#dropdown_icon {
  font-size: 15px;
}

.lessons_container {
  background-color: #fff;
  padding: 0 10vw;
}

.display_none {
  display: none !important;
}

.lessons_header {
  color: #444;
}

.lessons_subheader {
  color: #888;
  font-weight: 400;
  line-height: 30px;
  margin-top: 10px;
}

.dark_header {
  text-shadow: none;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.card {
  flex: 0 0 calc(33.33% - 20px); /* Three cards in a row */
  max-width: calc(33.33% - 20px);
  min-width: 360px;
  background-color: #f2f9ff;
  border: 1px solid #c7d4df;
  border-radius: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  line-height: 35px;
  box-shadow: 0 1px 5px #ddd;
  margin: 10px;
}

@media only screen and (min-width: 1700px) {
  .carousel {
    width: 150%;
  }
} 

@media only screen and (max-width: 1400px) {
  .pricing-row {
    flex-direction: column !important;
  }

  .pricing-row .w_50 {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (max-width: 1300px) {
  .tutor-types .section {
    flex-direction: column !important;
    align-items: center !important;
  }

  .orange-card {
    margin-bottom: 20px !important;
  }

  .tutor-types .w_30 {
    width: 100% !important
  }

  .tutor-types .w_70 {
    width: 100% !important;
  }
}

@media only screen and (max-width: 1000px) {
  .why-lessonlink .row {
    flex-direction: column;
    align-items: center;
  }

  .why-lessonlink .w_33, .pricing w_25 {
    width: 90%;
    padding-bottom: 20px;
  }

  .nav-links {
    display: none;
  }

  .nav-links.show {
    display: flex;
  }

  .menu-icon {
    display: flex;
  }

  .phone-front {
    height: 55vh !important;
    width: calc(((55vh / 2532) * 1170) + 20px) !important;
  }

  .phone-behind {
    height: 70vh !important;
    width: calc(((70vh / 2532) * 1170) + 20px) !important;
  }
}

@media only screen and (max-width: 900px) {
  .phone-front {
    height: 35vh !important;
    width: calc(((35vh / 2532) * 1170) + 20px) !important;
  }

  .phone-behind {
    height: 45vh !important;
    width: calc(((45vh / 2532) * 1170) + 20px) !important;
  }
}

@media only screen and (max-width: 800px) {
  .card-container {
    justify-content: center;
  }

  .instructor-home p {
    width: 100%;
    min-width: none !important;
    max-width: none !important;
  }

  .instructor-home h3 {
    text-align: center;
  }

  .instructor-home h4 {
    text-align: center;
  }

  .mobile-pad-20 {
    padding-top: 20px;
  }

  .titles {
    width: 90% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .titles h1, .titles h4 {
    text-align: center;
  }

  .section {
    padding: 50px 20px !important;
  }

  .section .row {
    flex-direction: column;
    width: 100%;
  }

  .section .fill-content {
    width: 100%;
    padding: 0 10px;
  }

  footer .fill-content {
    width: 100%;
  }

  .section .section-center {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hide-mobile, .hide-mobile-block {
    display: none !important;
  }

  .show-mobile {
    display: flex !important;
  }

  .show-mobile-block {
    display: inline !important;
  }

  .how-it-works .show-mobile h3 {
    text-align: center;
    padding-bottom: 20px;
  }

  .how-it-works .section {
    padding-top: 0px !important;
  }

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

  .our-story h3 {
    padding-bottom: 20px !important;
  }

  .phone {
    margin-bottom: 40px;
    border-radius: 20px !important;
  }

  .previews .phone {
    margin-bottom: 25px;
  }

  .why-lessonlink .w_33, .pricing .w_25 {
    width: 100%;
    padding-bottom: 20px;
  }

  .home {
    flex-direction: column !important;
  }

  .home h1 {
    font-size: 40px;
    padding-bottom: 10px !important;
  }

  .previews {
    width: 100% !important;
    justify-content: center !important;
  }

  .phone-front {
    height: 35vh !important;
    width: calc(((35vh / 2532) * 1170) + 20px) !important;
    left: -57px !important;
  }

  .phone-behind {
    height: 45vh !important;
    width: calc(((45vh / 2532) * 1170) + 20px) !important;
    left: 50px;
  }

  .screen {
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    margin: 5px !important;
    border-radius: 15px !important;
  }

  h1, .instructor-main h2 {
    line-height: 35px;
  }

  .home h4 {
    font-size: 20px;
    color: #e1f1ff;
  }

  .center {
    justify-content: flex-start !important;
    padding-top: 20px;
  }

  .get-involved h3, .find-lesson h3, .cater h3, .get-involved h1 {
    padding-bottom: 20px !important;
  }

  .find-lesson {
    margin-top: -1px;
  }

  footer {
    flex-direction: column !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  footer .download {
    padding-top: 20px !important;
  }

  #footer-download, #footer-links {
    justify-content: flex-start;
    flex-direction: column;
  }

  #footer-links i {
    margin-left: 0 !important;
  }

  .copy-right {
    margin-top: 5px !important;
  }

  .tutorial .row {
    width: 100%;
    padding-top: 50px;
  }

  .parallax {
    background-attachment: scroll !important;
  }

  .gif-coach {
    background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Ffootball_mobile.gif?alt=media") !important;
  }

  .gif-piano {
    height: 50vh !important;
  }

  .img-tennis {
    background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Ftutor.jpg?alt=media") !important;
  }

  .promotion-download {
    width: 100%;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
  }

  .our-story .icon-container {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .our-story .info-container {
    width: 100% !important;
    justify-content: center !important;
  }

  .our-story .icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 20px !important;
  }

  .our-story i {
    font-size: 18px !important;
  }

  .instructor-main {
    height: 90vh !important;
  }

  .overlay h2, .instructor-main h2 {
    font-size: 35px !important;
    line-height: 45px !important;
  }

  .overlay .quote {
    font-size: 22px !important;
  }

  .overlay .large {
    font-size: 18px !important;
  }

  .cater h3 {
    text-align: center !important;
  }

  #lesson-list {
    flex-direction: row !important;
  }

  #lesson-list li {
    font-size: 15px !important;
  }
}

@media only screen and (max-width: 768px) {
  .card, .orange-card, .blue-card {
    flex: 0 0 calc(50% - 20px); /* Two cards in a row */
    max-width: calc(50% - 20px);
  }
  
  #find_lesson {
    display: none !important;
  }

  #submit_btn {
    display: none;
  }

  #find_lesson_mobile {
    display: block !important;
  }

  #submit_btn_mobile {
    display: block !important;
  }

  .dropdown {
    padding-right: 20px;
    border-radius: 20px;
  }

  .dropdown_content {
    width: calc(100% - 20px);
  }

  form:hover, form:focus-within {
    outline: none;
  }

  .tutor-types .w_70, .tutor-types .w_30 {
    padding: 0 !important;
  }
}

@media only screen and (max-width: 685px) {
  .lessons_header, h1 {
    font-size: 26px;
  }

  .lessons_subheader, h4 {
    font-size: 18px;
    margin-top: -5px;
  }

  .modal {
    min-width: 95vw !important;
  }

  .section {
    width: 100% !important;
    min-width: none !important;
    max-width: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .card, .blue-card, .orange-card {
    flex: 0 0 calc(100% - 20px); /* One card in a row */
    max-width: calc(100% - 20px);
    min-width: 85vw !important;
  }
}

@media (pointer:none), (pointer:coarse) {
  .search_container {
    padding-top: 0 !important;
  }
}

.card h5, .modal h5 {
  font-size: 30px;
  font-weight: 500;
  margin: 0;
}

.card h6, .modal h6 {
  font-size: 23px;
  color: #444444;
  font-weight: 400;
  margin: 0;
}

.card h8, .modal h8 {
  font-size: 16px;
  color: #444;
  font-weight: 400;
  margin: 0;
  line-height: 20px;
}

.card h7, .modal h7 {
  padding-left: 10px;
  color: #444;
  font-size: 18px;
}

.card_info {
  display: flex;
  align-items: center;
}

.first_info {
  padding-top: 10px;
}

.icon_container {
  width: 30px;
  display: flex;
  justify-content: center;
}

.card_info i {
  color: #444;
  font-size: 22px;
  padding: 0 !important;
}

.card_cost {
  width: 100%;
  line-height: 25px;
}

.card_cost, .card_section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px #c7d4df solid;
}

.card_cost p, .card_cost h7 {
  margin: 0;
  padding: 0;
}

.card_cost p {
  margin-top: 5px !important;
  color: #444;
}

.pad_top_50 {
  padding-top: 50px;
}

.card .row, .modal .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.card button {
  margin-top: 20px;
  padding: 0;
  color: #4aa8fb;
  display: inline-block;
  border: none;
  background-color: transparent;
  font-size: 15px;
}

.card button:hover {
  cursor: pointer;
}

.loader {
  width: 85px;
  height: 25px;
  --g1:conic-gradient(from  90deg at left   3px top   3px,#0000 90deg,#fff 0);
  --g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,#fff 0);
  background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
  background-position: left,center,right;
  background-repeat: no-repeat;
  animation: l8 1s infinite;
}
@keyframes l8 {
  0%   {background-size:25px 100%,25px 100%,25px 100%}
  20%  {background-size:25px 50% ,25px 100%,25px 100%}
  40%  {background-size:25px 50% ,25px 50% ,25px 100%}
  60%  {background-size:25px 100%,25px 50% ,25px 50% }
  80%  {background-size:25px 100%,25px 100%,25px 50% }
  100% {background-size:25px 100%,25px 100%,25px 100%}
}

.loader_container {
  position: absolute;
  bottom: 15vh;
}

.find_btn {
  padding: 10px 25px;
  border-radius: 20px;
  background-image: linear-gradient(to right, #4096e1, #388ad2);
  border: none;
  box-shadow: 1px 1px 4px #444;
  color: #f9f9f9;
  font-size: 20px;
  font-weight: 500;
  margin-top: -50px;
}

.find_btn:hover {
  cursor: pointer;
}

.find_btn:active {
  background-image: linear-gradient(to right, #5da5e5, #5296d3);
}

.modal-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  backdrop-filter: blur(5px); /* Blur the background */
  z-index: 9999;
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 80%;
  max-width: 600px; /* Maximum width of the modal */
  min-width: 576px;
  display: flex;
}

.modal {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  overflow: scroll;
  max-height: 80%;
  max-width: 600px; /* Maximum width of the modal */
  min-width: 576px;
}

.modal-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #fff;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1px 2px #bbb;
  cursor: pointer;
  overflow: hidden;
}

.modal-btn button {
  background-color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.modal-bg.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.instructor_container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.instructor_container img {
  height: 80px;
  width: 80px;
  border-radius: 40px;
  object-fit: cover;
}

.modal p {
  margin: 0;
}

.store_btn {
  width: 150px;
  height: 50px;
  margin-top: 10px;
  z-index: 40;
}

.google_btn {
  margin-left: 50;
  display: inline-block;
}

#find_lesson_mobile {
  display: none;
}

.mobile_form {
  margin-bottom: 25px !important;
}

#submit_btn_mobile {
  display: none;
}

.pad_top_10 {
  padding-top: 10vh;
}

.pad_top_15 {
  padding-top: 15vh;
}

.home {
  flex-direction: row;
  max-height: 90vh !important;
}

.titles {
  width: 50%;
}

.titles h1, .titles h4 {
  padding-left: 0;
}

.previews {
  width: 50%;
  display: flex;
  justify-content: flex-end;
}

.previews-overlap {
  position: relative;
}

.phone {
  width: calc(((65vh / 2532) * 1170) + 20px);
  height: 65vh;
  background-color: #000;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.phone-video {
  align-items: center;
  justify-content: center;
}

.screen {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #fff;
  border-radius: 20px;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.phone-behind {
  height: 80vh;
  width: calc(((80vh / 2532) * 1170) + 20px);
}

.phone-front {
  position: absolute;
  bottom: 0;
  left: -120px;
}

.center-container {
  display: flex;
  justify-content: center;
  background-color: #f3fdff;
  position: relative;
}

.container-div {
  max-width: 100vw !important;
  overflow: hidden !important;
}

.section {
  min-width: 70%;
  max-width: 85%;
  /* min-height: 90vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 100px 20px;
  background-color: #f3fdff;
}

.section-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.section-bottom {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.section .row {
  display: flex;
  justify-content: center;
}

.section h3, .get-involved h1, .section h1, .info-screen h1 {
  font-size: 40px;
  font-weight: 300;
  padding: 0;
  margin: 0;
  text-align: center;
  color: #000;
  text-shadow: none;
}

.section h4 {
  color: #444;
  text-shadow: none;
  font-weight: 300;
  padding: 0;
  font-size: 25px;
}

.section p, .section li {
  color: #444;
  font-weight: 300;
  font-size: 18px;
}

.w_70 {
  width: 70%;
}

.w_40 {
  width: 40%;
}

.w_35 {
  width: 35%;
}

.w_30 {
  width: 30%;
}

.get-involved a {
  background-color: transparent;
  border: #888 solid 2px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 18px;
  color: #666;
  font-weight: 300;
  text-decoration: none;
}

.column {
  flex-direction: column;
}

.w_33 {
  width: 33.3%;
}

.w_50 {
  width: 50%;
}

.pad_20_horizontal {
  padding-left: 20px;
  padding-right: 20px;
}

.section i {
  padding-left: 0;
  color: #444;
}

.pad_10 {
  padding-top: 20px !important;
}

.why-lessonlink i {
  font-size: 25px;
}

.how-it-works h4, .how-it-works h5 {
  width: fit-content;
}

.how-it-works .info, .tutorial .info {
  max-width: 70%;
}

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

.align-center {
  display: flex;
  align-items: center !important;
}

.content-with-title {
  padding-bottom: 100px;
}

.our-story {
  padding-bottom: 50px;
}

.red {
  background-color: red;
}

footer {
  width: 100vw;
  background-image: linear-gradient(to right, #4aa8fb, #357cb9);
  display: flex;
  padding: 30px 80px;
  justify-content: center;
  flex-direction: row;
}

#footer-links a {
  margin-right: 10px;
}

footer img {
  height: 30px;
  width: 30px;
  border-radius: 7px;
  margin: 0 !important;
  padding: 0 !important;
}

footer h8 {
  font-size: 17px;
  color: #fff;
  font-weight: 500;
  margin-left: 10px;
}

footer .store_btn {
  width: 120px;
  height: 40px;
}

footer .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

footer .flex-start {
  justify-content: flex-start;
}

footer .flex-end {
  justify-content: flex-end;
  display: flex;
}

footer a {
  color: #222;
}

footer h9 {
  font-size: 16px;
  color: #e1f1ff;
  font-weight: 300;
  padding: 0;
}

footer i {
  padding: 0;
  margin-left: 10px;
  color: #e1f1ff;
  font-size: 30px;
  padding-top: 5px;
}

footer .copy-right {
  align-items: center;
  display: flex;
}

footer .copy-right h9 {
  color: #222;
}

footer .copy-right i {
  padding: 0;
  font-size: 20px;
  margin-right: 5px;
  color: #222;
}

.no-margin {
  margin: 0;
}

.find-lesson h3, .cater h3, .instructor-video h3 {
  line-height: 40px;
}

.side-heading {
  font-size: 40px !important;
  font-weight: 500 !important;
  text-align: start !important;
}

.get-involved ul, .instructor-video ul {
  padding-left: 0;
  margin-left: 0;
}

.get-involved li, .instructor-video ul {
  list-style-type: none;
  margin-top: 5px;
}

.get-involved strong {
  font-weight: 500;
}

.get-involved img, .tutor-types img {
  height: auto;
  box-shadow: 1px 5px 10px #bbb;
  border-radius: 10px;
}

.tutor-types img {
  width: 100%;
}

.get-involved img {
  width: 30vw;
}

.hide-mobile {
  display: flex;
}

.hide-mobile-block {
  display: block;
}

.show-mobile, .show-mobile-block {
  display: none;
}

.instructor-home p {
  max-width: 55%;
  text-align: justify;
}

.instructor-home h3 {
  line-height: 40px;
  padding-bottom: 20px;
}

.section-no-padding {
  padding: 0 !important;
}

.section-column {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.instructor-features, .instructor-features .section {
  background-color: #9acfff !important;
}

.instructor-features .section {
  max-width: 100% !important;
}

.instructor-features .item {
  background-color: #9acfff;
  padding: 40px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.instructor-features i {
  font-size: 33px;
  padding: 0 !important;
}

.instructor-features h5 {
  font-size: 18px;
  font-weight: 300;
  padding-top: 20px;
  margin: 0;
  color: #444;
}

.instructor-features h7 {
  font-size: 20px;
  font-weight: 300;
  margin-top: 10px;
  color: #222;
}

.instructor-enhance img {
  height: calc(20vw / 100 * 140);
  width: 20vw;
  overflow: hidden;
  border-radius: 10px;
  /* box-shadow: 2px 2px 10px #bbb; */
}

.instructor-enhance .image-container {
  justify-content: space-around;
  padding-left: 40px;
  padding-right: 40px;
  position: absolute;
  bottom: -280px;
}

.instructor-enhance h3 {
  padding-bottom: 100px;
}

.image-container .center-image {
  margin-top: 50px;
}

.bg-grey {
  background-color: #ddd;
  position: relative;
}

.bg-transparent {
  background-color: transparent;
  box-shadow: none !important;
}

.promotion h1 {
  text-align: center;
}

.promotion h2 {
  color: #fff;
  text-shadow: 1px 1px 1px #444;
  text-align: center;
}

.promotion h5 {
  color: #fff;
  text-shadow: 1px 1px 1px #444;
  text-align: center;
  font-size: 18px;
}

.quote p {
  text-align: justify;
}

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

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

.w_25 {
  width: 25%;
}

.pricing .w_50 {
  padding: 10px;
}

.pricing-card {
  width: 100%;
  max-width: 350px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
  overflow: hidden;
}

.pricing .gradient {
  width: 25px;
  height: 25px;
  border-radius: 13px;
}

.basic-gradient {
  background-image: linear-gradient(to top, #C9C9C9, #AEAEAE);
}

.pricing h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  color: #888;
}

.bg-white {
  background-color: #fff !important;
}

.pricing .bg-white {
  padding: 20px;
  height: 160px;
}

.bg-lightblue {
  background-color: #eef7ff;
}

.pricing .bg-lightblue {
  padding: 20px;
  height: 220px;
}

.pricing .price {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.pricing h6 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
}

.pricing h8 {
  font-size: 15px;
}

.whats-included {
  margin-top: 10px;
}

.icon-txt {
  padding-top: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pricing h9 {
  color: #666;
  font-size: 14px;
  padding-left: 10px;
}

.pricing i {
  font-size: 16px;
}

.standard-gradient {
  background-image: linear-gradient(to top, #81BEF3, #4AA8FB);
}

.pro-gradient {
  background-image: linear-gradient(to top, #04D860, #00B34E);
}

.organisation-gradient {
  background-image: linear-gradient(to top, #8963BA, #54428E);
}

.pad-bottom-50 {
  padding-bottom: 50px;
}

.pricing-row {
  display: flex;
  flex-direction: row;
}

.info-screen h2 {
  color: #000;
  text-shadow: none;
  padding-left: 0;
}

.info-screen {
  padding: 15vh 40px;
}

.overflow-hidden {
  overflow: hidden;
}

.carousel {
  display: flex;
  flex-direction: row;
  height: 70vh;
  width: 120%;
}

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

.fill-height {
  height: 100vh;
}

#body-contact .section {
  justify-content: flex-start !important;
}

.tutorial video {
  padding: 10px;
  background-color: #000;
  border-radius: 10px;
  margin-top: 20px;
}

.tutorial ul {
  list-style-type: none;
  width: 85%;
}

.tutorial ul li {
  color: #666;
}

.tutorial h5 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 10px 0 0 0;
}

.tutorial h5 .no-padding {
  padding-top: 0 !important;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.tutorial .row {
  width: 80%;
}

video .no-padding {
  padding: 20px 0 !important;
}

.no-repeat {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.gif-coach {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Fcoach.gif?alt=media");
}

.gif-guitar {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Fguitar.gif?alt=media");
}

.gif-piano {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Fpiano.gif?alt=media");
}

.gif-football {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Ffootball.gif?alt=media");
}

.img-tennis {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/swimlog.appspot.com/o/hosting%2Fpublic%2Ftennis.jpg?alt=media");
}

.height-50 {
  height: 50vh !important;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.text-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px 100px 20px;
}

.overlay h2 {
  font-size: 55px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px #444;
  line-height: 60px;
  margin: 0 !important;
}

.overlay h3 {
  color: #e4e4e4;
  text-align: center;
  text-shadow: 1px 1px 1px #444;
}

.overlay-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlay p {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 1px #444;
  text-align: justify;
}

.overlay .large {
  font-size: 25px;
}

.overlay .subtxt {
  color: #f8f8f8;
}

.overlay-padding {
  padding: 0 10vw;
}

.overlay .quote {
  font-size: 35px;
  color: #fff !important;
}

.medium {
  font-size: 18px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-right-10 {
  padding-right: 10px;
}

.padding-top-10 {
  padding-top: 10px !important;
}

.padding-top-20 {
  padding-top: 20px;
}

.padding-top-50 {
  padding-top: 50px;
}

.bg-white {
  background-color: #fff;
}

.promotion h7 {
  font-size: 17px;
  font-weight: 300;
  color: #444;
  text-align: justify;
}

.faq h3 {
  line-height: 60px;
}

#pricing h7 {
  color: #666 !important;
  font-size: 20px !important;
  text-align: center !important;
  font-weight: 300;
}

#body-home .find-lesson form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#body-home .find-lesson .input-container {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border: solid #888 1px;
  border-radius: 20px;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px;
}

#body-home .find-lesson i {
  font-size: 25px;
}

#body-home .find-lesson input {
  width: 100%;
  height: 100%;
}

#body-home .find-lesson button {
  width: 220px;
  height: 50px;
  border-radius: 30px;
  background-color: #4aa8fb;
  border: #4096e1 solid 2px;
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
}

#body-home .find-lesson button:hover {
  cursor: pointer;
  background-color: #9acfff;
  border-color: #4aa8fb;
}

.our-story .icon-container {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.our-story .info-container {
  width: 90%;
}

.our-story .icon {
  width: 40px;
  height: 40px;
  background-color: #003892;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 5px #bbb;
}

.our-story i {
  color: #fff;
  font-size: 17px;
}

.our-story p {
  text-align: justify;
}

.bg-blue {
  background-color: #9acfff;
}

.flex-start {
  align-items: flex-start;
}

#modal-btn i {
  font-size: 20px;
  background-color: transparent;
  padding: 0 !important;
  margin: 0 !important;
}

.padding-bottom-20 {
  padding-bottom: 20px !important;
}

.find-lesson h3 {
  line-height: 50px;
}

.cater h3 {
  padding-bottom: 20px !important;
}

.cater h4 {
  text-align: justify;
}

.cater li {
  font-size: 18px;
  color: #444;
}

.cater p {
  font-size: 16px;
  color: #444;
  text-align: justify;
}

#not-found h1 {
  font-size: 100px !important;
  color: #000 !important;
  font-weight: 500 !important;
}

#not-found h2 {
  font-size: 40px;
  color: #444;
  font-weight: 400;
}

#features i, #features h5 {
  color: #004C71;
}

#features h5 {
  text-align: center;
}

.relative {
  position: relative;
}

.pricing, .pricing .section {
  background-color: #9acfff;
}

.block {
  display: inline-block !important;
  width: 100% !important;
}

#body-instructor .get-involved {
  margin-top: -10px;
}

.blue-card, .orange-card, .card-white {
  border-radius: 20px;
  box-shadow: 0 1px 5px #ddd;
  padding: 25px;
}

#body-home .blue-card {
  box-shadow: 0 1px 5px #aaa;
}

.blue-card {
  background-color: #d1e9fe;
}

.orange-card {
  background-color: #ffd593;
}

.card-white {
  background-color: #fff;
}

.blue-card h4, .orange-card h4 {
  color: #444;
  font-size: 20px;
}

.blue-card ul, .orange-card ul {
  padding: 0 30px !important;
}

.blue-card li, .orange-card li {
  color: #555;
}

.instructor-benefits .w_33 {
  padding: 0 30px !important;
}

.instructor-benefits img {
  width: auto;
  height: 250px;
}

.padding-40 {
  padding: 40px !important;
}

.radius-40 {
  border-radius: 40px !important;
}

.margin-minus-1 {
  margin-top: -1px !important;
}