/* Reset */

html, body, span, a, center, ol, ul, footer, header, menu,
nav {
margin: 0;
padding: 0px 0px 0px 0px;
border: 0;
font-size: 100%;
font: inherit;
text-align: center;
letter-spacing:0px;
}
footer, header, menu, nav {
display: block;
}
body {
line-height: 1em;
}
ol, ul {
list-style: none;
}
.skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip:focus {
position: static;
width: auto;
height: auto;
}
body {
background-image: linear-gradient(90deg, #fdfcfb, #ffffff, #fdfcfb);
}

/* Basic */
@-ms-viewport {
width: device-width;
}

a {
transition: border-bottom-color 0.2s ease, color 0.2s ease;
text-decoration: none;
}
a:link {
color:#606802;
text-shadow:0px 2px 3px rgba(0,0,0,0);
letter-spacing:1px;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#606802;
}
a:hover {
color: rgba(0,0,0,.4);
}
a:active {
color:#606802;
}
strong, b {
font-weight: 600;
}

/******************* Main *****************************/
#form {
text-align:center;
background:transparent;
height:auto;
border:0px solid rgba(255,255,255,1);
border-radius:20px;
border-top:  0px solid rgba(255,255,255,1);
box-shadow: 0px 5px 10px 25px rgba(0,0,0,.0);
display:inline-block;
max-width:850px;
margin:0 auto;
padding:0em 1em 4em 1em;
}
#des {
font-family: 'Open Sans', sans-serif;
text-align:center;
font-size:.65em;
color:#000000;
font-weight:400;
line-height:1.2em;
padding:1em 0em 1.5em 0em;
}
#form span {
color:#8d6902;
font-weight:bold;
}
#form h1 {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 1.75em;
color: rgba(0,0,0, 1);
font-weight:600;
line-height: 1.35em;
padding:0 0 1em 0;
margin-right: auto;
margin-left: auto;
max-width: 450px;
}
#form p {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
color: rgba(0,0,0, 1);
font-weight:400;
max-width:875px;
text-align:justify;
line-height:1.5em;
padding:0em 0em 1em 0em;
margin-right: auto;
margin-left: auto;
}

/******************************** Wrapper *************************************/
#main {
background-image: linear-gradient(90deg, #fdfcfb, #ffffff, #fdfcfb);
padding:7em 0em 0em 0em;
margin:0em 0em 0em 0em;
}
#main img {
padding-top:1em;
}
@media screen and (max-width: 980px) {
#main {
padding:9em 0em 0em 0em;
margin:0em 0em -2.5em 0em;
}
}
@media screen and (max-width: 736px) {
#main {
padding:6em 0em 0em 0em;
margin:0em 0em -2em 0em;
}
}
@media screen and (max-width: 550px) {

#form h1 {
font-size: 1.25em;
padding:0 0 1em 0;
margin-right: auto;
margin-left: auto;
max-width: 450px;
}
#form p {
font-size: .85em;
padding:0em 0em 1em 0em;
}
}
@media screen and (max-width: 480px) {
#main {
padding: 1em 0em 0em 0em;
margin:0em 0em -1.5em 0em;
}
}
@media screen and (max-width: 350px) {
#main {
padding:1em 0em 0em 0em;
margin:0em 0em 0em 0em;
}
}
/****************** Button ***********************/
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
transition: all 0.25s ease-in-out;
    -webkit-appearance: none;
    text-align: center;
    position: relative;
    display:block;
    font-size: 0.75em;
    color: #000000;
    font-weight: 400;
    background-image: linear-gradient(90deg, #faf8f5, #fdfcfb, #faf8f5);
    text-transform: capitalize;
    border-top-right-radius: 20%;
    border-top-left-radius: 20%;
    border-bottom-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom: 3px solid #d5d5d5;
    border-top: 3px solid #d5d5d5;
    border-right:0px;
    border-left:0px;
    outline: 0;
    cursor: pointer;
    box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 10%);
    line-height: 1.75em;
    letter-spacing: 0px;
    text-decoration: none;
    padding: 0em 0em 0em 0em;
    margin-bottom: 0.25em;
    width: 150px;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
background:rgba(96,104,2,.5);
color: #ffffff;
}
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
.button:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
input[type="submit"].alt,
input[type="reset"].alt,
input[type="button"].alt,
.button.alt {
border-color: inherit;
color: inherit;
}
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
input[type="button"].alt:hover,
.button.alt:hover {
background: #4d5c39;
color: #ffffff;
}
/*************** Form ********************/

