section {
display: block;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active, a:hover {
outline: 0;
}
d h1 {
font-size: 2em;
margin: 0.67em 0;
}
fieldset {
border: none;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
body {
font-family: "Unica One", sans-serif;
background: #e7f3ed;
color: #3d3d3d;
}
section {
width: 93.75%;
max-width: 600px;
margin: 0 auto;
padding-top: 4em;
}
h1 {
text-align: center;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
color: #147238;
}
a {
color: #36c875;
}
p {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
margin-top: 0;
}
p span {
font-size: 1.25em;
color: #147238;
}
form {
margin: 2em auto 1em;
width: 300px;
position: relative;
}
.radio-container {
position: relative;
height: 4em;
font-size: 1.5em;
line-height: 1;
color: #d6ebe0;
}
.no-touch .radio-container:hover, .radio-container.active {
z-index: 9999;
}
.radio-options {
position: absolute;
max-height: 3em;
width: 100%;
overflow: hidden;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
}
.radio-options ul {
margin-top: 18px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.radio-options li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.radio-options label {
display: block;
padding: 0.75em;
background: #36c875;
opacity: 0;
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.radio-options input {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 3em;
opacity: 0;
z-index: 1;
cursor: pointer;
}
.radio-options input:checked ~ label {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 1;
z-index: 2;
padding: 0.75em;
background: #1b9e4d;
border-radius: 10px;
}
.no-touch .radio-options li:hover label {
background: #25b45f;
}
.radio-options .checked label {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0.75em;
background: #1b9e4d;
visibility: visible;
z-index: 2;
}
.no-touch .radio-options:hover, .active .radio-options {
max-height: 100em;
}
.no-touch .radio-options:hover ul, .active .radio-options ul {
position: relative;
margin-top: 9px;
}
.no-touch .radio-options:hover li, .active .radio-options li {
position: relative;
}
.no-touch .radio-options:hover label, .active .radio-options label {
opacity: 1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.no-touch .radio-options:hover input:checked ~ label, .active .radio-options input:checked ~ label {
position: static;
border-radius: 0;
}
.no-touch .radio-options:hover .checked label {
position: static;
}
.no-touch .radio-options:hover ul:before, .active .radio-options ul:before {
content: "";
position: absolute;
width: 0px;
height: 0px;
right: 0.75em;
margin-right: -4px;
top: -9px;
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent #36c875 transparent;
-webkit-transform: rotate(360deg);
}
.radio-options .toggle {
position: relative;
cursor: pointer;
padding: 0.75em;
background: #1b9e4d;
border-radius: 10px;
z-index: 1;
}
.radio-options .toggle:before {
content: "";
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #d6ebe0;
height: 0px;
position: absolute;
right: 0.75em;
top: 50%;
margin-top: -5px;
width: 0px;
-webkit-transform: rotate(360deg);
}
.no-touch .radio-options:hover .toggle:before, .active .radio-options .toggle:before {
border-width: 8.7px 5px 0 5px;
border-color: #d6ebe0 transparent transparent transparent;
margin-top: -2px;
}
.radio-options input:checked ~ label:before {
content: "";
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #d6ebe0;
height: 0px;
position: absolute;
right: 0.75em;
top: 50%;
margin-top: -5px;
width: 0px;
-webkit-transform: rotate(360deg);
}
.radio-options li.checked label:before {
content: "";
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #d6ebe0;
height: 0px;
position: absolute;
right: 0.75em;
top: 50%;
margin-top: -5px;
width: 0px;
-webkit-transform: rotate(360deg);
}
.no-touch .radio-options:hover input:checked ~ label:before, .active .radio-options input:checked ~ label:before {
content: none;
}
.no-touch .radio-options:hover li.checked label:before {
content: none;
}
.no-opacity .radio-options label {
visibility: hidden;
}
.no-opacity .radio-options:hover label {
visibility: visible;
}
.no-opacity .radio-options li.checked label {
visibility: visible;
}
.no-opacity input {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}