@charset "utf-8";
/* CSS Document */
header {
  height: 200px;
  width: 100%;
  justify-content: center;
  background-color: #f0faff;
  flex-wrap: wrap;
}
.wrapper {
  padding: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wrapper2 {
  width: 100%;
  height: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.back{
	background-color: aqua;
	width: 40px;
	height: 40px;
	position: fixed;
	left: 1796px;
	top: 880px;
}
#kyna {
  position: absolute;
  left: -40px;
	top: 450px;
  background-image: url("../Kuvitus/kynä2.png");
  width: 929px;
  height: 507px;
	 z-index: 10;
}
#heartstring {
  position: absolute;
left: 950px;
	top: 560px;
  background-image: url("../Kuvitus/heartstring.png");
  width: 210px;
  height: 183px;
	 z-index: 10;
}
#kukka {
  position: absolute;
  left: 435px;
  top: 763px;
  background-image: url("../Kuvitus/kukka.png");
  width: 153px;
  height: 139px;
	 z-index: 10;
}
#sydaan {
  position: absolute;
  left: 375px;
  top: 210px;
  background-image: url("../Kuvitus/sydaan.png");
  width: 299px;
  height: 82px;
	 z-index: 10;
}
#thumbsup {
  position: absolute;
 left: 1037px;
	top: 1310px;
  background-image: url("../Kuvitus/thumbsup.png");
  width: 134px;
  height: 138px;
	 z-index: 10;
}
.valiteksti {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 600px;
	position: relative;
}
#varmat {
  font-size: 1.5em;
  margin-left: 10px;
  color: white;
}
#ensi {
  font-size: 1.6em;
  color: black;
}
.valitekstin {
	padding-top: 30px;
  width: 600px;
  height: 200px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 150px;
}
.valiotsikko {
  font-family: Obvia;
  font-weight: 900;
  font-size: 1.3em;
  color: #69a08e;
}
.valiotsikko2 {
  font-family: Obvia;
  font-weight: 700;
  font-size: 1.7;
  color: #b8f3f4;
  padding-top: 40px;
  margin-left: 20px;
  margin-top: 20px;
}
.otsikko {
  font-family: bali-script;
  font-size: 4.7em;
  color: black;
}
.leipis {
  font-family: Blanket;
  font-size: 1.3em;
  color: white;
}
.yhteysosa {
  width: 200px;
  height: 700px;
}
.yhteys {
  background-color: #69a08e;
  margin-left: auto;
  margin-right: auto;
  width: 1400px;
  height: 500px;
  justify-content: space-around;
  flex-wrap: wrap;
  display: flex;
  border-radius: 30px;
	 z-index: 8;
	max-width: 100%;
}
.tietoni {
  width: 550px;
  height: 400px;
  margin-top: 50px;
	max-width: 100%;
}
.notinthebox {
  width: 550px;
  height: 85px;
	max-width: 100%;
}
.kuvat {
  height: 100px;
  width: 46px;
  background-image: url("../Kuvitus/ikoneitapuhsäh.png");
	max-width: 100%;
}
.valikuva {
  margin-top: 50px;
  width: 300px;
  background-image: url("../Kuvitus/valikuva.png");
  height: 400px;
}
.formi {
  width: 550px;
  height: 400px;
  margin-top: 50px;
	max-width: 100%;
}
textarea {
  margin-left: 50px;
  font-family: Blanket;
  font-size: 1.6em;
  resize: none;
}
.formiseper {
  width: 600px;
  height: 80px;
	max-width: 100%;
}
#isomi {
  height: 140px;
  width: 380px;
}
#kol {
  height: 190px;
}
#kuka {
  font-family: bali-script;
  font-size: 3.4em;
}
.vikateksti {
  font-family: Blanket;
  font-size: 1.3em;
  line-height: 20px;
}
#tekstialign {
  margin-left: 10px;
}
.kokoteksti {
  height: 90px;
}
#kokori {
  width: 700px;
  margin-left: 35px;
}
.textarea {
  border-radius: 20px;
  width: 380px;
  height: 40px;
  border: none;
}
input {
  margin-left: 50px;
  font-family: Blanket;
  font-size: 1.6em;
  resize: none;
}
a {
  text-decoration: none;
}
.submit {
  background-color: #E6FFE2;
  border: medium;
  border-color: #1A5B27;
  border-radius: 5px;
  font-family: Obvia;
  margin-left: 70px;
}
.formtexti {
  font-family: Obvia;
  font-weight: 600;
  margin-left: 70px;
}
.osoteet {
  width: 600px;
  height: 200px;
  margin-left: 120px;
  margin-top: 100px;
  flex-wrap: wrap;
  display: flex;
	max-width: 100%;
}
.tekoksi {
  width: 300px;
  height: 20px;
  margin-left: 30px;
	max-width: 100%;
}
#mover3 {
  margin-top: 5px;
}
.ok {
  margin-top: 20px;
  height: 27px;
  width: 100%;
	max-width: 100%;
}
.leipisclass2 {
  font-family: Blanket;
  font-size: 1.3em;
  font-weight: 800;
}
#yhteysotsikko {
  font-family: bali-script;
  color: white;
  font-size: 3.2em;
  margin-left: 100px;
}
.indabox {
  width: 550px;
  height: 35px;
	max-width: 100%;
}
.leipisclass {
  width: 320px;
  height: 50px;
  margin-left: 135px;
}
#sepratoor {
  width: 350px;
  height: 20px;
}
#valiotsikko3 {
  font-family: Obvia;
  font-weight: 700;
  margin-left: 125px;
}
#leipis2 {
  font-family: Blanket;
  font-size: 1.3em;
  line-height: 25px;
}
#bolder {
  font-family: Blanket;
  font-size: 1.3em;
  line-height: 15px;
  font-weight: 700;
}
.linkkikuva {
  height: 45px;
  width: 45px;
  margin-top: 5px;
  margin-right: 30px;
	 transition: filter 0.3s ease;
}
.linkkikuva:hover {
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(180deg);
}
#pofo:hover{
	 filter: brightness(50%)sepia(100%) saturate(500%) hue-rotate(180deg);
}
#cv {
  background-image: url("../Kuvitus/CV.png");
}
#pofo {
  background-image: url("../Kuvitus/pofo.png");
}
#linked {
  background-image: url("../Kuvitus/linked.png");
  width: 48px;
}
#insta {
  background-image: url("../Kuvitus/insta.png");
  width: 47px;
}
.minustaenemman {
  width: 1400px;
  height: 850px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  display: flex;
}
.tekstit {
  margin-top: auto;
  height: 390px;
  width: 50%;
}
.linkit {
  width: 100%;
  height: 200px;
  flex-wrap: wrap;
  display: flex;
  padding-top: 60px;
}
.teksti {
  width: 30%;
  margin-left: 45px;
}
.link {
  width: 60%;
  flex-wrap: wrap;
  display: flex;
}
.kuvamatski {
  margin-top: auto;
  height: 650px;
  width: 50%;
  background-image: url("../Kuvitus/omakuva.png");
}
.palvelut {
  width: 1168px;
  height: 1500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 270px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	position: relative;
	 z-index: 8;
}
.sisalto {
  height: 160px;
  width: 584px;
}
.selitys {
  width: 500px;
  height: 166px;
  background-color: #415b7f;
  margin-top: 50px;
  margin-left: 50px;
  align-content: space-around;
  border-radius: 30px;
}
.mover {
  margin-left: 32px;
  margin-right: 30px;
}
.otsikkoboksi {
  width: 500px;
  height: 50px;
}

