@import url('./header.css');
@import url('./footer.css');
@import url('./common-style.css');


img {
    line-height: 0px;
    margin-bottom: 0;
    text-decoration: none;
    padding-bottom: 0;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.news-section {
    background-color: #fff;
    background-image: url('../assets/images/bridge_1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 480px;
    max-height: 480px;
    overflow: hidden;
    padding: 0px;
}

.news-section .news-grid {
    display: inline;
    position: relative;
    width: 100%;
}

.q-section {
    background-image: url('../assets/images/bg_blue.jpg');
    padding: 0px;
    width: 100%;
    height:240px;
}

.q-grid {
    padding: 50px;
    text-align: center;
}
.q-txt {
    margin-top: 30px;
    color: #fff;
    font-size: 30px;
}
.q-person {
    margin-top: 30px;
    color: #fff;
    font-size: 18px;
}

#v-desk {
    visibility: visible;
    display: block;
}
#v-mobile, .join-mobile {
    visibility: hidden;
    display: none;
}

#mediaplayer {
    width:100% !important;
    
}

.news-section .video-header {
    color: #fff;
    font-size: 350%;
    
    text-align: center;
    
}

.small-item {
    position: relative;
}

.btnPlay {
    width: 64px !important;
    height: 64px !important;
    position: absolute;
    top: 25%;
    left: 40%;
}

.jw-display-icon-container .jw-icon-display {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../assets/images/icon_play.png);
    background-color: transparent;
    background-size: contain;
}
.jw-background-color {
    background-color: transparent !important;
    background: none !important;
}
.jw-display-icon-container .jw-icon-display {
    font-size:0px !important;
}

.actions-section,
.btn-section {
    box-sizing: border-box;
    overflow: hidden;
    height: auto;
    font-size: 0px;
}

.btn-section {
    margin-bottom: 80px;
}

.box.i4 {
    float: left;
    width: 25%;
    padding: 0px;
}

.box.i3 {
    float: left;
    width: 33.33%;
    padding: 0px;
}

.actions-box-grid .layout-container-2,
.btn-box-grid .layout-container-2 {
    width: 100%;
    margin: 0 auto;
}

.actions-box-grid::after,
.btn-box-grid::after {
    content: "";
    clear: both;
    display: table;
}

.actions-section .actions-box-grid .box .box-image img, .btn-section .btn-box-grid .box .box-image img {
    width: 100%;    
}

.btn-box-grid.layout-container-2 .box .box-image a {
    cursor: pointer;
}

.benefits-section {
    background-color: #efefef;
    padding: 0px;
    width: 100%;
    height: 420px;
}

.b-grid {
    padding: 40px;
    text-align: center;
}

.b-title {
    color: #158C89;
    font-size: 54px;
    font-family: 'Heebo-Bold';
    letter-spacing: 1px;
    text-align: center;
    direction: rtl;
    margin-bottom: 30px;
}

.b-title a,
.b-title a:hover,
.b-title a:visited,
.b-title a:link,
.b-title a:focus {
    color: #158C89;
}

.b-item {
    display: inline-block;
    width: 12.5%;
    font-size: 18px;
    margin-left: 40px;
    color: #2d2d2d;
    vertical-align: top;
}
.b-item:last-child {
    margin-left: 0px;
}

.b-item img {
    width: 128px;
    height: auto;
    border: solid 1px #d0d0d0;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 1px 1px black;
    background-color: white;
}

.b-item a,
.b-item a:hover,
.b-item a:visited,
.b-item a:link,
.b-item a:focus {
    color: #2d2d2d;
}

.aboutus-section {
    background-color: #efefef;
    padding: 0px;
    width: 100%;
    height: 520px;
}
.t-grid {
    padding: 40px;
    text-align: center;
}

.t-item {
    display: inline-block;
    
    font-size: 16px;
    margin-left: 120px;
    color: #2d2d2d;
    vertical-align: top;

    background-color: transparent;
    width: 400px;
    height: 300px;
    
    perspective: 1000px;
}

