@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
html,
body {
    width: 100%;
    height: 100%;
}

html {
    font-size: 16px;
}

body {
    min-width: 300px;
    position: relative;
    background-color: #000;
    color: #FFF;
    font-family: 'PT Sans Narrow', sans-serif;
    font-style: normal;
    font-weight: 400;
    /*normal 400, bold 700*/
    font-size: 62.5%;
    /*10px*/
    line-height: 1.4;
    overflow: auto;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #FFF;
    text-decoration: none;
}

.container {
    width: 100%;
    min-width: 300px;
}

.main-menu-mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 100;
}

body.open .main-menu-mask {
    display: block;
}

.header {
    position: relative;
    display: block;
    width: 100%;
    min-height: 150px;
    background-color: #000;
    z-index: 10;
    border-bottom: 4px solid #12FFFF;
    overflow: visible;
    z-index: 10000;
}

.header:after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 60px;
    top: 100%;
    left: 0;
    background: url('../images/blue-2.png') repeat-x left top;
    background-size: auto 100px;
    z-index: 10;
}

.header-wrapper {
    display: inline-block;
    width: 100%;
}

.header-logo-container {
    width: 100%;
    overflow: hidden;
}

.header-logo,
.logo {
    display: block;
    float: right;
    margin: 50px 50px 0 0;
}

.header-logo img,
.logo img {
    width: auto;
    height: 120px;
}

.main-menu-container {
    float: left;
    padding: 10px 0 20px 50px;
    margin-top: -50px;
}

.main-menu-button {
    display: none;
    position: absolute;
    right: 25px;
    top: 18px;
    width: 32px;
    cursor: pointer;
}

.main-menu-button span {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 6px;
    background-color: #12ffff;
}

.main-menu-close {
    display: none;
    width: 100%;
    height: 60px;
    background: url('../images/site/main-menu-close@2x.png') no-repeat 88% 20px;
    background-size: 20px 20px;
    cursor: pointer;
}

.main-menu>ul>li {
    float: left;
    border: 1px solid #12FFFF;
    border-right: 0;
}

.main-menu>ul>li:last-child {
    border-right: 1px solid #12FFFF;
}

.main-menu li a {
    display: block;
    color: #12FFFF;
    padding: 5px 15px;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: 5px;
    text-decoration: none;
    text-transform: uppercase;
}

.lang-ch .main-menu li a {
    padding: 5px 30px;
}

.main-menu li:hover,
.main-menu li.active,
.main-menu li.active-parent,
.main-menu li.current-menu-item {
    background-color: #00b6cd;
}

.main-menu li:hover a,
.main-menu li.active a,
.main-menu li.current-menu-item a {
    color: #b1e021;
}

.main-menu li:hover ul li a {
    color: #4d4d4f;
    ;
}

.main-menu ul li ul {
    float: left;
    display: none;
    /* left: 0;
  top: 35px; */
    width: 17%;
    /* min-width: 120px; */
}

.main-menu ul li:hover ul {
    display: block;
}

.main-menu ul ul li {
    display: block;
    padding: 0;
}

.main-menu ul ul li a {
    display: block;
    padding: 2px 25px;
    color: #2F86A1;
    border-bottom: 1px solid #2F86A1;
}

.main-menu ul ul li a:last-child {
    border-bottom: 0;
}

.main-menu ul li ul li:hover a,
.main-menu ul li ul li.active a,
.main-menu ul li ul li.current-menu-item a {
    color: #FFF;
    background-color: #2F86A1;
}

.main-menu ul li:hover .drop-down {
    display: none;
    /*block;*/
    padding: 24px 50px;
}

.drop-down {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    margin-top: -20px;
    border-top: 20px solid #000;
    background-color: rgb(153, 202, 60);
    background-color: rgba(153, 202, 60, 0.8);
    z-index: 100;
}


/*
.drop-down:before {
  position: absolute;
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background-color: #12FFFF;
}*/

span.triangle {
    position: absolute;
    display: none;
    height: 25px;
    z-index: 200;
}

li:hover span.triangle {
    /*display: block;*/
}

span.triangle:after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 25px 25px 25px;
    border-color: transparent transparent #8cc63f transparent;
    transform: translateX(-50%);
}

.mobile-menu-button,
.mobile-search-button,
.mobile-menu-wrapper {
    display: none;
}

.non-mobile-view .mobile-menu-wrapper {
    display: none;
}

.non-mobile-view .mobile-menu-wrapper.mobile-menu-open {
    display: none !important;
}

.mobile-view .mobile-menu-wrapper.mobile-menu-open {
    display: block !important;
}