input {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
color: rgba(0,0,0,1);
font-weight:500;
background: rgba(0,0,0, .025);
border-bottom: 1px dotted rgba(0,0,0, .15);
Border-top:0px;
border-right:0px;
border-left:0px;
cursor: text;
color: #000000;
outline: none;
text-decoration: none;
width:100%;
height: 3.25em;
line-height:1em;
box-sizing: border-box;
padding:.5em;
margin:0;
}
input:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
input::placeholder{
text-align: center;
font-size: .75em;
color: rgba(0, 0, 0, .6);
}
textarea  {
color:rgba(0,0,0,1);
background: rgba(0,0,0, .025);
border-bottom: 1px dotted rgba(0,0,0, .15);
Border-top: 0px;
border-right: 0px;
border-left: 0px;
outline:none;
padding: 1em;
resize: none;
box-sizing: border-box;
width:100%;
min-height:17.75em;
line-height: 1.25em;
}
textarea::placeholder {
text-align: left;
font-size: .75em;
color: rgba(0, 0, 0, .6);
}
textarea:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
input[type="file" i]::-webkit-file-upload-button {
text-align: center;
color: #ffffff;
background:rgba(0,0,0, .8);
border:none;
border-radius:3px;
cursor:pointer;
outline:none;
left:0;
margin: 0em .5em 0em 0em;
padding:.25em .5em .25em .5em;
max-width:300px;
}
input[type="file" i]::-webkit-file-upload-button:hover {
background:rgba(96,104,2, 1);
}
input[type="file" i]::-webkit-file-upload-button:hover {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
input#fileToUpload {
border:none;
cursor:pointer;
margin:0;
padding:0;
background:transparent;
max-width: 350px;
}
input[type="file" i]::-webkit-file-upload-button:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
form {
position:relative;
display:block;
width:100%;
margin-right:auto;
margin-left:auto;
margin-top:1em;
}
#fileup {
text-align: left; margin: 0 0 1em 0;
}
.groupthree {
float:left;
margin:3em 0em 1em 0;
width:100%;
}
.groupone {
display:inline-block;
float:left;
width:calc(50% - .5em);
}
.grouptwo {
display:inline-block;
float:right;
width:calc(50% - .5em);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: rgba(0,0,0, .025);
box-shadow: inset 0px 1px 2px 4px rgba(0,0,0, .025);
}
label {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
color: rgba(0,0,0, 1);
font-weight: 600;
letter-spacing: 0px;
text-align: justify;
line-height: 2.5em;
max-width: 350px;
}
label#upload {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: .8em;
color: rgba(0,0,0, 1);
font-weight: 600;
letter-spacing: 0px;
text-align: justify;
line-height: 2.5em;
max-width: 350px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(0,0,0,.8);
}
::-moz-placeholder { /* Firefox 19+ */
color: rgba(0,0,0,.8);
}
:-ms-input-placeholder { /* IE 10+ */
color: rgba(0,0,0,.8);
}
:-moz-placeholder { /* Firefox 18- */
color: rgba(0,0,0,.8);
}

@media screen and (max-width: 550px) {
.groupone {
width:100%;
}
.grouptwo {
width:100%;
}
}
/****************** Footer *********************************/
#footer {
font-family: 'Open Sans', sans-serif;
padding: 5em 0em 0em 0em;
margin:0em 0em 0em 0em;
}
#footer .copyright {
font-size:1em;
color: rgba(0,0,0,0.7);
font-weight:600;
padding: 0em 0em 5em 0em;
list-style: none;
}
#footer ul li {
line-height:0em;
margin:2em 0em 0em 0em;
}
#footer .icon.style2:before {
margin: 0em 0em 0em 0em;
font-size: 3em;
}
#footer .icon {
padding: 5em 0em 0em 0em;
}
#footer .icon.style2:hover {
color: rgba(255,255,255,0.4);
}
#footer .icon.style2:active {
background-color: rgba(0,0,0,0);
}
#footer .icon.style2 {
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
background-color: transparent;
position:relative;
width: 0em;
height: 0em;
line-height: 0em;
color: inherit;
padding:0;
}
@media screen and (max-width: 1280px) {
#footer {
}
}
@media screen and (max-width: 980px) {
#footer {
}
}
@media screen and (max-width: 736px) {
#footer {
}
}
@media screen and (max-width: 480px) {
#footer {
padding: 2em 0em 0em 0em;
margin:0em 0em 0em 0em;
}
#footer .copyright {
font-size:1em;
}
}
@media screen and (max-width: 350px) {
#footer .icon {

}
#footer .copyright {
font-size:.8em;
padding: 0em 0em 3em 0em;
}
}
/*********************** Menu **********************************/

