@charset "utf-8";

input[type="text"],
input[type="password"] {
 padding: 6px 10px;
 border: solid 1px #ccc;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 height: 45px;
 -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 -o-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 -ms-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 font-size: 1.2em;
}

input.error {
 background: #e5a590;
}

div.error-message {
 font-size: 1em;
 line-height: 1.5em;
}
div.error-message > p {
 font-weight: bold;
 color: #cc3d00;
 font-size: 1.2em;
}

.input-title > p {
 display: -ms-inline-box;
 display: -webkit-inline-box;
 display: inline-block;
 font-weight: bold;
 font-size: 1.2em;
}

.required > p {
 padding-right: 20px !important;
 position: relative;
}
.required > p:after {
 content: "*";
 display: block;
 color: red;
 font-size: 1.2em;
 font-weight: bold;
 position: absolute;
 -ms-transform: translate(0, -50%);
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 top: 50%;
 right: 0;
}

ul.checkbox {
 list-style: none;
}
ul.checkbox li {
 cursor: pointer;
 position: relative;
 padding-left: 30px;
}
ul.checkbox li > p {
 display: -ms-inline-box;
 display: -webkit-inline-box;
 display: inline-block;
 padding: 10px;
 font-size: 1.2em;
}
ul.checkbox li:hover > p {
 background-color: #bafff6;
 -ms-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
}
ul.checkbox li:before {
 content: "";
 display: block;
 width: 30px;
 height: 30px;
 position: absolute;
 background: url(../image/check_box_off.png) no-repeat;
 -moz-background-size: 100% auto;
 -webkit-background-size: 100% auto;
 -ms-background-size: 100% auto;
 background-size: 100% auto;
 -ms-transform: translate(0, -50%);
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 top: 50%;
 left: 0;
}
ul.checkbox li.check:before {
 background: url(../image/check_box_on.png) no-repeat;
 -moz-background-size: 100% auto;
 -webkit-background-size: 100% auto;
 -ms-background-size: 100% auto;
 background-size: 100% auto;
}
ul.checkbox.error {
 background: #e5a590;
}
ul.horizontal:after {
 content: "";
 display: block;
 clear: both;
}
ul.horizontal li {
 /*display: inline;*/
 float: left;
}

ul.radio {
 list-style: none;
}
ul.radio li {
 cursor: pointer;
 position: relative;
 padding-left: 30px;
}
ul.radio li > p {
 display: -ms-inline-box;
 display: -webkit-inline-box;
 display: inline-block;
 padding: 10px;
 font-size: 1.2em;
}
ul.radio li:hover > p {
 background-color: #bafff6;
 -ms-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
}
ul.radio li:before {
 content: "";
 display: block;
 width: 30px;
 height: 30px;
 position: absolute;
 background: url(../image/radio_button_off.png) no-repeat;
 -moz-background-size: 100% auto;
 -webkit-background-size: 100% auto;
 -ms-background-size: 100% auto;
 background-size: 100% auto;
 -ms-transform: translate(0, -50%);
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 top: 50%;
 left: 0;
}
ul.radio li.check:before {
 background: url(../image/radio_button_on.png) no-repeat;
 -moz-background-size: 100% auto;
 -webkit-background-size: 100% auto;
 -ms-background-size: 100% auto;
 background-size: 100% auto;
}
ul.radio.error {
 background: #e5a590;
}

textarea {
 padding: 6px 10px;
 border: solid 1px #ccc;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 -o-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 -ms-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4) inset;
 font-size: 1.2em;
 height: 5em;
 width: 90%;
}

div.cover {
 position: absolute;
 opacity: 0.8;
 background: #a9a9a9;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
div.cover > div {
 position: absolute;
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 font-weight: bold;
 font-size: 1.2em;
 color: #ffffff;
}

/* mobile media */
@media screen and (max-width: 768px) {
 
}
@media screen and (max-width: 360px) {
 #banner-title h1 {
  font-size: 1.6em;
 }
}