@charset "utf-8";
/* CSS Document */
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

.btn-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    font-size: 16px !important;
    font-weight: bold !important
}

.bg2018, .bg2019, .bg2020, .bg2021 {
    width: 100% !important;
    position: center !important;
    object-fit: fill !important;
}

.bg2018 {
    background-image: url('/images/2018YearPic.jpg');
}

.bg2019 {
    background-image: url('/images/2019YearPic.jpg');
}

.bg2020 {
    background-image: url('/images/2020milestone1.jpeg');
}

.bg2021 {
    background-image: url('/images/2021milestone.jpeg');
}



@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}

html, body {
    font-family: Aileron, sans-serif !important;
    background-color: #f7f7f7 !important;
    -webkit-text-size-adjust: auto !important;
    text-size-adjust: auto !important;
    resize: inherit !important;
}




/* Key Milestones Start */

#timeline {
    display: flex;
    background-color: #031625;
}

    #timeline:hover .tl-item {
        width: 23.3333%;
    }

.tl-item {
    transform: translate3d(0, 0, 0);
    position: relative;
    width: 25%;
    height: 80vh;
    min-height: 50%;
    color: #fff;
    overflow: hidden;
    transition: width 0.5s ease;
}

    .tl-item:before, .tl-item:after {
        transform: translate3d(0, 0, 0);
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .tl-item:after {
        background: rgb(21 21 21 / 85%);
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    .tl-item:before {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 75%);
        z-index: 1;
        opacity: 0;
        transform: translate3d(0, 0, 0) translateY(50%);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .tl-item:hover {
        width: 30% !important;
    }

        .tl-item:hover > .tl-year {
            top: 15%;
            left: 50%;
            transform: translateX(-50%) translateY(-15%) !important;
            z-index: 1;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
        }

        .tl-item:hover:after {
            opacity: 0;
        }

        .tl-item:hover:before {
            opacity: 1;
            transform: translate3d(0, 0, 0) translateY(0);
            transition: opacity 1s ease, transform 1s ease 0.25s;
        }

        .tl-item:hover .tl-content {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.75s ease 0.5s;
        }

        .tl-item:hover .tl-bg {
            filter: grayscale(0);
        }

.tl-content {
    transform: translate3d(0, 0, 0) translateY(25px);
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 .5em;
    top: 20%;
    opacity: 0;
}

    .tl-content h1 {
        text-transform: uppercase;
        color: #1779cf;
        font-size: 1.44rem;
        font-weight: normal;
    }

.tl-year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) !important;
    z-index: 1;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

    .tl-year p {
        font-size: 1.728rem;
        line-height: 1;
    }

.tl-p {
    margin-top: 0;
    margin-bottom: .1rem;
}

.tl-bg {
    transform: translate3d(0, 0, 0);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center center;
    transition: filter 0.5s ease;
    filter: grayscale(100%);
}

/* Key Milestones End */

.hero-bg {
    /* The image used */
    background-image: url('../../images/hero-banner.jpg');
    /* Full height */
    height: 100%;
    width: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.h4-steve-name {
    letter-spacing: 10px;
    margin-left: 0px;
    font-weight: bold;
}

.h6-steve-des {
    letter-spacing: 10px;
    background-color: lightgray;
    margin-left: 0;
}

.divCEO {
    position: relative;
    /*display: flex;*/
    align-items: flex-end;
    flex-direction: row;
    align-content: space-around;
    /*temporary*/
    display: none !important;
}

.ceo-msg {
    letter-spacing: 15px;
    font-size: 25px;
}

.subPageTitle {
    margin-top: 2em !important;
}

.wtt-msg-title, .pgTitle {
    letter-spacing: 5px;
    font-size: 35px;
    text-transform: uppercase !important;
    font-weight: bold;
}

#groupDescription {
    line-height: 1.5;
    font-size: 15px !important;
}


.ittf_group_ul {
}

    .ittf_group_ul li {
        text-align: left;
        line-height: 2em;
    }


.the-ittf-group-title {
    letter-spacing: 10px;
    font-size: 25px;
    text-transform: uppercase !important;
}

.wtt-msg {
    margin-left: 0px;
    line-height: 38px;
}

.diviver {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

hr.solid {
    border-top: 2px solid #bbb;
}

.p-line-height {
    color: #6c6c6c !important;
    font-size: inherit;
}

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

/*.footer {
    height: fit-content;
    background-color: #262626;
    max-inline-size:fit-content!important;
    position: relative;
    bottom: 0px!important;
    width: 100%;
    height: 50px;
}*/
.bodyContainer {
    position: relative;
    min-height: 100vh;
    padding-left: 0;
    padding-bottom: 3em !important;
}

.main {
    scroll-margin-bottom: 3em !important;
}

.footer {
    /*position: relative;*/
    /*width: 100vw !important;*/
    bottom: 0;
    /*height: fit-content !important;*/
    background-color: #000000;
    /* margin-top: 10px !important; */
}

.footer-link {
    padding-left: 1em !important;
}

    .footer-link a:hover {
        color: white !important;
    }

    .footer-link a {
        color: white !important;
        letter-spacing: 1px;
        font-palette: light !important;
        text-transform: uppercase !important;
        font-size: 10px !important;
    }

.footerLink {
    color: white !important;
}

.ftPriorityList div {
    padding-left: 0 !important;
}

.organisationlist, .ftPriorityList, .ftOtherList {
    font-size: 10px !important;
}

.wtIcon {
    color: white !important;
    align-items: center !important;
}
/* ITTF Objectives */
.zoom {
    transition: transform .2s !important; /* Animation */
    width: auto !important;
    /*height: auto !important;*/
    margin: 0 auto !important;
    cursor: pointer !important;
    padding: 10px !important;
    background: #cccccc !important;
    border-radius: 3px !important;
}

    .zoom:hover {
        transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        -ms-transform: scale(1.05); /* IE 9 */
        -webkit-transform: scale(1.05); /* Safari 3-8 */
    }

/* ITTF Group */
.zoomGr {
    transition: transform .2s !important; /* Animation */
    width: auto;
    /*height: auto !important;*/
    margin: 0 auto !important;
    cursor: pointer !important;
    padding: 10px !important;
    background: #cccccc !important;
    border-radius: 3px !important;
}

    .zoomGr:hover {
        transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        -ms-transform: scale(1.05); /* IE 9 */
        -webkit-transform: scale(1.05); /* Safari 3-8 */
    }


/*.LangBtn {
    font: bold 14px !important;
    font-weight: 600 !important;
    color: white !important;
    background: #fc4a1a !important;
    padding: 8px 28px !important;
    border: 2px solid transparent !important;
    border-radius: 3px !important;
    display: inline-block !important;
    text-align: center !important;
    margin-left: 10px !important;
    transition: .5s !important;
}*/
/*** Outcome Card ***/
.KeyOutcomeRow {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
}

.KeyOutcomeDiv {
    margin: 4px 7px 2px 4px !important;
    height: auto !important;
    font-size: 13px;
    line-height: 1.5;
    background: #4b4a4a !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}

    .KeyOutcomeDiv p {
        margin-bottom: 0;
        color: #cdcdcd !important;
        align-items: center;
        text-align: center;
    }

.mt-10 {
    margin-top: 10px;
}

.ittf_wtt_img {
    text-wrap: normal !important;
    flex-direction: column !important;
    text-align: center;
    vertical-align: middle;
}

.ittf_wtt_txt {
    text-align: justify;
    padding: 8px;
}

#ittf_divider {
    width: 100%;
    height: 20px;
}

#ittf_divider2 {
    width: 100%;
    height: 25px;
}

.wtt_logo {
    height: 74px;
    padding: 10px;
}

.ittf_logo {
    height: 76px;
}

.ittf_foundation {
    height: 76px;
}

.ittfgp_text {
    font-size: 16px;
    color: #6c6c6c;
    text-align: justify;
    vertical-align: middle;
    /*padding-right: 10px !important;*/
}

.ittfgp_line {
    padding-left: 0 !important;
}

@media (min-width: 500) and (max-width: 1199) {
    .ittfgp_text {
        letter-spacing: 0px !important;
    }
}


/*07-indiv Objectives*/
.progcontainer {
    text-align: right;
    margin-top: 5px;
    float: right
}

.progress-bar-vertical {
    width: 7px;
    height: 3rem !important;
    display: flex;
    align-items: flex-end;
    margin-right: 1px;
    float: left;
}

    .progress-bar-vertical .progress-bar {
        width: 100%;
        height: 0;
        -webkit-transition: height 0.6s ease;
        -o-transition: height 0.6s ease;
        transition: height 0.6s ease;
    }

.cardBtn {
    width: fit-content;
    height: 50px;
    border-radius: 2px;
    margin: 15px, 15px, 15px, 1px !important
}

.button {
    display: inline-block;
    text-decoration: none;
    padding: 15px 15px;
    -moz-border-radius: 5px;
    border-radius: 0px;
    -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
}


/*.ALL::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f5fd";
    color: #535353;
}*/

.ALL {
    background-image: url("../../images/all-gRP_1-removebg-preview.png") !important;
    background-size: contain !important;
}

.OG {
    background-image: url("../../images/priority_icons_-_organisation___governance-removebg-preview.png") !important;
}

.HPD {
    background-image: url("../../images/priority_icons_-_high_performance___development-removebg-preview (2).png") !important;
}

.IE {
    background-image: url("../../images/priority_icons_-_international_events-removebg-preview.png") !important;
}

.P {
    background-image: url("../../images/priority_icons_-_promotion-removebg-preview (1).png") !important;
}

.R {
    background-image: url("../../images/Revenue.png") !important;
}

.ITTF {
    background-image: url("../../images/ittf_icon.png") !important;
    background-size: contain !important;
}

.WTT {
    background-image: url("../../images/wtt_icon.png") !important;
    background-size: cover !important;
}

.ITTFG {
    background-image: url("../../images/IttfG_icon.png") !important;
    /* background-size: contain !important; */
    background-position: center center !important;
    vertical-align: middle !important;
    background-repeat: no-repeat;
    height: 55px !important;
    background-size: contain !important;
    width: 80px !important;
}

.ALL, .ITTF, .WTT {
    background-position: center center !important;
    vertical-align: middle !important;
    background-repeat: no-repeat;
    height: 55px !important;
    width: 80px !important;
}

.OG, .HPD, .IE, .P, .R {
    background-size: contain !important;
    background-position: center center !important;
    vertical-align: middle !important;
    background-repeat: no-repeat;
}


.OG, .HPD, .IE, .P, .R {
    background-size: contain !important;
    height: auto !important;
    width: auto !important;
}

#btnGroups {
    padding-bottom: 10px !important;
    /*display: flex;*/
    float: left !important;
    justify-content: space-evenly !important;
    resize: none;
    /*    flex-wrap: wrap;
*/ flex-direction: row;
}

    #btnGroups button {
        font-size: 15px !important
    }