.language-switcher {
    position: absolute;
    top: 50px;
    left: 50px;
}

.language-switcher li {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    padding: 0 7px;
    border-right: 1px solid #12FFFF;
}

.language-switcher li.lang-en {
    padding: 1px 9px;
}

.language-switcher li:last-child {
    border-right: none;
}

.language-switcher li:first-child {
    padding-left: 0;
}

.language-switcher a {
    color: #12FFFF;
    font-size: 1.6em;
    line-height: 1.6;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
}

.language-switcher li.lang-ch a {
    position: relative;
    top: -2px;
    font-size: 1.4em;
}

.language-switcher li.active,
.language-switcher li:hover {
    background-color: #000;
}

.language-switcher li.active a,
.language-switcher li:hover a {
    color: #FFF;
}

.footer {
    position: relative;
    width: 100%;
    background-color: #000;
    border-top: 2px solid rgba(18, 255, 255, 1)
}

.footer-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: auto;
    min-height: 60px;
}

.copyright {
    display: table-cell;
    width: 100%;
    padding-right: 50px;
    text-align: right;
    font-size: 1.6em;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    vertical-align: middle;
}

.content {
    position: relative;
}

.section {
    position: absolute;
    width: 100%;
    min-height: 100%;
    height: auto;
    left: 0;
    top: 0;
}

.section .section-wrapper {
    width: 87%;
    max-width: 1500px;
    margin: auto;
    overflow: hidden;
}


/** NEWS **/

#news .header:after {
    background-image: none;
}

#news .banner {
    width: 100%;
    height: 0;
    padding-bottom: 32%;
    background: url(../images/news-banner.jpg) no-repeat center center;
    background-size: cover;
}

#news .page-heading {
    width: 80%;
    max-width: 900px;
    font-size: 4em;
    color: #99CA3C;
    /*#3ffff4;*/
    text-align: center;
    letter-spacing: 1em;
    margin: 40px auto;
}

#news .page-heading .ch {
    letter-spacing: 0.4em;
    border-left: 1px solid #99CA3C;
    /*#3ffff4;*/
    padding-left: 0.5em;
    margin-left: -0.5em;
}

#news .section-1 {
    position: relative;
    background: url(../images/news-bg.jpg) no-repeat left top;
    background-size: cover;
}

#news .content-block-container {
    display: none;
    text-align: center;
    padding-bottom: 20px;
}

#news .content-block-container.active {
    display: block;
}

.news-photo-1-1 {
    background: url(../images/news-photo-1-1.jpg) no-repeat center;
    background-size: cover;
}

.news-photo-2-2 {
    background: url(../images/news-photo-2-2.jpg) no-repeat center;
    background-size: cover;
}

.news-photo-3-1 {
    background: url(../images/news-photo-3-1.jpg) no-repeat center;
    background-size: cover;
}

.news-photo-3-2 {
    background: url(../images/news-photo-3-2.jpg) no-repeat center;
    background-size: cover;
}

.news-photo-3-3 {
    background: url(../images/news-photo-3-3.jpg) no-repeat center;
    background-size: cover;
}

#news .content-block-title {
    font-size: 2.5em;
    letter-spacing: 15px;
    color: #B1E020;
    /*#3ffff4;*/
    margin-bottom: 20px;
}

#news .content-block-text p {
    font-size: 1.2em;
    line-height: 1.8;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

#news .news-popup .content-block-title {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 2.8em;
    letter-spacing: 10px;
    color: #ffff54;
    padding: 10px 0;
    margin-bottom: 0;
}

#news .news-popup .content-block-title.valigncentre {
    position: absolute;
    width: 100%;
    background-color: transparent;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.news-popup-content {
    display: none;
}

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

.popup-content {
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 850px;
    height: auto;
    min-height: 200px;
    text-align: left;
    padding: 0;
    margin: 30px;
    background-color: #000;
    border: 2px solid #3ffff4;
}

.popup-content-wrapper {
    position: relative;
    background: #000;
    padding: 0;
    width: auto;
    overflow: hidden;
}

.popup-content img {
    max-width: 100%;
    height: auto;
}

