@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: calc(100vw / 1460 * 1360);
    max-width: 96vw;
    display: block;
    margin: 0 auto;
}

h1, h2, h3, h4 {
    font-family: 'Lucidity Condensed';
    font-size: calc(100vw / 1460 * 80);
    font-weight: 400;
    margin: 0;
}

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

/* section specific styles */

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

#Logo {
    width: calc(100vw / 1460 * 620);
    min-width: 300px;
    display: inline-block;
    vertical-align: middle;
}

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

    #Logo h3 {
        font-size: 56px;
        margin-top: 34px;
    }

#BeachDance {
    background-color: #0f6778;
    display: inline-block;
    width: calc(100vw / 1460 * 593);
    min-width: 300px;
    padding: calc(100vw / 1460 * 20);
    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: calc(100vw / 1460 * 80);
        font-weight: 400;
        line-height: calc(100vw / 1460 * 72);
        letter-spacing: -0.03em;
        padding: calc(100vw / 1460 * 36) 0;
        text-transform: uppercase;
    }

#BeachHands {
    height: calc(100vw / 1460 * 637);
    width: 100%;
    background-image: url("/src/images/HoldingHands.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

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

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

    #InviteText #InviteTextImage {
        display: inline-block;
        vertical-align: middle;
        width: calc(100vw / 1460 * 500);
        min-width: 300px;
    }

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

    #InviteText #InviteTextBlock {
        vertical-align: middle;
        display: inline-block;
        width: calc(100vw / 1460 * 710);
        min-width: 300px;
        padding: calc(100vw / 1460 * 20);
    }

        #InviteText #InviteTextBlock p {
            color: #FFFFFF;
            line-height: calc(100vw / 1460 * 36);
            font-size: calc(100vw / 1460 * 26.6668);
        }

#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: calc(100vw / 1460 * 76);
        line-height: calc(100vw / 1460 * 72);
        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: calc(100vw / 1460 * 415);
        vertical-align: top;
        padding: 0 calc(100vw / 1460 * 10);
        width: calc(100vw / 1460 * 318);
        min-width: 280px;
        border-radius: calc(100vw / 1460 * 22);
        display: inline-block;
        line-height: calc(100vw / 1460 * 26);
        text-align: center;
        font-size: calc(100vw / 1460 * 22.6667);
        margin-bottom: calc(100vw / 1460 * 20);
    }

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

    #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: calc(100vw / 1460 * 38.6665);
        line-height: calc(100vw / 1460 * 34);
    }

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

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

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

        #Program #ProgramBox #ProgramImage {
            display: inline-block;
            vertical-align: bottom;
            width: calc(100vw / 1460 * 510);
            min-width: 300px;
        }

            #Program #ProgramBox #ProgramImage img {
                width: 100%;
                height: auto;
            }

        #Program #ProgramBox #ProgramInfo {
            width: calc(100vw / 1460 * 791);
            min-width: 300px;
            display: inline-block;
            vertical-align: top;
            padding: calc(100vw / 1460 * 15) calc(100vw / 1460 * 20);
            font-size: calc(100vw / 1460 * 22.666);
            line-height: calc(100vw / 1460 * 30);
        }

            #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: inline-block;
        width: calc(100vw / 1460 * 944);
        min-width: 300px;
        text-align: left;
        background-color: #d0f6ff;
        color: #1a396b;
        padding: calc(100vw / 1460 * 10) calc(100vw / 1460 * 20);
        height: 720px;
    }

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

#accommodation #accommodationBox #accommodationText {
    display: inline-block;
    width: 100%;
    min-width: 300px;
    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: calc(100vw / 1460 * 42);
            font-family: 'Lucidity Condensed';
        }

        #accommodation #accommodationBox #accommodationText #accommodationCode input,
        #accommodation #accommodationBox #accommodationText #accommodationCode button {
            padding: calc(100vw / 1460 * 5) calc(100vw / 1460 * 10);
            font-size: calc(100vw / 1460 * 23.33);
            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;
        }

#accommodation #accommodationBox #accommodationImages {
    display: inline-block;
    vertical-align: top;
}

    #accommodation #accommodationBox #accommodationImages img {
        width: 200px;
        height: auto;
        padding: calc(100vw / 1460 * 10) 0;
        display: inline-flex;
    }

#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%;
}

    #LetUsKnow #LetUsKnowImage {
        width: 46vw;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        padding-top: 20px;
    }

        #LetUsKnow #LetUsKnowImage h2 {
            font-size: 80px;
            line-height: 72px;
            letter-spacing: -2.44px;
            color: #00687a;
            margin-bottom: 31px;
        }

        #LetUsKnow #LetUsKnowImage img {
            width: 98%;
        }

    #LetUsKnow #LetUsKnowText {
        display: inline-block;
        vertical-align: top;
        width: 46vw;
    }

        #LetUsKnow #LetUsKnowText div {
            display: block;
            padding: 20px;
        }

        #LetUsKnow #LetUsKnowText #RSVP {
            background-color: #f1fc71;
            width: 100%;
            height: 429px;
            background-image: url("/src/images/Butterfly.png");
            background-position: bottom left;
            background-repeat: no-repeat;
            background-size: 157px;
            color: #1f2f6b;
        }

            #LetUsKnow #LetUsKnowText#RSVP h3 {
                color: #1f2f6b;
                margin: 5px auto 5px auto;
            }

            #LetUsKnow #LetUsKnowText #RSVP #RSVPCode {
                display: block;
                max-width: 500px;
                background-color: #ea168a;
                padding: 20px;
                margin: 10px auto;
                color: #FFFFFF;
                text-align: center;
                border-radius: 22px;
                border: solid 5px #ea168a
            }

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

                #LetUsKnow #LetUsKnowText #RSVP #RSVPCode input {
                    padding: 5px 10px 5px 10px;
                    font-size: 23.33px;
                    display: block;
                    margin: 5px auto;
                    width: 300px;
                    background-color: #FFFFFF;
                    border: solid 1px #FFFFFF;
                    border-radius: unset;
                    color: #000000;
                    text-align: left;
                }

                #LetUsKnow #LetUsKnowText #RSVP #RSVPCode button {
                    padding: 5px 10px 5px 10px;
                    font-size: 23.33px;
                    display: block;
                    margin: 5px auto;
                    width: 300px;
                    background-color: #ea168a;
                    border: solid 1px #FFFFFF;
                    color: #FFFFFF;
                    cursor: pointer;
                }

        #LetUsKnow #LetUsKnowText #Gifts {
            background-color: #00687a;
            height: 360px;
            width: 100%;
            color: #FFFFFF;
            text-align: center;
            font-size: 20px;
        }

            #LetUsKnow #LetUsKnowText #Gifts h4 {
                font-size: 33.3333px;
            }