#menu {
-moz-transform: translateX(22em);
-webkit-transform: translateX(22em);
-ms-transform: translateX(22em);
transform: translateX(22em);
-moz-transition: -moz-transform 0.45s ease, visibility 0.45s;
-webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s;
-ms-transition: -ms-transform 0.45s ease, visibility 0.45s;
transition: transform 0.45s ease, visibility 0.45s;
position: fixed;
color: #ffffff;
background: rgba(0,0,0,.7);
top: 0;
right: 0;
width: 26em;
height: 100%;
-webkit-overflow-scrolling: touch;
cursor: default;
visibility: hidden;
z-index: 10002;
}
#menu img {
display:block;
position:relative;
max-width:100px;
padding:1em 0 1em 0;
margin:0 auto;
}
#menu span {
color:#e1fa7c;
}
#menu > .inner {
-moz-transition: opacity 0.45s ease;
-webkit-transition: opacity 0.45s ease;
-ms-transition: opacity 0.45s ease;
transition: opacity 0.45s ease;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 0;
left: 0;
width: 100%;
border-left:solid 12px rgba(255,255,255,.75);
height: 100%;
padding:0;
opacity:0;
overflow-y: auto;
}
#menu > .inner > ul {
position:relative;
display:block;
list-style: none;
margin: 0 auto;
padding: 4em 3em 0em 2em;
}
#menu > .inner > ul > li {
font-size:1em;
font-weight:300;
padding: 0;
border-top: solid 1px rgba(255, 255, 255, .4);
}
#menu > .inner > ul > li a {
display: block;
padding: 1em 0;
line-height: 1.5;
border: 0;
color: rgba(255,255,255,1);
}
#menu > .inner > ul > li a:hover {
color: rgba(255,255,255,.6);
}
#menu > .inner > ul > li:first-child {
border-top: 0;
margin-top: -1em;
}
#menu > .close {
-moz-transition: opacity 0.45s ease, -moz-transform 0.45s ease;
-webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease;
-ms-transition: opacity 0.45s ease, -ms-transform 0.45s ease;
transition: opacity 0.45s ease, transform 0.45s ease;
-moz-transform: scale(0.25) rotate(180deg);
-webkit-transform: scale(0.25) rotate(180deg);
-ms-transform: scale(0.25) rotate(180deg);
transform: scale(0.25) rotate(180deg);
-webkit-tap-highlight-color: transparent;
display: block;
position: absolute;
font-size: .75em;
top: 25em;
left: 12.2em;
width: 11em;
text-indent: 12em;
height: 9em;
border: 0;
opacity: 0;
overflow: hidden;
padding: 0;
white-space: nowrap;
}
#menu > .close:before, #menu > .close:after {
-moz-transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 11em ;
}
#menu > .close:before {
background-image: url("./x.png");
opacity: 1;
}
#menu > .close:after {
background-image: url("./x.png");
opacity: 0;
}
#menu > .close:hover:before {
opacity: .5;
}
#menu > .close:hover:after {
opacity: 0;
}

@media screen and (max-width: 550px) {
#menu {
width:20em;
}
#menu > .inner {
border:none;
}
#menu > .close {
font-size: .65em;
top: 25em;
left: 10.5em;
width: 7em;
padding:0em 0em 2em 0em;
}
#menu > .inner > ul > li {
font-size:.75em;
}
#menu > .inner > ul {
list-style: none;
margin: 0em 2em 0em 2em;
padding: 0;
}
}
body.is-menu-visible #wrapper {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
cursor: default;
opacity: 1;
}
body.is-menu-visible #menu {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
body.is-menu-visible #menu > * {
opacity: 1;
}
body.is-menu-visible #menu .close {
-moz-transform: scale(1.0) rotate(0deg);
-webkit-transform: scale(1.0) rotate(0deg);
-ms-transform: scale(1.0) rotate(0deg);
transform: scale(1.0) rotate(0deg);
opacity: 1;
}
div.line2 {
height: 2px;
text-align:center;
dispaly:inline-block;
background-color: rgba(0,0,0,.3);
margin:0 auto;
padding:0em 0em 0em 0em;
margin:.2em 0 .2em 0;
}