section.login_section {
    display:inline-block;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

h5 {
	font-size: 18px;
}

.input {
    position: relative;
}
/* Login Form Section */
div.forms_ctn {
    position: relative;
    z-index: 1;
    display:inline-block;
    vertical-align: middle;
    max-height: 100%;
    overflow: auto;
}
div.forms_ctn form div.input
, div.forms_ctn form button {
    position: relative;
    text-align: center;
    border-radius: 4px;
}

div.forms_ctn form div.input label {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    letter-spacing: 2px;
}

div.forms_ctn form div.input input {
    position: relative;
    width: 100%;
    border:none;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
    z-index: 1;
}

div.forms_ctn form button {
    border:none;
    font-size: 20px;
    letter-spacing: 2px;
}

div.forms_ctn form span.forgot_password {
    background-color: transparent;
}

div.forms_ctn form span.forgot_password {
    display:inline-block;
    margin-top: 40px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}
/* End of login form section */

/* Register Button */
button#register {
    width: 66px;
    height: 200px;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(0px, -50%);
    overflow: hidden;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
button#register .icon {
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    padding:10px;
    font-size: 30px;
}

button#register label {
    font-weight: bold;
    position: absolute;
    top: 116px;
    left: -24px;
    display: block;
    font-size: 20px;
    transform: rotate(-90deg);
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* End of Register Button */

/* Register Container & Items */
div.register_ctn {
    width:0px;
    height: auto;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    transition:all 0.4s ease;
    overflow: hidden;
}

div.register_box_item form {
    overflow: hidden;
}

div.slide_item {
    display:none;
}

div.register_box_item p  {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: bold;
}

form#reseller, form#merchantdiser {
    display:none;
}

div.register_box_item form .input {
    position: relative;
    text-align: center;
}

div.register_box_item form#register input[type='radio'] {
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    opacity: 0;
}

div.register_box_item  form input[type='radio'] ~ label
, div.register_box_item form button {
    display: block;
    width: 100%;
    border: 1px solid rgb(194, 194, 194);
}

div.register_box_item form button {
    filter:brightness(0.82);
    border:none;
    margin-top: 30px;
}

div.register_box_item span {
   display: block;
   position: absolute;
   bottom:20px;
   left:0px;
}

div.slide_item h5{
    text-align: left;
    letter-spacing: 1px;
}

div.selected_type {
    margin: 20px 0px;
    padding: 10px;
}

label.section_heading{
    display: block;
    text-align: left;
    border-bottom: 1px solid grey;
    padding: 4px 0px;
    font-size: 14px;
}

.slide_item .input.text {
    overflow: hidden;
    margin: 4px 0px;
}

.slide_item .input input[type="text"]
, .slide_item .input input[type="password"]
, .slide_item .input select{
    position: relative;
    width: 100%;
    height: 34px;
    float: right;
    padding: 0px 10px;
    transition: all 0.4s ease;
    border: 1px solid rgb(208, 208, 208);
    border-radius: 6px;
    z-index: 1;
    text-align: center;
}

.slide_item .input select {
    text-align: center;
}

.slide_item .input input[type="text"]::-webkit-input-placeholder
, .slide_item .input input[type="password"]::-webkit-input-placeholder { /* Edge */
    color: rgb(173, 173, 173);
}

.slide_item .input input[type="text"]:-ms-input-placeholder 
, .slide_item .input input[type="password"]::-ms-input-placeholder{ /* Internet Explorer */
    color: rgb(173, 173, 173);
}

.slide_item .input input[type="text"]::placeholder
, .slide_item .input input[type="password"]::placeholder {
    color: rgb(173, 173, 173);
}

div.slide_item .input.text label {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    transition: all 0.4s ease;
}

div.register_box_item form .buttons button.prev {
    opacity: 0.6;
}

div.register_box_item form .buttons button.prev
, div.register_box_item form .buttons button.next
, div.register_box_item form .buttons button.g_button {
    border:1px solid rgb(208, 208, 208);
    border-radius: 4px; 
}

div.register_box_item form button.reveal_password {
    position: absolute;
    z-index: 99;
    top: 0px;
    right: 0px;
    width: 36px;
    height: 100%;
    margin: 0px;
    text-align: center;
    padding: 0px;
    background-color: transparent;
    color: grey;
}

