@font-face {
    font-family: ITCFranklinGothicStd-BkCd;
    src: url('../fonts/ITCFranklinGothicStd-BkCd.ttf') format('truetype'),
         url('../fonts/ITCFranklinGothicStd-BkCd.woff') format('woff');
}

@font-face {
    font-family: ITCFranklinGothicStd-Demi;
    src: url('../fonts/ITCFranklinGothicStd-Demi.ttf') format('truetype'),
         url('../fonts/ITCFranklinGothicStd-Demi.woff') format('woff');
}

@font-face {
    font-family: ITCFranklinGothicStd-DmCd;
    src: url('../fonts/ITCFranklinGothicStd-DmCd.ttf') format('truetype'),
         url('../fonts/ITCFranklinGothicStd-DmCd.woff') format('woff');
}

@font-face {
    font-family: ITCFranklinGothicStd-Med;
    src: url('../fonts/ITCFranklinGothicStd-Med.ttf') format('truetype'),
         url('../fonts/ITCFranklinGothicStd-Med.woff') format('woff');
}

html {
    height: 100%;
}

body {
    font-family: 'ITCFranklinGothicStd-BkCd', 'Noto Sans HK' , 'Noto Sans SC', sans-serif;
    font-size: 20px;
    color: #001247;
    margin: 0;
    padding: 70px 0 0 0;
    line-height: normal;
    width: 100%;
    background: #fff;
    min-width: 1400px;
    overflow-x: hidden;
}

.clear {
    zoom: 1;
    clear: both;
    margin: 0;
    padding: 0;
    line-height: 0;
    height: 0;
}

.clear:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    list-style: none;
}

p {
    margin: 25px 0 0 0;
}

* p:first-child {
    margin: 0;
}

a {
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

a:hover {
    opacity: 0.5;
    text-decoration: none;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-weight: bolder !important;
}

h2 {
    font-size: 36px;
    color: #213367;
}

.header {
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #fff;
}

.header .logo {
    margin-top: 16px;
    margin-left: 30px;
}

.header .top-menu {
    position: fixed;
    right: 170px;
    top: 24px;
}

.header .top-menu ul li {
    display: inline-block;
}

.header .top-menu ul li a {
    color: #001247;
    margin-left: 40px;
}

.header .top-menu ul li a:hover {
    color: #0068FF;
    opacity: 1;
}

.header .top-menu ul li a.highlight {
    color: #0068FF;
}

.lang {
    position: fixed;
    right: 30px;
    top: 17px;
}

.lang .dropbtn {
    border: solid 1px #ccc;
    padding: 4px 10px 4px 34px;
    background: url("../images/language.svg") no-repeat;
    background-position: 8px center;
    color: #6C7180;
}

.lang .dropdown-content {
    width: 87px !important;
    min-width: auto;
    color: #6C7180;
}

.menu-popup .col-3 {
    flex: 0 0 24% !important;
    max-width: 24% !important;
}

.menu-popup {
    width: 100%;
    padding: 40px 0;
    background: #fff;
    position: fixed;
    top: -100%;
    left: 0;
    transition: all 0.35s ease 0s;
    opacity: 0;
    font-size: 20px;
    font-weight: bolder;
    z-index: 700;
}

.menu-popup.show {
    top: 70px;
    opacity: 1;
}

.menu-popup-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: -100%;
    background: #fff;
    opacity: 0;
    z-index: 500;
}

.menu-popup-mask.show {
    top: 0;
    opacity: 0.8;
}

.menu-popup h3 {
    font-size: 24px;
}

.menu-popup .container {
    position: relative;
}

.close-menu-popup {
    position: absolute;
    right: 15px;
    top: -5px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    text-decoration: underline;
}

.menu-popup a {
    margin: 10px 0 0 0;
    display: block;
}

.swiper-container.home-banner .swiper-pagination {
    width: 100%;
    left: auto;
    right: 25px;
    bottom: 25px;
    text-align: right;
}

.swiper-container.home-banner .swiper-pagination.style-center {
    text-align: center;
    padding: 0 0 0 20px;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    background: #fff;
    width: 14px;
    height: 14px;
    border-radius: 0;
    cursor: pointer;
    margin: 0 0 0 10px !important;
}

.swiper-pagination.blue .swiper-pagination-bullet, 
.swiper-pagination.blue .swiper-pagination-bullet-active {
    background: #0068FF !important;
}

.swiper-container.home-banner {
    width: 100%;
}

.swiper-slide.blue, .swiper-slide.blue h1 {
    color: #001247 !important;
    text-shadow: none !important;
}

.swiper-slide p {
    font-size: 20px;
}

.swiper-container.home-banner .swiper-slide {
    background-size: 100% auto;
    background-position: center;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    max-height: 600px;
}

.swiper-slide video {
    width: 100%;
    margin-top: -8%;
}

@media screen and (max-width: 1350px) {
    
    .swiper-slide video {
        width: 100%;
        margin-top: 0;
        transform: none;
    }
    
}

.swiper-container.home-banner .swiper-slide h1 {
    font-size: 52px;
    color: #fff;
    text-shadow: 0 0 7px #213367;
    bottom: 0;
    position: absolute;
    margin: 0 15px 50px 50px;
}

.swiper-container.home-banner .swiper-slide h1.subpage {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 52px;
    color: #FFFFFF;
    text-shadow: 0 0 7px #213367;
}

.swiper-container.home-banner .swiper-button-prev {
    background: url("../images/arrow_button_white.svg");
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    transform: rotate(180deg);
}

.swiper-container.home-banner .swiper-button-next {
    background: url("../images/arrow_button_white.svg");
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}

.swiper-container.home-banner.blue .swiper-slide h1 {
    font-size: 52px;
    color: #fff;
    text-shadow: 0 0 7px #213367;
    bottom: 0;
    position: absolute;
    margin-bottom: 50px;
}

.swiper-container.home-banner.blue .swiper-slide h1.subpage {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 52px;
    color: #FFFFFF;
    text-shadow: 0 0 7px #213367;
}

.swiper-container.home-banner.blue .swiper-button-prev {
    background: url("../images/arrow_button.svg");
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    transform: rotate(180deg);
}

.swiper-container.home-banner.blue .swiper-button-next {
    background: url("../images/arrow_button.svg");
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}

.four-services {
    width: 100%;
    background: #FAFBFC;
    padding: 83px 100px 71px 100px;
    text-align: center;
}

