@charset "utf-8";
/*  Modules top
*/
.top_image_box,
.top_message_box {
text-align: center;
}
/*  Modules form
*/
.contact_form_box {
margin: 3em 0;
}
.contact_title {
margin-bottom: 1em;
text-align: center;
}
.contact_form {
position: relative;
padding: 3em;
background-color: #f4f1ed;
border: 1px solid #c3b99c;
border-radius: 30px;
}
.contact_one_box {
padding: 1em;
border-bottom: 1px dashed #c3b99c;
line-height: 3em;
}
.contact_one_box:last-child {
border-bottom: none;
}
.contact_key {
width: 20%;
padding: 0.666em 1em;
font-size: 1.2em;
}
.contact_key .key {
color: #45352d;
}
.contact_mark {
width: 13%;
padding: 0.666em 1em;
text-align: center;
}
.contact_mark .mark_must {
padding: 0 1em;
border-radius: 5px;
letter-spacing: 1px;
background-color: #c3272d;
color: #fff;
font-weight: bold;
font-size: 0.9em;
height: 1.8em;
line-height: 1.8em;
}
.contact_mark .mark_any {
padding: 0 1em;
border-radius: 5px;
letter-spacing: 1px;
background-color: #999;
color: #fff;
font-weight: bold;
font-size: 0.9em;
height: 1.8em;
line-height: 1.8em;
}
.contact_val {
width: 67%;
padding: 0 1em;
font-size: 1.2em;
}
.contact_val input[type=text],
.contact_val textarea {
display: inline-block;
margin: 0.5em 0;
padding: 0.3em;
border-radius: 5px;
border: 1px solid #c3b99c;
font-size: 1.2em;
line-height: 1.2em;
}
.contact_description {
line-height: 1.2em;
}
.contact_description .contact_description_key {
font-weight: normal;
}
.error_message {
width: 100%;
color: #f00;
}
/*  Modules submit
*/
.contact_submit_box {
text-align: center;
}
.contact_submit_box .submit_button {
padding: 0.5em 3em;
background-color: #45352d;
border: none;
border-radius: 10px;
cursor: pointer;
color: #fff;
font-size: 1.3em;
font-weight: bold;
}
.contact_submit_box .submit_button:hover {
opacity: 0.8;
}
/*  Modules connecting
*/
.connecting_background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
.connecting_icon {
position: absolute;
width: 150px;
height: 120px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
line-height: 120px;
color: #fff;
font-size: 1.1em;
text-shadow:
1px 1px 3px #111,
1px 1px 3px #111,
1px 1px 3px #111;
}
.connecting_icon:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 110px;
height: 110px;
border-radius: 50%;
border: 12px #ff8080 solid;
border-right-color: transparent;
animation: spin 1s linear infinite;
}
/*
http://www.html5-memo.com/webtips/css3-loading/
*/
@keyframes spin
{
0% { transform: rotate(0deg); }
/* 50%  { transform: rotate(180deg); } */
100%   { transform: rotate(360deg); }
}