#btnLabel {
    padding-left: 3em !important;
    /*padding-top: 15px!important;*/
    font-size: 20px !important;
    align-items: center !important;
    align-content: center;
}

.vertical {
    border-left: 2px solid #ffffff;
    height: 30px;
}

/*July 25 - objectives*/
.WTTBar {
    background-color: #ec5b26;
}

.ITTFBar {
    background-color: #5ec093;
}

.ITTFGBar {
    background-color: #7f9cea;
}

.card {
    border: none !important;
    border-radius: 5px !important;
    background-color: #e6e6e6 !important;
}

.cards {
    border: none !important;
    border-radius: 5px !important;
    background-color: #fff0f0 !important;
    font-size: 10px !important;
}



.c-details span {
    font-weight: 300;
    font-size: 13px
}

ul {
    list-style-type: none;
    padding-left: 0px !important;
}


/*New Nav-bar*/

.card-header {
    background-color: transparent !important;
    padding: 0 !important
}

.card-body {
    padding: 0 !important
}

.btn-link {
    font-weight: 400;
    color: #dfe5eb;
    text-decoration: none;
}

/*Language buttons*/
.flag {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: .25rem;
    padding: 3px !important;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-size: 13px !important;
    color: floralwhite;
}


.dlist:hover {
    background-color: #c3c3c3 !important;
}


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