.four-services .four-s-img {
    width: 48%;
    margin: 5px;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.four-services .four-s-img img {
    width: 100%;
}

.four-services .four-s-img .title {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    color: #fff;
    padding-top: 20px;
}

.four-services .four-s-img .title a {
    color: #fff;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
}

.four-services .four-s-img .title h4 {
    font-size: 28px;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    margin-bottom: 5px;
}

.four-services .four-s-img .title.title-1 {
    background-color: rgba(91, 132, 203, 0.9);
    transition: all 0.3s ease 0s;
}

.four-services .four-s-img:hover .title.title-1 {
    background-color: rgba(91, 132, 203, 0.7);
}

.four-services .four-s-img .title.title-2 {
    background-color: rgba(72, 134, 190, 0.9);
    transition: all 0.3s ease 0s;
}

.four-services .four-s-img:hover .title.title-2 {
    background-color: rgba(72, 134, 190, 0.7);
}

.four-services .four-s-img .title.title-3 {
    background-color: rgba(59, 81, 119, 0.9);
    transition: all 0.3s ease 0s;
}

.four-services .four-s-img:hover .title.title-3 {
    background-color: rgba(59, 81, 119, 0.7);
}

.four-services .four-s-img .title.title-4 {
    background-color: rgba(149, 163, 186, 0.9);
    transition: all 0.3s ease 0s;
}

.four-services .four-s-img:hover .title.title-4 {
    background-color: rgba(149, 163, 186, 0.7);
}

.knowledge-attitude {
    padding-top: 54px;
}

.knowledge-attitude h2 {
    font-size: 36px;
}

.knowledge-attitude .left-bg {
    background-position: left bottom;
    background-size: 231px auto;
    background-repeat: no-repeat;
}

.knowledge-attitude .right-img {
    width: 301px;
    position: relative;
    z-index: 10;
}

.knowledge-attitude a {
    color: #0068FF;
    margin: 20px 40px 20px 0;
    display: inline-block;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
}

.knowledge-centre {
    width: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-color: #213367;
    background-size: 1480px auto;
    padding: 200px 0 70px 0;
    color: #fff;
    position: relative;
    z-index: 20;
}

.knowledge-centre h2 {
    color: #fff;
    font-size: 36px;
}

.knowledge-centre a {
    color: #fff;
    margin-top: 20px;
    display: inline-block;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
}

.how-can-we-help-you {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    padding: 20px 0;
    position: relative;
}

.how-can-we-help-you h2 {
    font-size: 36px;
}

.how-can-we-help-you .hc-bg-1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 6%;
}

.how-can-we-help-you .hc-bg-2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 6%;
}

.how-can-we-help-you .hc-bg-3 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6%;
}

.how-can-we-help-you a {
    color: #0068FF;
    margin-top: 20px;
    display: inline-block;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
}

.footer {
    background: #f9fbfc;
    padding: 32px 0 32px 0;
    color: #001247;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
    font-size: 20px;
}

.footer a {
    color: #001247;
}

.footer .f-menu {
    display: inline-block;
    vertical-align: top;
    margin: 0 42px 50px 0;
    width: 166px;
}

.f-menu:nth-child(4), .f-menu:nth-child(5) {
    margin: 0 42px 0 0;
}

.footer .f-menu h4 {
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    margin-bottom: 25px;
}

.footer .f-menu.w-200 {
    width: 200px;
}

.pp-text {
    width: 100%;
    font-size: 20px;
}

.copyright {
    background: #213367;
    color: #ADB5CC;
    padding: 15px 0;
    font-size: 16px;
}

.copyright a {
    color: #ADB5CC;
}

.copyright ul li {
    border-right: solid 1px #ADB5CC;
    margin: 0 10px 0 0;
    padding: 0 10px 0 0;
    display: inline-block;
}

.copyright ul li:last-child {
    border-right: none;
    margin: 0;
    padding: 0;
}

.subpage-banner {
    color: #fff;
    text-shadow: 0 0 7px #213367;
    font-size: 20px;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
    position: relative;
    /*max-height: 440px;*/
    overflow: hidden;
}

.subpage-banner .subpage-title {
    bottom: 0;
    left:70px;
    position: absolute;
    margin-bottom: 50px;
    max-width: 540px;
}

.subpage-banner .subpage-title p {
    margin-top: 0;
}

.subpage-banner .container.style2 {
    padding: 0;
    margin: 0;
}

.subpage-banner .container.style2 .subpage-title {
    width: 100%;
    max-width: 100% !important;
    margin-bottom: 0;
    bottom: 47%;
    left:0;
    text-align: center;
    display: block;
    transform: translateY(50%);
}

.subpage-banner.blue {
    text-shadow: none;
    color: #001247;
}

.subpage-banner h1 {
    font-size: 36px;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
}

.half-area {
    width: 100%;
}

/* about promet */
.about-promet-text {
    /* padding: 55px 0; */
    padding: 55px 0 0 0;
    text-align: center;
}

.about-promet-text.why-choose-promet-text {
    margin: 50px 0;
}

.case-studies-text.case-studies-text {
    margin: 40px 0 90px 0;
}

case-studies-text.style2 {
    padding: 105px 0;
}

.about-promet-text.about-text .container {
    max-width: 590px !important;
    min-width: 0;
}

.about-promet-text .container {
    max-width: 720px !important;
    min-width: 0;
}

.about-promet-text.small .container {
    max-width: 620px !important;
    min-width: 0;
    font-size: 24px;
    font-family: 'ITCFranklinGothicStd-Med', sans-serif;
}

.about-promet-text a {
    color: #007bff;
    text-decoration: underline;
}

.blue-text {
    color: #0068FF;
}

.blue-text.underline {
    text-decoration: underline;
}

.about-box {
    max-width: 1320px;
    margin: 100px auto;
    /*padding: 0 100px;*/
    padding: 0;
}

.about-box .about-box-text {
    background: #FAFBFC;
    padding: 80px 140px;
    max-width: 900px;
    min-height: 280px;
    margin: -120px auto 0 auto;
    position: relative;
    z-index: 20;
}

.about-box h3 {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 32px;
    color: #213367;
}

.about-text-underline {
    width: 80px;
    height: 4px;
    background: #0068FF;
}

.about-text-underline.text-center {
    margin: auto;
}

.about-text-underline.gray {
    width: 30px;
    height: 4px;
    background: #ADB5CC;
    margin: 0 auto 8px auto;
}

.about-box p {
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
    font-size: 20px;
    color: #001247;
}

.about-tab {
    text-align: center;
    margin-top: 55px;
}

.about-tab ul li {
    display: inline-block;
}

.about-tab ul li a {
    color: #0068FF;
}

.about-tab .break-line {
    width: 3px;
    height: 18px;
    background: #0068FF;
    margin: 0 10px;
}

.about-commitment-box {
    padding: 40px 0;
    text-align: center;
}

.about-commitment-box.training {
    padding: 0 0 100px 0;
}