.popup-image {
    width: 100%;
    height: 380px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.popup-bottom {
    padding: 40px 50px 55px 50px;
    overflow: hidden;
}

.popup-heading {
    width: 50%;
    float: left;
    font-size: 4em;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #ffff54;
    background-image: none;
}

.popup-text {
    width: 50%;
    float: right;
}

.popup-content p {
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: 1.7;
    color: #FFF;
    margin: 0;
    background-image: none;
}

.mfp-close-btn-in .mfp-close {
    opacity: 1;
    top: -18px !important;
    font-family: sans-serif;
    font-size: 3.5em;
    font-weight: 200;
    color: #FFF !important;
    right: -20px;
    border-radius: 100%;
    border: 2px solid #FFF;
    width: 35px;
    height: 35px;
    background-color: #3ffff4;
    line-height: 0.5;
    padding-bottom: 5px;
}


/*
#news .content-block {
    display: block;
    text-align: left;
    background-color: rgba(0,0,0,0.5);
    padding: 25px 25px;
    margin: 0 auto 20px;
}
#news .block-left {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
#news .block-right {
  display: inline-block;
  vertical-align: top;
  width: 74%;
  padding: 0 20px;
}


#news .block-right .heading {
  font-size: 1.8em;
  letter-spacing: 8px;
  color: #3ffff4;
  margin-bottom: 15px;
}
#news .block-right p {
  font-size: 1.15em;
  line-height: 1.8;
  letter-spacing: 5px;
  margin-bottom: 20px;
}
*/

#news .pagination {
    display: block;
    width: 100%;
    text-align: left;
    padding: 30px;
}

#news .pagination span {
    font-size: 1.2em;
    color: #3ffff4;
    padding: 2px 5px;
    margin-right: 5px;
    cursor: pointer;
}

#news .pagination .page-link {
    position: relative;
    border: 1px solid #3ffff4;
}

#news .pagination .page-link.active:before {
    display: block;
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 19px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.5);
}


/** CATEGORY */

#category .section {
    position: relative;
}

#category .section .section-wrapper {
    width: 100%;
    max-width: 100%;
    background-color: #FFF;
}

#category .header:after {
    background-image: none;
}


/* #category .content {
  min-height: 0 !important;
} */

#category .page-heading {
    font-size: 3em;
    color: #039aa1;
    letter-spacing: 22px;
    padding: 20px 0 0 100px;
    /* padding: 40px 0 70px 100px;
  margin: 0 0 50px 0; */
    background-color: #fff;
}

#category .page-heading .ch {
    letter-spacing: 0.4em;
    border-left: 1px solid #039aa1;
    padding-left: 0.5em;
    margin-left: -0.5em;
}

#category .section-1 {
    background-color: #000;
}

#category .content-block {
    position: relative;
    width: 100%;
    height: 0;
    /*540px;*/
    padding-bottom: 37%;
    border-bottom: 1px solid #12FFFF;
    margin-top: 60px;
    background-color: #FFFFFF;
    background: #FFFFFF;
    /* background: url(../images/category-bg.jpg) no-repeat center bottom;
  background-size: 100% auto; */
}

html.lang-en #category .content-block {
    margin-top: 0;
}

.category-link {
    position: absolute;
    bottom: -4%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.ccc-block-mobile {
    display: none;
}

.ccc-block {
    position: relative;
}

.ccc-mask {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: url('../images/mask.png') no-repeat left bottom;
    background-size: 2048px auto;
}

.cl-1 {
    left: -2.5%;
    bottom: -6%;
    width: 18%;
    background-image: url('../images/s/cat-others.png');
    z-index: 10;
}

.cl-2 {
    left: 9%;
    width: 14%;
    background-image: url('../images/s/cat-patient-1.jpg');
    z-index: 9;
}

.cl-3 {
    left: 11%;
    bottom: -6%;
    width: 30.5%;
    background-image: url('../images/s/cat-senior.png');
    z-index: 10;
}

.cl-4 {
    left: 35%;
    bottom: -9%;
    width: 14.5%;
    background-image: url(../images/s/cat-sports.png);
    z-index: 9;
}

.cl-5 {
    left: 39%;
    bottom: -7%;
    width: 35.5%;
    background-image: url('../images/s/cat-pro.png');
    z-index: 8;
}

.cl-6 {
    left: 59.5%;
    bottom: -6%;
    width: 30.3%;
    background-image: url('../images/s/cat-pregnant.png');
    z-index: 7;
}

.cl-7 {
    left: 79%;
    bottom: -3.5%;
    width: 25%;
    background-image: url('../images/s/cat-children.png');
    z-index: 10;
}

.cl-1.active {
    background-image: url('../images/s/cat-others-hover.png');
}

.cl-2.active {
    background-image: url('../images/s/cat-patient-hover-1.jpg');
}

.cl-3.active {
    background-image: url('../images/s/cat-senior-hover.png');
}

.cl-4.active {
    background-image: url('../images/s/cat-sports-hover.png');
}

.cl-5.active {
    background-image: url('../images/s/cat-pro-hover.png');
}

.cl-6.active {
    background-image: url('../images/s/cat-pregnant-hover.png');
}

.cl-7.active {
    background-image: url('../images/s/cat-children-hover.png');
}

.cc-links {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110%;
    z-index: 100;
}

.cc-link {
    display: block;
    position: absolute;
    height: 100%;
    bottom: 0;
}

.cc-link#cl-1 {
    left: 0;
    width: 12%;
}

