@import url("CMS.css");
@import url("menu.css");
@import url("login.css");
@import url("buttons.css");

/******************
    can use color picker to select hover colors 10% darker:
    https://www.w3schools.com/colors/colors_picker.asp
    can use any free font from https://fonts.google.com/
    use scroll-padding??
    case switching??
*******************/

:root {
    --text: #333;
    --light: #fcfcfc;
    --dark: #212324;
    --primary: #0c3253; /*navy*/
    --primary-hover: #135086;
    --secondary: #a2ce46; /*lime*/
    --secondary-hover: #8bb530;
    --secondary-btn-text: var(--dark);
    --info: #3a65b0; /*blue*/
    --info-hover: #2d4d86;
    --shaded: #ddd;
    --gray: #eee;
    --disabled: #777;
    --shadow: rgba(0,0,0,0.15);
    --dark50: rgba(0,0,0,0.5);
    --navbkg: var(--dark50);
    --navtext: var(--light);
    --navactive: var(--secondary-hover);
    --navbkg-sticky: rgba(255,255,255,1);
    --navtext-sticky: var(--dark);
    --mobile-button-bkg: var(--light);
    --mobile-button: var(--primary);
    --mobile-item-bkg: var(--gray);
    --mobile-border: var(--shaded);
    --mobile-item: var(--text);
    --mobile-bkg-hover: var(--secondary);
    --mobile-item-hover: var(--dark);
    --footer: var(--primary);
    --footer-text: var(--light);
    --footer-2: var(--dark50);
    --radius-base: 0.4rem;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --base-font-size: 16px;
    --font-family-sans-serif: -apple-system, 'Atkinson Hyperlegible', 'Montserrat', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-family-serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-family-headings: var(--font-family-sans-serif);
}
body, td, p, li, label {
    font-family: var(--font-family-sans-serif);
    font-size: var(--base-font-size);
    font-weight: 400;
    color: var(--text);
    line-height: 1.85em;
}
h1, h2, h3, h4 {
    display: block;
    font-family: var(--font-family-headings);
    font-weight: 700;
}
h1 {
    padding-top: 90px;
    padding-left: 10px;
    font-size: 2em;
}
    h1 small {
        font-family: var(--font-family-sans-serif);
        font-size: var(--base-font-size);
    }
h2 {
    margin-top: 30px;
    margin-bottom: 4px;
    font-size: 1.7em;
}
h3 {
    font-size: 1.3em;
}
h4 {
    margin: 10px 0 4px 0;
    font-size: 1.1em;
    font-weight: 700;
}

#banner-site,
#banner-activities,
#banner-agenda,
#banner-attire,
#banner-destination,
#banner-faq,
#banner-hotel {
    background-color: var(--shaded);
    background-position: center center;
    background-image: none;
    width: 100%;
    height: 180px;
    color: var(--text);
}
/********************
    main content area
****************************/
#wrapper {
    position: relative;
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -200px;
    /* Pad bottom by footer height */
    padding: 0 0 200px 0;
}
.main-area {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100%;
}
#timeout_warning {
    display: none;
    background-color: var(--light);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
a {
    color: var(--info);
    text-decoration: underline;
}
    a:hover {
        color: var(--info-hover) !important;
        text-decoration: none !important ;
    }
/**prevents hyperlinked sup tags from inheriting underlines**/
sup {
    display: inline-block;
    font-size: 0.8em;
    text-transform: none;
}
pre,
code,
kbd,
samp {
    font-family: var(--font-family-monospace);
    font-size: 1em;
}
strong {
    font-weight: 700;
}
blockquote {
    margin-left: 12px;
}
.skip-link {
    background: var(--primary);
    color: var(--light);
    border: none;
    border-radius: 0 0 .25em .25em;
    text-decoration: none;
    height: 40px;
    left: 34%;
    padding: 12px 16px;
    position: absolute;
    transform: translateY(-100%);   
    transition: transform 0.5s;
}
    .skip-link:visited,
    .skip-link:hover {
        color: var(--light);
        text-decoration: underline;
    }
    .skip-link:focus {
        color: var(--light);
        text-decoration: underline;
        transform: translateY(0%);
        z-index: 1000;
    }