.about-commitment-box .ac-box {
    width: 325px;
    max-width: 100%;
    min-height: 320px;
    display: inline-block;
    margin: 6px;
    vertical-align: top;
    background: #FAFBFC;
    border-bottom: solid 5px #213367;
    text-align: center;
    padding: 20px 27px;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
    font-size: 20px;
    color: #001247;
}

.about-commitment-box.training .ac-box {
    min-height: 330px;
}

.about-commitment-box .ac-box h5 {
    margin-top: 25px;
}

.safeguards {
    background: #4886BE;
    padding: 50px 0;
    color: #fff;
    font-size: 36px;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
}

.safeguards .container {
    max-width: 1024px !important;
    min-width: 0;
}

.accreditations-area {
    padding: 30px 0;
}

.accreditations-area .container {
    max-width: 1024px !important;
    min-width: 0;
}

.accreditations-area a {
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    font-size: 20px;
    color: #0068FF;
    margin-top: 20px;
    display: inline-block;
}

.accreditations-area .accreditations-box {
    margin: 100px 0;
}

.accreditations-area .accreditations-box a {
    cursor: pointer;
}

.consultancy-area {
    padding: 100px 100px;
    text-align: center;
}

.consultancy-area a.consultancy-box {
    width: 30%;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.consultancy-area a.consultancy-box:hover {
    opacity: 0.75;
}

a.consultancy-box h3 {
    width: 90%;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 36px;
    color: #fff;
    position: absolute;
    left: 5%;
    top: 42px;
}

.solutions-top {
    background: #FAFBFC;
    padding: 80px 0;
}

.solutions-top a {
    margin-top: 5px;
    display: inline-block;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    font-size: 20px;
    color: #0068FF;
}

.solutions-box {
    padding: 150px 0;
    background: #fff;
}

.solutions-box.color-2 {
    background: #FAFBFC;
}

.solutions-box .sb-box {
    margin: 100px 0;
}

.solutions-box .sb-title {
    border-bottom: solid 4px #ADB5CC;
    margin-bottom: 100px;
    background-size: 100px auto;
    background-position: left 0;
    background-repeat: no-repeat;
    padding: 10px 0 10px 120px;
}

.solutions-box h5 {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 28px;
    color: #213367;
}

.solutions-box h2 {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 52px;
    color: #213367; 
}

.solutions-box .radius-img {
    box-shadow: 0 0 30px 0 rgba(33,51,103,0.46);
    border-radius: 200%;
}

.explore-our-toolbox {
    height: 500px;
    color: #fff;
    background-size: 1680px auto;
    background-position: center;
    text-shadow: 0 0 7px #213367;
    font-size: 20px;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
    position: relative;
}

.explore-our-toolbox h1 {
    display: block;
    width: 100%;
}

.explore-our-toolbox a {
    color: #fff;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
}

.service-package-area {
    margin-bottom: 40px;
}

.service-package {
    margin-top: 90px;
}

.service-package .col {
    padding: 25px;
}

.sp-box {
    min-height: 380px;
    /*min-height: 420px;*/
    padding: 35px;
    /*margin-bottom: 15px;*/
}

.sp-box .sp-img-outer {
    height: 100%;
}

.sp-box .sp-img {
    position: absolute;
    width: 70%;
    left: 0;
    top: 48%;
    transform: translateY(-50%);
    margin: 0;
}

.sp-box ul {
    margin: 25px 0;
}

.sp-box ul li {
    margin: 0 0 0 20px;
    line-height: 20px;
    list-style: disc;
}

.sp-box h3 {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 32px;
    color: #213367;
}

.sp-box.color-1 {
    background: #4572c4;
}

.sp-box.color-2 {
    background: #DEEAFF;
}

.sp-box.color-3 {
    background: #EAF7E1;
}

.sp-box.color-4 {
    background: #70AD47;
}

.sp-box.color-5 {
    background: #04B0F0;
}

.sp-box.color-6 {
    background: #E4F2F7;
}

.sp-box.color-7 {
    background: #F2EDFF;
}

.sp-box.color-8 {
    background: #6766ff;
}

.sp-box .sp-img {
    width: 280px;
    max-width: 100%;
}

.tc-box-area {
    padding: 35px 0 100px 0;
    text-align: center;
}

.tc-box-area .tc-box {
    background: #FAFBFC;
    max-width: 340px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 15px;
}

.tc-box-area .tc-box h6 {
    color: #6C7180;
    font-size: 20px;
    margin-bottom: 15px;
}

.tc-box-area .tc-box .tc-box-text {
    padding: 40px 25px;
    min-height: 380px;
}

.tc-box a.view-details {
    text-align: center;
    display: block;
    color: #fff;
    padding: 15px 0;
    font-size: 20px;
}

.tc-box a.view-details.color-1 {
    background: #04B0FF;
}

.tc-box a.view-details.color-2 {
    background: #4472C4;
}

.tc-box a.view-details.color-3 {
    background: #7031A1;
}

a .arrow-icon {
    width: 16px;
    height: 14px;
    background: url("../images/arrow_button_white.png") right center no-repeat;
    display: inline-block;
    transition: all 0.3s ease 0s;
    margin-top: 5px;
}

a:hover .arrow-icon {
    background: url("../images/arrow_button_white.png") left center no-repeat;
}

a .arrow-icon.blue {
    background: url("../images/arrow_button_blue.png") right center no-repeat;
}

a:hover .arrow-icon.blue {
    background: url("../images/arrow_button_blue.png") left center no-repeat;
}

.display-value-area {
    background: #213367;
    padding: 70px 0 140px 0;
}

.dv-text {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 28px;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    color: #fff;
}

.value-area {
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    padding: 30px 50px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(33,51,103,0.46);
    width: 1000px;
    margin: -75px auto 25px auto;
    color: #001247;
    font-size: 20px;
}

.value-area h2 {
    color: #0068FF;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    margin: 0;
}

.stay-ahead-of-competition h1 {
    display: block;
    width: 100%;
}

.stay-ahead-of-competition a {
    color: #fff;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    margin: 15px;
}

.re-hide {
    display: block;
}

.re-show {
    display: none;
}

.anchor {
    padding-top: 20px;
    margin-top: -60px;
}

.subscribe-bar {
    margin-top: 30px;
    margin-bottom: 15px;
    line-height: 52px;
    font-size: 20px;
}

.subscribe-input-text-bg {
    background: #fff;
    border: solid 1px #ADB5CC;
    width: 270px;
    height: 52px;
    display: inline-block;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
}

.subscribe-input-text-bg input {
    width: 100%;
    outline: none;
    border: none;
    background: none;
    padding: 0 10px;
}

.subscribe-input-submit-bg {
    background: #0068FF;
    width: 147px;
    height: 52px;
    display: inline-block;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
    transition: all 0.3s ease 0s;
    position: relative;
}

.subscribe-input-submit-bg img {
    height: 26px;
    margin: -2px 5px 0 0;
}

.subscribe-input-submit-bg.green {
    background: #5FAD51;
}

.subscribe-input-submit-bg input {
    width: 100%;
    outline: none;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    padding-right: 15px;
}

.subscribe-input-submit-bg .arrow-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -8px;
    z-index: 3000;
    width: 16px;
    height: 14px;
    background: url("../images/arrow_button_white.png") right center no-repeat;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.subscribe-input-submit-bg:hover .arrow-icon {
    background: url("../images/arrow_button_white.png") left center no-repeat;
}

.tnc {
    margin: 100px 0;
}

.tnc table.tnc-table {
    margin: 35px 0;
}

.tnc table.tnc-table b {
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
}

.tnc table.tnc-table tr td {
    padding: 5px 0;
}

.tnc table.tnc-table tr th:first-child, .tnc table.tnc-table tr td:first-child {
    width: 80px;
    vertical-align: top;
}

.tnc table.tnc-table tr td.w-space {
    width: 60px;
    vertical-align: top;
}

.tnc table.tnc-table tr th {
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    font-size: 32px;
    color: #213367;
    line-height: 38px;
}

.kc-area {
    width: 100%;
    padding: 100px 100px;
    text-align: center;
}

.kc-area .kc-box {
    width: 48%;
    display: inline-block;
    margin: 10px 5px;
    text-align: left;
    background: #FAFBFC;
}

.kc-area .kc-box.big {
    width: 97%;
}

.kc-box .kc-box-img {
    display: inline-block;
    vertical-align: top;
}

.kc-box.big .kc-box-img {
    width: 49.5%;
}

.kc-box.big .kc-box-text {
    width: 49%;
}

.kc-box .kc-box-text {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 43px 40px;
    min-height: 350px;
}

.kc-box h6 {
    color: #6C7180;
    margin-bottom: 25px;
    font-size: 20px;
}

.kc-box h3 {
    font-size: 36px;
    color: #213367;
}

.kc-box h3 a {
    color: #213367;
}

.kc-area-sort-by {
    padding: 25px 100px 125px 100px;
    text-align: center;
}

.kc-area-sort-by .kc-sort-box {
    width: 97%;
    background: #FAFBFC;
    text-align: left;
    display: inline-block;
    padding: 43px 40px;
    margin: 20px 0;
}

.kc-area-sort-by .kc-sort-box h6 {
    color: #6C7180;
    margin-bottom: 25px;
    font-size: 20px;
}

.kc-area-sort-by .kc-sort-box h3 {
    font-size: 36px;
    color: #213367;
}

.kc-area-sort-by .kc-sort-box h3 a {
    color: #213367;
}

.kc-area-sort-by .kc-sort-box .about-text-underline {
    width: 80%;
    margin-bottom: 30px;
}

.kc-area-sort-by .kc-sort-box h6 {
    margin-bottom: 10px;
}

.dropdown-bar {
    width: 97%;
    text-align: left;
    margin: auto;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
}

.dropbtn {
    color: #0068FF;
    padding: 16px;
    font-size: 20px;
    border: none;
}

button.dropbtn .arrow-icon {
    width: 16px;
    height: 14px;
    background: url("../images/arrow_button.svg") right center no-repeat;
    background-size: 16px auto;
    display: inline-block;
    margin-top: 5px;
    transform: rotate(90deg);
}

button.dropbtn .arrow-icon.gray {
    background: url("../images/language_dropdown@2x.svg") right center no-repeat;
    transform: rotate(0deg);
}

.dropdown:hover button.dropbtn .arrow-icon.gray {
    transform: rotate(0deg);
}

.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown button {
    outline: none;
    cursor: pointer;
    background: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    color: #213367;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover button.dropbtn .arrow-icon {
    transform: rotate(-90deg);
}

.article-area {
    padding: 100px 0;
    font-size: 20px;
}

.article-area .container {
    width: 820px;
    max-width: 100%;
}

.article-area p {
    margin-top: 40px;
}

.article-area h4 {
    margin-top: 40px;
    margin-bottom: -25px;
    font-size: 28px;
}

.article-area * div {
    display: inline-block;
    margin: 28px 28px 0 0;
    font-size: 20px;
}

.testing-area {
    text-align: center;
    margin: auto;
    padding: 100px 100px;
}

.testing-box {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    position: relative;
    transition: all 0.3s ease 0s;
}

.testing-box:hover {
    opacity: 0.75 !important;
}

.testing-box .title {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 50%;
    font-size: 36px;
    color: #213367;
    transform: translateY(-50%);
}

.testing-box .small-text {
    font-size: 20px;
    font-weight: unset !important;
    color: #001247;
    display: block;
}

.case-studies-area {
    padding: 0 0 50px 0;
    font-size: 20px;
    color: #001247;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
}

.case-studies-area h2 {
    font-size: 32px;
    margin: 0 0 25px 0;
}

.case-studies-area h3 {
    font-size: 26px;
    margin: 25px 0 10px 0;
}

.case-studies-area ul {
    margin-top: 25px;
}

.case-studies-area ul li {
    list-style: disc;
    margin-left: 25px;
}

.case-studies-area .row {
    margin: 50px 0;
}

.expertise-area {
    background: #F5FAFC;
    padding: 50px 0;
}

.case-studies-area img {
    margin-bottom: 35px;
}

.case-studies-cs {
    padding: 100px 0;
    font-size: 36px;
    font-weight: bolder;
    color: #213367;
}

.case-studies-cs a {
    color: #007bff;
    text-decoration: underline;
}

.collapsible {
    background-color: #fff;
    color: #001247;
    cursor: pointer;
    padding: 18px 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 26px;
    font-weight: bolder;
    border-bottom: solid 2px #ccc;
    font-family: 'ITCFranklinGothicStd-Med', sans-serif !important;
    font-weight: 500 !important;
}

.collapsible a {
    color: #001247;
}

.active, .collapsible:hover {
    background-color: #fff;
}

.collapsible.break:after {
    background-image: none;
}

.collapsible:after {
    content: "";
    background: url("../images/arrow_button.svg");
    background-size: 18px auto;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
    color: #0068FF;
    font-weight: bold;
    position: absolute;
    right: 15px;
    font-size: 40px;
    margin-top: 6px;
    transition: all 0.3s ease 0s;
}

.collapsible.active:after {
    transform: rotate(-90deg);
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.content-box {
    padding: 35px 0 15px 0;
}

.content-box h4 {
    font-size: 24px;
    font-weight: 500 !important;
}

.content-box a {
    display: block;
    padding: 5px 25px;
    font-size: 20px;
}

.content-title {
    padding: 5px 0;
    color: #001247;
    font-weight: bolder;
}

.job-box-area {
    padding: 50px 0 100px 0;
}

.job-box-area button {
    outline: none;
    border-bottom: solid 2px #0068FF;
    color: #0068FF;
}

.job-box {
    padding: 50px 0;
    color: #001247;
    font-size: 20px;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
}

.job-box h4 {
    font-family: 'ITCFranklinGothicStd-Med', sans-serif;
    color: #001247;
    font-size: 24px;
    margin: 0 0 5px 0;
}

.job-box p {
    margin: 0 0 25px 0;
}

.job-box ul {
    margin: 0 0 25px 0;
}

.job-box ul li {
    list-style-type: disc;
    margin-left: 25px;
}

.faq-box-area {
    padding: 50px 0 100px 0;
}

.faq-box-area button {
    outline: none;
    border-bottom: none;
    padding: 15px 65px;
    color: #001247;
    font-family: 'ITCFranklinGothicStd-Med', sans-serif;
    background: #FAFBFC;
    font-size: 24px;
}

.faq-box-area button:hover {
    background: #FAFBFC;
}

.faq-box {
    padding: 0 65px 25px 65px;
    background: #FAFBFC;
}

.faq-box ul li {
    list-style: disc;
    margin-left: 25px;
}

.faq-box-area h3 {
    margin-bottom: 25px;
    margin-top: 50px;
}

.faq-box-area .collapsible:after {
    content: "";
    background: url("../images/plus.svg");
    background-size: 18px auto;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    transform: none;
    color: #0068FF;
    font-weight: bold;
    position: absolute;
    right: auto;
    left: 40px;
    font-size: 24px;
    top: 14px;
    transition: all 0.3s ease 0s;
}

.faq-box-area .collapsible.active:after {
    transform: none;
    background: url("../images/minus.svg");
}

.faq-box-space {
    margin: 6px 0;
}

.cs-area {
    background: #ccc;
    padding: 100px 0;
}

.metals-n-alloys {
    padding: 50px 0;
}

.analysis-methods {
    padding: 50px 0;
}

.safety-standard-top {
    padding: 80px 0 30px 0;
}

.safety-standard-top h3 {
    font-size: 36px;
}

.safety-standard-top a {
    text-decoration: underline;
}

.hkdws-table-area {
    margin: 50px 0 100px 0;
}

.hkdws-table-area h3 {
    width: 80%;
    font-size: 36px;
    margin: 0 auto 25px auto;
    text-align: center;
    color: #4472C4;
}

.hkdws-table {
    width: 1020px;
    max-width: 75%;
    margin: auto;
    background: #4472C4;
    border-radius: 25px;
    padding: 0 0 12px 0;
    font-family: 'ITCFranklinGothicStd-BkCd', sans-serif;
    font-weight: normal;
}

.hkdws-table .row:first-child.table-title {
    background: #f00;
}

.hkdws-table .row {
    margin: 5px -5px 0 -5px;
    padding: 10px 0;
    font-size: 20px;
}

.hkdws-table .row.radius-top {
    border-radius: 15px 15px 0 0;
}

.hkdws-table .row.radius-bottom { 
    border-radius: 0 0 15px 15px;
}

.hkdws-table .row:nth-child(odd).table-title,
.hkdws-table .row:nth-child(even).table-title {
    background: none;
    color: #fff;
    padding: 15px 0;
}

.hkdws-table .row:nth-child(even) {
    background: #FAFBFC;
}

.hkdws-table .row:nth-child(odd) {
    background: #EFF0F5;
}

.dh-text {
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
}

.safeguard-your-beloved-ones {
    background-repeat: no-repeat;
}

.safeguard-your-beloved-ones h5 {
    color: #213367;
    font-size: 36px;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    margin-bottom: 25px;
}

.safeguard-your-beloved-ones a {
    display: inline-block;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
    margin-top: 25px;
}

.metals-n-alloys h3 {
    text-align: left;
}

.metals-n-alloys ul {
    display: inline-block;
    width: 32%;
    margin 0 8px;
    vertical-align: top;
}

.metals-n-alloys ul li {
    margin: 5px 0;
    background: url("../images/li_icon.png") left no-repeat;
    padding: 0 0 0 30px;
    background-size: 22px auto;
    font-size: 24px;
    text-align: left;
    font-family: 'ITCFranklinGothicStd-Med', sans-serif;
}

.analysis-methods h3 {
    font-size: 36px;
}

.analysis-methods h4 {
    color: #0068FF;
    font-size: 28px;
    margin: 25px 0 -25px 0;
}

.learn-more-about-ca {
    padding: 75px 0;
    background: #549DBB;
}

.learn-more-about-ca h4 {
    font-size: 36px;
    color: #213367;
}

.learn-more-about-ca h5 {
    font-size: 25px;
    color: #213367;
}

.learn-more-about-ca a {
    color: #fff;
    margin-top: 20px;
    display: inline-block;
}

.procedures-steps h4 {
    font-size: 36px;
}

.procedures-steps .row {
    margin-bottom: 75px;
}

.learn-more-about-me {
    background: #FEF6CF;
    padding: 75px 0;
}

.learn-more-about-me h5 {
    font-size: 25px;
}

.learn-more-about-me h4 {
    font-size: 36px;
}

.learn-more-about-me a {
    margin-top: 25px;
    display: inline-block;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
}

.cs-area {
    padding: 50px 0;
    /*background-size: auto 100%;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.cs-area h2 {
    margin-bottom: 35px;
    font-size: 52px;
    color: #213367;
}

.cs-area h5 {
    font-size: 32px;
    color: #213367;
    margin-bottom: 10px;
    margin-top: 25px;
}

.cs-area h6 .link-text, .cs-area h6 .link-text a {
    display: inline-block;
    font-size: 18px;
}

.cs-area h6 {
    margin-bottom: 10px;
    font-size: 20px;
}

.cs-area .container .col-md-9 {
    position: relative;
}

input.auto-width {
    width: 290px !important;
    max-width: 100%;
    margin: 0;
}

.cs-blue-box {
    background: #213367;
    position: absolute;
    left: -250px;
    width: 350px;
    z-index: 20;
    top: 50px;
    padding: 60px 20px;
    color: #fff;
}

.cs-blue-box ul.number {
    margin-bottom: 25px;
}

.cs-blue-box ul.number li {
    list-style-type: decimal;
    margin: 3px 0 3px 25px;
}

.cs-blue-box h4 {
    font-size: 32px;
    margin-bottom: 25px;
}

.cs-white-box {
    width: 100%;
    background: #FAFBFC;
    position: relative;
    z-index: 10;
    padding: 50px 40px 50px 130px;
}

.cs-white-box a {
    padding: 15px 0;
    display: block;
    text-decoration: underline;
}

.cs-white-box label {
    width: 100%;
}

.cs-white-box input {
    width: 100%;
    border: solid 1px #ADB5CC;
    padding: 5px 10px;
    height: 42px;
    outline: none;
    margin: 0 0 10px 0;
    background: #fff;
    color: #213367;
}

.cs-white-box input::placeholder {
    color: #213367;
    opacity: 1;
}

.cs-white-box input:-ms-input-placeholder {
    color: #213367;
}

.cs-white-box input::-ms-input-placeholder {
    color: #213367;
}

.cs-white-box input[type="submit"] {
    background: #0068FF;
    height: 52px;
    border: solid 1px #0068FF;
    color: #fff;
}

.cs-white-box input[type="submit"].print {
    background: #213367;
    border: solid 1px #213367;
}

.cs-white-box label.l-radio {
    display: inline-block !important;
    width: auto;
}

.cs-white-box label a {
    display: inline-block;
    margin: 0;
}

.cs-white-box input[type="radio"] {
    width: 20px;
    background: #0068FF;
    height: 20px;
    border: solid 1px #0068FF;
    color: #fff;
    margin: 0 5px 0 35px;
}

.cs-white-box input.first-radio {
    margin: 0 5px 0 0;
}

.select-group {
    width: 100%;
    height: 52px;
    position: relative;
    margin: 0 0 20px 0;
}

.select-group select {
    width: 100%;
    border: solid 1px #ADB5CC;
    padding: 5px 10px;
    height: 40px;
    outline: none;
    color: #213367;
    -moz-appearance: none;
	-webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.select-group .select-arrow {
    background: url("../images/arrow_button.svg");
    background-size: 18px auto;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    right: 10px;
    position: absolute;
    top: 12px;
    z-index: 20;
    transform: rotate(90deg);
}

.cs-white-box textarea {
    width: 100%;
    height: 130px;
    padding: 10px 10px;
    border: solid 1px #ADB5CC;
    outline: none;
    resize: none;
    margin: 0 0 15px 0;
    color: #213367;
}

.cs-white-box textarea::placeholder {
    color: #213367;
}

.cs-icon {
    padding: 5px 0 5px 40px;
    margin: 5px 0;
}

.cs-icon.icon1 {
    background: url("../images/contact_1.svg") left no-repeat;
    background-size: 25px auto;
}

.cs-icon.icon2 {
    background: url("../images/contact_2.svg") left no-repeat;
    background-size: 25px auto;
}

.cs-icon.icon3 {
    background: url("../images/contact_3.svg") left no-repeat;
    background-size: 25px auto;
}

.cs-icon.icon4 {
    background: url("../images/contact_4.svg") left no-repeat;
    background-size: 25px auto;
}

.cs-icon a {
    color: #fff;
}

.baby-text {
    width: 98%;
    height: 600px;
    margin: 0 auto 0 auto;
    padding-top: 200px;
    /*background: url("../images/baby_bg.png") left bottom no-repeat;*/
    background-repeat: no-repeat;
    background-position: center;
}

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

.wqt-top h2 {
    font-size: 52px;
}

.metals-effects {
    font-size: 20px;
    text-align: center;
    padding: 50px 0;
}

.metals-effects h5 {
    font-size: 24px;
}

.metals-effects a {
    text-decoration: underline;
}

.metals-effects .container {
    width: 840px;
}

.water-pipe {
    background: url("../images/water_pipe@2x.png") no-repeat right center;
    background-size: auto 100px;
    height: 450px;
    margin: 50px 0;
    position: relative;
}

.water-pipe img {
    width: 150px;
}

.water-pipe .chemical-element {
    position: absolute;
    width: 150px;
    height: 180px;
}

.water-pipe .chemical-element.icon1 {
    left: 100px;
    top: 35px;
    background: url("../images/water-heavymetal_1@2x.png") left top no-repeat;
    background-size: 150px;
    transition: all 0.3s ease 0s;
}

.water-pipe .chemical-element.icon1:hover {
    background: url("../images/water-heavymetal_7@2x.png") left top no-repeat;
    background-size: 150px;
}

.water-pipe .chemical-element.icon2 {
    left: 320px;
    top: 25px;
    background: url("../images/water-heavymetal_2@2x.png") left top no-repeat;
    background-size: 150px;
    transition: all 0.3s ease 0s;
}

.water-pipe .chemical-element.icon2:hover {
    background: url("../images/water-heavymetal_8@2x.png") left top no-repeat;
    background-size: 150px;
}

.water-pipe .chemical-element.icon3 {
    left: 540px;
    top: 35px;
    background: url("../images/water-heavymetal_3@2x.png") left top no-repeat;
    background-size: 150px;
    transition: all 0.3s ease 0s;
}

.water-pipe .chemical-element.icon3:hover {
    background: url("../images/water-heavymetal_9@2x.png") left top no-repeat;
    background-size: 150px;
}

.water-pipe .chemical-element.icon4 {
    left: 100px;
    bottom: 30px;
    background: url("../images/water-heavymetal_4@2x.png") left top no-repeat;
    background-size: 150px;
    transition: all 0.3s ease 0s;
}

.water-pipe .chemical-element.icon4:hover {
    background: url("../images/water-heavymetal_10@2x.png") left top no-repeat;
    background-size: 150px;
}

.water-pipe .chemical-element.icon5 {
    left: 320px;
    bottom: 25px;
    background: url("../images/water-heavymetal_5@2x.png") left top no-repeat;
    background-size: 150px;
    transition: all 0.3s ease 0s;
}

.water-pipe .chemical-element.icon5:hover {
    background: url("../images/water-heavymetal_11@2x.png") left top no-repeat;
    background-size: 150px;
}

.water-pipe .chemical-element.icon6 {
    left: 540px;
    bottom: 30px;
    background: url("../images/water-heavymetal_6@2x.png") left top no-repeat;
    background-size: 150px;
    transition: all 0.3s ease 0s;
}

.water-pipe .chemical-element.icon6:hover {
    background: url("../images/water-heavymetal_12@2x.png") left top no-repeat;
    background-size: 150px;
}

.water-safety-guidelines {
    height: 500px;
    background-size: 1680px auto;
    background-repeat: no-repeat;
    background-position: center;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
}

.water-safety-guidelines h4 {
    font-size: 36px;
    margin-bottom: 35px;
}

.water-safety-guidelines a {
    margin-top: 10px;
    display: inline-block;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
}

.drinking-water-is-safe {
    padding: 50px 0;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
}

.drinking-water-is-safe a {
    margin-top: 10px;
    display: inline-block;
    /*font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;*/
}

.drinking-water-is-safe h5 {
    font-size: 28px;
    margin-bottom: 0;
}

.drinking-water-is-safe h4 {
    font-size: 36px;
    margin-bottom: 25px;
}

.drinking-water-is-safe.style2 {
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 570px;
}

.left-tsp-menu {
    margin-bottom: 50px;
    margin-top: 50px;
}

.left-tsp-menu.courses {
    margin-bottom: 0;
}

.left-tsp-menu ul {
    width: 80%;
    margin-bottom: 25px;
}

.left-tsp-menu ul li a {
    background: #FAFBFC;
    padding: 15px;
    display: block;
    color: #001247;
    transition: none;
}

.left-tsp-menu ul li {
    position: relative;
    margin-bottom: 10px;
    transition: none;
}

.left-tsp-menu ul li:before {
    top: 0;
    background: linear-gradient(to right top, #fff 50%, rgba(0, 0, 0, 0) 50%);
    width: 28px;
    height: 50%;
    position: absolute;
    left: 100%;
    content: "";
}

.left-tsp-menu ul li:after {
    top: 50%;
    background: linear-gradient(to right bottom, #fff 50%, rgba(0, 0, 0, 0) 50%);
    width: 28px;
    height: 50%;
    position: absolute;
    left: 100%;
    content: "";
}

.left-tsp-menu ul li a:hover, 
.left-tsp-menu ul li.this a {
    opacity: 1;
    background: #213367;
    color: #fff;
}

.left-tsp-menu ul li.this:before {
    top: 0;
    background: linear-gradient(to right top, #213367 50%, rgba(0, 0, 0, 0) 50%);
    width: 28px;
    height: 50%;
    position: absolute;
    left: 100%;
    content: "";
}

.left-tsp-menu ul li.this:after {
    top: 50%;
    background: linear-gradient(to right bottom, #213367 50%, rgba(0, 0, 0, 0) 50%);
    width: 28px;
    height: 50%;
    position: absolute;
    left: 100%;
    content: "";
}

.testing-service-package {
    margin: 50px 0;
}

.testing-service-package h4 {
    width: 100%;
    text-align: center;
    margin: 50px 0 -15px 0;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
}

#FOR_PREMISES {
    margin-top: -20px;
}

.tsp-box {
    border: solid 2px #4886BE;
    padding: 30px 20px 30px 20px;
    border-radius: 0 35px 0 0;
    position: relative;
    margin: 100px 10px 0 10px;
    min-height: 275px;
    font-size: 17px;
    text-align: center;
}

.tsp-box.green-color-1 {
    border: solid 2px #73B048;
    min-height: 300px;
}

.tsp-box.green-color-2 {
    border: solid 2px #227355;
}

.tsp-box h5 {
    font-size: 20px;
    margin-top: -5px;
    position: relative;
    z-index: 30;
    text-align: left;
    padding: 0 25px;
}

.tsp-box .tsp-icon {
    position: absolute;
    left: -45px;
    top: -45px;
    width: 90px;
    background: #fff;
    padding: 5px;
    z-index: 20;
}

.tsp-box .price-bar {
    width: 100%;
    background: #4886BE;
    color: #fff;
    height: 48px;
    line-height: 48px;
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
}

.tsp-box.green-color-1 .price-bar {
    background: #73B048;
}

.tsp-box.green-color-2 .price-bar {
    background: #227355;
}

.tsp-box .price-bar a {
    color: #fff;
    display: block;
}

.tsp-box ul {
    vertical-align: top;
    margin: 10px 15px 10px 15px;
    line-height: 18px;
    text-align: left;
    display: inline-block;
}

.tsp-box.blue-color-1 ul, .tsp-box.green-color-1 ul {
    margin: 10px 60px 10px 60px;
}

.tsp-box ul li {
    list-style: disc;
    margin: 3px 0 3px 10px;
    padding-left: 0px;
}

.shopping-cart-icon {
    width: 48px;
    height: 48px;
    background: url("../images/cart@2x.svg");
    background-size: 28px auto;
    background-color: #0068FF;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 20;
}

.advanced-n-specialized {
    padding: 50px 100px;
    width: 100%;
    margin: auto;
    text-align: center;
}

.advanced-n-specialized .row {
    padding: 0;
    margin: 1px 2px;
}

.advanced-n-specialized img {
    width: 97.5%;
    border-bottom: solid 10px #001247;
}

.advanced-n-specialized h3 {
    font-size: 36px;
    margin-bottom: 25px;
}

.why-promet {
    padding: 0 100px 50px 100px;
    width: 100%;
    margin: auto;
    text-align: center;
}

.why-promet .row {
    padding: 6px;
    margin: 6px;
}

.why-promet img {
    width: 96%;
}

.why-promet h3 {
    font-size: 36px;
    margin-bottom: 25px;
}

.why-promet h5 {
    font-size: 28px;
    font-family: 'ITCFranklinGothicStd-Demi', sans-serif;
    margin: 10px 0 75px 0;
}

.step-by-step {
    width: 950px;
    max-width: 100%;
    /*margin: 0 auto;*/
    margin: 0 auto 100px auto;
}

.step-by-step .container {
    position: relative;
}

.step-no {
    background: #ccc;
    border-radius: 200px;
    display: inline-block;
    width: 80px;
    height: 80px;
    padding-top: 12px;
    color: #fff;
    text-align: center;
}

.step-no.no1 {
    background: #99BEFF;
}

.step-no.no2 {
    background: #80ADFF;
}

.step-no.no3 {
    background: #6398F7;
}

.step-no.no4 {
    background: #447EE5;
}

.step-no.no5 {
    background: #2964CC;
}

.step-no.no6 {
    background: #124BB2;
}

.step-box {
    width: 100%;
    height: 100%;
    background: #EFF0F5;
    border-radius: 20px 75px 75px 20px;
    border-radius: 20px 75px 75px 20px;
    padding: 15px 25px;
    margin: 10px 0;
}

.step-bar-bg {
    border: 2px solid #979797;
    height: 82%;
    position: absolute;
    left: 55px;
    top: 75px;
}

.process-text-box {
    margin-bottom: 100px;
}

.process-text-box .row {
    padding: 25px 15px;
    margin: 10px 0;
}

.process-text-box img {
    margin: 25px 0;
}

.process-text-box .row:nth-child(odd) {
    background: #FAFBFC;
}

.process-text-box .row:nth-child(even) {
    background: #EFF0F5;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 0;
    padding: 100px 50px;
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 0.25s ease 0s;
    text-align: center;
    overflow-y: auto;
}

/*
.popup .close {
    position: fixed;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 50px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.popup .close:hover {
    color: #fff;
}
*/

.popup .content {
    max-height: 30%;
    overflow: auto;
}

.play-btn {
    width: 90px;
    height: 90px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -45px 0 0 -45px;
}

.slide-text-box {
    width: 600px;
    max-width: 84% !important;
    position: absolute;
    left: 50px;
    bottom: 0;
    font-size: 20px;
    z-index: 1500;
}

.slide-text-box h1 {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}

.slide-text-box .subscribe-input-submit-bg {
    line-height: 52px;
    margin-top: 25px;
    text-align: left;
    width: auto;
}

.slide-text-box .subscribe-input-submit-bg a {
    color: #fff;
    padding: 0 35px 0 13px;
    display: block;
}

.slide-text-box .subscribe-input-submit-bg .arrow-icon {
    right: 8px;
    margin-top: -8px;
}

.upcoming-schedule {
    padding: 75px 0 15px 0;
}

.schedule-box-group {
    margin: 35px 0 15px 0;
}

.schedule-box {
    background: #FAFBFC;
    padding: 5px 17px;
    margin-top: 5px;
    /*padding: 12px 17px;*/
    /*margin-top: 15px;*/
}

.schedule-box .subscribe-input-submit-bg {
    line-height: 52px;
    width: auto;
    text-align: left;
}

.schedule-box .subscribe-input-submit-bg a {
    color: #fff;
    padding: 0 35px 0 13px;
    display: block;
}

.schedule-box .subscribe-input-submit-bg .arrow-icon {
    right: 8px;
    margin-top: -8px;
}

.let-us-know {
    margin: 15px 0 35px 0;
}

.left-tsp-menu.courses h3 {
    border-bottom: solid 1px #ADB5CC;
    margin-bottom: 12px;
    padding-bottom: 12px;
    font-size: 21px;
}

.left-tsp-menu.courses ul li a {
    margin: 0;
    padding: 0;
    background: none;
}

.left-tsp-menu.courses ul li:hover a {
    color: #fff;
}

.left-tsp-menu.courses ul li {
    padding: 15px;
    background: #FAFBFC;
    display: block;
    color: #001247;
    position: relative;
    margin-bottom: 10px;
    transition: none;
}

.left-tsp-menu.courses ul li:before {
    top: 0;
    background: linear-gradient(to right top, #fff 50%, rgba(0, 0, 0, 0) 50%);
    width: 18px !important;
    height: 50%;
    position: absolute;
    left: 100%;
    content: "";
}

.left-tsp-menu.courses ul li:after {
    top: 50%;
    background: linear-gradient(to right bottom, #fff 50%, rgba(0, 0, 0, 0) 50%);
    width: 18px !important;
    height: 50%;
    position: absolute;
    left: 100%;
    content: "";
}

.left-tsp-menu.courses ul li:hover, 
.left-tsp-menu.courses ul li.this {
    opacity: 1;
    background: #213367;
    color: #fff;
}

.left-tsp-menu.courses ul li.this:before {
    top: 35%;
    background: linear-gradient(to right top, #213367 50%, rgba(0, 0, 0, 0) 50%);
    width: 32px;
    height: 15%;
    position: absolute;
    left: 100%;
    content: "";
}

.left-tsp-menu.courses ul li.this:after {
    top: 50%;
    background: linear-gradient(to right bottom, #213367 50%, rgba(0, 0, 0, 0) 50%);
    width: 32px;
    height: 15%;
    position: absolute;
    left: 100%;
    content: "";
}

.courses-blue-box {
    font-size: 20px;
    padding: 15px 20px 45px 20px;
    background: #FAFBFC;
}

.courses-blue-box h3 {
    font-size: 24px;
    margin-top: 25px;
}

.courses-blue-box ul li {
    list-style-type: disc;
    margin-left: 20px;
}

.faq-box-area .subscribe-input-submit-bg {
    line-height: 52px;
    text-align: left;
    width: auto;
}

.faq-box-area .subscribe-input-submit-bg a {
    color: #fff;
    padding: 0 35px 0 13px;
    display: block;
}

.faq-box-area .subscribe-input-submit-bg .arrow-icon {
    right: 8px;
    margin-top: -8px;
}

.the-underline {
    padding: 5px 0 40px 0;
    display: block;
    margin: 15px 0 35px 0;
    border-bottom: solid 2px #ADB5CC;
}

.accept-cookies {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px 30px;
    background: #FAFBFC;
    box-shadow: 0 0 6px 0 rgba(33,51,103,0.30);
    z-index: 8888;
}

.accept-cookies .subscribe-input-submit-bg {
    line-height: 52px;
    text-align: left;
    width: auto;
}

.accept-cookies .subscribe-input-submit-bg a {
    color: #fff;
    padding: 0 35px 0 13px;
    display: block;
}

.accept-cookies .subscribe-input-submit-bg .arrow-icon {
    right: 8px;
    margin-top: -8px;
}

.left-btn {
    max-width: 100%;
    width: 280px;
    margin-bottom: 50px;
    color: #0068FF;
    font-size: 24px;
}

.left-btn.style2 {
    width: 100%;
}

.left-btn .row {
    margin: 15px 0;
}

.interested {
    width: 100%;
    margin-bottom: 100px;
    padding: 50px 0;
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}

.interested h3 {
    font-size: 52px;
    color: #0068FF;
}

.interested-send-box {
    background: #FAFBFC;
    padding: 30px;
    margin-left: 0;
    margin-top: 50px;
}

.interested-send-box input[type="text"], .interested-send-box input[type="tel"], .interested-send-box input[type="email"] {
    width: 100%;
    height: 40px;
    outline: none;
    margin: 5px 0;
    padding: 0 5px;
}

.interested-send-box .subscribe-input-submit-bg {
    line-height: 50px;
    margin-top: 25px
}

.arrow-show a {
    width: 20px;
    height: 20px;
    float: right;
    background: url("../images/arrow_button.svg") right no-repeat;
    display: block;
    cursor: pointer;
    transform: rotate(90deg);
    margin-top: -25px;
}

#Course1_1, #Course1_2, 
#Course2_1, #Course2_2, 
#Course3_1, #Course3_2 {
    width: 100%;
    display: block;
}

.interested-bg {
    width: 450px;
    position: absolute;
    right: -50px;
    bottom: 0;
    z-index: -9;
}

img.img-space {
    margin: 9px 0;
}

a.cookie-notice {
    padding: 15px 20px;
    color: #fff;
    background: #001247;
    margin-left: 10px;
    font-family: 'ITCFranklinGothicStd-DmCd', sans-serif;
}

a.cookie-notice:hover {
    opacity: 0.75;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.83); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background: none !important;
    margin: auto;
    padding: 20px;
    border: none;
    width: 80%;
}

.modal-content img {
    margin: 0 auto;
}

.close {
    color: #fff;
    position: fixed;
    right: 50px;
    top: 30px;
    font-size: 36px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.text-margin {
    display: inline-block;
    margin: -36px 0 0 30px;
    line-height: 5px;
}

.return-to-home-button {
    text-align: center;
    display: block;
    color: #fff;
    padding: 15px 30px;
    font-size: 20px;
    background: #213367;;
}