/**
Theme Name: Coenergielabel Twenty-Three
Theme URI: https://coenergielabel.nl/themes/coenergielabel/
Author: Tim van der Zouwen
Author URI: https://www.sutedjo.com/
Description: Coenergielabel Website.
Requires at least: 6.1.1
Tested up to: 6.1
Requires PHP: 5.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coenergielabel
Tags: custom

Basic Bootstrap 5.2.1 setup
https://coolors.co/ef3d27-ca191c-4193c6-0651a1-fd694d-9fc9de
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Titillium+Web:ital,wght@0,700;1,600;1,700&display=swap');

:root
{
    --logo: 'assets/images/logo-coenergylabel-rgb.svg';
    --stripes: url("assets/images/stripes.png");

    --blue-dark: rgba(6, 81, 161, 1);
    --blue-dark-80: rgba(6, 81, 161, .8);
    --blue-dark-75: rgba(6, 81, 161, .75);
    --blue-dark-60: rgba(6, 81, 161, .6);
    --blue-dark-50: rgba(6, 81, 161, .5);
    --blue-dark-25: rgba(6, 81, 161, .25);

    --blue: rgba(65, 147, 198, 1);
    --blue-75: rgba(65, 147, 198, .75);
    --blue-50: rgba(65, 147, 198, .5);
    --blue-25: rgba(65, 147, 198, .25);

    --blue-light: rgba(159, 201, 222, 1);
    --blue-light-75: rgba(159, 201, 222, .75);
    --blue-light-50: rgba(159, 201, 222, .5);
    --blue-light-25: rgba(159, 201, 222, .25);

    --red-dark: rgba(202, 25, 28, 1);
    --red-dark-75: rgba(202, 25, 28, .75);
    --red-dark-50: rgba(202, 25, 28, .5);
    --red-dark-25: rgba(202, 25, 28, .25);

    --red: rgba(239, 61, 39, 1);
    --red-75: rgba(239, 61, 39, .75);
    --red-50: rgba(239, 61, 39, .5);
    --red-25: rgba(239, 61, 39, .25);

    --red-light: rgba(253, 105, 77, 1);
    --red-light-75: rgba(253, 105, 77, .75);
    --red-light-50: rgba(253, 105, 77, .5);
    --red-light-25: rgba(253, 105, 77, .25);

    --dark: rgba(29, 32, 31, 1);
    --dark-80: rgba(29, 32, 31, .8);
    --dark-75: rgba(29, 32, 31, .75);
    --dark-60: rgba(29, 32, 31, .6);
    --dark-50: rgba(29, 32, 31, .5);
    --dark-25: rgba(29, 32, 31, .25);

    --white: rgba(255,255,255, 1);
    --white-75: rgba(255,255,255, .75);
    --white-50: rgba(255,255,255, .5);
    --white-25: rgba(255,255,255, .25);

    --font-size: 20px;

    --h1: 2rem;
    --h2: 1.75rem;
    --h3: 1.45rem;
    --h4: 1.25rem;
    --h5: 1.15rem;
    --h6: 1rem;

    --display-1: 2.5rem;
    --display-2: 2.25rem;
    --display-3: 2rem;
    --display-4: 1.75rem;
}
html,body
{
    font-family: 'Montserrat', sans-serif;
}
h1,h2,h3,h4,h5,h6,
.nav-link
{
    font-family: 'Titillium Web', sans-serif;
}
.logo-coenergie
{
    min-height: 60px;
}
.nav-link
{
    color: var(--red-light);
}

#hero
{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-blue
{
    background-color: var(--blue);
}
#usp
{
    background-color: var(--red-light);
}
.btn-orange,
.btn-step-01
{
    background-color: var(--red-light);
}
.btn-orange:hover,
.btn-step-02
{
    background-color: var(--red-dark);
}
.bg-blue-light,
.btn-step-03,
.text-bg-step-01,
.text-bg-step-02,
.text-bg-step-03,
.text-bg-step-04
{
    background-color: var(--blue-light);
}
.btn-step-04,
.bg-dark
{
    background-color: var(--blue-dark) !important;
}
.bg-stripes
{
    background-image: var(--stripes);
    background-repeat: repeat;
}
.bg-stripes.bg-gradient-blue
{
    background-image: linear-gradient(90deg,var(--blue-dark-60) 0%,var(--blue-dark-80) 10%,var(--blue-dark) 80%, var(--blue-dark) 100%), var(--stripes);
    background-repeat: repeat;
}
.bg-stripes.bg-gradient-white
{
    background-image: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,.2) 100%), var(--stripes);
    background-repeat: repeat;
}
.bg-stripes.bg-gradient-white-reverse
{
    background-image: linear-gradient(90deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 100%), var(--stripes);
    background-repeat: repeat;
}


.btn-orange,
.text-white
{
    color: var(--white);
}
.text-white-25
{
    color: var(--white-25);
}
.text-white-50
{
    color: var(--white-50);
}
.text-white-75
{
    color: var(--white-75);
}
.text-orange
{
    color: var(--red-light);
}
.text-red
{
    color: var(--red-dark);
}
.text-blue-light
{
    color: var(--blue-light);
}
.text-blue
{
    color: var(--blue);
}
.text-blue-dark
{
    color: var(--blue-dark);
}
.text-shadow
{
    text-shadow: var(--dark-60) 2px 2px 4px;
}
.card.coenergie-label
{
    border: 4px solid var(--white-75);
    background: var(--white);
    transition: all ease-in-out 300ms;
    min-height: 300px;
}
.card.coenergie-label h3
{
    color: var(--blue-light);
    transition: all ease-in-out 300ms;
}
.card.coenergie-label:hover h3
{
    color: var(--white);
    transition: all ease-in-out 300ms;
}
.card.coenergie-label p.lead
{
    color: var(--blue-light);
    transition: all ease-in-out 300ms;
}
.card.coenergie-label:hover p.lead
{
    color: var(--white);
    transition: all ease-in-out 300ms;
}
.card.coenergie-label:hover
{
    border: 4px solid var(--blue);
    background: var(--blue);
    transform: scale(1.05);
    transition: all ease-in-out 300ms;
}
.card.coenergie-label .btn-label
{
    background-color: var(--blue-light);
    color: var(--white);
    transition: all ease-in-out 300ms;
}
.card.coenergie-label:hover .btn-label
{
    background-color: var(--white);
    color: var(--blue);
    transition: all ease-in-out 300ms;
}
.card.step
{
    border: 4px solid rgba(255,255,255,.25);
    background: none;
    transition: all ease-in-out 300ms;
}
.card.step:hover
{
    border: 4px solid var(--red-dark);
    background-color: var(--red-dark);
    transform: scale(1.025);
    transition: all ease-in-out 300ms;
}
.card.form
{
    border: 2px solid var(--red-light);
}
.form-control,
.form-select,
.form-check-input
{
    border-color: var(--red-light);
}
.form-check-input:checked
{
    background-color: var(--red-light);
    border-color: var(--red-light);
}

/**
 * Custom Switch
 */
span.wpcf7-list-item-label::before,
.custom-control-input span::before
{
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: 1px solid var(--red-light);
}
span.wpcf7-list-item-label::before,
.custom-control-input span::before
{
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
span.wpcf7-list-item-label::before,
.custom-switch .custom-control-input span::before
{
    left: 0;
    width: 1.75rem;
    pointer-events: all;
    border-radius: .5rem;
}
.custom-control-input:checked~span::before
{
    color: #fff;
    border-color: var(--red-light);
    background-color: var(--red-light);
}
span.wpcf7-list-item-label::after,
.custom-switch .custom-control-input span::after
{
    top: calc(.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: var(--white);
    border-radius: .5rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
}
span.wpcf7-list-item-label::after,
.custom-control-input span::after
{
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
    background-color: var(--white);
    border: 1px solid var(--red-light);
}
.custom-switch .custom-control-input:checked~span::after
{
    background-color: var(--white);
    -webkit-transform: translateX(.75rem);
    transform: translateX(.75rem);
}
.custom-control-input
{
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}
.wpcf7-list-item-label
{
    padding-left: 1.5rem;
}

.footer-info ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-info ul li a
{
    color: inherit;
}