.table th {
    border-top: none !important;
}
.hidden {
    display: none;
    visibility: hidden;
    height: 0;
}
.disabled {
    color: var(--disabled);
    font-style: italic;
}
.inset {
    margin-left: 12px;
}
.text-red {
    font-weight: 600;
    color: var(--danger);
}
.highlighter {
    background-color: rgba(0, 255, 255, 0.5);
    padding: 2px 2px 0 2px;
}
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.row-flex { 
  /* the bs.4 base row class */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.row-dark, .row-gray, .row-light {
    margin-left: 0;
    margin-right: 0;
    padding: 20px 12px;
    clear: both;
    overflow: hidden;
}
.row-dark {
    background-color: var(--shaded);
}
.row-dark .table td {
    border-color: #ccc;
}
.row-gray {
    background-color: var(--gray);
}
.row-gray .table td {
    border-color: #ddd;
}
.row-light {
    background-color: var(--light);
}
.intro {
    font-size: 20px;
    font-weight: 600;
    padding-top: 20px;
}
h2 + .intro {
    padding-top: 10px;
}
.condensed {
    line-height: 1.1em;
}
.pad-top {
    padding-top: 1em;
}
.margin-top {
    margin-top: 1em;
}
.pad-bottom {
    padding-bottom: 1em;
}
.margin-bottom {
    margin-bottom: 1em;
}

/*****************
    used on destination.aspx
***********************/
#resort-banner {
    background: url(../../images/venue/resort-bg.jpg) no-repeat center center;
    background-size: cover;
    min-height: 500px;
}

#hotel-bkg {
    background: url(../../images/venue/hotel-bg.jpg) no-repeat center center;
    background-size: cover;
}
    #hotel-bkg h3 {
        margin: 20px 0;
        color: var(--light);
        text-align: center;
    }
    #hotel-bkg p {
        color: var(--light);
        text-align: center;
    }
/*****************
    used on agenda.aspx with card style
***********************/
.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.nav-link {
    display: block;
    padding: 0.5rem .85rem;
    text-decoration: none;
}
.agenda-tabs {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-radius: 4px;
}
    .agenda-tabs .tab-pane {
        padding: 30px 0 20px 0;
        background-color: #fff;
    }
        .agenda-tabs .tab-pane h2,
        .agenda-tabs .tab-pane p {
            padding-left: 22px;
        }
        .agenda-tabs .tab-pane ol,
        .agenda-tabs .tab-pane ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .agenda-tabs .tab-pane > ol li,
        .agenda-tabs .tab-pane > ul li {
            padding: 16px 20px;
            border-top: 1px solid #ddd;
        }

        .agenda-tabs .tab-pane ul li ul.subul {
            list-style-type: circle;
        }
        .agenda-tabs .tab-pane ul li ol.subul {
            list-style-type: decimal;
        }
            .agenda-tabs .tab-pane ul li ul.subul li,
            .agenda-tabs .tab-pane ul li ol.subul li {
                padding: 0;
                margin: 0 30px;
                border: none;
            }

/*****************
    used on traveldocs.aspx
    for visa widget styles
***********************/
#cibtvisareqwidget {
    box-shadow: 1px 2px 12px var(--shadow);
}

