@media screen and (max-device-width: 1024px){
	#NavigaatioPalkki{
		height: 100px;
		width: 100vw;
		line-height: 3em;
		position: fixed;
		z-index: 100;
	}
	#NavigaatioPalkki.Pieni{
		background: white;
	}
	#MenuButton{
		right: -40px;
	}
	#Links{
		position: fixed;
		left:120%;
		top:0;
		right:-120%;
		bottom:0;
		background: white;
		overflow-y: auto;
		width: initial;
		border-radius:0;
		padding-top: 100px;
		padding-right: 30px;
		box-shadow: 0px 0px 45px 0px #999;
		display:block;
		transition: 600ms;
	}
	#Links .Link{
		transform: none !important;
		width: initial;
		height: initial;
		position: relative;	
		margin-bottom: 15px;
		transform-origin: center center;
		transition: 600ms;
	}
	#Links .Link a {
		display: inline;
		transform: none;
		background: none;
		text-decoration: none;
		width: 100%;
		height: 35px;
		position: relative;
		display: block;
		color: #333;
		line-height: 35px;
	}
	#Links .Link a .Text {
	    position: relative;
	    left: initial;
	    top: initial;
	    transform: none;
	    opacity: 1;
	}
	#Links .Link a .Text span {
	    height: initial;
	    position: relative;
	    width: initial;
	    top: initial;
	    transform-origin: initial;
	    padding-top: initial;
	    font-size: initial;
	    text-align: initial;
	}
	#MenuInput:checked ~ #Links {
	    transform: initial;
	    top: 0;
	    left: 60%;
	    right: 0;
	    transition: 600ms;
	    transform: rotate(-180deg);
	    transform-origin: center center;
	}
	#MenuInput:checked ~ #Links .Link{
	    transition: 600ms;
	    transform: rotate(-180deg) !important;
	}
	#Links .Link a svg, #Links .Link a img {
	    position: relative;
	    left: initial;
	    top: initial;
	    transform: initial;
	    width: initial;
	    margin-right: 20px;
	}
	#MenuButtonBackground {
		pointer-events: none;
	    background: radial-gradient(circle at 50%, rgba(220,220,220,0.6) 20px, transparent 100px);
	}
	#NavigaatioPalkki.Pieni #MenuInput:checked ~ #MenuButton #MenuButtonBackground {
	    pointer-events: none;
	}
	#Links .Link a img {
	    position: relative;
	    width: 20px;
	}
	#EtusivunkuvanTeksti{
		margin-right: 385px;
	}
	#TietoaMeistaTeksti{
		width: 90%;
	}
	.YksikointiLaatikko img{
		margin-bottom: 25px;
	}
	.YksikointiLaatikko{
		display: block;
		width: 100%;
	}
	#Henkilosto{
		display: block;
		width: 90%;
		margin-bottom: 20px;
	}
	#MuutTiedot{
		display: block;
	}
}
@media screen and (max-device-width: 750px){
	#Mobile{
		display: block;
	}
	#NavigaatioPalkki{
		height: 50px;
		width: 100vw;
		line-height: 3em;
		position: fixed;
		z-index: 100;
	}
	#NavigaatioPalkki.Pieni{
		background: white;
	}
	#Logo{
		width: 40px;
		height: 40px;
		margin-left: 10px;
		margin-top: 5px;
	}
	#SivunNimi{
		font-size: 1.4em;
		top:0;
		margin-left: 2.3em;
		height: 50px;
		line-height: 50px;
	}
	#MenuButton{
		right: 0;
	}
	#MenuButton #bars{
		left:0;
		top:0;
	}
	#Menu{
		top: 10px;
		right: 15px;
	}
	#MenuButton .bar {
		transition: 500ms;
	}
	#Etusivunkuva{
		background-image: url("Kuvat/hehkulamppu_pieni.jpg");
	}
	#EtusivunkuvanTeksti{
		margin-right: initial;
		margin-top:100px;
		margin-left: 20px;
		float: left;
		font-size: 0.9em;
	}
	#TietoaMeista{
		font-size: 0.9em;
		padding: 20px 0px;
		padding-bottom: 50px;
	}
	#TietoaMeistaTeksti{
		padding: 0px calc(5% + 20px);
		font-size: 14px;
		color: #444;
		font-weight: 600;
		width: 100%;
	}
	#TietoaMeista img{
		height: 80%;
		opacity: 0.04;
		right: -115px;
	}
	#Palvelut{
		font-size: 0.9em;
		padding: 20px 0px;
		padding-bottom: 50px;
	}
	.PalvelutLaatikko{
		width: 90%;
		margin:0;
		margin-left: 5%;
		display: block;
		height: auto;
		text-align: left;
		color: #444;
		font-weight: 600;
		margin-bottom: 	30px;
		padding: 0px 20px;
		font-size: 14px;
	}
	.PalvelutLaatikko h4{
		text-align: center;
		padding: 5px;
		font-size:1.1em;
		transform: scale(1.2,1);
	}
	#Yksikointi{
		font-size: 0.9em;
		padding: 20px 0px;
		padding-bottom: 50px;
	}
	.YksikointiLaatikko{
		width: 90%;
		margin-left: 5%;
		display: block;
		padding: 0;
		font-size: 14px;
		text-align: left;
		color: #444;
		font-weight: 600;
	}
	.YksikointiLaatikko:last-of-type{
		padding: 0px 20px;
	}
	.YksikointiLaatikko img{
		width: 90%;
		float: initial;
		margin-bottom: 	30px;
		margin-left: 5%;
	}
	#Referenssit{
		font-size: 0.9em;
		padding: 20px 0px;
		padding-bottom: 50px;
	}
	.ReferenssiLaatikko{
		margin: 25px 5%;
		width: 90%;
		height: 150px;
		display: block;
		line-height: 150px;
		border: 1px solid #ddd;
	}
	.ReferenssiLaatikko img{
		max-height: 120px;
		max-width: 90%;
	}
	.ReferenssiLaatikko > div {
		color: #444;
		font-weight: 900;
		line-height: 150%;
	}
	.ReferenssiLaatikko > div > div{
		font-size: 15px;
	}
	#OtaYhteytta{
		font-size: 0.9em;
		padding: 20px 0px;
		padding-bottom: 50px;
		width: 100vw;
	}
	#Yhteydenotto input{
		width: 90%;
		margin-left: 5%;
		height: 40px;
		border: 1px solid #ccc;
	}
	#Yhteydenotto textarea{
		width: 90%;
		margin-left: 5%;
		border: 1px solid #ccc;
	}
	#Yhteydenotto input[type="submit"] {
		width: 90%;
		margin-left: 5%;
		border: 1px solid #ccc;
	}
	#OtaYhteytta h2{
		text-align: center;
	}
	#Yhteydenotto input::placeholder, #Yhteydenotto textarea::placeholder {
	    opacity: 0.6;
	}
	#Yhteystiedot{
		font-size: 0.9em;
		padding: 20px 0px;
		padding-bottom: 50px;
		width: 100vw;
	}
	#Yhteystiedot h2{
		width: 100%;
		text-align: center;
	}
	.YhteystiedotLaatikko{
		width: 100%;
		margin-left: 0%;
		padding-left: 20px;
	}
	.YhteystiedotLaatikko h3 {
	   font-size: 1.3em;
	}
	.YhteystiedotLaatikko svg{
		min-width: 20px;
	}
	#Henkilosto{
		display: block;
		width: 90%;
	}
	.HenkiloTiedot{
		height: 160px;
		width: 100%;
		margin-bottom: 0px;
	}
	.HenkiloKuva{
		width: 60px;
		height: 60px;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		line-height: 60px;
		font-size: 3em;
	}
	.HenkilonTiedot{
		width: 80%;
		display: inline-block;
		vertical-align: middle;
		margin-left: 5%;
	}
	.HenkilonTiedot b{
		font-size: 1.1em;
	}
	#MuutTiedot{
		display: block;
		width: 90%;
	}
	#Links{
		position: fixed;
		left:120%;
		top:0;
		right:-120%;
		bottom:0;
		background: white;
		overflow-y: auto;
		width: initial;
		border-radius:0;
		padding-top: 100px;
		padding-right: 30px;
		box-shadow: 0px 0px 45px 0px #999;
		display:block;
		transition: 600ms;
		height: initial;
	}
	#Links .Link{
		transform: none !important;
		width: initial;
		height: initial;
		position: relative;	
		margin-bottom: 15px;
		transform-origin: center center;
		transition: 600ms;
	}
	#Links .Link a {
		display: inline;
		transform: none;
		background: none;
		text-decoration: none;
		width: 100%;
		height: 35px;
		position: relative;
		display: block;
		color: #333;
		line-height: 35px;
	}
	#Links .Link a .Text {
	    position: relative;
	    left: initial;
	    top: initial;
	    transform: none;
	    opacity: 1;
	}
	#Links .Link a .Text span {
	    height: initial;
	    position: relative;
	    width: initial;
	    top: initial;
	    transform-origin: initial;
	    padding-top: initial;
	    font-size: initial;
	    text-align: initial;
	}
	#MenuInput:checked ~ #Links {
	    transform: initial;
	    top: 0;
	    left: 30%;
	    right: 0;
	    transition: 600ms;
	    transform: rotate(-180deg);
	    transform-origin: center center;
	}
	#MenuInput:checked ~ #Links .Link{
	    transition: 600ms;
	    transform: rotate(-180deg) !important;
	}
	#Links .Link a svg, #Links .Link a img {
	    position: relative;
	    left: initial;
	    top: initial;
	    transform: initial;
	    width: initial;
	    margin-right: 20px;
	}
	#MenuButtonBackground {
		pointer-events: none;
	    background: radial-gradient(circle at 50%, rgba(220,220,220,0.6) 20px, transparent 100px);
	}
	#NavigaatioPalkki.Pieni #MenuInput:checked ~ #MenuButton #MenuButtonBackground {
	    pointer-events: none;
	}
	#Links .Link a img {
	    position: relative;
	    width: 20px;
	}
	.g-recaptcha {
    margin-left: 5%;
    width: 90%;
	}
}