/*------DESKTOP----------------------------------------------*/

/*------FONT------*/

@font-face {
    font-family: 'Gotham-Book';
    src: url('../fonts/Gotham-Book-OZA.woff2') format('woff2'),
        url('../fonts/Gotham-Book-OZA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamMedium';
    src: url('../fonts/Gotham-Medium.woff2') format('woff2'),
        url('../fonts/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}



/*------STRUCTURE------*/
body {
    margin:0;
    padding:0;
}

.languagebar {
    position:absolute;
    top:30px;
    right:30px;
    width:auto;    
    z-index: 100;
}

.languageactive {
    position:relative;
    float:left;
    margin: 0 15px 0 0;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    width:auto;    
    font-weight: bold;
    color: #F07E26;
}

.language {
    position:relative;
    float:left;
    margin: 0 15px 0 0;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color:white;
    width:auto; 
    text-decoration: none;
}

.kolom90vhmain {
width: 100%;
padding: 0;
height:100vh;    
}



.innercontainer {
    width:98%;   
    margin:0 auto;
    padding:1% 0 1% 0;
    height:auto;
    /*background-color:orange;*/
}

.kolomleft {
    position:relative;
    float:left;
    width:50%;   
    padding:0 0 0 0;
    height:auto;  
}

.kolomright{
    position:relative;
    float:left;
    width:50%;   
    padding:0 0 0 0;
    height:95vh;
}

.kolomrightcontent{
    position:relative;
    float:left;
    width:50%;   
    padding:0 0 0 0;
    height:auto;  
}

.kolomrightmetkrullen{
    position:relative;
    float:left;
    width:50%;   
    padding:0 0 0 0;
    height:87.9vh;  
    background-image: url('../assets/goudkrullen.png');
    background-size: cover; /* Zorgt ervoor dat de afbeelding de hele div bedekt */
    background-position: center; /* Centreert de afbeelding */
    background-repeat: no-repeat; /* Voorkomt herhaling van de afbeelding */
}

.contenthome {
    margin:10% 0 0 10%;
}

.contentthanks {
    margin:10% 0 0 20%;
}

.contentregister {
    width:70%;
    margin:7% 0 10% 10%;
    padding:5%;
    height:auto;
    background-color: rgba(24, 60, 99, 0.8);
}

.spacer15 {
    position:relative;
    float:left;
    clear:both;
    width:100%;
    height:15px;
}

.spacer35 {
    position:relative;
    float:left;
    clear:both;
    width:100%;
    height:35px;
}

.spacer100 {
    position:relative;
    float:left;
    clear:both;
    width:100%;
    height:100px;
}

/*----KNOPPEN-----*/
a.buttonorange {
    display: inline-block;
    padding: 7px 20px 7px 20px;
    background-color: #F07E26;
    color:white;
    font-family: 'Gotham-Book';
        font-weight: normal;
    font-style: normal;
    font-size:20px!important;
    line-height:20px!important;
    text-decoration:none;  
}

button {
    display: inline-block;
    padding: 7px 20px 7px 20px;
    background-color: #F07E26;
    color:white;
    font-family: 'Gotham-Book';
        font-weight: normal;
    font-style: normal;
    font-size:20px!important;
    line-height:20px!important;
    text-decoration:none;    
     border: none; /* Verwijdert 3D-rand */
    box-shadow: none; /* Verwijdert eventuele schaduw */
    outline: none; /* Verwijdert blauwe rand bij focus */
    border-radius: 0; /* Zorgt ervoor dat de hoeken niet afgerond zijn */
    cursor: pointer; /* Geeft aan dat het een klikbaar element is */
}


/*----TEXTSPECS-----*/
h1 {
     font-family: 'GothamMedium';
    font-size:65px;
    line-height: 72px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

h2 {
    font-family: 'Gotham-Book';
        font-weight: normal;
    font-style: normal;
    font-size:36px;
    line-height: 42px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;    
}

h3 {
    font-family: 'Gotham-Book';
        font-weight: normal;
    font-style: normal;
    font-size:28px;
    line-height: 32px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;    
}


p {
    font-family: 'Gotham-Book';
        font-weight: normal;
    font-style: normal;
    font-size:16px;
    line-height: 20px;
}

p a {
    font-family: 'Gotham-Book';
        font-weight: normal;
    font-style: normal;
    font-size:16px;
    line-height: 20px;
    text-decoration: none;
}


/*----SPECS-----*/

.white {
    color: #c0dfe5;
}

.blue {
    color: #005FAA;
}

.bgblue {
    margin: 0;
    padding: 0;
    background-image: url('../assets/unilinparty-2026.jpg'); /* Pas dit pad aan */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optioneel: voor parallax-achtig effect */
    height: 100vh;
}

.orange {
    color: #F07E26;
}

.bgorange {
    background-color: #F07E26;
}

.tcenter {
    text-align: center;
}

.fullimg {
    width:100%;
}

.fullimgvh {
    height:87.5vh;
    text-align: center;
}

.fullimg80 {
    width:80%;
}

.registerwrapper {position:absolute; bottom: 10%; right:0; text-align:right ; padding: 0 10% 0 0}

.partylogo {float:right; width:300px; margin: 10% 10% 0 0; padding: 0 0 0 0 }
.partylogo img {width:100%; }

.betterpartywrapper {float:left; width:300px; margin: 10% 0 0 10%; padding: 0 0 0 0 }
.betterpartywrapper img {width:100%; }

/*-------FORM------*/
.text-input {padding:10px;width:100%;background-color:white;margin: 0 0 10px 0;border:none; }
.select-input {padding:10px;width:103%;background-color:white;margin: 0 0 10px 0;border:none;}

.sub-title {
    color: #F07E26;
    font-family: 'GothamMedium';
    font-size: 16px;
    line-height: 24px;
    margin:10px 0 5px 0;
}

.new-block {
    margin: 0 0 20px 0;
}

#allergie {display:none}
#parkings {display:none;padding:10px;border:1px solid white; margin: 15px 0 15px 0}
.radio-option {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between radio button and text */
    margin-bottom: 5px;
    line-height: 1.5; /* Ensures consistent line height */
}

.radio-input {
    margin: 0; /* Remove default margin */
    transform: translateY(0px); /* Fine-tuning the vertical alignment */
}
.radio-explain {float:left; width:80%;font-size: 14px; line-height:18px; font-family: 'Gotham-Book'; color:white;}
.area-input {width:100%;height:50px; padding:10px;}

.clear {clear:both}
#error {
    color: red;
    padding: 10px 10px 5px 10px;
    border: 1px solid red;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 35px 0; 
    background-color: white;
    font-family: 'Gotham-Book';
    display: none;
}
.volzet {
    color: red;
    font-size: 13px;
    line-height: 24px;
    font-family: 'GothamMedium';
    background-color: white;
    padding: 0 5px 2px 5px;
    height: 13px;
}

/*----FOOTER-----*/

.footerlogo {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    padding: 17px 0 0 0;
}

.footerlogo img {
    height:5vh;
}


/*------MOBILE----------------------------------------------*/

@media only screen and (max-width: 600px) {

/*-----STRUCTURE------*/
    
.innercontainer {
    position:relative;
    float:left;
    width:94%;   
    margin:3%;
    padding:1% 0 1% 0;
    height:auto;
    background-color: rgba(24, 60, 99, 0.7);
}    
    
    .kolom90vhmain {
position: relative;
float:left;
width: 100%;
padding: 0;
height:auto;    
}

.kolom10vhmain {
position: relative;
float:left;    
width: 100%;
padding: 25px 0 25px 0;
  }
    
.kolomleft {
    position:relative;
    float:left;
    width:100%;   
    padding:50px 0 0 0;
    height:auto;  
}

.kolomright{
    position:relative;
    float:left;
    width:100%;   
    padding:0 0 0 0;
    height:auto;
}
    
 .kolomrightcontent{
    position:relative;
    float:left;
    width:100%;   
    padding:0 0 0 0;
    height:auto;  
}
    

.kolomrightmetkrullen{
    position:relative;
    float:left;
    width:100%;   
    padding:0 0 0 0;
    height:auto;  
    background-image: url('../assets/goudkrullen.png');
    background-size: cover; /* Zorgt ervoor dat de afbeelding de hele div bedekt */
    background-position: center; /* Centreert de afbeelding */
    background-repeat: no-repeat; /* Voorkomt herhaling van de afbeelding */
}    
    
/*----SPECS-----*/    
h1 {
    font-family: 'GothamMedium';
    font-size: 50px;
    line-height: 56px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}    
    
    .fullimgvh {
    width:100%;    
    height:auto;
    text-align: center;
}
    
.betterpartywrapper {
    float: left;
    width: 200px;
    margin: 20% 0 0 10%;
    padding: 0 0 0 5%;
}    
    
.partylogo {position:fixed; float:left; top:25px; left: 25px; width:150px; margin: 0 0 0 0; padding: 0 0 0 0 }
.partylogo img {width:100%; }
.partylogo.hide {
    opacity: 0;
    visibility: hidden;
}
    
/*-----FORM------*/
.contentregister {
    width:80%;
    margin:7% 0 0 10%;
    padding:0 5% 50px 0;
    height:auto;
        background-color: rgba(24, 60, 99, 0);
}    
    
.registerwrapper {
    position: relative;
    bottom: 10%;
    right: 0;
    text-align: right;
    padding: 80px 10% 0 0;
}    
    
.contenthome {
    margin:10% 0 0 10%;
    padding:0 0 50px 0;
}    
    
.select-input {padding:10px;width:106%;background-color:white;margin: 0 0 10px 0;border:none;}    
}