/* generic */
@font-face {
    font-family: 'leo_head_font';
    src: url("./../fonts/Dosis-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'leo_body_font';
    font-style: normal;
    font-weight: 400;
    src: url("./../fonts/Dosis-Medium.ttf") format("truetype");

}


.mobile_show
{
    display:none;
}

html {
    font-family:  Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.2rem;
    color: #000;
}

p
{
    margin-bottom:1rem;
    line-height: 1.2rem;
    margin-left:1rem;
}
li{
    line-height: 1.1rem;
}
h1, h2, h3 {
    font-family: 'leo_head_font', Arial, sans-serif;
    font-weight: bold;
}

h1 {
    font-size: 3rem;
    color:#642382;
    float:none;
    clear:left;
    margin-bottom:1rem;
    margin-left:1rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.5rem;
    color: #28a532;
    margin-bottom:0.5rem;
    margin-left:1rem;
}




body {
    background-color: #fff;
    margin:0px;


}

a{
    color:#641c76;
}

p.intro
{
    color: #642382;
    font-family: leo_body_font;
    font-size:1.1rem;
    line-height: 1.5rem;
    padding-top:0.2rem;
}


    .site_wrapper {
        float:left;
        width: 100%;


    }

    .header_wrapper {
        width: 100%;

        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        top: 0;
        /* left en right nodig vanwege margin:auto */
        left:0;
        right:0;
        position: fixed;
        z-index:10000;
    }

    .header_slogan
    {
        float: right;margin-top:1rem;font-size: 1.2rem;font-family: 'leo_body_font', Arial, sans-serif;
    }

    .header_wig_logo
    {
        height:2.4rem;
    }

.content_wrapper
{
    width:100%;
    max-width:940px;
    margin-top:7rem;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 2rem;
  /*  margin-bottom: 13.5rem;*/
    overflow: auto;

}

    .footer_links_wrapper
    {
        width: 100%;
      /*  position: fixed;
        bottom:0;
        left:0;
        right:0;*/
        height: 10rem;
        float:left;
    }


.header_top
{
    height:2.5rem;
    margin-top:1rem;
    margin-bottom:1rem;
    margin-left:1.25rem;
    width:calc(100% - 1.25rem);
}

.header_menu
{
    width:calc(100% - 1rem);
    background-color: #28a532;

    padding-right:1rem;
    border-radius: 0.5rem;
    height:3rem;
    font-family: 'leo_body_font';

}
.header_menu ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex
}

.header_menu ul > li {
    display: inline-block;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items:center;
    border-right: solid 1px #498a3b;

}

.header_menu ul > li > a {
    display: block;
    padding-left: 1.25rem;
    padding-right: 1.25rem;


    line-height: 3rem;
    font-size: 1rem;


    text-decoration: none;
    color:#fff;
}

.header_menu ul > li.selected > a, .header_menu ul > li:hover > a {
    background-color:#0d7c1a;
    color:#fff;
}

