/*
         Landingpage CSS 2022
         Design & Programmierung: Hear My Name UG (https://www.hmn.ug)
*/
/* Farben */
:root {
         --main-bg-color: #EFEFEF;
         --main-bg-color-light: #FFFFFF;
         --main-bg-color-dark: #DCDCDC;

         --main-color: #40b192;
         --main-color-dark: #2c987b;
         --main-color-light: #7ed7bf;
         --main-color-hover: #000000;

         --main-white: #FFFFFF;
         --main-black: #000000;

         --grey-color: rgba(0,0,0,0.06);
         --grey-light-color: rgba(0,0,0,0.03);
         --grey-dark-color: rgba(0,0,0,0.15);

         --font-color-light: #FFFFFF;
         --font-color-dark: #000000;
         --font-family: 'Playfair Display';

         --text-shadow-light: rgba(255,255,255,0.2) 1px 1px 0px;
         --text-shadow-dark: rgba(0,0,0,0.2) 1px 1px 0px;

         --box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
}

/* Links */
a:link, a:visited {
         font-family: var(--font-family);
         text-align: left;
         font-size: 1.0em;
         color: #2c987b;
         font-weight: 500;
         text-decoration:underline;
         transition: 0.5s;
}

a:hover {
         font-weight: 500;
         color: #5b9a00;
         text-decoration:none;
}

a.button:link, a.button:visited {
         display: inline-block;
         font-family: var(--font-family);

         text-align: center;
         font-size: 1.4em;
         font-weight: normal;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         text-transform: uppercase;
         color: var(--main-white);

         padding: 10px 25px 10px 25px;
         margin: 10px 0px 10px 0px;

        background: var(--main-color);

         -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow:    0px 3px 0px 0px rgba(0, 0, 0, 0.15);
        box-shadow:         0px 3px 0px 0px rgba(0, 0, 0, 0.15);
         text-decoration:none;

         border: 0px #FFFFFF solid;

         -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        border-radius: 60px;
}

a.button:hover {
         color: #FFFFFF;
         background: var(--main-color-hover);
         text-decoration:none;
}

a.button.small {
        font-size: 0.8em;
}


/* Überschriften */
h1 {
         font-family: var(--font-family);
         font-size: 1.9em;
         font-weight: 500;
         text-align: left;
         color: #2c987b;

         margin: 20px 0px 20px 0px;
         padding: 0px 0px 0px 0px;
}

h2 {
         font-family: var(--font-family);
         font-size: 1.8em;
         font-weight: 500;
         text-align:center;
         color: #40b192;
         text-shadow: rgba(0,0,0,0.05) 2px 2px 0px;

         margin: 10px 0px 20px 0px;
         padding: 0px 0px 0px 0px;
         text-transform: uppercase;

}

h3 {
         font-family: var(--font-family);
         font-size: 1.5em;
         font-weight: normal;
         text-align:left;
         color: #000000;
         margin: 15px 0px 15px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-transform: uppercase;
}

