﻿#RegistrationForm {
    transition: all 0.3s ease;
    width: 60em;
    border: 1px solid transparent;
    border-radius: 15px;
    margin: auto;
    margin-top: 2em;
    box-shadow: rgba(0, 0, 0, .6) 0px 0px 15px 2px;
    overflow: auto;
    transform: scale(1);
    height: 42.5em;
    background-color:white;
}
#registerform{
    margin-top:.5em;
}
#ExtraRegistrationInfo {
    width: 29em;
    height: 23em;
    float: left;
    margin: auto;
    margin-top: 12.5em;
}
    #ExtraRegistrationInfo h1{
        display:inline;
        margin-left: 1.25em;
    }
    #ExtraRegistrationInfo p {
        font-size: 1.5rem;
    }
    #LineDivide {
        border-right: 5px solid lightgrey;
        height: 40em;
        width: 29em;
        float: left;
    }
#ExtraRegistrationInfo button {
    margin-left: 7.5em;
    margin-bottom: .5em;
    width: 9em;
    height: 2em;
    font-size: 1.2em;
    color: white;
    border-color: transparent;
    border-radius: 5px;
    background-color: rgba(69,154,69,1);
    margin-top: .5em;
}
#RegistrationInputFields {
    margin-top: 1em;
    width: 29em;
    float: right;
    padding-right: 2em;
}
    #RegistrationInputFields p, h1 {
        /*margin-left: 35px;*/
        font-family: sans-serif;
        text-align:center;
        margin-top: .5em;
    }
    #RegistrationInputFields p {
        font-size: 1.5rem;
    }
        #RegistrationInputFields input[type="text"],#RegistrationInputFields input[type="email"],#RegistrationInputFields input[type="tel"],#RegistrationInputFields input[type="password"] {
            transition: all 0.3s ease;
            width: 14em;
            height: 1.8em;
            font-size: 1.3rem;
            margin-left: 3.5em;
            margin-bottom: .75em;
            border-color: transparent;
            border-bottom: 2px solid black;
            background-color: rgba(200,200,200, .1);
            transform: scale(1);
            box-shadow: rgba(0,0,0, .3) 0px 0px 5px 1px;
        }
        #RegistrationInputFields input[type="checkbox"]{
            margin-left:5em;
            margin-right:.5em;
        }
        #RegistrationInputFields input:focus {
            transition: all 0.3s ease;
            outline: none;
            box-shadow: rgba(0,0,0, .3) 5px 5px 5px 1px;
            background-color: rgba(160,160,160, .15);
            border-color: transparent;
            transform: scale(1.05);
        }
        #RegistrationInputFields button {
            color:white;
            transition: all 0.3s ease;
            /*margin-left: 95px;*/
            margin-bottom: .5em;
            margin-top: .5em;
            width: 8em;
            height: 2em;
            background-color: rgba(69,154,69,1);
            border-color: transparent;
            border-radius: 5px;
            margin-left: 5em;
            transform: scale(1);
            font-size: 1.5rem;
        }
        #RegistrationInputFields button:hover {
            transition: all 0.3s ease;
            color: azure;
            background-color: rgba(69,154,69,.5);
            box-shadow: rgba(69,154,69, .3) 0px 0px 10px 1px;
            transform: scale(1.05);
        }
.validation-summary-errors ul li {
    background-color: yellow;
}
@media only screen and (max-width: 40em) {
    #LineDivide{
        display:none;
    }
    #RegistrationForm{
        width:90%;
        display:block;
        margin:auto;
    }
    #RegistrationForm input{
        width: 90%;
        display:block;
        margin:auto;
        margin-top:1em;
    }
    #registerform{
        width:90%;
        height:auto;
        display:block;
        margin:auto;
    }
    #RegistrationInputFields{
        width:100%;
        padding:0;
    }
    #RegistrationInputFields button{
        display:block;
        margin:auto;
    }
        #RegistrationInputFields p {
            width:90%;
            margin:auto;
        }
}