.leftDiv {
    padding: 0 !important;
    margin: 0 !important;
}

.Ittf-LeftImage {
    background-image: url('../images/ittfPage.png');
}

.WTT-LeftImage {
    background-image: url('../images/wttPage.png');
}

.IttfFoundation-LeftImage {
    background-image: url('../images/foundationPage.png');
}

.OP-LeftImage {
    background-image: url('../images/wtt_side_img.jpg');
}

.HPD-LeftImage {
    background-image: url('../images/wtt_side_img.jpg');
}

.IE-LeftImage {
    background-image: url('../images/wtt_side_img.jpg');
}

.Promotion-LeftImage {
    background-image: url('../images/wtt_side_img.jpg');
}

.Revenue-LeftImage {
    background-image: url('../images/wtt_side_img.jpg');
}

.WhatIsStretegic-LeftImage {
    background-image: url('../images/wtt_side_img.jpg');
}

.ArchivedObjectives-LeftImage {
    background-image: url('../images/ITTFLeft.jpg');
}

.leftImage {
    /*background-position: center;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain !important;
    min-height: 100vh !important;
}

.cguageDiv {
    padding: 0 !important;
}

.cguage {
    /*flex: none !important;*/
    max-width: 20vw !important;
    max-height: 20vw !important;
    min-width: 13vw !important;
    min-height: 13vw !important;
}