.t-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.t-item:last-child {
    margin-left: 0px;
}

.t-item:hover .t-item-inner {
    transform: rotateY(180deg);
}

.t-item img {
    width: 400px;
    height: auto;
    border: solid 1px #d0d0d0;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 1px 1px black;
    background-color: white;
}
.t-item .flip-me {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;

}
.t-item .flipped {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;

    background-color: #dfdfdf;
    color: #2d2d2d;
    transform: rotateY(180deg);
}

.t-item .flipped div {
    padding: 20px;
}

.t-item div {
    font-family: 'Heebo-Regular';
    font-size: 16px;
}

.t-item .legendary-name {
    font-family: 'Heebo-Bold';
    font-size: 18px;
}

.events-section {
    background-color: #fff;
    padding: 0px;
    width: 100%;
    height: 350px;
}

.e-grid {
    padding: 20px;
    text-align: center;
}

.e-item {
    display: inline-block;
    vertical-align: top;
    width: 15%;
    margin-left: 40px;
}
.e-item:last-child {
    margin-left: 0px;
}
.e-item div:first-child { height:40px; }

.e-grid .disclaimer {
    margin-top: 25px;
    vertical-align: bottom;
    font-size: 13px;
}

.faq-section {
    background-color: #eef3fa;
    padding: 0px;
    width: 100%;
    min-height: 120px;
}

.faq-grid {
    padding: 0px;
    text-align: right;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #efefef;
    font-family: 'Heebo-Regular';
    font-size: 16px;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: right;
    outline: none;
    /*transition: 0.4s;*/
    border: none;
    border-bottom: solid 3px #fff;
}

.accordion::before {
    content: "+";
    font-size: 20px;
    margin-left: 12px;
}

.active, .accordion:hover {
    background-color: #fff;
    content: "-";
}

.accordion.active::before {
    content: "-";
    font-size: 20px;
}

.accordion.active {
    border:none;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 9px 18px;
    background-color: #fff;
    display: none;
    overflow: hidden;
    border: none;
    border-bottom: solid 3px #fff;
}

.panel p {
    font-family: 'Heebo-Bold';
    font-size: 16px;
    margin-right: 18px;
    color: #158C89;
}

.panel p a,
.panel p a:hover,
.panel p a:visited,
.panel p a:link,
.panel p a:focus {
    color: #158C89;
}


.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.news-grid .headline {
    position: absolute;
    top: 120px;
    right: 9vw;
}

.news-grid .headline img {
    width: 360px;
    height: auto;
}
.news-grid .sub-headline {
    position: absolute;
    top: 270px;
    right: 6vw;
    width: 480px;
    font-size: 36px;
    text-align: center;
    color: #fff;
    font-family: 'Heebo-Bold';
}

.news-grid .sub-headline .slogan {
    color: #fff;
    font-family: 'Heebo-Bold';
}
.news-grid .sub-headline .action {
    margin-top: 15px;
}

.news-grid .sub-headline .action button {
    background-color: #fff;
    color: #4800C0;
    font-family: 'Heebo-Bold';
    padding: 5px 15px;
    font-size: 40px;
    border: solid 1px #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
}

.news-grid .sub-headline .action button:hover,
.news-grid .sub-headline .action button:link,
.news-grid .sub-headline .action button:visited,
.news-grid .sub-headline .action button:active {
    background-color: #666;
    color: #fff;
    border: solid 1px #fff;
    cursor: pointer;
}

.news-grid .sub-headline .notes {
    color: #fff;
    font-family: 'Heebo-Regular';
    font-size: 14px;
    margin-top: 10px;
}
.news-grid .sub-headline .notes a,
.news-grid .sub-headline .notes a:visited,
.news-grid .sub-headline .notes a:link {
    color: #fff;
    text-decoration: underline;
}
.news-grid .sub-headline .notes a:hover,
.news-grid .sub-headline .notes a:focus {
    color: #ebebeb;
    text-decoration: underline;
}

.schedule-section {
    background-color: #fff;
    padding: 0px;
    width: 100%;
    min-height: 100%;
}

