body{
    background: url('../media/image/sendcode_bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}


h1 {
    font-size: 2.5em;
    line-height: 1.25em; }
  
h2 {
font-size: 1.75em;
line-height: 1.5em; }

h3 {
font-size: 1.35em;
line-height: 1.5em; }

h4 {
font-size: 1.1em;
line-height: 1.5em; }

h5 {
font-size: 0.9em;
line-height: 1.5em; }

h6 {
font-size: 0.7em;
line-height: 1.5em; }

.item-box{
    width: 50%;
    display: block;
    margin-top: 14%;
    padding: 60px;
}

.title-text {
    color: azure;
}

#input-form{
    display: inline-block;
}

#input-form .form-class{
    margin-top: 10px;
}

#input-form .form-class input{
    width: 270px;
    height: 34px;
    border-color: rgb(190, 184, 184);
    margin-right: 18px;
    padding: 3px 15px;
    border-radius: 5px;
    outline-color: rgb(42, 187, 139);
    outline-style: none;
    outline: 0px;
    box-shadow: none;
    text-shadow: none ;
    color: rgba(255, 255, 255, 0.75);
    font-family: "Roboto", sans-serif;
    font-size: 16pt;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.65em; 
    background-color: transparent;
 }

 #input-form .form-class input[type="text"]:focus,
 #input-form .form-class input[type="password"]:focus,
 #input-form .form-class input[type="email"]:focus{
   -moz-animation: focus 0.1s;
   -webkit-animation: focus 0.1s;
   -ms-animation: focus 0.1s;
   animation: focus 0.1s;
   background-color: rgba(255, 255, 255, 0.125);
   border-color: #1cb495; }


   input[type="text"],
   input[type="password"],
   input[type="email"] {
       height: 2.75em;
       -moz-appearance: none;
       -webkit-appearance: none;
       -ms-appearance: none;
       appearance: none;
       -moz-transform: scale(1);
       -webkit-transform: scale(1);
       -ms-transform: scale(1);
       transform: scale(1);
       -moz-transition: border-color 0.2s ease, background-color 0.2s ease;
       -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
       -ms-transition: border-color 0.2s ease, background-color 0.2s ease;
       transition: border-color 0.2s ease, background-color 0.2s ease;
       border-radius: 6px;
       border: none;
       border: solid 2px rgba(255, 255, 255, 0.35);
       color: inherit;
       outline: 0;
       padding: 0 1em;
       text-decoration: none;
       width: 100%;  }
   
   
   
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
     opacity: 1.0; 
     }
   
   :-moz-placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
     opacity: 1.0; }
   
   ::-moz-placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
     opacity: 1.0; 
     }
   
   :-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
     opacity: 1.0; 
    }
   
   .formerize-placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
     opacity: 1.0; 
     }
   
   
   
     #input-form .form-class  input::-moz-focus-inner {
       border: 0;
       padding: 0; }
   
       #input-form .form-class   input, select, textarea {
           -moz-appearance: none;
           -webkit-appearance: none;
           -ms-appearance: none;
           appearance: none; }
   
           #input-form .form-class input::-webkit-input-placeholder{
       color: #ffffff;
       font-size: 14px;
    }
    #input-form .form-class input ::-moz-placeholder{
       color: #ffffff;
       font-size: 14px;
    }
    #input-form .form-class input:-ms-input-placeholder{
       color: #ffffff;
       font-size: 14px;
    }
    #input-form .form-class input[type=text]:focus{
       outline: none;
       color: aqua;
       font-size: 14px;
     }
   
     /* Button */
   input[type="submit"],
   input[type="button"],
   button,
   .button {
     -moz-appearance: none;
     -webkit-appearance: none;
     -ms-appearance: none;
     appearance: none;
     -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     background-color: #1cb495;
     border-radius: 6px;
     border: 0;
     color: #ffffff !important;
     cursor: pointer;
     display: inline-block;
     font-weight: 700;
     height: 2.75em;
     line-height: 2.75em;
     padding: 0 1.125em;
     text-align: center;
     text-decoration: none;
     white-space: nowrap; }
     input[type="submit"]:hover,
     input[type="reset"]:hover,
     input[type="button"]:hover,
     button:hover,
     .button:hover {
       background-color: #1fcaa7; }
     input[type="submit"]:active,
     input[type="reset"]:active,
     input[type="button"]:active,
     button:active,
     .button:active {
       background-color: #199e83; }
     input[type="submit"].disabled, input[type="submit"]:disabled,
     input[type="reset"].disabled,
     input[type="reset"]:disabled,
     input[type="button"].disabled,
     input[type="button"]:disabled,
     button.disabled,
     button:disabled,
     .button.disabled,
     .button:disabled {
       opacity: 0.5; }
   
#input-form .form-class  .btn{
    background-color: rgb(42, 187, 139);
    color: #ffffff;
    margin-top: 0px;
    width: 80px;
    height: 40px;
    font-size: 18px;
    font-weight: 700;
    border: 0;
    border-radius: 5px;
}


#footer {
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    bottom: 4em;
    color: rgba(255, 255, 255, 0.5);
    left: 4em;
    opacity: 0.5;
    position: absolute; 
  }


    #footer .icons {
      margin: 0 0 0.5em 0; }
    #footer .copyright {
      font-size: 0.8em;
      list-style: none;
      padding: 0; }
      #footer .copyright li {
        border-left: solid 1px rgba(255, 255, 255, 0.25);
        display: inline-block;
        line-height: 1em;
        margin: 0 0 0 0.75em;
        padding: 0 0 0 0.75em; }
        #footer .copyright li:first-child {
          border-left: 0;
          margin-left: 0;
          padding-left: 0; }
      #footer .copyright a {
        color: inherit; }
    #footer:hover {
      opacity: 1; }
    #footer > :last-child {
      margin-bottom: 0; }

    @media screen and (max-width: 1680px) {
      #footer {
        bottom: 3.5em;
        left: 3.5em; } }
    @media screen and (max-width: 736px) {
      #footer {
        bottom: 2em;
        left: 2em; } }
    @media screen and (max-width: 360px) {
      #footer {
        bottom: 1.25em;
        left: 1.25em; } }
    @media screen and (max-height: 640px) {
      #footer {
        bottom: auto;
        left: auto;
        margin: 1em 0 0 0;
        position: relative; } }