.header_menu ul > li:first-child > a
{
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.breadcrumbs
{
    float:left;
    width:calc(100% - 1rem);
    max-width:calc(940px - 2rem);
    margin-left:auto;
    margin-right:auto;
    font-size:0.8rem;
    padding-right:1rem;

    margin-top:1rem;
    height:1rem;
    margin-bottom:0.2rem;

    color:#999999;


}
.breadcrumbs a
{
    text-decoration: underline;
    color:#999999;
}

.page_title_wrapper
{
    float:left;
    width:calc(100% - 1rem);
    max-width:calc(940px - 1rem);

    margin-left:auto;
    margin-right:auto;
    height:4.5rem;

    margin-bottom: 1rem;
}

.page_title_wrapper h1
{
    margin-top:1.5rem;
}

.page_title_wrapper h1.lesson
{
    margin-top:1.9rem;
    font-size: 2.5rem;
}

.group_chooser
{
    width:calc(100% - 2px - 2rem);
    border: solid #000 1px;
    overflow:auto;
    margin-top:1rem;
    margin-bottom:0.2rem;
    padding-top:0.5rem;
    margin-left:auto;
    margin-right:auto;
    border-radius: 8px;
    padding-left:1rem;
    padding-right:1rem;
    overflow: hidden;
}

.groep_indicator_wrapper
{
    float:right;
    margin-top:0.8rem;

    margin-bottom:2rem;
}


.lessons_wrapper
{
    width:calc(100% - 2px);
    border: solid #000 1px;
    overflow:auto;
    margin-top:1rem;
    margin-bottom:1rem;
    padding-top:1rem;
    padding-bottom:1rem;
    border-radius: 8px;
}

.downloads_wrapper
{

    width:calc(100% - 2px);
    border: solid #000 1px;
    overflow:auto;
    margin-top:1rem;
    margin-bottom:1rem;
    padding-top:1rem;
    padding-bottom:1rem;
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top:0px;
}

.groep_download_chooser
{
    margin-top:-2rem;
}

ul.opsomming
{
    list-style-type: disc;
    margin-left:1rem;
}

.theme_wrapper
{
    width:calc(100% - 3rem);
    display:grid;

    grid-template-columns: auto 2fr 1fr;
    grid-template-rows: 1fr;

    margin:1rem;
    padding:0.5rem;
    color:#000;
    font-size:0.9rem;

}

.theme_download_wrapper
{
    width:calc(100% - 3rem);
    display:grid;

    grid-template-columns: 4fr 1fr 2fr;
    grid-template-rows: 1fr;

    margin:1rem;
    padding:0.5rem;
    color:#000;
    font-size:0.9rem;

}

.theme_wrapper_even
{
    background-image: url("./../images/row_back_purple.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.theme_wrapper_oneven
{
    background-image: url("./../images/row_back_green.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.theme_wrapper_even h3
{
    color: #641c76;
    margin-bottom:0.5rem;
    font-size:1.2rem;
}

.theme_wrapper_oneven h3
{
    color: #28a532;
    margin-bottom:0.5rem;
    font-size:1.2rem;
}

.theme_content
{
    padding:1rem;
}




.theme_image
{
    width:15rem;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.theme_downloads
{
    padding:1rem;
}

ul.downloads
{
    list-style-type: disc;
    margin-left:1rem;
    padding-left:1rem;
}

.theme_wrapper_even ul.downloads > li > a
{
    color: #641c76;
}

.theme_wrapper_oneven ul.downloads > li > a
{
    color: #28a532;
}

.lesson_intro
{
    float:left;
    width:calc(100% - 2px);
    border: solid #000 1px;
    border-radius: 8px;
    background-image: url("./../images/thema_image.png");
    background-repeat: no-repeat;
    background-position: bottom;
    min-height:220px;
}

.lesson_intro p
{
    color:#641c76;
    font-family: 'leo_body_font', Arial, sans-serif;
    width:45%;
    font-size: 1.1rem;
    line-height: 1.4rem;
    margin-top:1rem;
}

a.action_link
{
    font-family: 'leo_head_font', Arial, sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    color:#c8005a;

}

a.action_link:hover
{
    font-size: 1.2rem;
}

.link_icon
{
    width: 32px;
    margin-right:10px;
    margin-bottom:-0.5rem;
}

a:hover .link_icon
{
    transform: scale(1.2);
}


.lesson_content_wrapper
{
    width:100%;

    display: flex;
    flex-wrap: wrap;
}


.lesson_content_left
{
   display: flex;

    width:calc(67% - 2px - 3rem);
    border: solid #000 1px;
    border-radius: 8px;
    margin-top:1rem;
    padding:1rem;
    margin-right:1rem;
    margin-bottom:1rem;
}

.lesson_content_right
{
    display: flex;


    width:calc(33% - 2px - 2rem);
    border: solid #000 1px;
    border-radius: 8px;
    margin-top:1rem;
    padding:1rem;
    margin-bottom:1rem;
}

.lesson_content_digitaal
{
    float:left;

    width: calc(100% - 2rem);
    background-image: url("./../images/back_digitaal.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding:1rem;
    padding-bottom:2rem;
}

.lesson_content_werkbladen
{
    float:left;
    width: calc(100% - 2rem);
    background-image: url("./../images/back_werkbladen.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding:1rem;
    margin-top:1rem;
    padding-bottom:3rem;
}

.content_box_wrapper
{
    float:left;
    width:calc(100% - 2px);
    border: solid #000 1px;
    border-radius: 8px;
    padding-top:1rem;
}

.content_left
{
    float:left;
    width:68%;
}

.image_right
{
    float:right;
    width:25%;
}





a.button
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    font-family: leo_head_font;
    text-decoration: none;
    border-radius: 1.5rem;
    padding-left:2rem;
    padding-right:2rem;
    font-size: 1.2rem;
    line-height: 2rem;
    margin-left:1rem;
    margin-right:1rem;
    display: inline-block;
}
a.button:hover
{
    transform: scale(1.2);
}




.footer_wrapper
{

    width: 100%;
    height:6rem;
    background-color: #28a532;
}

.footer
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    max-width:940px;
    height:5rem;
}

.footer_text
{
    font-family:  Arial, sans-serif;
    font-weight: normal;
    line-height: 125%;
    font-size:0.90rem;
    color:#fff;
    padding-top:1rem;
    padding-left:5rem;
    margin-left:7rem;
}

.footer_text a
{
    text-decoration: underline;
    color:#fff;
}

.links_wrapper
{
    width: 100%;
    background-color: #fff;
    padding-top:1rem;
    height:5rem;
}
.links
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    max-width:940px;
    height:3rem;

}

.links ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex
}

.links ul > li {
    display: inline-block;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items:center;


}

.links ul > li > a {
    display: block;
    padding-left: 1rem;
    padding-right: 1rem;


    line-height: 3rem;
    font-size: 1rem;


    text-decoration: none;
    color:#000;
}

.theme_go_wrapper
{
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.quote_block_wrapper {
     float: left;
    margin-left: 4rem;
    margin-top: 2rem;

    max-width: calc(940px - 4rem);
}

.quote_wrapper
{
    float:left;width:19.75rem;height:12.875rem;background-image: url('/geldlessen/assets/images/quote_text_back.svg');background-position: top;background-size: contain;background-repeat: no-repeat;
}

.quote
{
    margin-left:2rem;margin-right:3rem;width:14rem;margin-top:2.5rem;text-align: center;
}



.theme_go
{
    font-family: 'leo_head_font', Arial, sans-serif;
    height:6rem;
    width: 6rem;
    margin:0.6rem;
    background-image: url("./../images/les.svg");
    background-repeat: no-repeat;
    background-size: contain;
    float:left;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff;
    padding-left:0.2rem;
}
a:hover  .theme_go
{
    transform: scale(1.2);
}

.groep
{
    font-family: 'leo_head_font', Arial, sans-serif;
    height: 8rem;
    width: 6.4rem;
    margin: 0.7rem;
    background-image: url("./../images/groep.svg?v=2");
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    color: #fff;
    margin-bottom: -0.5rem;
    padding-left: 0.4rem;
    margin-right:0.5rem;
}
a:hover > .groep
{
 transform: scale(1.1);
}

.groep_indicator
{
    font-family: 'leo_head_font', Arial, sans-serif;
    height:3.1rem;
    width: 3.7rem;
    margin:0.3rem 0.4rem 0.3rem 0.4rem;
    background-image: url("./../images/groep_deselected.svg?v=2");
    background-repeat: no-repeat;
    background-size: contain;
    float:left;
    display:flex;
    align-items: center;
    justify-content: center;
    padding-top:0.5rem;
    font-size: 1.8rem;
    color: #fff;
}
a:hover > .groep_indicator
{

    background-image: url("./../images/groep.svg?v=2");

}

.groep_indicator_selected
{
    transform: scale(1.25);
    background-image: url("./../images/groep.svg?v=2");
    z-index:-10;
    position:relative;
}

.groep_download
{
    font-family: 'leo_head_font', Arial, sans-serif;
    width:calc(13% - 2px);
    height: 2.56rem;

    background-color: #ece4ef;
    float:left;
    display:flex;
    align-items: center;
    justify-content: center;

    font-size: 1.25rem;
    color: #000;

    border-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1px solid #ece4ef;
    border-bottom: 1px solid #000;
}

a:hover > .groep_download
{
    background-color: #fff;
    border: 1px solid #000;
    border-bottom: 1px solid #fff;
}
.groep_download_selected
{
    background-color: #fff;
    border: 1px solid #000;
    border-bottom: 1px solid #fff;
}

.groep_download_sep
{
    float:left;
    height: calc(2.56rem + 1px);
    width:calc(1.5%);

    border-bottom: 1px solid #000;
}

.faq_wrapper
{
    margin:1rem;
    margin-bottom: 1.5rem;
}

.faq_link
{
    text-decoration: none;
    color: #28a532;
    font-family: 'leo_head_font', Arial, sans-serif;
    font-size:1.2rem;
}

.faq_icon
{
    margin-right:0.6rem;
    margin-bottom:-0.5rem;
}

.faq_uitleg
{
    margin-top:0.5rem;
    margin-left: calc(1rem + 27px);
    font-size: 0.95rem;
}

.bestellen_even
{
    margin-left:1rem;
    width:calc(610px - 3rem);
    height:calc(70px - 2rem);
    padding:1rem;
    background-image: url("./../images/bestellen_background_paars.png?v=2");
}

.bestellen_even p
{
    margin-left:0;
}

.bestellen_oneven p
{
    margin-left:0;
}

.bestellen_oneven
{
    margin-left:1rem;
    width:calc(610px - 3rem);
    height:calc(70px - 2rem);
    padding:1rem;
    background-image: url("./../images/bestellen_background_groen.png?v=2");
}

.bestellen_even_label, .bestellen_oneven_label
{
    float:left;
    padding: 0.5rem 0 0 0;
    width:calc(380px - 0.5rem);
    font-family: 'leo_head_font', Arial, sans-serif;
    font-size:1.2rem;
}

.bestellen_oneven_label
{
    color: #28a532;
}
.bestellen_even_label
{
    color:#641c76;
}

.bestellen_even_button, .bestellen_oneven_button
{
    float:right;
}

.spoorboekje
{
    width:calc(100% - 64px);
    height:116px;
    display: flex;
    align-items: center;
    -webkit-align-items:center;

    padding-left:64px;

    font-family: 'leo_head_font', Arial, sans-serif;
    color: #641c76;
  font-size:1.4rem;
    line-height: 140%;
    background-repeat: no-repeat;
    background-position: left;
}
a.spoorboekje_link
{
    text-decoration: none;
}
.spoorboekje_top
{
    background-image: url("./../images/spoorboekje_top.png?v=2");

}

.spoorboekje_middle
{
    background-image: url("./../images/spoorboekje_middle.png?v=2");

}

.spoorboekje_bottom
{
    background-image: url("./../images/spoorboekje_bottom.png?v=2");

}

a.spoorboekje_top_link:hover .spoorboekje_top
{
    background-image: url("./../images/spoorboekje_top_hover.png?v=2");

}

a.spoorboekje_middle_link:hover .spoorboekje_middle
{
    background-image: url("./../images/spoorboekje_middle_hover.png?v=2");

}

a.spoorboekje_bottom_link:hover .spoorboekje_bottom
{
    background-image: url("./../images/spoorboekje_bottom_hover.png?v=2");

}

label
{
    display:block;
}

input
{
    font-size: 1rem;
    line-height:150%;
    width:80%;
}

.lesson_intro
{
    width:45%;
}

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

    .mobile_show
    {
        display: block;
    }

    .site_wrapper
    {
        margin-left: 2%;
        margin-right: 2%;
        width:96%;
    }

    .header_slogan {
        float: right;
        margin-top: 1rem;
        font-size: 1rem;
        font-family: 'leo_body_font', Arial, sans-serif;
    }

    .header_wig_logo {
        height:auto;
        width:35%;
    }

    h1
    {
        font-size:1.6rem;
    }

    .theme_image
    {
        display:none;
    }
    .footer_wrapper
    {
        height:auto;
    }

    .footer
    {
        height:auto;
    }

    .mobile_hide
    {
        display:none !important;
    }

    .group_chooser
    {
        width:calc(100% - 2px - 2rem);
        max-width: 940px;
        border: solid #000 1px;

        margin-top:1rem;
        margin-bottom:0.2rem;
        padding-top:0.5rem;
        margin-left:auto;
        margin-right:auto;
        border-radius: 8px;
        padding-left:1rem;
        padding-right:1rem;

        text-align: center;

    }

    .groep
    {
        font-family: 'leo_head_font', Arial, sans-serif;
        height: 4rem;
        width: 4rem;
        margin: 0.35rem;
        background-image: url("./../images/groep.svg?v=2");
        background-repeat: no-repeat;
        background-size: contain;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: #fff;
        margin-bottom: 1rem;
        padding-left: 0.2rem;
        margin-right:0.25rem;
    }

    .groep_indicator
    {
        margin-bottom:0.2rem;
    }

    .groep_indicator
    {
        font-family: 'leo_head_font', Arial, sans-serif;
        height:1.65rem;
        width: 1.85rem;
        margin:0.15rem 0.2rem 0.15rem 0.2rem;
        background-image: url("./../images/groep_deselected.svg?v=2");
        background-repeat: no-repeat;
        background-size: contain;
        float:left;
        display:flex;
        align-items: center;
        justify-content: center;
        padding-top:0.25rem;
        font-size: 0.9rem;
        color: #fff;
    }

    .groep_indicator_selected
    {
        transform: scale(1.25);
        background-image: url("./../images/groep.svg?v=2");
        z-index:-10;
        position:relative;
    }

    .page_title_wrapper
    {
        float:left;
        width:calc(100% - 1rem);
        max-width:calc(940px - 1rem);

        margin-left:auto;
        margin-right:auto;
        height:auto;

        margin-bottom: 0.2rem;
    }

    .page_title_wrapper h1
    {
        margin-top:0.5rem;
    }

    .page_title_wrapper h1.lesson
    {
        margin-top:1rem;
        font-size: 1.5rem;
    }

    .lesson_content_wrapper
    {
        width:100%;


    }


    .lesson_content_left
    {
        float:left;

        width:calc(100% - 2px - 2rem);
        border: solid #000 1px;
        border-radius: 8px;
        margin-top:1rem;
        padding:1rem;
        margin-right:1rem;
        margin-bottom:1rem;
    }

    .lesson_content_right
    {
        float:left;


        width:calc(100% - 2px - 2rem);
        border: solid #000 1px;
        border-radius: 8px;
        margin-top:1rem;
        padding:1rem;
        margin-bottom:1rem;
    }

    .mobile_full
    {
        width:98% !important;
    }

    .mobile_full_90
    {
        width:90% !important;
    }

    a.action_link
    {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    a.action_link:hover
    {
        font-size: 1rem;
    }

    .theme_download_wrapper
    {
        width:calc(100% - 2rem);
        display:block;



        margin:0.5rem;
        padding:0.3rem;
        color:#000;
        font-size:0.8rem;

    }

    .theme_content
    {
        padding:0.5rem;
        padding-bottom:0rem;
    }

    .theme_downloads
    {
        padding:0.5rem;
        paddin-top:0rem;
    }

    .theme_wrapper_oneven
    {
        background-image: unset;
        background-color: #e6f5e7;
    }

    .theme_wrapper_even
    {
        background-image: unset;
        background-color: #ebe3ee;
    }

    .header_menu ul > li > a {
        display: block;
        padding-left: 0.25rem;
        padding-right: 0.25rem;


        line-height: 3rem;
        font-size: 0.8rem;


        text-decoration: none;
        color:#fff;
    }

    .links ul > li > a {
        display: block;
        padding-left: 0.15rem;
        padding-right: 0.15rem;


        line-height: 2rem;
        font-size: 0.8rem;


        text-decoration: none;
        color:#000;
    }

}

/* cookie consent related */


h4.cookie_head {
    font-family: 'leo_head_font', Arial, sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
    color: #28a532;
    margin-bottom:0.3rem;
    margin-left:1rem;

}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right:10px;

}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #28a532;
}

input:focus + .slider {
    box-shadow: 0 0 1px #28a532;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.cookie_option_back
{
    background-color: #f3f9f2;
    border: 2px solid #4EAE58;
    border-radius: 7px;
    padding: 22px 20px 20px;margin-left:1rem;margin-bottom:40px
}