#t1{
	position: absolute;
	top: -10px;
	left: 0px;
}
#k1{
	position: absolute;
	top: 0px;
	left: 584px;
	background-image: url("../Kuvitus/brandname.png");
}
#t2{
	position: absolute;
	top: 550px;
	left: 584px;
}
#k2{
		position: absolute;
	top: 225px;
	left: 0px;
	background-image: url("../Kuvitus/painot.png");
}
#t3{
		position: absolute;
	top: 775px;
	left: 0px;
}
#k3{
	position: absolute;
	top: 785px;
	left: 584px;
	background-image: url("../Kuvitus/illust.png");
}
#t4{
		position: absolute;
	top: 1335px;
	left: 584px;
}
#k4{
		position: absolute;
	top: 1012px;
	left: 0px;
	background-image: url("../Kuvitus/tietokone.png");
}

#diffcolor {
  color: white;
}
.kuva {
  width: 500px;
  height: 500px;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 50px;
  cursor: pointer;
	max-width: 100%;
}
.filler {
  width: 100%;
  height: 340px;
}
.div1 {
  height: 980px;
  width: 620px;
  background-color: darkblue;
}
.tekstikupla {
  wifth: 600px;
  height: 300px;
	margin-left: 100px;
}
.textboxes {
  width: 600px;
  height: 500px;
  margin-top: 550px;
  color: black;
  text-align: right;
  margin-right: 100px;
	z-index: 9;
}
.nuoli {
  width: 48px;
  height: 40px;
  margin-left: 350px;
  margin-top: 40px;
  background-image: url("../Kuvitus/nuoli.png");
}
.logo {
  margin-top: 15px;
  height: 69px;
  width: 100px;
  background-image: url("../Kuvitus/logo.png");
}
.nimeni {
  margin-right: auto;
  margin-top: 35px;
  margin-left: 80px;
  height: 100px;
  width: 300px;
}
#nimeni {
  font-family: Obvia;
  font-size: 2em;
  color: #7aa9f4;
  font-weight: 1000;
}
#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 16px;
  font-family: Obvia;
	font-size: 1.2em;
	font-weight: 700;
  cursor: pointer;
	background-color: #415b7f;
	color: white;
	margin-right: 50px;
	border-radius: 20px;
	outline-style: none;
	 z-index: 11;
}
.locatebutton {
  margin-top: 15px;
  height: 69px;
  width: 55px;
  background-image: url("../Kuvitus/aboutbuttonn.png");
  cursor: pointer;
}
.locatebutton:hover{
	filter: brightness(140%);
}
.kuva:hover{
	filter: brightness(110%);
}
.nuoli:hover{
	filter: brightness(160%);
}
button:hover{
	color: #2DB161;
	background-color: #D1F3DE;
	cursor: pointer;
}
.teboxi{
	width: 440px;
	height: 100px;
}
#target {
  height: 160px;
  width: 120px;
  margin-left: 30px;
  margin-top: 20px;
	  position: relative;
  z-index: 10;
}
.nappi {
  margin-bottom: 5px;
  width: 120px;
  height: 40px;
  border-radius: 10px;
  background-color: #415b7f;
  align-content: center;
  font-family: Obvia;
  color: white;
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
	  position: relative;
  z-index: 10;
}
.nappi:hover{
	background-color: #3E6DA4;
	color: #7EC0D4;
}
.everything {
  background: url("../Kuvitus/pohjaaa.png");
  width: 100%;
  height: 5200px;
  margin-top: -200px;
}
.selitys:hover{
	background-color: #3E6DA4;
}
footer {
  width: 100%;
  height: 400px;
  background-color: #515151;
  margin-top: 200px;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.logobottom {
  width: 200px;
  height: 138px;
  background-image: url("../Kuvitus/logovalkeeisokoko.png");
}
@media (max-width: 550px){
	.textarea{
		width: 310px;
	}
	#backToTop {
		left: 20px;
		bottom: 30px;
		width:100px;
			height:60px;
	}
	#target {
  position: absolute;
  left: 200px;
		top: 150px;
}
	#isomi{
		width: 310px;
	}
	#valit{
		width: 488px;
		background-image: url("../Kuvitus/pieninphone valikuva.png");
		margin-left: -20px;
	}
	#formimov{
		padding-left: 30px;
	}
	.sisalto #t1{
		left: 0px;
		top: -10px;
		position: absolute;
	}
	.sisalto #k1{
		left: 0px;
		top: 250px;
		position: absolute;
	}
	.sisalto #t2{
		left: 0px;
		top: 640px;
		position: absolute;
	}
	.sisalto #k2{
		left: 0px;
		top: 900px;
		position: absolute;
	}
	.sisalto #t3{
		left: 0px;
		top: 1290px;
		position: absolute;
	}
	.sisalto #k3{
		left: 0px;
		top: 1550px;
		position: absolute;
	}
	.sisalto #t4{
		left: 0px;
		top: 1940px;
		position: absolute;
	}
	.sisalto #k4{
		left: 0px;
		top: 2210px;
		position: absolute;
	}
}
	@media (max-width: 660px){
	#valit{
		width: 488px;
		background-image:url("../Kuvitus/valit.png");
		margin-left: -20px;
	}
	.notinthebox{
		margin-left: 30px;
	}
	.formiseper .textarea{
		width: 310px;
	}
	#isomi{
		width: 310px;
	}
	.yhteys .valikuva{
		margin-left: 20px;
	}
	.formi{
		padding-left: 20px;
	}
	html .formiseper{
		margin-left: 15px;
	}
	html .yhteys .valikuva{
		background-image:url("../Kuvitus/phoneseper.png");
	}
}
@media (max-width: 860px){
	.palvelut #heartstring {
  position: absolute;
left: 230px;
	top: 1335px;
}
				html #everyid{
  width: 100%;
		background-image:url("../Kuvitus/pohja 4-2.png");
  height: 7000px;
  margin-top: -200px;
}
.palvelut #kukka {
  position: absolute;
  left: 250px;
  top: 655px;
}
.palvelut #sydaan {
  position: absolute;
  left: 80px;
  top: 240px;
}
.palvelut #thumbsup {
  position: absolute;
 left: 245px;
	top: 2160px;
}
	.valitekstin #kyna{
		background-image:url("../Kuvitus/kynä indexpienempi finalform.png");
		width: 333px;
		height: 553px;
		left: 0px;
	}
	.valiteksti{
		width: 333px;
	}
	html .mov{
		margin-top: 2400px;
	}
	.valiteksti .valitekstin{
		margin-left: 10px;
		margin-bottom: 20px;
	}
	.sisalto #t1{
		left: -50px;
		top: -10px;
		position: absolute;
	}
	.sisalto #k1{
		left: -50px;
		top: 250px;
		position: absolute;
	}
	.sisalto #t2{
		left: -50px;
		top: 640px;
		position: absolute;
	}
	.sisalto #k2{
		left: -50px;
		top: 900px;
		position: absolute;
	}
	.sisalto #t3{
		left: -50px;
		top: 1290px;
		position: absolute;
	}
	.sisalto #k3{
		left: -50px;
		top: 1550px;
		position: absolute;
	}
	.sisalto #t4{
		left: -50px;
		top: 1940px;
		position: absolute;
	}
	.sisalto #k4{
		left: -50px;
		top: 2210px;
		position: absolute;
	}
	.yhteys{
		margin-top: 1300px;
	}
	
	
	body .sisalto{
		width: 370px;
	}
	body .palvelut{
		width: 370px;
	}
	html #fopo{
		margin-top: 1000px;
	}
}
@media (max-width: 900px){
	.yhteys .valikuva{
		width: 700px;
	}
}
@media (max-width: 930px){
	.yhteys{
		width: 90%;
		height: 1150px;
	}
			#everyid{
  width: 100%;
		background-image:url("../Kuvitus/pohja3-2.png");
  height: 6000px;
  margin-top: -200px;
}
	html .textboxes{
		width: 320px;
		align-content: center;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	html .textboxes .tekstikupla{
		width: 290px;
		margin-left: auto;
		margin-right: auto;
	}
	html .nuoli{
		margin-left: auto;
		margin-right: auto;
	}
	.yhteys .valikuva{
		width: 750px;
		height: 89px;
		background-image:url("../Kuvitus/valitiso.png");
		margin-left: -5px;
	}
	html .formiseper .textarea{
		width: 330px;
	}
	.tietoni{
		margin-left: -180px;
	}
	html .formiseper #isomi{
		width: 330px;
	}
	.formi{
		margin-left: -120px;
		width: 500px;
	}
	html footer{
		margin-top: 700px;
	}
}
@media (max-width: 990px) {
	.nimeni{
		width:1px;
		visibility: hidden;
	}
  }