.cc-link#cl-2 {
    left: 12%;
    width: 10%;
}

.cc-link#cl-3 {
    left: 22%;
    width: 14%;
}

.cc-link#cl-4 {
    left: 36%;
    width: 10%;
}

.cc-link#cl-5 {
    left: 46%;
    width: 20%;
}

.cc-link#cl-6 {
    left: 66%;
    width: 17%;
}

.cc-link#cl-7 {
    left: 83%;
    width: 17%;
}

.cl-hidden {
    display: none;
}

.category-link span {
    position: absolute;
    width: 1.5em;
    font-size: 1.8em;
    color: #039aa1;
    letter-spacing: 0;
    padding-left: 3px;
    padding-bottom: 50px;
    line-height: 1.4;
    border-left: 1px solid #039aa1;
}

.category-link.cl-1 span {
    bottom: 77%;
    left: 63%;
    /* padding-bottom: 2%; */
}

.category-link.cl-2 span {
    bottom: 68%;
    left: 76%;
    line-height: 1.2;
    padding-bottom: 10px;
}

.category-link.cl-3 span {
    bottom: 72%;
    left: 62%;
    /* padding-bottom: 2.5%; */
}

.category-link.cl-4 span {
    bottom: 75%;
    left: 50%;
    /* padding-bottom: 1.5%; */
}

.category-link.cl-5 span {
    bottom: 70%;
    left: 37%;
    /* padding-bottom: 2%; */
}

.category-link.cl-6 span {
    bottom: 45%;
    left: 45%;
    /* padding-bottom: 2.5%; */
}

.category-link.cl-7 span {
    bottom: 70%;
    left: 45%;
    /* padding-bottom: 2.5%; */
}

html.lang-en .category-link span {
    width: auto;
    padding-bottom: 0;
    border-left: 0;
    border-bottom: 1px solid #039aa1;
    margin-left: 5%;
    margin-bottom: -10%;
    font-size: 2.4em;
    letter-spacing: 1px;
    /* transform: rotate(90deg);
  transform-origin: left top 0; */
}

@media (max-width:1600px),
(max-device-width:1600px) {
    html.lang-en .category-link span {
        margin-bottom: -4%;
    }
}

html.lang-en .category-link span:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 50px;
    border-left: 1px solid #039aa1;
}

html.lang-en .category-link.cl-1 span {
    left: 50%;
    bottom: 90%;
}

html.lang-en .category-link.cl-2 span {
    bottom: 90%;
    left: 57%;
    width: 200px;
}

html.lang-en .category-link.cl-3 span {
    bottom: 83%;
    left: 40%;
}

html.lang-en .category-link.cl-4 span {
    bottom: 90%;
    left: 32%;
    width: 125px;
}

html.lang-en .category-link.cl-5 span {
    bottom: 89%;
    left: 40%;
    width: 205px;
}

html.lang-en .category-link.cl-6 span {
    bottom: 74%;
    left: 42%;
}

html.lang-en .category-link.cl-7 span {
    bottom: 83%;
    left: 50%;
}

.category-bottom {
    width: 100%;
    height: 200px;
    background-color: #000;
}


/** CATEGORY LINKED PAGE **/

#category-2 .section .section-wrapper {
    width: 100%;
    max-width: 100%;
}

#category-2 .section-1 {
    position: relative;
    background: url(../images/category-2-bg.jpg) no-repeat top left;
    background-size: cover;
    overflow: hidden;
}

#category-2 .content-block {
    position: relative;
    float: right;
    width: 80%;
    max-width: 1000px;
    margin: 80px auto 40px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px 0 0 0;
}

#category-2 .content-block-text {
    padding: 0 20px;
}

#category-2 .content-block-title {
    width: 100%;
    padding: 20px 0;
    letter-spacing: 11px;
    /* 15px */
    color: #3ffff4;
    margin-bottom: 0;
    text-align: right;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#category-2 .content-block-title-mobile {
    display: none;
}

