You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
828 lines
15 KiB
CSS
828 lines
15 KiB
CSS
@charset "UTF-8";
|
|
@import url("https://fonts.googleapis.com/css?family=Roboto");
|
|
html {
|
|
font-family: Roboto, sans-serif;
|
|
background-color: #F5F5F5;
|
|
font-size: 10px;
|
|
box-sizing: border-box;
|
|
zoom: 120%;
|
|
}
|
|
|
|
* {
|
|
box-sizing: inherit;
|
|
position: relative;
|
|
}
|
|
|
|
a, a[xx] {
|
|
background-color: transparent;
|
|
color: #3F51B5;
|
|
text-weight: bold;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
z-index: 1;
|
|
}
|
|
a:active, a[xx]:active {
|
|
outline: 0;
|
|
}
|
|
a:hover, a[xx]:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
b {
|
|
font-weight: 700;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
h1, h1[xx] {
|
|
margin: 0 5% 2rem;
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
|
font-weight: 200;
|
|
font-size: 4rem;
|
|
line-height: 1.1;
|
|
letter-spacing: -1px;
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h2, h2[xx] {
|
|
margin: 5px 5% 0 5%;
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
|
font-weight: 200;
|
|
font-size: 3rem;
|
|
line-height: 1.1;
|
|
letter-spacing: -.05rem;
|
|
}
|
|
|
|
h3, h3[xx] {
|
|
margin: 5px 5% 0 5%;
|
|
font-weight: 200;
|
|
font-size: 2.5rem;
|
|
line-height: 1.3;
|
|
letter-spacing: -.05rem;
|
|
}
|
|
|
|
h4, h4[xx] {
|
|
margin: 5px 5% 0 5%;
|
|
font-weight: 200;
|
|
font-size: 2rem;
|
|
line-height: 1.3;
|
|
letter-spacing: -.05rem;
|
|
}
|
|
|
|
h5, h5[xx] {
|
|
margin: 5px 5% 0 5%;
|
|
font-weight: 200;
|
|
font-size: 1.4rem;
|
|
line-height: 1.5;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
h6, h6[xx] {
|
|
margin: 5px 5% 0 5%;
|
|
font-weight: 200;
|
|
font-size: 1.4rem;
|
|
line-height: 1.5;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
font-weight: 400;
|
|
}
|
|
|
|
img, img[xx] {
|
|
border: 0;
|
|
margin: 20px 5% 10px 5%;
|
|
height: auto;
|
|
max-width: 90%;
|
|
border-radius: 2px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background-color: #3F51B5;
|
|
color: #FFF;
|
|
}
|
|
|
|
::selection {
|
|
background-color: #3F51B5;
|
|
color: #FFF;
|
|
}
|
|
|
|
:after {
|
|
box-sizing: inherit;
|
|
position: relative;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
:before {
|
|
box-sizing: inherit;
|
|
position: relative;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
body {
|
|
color: #000;
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
line-height: 1.8;
|
|
font-weight: 300;
|
|
}
|
|
|
|
form {
|
|
background-color: #FFF;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
border-radius: 2px;
|
|
margin: 7%;
|
|
padding: 8%;
|
|
}
|
|
|
|
table {
|
|
margin: 7%;
|
|
padding: 8%;
|
|
width: 86%;
|
|
background-color: #FFF;
|
|
border-radius: 2px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
text-align: left;
|
|
}
|
|
table td {
|
|
height: 3.2em;
|
|
border-bottom: 1px solid #E0E0E0;
|
|
padding: 1rem;
|
|
}
|
|
table th {
|
|
height: 4em;
|
|
border-bottom: 1px solid #E0E0E0;
|
|
padding: 1rem;
|
|
font-weight: 700;
|
|
color: #616161;
|
|
}
|
|
table th:before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
background: #F5F5F5;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
table th:hover:before {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
table tbody tr:hover {
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
card {
|
|
background: #FFF;
|
|
display: block;
|
|
margin: 7%;
|
|
padding: 2rem;
|
|
width: 86%;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
border-radius: 2px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
card hr[xx] {
|
|
margin: 1rem 0;
|
|
}
|
|
card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
card > h5 {
|
|
margin-top: 10px;
|
|
margin-bottom: 25px;
|
|
}
|
|
card > img, card > img[xx] {
|
|
width: calc(100% + 4rem);
|
|
max-width: none;
|
|
margin: 0 0 2rem -2rem;
|
|
display: block;
|
|
padding: 0px;
|
|
margin: 0 0 2rem -2rem;
|
|
display: block;
|
|
box-shadow: none;
|
|
border-radius: 0px;
|
|
}
|
|
card > img:first-child, card > img[xx]:first-child {
|
|
margin: -2rem 0 2rem -2rem;
|
|
border-radius: 2px 2px 0px 0px;
|
|
}
|
|
card > img:last-child, card > img[xx]:last-child {
|
|
margin: 0 0 -2rem -2rem;
|
|
border-radius: 0px 0px 2px 2px;
|
|
}
|
|
card hr {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
form {
|
|
padding: 4%;
|
|
margin: 7% 15% 7% 15%;
|
|
}
|
|
|
|
table {
|
|
padding: 4%;
|
|
margin: 7% 15% 7% 15%;
|
|
width: 70%;
|
|
}
|
|
|
|
card {
|
|
margin: 7% 15% 7% 15%;
|
|
width: 70%;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
form {
|
|
padding: 3%;
|
|
margin: 7% 25% 7% 25%;
|
|
}
|
|
|
|
table {
|
|
padding: 2%;
|
|
margin: 7% 20% 7% 20%;
|
|
width: 60%;
|
|
}
|
|
|
|
card {
|
|
margin: 7% 20% 7% 20%;
|
|
width: 60%;
|
|
}
|
|
}
|
|
@media (max-width: 50rem) {
|
|
body {
|
|
overflow-x: hidden;
|
|
padding-top: 4.4rem;
|
|
}
|
|
|
|
[btn][full] {
|
|
width: 100%;
|
|
}
|
|
|
|
button[xx][full] {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=submit][full] {
|
|
width: 100%;
|
|
}
|
|
|
|
button[full] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
p {
|
|
margin: 0 2% 0 2%;
|
|
}
|
|
p:last-child {
|
|
margin: 0;
|
|
}
|
|
p a:not([btn]):before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
opacity: .5;
|
|
transform: scale3d(1, 0.1, 1);
|
|
transform-origin: bottom;
|
|
z-index: -1;
|
|
}
|
|
p a:not([btn]):hover:before {
|
|
color: red;
|
|
transform: none;
|
|
}
|
|
|
|
button, button[xx] {
|
|
transition: all .3s ease-in-out;
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
padding: 10px;
|
|
background: #3F51B5;
|
|
border: 1px solid #3F51B5;
|
|
border-radius: 1.5px;
|
|
box-shadow: 0 0 0 transparent;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
line-height: 1rem;
|
|
float: none;
|
|
margin: auto;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
}
|
|
button:before, button[xx]:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform: scale3d(1.2, 1.2, 1.2);
|
|
background: #3F51B5;
|
|
}
|
|
button:disabled, button[xx]:disabled {
|
|
border-color: #9FA8DA;
|
|
background: #9FA8DA;
|
|
color: #FFF;
|
|
cursor: default;
|
|
}
|
|
button:not(:disabled):hover, button[xx]:not(:disabled):hover {
|
|
background: #283593;
|
|
}
|
|
button:not(:disabled):hover:active, button[xx]:not(:disabled):hover:active {
|
|
box-shadow: none;
|
|
transition: none;
|
|
}
|
|
|
|
input[type=submit] {
|
|
cursor: pointer;
|
|
color: #3F51B5;
|
|
display: inline-block;
|
|
padding: 1.4rem 2rem;
|
|
background-color: #3F51B5;
|
|
border: 1px solid #3F51B5;
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 0 transparent;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
line-height: 1rem;
|
|
margin: 0 1rem 1rem 0;
|
|
}
|
|
input[type=submit]:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transform: scale3d(1.2, 1.2, 1.2);
|
|
background-color: #3F51B5;
|
|
}
|
|
input[type=submit]:disabled {
|
|
border-color: #BDBDBD;
|
|
background: #BDBDBD;
|
|
color: #5C6BC0;
|
|
cursor: default;
|
|
}
|
|
input[type=submit]:not(:disabled):hover {
|
|
background: #F5F5F5;
|
|
}
|
|
input[type=submit]:not(:disabled):hover:active {
|
|
box-shadow: none;
|
|
transition: none;
|
|
}
|
|
|
|
footer {
|
|
color: #FFF;
|
|
width: 100%;
|
|
max-width: 90rem;
|
|
margin: auto;
|
|
padding: 2rem;
|
|
overflow: visible;
|
|
}
|
|
footer:before {
|
|
content: "";
|
|
background: #3F51B5;
|
|
width: 102vw;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
label, label[xx] {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
margin-top: 1rem;
|
|
}
|
|
label:first-child, label[xx]:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
input {
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit])[xx] {
|
|
display: inline-block;
|
|
background: 0 0;
|
|
width: 100%;
|
|
padding: .5rem 0 1rem;
|
|
margin-bottom: 2rem;
|
|
border: none;
|
|
border-bottom: 1px solid #BDBDBD;
|
|
font-size: 1.4rem;
|
|
font-weight: 300;
|
|
border-radius: 0;
|
|
}
|
|
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit])[xx]:focus {
|
|
color: #3F51B5;
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit])[xx]:hover {
|
|
color: #3F51B5;
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]) {
|
|
display: inline-block;
|
|
background: 0 0;
|
|
width: 100%;
|
|
padding: .5rem 0 1rem;
|
|
margin-bottom: 2rem;
|
|
border: none;
|
|
border-bottom: 1px solid #BDBDBD;
|
|
font-size: 1.4rem;
|
|
font-weight: 300;
|
|
border-radius: 0;
|
|
}
|
|
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]):focus {
|
|
color: #3F51B5;
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]):hover {
|
|
color: #3F51B5;
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
|
|
textarea[xx], textarea {
|
|
transition: all .3s ease-in-out;
|
|
display: inline-block;
|
|
background: 0 0;
|
|
background-color: #FFF;
|
|
width: 100%;
|
|
padding: .5rem 0 1rem;
|
|
margin-bottom: 2rem;
|
|
border: none;
|
|
border-bottom: 1px solid #BDBDBD;
|
|
border-radius: 0;
|
|
min-height: 50px;
|
|
height: 100px;
|
|
max-height: 250px;
|
|
padding-right: 2rem;
|
|
}
|
|
textarea[xx]:focus, textarea:focus {
|
|
color: #3F51B5;
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
textarea[xx]:hover, textarea:hover {
|
|
color: #3F51B5;
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
|
|
select {
|
|
transition: all .3s ease-in-out;
|
|
padding: .5rem 3rem .5rem 1rem;
|
|
display: block;
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 1px solid #BDBDBD;
|
|
background: inherit;
|
|
background-size: 2rem;
|
|
height: 4rem;
|
|
font-size: 1.4rem;
|
|
font-weight: 300;
|
|
text-indent: .5rem;
|
|
margin: .5rem 0 2rem;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
select:focus {
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
select:hover {
|
|
border-color: #3F51B5;
|
|
outline: 0;
|
|
}
|
|
|
|
input[type=radio][xx] {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
margin-right: -2rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
input[type=radio][xx] + label {
|
|
width: auto;
|
|
text-transform: none;
|
|
font-size: 1.4rem;
|
|
font-weight: 200;
|
|
}
|
|
input[type=radio][xx] + label:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 1px solid #5C6BC0;
|
|
background: #FFF;
|
|
vertical-align: middle;
|
|
margin-right: 1rem;
|
|
border-radius: 100%;
|
|
}
|
|
input[type=radio][xx] + label:after {
|
|
content: "";
|
|
position: absolute;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
left: 2px;
|
|
top: 4px;
|
|
transform: scale(0);
|
|
}
|
|
input[type=radio][xx]:checked + label:before {
|
|
background: #3F51B5;
|
|
border-color: #3F51B5;
|
|
}
|
|
input[type=radio][xx]:checked + label:after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
background: #3F51B5;
|
|
border: 1px solid #FFF;
|
|
border-radius: 100%;
|
|
transform: scale(1);
|
|
top: .5rem;
|
|
}
|
|
|
|
section[xx] {
|
|
margin: auto;
|
|
padding: 4rem 2rem;
|
|
width: 100%;
|
|
max-width: 90rem;
|
|
}
|
|
|
|
p[xx] {
|
|
margin: 0 0 2rem;
|
|
}
|
|
p[xx]:last-child {
|
|
margin: 0;
|
|
}
|
|
|
|
hr, hr[xx] {
|
|
background: #BDBDBD;
|
|
border: none;
|
|
width: 100%;
|
|
height: 1px;
|
|
margin: 4rem 0;
|
|
}
|
|
|
|
ul, ul[xx] {
|
|
transition: all .3s ease-in-out;
|
|
padding-left: 2rem;
|
|
margin: 0 0 2rem;
|
|
list-style: disc;
|
|
}
|
|
ul ol, ul[xx] ol {
|
|
margin-bottom: 0;
|
|
}
|
|
ul ul, ul[xx] ul {
|
|
margin-bottom: 0;
|
|
list-style: circle;
|
|
}
|
|
|
|
ol, ol[xx] {
|
|
padding-left: 2rem;
|
|
margin: 0 0 2rem;
|
|
list-style: decimal;
|
|
}
|
|
ol ol, ol[xx] ol {
|
|
margin-bottom: 0;
|
|
list-style: lower-alpha;
|
|
}
|
|
ol ul, ol[xx] ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
tr {
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
[full] {
|
|
width: 100%;
|
|
}
|
|
|
|
[no-margins] {
|
|
margin: 0%;
|
|
}
|
|
|
|
[fs-xs] {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
[fs-s] {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
[fs-m] {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
[fs-l] {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
[fs-xl] {
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
[txt-l] {
|
|
text-align: left;
|
|
}
|
|
|
|
[txt=r] {
|
|
text-align: right;
|
|
}
|
|
|
|
[txt-c] {
|
|
text-align: center;
|
|
}
|
|
|
|
[txt-j] {
|
|
text-align: justify;
|
|
}
|
|
|
|
blockquote, blockquote[xx] {
|
|
margin: 5px 0px 0px 5%;
|
|
padding: 1rem 2rem;
|
|
border-left: 4px solid #3F51B5;
|
|
}
|
|
|
|
pre, pre[xx] {
|
|
margin: 5px 8% 0 8%;
|
|
padding: 2% 0px 0px 0px;
|
|
overflow-x: auto;
|
|
padding-left: -20px !important;
|
|
font-family: monospace;
|
|
background: #E0E0E0;
|
|
border: 1px solid #3F51B5;
|
|
}
|
|
|
|
input[type=checkbox][xx], input[type=checkbox] {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
margin-right: -2rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
input[type=checkbox][xx] + label, input[type=checkbox] + label {
|
|
width: auto;
|
|
text-transform: none;
|
|
font-size: 1.4rem;
|
|
font-weight: 200;
|
|
}
|
|
input[type=checkbox][xx] + label:before, input[type=checkbox] + label:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 1px solid #5C6BC0;
|
|
background: #FFF;
|
|
vertical-align: middle;
|
|
margin-right: 1rem;
|
|
border-radius: 2px;
|
|
}
|
|
input[type=checkbox][xx] + label:after, input[type=checkbox] + label:after {
|
|
content: "";
|
|
position: absolute;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
left: 2px;
|
|
top: 4px;
|
|
transform: scale(0);
|
|
border-radius: 100%;
|
|
background-size: 100%;
|
|
}
|
|
input[type=checkbox][xx]:checked + label:before, input[type=checkbox]:checked + label:before {
|
|
background: #3F51B5;
|
|
border-color: #3F51B5;
|
|
}
|
|
input[type=checkbox][xx]:checked + label:after, input[type=checkbox]:checked + label:after {
|
|
content: "✔";
|
|
color: #FFF;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
left: 4.5px;
|
|
top: .2rem;
|
|
transform: scale(1);
|
|
}
|
|
input[type=checkbox][xx]:disabled, input[type=checkbox]:disabled {
|
|
cursor: default;
|
|
}
|
|
input[type=checkbox][xx]:disabled + label:before, input[type=checkbox]:disabled + label:before {
|
|
background: #9FA8DA;
|
|
border-color: #9FA8DA;
|
|
}
|
|
input[type=checkbox][xx]:disabled + label:after, input[type=checkbox]:disabled + label:after {
|
|
content: "✔";
|
|
color: #FFF;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
left: 4.5px;
|
|
top: .2rem;
|
|
transform: scale(1);
|
|
}
|
|
input[type=checkbox][xx]:disabled:not([checked]) + label:before, input[type=checkbox]:disabled:not([checked]) + label:before {
|
|
background: #E0E0E0;
|
|
border-color: #E0E0E0;
|
|
}
|
|
input[type=checkbox][xx]:disabled:not([checked]) + label:after, input[type=checkbox]:disabled:not([checked]) + label:after {
|
|
content: "";
|
|
visibility: visible;
|
|
transform: scale(1);
|
|
}
|
|
|
|
input[type=radio] {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
margin-right: -2rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
input[type=radio] + label {
|
|
width: auto;
|
|
text-transform: none;
|
|
font-size: 1.4rem;
|
|
font-weight: 200;
|
|
}
|
|
input[type=radio] + label:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 1px solid #5C6BC0;
|
|
background: #FFF;
|
|
vertical-align: middle;
|
|
margin-right: 1rem;
|
|
border-radius: 100%;
|
|
}
|
|
input[type=radio] + label:after {
|
|
content: "";
|
|
position: absolute;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
left: 2px;
|
|
top: 4px;
|
|
transform: scale(0);
|
|
}
|
|
input[type=radio]:checked + label:before {
|
|
background: #3F51B5;
|
|
border-color: #3F51B5;
|
|
}
|
|
input[type=radio]:checked + label:after {
|
|
transform: scale(1);
|
|
top: .5rem;
|
|
}
|
|
|
|
section {
|
|
margin: auto;
|
|
padding: 4rem 2rem;
|
|
width: 100%;
|
|
max-width: 90rem;
|
|
}
|