@import url("menu.css?v1");

:root{
	--sandstone: #E4D4AC;
	--linen: #F1E9D4;
    --alabaster: #F9F6EE;
    --glacier-white: #EDF4F7;
    --sky-frost: #D2E6EC;
	--ocean-mist: #AECFD6;
    --slate-green: #36505E;
	--deep-ocean: #1D3747;
    --black: #142328;
    --white: #fff;
    --magenta: #EB1F61;
    --magenta-hover: #af1046;
}

*,
:before,
:after {
    box-sizing: border-box;
}

body {
    background: #F2F6EC;
}


html {
    -webkit-text-size-adjust: 100%;
}

body:not(.swing-stories) {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #142328;
    line-height: 1.6;
}

#aspnetForm {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 100vh;
}

#ctl00_myBreadcrum_breadcrum {
    display: none;
}






.wrapper_ballroom_homeswing,
.wrapper_ballroom_asp__homeswing_aspx,
.wrapper_ballroom_ASP__homeswing_aspx {
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: 'Merriweather', serif;
        font-weight: 400;
        margin: 0;
    }

    /* Header section */

    .intro-block {
        color: #f2f6ec;
        background: #3a5b53;
        box-shadow: 0 0 0 100vmax #3a5b53;
        clip-path: inset(0px -100vmax 0px -100vmax);
        display: flex;
        padding: 40px 0 100px;
    }

    .intro-title, .intro-text{
        width: 50%;
    }

    .intro-title h1{
        color: #f2f6ec;
        /* font-size: 64px; */
        font-size: clamp(2.375rem, 1.7298rem + 3.1863vw, 4rem);
    }

    .intro-text p {
        /* font-size: 23px; */
        font-size: clamp(1.125rem, 1.0009rem + 0.6127vw, 1.4375rem);
        margin: 0;
        margin-bottom: 12px;
    }
    /* End header section */


    .tileset--content{
        display: none;
    }

    #dashboard-tegels {
        margin-top: -50px;
    }


    .tile{
        position: relative;
        margin: 0 auto;
        display: flex;
        width: 100%;
        max-width: 1040px;
        min-height: 300px;
        background: #fff;
    }

    .tile img {
        max-height: 400px;
        width: 100%;
        max-width: 365px;
        object-fit: cover;
        overflow: hidden;
    }

    .tile h2{
        font-weight: 700;
        font-size: 32px;
        color: #3a5b53;
        margin-bottom: 12px;
    }

    .tile p{
        margin: 0;
        font-size: 16px;
        color: #000;
    }

    .tile__section--right {
        padding: 40px 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .tile a{
        font-family: Inter, sans-serif;
        text-decoration: underline 1px #DB1457;
        text-underline-offset: 8px;
        color: #DB1457;
        font-size: 18px;
        font-weight: 500;
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .tile a:hover{
        color: #000;
        text-decoration: underline 1px #000;
    }

    .tileset--content--items {
        flex-wrap: wrap;
        display: flex;
        row-gap: 40px;
        margin-bottom: 40px;
    }

    .nieuw-block {
        position: absolute;
        top: 0;
        right: 0px;
        height: 150px;
        z-index: 101;
        color: #FFF;
        font-weight: bold;
        overflow: hidden;
        font-size: 15px;
    }

    .nieuw-inner-block {
        width: 327px;
        padding: 8px 0px 5px 63px;
        margin: -11px -109px 0 0px;
        background: #00A694;
        color: #fff;
        font-weight: bold;
        transform: rotate(40deg);
        box-sizing: border-box;
        text-align: center;
    }

    .nieuw-text {
        letter-spacing: 0.08em;
    }

    .poweredby-text {
        margin: 0 auto;
        font-size: 0.8em;
        border-radius: 5px;
        width: fit-content;
        padding: 10px;
        background: rgba(255, 255, 255, 0.9);
        color: #3a3a3a;
        text-align: center;
        margin-bottom: 40px;
    }

    .poweredby-text a{
        text-decoration: none;
        color: #3a3a3a;
        font-weight: bold;
    }

    .poweredby-text a:hover{
        text-decoration: underline;
    }


    .poweredby-text p {
        margin: 0;
        
    }

}






/* Start login page */

.wrapper_ballroom_ASP__login_aspx{
    #page_login{
        padding-top: 60px;
    }

    .b_btn {
        color: var(--white);
        background: var(--magenta);
        border: none;
        padding: 32px;
        font-size: clamp(1.125rem, 1.458vw, 1.75rem);
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
    }

    .container_loginfield {
        max-width: 825px;
    }

    #page_login input{
        padding: 16px 32px;
        width: 100%;
        font-size: clamp(1.125rem, 1.458vw, 1.75rem);
    }

    #page_login .b_btn{
        margin-bottom: 24px;
        font-size: 24px;
    }

    #login_leftside h1{
        padding-top: 30px;
        margin-bottom: 24px;
    }

    .loginfield{
        padding-bottom: 40px;
    }

    a {
        text-decoration: underline 1px #DB1457;
        text-underline-offset: 8px;
        color: #DB1457;
        font-size: 18px;
        font-weight: 500;
    }
}

/* End login page */



@media screen and (max-width: 1200px) {
    .home-content {
        padding: 0 15px;
    }
}

@media screen and (max-width: 850px) {
    .intro-block {
        flex-direction: column;
        align-items: center;
    }

    .intro-title, .intro-text{
        width: 95%;
    }
    .intro-title{
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 599px) {
    .tile {
        flex-direction: column;
    }
    .tile img {
        max-height: 250px;
        width: 100%;
        max-width: 100%;
    }
    .tile__section--right {
        padding: 30px;
    }
    .tile__section--link {
        margin-top: 20px;
    }
    .intro-title h1 {
        word-break: break-word;
    }
}

@media screen and (max-width: 400px) {
    .home-content {
        min-width: 250px;
    }
}