﻿
p {
    color: black;
}

.form_wrapper {
    width:50%;
    border: solid 1px #5691BF;
    border-radius:20px;
    padding:20px;
    margin-top: 20px;
}

.contact_wrapper
{
    width: 100%;
    height:35px;

}

.contact_wrapper:first-of-type {
    /*margin-top:30px;*/

}

.contact_wrapper div{

}

.contact_wrapper .description {
    float: left;
    width:20%;
    margin-right: 15px;

}

.contact_wrapper .value {
    position: relative;
    width: 90%;
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
}

.contact_wrapper .value input, .contact_wrapper .value textarea {
    text-decoration: none;
    border: none;
    border: solid 1px gray;
    margin-right: 20px;
    background-color: transparent;
    position: relative;

    padding: 3px;
    border-radius: 5px;

}

.contact_wrapper .value .watermark {
    position: absolute;
    top: 4px;
    font-size: 1rem;
    color: gray;
    transition: all 0.1s linear;
}

.contact_wrapper .value .watermark.active{
    top: -14px;
    font-size: .7rem;
    color: black;
    left: calc(initial - 20px);
    transition: all 0.1s linear;
}

.button {
    margin-top:20px;
    border: solid 1px gray;
    padding:5px;
    border-radius:5px;
    color:grey;
}
.button:hover {
    border: solid 1px black;
    color:black;
    cursor:pointer;
}

.msg {
    color: green;
    display: block;
    font-weight: 600;
    position: relative;
    top: -45px;
    left: 120px;
}

.w1_1 {
    width:95%;
}

.w1_2 {
    width: 46%;
}

.w1_3 {
    width: 30%;
}


/* Smartphones (portrait and landscape) ----------- */ 
@media screen and (min-width: 360px) and (max-width: 800px) {

    .form_wrapper {
        width:85%;
    }

    .w1_2 {
        width: 100%;
    }

    .w1_3 {
        width: 100%;
    }

    .contact_wrapper {
        height: auto;
    }

    .contact_wrapper .value {
        display: block;
        width: 100%;
        margin-top: 0px;
    }

   .contact_wrapper .value .watermark {
       position: relative;
       top: -5px;
   }

   .contact_wrapper .value input, .contact_wrapper .value textarea {
        margin-bottom: 15px;
    }
}