h4 {
         font-size: 1.3em;
         font-weight: normal;
         text-align:left;
         color: var(--main-color-light);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h5 {
         font-size: 1.3em;
         font-weight: normal;
         text-align:left;
         color: var(--main-color-light);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-transform: uppercase;
}

h1.center, h2.center, h3.center, h4.center, h5.center { text-align: center; }
#startseite h1, #startseite h2, #startseite h3 { display: inline-block; text-align: center; }

.dark { color: #04342d; }
.dark.line { border-bottom: 3px #04342d solid;}


/* Standarts */
body {
         background:#FFFFFF;
         font-size: 1.0em;
         vertical-align:top;
         text-align:left;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         min-width: 320px !important;
}

body, tr, td, div {
         font-family: var(--font-family);
         font-weight: 300;
         font-size: 1.0em;
         color: #000000;
         vertical-align:top;
         text-align:left;
}

b {
         font-family: var(--font-family);
         font-weight: 500;
}

img         { border: 0px; }
.clear         { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.pad        { padding: 10px; }
.l         { float:left; }
.r         { float:right; }
.center  { text-align: center; }
.a_l     { text-align: left; }
.a_c     { text-align: center !important; }
.a_r     { text-align: right; }
.a_j     { text-align: justify; }

.block   { display: block; }
.inline-block { display: inline-block; }
.inline  { display: inline !important; }
.hide    { display: none !important; }
.show    { display: block; }

table    {}
td       { padding: 2px 5px; }
td.c     { text-align: center; }
td.r     { text-align: right; }
td.head  { background:#0f5832; color: #ffdb4c; font-weight: bold; border-bottom: 2px #6faf2a solid; }
td.bg1   { background:#FFFFFF; border-top: 2px #6faf2a solid; border-bottom: 2px #FFFFFF solid; }
td.bg2   { background:#EFEFEF; border-top: 2px #6faf2a solid; border-bottom: 2px #FFFFFF solid; }

td.head  { background:#0b695c !important; color: #FFFFFF !important; font-weight: bold; border-bottom: 2px #0f8c7a solid; text-transform: uppercase; }
tr:nth-child(odd) td { background: rgba(0,0,0,0.2); }
tr:nth-child(even) td { background: rgba(0,0,0,0.1); }

.diver        { display: block; margin: 10px 0px; width: 100%; height: 3px; border-top: 3px rgba(0,0,0,0.2) dotted; }
.bg1        { background: #FFFFFF; }
.bg2        { background: #EFEFEF; }

.in { max-width: 1400px; margin: 0px auto; }

.as { margin: 10px auto; }


/* Seite */
#wrapper{
         width: 100%;
         min-width: 320px;
         margin: 0px auto;
}

#header {
         background: #f589a2;
         width: 100%;
}

#header .top {
        background: rgba(0,0,0,0.1);
         margin-bottom: 0px;
         text-align: center;
}

#header .top .in { max-width: 1260px; }

#header .navigation {
         display: block;
         width: 100%;
         background-color: rgba(0,0,0,0.4);
         padding: 10px 0px;
         text-align: center;
}

#header .navigation a {
         display: inline-block;
         padding: 2px 10px;
         margin: 2px 2px;

         text-align: center;
         font-weight: normal;
         color: #FFFFFF;
         font-size: 1.0em;
         text-transform: uppercase;
         text-decoration: none;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 0px;
         opacity: 0.5;
}

#header .navigation a.active, #header .navigation a:hover {
         background-color: rgba(0,0,0,0.2);
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         opacity: 1.0;
}

#logo {
        display: inline-block;
         width: 240px;
         height: auto;
         cursor: pointer;

         margin: 10px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
}
#logo img {
        width: 100%;
         height: auto;
        opacity: 1.0;
          filter: alpha(opacity=100);
         transition: all 0.5s;
}

#logo img:hover {
        opacity: 0.5;
          filter: alpha(opacity=50);
         transition: all 0.5s;
}

/* Navigation */
#navigation {
         width: 100%;
         display: block;
         text-align: center;
         text-transform: uppercase;
         text-decoration: none;
}
#navigation .l, #navigation .r { margin-top: 35px; border: 0px #000000 solid; }

#navigation a {
        display: inline-block;

         padding: 5px 8px 5px 8px;
         margin: 0px 5px 0px 5px;

        font-family: 'Playfair Display';

        text-align: center;
        font-weight: normal;
        color: #FFFFFF;
        font-size: 1.6em;
         text-transform: uppercase;
         text-decoration: none;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 0px;

         -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
}
#navigation a:hover { background: rgba(255,255,255,0.2); }
#navigation #logo a:hover { background: rgba(255,255,255,0.0); }

/* Mobile Navigation */
#menu {
         display: none;
         position: absolute;
         z-index: 10010;
         top: 40px;
         right: 25px;
         background: #FFFFFF;
         width: 32px;
         height: 32px;
         padding: 5px;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         cursor: pointer;
}
#menu:hover { background: #ebebeb; }

#menu_bar {
         display: none;
         position: fixed;
         z-index: 10000;
         top: 0px;
         left: 0;
         overflow-y: no-scroll;

         background: var(--main-color);
         min-width: 250px;
         max-width: 350px;
         padding: 15px;
         height: 100%;
         font-size: 1.0em;
}

#menu_bar ul, #menu_bar li {
         padding: 0px 0px 0px 0px;
         margin: 2px 0px 2px 0px;
}

#menu_bar li {
         display: block;
         margin: 2px 0px 2px 0px;
         list-style: none;
}
#menu_bar li.small { display: inline-block; margin: 2px 4px 2px 0px; }

#menu_bar li a {
         display: inline-block;
         background: rgba(0,0,0,0.05);

         padding: 5px 10px;
         margin: 0px 0px;

         font-weight: normal;
         font-size: 1.1em;
         text-decoration: none;
         color: var(--font-color-light);
         text-shadow: var(--text-shadow-dark) 2px 2px 1px;

         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
}
#menu_bar li.small a { background: rgba(0,0,0,0.15); font-size: 0.9em; color: var(--font-color-light); }
#menu_bar li a:hover, #menu_bar li a.active { background: rgba(0,0,0,0.15); color: var(--font-color-light); }
#menu_bar li.small a:hover, #menu_bar li.small a.active { background: rgba(0,0,0,0.25); color: var(--font-color-light); }

