/*

TemplateMo 548 Training Studio

https://templatemo.com/tm-548-training-studio

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/*
---------------------------------------------
font & reset css
---------------------------------------------
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
/*
---------------------------------------------
reset
---------------------------------------------
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}




.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #343A3F;
  background-color: #343A3F;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
    font-size: 14px;
    line-height: 25px;
    color: #FFFFFF;
}


.j p{
    font-size: 14px;
    line-height: 25px;
    color:#000000;
    margin-bottom: 20px;
}

/*
---------------------------------------------
global styles
---------------------------------------------
*/
html,
body {
  background: #343A3F;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #9BC31F;
  color: #343A3F;
}

::-moz-selection {
  background: #9BC31F;
  color: #343A3F;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  text-align: center;
  margin-top: 140px;
  margin-bottom: 80px;
}

.section-heading h2 {
  font-size: 28px;
  font-weight: 800;
  color:  #9BC31F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 em {
  font-style: normal;
  color: #9BC31F;
}

.section-heading img {
  margin: 20px auto;
}

.dark-bg h2 {
  color: #000;
}

.dark-bg p {
  color: #000;
}

.main-button a {
  display: inline-block;
  font-size: 15px;
  padding: 12px 20px;
  background-color: #9BC31F;
  color: #343A3F;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #9BC31F;
}


/*
---------------------------------------------
header
---------------------------------------------
*/
.Sized-Box{
  height: 80px;
}
.background-header {
  background: #343A3F !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff!important;
}

.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
}

.background-header .main-nav .nav li:last-child a:hover {
  color: #fff!important;
}

.background-header .main-nav .nav li:hover a {
  color: #9BC31F!important;
}