.cguagePercent {
    color: #666666;
    font-size: 2vw !important;
    text-align: center;
}

.cguageGroup {
    color: #666666;
    font-size: 1vw !important;
    font-size-adjust: 1;
    text-align: center;
    word-spacing: 1px !important;
}
/*.guagePane{ flex:none!important;}
*/ /* contact us form styles */
.content form .user-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 12px 0;
}

form .user-details .input-box {
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}

form .input-box span.details {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    font-weight: bold;
}

.user-details .input-box input {
    height: 45px;
    width: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 15px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.user-details .input-box select {
    height: 45px;
    width: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 15px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.user-details .input-box input:focus,
.user-details .input-box input:valid {
    /*border-color: 0;*/
}

form .btnContact {
    height: 45px;
    margin: 35px 0;
    text-align: right !important;
}

    form .btnContact input {
        /*height: 100%;*/
        width: 13%;
        float: right;
        border-radius: 5px;
        border: none;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        float: right !important;
        background: #71b7e6;
    }

        form .btnContact input:hover {
            background: #4287f5;
        }

    form .btnContact button {
        height: 100%;
        width: 13%;
        border-radius: 5px;
        border: none;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #71b7e6;
        padding-right: 1em !important;
    }

        form .btnContact button:hover {
            background: #4287f5;
        }


sup {
    color: red;
    font-size: 1em;
    font-weight: normal;
}

.textarea-box {
    width: 100%;
    /*height: 100%;*/
    border-color: #ccc;
}

.btnReset {
    margin-left: 1em !important;
}




/*Language*/

.langList .initial {
    width: 15px !important;
    display: inline-block;
}

.langList .langName {
    display: inline-block;
    text-align: left
}




/*** Menu CSS ***/

/* Sticky Navigation */

/*.nav-ul, .nav-li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav_ul:link {
    color: #ffffff;
}

.nav_ul:hover {
    color: #00A2D3;
}

.nav_ul:visited {
    color: #ffffff;
}

.nav_ul:active {
    color: #ffffff;
}*/

/* unvisited link */
/*.nav-li a:link {
    color: #ffffff;
}*/

/* visited link */
/*.nav-li a:visited {
    color: #ffffff;
}*/

/* mouse over link */
/*.nav-li a:hover {
    color: #00A2D3;
}*/

/* selected link */
/*.nav-li a:active {
    color: #ffffff;
}*/


/*.bck_btn:link { 
    color: #ffffff;
}

.bck_btn:hover {
    color: #000000;
    text-decoration: none;
}

.bck_btn:active {
    color: #ffffff;
}

.bck_btn:visited {
    color: #ffffff;
}*/

/*.nav_title {
    color: #00AFD9;
}
*/
/*.nav_button {
    background: none;
    border: none;*/
/*    appearance: none;
*/ /*outline: none;
    padding: 0;
    cursor: pointer;
}*/

.header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #262626;
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px 20px;
    color: #ffffff;
}


/*.list {
    display: flex;
    flex-direction: column;
    justify-content: center;*/
/*    align-items: left;
*/
/*}*/

/*  .list li {
        margin: 0px 0px 15px 50px;
        font-size: 14px;
        list-style: circle;
    }*/

.hamburger {
    position: relative !important;
    margin-left: auto;
    width: 25px;
    height: 35px;
    z-index: 2;
    top: 10px;
}

    .hamburger span {
        position: absolute;
        left: 0;
        background: #ffffff;
        width: inherit;
        height: 5px;
        transition: transform 0s, opacity 0.5s;
    }

.top-line {
    top: 2px !important;
    height: 2px !important;
}

.center-line {
    top: 11px;
    height: 2px !important;
}

.bottom-line {
    top: 20px;
    height: 2px !important;
}

.top-line.active {
    transform: translateY(3px) rotate( 50deg );
    width: 13px !important;
}

.center-line.active {
    opacity: 0;
}

.bottom-line.active {
    transform: translateY(-16px) rotate( -50deg );
    width: 13px !important;
}

/* End */
/* Fixed sidenav, full height */



/*.nav {*/
/*background: #000000;*/
/*position: fixed;
    width: 340px;
    height: 100%;
    transition: transform 0.7s, opacity 1s;
    transform: translateX(100%);
    opacity: 0;*/
/*color: #ffffff;*/
/*padding: 35px 0px 0px 15px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    top: 0;*/
/*left: 0;*/
/*right: 0;
    background-color: #262626;
    overflow-x: hidden;
    padding-top: 75px;
    padding-left: 0px !important;
}

    .nav.show {
        transform: translateX(0%);
        opacity: 3;
    }*/
/* Style the sidenav links and the dropdown button */
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    display: none;
    background-color: #262626;
    padding-left: 8px;
}
/*Optional: Style the caret down icon*/
.fa-caret-down {
    float: right;
    padding-right: 8px;
}