/* Footer */
#footer {
        width: 100%;
         height: auto;

        background: var(--main-color);

         -webkit-box-shadow: inset 0px 12px 12px -10px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    inset 0px 12px 12px -10px rgba(0, 0, 0, 0.25);
        box-shadow:         inset 0px 12px 12px -10px rgba(0, 0, 0, 0.25);

         padding: 20px 0px 0px 0px;
         margin: 10px 0px 0px 0px;

}
#footer .in { color: #FFFFFF; font-size: 0.9em; text-shadow: rgba(0,0,0,0.15) 1px 1px 0px; text-align: center; padding: 10px 0px; }
#footer .in span { display: inline-block; }
#footer .in span, #footer .in .l, #footer .in .r, #footer .in a { font-size: 1.0em; color: #FFFFFF; text-align: left; font-weight: normal; text-decoration: none; text-transform: uppercase; }
#footer .in a:hover { color: #000000;  }

#footer .sub {
         display: block;
         width: 100%;
         background-color: rgba(0,0,0,0.1);
         margin: 10px 0px 0px 0px;
         color: #FFFFFF;
         text-align: center; opacity: 0.5;
}

#footer .sub a {
         display: inline-block;
         padding: 2px 10px;
         margin: 2px 2px;

         text-align: center;
         font-weight: normal;
         color: #FFFFFF;
         font-size: 1.0em;
         text-transform: uppercase;
         text-decoration: none;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 0px;

}

#footer .sub a.active, #footer .sub a:hover {
         background-color: rgba(0,0,0,0.2);
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         opacity: 1.0;
}

/* eyecatcher */
#eyecatcher {
        display: block;
        width: 100%;
         height: auto;
         text-align: center;
}

#eyecatcher.bg_main {
         display: block;
         margin: 0px auto;
         width: 100%;
         height: auto;
         text-align: center;
         background: #FFFFFF url(../images/bg_1.png) top center repeat-x;
}

#eyecatcher img {
         width: 100%;
         max-width: 1400px;
         height: auto;
}

/* Site */
#site {
         width: 100%;
         padding: 20px 0px 50px 0px;
         min-height: 50px;
         font-size: 1.2em;
}

#vergleich {
        display: block;
         width: calc(100% - 40px);

         margin: 20px 0px;
         padding: 30px 20px 30px 20px;


         -webkit-box-shadow: inset 0px 10px 25px -15px rgba(0,0,0,0.35), inset 0px -10px 25px -15px rgba(0,0,0,0.35);
        -moz-box-shadow: inset 0px 10px 25px -15px rgba(0,0,0,0.35), inset 0px -10px 25px -15px rgba(0,0,0,0.35);
        box-shadow: inset 0px 10px 25px -15px rgba(0,0,0,0.35), inset 0px -10px 25px -15px rgba(0,0,0,0.35);
         background: #EFEFEF;
         text-align: center;
}

#vergleich .item {
        display: inline-block;
         width: calc(25% - 20px);
         margin: 10px;
         padding: 10px 0px 10px 0px;

         background: #FFFFFF;
         -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;

         -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2), inset 0px 5px 15px 0px rgba(0,0,0,0.10);
        -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2), inset 0px 5px 15px 0px rgba(0,0,0,0.10);
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2), inset 0px 5px 15px 0px rgba(0,0,0,0.10);

         font-size: 0.8em;
         text-align: center;
}
#vergleich .item.top {  background: #FFFFFF url(../images/vergleich_top.png) top right no-repeat; }
#vergleich .item.gold {  background: #FFFFFF url(../images/vergleich_gold.png) top right no-repeat; }
#vergleich .item.silber {  background: #FFFFFF url(../images/vergleich_silber.png) top right no-repeat; }
#vergleich .item.bronze {  background: #FFFFFF url(../images/vergleich_bronze.png) top right no-repeat; }

#vergleich .item img { max-width: 90%; height: auto; margin: 0px auto;}

