@font-face {
    font-family: 'Lucidity Condensed';
    src: url('/src/fonts/lucidity-condensed.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('/src/fonts/luciole-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* global styles */

body {
    font-family: 'Luciole', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 100vw;
    width: 100%;
}

.CenterBox {
    width: 100%;
    display: block;
    margin: 0 auto;
}

h1, h2, h3, h4 {
    font-family: 'Lucidity Condensed';
    font-size: 36px;
    font-weight: 400;
    margin: 0;
}

h3 {
    margin: calc(100vw / 1460 * 5) 0;
    padding: 0;
}

/* section specific styles */

#HeaderRow {
    width: 100%;
    display: block;
    text-align: center;
}

#Logo {
    width: 100%;
    display: block;
    vertical-align: middle;
}

    #Logo img {
        width: 100%;
        height: auto;
    }

    #Logo h3 {
        font-size: 35px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

#BeachDance {
    background-color: #0f6778;
    display: block;
    width: 100%;
    padding: 0px;
    vertical-align: middle;
}

    #BeachDance img {
        width: 100%;
        height: auto;
    }

#BeachsideRomance {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: calc(100vw / 1460 * 20) 0;
    background-color: #c8b3ee;
}

    #BeachsideRomance h1 {
        text-align: center;
        color: #21306d;
        font-size: 27px;
        font-weight: 400;
        line-height: 27px;
        letter-spacing: -0.03em;
        padding: calc(100vw / 1460 * 36) 0;
        text-transform: uppercase;
    }

#BeachHands {
    display: none;
}

#InviteText {
    display: block;
    background-color: #566dc4;
}

    #InviteText #InviteTextImage {
        display: block;
        vertical-align: middle;
        width: 100%;
    }

        #InviteText #InviteTextImage img {
            width: 100%;
            height: auto;
        }

    #InviteText #InviteTextBlock {
        vertical-align: middle;
        display: inline-block;
        padding: 10px 10px 0px 10px;
    }

        #InviteText #InviteTextBlock p {
            color: #FFFFFF;
            line-height: 21px;
            font-size: 15px;
        }

#Special {
    background-color: #00687a;
    padding-bottom: calc(100vw / 1460 * 17);
}

    #Special #WhatMakes {
        display: block;
        color: #FFFFFF;
        margin: 0 auto calc(100vw / 1460 * 15) auto;
        letter-spacing: -calc(100vw / 1460 * 2.4);
        font-size: 30px;
        line-height: 30px;
        text-align: center;
        padding: calc(100vw / 1460 * 56) 0 calc(100vw / 1460 * 50) 0;
    }

    #Special #SpecialBox #SpecialBoxes {
        display: block;
        text-align: center;
        padding-bottom: calc(100vw / 1460 * 49);
    }

    #Special #SpecialBox #FoodOnSite,
    #Special #SpecialBox #GamesOnSite,
    #Special #SpecialBox #StayOnSite {
        height: auto;
        vertical-align: top;
        padding: 10px;
        width: auto;
        border-radius: calc(100vw / 1460 * 22);
        display: inline-block;
        line-height: 20px;
        text-align: center;
        font-size: 18px;
        margin: 10px 20px;
    }

    #Special #SpecialBox #GamesOnSite {
        background-color: #c8b3ee;
        border: solid calc(100vw / 1460 * 5) #c8b3ee;
        color: #1f2f6b;
    }

    #Special #SpecialBox #FoodOnSite {
        background-color: #f1fc71;
        border: solid calc(100vw / 1460 * 5) #f1fc71;
        color: #1f2f6b;
    }

    #Special #SpecialBox #StayOnSite {
        background-color: #566dc4;
        border: solid calc(100vw / 1460 * 5) #566dc4;
        color: #FFFFFF;
    }

    #Special #SpecialBox h4 {
        font-size: 36px;
        line-height: 36px;
    }

    #Special #SpecialBox img {
        width: auto;
        height: 64px;
        padding-bottom: calc(100vw / 1460 * 49);
    }

#Program {
    background-color: #f1fc71;
    width: 100%;
}

    #Program #ProgramBox {
        background-color: #c8b3ee;
        color: #ffffff;
    }

        #Program #ProgramBox #ProgramImage {
            display: none;
        }

        #Program #ProgramBox #ProgramInfo {
            display: block;
            vertical-align: top;
            padding: 10px;
            font-size: 20px;
            line-height: 30px;
        }

            #Program #ProgramBox #ProgramInfo h3 {
                color: #f82697;
            }

            #Program #ProgramBox #ProgramInfo hr {
                width: 100%;
                border: solid calc(100vw / 1460 * 2) #FFFFFF;
            }

#TheDetails {
    width: 100%;
    background-color: #1f2f6b;
    text-align: center;
}

    #TheDetails #TheDetailsBox #DetailsLogo {
        display: inline-block;
        vertical-align: top;
        width: calc(100vw / 1460 * 369);
        min-width: 300px;
    }

        #TheDetails #TheDetailsBox #DetailsLogo img {
            width: 100%;
        }

    #TheDetails #TheDetailsBox #TravelandAttire {
        display: block;
        width: auto;
        text-align: left;
        background-color: #d0f6ff;
        color: #1a396b;
        padding: 10px;
    }

        #TheDetails #TheDetailsBox #TravelandAttire h3 {
            color: #ff059b;
        }

