#contentForm {
    position: relative;
    margin: 50px auto;
    width: 400px;
    min-height: 200px;
    z-index: 100;
    padding: 30px;
    border: 1px solid #383838;
    background: #D1D1D1;
    /* My stripped background */
    border-radius: 8px;
    box-shadow: 0px 1px 6px #3F3F3F;
}

#contentForm:after {
    background: #F9F9F9;
    margin: 10px;
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    border: 1px #E5E5E5 solid;
    border-radius: 8px;
}

#contentForm h1 {
    font-family: 'Alice',serif;
    text-align: center;
    font-size: 40px;
    padding: 0;
    margin: 0 0 20px 0;
    position: relative;
    color: #8C8C8C;
}

#contentForm h1:after {
    font-size: 25px;
    color: #D6CFCB;
    content: '&';
    text-align: center;
    display: block;
    width: 100%;
    font-family: 'Alice', Verdana, serif;
    text-shadow: 0px 1px 0px #fff;
}

#contentForm h1:before {
    position: absolute;
    bottom: 15px;
    content: ' ';
    text-align: center;
    display: block;
    height: 2px;
    width: 100%;
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%); /* W3C */
}

input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/** inputs and textarea**/
input:not([type="submit"]),
textarea{
    outline:none;
    display:block;
    width:380px;
    padding:4px 8px;
    border:1px dashed #DBDBDB;
    color:#3F3F3F;
    font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;
    font-size:14px;
    border-radius:2px;
    transition:background 0.2s linear,
    box-shadow 0.6s linear;
}

input:not([type="submit"]):active,
textarea:active,
input:not([type="submit"]):focus,
textarea:focus{
    background:#F7F7F7;
    border:dashed 1px #969696;
    box-shadow:2px 2px 7px #E8E8E8 inset;
}

input:not([type="submit"]){
}

textarea{
    min-height:150px;
    resize:vertical
}

/* placeholder */
::-webkit-input-placeholder  {
    color:#BABABA;
    font-style:italic;
}

input:-moz-placeholder,
textarea:-moz-placeholder{
    color:#BABABA;
    font-style:italic;
}

input[type=submit] {
    margin-left:82px;
    cursor:pointer;
    background:none;
    border:none;
    font-family: 'Alice',serif;
    color:#767676;
    font-size:18px;
    padding:10px 4px;
    border:1px solid #E0E0E0;
    text-shadow: 0px 1px  1px #E8E8E8;
    background: rgb(247,247,247);
    background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    border-radius:5px;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    transition:all 0.2s linear;
}

#btn {
    margin-left:90px;
    cursor:pointer;
    background:none;
    border:none;
    font-family: 'Alice',serif;
    color:#767676;
    font-size:18px;
    padding:10px 4px;
    border:1px solid #E0E0E0;
    text-shadow: 0px 1px  1px #E8E8E8;
    background: rgb(247,247,247);
    background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    border-radius:5px;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    transition:all 0.2s linear;
}

#notComp {
    margin-left:90px;
    cursor:pointer;
    background:none;
    border:none;
    font-family: 'Alice',serif;
    color:#767676;
    font-size:18px;
    padding:10px 4px;
    border:1px solid #E0E0E0;
    text-shadow: 0px 1px  1px #E8E8E8;
    background: rgb(247,247,247);
    background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    border-radius:5px;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    transition:all 0.2s linear;
    margin: 20px;
}

@media (max-width: 768px) {
    #btn {
        display: none;
    }
}

@media (min-width: 769px) {
    #notComp {
        display: none;
    }
}

input[type=submit]:hover{
    color:#686868;
    border-color: #CECECE;
    background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}

input[type=submit]:active,
input[type=submit]:focus{
    position:relative;
    top:1px;
    color:#515151;
    background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
    box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}

label{
    color:#7F7E7E;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}
label:hover{
    color:#191919;
}
label:before{
    color:#C1BFBD;
    transition: color 1s ease;
}
label:hover:before{
    color:#969696;
    transition: color 1s ease;
}

p{
    margin-bottom:20px;
}
.indication{
    color:#878787;
    font-size:12px;
    font-style:italic;
    text-align:right;
    padding-right:10px;
}
.required{
    color:#E5224C;
}

@media (max-width: 390px) {
    input[type=submit] {
        margin-left: 26px;
    }

    #contentForm {
        width: 285px;
    }
}

@media (max-width: 426px) {
    input[type=submit] {
        margin-left: 26px;
    }

    #contentForm {
        width: 285px;
    }
}

@media (max-width: 321px) {
    input[type=submit] {
        margin-left: 26px;
    }

    #contentForm {
        width: 285px;
    }
}