/*****************
    used on q and a page
***********************/
/* Style the button that is used to open and close the collapsible content */
h3.q-collapsible {
    font-family: var(--font-family-sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 2em;
    border-bottom: 1px solid var(--shaded);
    margin: 8px 0;
    padding: 0 18px;
    overflow: hidden;
    cursor: pointer;
}
    .q-collapsible:after {
        content: '\2B'; /* 02795 Unicode character for plus sign (+) */
        font-size: 2em;
        color: var(--primary);
        float: right;
        margin-left: 5px;
    }
    .q-collapsible:focus {
        border: none;
    }
    .q-collapsible > a {
        color: var(--text);
        text-decoration: none;
    }
    .q-collapsible:hover {
        background-color: var(--shaded);
    }
    .q-collapsible.active {
        color: var(--primary);
    }
        .q-collapsible.active:after {
            content: '\2212'; /* Unicode character for minus sign (-) */
            font-size: 1.8em;
        }
/* Style the collapsible content. Note: hidden by default */
.a-content {
    display: none;
    overflow: hidden;
    padding: 0 18px;
    max-width: 820px;
}

.section-toggle {
    cursor: pointer;
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/*****************
     modals 
 ***********************/
.modal-header h1 {
    text-align: left;
    color: var(--text);
    font-size: 2em;
}
.modal-body {
    max-height: 500px;
}
    .modal-body .jumbotron-fluid/*, .modal-body img*/ {
        display: none !important;
    }
    .modal-body div {
        /*width: 100% !important;
        margin: 10px 0;
        padding: 0 10px;*/
    }
/* used on confirm page */ 
    #modalAbandon a.btn-block, 
    #modalAbandon input.btn-block {
        width: 96%;
        white-space: normal;
        text-transform: none;
        letter-spacing: 0;
        font-size: 16px;
        font-weight: normal;
    }
    #modalAbandon a.btn-block, 
    #modalAbandon input.btn-block {
        margin-top: 4px;
    }
button.close {
    box-shadow: none;
}

/* ----------------------------------*/
/* Scroll Top Arrow */
/* ----------------------------------*/
.scroll-button {
    width: 56px;
    height: 56px;
    line-height: 56px;
    position: fixed;
    bottom: 60px;
    right: 20px;
    text-align: center;
    padding-left: 12px;
    font-size: 20px;
    background: var(--secondary);
    border-radius: var(--radius-base);
    z-index: 99;
    display: none;
    transition: none;
    -o-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    box-shadow: 0px 3px 10px -3px var(--shadow);
    scroll-behavior: smooth;
}
footer.main-footer a.scroll-button {
    color: var(--light) !important;
}
.scroll-button:focus, .scroll-button:hover {
    outline: none;
    box-shadow: 0px 10px 15px -3px var(--shadow);
    transform: translateY(-2px);
    background: var(--info);
    text-decoration: none;
    color: var(--light);
}
.to-content {
    display: none;
}
/*****************
    used on global footer 
***********************/
footer.main-footer {
    height: auto;
    min-height: 140px;
    position: relative;
    background-color: var(--footer);
    padding: 30px 0 100px 0;
    margin: 0 auto;
    overflow: hidden;
    z-index: 200;
}
    footer.main-footer h2 {
        color: var(--footer-text);
        margin-top: 0;
        font-size: 22px;
    }
    footer.main-footer .fa-solid, 
    footer.main-footer .fa-regular, 
    footer.main-footer .fa-light, 
    footer.main-footer .fa-brand {
        font-size: 1em;
        padding-right: 12px;
    }
footer.main-footer ul {
    list-style: none;
    margin: 0 0 12px 0;
    padding-left: 0;
}
    footer.main-footer ul.contact li {
        font-size: 1em;
        font-weight: 600;
        line-height: 1.8em;
        color: var(--footer-text);
    }
    footer.main-footer h3 {
        color: var(--footer-text);
        margin-bottom: 0;
        font-size: 22px;
    }
    footer.main-footer p {
        font-size: 0.8em;
        color: var(--footer-text);
        line-height: 1.25em;
    }

footer.main-footer a {
    display: inline-block;
    color: var(--footer-text);
    text-decoration: none;
}
        footer.main-footer a:visited, 
        footer.main-footer a:hover {
            text-decoration: underline;
        }
    #footer-copyright {
        position: absolute;
        bottom: 0;
        background-color: var(--footer-2);
        width: 100%;
        text-align: center;
        padding-top: 10px;
        margin: 0;
    }
    #footer-copyright p {
        color: var(--light);
        font-size: .9em;
        line-height: 2em;
    }