#category-2 .content-block-title .title-left {
    width: 70%;
    float: left;
    padding-right: 30px;
    font-size: 3em;
    color: #b1e021;
    text-align: left;
    padding-left: 30px;
}

#category-2 .content-block-title .title-right {
    width: 30%;
    float: right;
    font-size: 2.5em;
    text-align: right;
    padding-right: 30px;
}

.category-body {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 72.44%;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.body-others {
    background-image: url(../images/site/body-others@2x.png);
}

.body-elderly {
    background-image: url(../images/site/body-elderly@2x.png);
}

.body-patients {
    background-image: url(../images/site/body-patients@2x.png);
}

.body-sports-injury {
    background-image: url(../images/site/body-sports-injury@2x.png);
}

.body-occupational-hazards {
    background-image: url(../images/site/body-occupational-hazards@2x.png);
}

.body-pregnants-housewives {
    background-image: url(../images/site/body-pregnants-housewives@2x.png);
}

.body-kids {
    background-image: url(../images/site/body-kids@2x.png);
}

html.lang-en .body-others {
    background-image: url(../images/site/body-others-en@2x.png);
}

html.lang-en .body-elderly {
    background-image: url(../images/site/body-elderly-en@2x.png);
}

html.lang-en .body-patients {
    background-image: url(../images/site/body-patients-en@2x.png);
}

html.lang-en .body-sports-injury {
    background-image: url(../images/site/body-sports-injury-en@2x.png);
}

html.lang-en .body-occupational-hazards {
    background-image: url(../images/site/body-occupational-hazards-en@2x.png);
}

html.lang-en .body-pregnants-housewives {
    background-image: url(../images/site/body-pregnants-housewives-en@2x.png);
}

html.lang-en .body-kids {
    background-image: url(../images/site/body-kids-en@2x.png);
}

.cbl-1 {
    position: absolute;
    right: 16%;
    bottom: 7.6%;
    display: block;
    width: 36px;
    height: 36px;
    background: transparent;
}


/** SYNDROME **/

#syndrome .section .section-wrapper {
    width: 100%;
    max-width: 100%;
}

#syndrome .header:after {
    background-image: none;
}

#syndrome .page-heading {
    font-size: 3em;
    color: #3ffff4;
    letter-spacing: 22px;
    margin: 20px 0 0 50px;
}

#syndrome .page-heading .ch {
    letter-spacing: 0.4em;
    border-left: 1px solid #3ffff4;
    padding-left: 0.5em;
    margin-left: -0.5em;
}

#syndrome .section-1 {
    position: relative;
    /*absolute;*/
    background: url(../images/syndrome-2-bg.jpg) no-repeat left bottom;
    background-size: cover;
}

#syndrome .content-block {
    position: relative;
    /*absolute;*/
    float: right;
    width: 80%;
    max-width: 920px;
    margin: 20px auto;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 25px 50px;
    right: 80px;
}

#syndrome .block-left {
    display: inline-block;
    vertical-align: top;
    width: 55%;
}

#syndrome .block-right {
    display: inline-block;
    vertical-align: top;
    width: 44%;
}

#syndrome .content-block-title.ch {
    font-size: 3em;
    letter-spacing: 15px;
    line-height: 1;
    color: #ffff54;
    /*#3ffff4;*/
}

#syndrome .content-block-title.en {
    font-size: 2.5em;
    letter-spacing: 10px;
    color: #ffff54;
    /*#3ffff4;*/
    padding-left: 97px;
    margin-bottom: 20px;
}

#syndrome .block-left .heading {
    font-size: 2em;
    letter-spacing: 8px;
    color: #b1e021;
    /*#3ffff4;*/
}

#syndrome .block-left p {
    font-size: 1.4em;
    line-height: 1.8;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

#syndrome .block-left ul {
    list-style: disc outside;
    margin-bottom: 20px;
}

#syndrome .block-left li {
    font-size: 1.4em;
    line-height: 1.8;
    letter-spacing: 5px;
    margin-left: 1em;
    margin-top: 0.8em;
}

.syndrome-block {
    display: inline-block;
    vertical-align: top;
    width: 33%;
}

.syndrome-block {
    list-style: disc outside;
}

.syndrome-block li {
    font-size: 1.5em;
    line-height: 1.8;
    letter-spacing: 5px;
    margin-left: 1em;
    margin-top: 0.5em;
}

html.lang-en .syndrome-block li {
    letter-spacing: 0.5px;
}


/** HOME **/

#home .container {
    /* overflow: hidden; */
    /*min-width: 0;*/
}


/*
.banner-slider-container {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-bottom: 50%;
}*/

