.sep { } .sepText { width: 75px; background: #FFFFFF; margin: -15px 0 0 -38px; padding: 5px 0; position: absolute; top: 50%; text-align: center; } .hr { width:2px; height:64px; background-color: #DDDDDD; position:inherit; top:0px; left:50%; z-index:10; } #stripe-card { margin: 15px 0; } .embed-responsive-sca { padding-bottom: 75%; min-height: 600px; } @media only screen and (max-width: 999px) { .hr { width: 100%; height: 2px; left: 0px; margin: 15px 0 15px 0; } .sepText { left: 50%; } #stripe-elements > div.hidden { height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; display: block !important; } #stripe-elements .stripe-or { height: 16px; } #stripe-elements .stripe-payment-request-button { height: 40px; } #stripe-elements > div { transition: height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out; } } @media only screen and (min-width: 999px) { #stripe-elements { display: flex; flex-wrap: wrap; } .stripe-card-holder { flex-grow: 1; } #stripe-elements > div.hidden { width: 0; padding: 0; overflow: hidden; display: block !important; } #stripe-elements > div { transition: width 0.3s ease-out, padding-left 0.3s ease-out, padding-right 0.3s ease-out; } } .vcenter { margin: auto; }