/*************************** 
    Small grid (tablets)
*************************/
@media (min-width: 576px) {

/*****************
    creates banner background to page titles
***********************/
    #banner-site,
    #banner-activities,
    #banner-agenda,
    #banner-attire,
    #banner-destination,
    #banner-faq,
    #banner-hotel 
    {
        /* The image used */
        background-image: url(../../images/slides/01.jpg);
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /* Set a specific height */
        height: 100%;
        width: 100%;
        min-height: 860px;
        max-height: 1900px;
    }
    #banner-activities {
        background-image: url(../../images/slides/activities.jpg);
        background-size: cover;
    }
    #banner-agenda {
        background-image: url(../../images/slides/agenda.jpg);
        background-size: cover;
    }
    #banner-attire {
        background-image: url(../../images/slides/attire.jpg);
        background-size: cover;
    }
    #banner-destination {
        background-image: url(../../images/slides/destination.jpg);
        background-size: cover;
    }
    #banner-faq {
        background-image: url(../../images/slides/faq.jpg);
        background-size: cover;
    }
    
    
    h1 {
        text-align: center;
        padding-top: 5%;
        font-size: 2.625em;
        line-height: 1.6em;
        color: var(--light);
        letter-spacing: 1px;
    }
        h1 small {
            display: inline-block;
            /*background: var(--dark50);*/
            margin: -15px auto 0 auto;
            /*padding: 12px 36px;*/
            /*border-radius: 120px 40px;*/
            font-family: var(--font-family-sans-serif);
            font-size: 20px;
            line-height: 1.85em;
            letter-spacing: 0;
        }

    h2 {
        font-size: 2em;
        letter-spacing: 0.5px;
        color: var(--secondary);
    }
    h3 {
        font-size: 1.625em;
        color: var(--secondary);
    }
    h4 {
        font-size: 1.25em;
        font-weight: 700;
        color: var(--primary);
    }
    h5 {
        font-size: 1em;
        font-weight: 700;
        color: var(--primary);
    }
    .flex-vertical {
        display: flex;
        align-items: center;
    }
    .single-col-text {
        max-width: 780px;
        margin: 0 auto;
        padding: 0 12px;
    }
    .row-dark, .row-gray, .row-light {
        padding: 30px 0;
    }
    h3.q-collapsible {
        font-size: 1.3em;
        padding: 8px 20px 0 20px;
    }
    .modal-content {
        position: absolute;
        margin-top: 120px;
        max-height: 700px;
    }
    .modal-body {
        width: 100% !important;
    }
    #modalAbandon {
        /*used on confirm page for OBT flow*/
        overflow: visible;
    }
    .parallax {
        /* Set a specific height */
        min-height: 500px;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    footer.main-footer h2 {
        margin-top: 0;
        font-size: 26px;
    }
    .to-content {
        display: inline-block;
    }
    footer.main-footer .fa-solid,
    footer.main-footer .fa-regular,
    footer.main-footer .fa-light,
    footer.main-footer .fa-brand {
        font-size: 1.2em;
        padding-right: 12px;
    }
    #footer-copyright p {
        line-height: 3em;
    }
}
/*************************** 
    Med grid 
*************************/
    @media (min-width: 768px) {
        .navigation #menu-button {
            display: none;
        }
        .row-dark, .row-gray, .row-light {
            padding: 50px 0;
        }
        .cms-login-form {
            width: 33%;
        }
    }
/*************************** 
    Large grid
*************************/
    @media (min-width: 992px) {
        .row-dark, .row-gray, .row-light {
            padding: 60px 0;
        }
    }
/*************************** 
    Extra Lg grid 
*************************/
    @media (min-width: 1200px) {
        .row-dark, .row-gray, .row-light {
            padding: 70px 0;
        }
    }
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
}