#vergleich .item b { display: block; width: calc(100% - 50px); padding: 5px 15px; font-size: 1.4em; text-align: center; text-transform: uppercase; color: var(--main-color); }
#vergleich .item .logo { text-align: center; }
#vergleich .item .logo img { width: 85%; height: auto; max-width: 300px; margin: 5px auto; }
#vergleich .item .intro { display: block; text-align: justify; margin: 10px 0px; padding: 0px 25px; width: calc(100% - 50px); height: 68px; overflow: hidden; }
#vergleich .item .vorteile { display: block; margin: 15px 0px; color: #5F5F5F; text-shadow: #FFFFFF 1px 1px 0px; }
#vergleich .item .vorteile span { display: block; padding: 2px 25px; width: calc(100% - 50px); }
#vergleich .item .vorteile span:nth-child(odd) { background: var(--grey-color); }
#vergleich .item .vorteile span:nth-child(even) { background: var(--grey-light-color); }

#vergleich .item .button { margin: 10px 10px 10px 10px; }

/* Slider */
#slider { display: flex; width: 100%; max-width: 1400px; margin: 0px auto; }
#slider .slider_l, #slider .slider_r { display: block; width: 80px; height: auto; cursor: pointer; border: 0px #000000 solid; opacity: 0.3; }
#slider .slider_l { float: left; background: transparent url(../images/slider_left.png) center center no-repeat; }
#slider .slider_l:hover { background: transparent url(../images/slider_left_hover.png) center center no-repeat; opacity: 1.0; }
#slider .slider_content { display: block; float: left; width: calc(100% - 160px); text-align: center; }
#slider .slider_r { float: right; background: transparent url(../images/slider_right.png) center center no-repeat; }
#slider .slider_r:hover { background: transparent url(../images/slider_right_hover.png) center center no-repeat; opacity: 1.0; }



/* Schatten */
#shadow {
         display: none;
         position: fixed;
         top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;

         z-index: 200;
         background-color: rgba(0, 0, 0, 0.55);
         width: 100%;
         height: 100%;
         cursor: pointer;
}

/* Sonstiges */
#w { position: fixed; display: block; top: 0; left: 0; background: #000000; color: #FFFFFF; padding: 5px 10px; }


/* Content */
#faq {}
#feedback {}
#news {}

.swc_content .item, .swc_feedback .item, .swc_news .item { display: block; padding: 5px 0px 10px 0px; margin: 5px 0px 2px 0px; border-bottom: 3px rgba(0,0,0,0.2) dotted; }
.swc_content .item:last-child, .swc_feedback .item:last-child, .swc_news .item:last-child { margin: 5px 0px 5px 0px; border-bottom: 3px rgba(0,0,0,0.0) dotted; }
.swc_news .item i { font-size: 0.9em; }

.sitebar .swc_feedback .item img { width: 100%; height: auto; margin: 5px 0px; }

#top_items {}
#top_items .item {
         display: block;
         float: left;
         width: calc(33.3333% - 30px);
         padding: 10px;
         margin: 10px 5px;
         background-color: var(--main-bg-color);
}
#top_items .item:hover { background-color: var(--main-bg-color-dark); }


#pics { text-align: center; }
#pics .item { display: inline-block; background: rgba(0,0,0,0.9); width: calc(33.3333% - 10px - 4px); height: calc(1400px / 3 - 14px); max-height: calc(1400px / 3 - 14px); margin: 5px 5px; overflow: hidden; border: 0px #000 solid; }

#pics .item img {
        width: 100%;
        height: auto;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
}
#pics .item img:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
}

#pics .item .voting {
         display: block;
         width: 100%;
         text-align: center;
         margin-top: calc(-50% - 30px);
         opacity: 0.0;
         -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
}
#pics .item:hover img { opacity: 0.8; }
#pics .item:hover .voting { opacity: 1.0; }
#pics .item .voting img { width: 70%; height: auto; opacity: 1.0; }
#pics .item .voting img:hover { -webkit-transform: scale(1.0);  -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); }



/* Seitenanzeige */
#pages {
        display: block;
        width: calc(100% - 20px);
        margin:10px 10px 10px 10px;
        line-height:30px;
        text-align: center;
}

#pages a, #pages a:link, #pages a:visited, #pages .apage {
         display: inline-block;
         height:30px;
         width:30px;

         padding: 0px 0px 0px 0px;
         margin: 0px 2px;

         font-size: 0.9em;
         color: var(--font-color-dark);
         font-weight: bold;
         text-decoration:none;
         text-align: center;

         background-color: var(--main-bg-color);
         border: 2px var(--main-bg-color-dark) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#pages a:hover {
         color: var(--main-color);
         background-color: #FFFFFF;
         border: 2px var(--main-color) solid;
}

#pages .apage {
         background-color: var(--main-color);
         border: 2px var(--main-color) solid;
         color: var(--font-color-light);
}

/* Tags */
#tag_cloud {
         margin: 0px 0px 20px 0px;
         text-align:center;
}