#my-test iframe {
    width: 360px;
    height: 720px;
}

.details {
    margin-right: 100px;
    margin-top: 15px;
    text-align: right;
    width: 480px;
}
.msg {
    padding-top: 10px;
    font-family: 'Heebo-Regular';
    font-size: 18px;
    color: red;
}

#general div,
#comp div {
    width: 98%;
}
#general div table,
#comp div table {
    width: 100%;
}


@media screen and (max-width: 1024px) {
    .btnPlay {
        top: 35%;
        left: 45%;
    }

    .news-section {
        padding: 45px 0px 0px 0px;
        background-color: #fff;
        background-image: url(../assets/images/bridge_1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height: 210px;
        max-height: 210px;
        overflow: hidden;
    }

    .news-grid .headline {
        top: 15px;
        right: 0px;
    }

    .news-grid .sub-headline {
        top: 90px;
        right: 10px;
        width: 160px;
        font-size: 13px;
    }

    .news-grid .headline img {
        width: 180px;
        height: auto;
    }

    .news-grid .sub-headline .action {
        margin-top: 10px;
    }
    .news-grid .sub-headline .action button {
        padding: 5px 15px;
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
    }

    .news-grid .sub-headline .notes {
        font-size: 11px;
    }
    .news-grid .sub-headline .notes .nq {
        display: none;
        visibility: hidden;
    }

    .s-grid {
        padding: 30px 0px;
    }

    .actions-section, .btn-section {
        box-sizing: border-box;
        overflow: hidden;
        height: auto;
        font-size: 0px;
    }

    .btn-section {
        margin-bottom: 80px;
    }

    .actions-section .actions-box-grid .box, .btn-section .btn-box-grid .box {
        float: none;
        width: 100%;
        padding: 0px;
    }

    .actions-section .actions-box-grid .box .box-image img, .btn-section .btn-box-grid .box .box-image img {
        width: 100%;
        height: auto;
    }

    .actions-box-grid, .btn-box-grid {
        display: block;
    }

    .q-grid {
        padding: 10px;
    }
    .q-txt {
        font-size: 18px;
    }

    .benefits-section {
        height: auto;
    }

    .b-item {
        display: inline-block;
        width: 45%;
        font-size: 15px;
        color: #2d2d2d;
        margin: 10px;
    }

    .b-item {
        margin-left: 0px;
    }

    .events-section {
        height: auto;
    }

    .e-item {
        vertical-align: top;
        display: inline;
        width: 90%;
        font-size: 15px;
        margin: 0px;
    }

    .e-item {
        margin-left: 0px;
    }

    .e-item .e-title {
        display: inline-block;
        width: 60%;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .links.txt, .footer-links-container {
        visibility: hidden;
        display: none;
    }

    footer {
        background-color: #2d2d2d;
        height: 25px;
    }
    .join-mobile {
        visibility: visible;
        display: block;
        text-align: center;
        color: #ffcc00;
        font-family: 'Heebo-Bold';
        font-size: 32px;
        margin-top: 5px;
    }
    .join-mobile a,
    .join-mobile a:hover,
    .join-mobile a:visited,
    .join-mobile a:link,
    .join-mobile a:focus {
        color: #ffcc00;
    }

    .aboutus-section {
        width: 100%;
        height: 720px;
    }

    .t-grid, .b-grid {
        padding: 20px;
        text-align: center;
    }

    .t-item img {
        width: 320px;
        height: auto;
        
    }

    .t-items {
        display: inline-grid;
    }

    .t-item {
        display: block;
        width: 320px;
        height: 240px;
        margin-left: 0px;
        margin-bottom: 60px;
    }

    #my-test iframe {
        width: 100%;
        height: 720px;
    }
    .details {
        margin: 10px auto;
    }
    .details {
        text-align: center;
        margin-right: 0px;
        margin-top: 15px;
        width: 90%;
    }

}

/* IE10+ CSS styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  
  .main-slider-section .more-news .inner-content a {
    color: inherit;
  }
}