.extra_action {
    float: right;
}

.extra_action * {
    vertical-align: middle;
    margin: 0px 2px;
}
/* End of register container & items */

@media (min-width:300px){
    /* Login form section */
    section.login_section, div.forms_ctn {
        width:100%;
        height: 100%;
    }

    div.forms_ctn img {
        width: 100%;
        padding: 55px;
    }

    div.forms_ctn form div.input {
        width: calc(100% - 80px);
        margin: 20px auto;
    }

    div.forms_ctn form div.input input {
        padding: 16px;
    }

    div.forms_ctn form button {
        width: calc(100% - 100px);
        padding: 16px;
    }

    /* End of login section */
}
@media (min-width:700px) {
    section.login_section {
        width: auto;
        height: auto;
    }
    /* Login section */
    div.forms_ctn {
        width:100%;
        max-width: 600px;
        height: auto;
        min-height: 200px;
    }

    div.forms_ctn img {
        width: 100%;
        padding: 55px;
    }

    div.forms_ctn form div.input {
        width: calc(100% - 100px);
        margin: 20px auto;
    }

    div.forms_ctn form div.input input {
        padding: 16px;
    }

    div.forms_ctn form button {
        width: calc(100% - 100px);
        padding: 16px;
    }
    /* end of login section */

    /* Register container & items */
    div.register_ctn.open {
        width: 400px;
    }
    div.register_ctn {
        height: auto;
        min-height: 370px;
    }
    div.register_box_item{
        width: 400px;
        height: auto;
    }

    div.register_box_item form {
        padding: 40px 40px 80px 40px;
    }

    div.register_box_item form p {
        margin-bottom:40px;
    }

    div.register_box_item form .input {
        margin: 10px 0px;
    }

    div.register_box_item form input[type='radio'] ~ label
    , div.register_box_item button{
        display: block;
        width: 100%;
        padding: 12px;
    }

    div.register_box_item span {
        width: 100%;
        height:44px;
    }

    div.register_box_item img {
        width: auto;
        height:100%;
        margin: auto;
        padding: 2px;
    }

    div.register_box_item form .buttons button.prev {
        width: 25%;
        float:left;
    }
    div.register_box_item form .buttons button.next
    , div.register_box_item form .buttons button.g_button {
        width: 72%;
        float:right;
    }
}

/* Focus animation to labels */
div.forms_ctn form div.input input:focus ~ label
, div.forms_ctn form div.input input:valid ~ label 
, div.forms_ctn form div.input input:read-only ~ label{
    top:8px;
    font-size: 10px;
    transition:all 0.2s ease;
}

/* registration form animation to labels and inputs */
.slide_item .input input[type="text"]:focus
,.slide_item .input input[type="text"]:valid 
,.slide_item .input input[type="text"]:read-only
, .slide_item .input input[type="text"]:valid ~ select
,.slide_item .input input[type="password"]:focus
,.slide_item .input input[type="password"]:valid 
, .slide_item .input input[type="password"]:valid ~ select {
    width: 66%;
    text-align: left;
    z-index: 0;
}

.slide_item .input input[type="text"]:focus ~ label
, .slide_item .input input[type="text"]:valid ~ label
, .slide_item .input input[type="text"]:read-only ~ label
, .slide_item .input input[type="password"]:focus ~ label
, .slide_item .input input[type="password"]:valid ~ label {
    font-size: 10px;
    left:0px;
    transform: translate(0px, -50%);
    z-index: 1;
}

.slide_item .input input[type="text"]:focus::-webkit-input-placeholder
.slide_item .input input[type="text"]:read-only::-webkit-input-placeholder
, .slide_item .input input[type="password"]:focus::-webkit-input-placeholder { /* Edge */
    color: rgb(255, 255, 255);
}

.slide_item .input input[type="text"]:focus:-ms-input-placeholder
.slide_item .input input[type="text"]:read-only:-ms-input-placeholder
, .slide_item .input input[type="password"]:focus:-ms-input-placeholder { /* Internet Explorer */
    color: rgb(255, 255, 255);
}

.slide_item .input input[type="text"]:focus::placeholder
.slide_item .input input[type="text"]:read-only::placeholder
, .slide_item .input input[type="password"]:focus::placeholder {
    color: rgb(255, 255, 255);
}