/*
Theme Name: SmitPRO child
Theme URL: https://smitpro.nl/
Description: SmitPRO theme
Author: SmitPRO Webdesign & Hosting
Author URL: https://smitpro.nl/
Template: Divi
Version: 2.1
Text Domain: SmitPRO-child
*/ 

/* tekst 'jaartal + sitenaam'*/
#footer-info {
    color: #72644b !important;
	font-family: 'Harmonia', Helvetica, Arial, Lucida, sans-serif;
    text-transform: lowercase;
}
/* tekst 'SmitPRO dé website bouwer | Privacybeleid | Algemene voorwaarden'*/
#footer-info a {
   	color: #72644b !important;
	font-family: 'Harmonia', Helvetica, Arial, Lucida, sans-serif;
    text-transform: lowercase;
}
/* inlog knop */
input#wp-submit {
    width: 100%;
	background-color: #0f4053;
}
/* Terug naar 'sitenaam' knop */
p#backtoblog {
    display: none;
}
/* achtergrond van de login pagina */
body.login {
	background-image: url("");
	background-color: #f2f2f2;
	background-position: center center;
}
/* logo boven het inlog form */
/* body.login div#login h1 a {
	background-image: url(" https://smitpro.nl/sp-content/img/logo.png ");
	width: 300px;
	height: 163px;
	background-size: 300px 163px;padding-bottom: 2px;
} */

/* login form */
#login form#loginform, #login form#registerform, #login form#lostpasswordform {
    padding: 26px 24px 46px 25px;
    border-radius: 10px;
    box-shadow: 0 1px 50px rgba(2,2,2,0.3);
}


/*Buttons sellabees site*/

/*vacatuur button*/
.vacature-knop{
    display: flex;
    width: 34%;
    background-color: #FAB732;
    color: white;
    border: none;
    border-radius: 125px;
    font-family: 'Poppins';
    font-size: 18px;
    align-items: center;
    height: 35px;
}
.vacature-text{
    padding-left: 5%;
}
.vacature-aantal{
    margin-left: 3%;
    background-color: #D3961D;
    border-radius: 50px;
    width: 11%;
}

.button-width-400 {
    width: 200px; /* Set your desired width here */
}

/*else statement button*/
.vacature-knop2{
    display: flex;
    width: 29%;
    background-color: #FAB732;
    color: white;
    border: none;
    border-radius: 125px;
    font-family: 'Poppins';
    font-size: 18px;
    align-items: center;
    height: 35px;
}
.vacature-aantal2{
    margin-left: 3%;
    background-color: #D3961D;
    border-radius: 50px;
    width: 15%;
}
.vacature-text2{
    padding-left: 5%;
}

/*Responsiveness*/

  @media (min-width: 768px) and (max-width: 1023px) {
    
   .vacature-knop{
    width: 35%;
   }
    
  }
 
  @media (min-width: 375px) and (max-width: 424px) {
    
    .vacature-knop{
        width: 66%;
    }
    
  }


/* CSS for cadeauzoeker */
/* CSS for text style */
.quickscanTitle {
    font-family: 'TAN Nimbus', Helvetica, Arial, Lucida, sans-serif;
    color: #949c6b;
    font-size: 36px;
    text-align: center;
    line-height: normal;
}

/* CSS for radio buttons */
input[type="radio"] {
    font-family: 'Harmonia', Helvetica, Arial, Lucida, sans-serif !important;
    color: #72644b !important;
    font-size: 16px !important;
    margin-right: 5px;
    display: none;
}

/* CSS for labels */
label.text-style {
    font-family: 'Harmonia', Helvetica, Arial, Lucida, sans-serif !important;
    color: #72644b !important;
    font-size: 22px;
    padding: 50px;
    border-radius: 20px;
    background-color: #ebc16a;
    cursor: pointer;
    display: inline-flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: calc(20% - 40px); /* Set a fixed width for all labels */
    text-align: center; /* Center align the text */
    margin: 10px; /* Add spacing between the labels */
    margin-bottom: 25px; /* Add bottom margin to push buttons down */
    height: 120px; /* Set a fixed height for the labels */
    line-height: 1.2; /* Ensure proper line spacing */
}


/* Responsive adjustments */
@media screen and (min-width: 768px) and (max-width: 1105px) {
    #slide1 .label-radio-container label.text-style {
        width: calc(33.3333% - 40px); /* Adjust width for three labels in a row */
    }
}

@media screen and (max-width: 1300px) {
    label.text-style {
        font-size: 21px; /* Reduce font size slightly */
    }
}

@media screen and (min-width: 1301px) {
    /* Screens larger than 1300px */
    .slide-container2 .label-radio-container label.text-style,
    .slide-container3 .label-radio-container label.text-style,
    .slide-container4 .label-radio-container label.text-style {
        width: calc(25% - 40px); /* Adjust width for four labels in a row */
    }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
    label.text-style {
        width: calc(25% - 40px); /* Adjust width for four labels in a row */
    }
}

@media screen and (min-width: 425px) and (max-width: 767px) {
    label.text-style {
        width: calc(50% - 20px); /* Set a width for two labels in a row with reduced margin */
    }
}

@media screen and (max-width: 425px) {
    label.text-style {
        width: 100%; /* Set full width for labels on smaller screens */
        margin: 5px; /* Adjust margin for smaller screens */
    }
}

/* CSS for buttons */
button {
    font-family: 'Harmonia', Helvetica, Arial, Lucida, sans-serif !important;
    color: #FAF4E4 !important;
    border-width: 0px !important;
    border-radius: 0px;
    letter-spacing: 0.9px;
    font-size: 13px;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: #C7576F;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #72644b;
}

/* Ensure the "Volgende" button is always on the far right */
button:last-child {
    float: right;
}

/* Ensure the "Vorige" button is always on the far left */
button:first-child {
    float: left;
}

.notification {
    background-color: #ffa500; /* Orange background */
    color: #ffffff; /* White text */
    padding: 10px;
    margin-top: 10px; /* Adjust margin as needed */
    text-align: center;
}

/* Adjust the position of the "Volgende" button on the first slide */
#slide1 button {
    float: right;
}

/* Add margin on top and bottom of the div */
div.label-radio-container {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.selection-notice {
    background-color: #c7576f;
    color: #ffffff;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
	border-radius: 5px;
	font-family: 'Harmonia', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 16px;
}