.banner-slider-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* height: 100% !important; */
}

.banner-slider-container .bx-wrapper,
.banner-slider-container .bx-viewport,
.banner-slider,
.banner-slider .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100% !important;
}

.banner-slider .slide {
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: cover;
}

.banner-slider-container .bx-wrapper .bx-pager {
    bottom: 20px;
}


/** ABOUT **/

#about .section {
    position: relative;
}

#about .main {
    background: url(../images/about-bg.jpg) no-repeat 0 -10px;
    background-size: cover;
    background-position: 15% -50px;
}

#about .section-1 {
    position: relative;
    padding-bottom: 20px;
    overflow: hidden;
}

#about .section-1 .section-wrapper {
    width: 100%;
    max-width: 100%;
}

#about .content-block {
    position: relative;
    float: right;
    width: 80%;
    /* 50% */
    max-width: 1000px;
    /* 700 */
    margin: 160px 0 40px 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px 60px;
}

#about .content-block-title {
    font-size: 2.5em;
    letter-spacing: 15px;
    color: #B1E020;
    /*#3ffff4;*/
    margin-bottom: 20px;
}

#about .content-block-title .heading-en {
    padding-right: 5px;
    border-right: 1px solid #B1E020;
}

#about .content-block-text p {
    font-size: 1.8em;
    line-height: 1.6;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

#about .about-popup .content-block-title {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 2.8em;
    letter-spacing: 10px;
    text-align: center;
    color: #ffff54;
    padding: 10px 0;
    margin-bottom: 0;
}

.profile-photo {
    position: relative;
}

.overlay {
    position: absolute;
    bottom: 1%;
    z-index: 2;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    padding: 10px 10px 5px 10px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overlay.overlay-top {
    bottom: unset;
    top: 0%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.content-blocks {
    width: 102.3%;
    padding-bottom: 30px;
    overflow: hidden;
}

.content-block-1c {
    position: relative;
    float: left;
    width: 31.1%;
    height: 0;
    padding-bottom: 31.1%;
    margin: 0 2.23% 2.23% 0;
}

.content-block-2c {
    position: relative;
    float: left;
    width: 64.43%;
    height: 0;
    padding-bottom: 31.1%;
    margin: 0 2.23% 2.23% 0;
}

.content-block-3c {
    position: relative;
    float: left;
    width: 100%;
    height: 0;
    padding-bottom: 31.1%;
    margin: 0 2.23% 2.23% 0;
}

.about-photo-1-1 {
    background: url(../images/about-photo-1-1.jpg) no-repeat center;
    background-size: cover;
}

.about-photo-1-2 {
    background: url(../images/about-photo-1-2.jpg) no-repeat center;
    background-size: cover;
}

.about-photo-2-1 {
    background: url(../images/about-photo-2-1.jpg) no-repeat center;
    background-size: cover;
}

.about-photo-2-2 {
    background: url(../images/about-photo-2-2.jpg) no-repeat center;
    background-size: cover;
}

.about-photo-2-3 {
    background: url(../images/about-photo-2-3.jpg) no-repeat center;
    background-size: cover;
}

.about-photo-3-1 {
    background: url(../images/about-photo-1-2.jpg) no-repeat center;
    background-size: cover;
}

.about-popup-content {
    display: none;
}

#about .section-3 {
    padding-bottom: 80px;
}

#about .section-3 .content-block-title {
    padding: 0 30px;
    margin-bottom: 15px;
}

.about-profile {
    padding: 30px;
    border-top: 2px solid #12FFFF;
    border-bottom: 2px solid #12FFFF;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
}

.image-block {
    display: inline-block;
    position: relative;
    transform: translateY(60%);
    text-align: right;
    width: 43%;
    margin-right: 2%;
}

.image-block img {
    width: 100%;
    max-width: 529px;
}

#about .content-block {
    width: 55%;
}

.profile-row {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 50px;
}

.profile-row:last-child {
    margin-bottom: 0;
}

.profile-left {
    display: table-cell;
    width: 300px;
    padding-right: 40px;
    vertical-align: top;
}

.profile-name {
    margin-bottom: 15px;
    font-size: 2.2em;
    font-weight: 800;
}

.profile-qualification {
    font-size: 1.6em;
    line-height: 1.6;
}

.profile-right {
    display: table-cell;
    vertical-align: top;
}

.profile-details {
    font-size: 1.6em;
    line-height: 1.6;
}


/** CONTACT **/

#contact .content {
    min-height: 700px;
}

#contact .section-1 {
    position: absolute;
    height: 100%;
    background: url(../images/contact-bg.jpg) no-repeat center -60px;
    background-size: cover;
}