.background-header .nav li a.active {
  color: #9BC31F!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background: #343A3F;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #9BC31F;
  font-weight: 900;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li:last-child a {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #9BC31F;
  color: #fff;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: all .3s;
  height: auto;
  line-height: 20px;
}

.header-area .main-nav .nav li:last-child a:hover {
  background-color: #fff;
  opacity: 1;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fff!important;
  opacity: 1;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #9BC31F!important;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #9BC31F;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #343A3F;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #9BC31F!important;
    opacity: 1;
  }
  .header-area {
    background-color: #343A3F ;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .text-j{
      color: #0c0e1a;
      background-color: #0c0e1a;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li:last-child {
    width: 100%;
    background-color: #9BC31F;
    color: #343A3F ;
  }
  .header-area .main-nav .nav li:last-child a {
    background-color: #9BC31F!important;
  }
  .header-area .main-nav .nav li:last-child a:hover,
  .header-area .main-nav .nav li:last-child:hover a {
    background-color: #9BC31F!important;
    color: #343A3F !important;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #343A3F ;
    border-bottom: 1px solid #343A3F ;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #343A3F  !important;
    color: #fff  !important;
  }
  .header-area .main-nav .nav li:last-child a {
    color: #fff !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #343A3F  !important;
    color: #9BC31F!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #fff;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/*
---------------------------------------------
banner
---------------------------------------------
*/

.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(35,45,57,0.8);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
}

.main-banner .caption {
  text-align: center;
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 84px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #9BC31F;
  font-weight: 900;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  margin-bottom: 50px;
}

.feature-item {
  display: inline-block;
  margin-bottom: 60px;
}

.feature-item .left-icon img {
  float: left;
  margin-right: 30px;
}

.feature-item .right-content {
  display: inline;
}

.feature-item .right-content h4 {
  margin-top: 0px;
  margin-bottom:  7px;
  letter-spacing: 0.25px;
  color: #b9b9b9;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}

.feature-item .right-content a.text-button {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  color: #9BC31F;
  font-weight: 500;
}

/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#call-to-action {
  padding: 120px 0px;
  background-image: url(../images/j.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.cta-content h2 em {
  font-style: normal;
  color: #9BC31F;
}

.cta-content p {
  font-size: 16px;
  color: #fff;
  margin: 15px 0px 25px 0px;
}



/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
  margin-bottom: 140px;
}

.tabs ul {
  margin: 0;
  padding: 0;
}
.tabs ul li {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
.tabs ul li:last-child {
  margin-bottom: 0px;
}
.tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  padding: 30px 30px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 5px;
  font-size: 19px;
  color: #232d39;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: all 0.3s;
}
.tabs .main-rounded-button a {
  text-align: center;
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #9BC31F;
}
.tabs .main-rounded-button a:hover {
  background-color: #9BC31F;
}
.tabs ul li a img {
  max-width: 100%;
  margin-right: 20px;
}
.tabs ul .ui-tabs-active span {
  background: #faf5b2;
  border: #faf5b2;
  line-height: 90px;
  border-bottom: none;
}
.tabs ul .ui-tabs-active a {
  color: #fff;
  background-color: #9BC31F;
}
.tabs ul .ui-tabs-active span {
  color: #343A3F;
}
.tabs-content {
  margin-left: 30px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
.tabs-content img {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.tabs-content h4 {
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #f7f7f7;
  margin-bottom: 28px;
}


/*
---------------------------------------------
schedule
---------------------------------------------
*/

.schedule {
  padding: 0px 0px 80px 0px;
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.schedule table {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

.schedule table tbody {
  border-top: 1px solid #fff;
}

.schedule table tbody tr {
  border-bottom: 1px solid #fff;
}

.schedule table tbody tr td {
  border-right: 1px solid #fff;
  height: 100px;
}

.schedule table tr td {
  color: #fff;
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
    opacity: 0;
    transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
    opacity: 1;
    transition: all 0.5s;
}

.schedule .filters {
  margin-bottom: 40px;
}
.schedule .filters ul {
  padding: 0;
  text-align: center;
}
.schedule .filters ul li {
  list-style: none;
  display: inline;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.schedule .filters ul li:after {
  content: "/";
  margin-left: 10px;
  color: #fff;
}
.schedule .filters ul li:last-child {
  margin-right: 0px;
}
.schedule .filters ul li:last-child::after {
  display: none;
}
.schedule .filters ul li.active,
.schedule .filters ul li:hover {
  color: #9BC31F;
}
.schedule .filters-content {
  margin-top: 50px;
}
.schedule .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
.schedule .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}


/*
---------------------------------------------
trainers
---------------------------------------------
*/

.trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 40px;
}

.trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

.trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #9BC31F;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

.trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.trainers .trainer-item p {
  margin-bottom: 20px;
}

.trainers .trainer-item ul.social-icons li {
  display: inline-block;
  margin-right: 12px;
}

.trainers .trainer-item ul.social-icons li:last-child {
  margin-right: 0px;
}

.trainers .trainer-item ul.social-icons li a {
  color: #232d39;
  transition: all .3s;
}

.trainers .trainer-item ul.social-icons li a:hover {
  color: #9BC31F;
}


/*
---------------------------------------------
contact
---------------------------------------------
*/

#contact-us {
  margin-top: 140px;
}

#contact-us .container-fluid .col-lg-6 {
  padding: 0px;
}

#contact-us .contact-form {
  padding: 80px;
  background-image: url(../images/contact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-us .contact-form #contact {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 13px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.contact-form button {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #9BC31F;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  margin-top: -8px;
}

.contact-form button:hover {
  background-color: #9BC31F;
}




/*
---------------------------------------------
footer
---------------------------------------------
*/
footer {
  text-align: center;
  padding: 30px 0px;
}

footer p {
  color: #232d39;
  font-size: 13px;
}

footer p a {
  cursor: pointer;
  color: #9BC31F;
}

footer p a:hover {
  color: #9BC31F;
}



/*
---------------------------------------------
preloader
---------------------------------------------
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #232d39;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #232d39;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fff;
    border-radius: 50%;
}









/* Caraousel*/

.carousel {
    margin-bottom: 4rem;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 12rem;
}

.btn .btn-lg .btn-dark{
    color: #fff;
}
.carousel-item>img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
}

#button-carousel{
    color: #fff;
    background: #9BC31F;
}
/*font lao*/
.Head-title{
    font-family: myFirstFont;
}

.Head-detail{
    font-family: myFirstFont;
    color: #f7f7f7;

}
/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;

}

.marketing h2 {
    font-weight: 400;
}

/* rtl:begin:ignore */
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}

