body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    background-color: #efe1e1;
    color: #444;
}
h1 {
    font-weight: 300;
}
h2 {
    margin-bottom: 2rem;
}
h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .2rem;
}
h4, h5 {font-size: 1rem;}
p {
    font-weight: 300;
}
a {
    color: #bd8282;
    text-decoration: none;
}
img {
    width: 100%;
    height: auto;
}
hr {border-top: 1px solid #bd8282; margin: 5rem 0;}
.refekortti {
    min-height: 3rem;
}
.refekortti img {
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0 #00000070;
}
.refekortti h3 {
    margin: .8rem 0 .2rem;
}

.container-fluid {
    max-width: 1200px;
    padding: 0 2rem;
}
/*SECTIONS*/
section {padding: 8rem 0; overflow: hidden;}
/*menu*/
#menu {padding: 0;}
#mobilemenu {position: fixed; bottom: 0; width: 100%; padding: 5px; background-color: #bd8282; text-align: center;}
/*hero*/
#hero {background-color: #f9f9f9;}
#herologo {max-width: 8.5rem; display: block; margin: 0 0 1rem;}
#heroimg {max-width: 300px;}
#hero p {margin-bottom: .5rem;}
#hero a {border: 1px solid #bd8282; padding: 1rem 2rem; margin: 1rem 1rem 0 0; border-radius: .2rem; display: inline-block;}
#hero a:hover {background-color: #bd8282; color: #f9f9f9;}
@media (max-width: 767px) {
    #hero {padding: 2rem 0 8rem 0;}
    #heroimg {margin-bottom: 2rem; max-width: 250px;}
}
/*palvelut*/
#palvelut {background-color: #efe1e1;}
#palvelut h3 {margin: 3rem 0 1rem;}
#palvelut h4 {margin-bottom: 0;}
.palvelulista {margin-left: 1.2rem;}
.nosto {font-size: 1.8rem; font-weight: 300; margin: 0 0 4rem;}
#palvelut img {max-width: 650px;}
/*refet*/
#tyot {
    background-color: #f9f9f9;
}
#tyot img {margin-top: 2rem;}
#grasu-img {max-width: 400px; margin: 0 auto;}
/*yhteys*/
#yhteys img {max-width: 150px; border-radius: 50%;}
#yhteys .container-fluid {max-width: 650px; text-align: center;}
#yhteys h2 {margin-top: 2rem;}
/*footer*/
#footer {background-color: #bd8282;}
#footer svg {max-width: 120px; margin: 0 auto;}
/*palveluarviointi lomake*/
#lomake {padding: 4rem 0;}
.lomake-wrapper {max-width: 500px; margin: 2rem auto;}
#palveluarviointi {font-weight: 300; width: 100%;}
#palveluarviointi input[type="radio"]{-webkit-appearance-: none; display: none;}
#palveluarviointi input[type="radio"]:hover + label{background-color: #e2a1a1;}
#palveluarviointi input[type="radio"]:checked + label{background-color: #e2a1a1; color: #efe1e1;}
#avot {margin: 0 auto;}
#avot label {display: block;}
#avot input, #avot textarea {width: 100%; border: 1px solid #bd8282; border-radius: 4px; margin-bottom: 1rem;}
#palveluarviointi label, #palveluarviointi legend {font-size: 1rem; font-weight: 600; color: #bd8282;}
#palveluarviointi span {color: #bd8282;}
.radio-wrap {display: block; float: none; width: 25rem; margin: 1rem auto; text-align: center;}
.scale-wrap {display: inline-block; width: 100%;}
.scale-wrap > div {float: none; line-height: 2.5rem;}
.radio-group label{height: 40px; width: 40px; border-radius: 50%; border: 1px solid #bd8282; text-align: center;}
.radio-group input, .radio-group label {cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.radiolabel-left, .radiolabel-right {width: 50%; text-align: center; display: block; float: left;}
#lomake-send {text-align: center;}
#lomake-send input {background-color: transparent; border: 1px solid #bd8282; padding: .5rem 1.5rem; border-radius: 4px; color: #bd8282;}
#lomake-send input:hover {background-color: #e2a1a1;}
#lomake-send input:active {color: #efe1e1;}