.component_hero { background:white; display: flex; border-radius: 15px; padding:25px; margin-bottom: 100px; }
.component_hero h1 { margin: 0; }
.component_hero .content { min-width: 300px; max-width: 600px; }
.component_hero .image { height: 1px; overflow: visible; max-width: 500px; margin-top: 50px; }
@media only screen and (max-width: 900px) {
    .component_hero .image  { display: none }
}



.component_postits {
    display: flex; 
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: center;
}
.component_postits .postit { display: block; border-radius: 15px; background: white; width: 350px; padding: 15px; text-align: center; margin-bottom: 15px; margin-left: 7px; margin-right: 7px; box-sizing: border-box; text-decoration: none; }
.component_postits .postit .icon { width: 75px; margin: 0 auto; margin-top: 20px }
.component_postits .postit h2 { margin-bottom: 0; }


.component_iconbox {
    display: grid;
    grid-template-columns: 50px auto; 
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-radius: 15px;
    margin-bottom: 5px; 
    
}
.component_iconbox .image { margin: 0 !important; }
.component_iconbox img { margin-bottom: 0 !important; }
.component_iconbox .content { padding-left: 15px; padding-top: 12px; }
.component_iconbox .content h1, .component_iconbox .content h2, .component_iconbox .content h3 { margin-top: 0; }

.component_iconbox.large {
    display: grid;
    grid-template-columns: 150px auto; 
    padding-top: 10px;
    padding-bottom: 10px;
    
}
.component_iconbox.large .image { margin: 0 !important; text-align: center; }
.component_iconbox.large .image img { width: 125px }
.component_iconbox.large .content { padding-left: 15px; padding-top: 12px; }




.component_drawer { 
    border: 4px solid black;
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 15px;
}
.component_drawer .drawer_header {
    display: grid;
    grid-template-columns: 50px auto;
    text-decoration: none;
}

.component_drawer .drawer_header h2 { margin: 0; }


.component_drawer .drawer_contents { 
    margin-top: 50px;
    display:none;
 }

 .component_drawer .tools {
    background-image:url(/content/img/ui/drawer-open-downwards.png);
 }
 .component_drawer.open .tools {
    background-image:url(/content/img/ui/drawer-open-upwards.png);
 }
 
 .component_drawer .tools {
     background-size: 30px;
     background-position: top left;
     background-repeat: no-repeat;
 }

.category .contents .card { max-width: none; width: 100%; }

.component_checkbox { 
    display: grid; 
    grid-template-columns: 50px auto;
}
.component_checkbox.card { padding-top: 10px; padding-bottom: 15px; background:none; }
.component_checkbox .label { padding-top: 5px; }
.component_checkbox .checkbox {
    background-image:url(/content/img/ui/circle-empty.png);
    background-size: 30px;
    background-position: top left;
    background-repeat: no-repeat;
}
.component_checkbox .checkbox input[type=checkbox] {
    display:none;
}
.component_checkbox.checked { 
    background:white;
}
.component_checkbox.checked .checkbox {
    background-image:url(/content/img/ui/circle-tick.png);
}