.plan-select { margin-bottom: 15px; } .methods { color: #888; line-height: 30px; } .methods .method { border: 1px solid #888; border-radius: 5px; display: inline-block; padding: 0 5px; } .methods img { height: 30px; margin-right: 5px; vertical-align: middle; } .payment-method.disabled { opacity: .5; filter: grayscale(100%); } .button { box-sizing: border-box; display: inline-block; text-align: center; } .kwota, .inna .button, .plan-toggle, .inna input { border: 1px solid black; border-radius: 8px; background: none; cursor: pointer; padding: 0; margin-right: 3%; margin-bottom: 10px; line-height: 3em; font-size: 20px; } .plan-toggle { width: 46.5%; } .kwota { width: 30%; } .kwota:after { content: " zł"; } .kwota.yearly { background: orange; } .inna .button { width: 63%; } .inna input { width: 60%; padding-left: 1.5%; padding-right: 1.5%; height: 3em !important; text-align: center; } .chunk-alt { position: relative; overflow: hidden; } .chunk-alt .chunk { top: 0; } .kwota.active, .plan-toggle.active { background: #9ACD32; } .inna input {display: none;} .inna.active input {display: inline;} .inna.active .button {display: none;} .ambassador { padding: 2em; margin-bottom: 1em; border: 1px solid #ddd; position: relative; min-height: 100px; } .ambassador.with-photo { padding-right: 145px; } .ambassador img { border-radius: 100%; height: 100px; width: 100px; position: absolute; top: 35px; right: 30px; } .ambassador div { text-align: right; line-height: 1.5em; } .club-form-info { line-height: 1.5em; } @media screen and (max-width: 1023px) { .club-form-info { margin-top: 2em; } } @media screen and (min-width: 1024px) { .club-form-info { border-left: 1px solid #ddd; padding-left: 2em; margin-left: 2em; } .twocol { display: flex; } .twocol > form, .twocol > div { flex: 1; } } .methods { .button { border: 1px solid black; border-radius: 10px; padding: 10px; margin-right: 3%; &.active { background: #9ACD3240; } } }