.input-container2{position: relative;margin: 0 60px 50px;}.pen-title {padding: 50px 0;text-align: center;letter-spacing: 2px;}.pen-title h1 {margin: 0 0 20px;font-size: 48px;font-weight: 300;}.pen-title span {font-size: 12px;}.pen-title span .fa {color: #ed2553;}.pen-title span a {color: #ed2553;font-weight: 600;text-decoration: none;}.rerun {margin: 0 0 30px;text-align: center;}.rerun a {cursor: pointer;display: inline-block;background: #ed2553;border-radius: 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);padding: 10px 20px;color: #ffffff;text-decoration: none;transition: 0.3s ease;}.rerun a:hover {box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}#codepen, #portfolio {position: fixed;bottom: 30px;right: 30px;background: #363636;width: 56px;height: 56px;border-radius: 100%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);transition: 0.3s ease;color: #ffffff;text-align: center;}#codepen i, #portfolio i {line-height: 56px;}#codepen:hover, #portfolio:hover {box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}#portfolio {bottom: 96px;right: 36px;background: #ed2553;width: 44px;height: 44px;-webkit-animation: buttonFadeInUp 1s ease;animation: buttonFadeInUp 1s ease;}#portfolio i {line-height: 44px;}.container2 {position: relative;width: 100%;}.container2.active .card2:first-child {background: #f2f2f2;margin: 0 15px;}.container2.active .card2:nth-child(2) {background: #fafafa;margin: 0 10px;}.container2.active .card2.alt {top: 20px;right: 0;width: 100%;min-width: 100%;height: auto;border-radius: 5px;padding: 60px 0 40px;overflow: hidden;}.container2.active .card2.alt .toggle {position: absolute;top: 40px;right: -70px;box-shadow: none;transform: scale(10);transition: transform 0.3s ease;}.container2.active .card2.alt .toggle:before {content: "";}.container2.active .card2.alt .title, .container2.active .card2.alt .input-container, .container2.active .card2.alt .button-container {left: 0;opacity: 1;visibility: visible;transition: 0.3s ease;}.container2.active .card2.alt .title {transition-delay: 0.3s;}.container2.active .card2.alt .input-container {transition-delay: 0.4s;}.container2.active .card2.alt .input-container:nth-child(2) {transition-delay: 0.5s;}.container2.active .card2.alt .input-container:nth-child(3) {transition-delay: 0.6s;}.container2.active .card2.alt .button-container {transition-delay: 0.7s;}.card2 {position: relative;background: #ffffff;border-radius: 5px;padding: 60px 0 40px 0;box-sizing: border-box;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);transition: 0.3s ease;}.card2:first-child {background: #fafafa;height: 10px;border-radius: 5px 5px 0 0;margin: 0 10px;padding: 0;}.card2 .title {position: relative;z-index: 1;border-left: 5px solid #ed2553;margin: 0 0 35px;padding: 10px 0 10px 50px;color: #ed2553;font-size: 32px;font-weight: 600;text-transform: uppercase;}.card2 .input-container {position: relative;margin: 0 60px 50px;}.card2 .input-container input {outline: none;z-index: 1;position: relative;background: none;width: 100%;height: 60px;border: 0;color: #212121;font-size: 24px;font-weight: 400;}.card2 .input-container input:focus ~ label {color: #9d9d9d;transform: translate(-12%, -50%) scale(0.75);}.card2 .input-container input:focus ~ .bar:before, .card2 .input-container input:focus ~ .bar:after {width: 50%;}.card2 .input-container input:valid ~ label {color: #9d9d9d;transform: translate(-12%, -50%) scale(0.75);}.card2 .input-container label {position: absolute;top: 0;left: 0;color: #757575;font-size: 24px;font-weight: 300;line-height: 60px;transition: 0.2s ease;}.card2 .input-container .bar {position: absolute;left: 0;bottom: 0;background: #757575;width: 100%;height: 1px;}.card2 .input-container .bar:before, .card2 .input-container .bar:after {content: "";position: absolute;background: #ed2553;width: 0;height: 2px;transition: 0.2s ease;}.card2 .input-container .bar:before {left: 50%;}.card2 .input-container .bar:after {right: 50%;}.card2 .button-container {margin: 0 60px;text-align: center;}.card2 .button-container button {outline: 0;cursor: pointer;position: relative;display: inline-block;background: 0;width: auto;border: 2px solid #737373;padding: 20px 0;font-size: 18px;font-weight: 600;line-height: 1;text-transform: uppercase;overflow: hidden;transition: 0.3s ease;}.card2 .button-container button span {position: relative;z-index: 1;color: #777;transition: 0.3s ease;}.card2 .button-container button:before {content: "";position: absolute;top: 50%;left: 50%;display: block;background: #ed2553;width: 30px;height: 30px;border-radius: 100%;margin: -15px 0 0 -15px;opacity: 0;transition: 0.3s ease;}.card2 .button-container button:hover, .card2 .button-container button:active, .card2 .button-container button:focus {border-color: #ed2553;}.card2 .button-container button:hover span, .card2 .button-container button:active span, .card2 .button-container button:focus span {color: #ed2553;}.card2 .button-container button:active span, .card2 .button-container button:focus span {color: #ffffff;}.card2 .button-container button:active:before, .card2 .button-container button:focus:before {opacity: 1;transform: scale(10);}.card2 .footer {margin: 40px 0 0;color: #d3d3d3;font-size: 24px;font-weight: 300;text-align: center;}.card2 .footer a {color: inherit;text-decoration: none;transition: 0.3s ease;}.card2 .footer a:hover {color: #bababa;}.card2.alt {position: absolute;top: 40px;right: -70px;z-index: 10;width: 140px;height: 140px;background: none;border-radius: 100%;box-shadow: none;padding: 0;transition: 0.3s ease;}.card2.alt .toggle {position: relative;background: #ed2553;width: 140px;height: 140px;border-radius: 100%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);color: #ffffff;font-size: 58px;line-height: 140px;text-align: center;cursor: pointer;}.card2.alt .toggle:before {content: "";display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}.card2.alt .title, .card2.alt .input-container, .card2.alt .button-container {left: 100px;opacity: 0;visibility: hidden;}.card2.alt .title {position: relative;border-color: #ffffff;color: #ffffff;}.card2.alt .title .close {cursor: pointer;position: absolute;top: 0;right: 60px;display: inline;color: #ffffff;font-size: 58px;font-weight: 400;}.card2.alt .title .close:before {content: "×";}.card2.alt .input-container input {color: #ffffff;}.card2.alt .input-container input:focus ~ label {color: #ffffff;}.card2.alt .input-container input:focus ~ .bar:before, .card2.alt .input-container input:focus ~ .bar:after {background: #ffffff;}.card2.alt .input-container input:valid ~ label {color: #ffffff;}.card2.alt .input-container label {color: rgba(255, 255, 255, 0.8);}.card2.alt .input-container .bar {background: rgba(255, 255, 255, 0.8);}.card2.alt .button-container button {width: 100%;background: #ffffff;border-color: #ffffff;}.card2.alt .button-container button span {color: #ed2553;}.card2.alt .button-container button:hover {background: rgba(255, 255, 255, 0.9);}.card2.alt .button-container button:active:before, .card2.alt .button-container button:focus:before {display: none;}@-webkit-keyframes buttonFadeInUp {0% {bottom: 30px;opacity: 0;}}@keyframes buttonFadeInUp {0% {bottom: 30px;opacity: 0;}}