/* common */

body{
    font-size: 14px;
    color: var(--body);
    line-height: 1.7em;
    font-family: 'opensans', Arial, Helvetica, sans-serif;
}

.top-ribbon{
    width: 100%;
    font-size: 0.9em;
    padding: 7px;
    background-color: #2ea3f2;
    color: #fff;
    text-align: right;
}
.top-ribbon .flex{
    justify-content: right;
}
.top-ribbon a{
    color: #fff;
}
header .logo{
    width: 340px;
    padding: 20px 0;
}
header nav ul li{
    padding: 0 7px;
    position: relative;
}
header nav ul li a{
    color: #333;
    display: block;
    line-height: 50px;
}
header nav ul li a:hover{
    color: #999;
}
header nav ul li i.fa{
    font-size: 10px;
    position: relative;
    top: -1px;
}
header nav ul li ul{
    /*display: none;*/
    opacity: 0;
    height: 0;
    overflow: hidden;
    background: #fff;
    padding: 0px 10px;
    position: absolute;
    top: 50px;
    left: 0px;
    border: 1px solid #eee;
    min-width: 200px;
    left: 0;
    transition: all 300ms ease 0ms;
    z-index: 0;
    
}
header nav ul li:hover ul{
    /*display: block;*/
    opacity: 1;
    padding: 15px 10px;
    height: auto;
    transition: all 300ms ease 0ms;
    z-index: 10;
}
header nav ul li ul li{
    width: 100%;
}
header nav ul li ul li a{
    padding: 10px 10px;
    width: 100%;
    line-height: normal;
}
header nav ul li ul li a:hover{
    background-color: #eee;
    color: #333;
}
.menu-icon{
    display: none;
}

section.banner{
    height: calc(100% - 126px);
}
section.banner.small{
    height: 450px;
}
.banner-inner{
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
}
.banner-content{
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    line-height: 130px;
    font-size: 20px;
    text-align: center;
}
.banner-content *{
    color: #fff;
}
.banner-content h1{
    font-size: 80px;
    font-family: 'oswald', Arial, Helvetica, sans-serif;
    letter-spacing: 8px;
}
.banner-content p{
    padding: 20px 0 30px 0;
    line-height: normal;
}
.banner-inner .angles-down{
    position: absolute;
    font-size: 26px;
    text-align: center;
    bottom: 40px;
    color: #fff;
    cursor: pointer;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 50px
}

section.clients ul{
    list-style: none;
    padding: 30px 0;
    margin: 0;
}
section.clients ul li{
    list-style: none;
    padding: 0 15px;
    display: inline-block;
    width: 150px;
}

section.contact .container{
    background-color: #f0eeec;
    padding: 50px;
    margin: 50px auto;
}


footer .footer-top{
    background-image: url(../images/puzzle-cube.jpg);
    background-size: cover;
    background-position: center center;
    padding: 40px 10px;
}
footer .footer-box{
    width: 48%;
    padding: 7%;
    background-color: rgba(31,31,31,0.8);
    font-size: 1.3em;
    line-height: 1.3em;
}
footer .footer-box hr{
    width: 100%;
    border: 0;
    border-top: 2px solid #c39d63;
    margin: 35px 0;
}
footer .footer-box ul li{
    list-style: none;
    display: inline-block;
    font-size: 2em;
    padding: 0 5px;
}
footer .footer-box ul li a{
    color: #fff;
}
footer .footer-box form label{
    font-size: 0.8em;
}
footer .footer-box form input{
    margin-bottom: 10px;
}
footer .footer-box form button{
    margin-top: 10px;
}
footer .footer-box form .flex{
    gap: 20px;
}
.fa-instagram{ 
    background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  border-radius: 8px;
    line-height: 0.8em;
}
.fa-youtube{
    background: #CD201F;
    border-radius: 8px;
    line-height: 1.15em;
    font-size: 0.6em;
    position: relative;
    top: -5px;
    padding: 1px 1px 0px 1px;
    border: 3px solid #fff;
}
.fa-facebook-f{
    background: #3b5998;
    border-radius: 8px;
    line-height: 1.1em;
    font-size: 0.55em;
    position: relative;
    top: -5px;
    padding: 4px 7px 0px 7px;
    border: 3px solid #fff;
}
footer .strip{
    background-color: #000;
    min-height: 50px;
}
footer .strip.bottom{
    text-align: right;
    font-size: 2em;
    padding-top: 10px;
}
footer .strip.bottom ul{
    display: flex;
    justify-content: right;
    gap: 10px;
}
footer .strip.bottom li{
    list-style: none;
    display: inline-block;
}
footer .strip.bottom li a{
    color: #fff;
}
footer .strip.bottom li .fa-instagram{
    top: 0px;
    font-size: 1.1em;
}
footer .strip.bottom li .fa-youtube{
    top: -5px;
    padding: 1px 1px 1px 1px;
}
footer .strip.bottom li .fa-facebook-f{
    padding: 2px 5px 0px 5px;
    top: -4px;
    font-size: 0.65em;
}
footer .fa-brands{
    transition: all 1000ms ease 0ms;
}
footer .fa-brands:hover{
    color:#2ea3f2;
    transition: all 1000ms ease 0ms;
}
footer .bottom-inner{
    padding: 40px 0;
    background-color: rgba(12, 12, 12, 0.92);
}
footer h4{
    color: #fff;
    font-weight: normal;
}
footer .bottom-inner ul li{
    list-style: none;
}
.footer-logo h5{
    color: #fff;
    padding-top: 30px;
    gap: 10px;
    letter-spacing: 1px;
    padding-left: 10px;
}
.footer-logo h5 i{
    position: relative;
    top: 5px;
}
.footer-logo h5 span{
    line-height: 1.5em;
}