@media (max-width: 1070px){
	html .minustaenemman{
		width: 370px;
	}
		.everything {
  width: 100%;
  height: 5200px;
  margin-top: -200px;
}
	.minustaenemman .kuvamatski{
		background-image: url("../Kuvitus/finalpicform.png");
		width: 370px;
		height: 340px;
		margin-bottom: 150px;
	}
	.minustaenemman .tekstit{
		width: 370px;
		justify-content: center;
	}
	.minustaenemman .tekstit #kuka{
		font-size: 2.6em;
		margin-left: 25px;
	}
	.minustaenemman .teboxi{
		width: 300px;
		height: 200px;
	}
	.minustaenemman .teksti{
		width: 300px;
		height: 40px;
		text-align: center;
		margin-left: 30px;
	}
	.minustaenemman .link{
		margin-left: 50px;
		margin-top: -20px;
	}
	.minustaenemman .vikateksti{
		width: 300px;
		height: 200px;
	}
}
@media (max-width: 1300px) {
	html .otsikko{
		font-size: 3.5em;
		background-color: aliceblue;
		border: thick;
	}
	.textboxes .tekstikupla{
		width: 360px;
		margin-left: 100px;
	}
	html #ensi{
		font-size: 1.6em;
		background-color: aliceblue;
		border: thick;
	}
	.nuoli{
		margin-left: 200px;
	}
	.textboxes{
		width: 450px;
		align-content: center;
	}
	.palvelut{
		width: 100%;
	}
	.sisalto{
		width: 100%;
	}
	#kyna{
		background-image:url("../Kuvitus/kynä indexpienempi.png");
		width: 420px;
		height: 600px;
		left: 90px;
	top: 500px;
	}
	.kokoteksti{
		width: 600px;
	}
	.valitekstin {
	padding-top: 50px;
  width: 330px;
  height: 400px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 150px;
}
.valiotsikko {
  font-family: Obvia;
  font-weight: 900;
  font-size: 1.1em;
  color: #69a08e;
}

	.minustaenemman{
		flex-wrap: nowrap;
		align-content: center;
		display: flex;
		padding-top: 400px;
		flex-direction: column;
		margin-left: none;
		margin-right: none;
		width: 100%;
		height: 1000px;
	}
	.tekstit{
		width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	.linkit{
		width: 700px;
	}
	.kuvamatski{
		height: 1100px;
		width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	footer{
		margin-top: 880px;
	}
	.selitys {
  width: 370px;
  height: 220px;
  background-color: #415b7f;
  margin-top: 50px;
  margin-left: 50px;
  align-content: space-around;
  border-radius: 30px;
}
	#t1{
	position: absolute;
	top: -10px;
	left: -50px;
}
	.palvelut{
		margin-top: 400px;
		width: 770px;
	}
#k1{
	position: absolute;
	top: 0px;
	left: 350px;
	background-image:url("../Kuvitus/brandname indexpienempi.png");
	width: 370px;
  height: 370px;
}
#t2{
	position: absolute;
	top: 389px;
	left: 350px;
}
#k2{
		position: absolute;
	top: 250px;
	left: -50px;
	background-image:url("../Kuvitus/painot indexpienempi.png");
	width: 370px;
  height: 370px;
}
#t3{
		position: absolute;
	top: 640px;
	left: -50px;
}
#k3{
	position: absolute;
	top: 650px;
	left: 349px;
	background-image:url("../Kuvitus/illust indexpienempi.png");
	width: 370px;
  height: 370px;
}
#t4{
		position: absolute;
	top: 1045px;
	left: 350px;
}
#k4{
		position: absolute;
	top: 905px;
	left: -50px;
	background-image:url("../Kuvitus/tietokone indexpienempi.png");
	width: 370px;
  height: 370px;
}
	#heartstring {
  position: absolute;