#accommodation #accommodationBox #accommodationText {
    display: block;
    padding: calc(100vw / 1460 * 5) calc(100vw / 1460 * 25) 0;
    vertical-align: top;
}

    #accommodation #accommodationBox #accommodationText ul li {
        display: inline-block;
        width: 200px;
        padding: 10px 0px;
    }

        #accommodation #accommodationBox #accommodationText ul li.booked {
            text-decoration: line-through;
            color: #a5a5a5;
        }

        #accommodation #accommodationBox #accommodationText ul li a {
            text-decoration: none;
            color: #5a6d9c;
        }

    #accommodation #accommodationBox #accommodationText h3 {
        color: #ff059b;
    }

    #accommodation #accommodationBox #accommodationText #accommodationCode {
        width: calc(100vw / 1460 * 500);
        min-width: 300px;
        background-color: #ea168a;
        padding: calc(100vw / 1460 * 20);
        margin: calc(100vw / 1460 * 10) auto;
        color: #FFFFFF;
        text-align: center;
        border-radius: calc(100vw / 1460 * 22);
        border: solid calc(100vw / 1460 * 5) #ea168a;
    }

        #accommodation #accommodationBox #accommodationText #accommodationCode label {
            font-size: 30px;
            font-family: 'Lucidity Condensed';
        }

        #accommodation #accommodationBox #accommodationText #accommodationCode input {
            padding: calc(100vw / 1460 * 5) calc(100vw / 1460 * 10);
            font-size: 30px;
            width: calc(100vw / 1460 * 300);
            min-width: 250px;
            margin: calc(100vw / 1460 * 5) auto;
            display: block;
        }

        #accommodation #accommodationBox #accommodationText #accommodationCode button {
            background-color: #ea168a;
            border: solid calc(100vw / 1460 * 1) #FFFFFF;
            color: #FFFFFF;
            cursor: pointer;
            padding: calc(100vw / 1460 * 5) calc(100vw / 1460 * 10);
            font-size: 21px;
            width: calc(100vw / 1460 * 300);
            min-width: 250px;
            margin: calc(100vw / 1460 * 52) auto;
            display: block;
        }

#accommodation #accommodationBox #accommodationImages {
    display: none;
}

#KiminorthImages {
    background-color: #c8b3ee;
    width: 100%;
    text-align: center;
    padding: calc(100vw / 1460 * 20) 0;
}

    #KiminorthImages img {
        width: calc(100vw / 1460 * 1364);
        max-width: 96vw;
        height: auto;
    }

#LetUsKnow {
    background-color: #fca267;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    #LetUsKnow #LetUsKnowImage {
        display: block;
        text-align: center;
        padding-top: calc(100vw / 1460 * 20);
    }

        #LetUsKnow #LetUsKnowImage h2 {
            font-size: calc(100vw / 1460 * 80);
            line-height: calc(100vw / 1460 * 72);
            letter-spacing: -calc(100vw / 1460 * 2.44);
            color: #00687a;
            margin-bottom: calc(100vw / 1460 * 31);
        }

        #LetUsKnow #LetUsKnowImage img {
            max-width: 90%;
            height: auto;
        }

    #LetUsKnow #LetUsKnowText {
        display: block;
    }

        #LetUsKnow #LetUsKnowText #RSVP,
        #LetUsKnow #LetUsKnowText #Gifts {
            margin-bottom: calc(100vw / 1460 * 30);
            padding: 10px;
        }

        #LetUsKnow #LetUsKnowText #RSVP {
            background-color: #f1fc71;
            background-image: url("/src/images/Butterfly.png");
            background-position: bottom left;
            background-repeat: no-repeat;
            background-size: 120px;
            height: auto;
            min-height: calc(100vw / 1460 * 429);
            color: #1f2f6b;
            padding-bottom: 88px;
        }

            #LetUsKnow #LetUsKnowText #RSVP #RSVPCode {
                width: calc(100vw / 1460 * 500);
                min-width: 320px;
                background-color: #ea168a;
                padding: calc(100vw / 1460 * 20);
                margin: calc(100vw / 1460 * 10) auto;
                color: #FFFFFF;
                text-align: center;
                border-radius: calc(100vw / 1460 * 22);
                border: solid calc(100vw / 1460 * 5) #ea168a;
            }

                #LetUsKnow #LetUsKnowText #RSVP #RSVPCode label {
                    font-size: 30px;
                    font-family: 'Lucidity Condensed';
                }

                #LetUsKnow #LetUsKnowText #RSVP #RSVPCode input {
                    padding: calc(100vw / 1460 * 5) calc(100vw / 1460 * 10);
                    font-size: 30px;
                    width: calc(100vw / 1460 * 300);
                    min-width: 250px;
                    margin: calc(100vw / 1460 * 5) auto;
                    display: block;
                }

                #LetUsKnow #LetUsKnowText #RSVP #RSVPCode button {
                    background-color: #ea168a;
                    border: solid calc(100vw / 1460 * 1) #FFFFFF;
                    color: #FFFFFF;
                    cursor: pointer;
                    padding: calc(100vw / 1460 * 5) calc(100vw / 1460 * 10);
                    font-size: 21px;
                    width: calc(100vw / 1460 * 300);
                    min-width: 250px;
                    margin: calc(100vw / 1460 * 52) auto;
                    display: block;
                }