Create CSS button + image radio button

Hi.

I have some trouble with inserting CSS into CFF. For background, I am using template 10 (“.cp_cff_pastel”) as template. Hope you can be of some guidance.

1. I am trying to insert a CSS button. The CSS I’ve used in appearance -> customizer -> custom CSS is as follows:

.dfield
#fbuilder .buttonfrontpage
{
?display:inline-block !important;
?padding:0.35em 1.2em !important;
?border:0.1em solid #FFFFFF !important;
?margin:0 0.3em 0.3em 0 !important;
?border-radius:0.12em !important;
?box-sizing: border-box !important;
?text-decoration:none !important;
?font-family:'Roboto',sans-serif !important;
?font-weight:300 !important;
?color:#FFFFFF !important;
?text-align:center !important;
?transition: all 0.2s !important;
}
a.button1:hover{
?color:#000000;
?background-color:#FFFFFF;
}
@media all and (max-width:30em){
?a.button1{
??display:block;
??margin:0.4em auto;
?}
}

I have then inserted the field “HTML content” in the CFF calculator with href link and “buttonfrontpage” in “Add Css Layout Keywords” to no avail. The calculator only shows the link and not the button. See: https://www.screencast.com/t/awGYfpi30Joq

2. On my demo site at isoleringspriser.dk I have edited CSS for image radio button which looks as follows: https://www.screencast.com/t/Y9AxBAgE . However, this does not appear on the main site, Tagtjekker.dk. I have inserted the same CSS (see CSS below) and inserted “customm_csss” for CSS keyword in the radio button field.

Hope you can help ?? Thanks.

CSS for image radio button:

#fbuilder .customm_csss .two_column
{
    float: left;
    width: 23%;
    position: relative;
    margin: 15px 1%;
    border: 1px solid #d3d3d3;
    padding: 8px 8px 2px 8px;
	min-height:225px;
}
#fbuilder .customm_csss .two_column.hello
{
    border: 1px solid #d16800;
}
#fbuilder .customm_csss .two_column label 
{
    display: block;
    position: relative;
    padding-left: 0;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#fbuilder .customm_csss .two_column label input
{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
#fbuilder .customm_csss .two_column span.checkmark {
    position: absolute;
    bottom:-12px;
    left: 50%;
    height: 20px;
    width: 20px;
    background-color: #fff;
    z-index: 99;
	border: 1px solid #d16800;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}
#fbuilder .customm_csss .two_column label:hover input ~ .checkmark 
{
  background-color: #d16800;
}
#fbuilder .customm_csss .two_column label input:checked ~ .checkmark 
{
    background: #d16800 !important;
}
#fbuilder .customm_csss .two_column label input:checked ~ .checkmark:after 
{
    display: block;
}
#fbuilder .customm_csss .two_column span.checkmark:after 
{
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: none;
}
#fbuilder .customm_csss  .two_column span img
{
    width: 100%;
    margin: 0 auto;
	position:relative;
	z-index:1;
}
#fbuilder .customm_csss .two_column span small
{
    position: relative;
    bottom: -26px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-transform: inherit;
    letter-spacing: 1px;
    z-index: 1;
    padding: 0 10px;
    border: none;
    display: block;
    width: 90%;
    text-align: center;
    background: transparent;
}

.cp_cff_pastel #fbuilder .pbPrevious{
    background: #3f8823 !important;
	border:1px solid #3f8823 !important;
}
.cp_cff_pastel #fbuilder .pbNext{
    background: #3f8823 !important;
	border:1px solid #3f8823 !important;
}
#fbuilder .custom_label_input input {
    font-weight: 700 !important;
    text-decoration: underline;
    line-height: 38px;
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    font-size: 21px !important;
}
#fbuilder .custom_label_input .dfield {
    display: inline;
}
#fbuilder .custom_label_input label {
    display: inline-block;
}
#fbuilder .custom_button_green  input{
    background: #3f8823 !important;
	border:1px solid #3f8823 !important;
}
#fbuilder div.cpefb_error{
	position:relative !important;
}
.cp_cff_pastel #fbuilder .pbEnd .pbPrevious {
    background-color: #c1c1c1
!important;
		border:1px solid #c1c1c1 !important;
}
/********  Responsive  ********/

@media screen and (max-width:1366px)
{
}
@media screen and (max-width:1280px)
{
}
@media screen and (max-width:1199px)
{
#fbuilder .customm_csss .two_column
{
    width: 31%;
    margin: 15px 1%;
    min-height: 240px;
}
}
@media screen and (max-width:991px)
{
#fbuilder .customm_csss .two_column
{
    width: 31.33%;
    margin: 15px 1%;
	min-height: 255px;
}
}
@media screen and (max-width:767px)
{
#fbuilder .customm_csss .two_column
{
    width: 48%;
    margin: 15px 1%;
	min-height:310px;
}
}
@media screen and (max-width:667px)
{
}
@media screen and (max-width:480px)
{
#fbuilder .customm_csss .two_column 
{
    float: none;
    width: 100%;
    margin: 15px 0;
    min-height: 330px;
}
input#fieldname17_1
	{
    white-space: pre-wrap;
    padding: 10px;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 20px;
}
.tablepress {
   overflow-y: hidden;
   display: block;
}
}
@media screen and (max-width:380px)
{
#fbuilder .customm_csss .two_column 
{
    float: none;
    width: 100%;
    margin: 15px 0;
    min-height: 295px;
}
}
@media screen and (max-width:330px)
{
#fbuilder .customm_csss .two_column 
{
    float: none;
    width: 100%;
    margin: 15px 0;
    min-height: 235px;
}
}

The page I need help with: [log in to see the link]