html, body {font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 
            color: pink; width: 100%; text-align:center; color:#000; font-size: 100%; margin: 0 auto; padding: 0; font-size: 16px;
            background: url("https://www.agreenmail.com/pics/forest-path.jpg") center 0 no-repeat fixed #000; height: 100%; background-size: cover;}

img {border-width: 0;}
a {text-decoration: none;}
.clear{clear: both; width: 100%; height: 1px; overflow: hidden;}
::placeholder {color: #000; opacity: 0.75;}

.wrapper {width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
.webkit {position: relative; max-width: 600px; margin: 4rem auto 2rem; background: #999; border-radius: 1rem; background: rgba(16, 32, 0, 0.75); border-color: rgba(256, 192, 0, 0.75); border: 2px solid #fff; box-shadow: 0 0 50px #fff, 0 0 150px #cf0, 0 0 150px #cf0, 0 0 25px #fff;}        
.logo {display: inline-block; position: absolute; top: 1rem; right: 1%; width: 200px; z-index: 100;}

div#content {display: block; position: relative; text-align: center;}
div.content {display: block; position: relative; text-align: center;}
    .form_content {width: 100%; margin: 0 auto; padding: 8rem 0 5rem; text-align: right;}
    .page_claim {display: block; position: relative; width: 90%; padding: 5%; margin: 0 auto 2rem; text-align: center; background: rgba(248, 256, 192, 0.75); color: #240; font-weight: normal; text-transform: uppercase; font-size: 1.25rem;}
    .page_info {background: rgba(256, 256, 256, 0.85); text-transform: none;}
    .p_title {display: block; position: relative; width: 90%; margin: 0 auto 2rem; color: #cf0; font-weight: bold; text-align: center; font-size: 0.9rem;}
    p {display: block; position: relative; width: 90%; margin: 0.5rem auto 2rem; color: #fff; font-weight: normal; text-align: left; font-size: 0.9rem;}
    ol {display: block; position: relative; width: 100%; margin: 0.5rem 0 2rem 0; color: #fff; font-weight: normal; text-align: center; font-size: 0.9rem;}
    ul {display: block; position: relative; width: 100%; margin: 0.5rem 0 2rem 0; color: #fff; font-weight: normal; text-align: center; font-size: 0.9rem;}
    span.button {display: inline-block; width: 80%; margin: 0 auto 1.5rem; padding: 2%; font-size: 1rem; text-align:center; border: 1px solid #fff; border-radius: 5px; background: rgba(255, 255, 255, 0.75); color: #000;}
    .input_title {display: block; position: relative; width: 90%; margin: 0 auto 0.35rem; color: #fff; font-weight: normal; text-align: left; font-size: 0.9rem;}
    input {display: inline-block; width: 40%; margin: 0 0.5rem 1.5rem; padding: 2%; font-size: 1rem; text-align:center; border: 1px solid #fff; border-radius: 5px; background: rgba(255, 255, 255, 0.75); color: #000;}
    input[type=time] {display: inline-block; position: relative; width: 40%; height: 3rem; margin: 0 auto; padding: 3.0vh; font-size: 1rem; top: 1rem; text-align:center; font-size: 1rem; border: 1px solid #fff; border-radius: 5px; background: rgba(255, 255, 255, 0.75); color: #000;}
    input[type=radio] {width: 5%; padding: 0; margin: 0 0 0 30px;}
    input[type=button] {padding: 1.5% 3.5%; width: 45%; height: 2.7rem; color: #333;}
    input[type=file] {padding: 1.5%; visibility: hidden;}
    textarea {display: inline-block; width: 40%; margin: 0 0.5rem 1.5rem; padding: 2%; font-size: 1rem; text-align:center; border: 1px solid #fff; border-radius: 5px; background: rgba(255, 255, 255, 0.75); color: #000;}
    a.button {display: inline-block; position: relative; width: 40%; margin: 1.5rem 0.5rem 1.0rem; padding: 2%; text-align:center; font-size: 1rem; border: 1px solid #fff; border-radius: 5px; color: #fff; background: rgba(0, 0, 0, 0.5);}
    div#bottom_menu {position: absolute; width: 100%; bottom: 0.7rem; text-align: center; clear:both;}
    a.bottom_menu {display: inline-block; position: relative; padding: 0 1em 0 0.6em; font-size: 0.75rem; text-align:center; border-right: 1px solid #fff; color: #fff;}
    a.bottom_menu:last-of-type {border-right-width: 0px;}
    div#footer {position: absolute; width: 100%; bottom: 0.7rem; left: 2%; text-align: left; font-size: 0.8rem; color: #fff; clear:both;}
    div#user {position: absolute; width: 100%; top: 0.7rem; left: 2%; text-align: left; font-size: 0.7rem; clear:both;}
    div#user a {text-decoration: none; cursor: pointer; color: #fc0; padding-right: 20px;}
    div#user span a {color: #fff; border-left: 1px solid #fff; padding-left: 20px;}

div#modal_aperture {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 11000;}
div#modal_container {position: relative; top: 25%; margin: 0 auto; width: 30%; z-index: 11001; border: 3px solid #f00; border-radius: 8px; box-shadow: 0 0 50px #fff, 0 0 150px #f00, 0 0 25px #fff;}
div#modal_window {position: relative; width: 100%; padding: 0; background: #333; top: 0; margin: 0; border: 0px solid #aaa; border-radius: 5px; font-size: 1rem; box-shadow: 0px 0px 10px #666;}
img.modal_title_button {display: inline-block; position: absolute; top: 7px; right: 7px;}
span.modal_title {display: block; position: relative; margin: 0 25px; padding: 15px 0; font-weight: bold; color: #fc0;}
div#modal_content {background: #fff; padding: 0; border-radius: 0 0 5px 5px;}
div#modal_message {float: left; margin: 10% 5% 10% 5%; width: 90%; text-align: center; font-size: 1rem;}
div#modal_buttons {position: relative; top: 0px; font-size: 0.65rem; padding: 7px 6px 6px; background: #ddd; border-radius: 0 0 5px 5px;}
a.modal_button {display: inline-block; width: 30%; margin: 0 auto; padding: 2%; background: rgba(0, 0, 0, 0.5); border-color: #fff; border-radius: 5px; color: #fff; font-weight: bold; font-size: 1rem;;}

@media only screen and (orientation: portrait) and (min-width: 601px){
    .webkit {margin: 6rem auto 2rem;}
    .form_content {padding: 7rem 0 5rem;}
    div#modal_container {position: fixed; top: 0; margin: 0 20%; width: 60%; z-index: 11001;}
    div#modal_message {font-size: 0.8rem;}
}

@media only screen and (orientation: landscape) and (min-height: 601px) and (max-device-width: 1200px) {
    .webkit {margin: 6rem auto 2rem;}
    .form_content {padding: 7rem 0 5rem;}
}
    
@media only screen and (orientation: portrait) and (max-width: 600px){
    .webkit {border-radius: 0.75rem; width: 95%; margin: 2.5% auto;}
    .logo {width: 44%;}
    .form_content {padding: 6rem 0 2.5rem;}
    .page_claim {font-size: 0.85rem}
    ol {}
    ul {}
    input {width: 39%; margin: 0 0.5rem 1rem;}
    input[type=button] {padding: 1.0% 3.5%; width: 44%; height: 2.2rem;}
    a.button {width: 39%; margin: 0.8rem 0.5rem 1.0rem;}
    a.bottom_menu {padding: 0 1em 0 0.5em; font-size: 0.6rem;}
    div#footer {height: 1rem; bottom: 0.2rem;}
}

@media only screen and (orientation: landscape) and (max-height: 600px) {
    .webkit {border-radius: 0.75rem; width: 96%; margin: 2.5% auto;}
    .logo {width: 28%;}
    .form_content {padding: 4rem 0 2.0rem;}
    input {margin: 0 0.5rem 1.25rem;}
    input[type=button] {padding: 1.0% 3.5%; width: 43%;}
    a.button {margin: 1rem 0.5rem 1.5rem;}
    a.bottom_menu {padding: 0 1em 0 0.5em; font-size: 0.6rem;}
}