.contact-block {
    position: absolute;
    width: 80%;
    max-width: 1100px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 60px;
    left: 0;
    bottom: 20px;
}

.contact-heading {
    font-size: 3em;
    letter-spacing: 22px;
    color: #3ffff4;
    padding-left: 30px;
    margin-bottom: 10px;
}

.contact-heading .heading-en {
    border-right: 1px solid #3ffff4;
    padding-right: 5px;
}

.contact-heading-mobile {
    display: none;
}

.contact-content {
    width: 100%;
    padding: 20px 0 30px 0;
    border-left: 0;
    border-right: 0;
    clear: both;
    text-align: center;
}

.contact-row span.contact-detail {
    font-size: 1.6em;
}

.contact-row-address,
.contact-row-phone {
    margin-bottom: 15px;
}

.contact-row .contact-detail {
    display: inline-block;
    vertical-align: middle;
    padding-left: 75px;
    background-repeat: no-repeat;
    background-position: 30px center;
    background-size: 33px auto;
    vertical-align: middle;
}

.contact-row-address .contact-detail {
    background-image: url('../images/icon-address-blue@2x.png');
    background-position: 30px top;
}

.contact-row-phone .contact-detail {
    background-position: 30px 3px;
    background-image: url('../images/icon-phone-blue@2x.png')
}

.contact-row-email .contact-detail {
    background-image: url('../images/icon-email-blue@2x.png')
}

.map {
    cursor: pointer;
}

.small {
    display: inline-block;
    font-size: 0.9em;
    margin-right: 10px;
}

.large {
    display: inline-block;
    font-size: 2em;
}

.whatsapp,
.facebook {
    width: 16px;
    height: auto;
}

.contact-map,
.contact-text {
    display: inline-block;
    vertical-align: middle;
}

.contact-map.map-newtab {
    display: none;
}

.contact-map {
    position: relative;
    width: 25%;
    max-width: 250px;
    text-align: center;
}

.contact-map:before {
    position: absolute;
    content: '';
    display: block;
    left: -11%;
    bottom: -17.3%;
    width: 33%;
    height: 100%;
    background: url('../images/zoom.png') no-repeat left bottom;
    background-size: 100% auto;
    z-index: 10;
}

.contact-map img {
    max-width: 90%;
}

.contact-text {
    width: 74%;
    text-align: left;
}

.main-menu {
    float: left;
}

.contact-whatsapp,
.contact-facebook {
    display: block;
    float: left;
    margin-top: -3px;
    margin-left: 30px;
}

.contact-whatsapp img,
.contact-facebook img {
    width: 40px;
    height: 40px;
}

.contact-whatsapp span,
.contact-whatsapp img,
.contact-facebook span,
.contact-facebook img {
    display: inline-block;
    vertical-align: middle;
}

.contact-whatsapp span,
.contact-facebook span {
    font-size: 1.8em;
    padding-left: 10px;
}

.section-new {
    max-width: 1600px;
    margin: 0 auto;
    width: 90%;
}

.event-intros,
.event-intros-large {
    overflow: hidden;
}

.event-intro {
    display: block;
    float: left;
    width: 30%;
    height: 0;
    padding-bottom: 30%;
    margin: 0 1.6% 3.2% 1.6%;
    position: relative;
}

.event-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.event-caption {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 20px;
    font-size: 22px;
    color: #fdff54;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    z-index: 10;
}

#events .content-block-title {
    padding: 50px 20px;
    font-size: 3em;
    letter-spacing: 15px;
    color: #B1E020;
    /*#3ffff4;*/
    text-align: center;
}

#event-intro-9 .event-image {
    background-position: center 20%;
}

.social-icon {
    position: fixed;
    z-index: 99999;
    right: 10px;
    right: 1;
    bottom: 0;
    padding: 8px 30px;
    border-radius: 15px 15px 0 0;
    background-color: #35b6cd;
}

.social-icon .contact-whatsapp {
    margin: 0!important;
}

#events .content {
    background-color: #000;
}

a.contact-row-address {
    position: relative;
    top: 11px;
    margin-left: 30px;
}

.contact-row-address img {
    width: 35px;
}

.contact-row span.contact-detail {
    width: 70%;
    max-width: 340px;
}


/*@media (min-width:801px) {*/

.event-intro {
    width: 100%;
    float: none;
    margin: 0;
}