left: 235px;
	top: 685px;
  background-image:url("../Kuvitus/heartstring indexpieni.png");
  width: 140px;
  height: 122px;
}
#kukka {
  position: absolute;
  left: 675px;
  top: 400px;
  background-image:url("../Kuvitus/kukka indexpieni.png");
  width: 107px;
  height: 98px;
}
#sydaan {
  position: absolute;
  left: 200px;
  top: 250px;
  background-image:url("../Kuvitus/sydaan indexpieni.png");
  width: 231px;
  height: 58px;
}
#thumbsup {
  position: absolute;
 left: 675px;
	top: 1235px;
  background-image:url("../Kuvitus/thumbsup indexpieni.png");
  width: 91px;
  height: 94px;
}
	}
@media (max-width: 1514px) {
	.tekstit{
		width: 40%;
	}
	.yhteys {
	width: 900px;
}
	.everything{
		background-image: url("../Kuvitus/backgroundok.png");
	}
	.minustaenemman{
		margin-left: auto;
		margin-right: auto;
	}
.tietoni {
width: 375px;
}
.notinthebox {
height: 80px;
}
.kuvat {
 width: 46px;
}
.valikuva {
 width: 150px;
	background-image: url("../Kuvitus/sepero.png");
}
.formi {
 width: 375px;
}
.formiseper {
 width: 70%;
}
.osoteet {
  width: 70%;
}
.tekoksi {
 width: 70%;
}
.ok {
 width: 70%;
}
.indabox {
 width: 250px;
	margin-left: 135px;
		height: 55px;
}
	#yhteysotsikko{
		font-size: 2.6em;
	}
	#valiotsikko3{
		margin-left: -10px;
	}
	.textarea{
		width: 230px;
	}
	#isomi{
		width: 230px;
	}
}
@media (max-width: 1700px){
	.everything{
		background-image: url("../Kuvitus/backgroundddd.png")no-repeat;
	}
}