#contactform {
    background: radial-gradient(circle at calc(50% - 300px), #3080f1, #374dc4);
    width: 100%;
    margin: 0 auto;
    padding: 165px 0;
}

.containerform {
    /*background: grey;*/
    width: 90vw;
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-gap: 20px;
}

.containerform h1 {
    margin-bottom: 10px;
}

.containerform p {
    margin-bottom: 18px;
}

.containerform .data {
    line-height: 140%
}

.containerform .fa {    
    width: 22px;
    font-size: 10px;
    height: 13px;
    vertical-align:middle;
}

form {
    display: grid;    
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #acacac;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #acacac;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #acacac;
}
:-moz-placeholder { /* Firefox 18- */
  color: #acacac;
}

input, textarea {
    padding: 10px;
    background-color: #f2f2f2;
    color: dimgray; 
    border: none;
    outline: none;
    border-radius: 3px;
    -webkit-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
}
input:focus, textarea:focus {
    background-color: white;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border: none;
}

textarea {
    grid-column: 1 / span 3;
    grid-row: 2;    
    font-family: 'Maven Pro', sans-serif;    
    resize: vertical;
}

/*FOOTER*/
footer {    
    background: url("../images/vintage_speckles.png");
    width: 100%;
    margin: 0 auto;
    padding: 40px 0 20px 0;
}

.footercontainer {
    width: 90vw;
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, auto);
}

.footerlogo, .footersocial {
    justify-self: center;
    grid-column: 1 / span 3;
    margin-bottom: 5px;
}
.footersocial {
    width: 184px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footercontainer .fa-lg {    
    font-size: 12px;    
    cursor: pointer;
}

.footercontainer .fa-circle {
    color: #3080f1;
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
}
.footercontainer .fa-lg:hover .fa-circle {
    color: #555;
}

.footercontainer .fa-inverse {
    color: white;
    font-size: 10px;
}

.footercontainer a {
    cursor: pointer;
    text-align: center;
    padding: 36px 0;
    text-decoration: none;    
}

.footercontainer a * {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.footercontainer h3 {    
    color: #777;
    font-size: 16px;
    line-height: 110%;    
}
.footercontainer a:hover h3 {    
    color: #333;
    font-size: 16px;
    line-height: 110%;
}
.footercontainer a img {
    opacity: 0.6;
}
.footercontainer a:hover img {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    opacity: 0.8;
}


.footercontainer p {    
    color: #777;
    font-size: 10px;
    font-weight: 900;
    text-align: center;    
    text-transform: uppercase;
    grid-column: 1 / span 3;
    letter-spacing: 1px;
    padding-top: 10px;
}

/*MEDIA QUERIES*/
@media (max-width: 960px) {
    form {   
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr auto;
    }
    #name {
        grid-column: 1 / span 2;
    }
    textarea {
        grid-column: 1 / span 2;
        grid-row: 3;
    }
}

@media (max-width: 740px) {
    .containerform {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    form {   
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
    }    
    #name {
        grid-column: 1;
    }
    textarea {
        grid-column: 1;
        grid-row: 4;
    }
}