.event-caption {
    background: none;
    margin-left: 66%;
    width: 33%;
    padding: 30px 50px;
    position: absolute;
    right: 0;
    top: 50%;
    height: auto;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: left;
    font-size: 40px;
    line-height: 1.2;
    color: #fff;
}

.event-intro .event-image {
    width: 66%;
}

.event-intros-large:nth-child(even) .event-intro {
    width: 100%;
    float: none;
    margin: 0;
}

.event-intros-large:nth-child(even) .event-image {
    width: 100%;
    background-size: 66%;
}

.event-intros-large:nth-child(even) .event-image {
    right: 0;
    left: auto;
    width: 100%;
    background-position: right;
}

.event-intros-large .event-image:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0)85%, rgba(0, 0, 0, 1) 100%);
}

.event-intros-large:nth-child(even) .event-image:before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 35%, rgba(255, 255, 255, 0) 55%);
}

.event-intros-large:nth-child(even) .event-caption {
    margin-left: 0;
}

.event-intros-large .event-intro:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: rgb(0, 0, 0);
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 10%, rgba(3, 0, 0, 0) 50%, rgba(1, 0, 0, 0.2) 75%, rgba(0, 0, 0, 1) 100%);
}

.event-image:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0)85%, rgba(0, 0, 0, 1) 100%);
}

#events .section-new {
    width: 100%;
    max-width: none;
}

.event-intro {
    display: none;
}

.event-intro:first-child {
    display: inherit;
}

@media (max-width:1500px) {
    .event-caption {
        font-size: 30px;
        height: 60px;
    }
    .contact-whatsapp span,
    .contact-facebook span {
        display: none;
    }
}

@media (max-width:1200px) {
    .event-caption {
        font-size: 24px;
    }
}

@media (max-width:800px) {
    /* .event-intro { width:41%;margin: 0 3% 6% 3%;padding-bottom:41%;}*/
    #events .section-new {
        width: 100%;
    }
    .event-intro {
        width: 100%;
        margin: 1% 0;
        padding-bottom: 40%;
    }
    .event-caption,
    .event-caption {
        padding: 10px 15px;
    }
}

@media (max-width:700px) {
    .banner-slider-container {
        padding-bottom: 100%;
    }
}

@media (max-width:500px) {
    .event-caption {
        font-size: 18px;
    }
    /*.event-intros, .event-intros-large {max-width:300px;margin:0 auto;}
  .event-intro { width:100%;padding-bottom:100%;float:none;margin:0 0 30px 0;}
  #events .content-block-title {
    padding: 32px 20px;
    font-size: 2.4em;
  }
}*/
    @media (max-width:400px) {
        .event-caption {
            font-size: 14px;
            padding: 0px 15px;
        }
    }
    .event-intro {
        padding-bottom: 50%;
    }
    body#events .main {
        background-color: #333;
    }
}

@media screen and (max-width: 1400px) {
    .home-row h2,
    .large-heading {
        font-size: 3.5em;
    }
}

@media screen and (max-width: 1100px) {
    body {
        font-size: 45%;
    }
    .home-row {
        padding-bottom: 35%;
    }
    .hr-content img,
    .about-row .hr-image {
        max-width: 130px;
    }
    .about-row.home-row {
        padding-bottom: 50%;
    }
    .about-row .hr-content {
        transform: translateX(0%)translateY(-50%);
    }
}

@media screen and (max-width: 730px) {
    .home-row {
        padding-bottom: 45%;
        background-size: cover;
    }
    .hr-content img.abc-logo {
        max-width: 80px;
    }
    .hr-image {
        margin: 3% 0 0 3%;
    }
    .home-row {
        padding-bottom: 55%;
    }
    .abc-logo {
        max-width: 100px;
    }
}

@media screen and (max-width: 550px) {
    .about-row.home-row {
        padding-bottom: 87%;
    }
    .hr-content img,
    .about-row .hr-image {
        width: 100px;
    }
    .hr-content img.abc-logo {
        width: 80px;
    }
    .home-row h2 {
        font-size: 3em;
    }
    .large-heading {
        font-size: 1.8em;
    }
}

@media screen and (max-width: 450px) {
    .about-row.home-row {
        padding-bottom: 100%;
    }
    .hr-content img.abc-logo {
        width: 65px;
    }
    .hr-content img,
    .about-row .hr-image {
        width: 75px;
    }
}

.fancybox-iframe,
.fancybox-slide--iframe .fancybox-content {
    background-color: transparent;
}

.fancybox-slide--iframe .fancybox-content {
    position: relative;
    width: 80%;
    height: 0;
    padding-bottom: 44.8%;
}

.fancybox-slide--iframe .fancybox-content iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}