html {
    background-color: #bdbec6;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    font-family: Arial;
    font-size: 12px;
    text-align: center;
    margin: 0px;
}

a {
    color: #000000;
}

#page {
    width: 800px;
    margin: 0px auto;
    text-align: left;
    background-color: #ffffff;
    border: 0px solid #000000;
}

h1 {
    font-size: 18px;
    color: #000000;
    margin-bottom: 0px;
}

h1.sub {
    font-size: 15px;
    color: #808080;
    margin-top: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 18px;
    color: #404040;
    text-align: center;
}

h3 {
    font-size: 14px;
    color: #000000;
}

code {
    font-size: 14px;
    color: #0000ff;
}

pre {
    font-size: 14px;
    color: #0000ff;
    padding: 5px;
}

a.menu {
    text-decoration: none;
}

p.menu {
    background-color: #0b59b7;
    color: #ffffff;
    font-weight: bold;
}

a.menu2 {
    padding: 2px;
    padding-left: 20px;
    text-align: left;
    color: #591624;
    text-decoration: none;
}

span.menu2 {
    padding: 2px;
    padding-left: 20px;
    text-align: left;
    color: #ff0000;
    text-decoration: none;
}

a.menu2:link, a.menu2:visited {
    color: #591624;
    text-decoration: none;
}

a.menu2:active, a.menu2:hover {
    color: #FF0099;
}

#title {
    padding: 5px 20px;
}

#title span {
    color: #000000;
    margin: 0px 0px 0px 10px;
    font-family: Verdana;
    font-size: 18px;
}

#title span.sub {
    font-size: 12px;
    color: #808080;
    margin-top: 0px;
    margin-bottom: 0px;
}

#title img {
    height: 70px;
    vertical-align: middle;
}

#nav-menu {
    background-color: #83bbff;
}

#nav-menu p {
    padding: 7px;
    margin: 0;
    display: inline-block;
}

#nav-menu p:not(.menu):hover {
    background-color: #2b79d6;
}

#nav-menu p.registration {
    float: right;
    font-weight: 700;
}

#nav-menu p.registration a {
    color: blue;
    text-decoration: underline;
}

.menutitle {
    font-weight: bold;
    text-align: left;
    color: #000000
}

.menucontainer {
    padding: 0px 20px;
}

#content {
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
}


/* logistics */

.logistics-wrapper {
    padding: 10px 0px;
    display: flex;
}

.logistics-wrapper .logistics-details {    
    flex: 1;
}

.logistics-wrapper .map-wrapper {
    flex: 1;
}

.logistics-wrapper .map-wrapper iframe {
    width: 360px;
    height: 240px;
}


/* registration form */

.registration-form {
    width: 250px;
    margin: 10px auto;
}

.registration-form .note {
    padding: 5px;
    color: red;
    font-size: 14px;
    font-style: italic;
}

.registration-form .input-field-wrapper {
    padding: 3px;
}

.registration-form .input-field-wrapper > input[type=text] {
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    outline: none;
}

.registration-form .input-field-wrapper > input[type=text]:focus {
    border: 1px solid #9e9e9e;
}

.registration-form .input-field-wrapper > select {
    width: 105%;
    padding: 4px;
    border-radius: 4px;
    outline: none;
}

.registration-form .input-field-wrapper > .radio-wrapper {
    display: inline-block;
}

.registration-form .register-button {
    text-align: center;
    padding: 7px 0px;
}

.registration-form .register-button input[type=button] {
    border-radius: 2px;
    border: none;
    padding: 7px 13px;
    cursor: pointer;
    outline: none;
    background: #11a1e6;
    color: #ffffff;
}

.registration-form .register-button input[type=button]:active {
    background: #1149e6;
}

.fee {
    margin: 10px auto;
    color: #2244c7;
    font-size: 20px;
    text-align: center
}

.student-info {
    margin: 10px auto;
    color: #2244c7;
    font-size: 16px;
    text-align: left
}

.deadline {
    margin: 10px auto;
    color: red;
    font-size: 16px;
    text-align: center
}

/* contact us */

.contact {
    border-bottom: 1px solid #c5c5c5;
    font-size: 14px;
    width: 154px;
}

.contact-person {
    font-style: italic;
    margin: 5px;
}


/*registration success*/

.registration-success-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.registration-success-wrapper .registration-success {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    text-align: center;
    box-shadow: 2px 2px 2px 0px #757575;
}

.registration-success-wrapper .registration-success-top {
    height: 96px;
    background: #3ec59d;
    padding: 27px;
}

.registration-success-wrapper .registration-success-bottom {
    height: 96px;
    background: #ffffff;
    padding: 27px;
}

.registration-success-wrapper .registration-success-bottom input[type=button] {
    margin-top: 20px;
    padding: 10px;
    width: 88px;
    outline: none;
    border: none;
    border-radius: 2px;
    background: #3ec59d;
    color: white;
    cursor: pointer;
}