.nav a, .dropdown-btn {
    padding: 10px 16px;
    text-decoration: none;
    font-size: 16px;
    /*color: #818181;*/
    display: block;
    border: none;
    background: none;
    width: 100%;
    /* text-align: left;*/
    cursor: pointer;
    outline: none;
    /* margin-top: 5px !important;
    padding-left: 20px !important;
    font-size: 17px !important;
    font-weight: bold !important;*/
}

    On mouse-over
    .nav a:hover, .dropdown-btn:hover {
        color: #f1f1f1;
    }
/*.carousel-indicators {
    width: 100% !important;
    display: flex !important;
    align-content: center !important;
    background-color: aquamarine !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
}*/

.dropdown-container .row {
    padding-bottom: 0 !important;
    padding-left: 20px !important;
}

    .dropdown-container .row :hover {
        color: white !important;
    }

    .dropdown-container .row a {
        padding: 8px 0 0 20px !important;
        font-size: 15px !important;
    }

Add an active class to the active dropdown button
.nav .active {
    background-color: #636363;
    color: white;
}



/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
    .nav {
        padding-top: 15px;
    }

        .nav a {
            font-size: 16px;
        }

    
   
}



.btnGroupText {
    font-size: 12px !important;
}

.SurveyImg {
    background-image: url('../images/SurveyImg.png');
    background-size: contain !important;
    margin-left: 3vw !important;
    background-repeat: no-repeat;
}

.SurveyImg1 {
    background-image: url(../images/SurveyImg1.png);
    background-size: contain !important;
    margin-left: 10% !important;
    background-repeat: no-repeat;
}
@font-face {
    font-family: Aileron; /* IE6-IE8 */
    src: url('/webfonts/Aileron-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: Aileron; /* IE6-IE8 */
    src: url('/webfonts/Aileron-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}