#tag_cloud a, #tag_cloud a:link, #tag_cloud a:visited {
         background: var(--main-color-light);
         display: inline-block;
         margin: 2px 2px 2px 2px;
         padding: 4px 8px;
         font-family: var(--font-family);
         font-size: 1.0em;
         color: #FFFFFFFF;
         font-weight: normal;
         text-decoration:none;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;

         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
         border-radius: 3px;

         -o-transition: all 0.3s linear;
         -moz-transition: all 0.3s linear;
         -webkit-transition: all 0.3s linear;
         transition: all 0.3s linear;

         -webkit-box-shadow: inset 0px 0px 12px 0px var(--main-color-dark);
         -moz-box-shadow: inset 0px 0px 12px 0px var(--main-color-dark);
         box-shadow: inset 0px 0px 12px 0px var(--main-color-dark);
}

#tag_cloud a:hover {
         background: var(--main-color-dark);
         color: #FFFFFF;
         text-shadow: #514A7D 1px 1px 0px;
}


/*CDI-Reset Box */
#cdi_reset_info {
         display: block;
         width: calc(100% - 20px);
         margin: 10px 0px;
         padding: 10px 10px 10px 10px;
         background-color: #EFEFEF;
         -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
         border-radius: 20px;
         text-align: center;
}
#cdi_reset_info form { height: 50px; }



/* Formulare */
form span { display: block; padding: 0px 10px; margin: 0px; text-align: left; }
input, select, textarea {
         border: 0px rgba(0,0,0,0.0) solid;
         background: #FFFFFF;

         font-family: 'Roboto Condensed';
         font-size: 1.0em;
         color: #000000;

         width: calc(100% - 20px);
         margin: 5px 0px;
         padding: 4px 10px 2px 10px;


         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;

         -moz-box-shadow:    inset 2px 2px 3px rgba(0,0,0,0.2);
           -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
           box-shadow:         inset 2px 2px 3px rgba(0,0,0,0.2);
}
input[type="radio"], input[type="checkbox"] { width: 20px; }
input.error, select.error, textarea.error, .error { border: 2px #DF0000 solid !important; }

input[type="button"], input[type="submit"] {
        cursor: pointer;

         border: 0px #8bca11 solid;
         display: inline-block;

         font-family: 'Roboto Condensed';
         text-align: center;
         font-size: 1.2em;
         font-weight: bold;
         text-shadow: rgba(0,0,0,0.3) 1px 1px 0px;
         color: #FFFFFF;

         padding: 10px 35px 10px 35px;
         margin: 10px 0px 10px 0px;

        background: #0f8c7a;

         -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow:    0px 3px 0px 0px rgba(0, 0, 0, 0.15);
        box-shadow:         0px 3px 0px 0px rgba(0, 0, 0, 0.15);
         text-decoration:none;

         border: 0px #FFFFFF solid;

         -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
}

input[type="button"]:hover, input[type="submit"]:hover {
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #FFFFFF;
         background: #04342d;
         text-decoration:none;
}

form input[type="checkbox"] { display:none; }
form input[type="checkbox"] + label { width: 50px; height: 20px; border-radius: 20px; border: 2px solid #ddd; background-color: #EEE; display: inline-block; content: ""; float: left; margin-right: 10px; transition: background-color 0.5s linear; margin-top: 0px; }
form input[type="checkbox"] + label:hover { cursor: pointer; }
form input[type="checkbox"] + label::before { width: 16px; height: 16px; border-radius: 16px; background-color: #fff; display: block; content: ""; float: left; margin: 2px 0 0 2px; transition: margin 0.1s linear; }
form input[type="checkbox"]:checked+label{ background-color: #23625c; }
form input[type="checkbox"]:checked+label::before { margin: 2px 0 0 32px; }

form input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; }
form input[type="radio"] { width:auto; float:left; margin-right: .75em; background:transparent; border:none; }
form input[type="radio"]:checked, input[type="radio"]:not(:checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
form input[type="radio"] + label { cursor: pointer;  margin-top: -5px; }
form input[type="radio"]:checked + label::before, input[type="radio"]:not(:checked) + label::before { content:' '; display:inline-block; width: 20px; height:20px; position: relative; top:4px; border: 1px solid #bbb; background: white; margin-right: 1em; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1); }
form input[type="radio"]:checked + label::before, input[type=radio]:not(:checked) + label::before { border-radius: 30px; }
form input[type="radio"]:hover  + label::before { background:#ddd; box-shadow: inset 0 0 0 3px white; }
form input[type="radio"]:checked  + label::before { background: #0f8c7a; box-shadow: inset 0 0 0 3px white; }