.carousel-item {
    /* The image used */
    background-color: #343A3F;

    /* Used if the image is unavailable */

    /* You must set a specified height */

}

.overlay-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
}

.image-circle {
    width: 128px;
    color: #ffffff;
    background-position: center;
    /* Center the image */
    /* background-repeat: no-repeat; */
    /* Do not repeat the image */
    background-size: cover;

}
.image-box {
    width: 500px;
    color: #ffffff;
    background-position: center;
    /* Center the image */
    /* background-repeat: no-repeat; */
    /* Do not repeat the image */
    background-size: cover;
    width: 500px;

}

/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0;
    /* Space out the Bootstrap <hr> more */
}


/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Thin out the marketing headings */



/* RESPONSIVE CSS
-------------------------------------------------- */



/*
---------------------------------------------
responsive
---------------------------------------------
*/
.image-button{
    height: 2rem;
}

@media (min-width : 40em) {
    .image-button{
        height: 5rem;
    }
}

@media (min-width: 40em) {
    .carousel-item {
        height: 40rem;
    }

    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 53px;
    }
}



@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

.featurette-heading {
    font-size: 53px;
}

@media (max-width: 992px) {

    .main-banner .caption h2 {
        font-size: 64px;
    }
    #features {
        margin-bottom: 110px;
    }
    #features .feature-item {
        margin-bottom: 30px;
    }
    #our-classes .tabs-content {
        margin-left: 0px;
        margin-top: 30px;
    }
    .trainer-item {
        margin-bottom: 30px;
    }
    #contact-us #map {
        margin-bottom: -7px;
    }
    #contact-us .contact-form {
        padding: 30px;
    }
    #contact-us .contact-form #contact {
        padding: 30px;
    }

}

@media (max-width: 450px) {
    .feature-item .right-content a.text-button {
        margin-left: 130px;
    }
}




/* contact us */


.info-wrap h3 {
    color: #fff;
    position: relative; }
.info-wrap h3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #9BC31F;
    content: ''; }

.info-wrap .dbox {
    width: 100%;
    margin-bottom: 25px; }
.info-wrap .dbox:last-child {
    margin-bottom: 0; }
.info-wrap .dbox p {
    margin-bottom: 0; }
.info-wrap .dbox p span {
    font-weight: 400;
    color: #fff; }
.info-wrap .dbox p a {
    color: #f9f9f9 }
.info-wrap .dbox .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #faf5b2; }
.info-wrap .dbox .icon span {
    font-size: 20px;
    color: #fff; }
.info-wrap .dbox .text {
    width: calc(100% - 50px); }

.copyright{
    color: #fff;
}



@charset "UTF-8";
.navigation {
    height: 70px;
    background: #343A3F;
}

.brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 70px;
    text-transform: uppercase;
    font-size: 1.4em;
}
.brand a,
.brand a:visited {
    color: #ffffff;
    text-decoration: none;
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
}

nav {
    float: right;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    position: relative;
}
nav ul li a,
nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 70px;
    background: #343A3F;
    color: #ffffff;
    text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
    background: #99C31F;
    color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: " ▾";
}
nav ul li ul li {
    min-width: 190px;


}
nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
}

.nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
}

/* Mobile navigation */
.nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #343A3F;
    height: 70px;
    width: 70px;
}

@media only screen and (max-width: 798px) {
    .nav-mobile {
        display: block;
    }

    nav {
        width: 100%;
        padding: 70px 0 15px;
    }
    nav ul {
        display: none;
    }
    nav ul li {
        float: none;
    }
    nav ul li a {
        padding: 15px;
        line-height: 20px;
    }
    nav ul li ul li a {
        padding-left: 30px;
    }

    .nav-dropdown {
        position: static;
    }
}
@media screen and (min-width: 799px) {
    .nav-list {
        display: block !important;
    }
}
#nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: "";
    transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
    top: -10px;
}
#nav-toggle span:after {
    bottom: -10px;
}
#nav-toggle.active span {
    background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
}
#nav-toggle.active span:before {
    transform: rotate(45deg);
}
#nav-toggle.active span:after {
    transform: rotate(-45deg);
}

article {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
}

.j p{
    color: black;
}

.j a{
    color: #C1F106;
}

.j a:hover{
    color: #ffffff;
}