section.happy-teams{
    background-color: #f2f2f2;
    border-bottom: 20px solid #edebe9;
    padding: 50px 0;
}
section.happy-teams .container.flex{
    gap: 50px;
}
section.happy-teams h4, section.happy-teams h5{
    font-weight: normal;
}
section.happy-teams .right .flex{
    gap: 20px;
    align-items:start;
}
section.happy-teams .right i{
    font-size: 2em;
    width: 40px;
    color: #00ba28;
    text-align: center;
}
section.happy-teams .right p{
    font-size: 1.2em;
}
section.happy-teams .right p span{
    font-size: 0.8em;
}

section.featured{
    background-color: #f8f6f4;
    padding: 70px 0;
}
section.featured .card{
    margin-top: 40px;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
    overflow: hidden;
    border: 1px solid #d8d8d8;
}
section.featured .card-row{
    gap: 40px;
}

section.hybrid{
    background-color: #f0eeec;
    padding: 70px 0;
}
section.hybrid .block{
    margin-top: 40px;
    background-color: #d7d7d7;
    padding-bottom: 20px;
    overflow: hidden;
}

section.hybrid .card-row{
    gap: 40px;
}
section.hybrid .block a{
    color: #ff6600;
}
section.hybrid .block a:hover{
    text-decoration: underline;
}

section.venue{
    background-color: #e2d4c0;
    padding-bottom: 40px;
}
section.venue .venue-bar{
    background-color: #837c7c;
    padding: 7px 0;
}
section.venue .venue-bar h3{
    color: #fff;
    padding-bottom: 0;
    letter-spacing: 2px;
}
section.venue .text-content{
    margin: 0 auto;
    font-size: 1.1em;
}

section.workplace{
    padding:60px 0;
}
section.workplace .container > .flex{
    gap: 60px;
}

.banner.self-defense img{
    width: 200px;
}

.actvities-list .card{
    border: 1px solid #666666;
    padding: 20px;
}

.about-training h3{
    border:1px solid; padding:20px 10px 20px 10px;
}
/* end common */

/* extras */

.btn i{
    opacity: 0;
    position: relative;
    left: -1.5em;
    transition: all 500ms ease 0ms;
}
.btn:hover i{
    opacity: 1;
    left: 0;
    transition: all 500ms ease 0ms;
}
.btn span{
    position: relative;
    left: 1.5em;
    transition: all 200ms ease 0ms;
}
.btn:hover span{
    left: 0;
    transition: all 200ms ease 0ms;
}

.program-info i{
    font-size: 3em;
    margin-bottom: 20px;
}
.bordered{
    border: 1px solid #eee; 
    padding:20px
}


section.hybrid.activites .block{
    padding-bottom: 39%;
}
.flip-card p{
    padding-top: 20px;
    padding-bottom: 40px;
}
.flip-card h4{
    padding-bottom: 10px;
}
.flip-card-front span{
    color:#2ea3f2;
    text-decoration: underline;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    width: 33.33%;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    cursor: pointer;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: #2ea3f2;
    transform: rotateY(180deg);
    padding: 45px 30px;
  }


  .card-table{
    width: 100%;
    position: relative;
    font-size: 0.8em;
    overflow-x: auto;
    border: 1px solid #eee;
    padding: 15px 10px;
    background-color: #f1f1f1;
    border-radius: 10px;
    overflow: hidden;
  }
  .card-table .table-warp{
    width: 100%;
    overflow-x: auto;
  }
  .card-table table{
    margin-top: 2px;
  }
  .card-table table td{
    padding: 5px;
  }





/* end extras */



/* Slick Slider */
.slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus{ outline: none; }
.slick-list.dragging{ cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track{ position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after{ display: table; content: ''; }
.slick-track:after{ clear: both; }
.slick-loading .slick-track{ visibility: hidden; }
.slick-slide{ display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide{ float: right; }
.slick-slide img{ display: block; }
.slick-slide.slick-loading img{ display: none; }
.slick-slide.dragging img{ pointer-events: none; }
.slick-initialized .slick-slide{ display: block; }
.slick-loading .slick-slide{ visibility: hidden; }
.slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }

.slick-loading .slick-list
{
    background: #fff url('../images/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('../webfonts/slick.eot');
    src: url('../webfonts/slick.eot?#iefix') format('embedded-opentype'), url('../webfonts/slick.woff') format('woff'), url('../webfonts/slick.ttf') format('truetype'), url('../webfonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}
.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}
.slick-dots
{
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li
{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* Slick Slider End */