@media screen and (min-width: 1100px) {

	#search {
		z-index: 1;
	}

	#title a {
    	color: #965d10;
    	font-size: 16px;
    	text-decoration: none;
    	background: #efffe4;
    	padding: 10px;
    	border-radius: 4px;
}

	#title {
    	position: absolute;
    	margin-top: 0px;
    	z-index: 1;
}

	/* Celý obsah homepage */
	#hp-area{
		width:1100px;
		padding:2em 1em;
		margin-left:auto;
		margin-right:auto;
		box-sizing:border-box;
		background: #5ac11c;
		border-radius: 5px;
	}

	/* Sluníčko */
	#sun{
		width: 100px;
		height: 100px;
		position: absolute;
    	margin-left: 640px;
		margin-top: 20px;
	}

	#sun img{
		width:100%;
		transform: translate(-50%, -50%);
		animation: 2s sun linear infinite;
    	animation-delay: 0s;
	}

	@keyframes sun{
		0% {width:100%;}
		25% {width:105%;}
		50% {width:100%;}
		100% {width:100%;}
	}

	/* Mraky */
	.cloud{
		position:absolute;
	}

	.cloud img{
		width:100%;
	}

	#cloud-1{
		top:40px;
		width:180px;
		left:40%;
		animation:50s cloud_1 linear infinite;
	}

	@keyframes cloud_1{
		0% {left:40%;}
		50% {left:-20%;width:180px;}
		51% {left:-20%;width:0;}
		52% {left:100%;width:0;}
		53% {left:100%;width:180px;}
		100% {left: 40%;}
	}

	#cloud-2{
		top:60px;
		width:200px;
		left:10%;
		animation:100s cloud_2 linear infinite;
		transform:scale(-1,1);
	}

	@keyframes cloud_2{
		0% {left:10%;}
		20% {left:-20%;width:200px;}
		21% {left:-20%;width:0;}
		22% {left:100%;width:0;}
		23% {left:100%;width:200px;}
		100% {left: 10%;}
	}

	#cloud-3{
		top: 15px;
		width:220px;
		left:75%;
		animation:150s cloud_3 linear infinite;
	}

	@keyframes cloud_3{
		0% {left:75%;}
		85% {left:-20%;width:220px;}
		86% {left:-20%;width:0;}
		87% {left:100%;width:0;}
		88% {left:100%;width:220px;}
		100% {left: 75%;}
	}

	/* Křoví */
	#bush{
		position: absolute;
		width: 100px;
		margin-top: 266px;
		margin-left: 1000px;
		z-index:2;
	}

	#bush img{
		width:100%;
	}

	#bush-2{
		position: absolute;
		z-index: 1;
		width: 100px;
		margin-top: 266px;
		margin-left: -10px;
	}

	#bush-2 img{
		width: 180px;
	}

	/* Beruna */
	#ladybug{
		position: absolute;
    	width: 40px;
    	margin-top: 338px;
    	transform:scale(-1,1);
		animation:38s ladybug linear infinite;
	}

	@keyframes ladybug{
		0% {margin-left:0;}
		50% {margin-left:1050px;transform:scale(-1,1);}
		51% {margin-left:1050px;transform:scale(1,1);}
		99% {margin-left: 0;transform:scale(1,1);}
		100% {transform:scale(-1,1);}
	}

	#ladybug img{
		width:100%;
	}

	body{
		overflow-x: hidden;
	}

	#tree{
		top: 10px;
		margin-left:750px;
		position: relative;
		z-index: 1;
	}

	#butterfly{
		width:40px;
		transform: rotate(-20deg);
		margin-top: -159px;
    	margin-left: 166px;
	}

	#butterfly img{
		animation:0.8s butterfly linear infinite;
		width:100%;
		height:40px;
	}

	@keyframes butterfly{
		0% {width:100%;}
		50% {width:40%;margin-left:13px}
		100% {width:100%;}
	}

	#heart{
		width: 25px;
    	margin-left: 655px;
    	margin-top: 41px;
		position:absolute;
		transform:rotate(20deg);
	}

	#heart img{
		animation:5s heart linear infinite;
		transform: translate(-50%, -50%);
		width:100%;
	}

	@keyframes heart{
		0% {width:100%;}
		20% {width:100%;}
		25% {width:110%;}
		30% {width:100%;}
		100% {width:100%;}
	}

	#grass{
		width: 50px;
		margin-left: 920px;
		margin-top: 136px;
		position:absolute;
	}

	#grass img{
		height: 37px;
	}

	#flower{
		width: 50px;
		margin-left: 913px;
		margin-top: 114px;
		position:absolute;
		z-index: 1;
	}

	#flower img{
		width:100%;
		animation:5s flower linear infinite;
		transform: rotate(0deg);
		transform-origin: bottom center;
	}

	@keyframes flower{
		0% {transform:rotate(0deg);}
		20% {transform:rotate(0deg);}
		50% {transform:rotate(-10deg);}
		70% {transform:rotate(0deg);}
		100% {transform:rotate(0deg);}
	}

	#bug{
		width: 15px;
		margin-top: 120px;
		margin-left: 100px;
		animation:6s bug linear infinite, 0.6s bug_shaking linear infinite;
	}

	#bug img{
		width:100%;
		animation:6s bug_fall linear infinite;
	}

	@keyframes bug{
		0% {margin-top:120px;}
		70% {margin-top:-85px;}
		100% {margin-top:120;}

	}

	@keyframes bug_fall{
		70% {transform:rotate(0deg);}
		100% {transform:rotate(360deg);}
	}

	@keyframes bug_shaking{
		0% {transform:rotate(0deg);margin-left:100px;}
		25% {transform:rotate(-25deg);margin-left:97px;}
		50% {transform:rotate(0deg);margin-left:100px;}
		75% {transform:rotate(25deg);margin-left:103px;}
		100% {transform:rotate(0deg);margin-left:100px;}
	}

	#bee{
		width:22px;
		top: 50px;
		margin-left:720px;
		animation:6s bee linear infinite;
	}

	#bee img{
		width:100%;
	}

	@keyframes bee{
		0%{margin-left:720px}
		15%{margin-left:730px;margin-top:20px;}
		30%{margin-left:710px;margin-top:50px;}
		45%{margin-left:720px;margin-top:70px;}
		60%{margin-left:730px;margin-top:60px;}
		75%{margin-left:720px;margin-top:40px;}
		90%{margin-left:710px;margin-top:30px;}
		10%{margin-left:720px;margin-top:15px;}
	}


}


@media (max-width: 1099px) {


	#title a {
    	text-decoration: none;
    	color: #8e5710;
	}


}

@media (max-width: 638px) {


	#hp-box-1 .hp-content{
		flex-wrap:wrap;
	}

	#hp-area #hp-box-1 a{
		flex:auto;
		width:calc(50% - 1em);
	}


}

@media (max-width: 508px) {


	#hp-box-2 .hp-content{
		flex-wrap:wrap;
	}

	#hp-area #hp-box-2 a{
		flex:auto;
		width:100%;
	}


}

@media (max-width: 300px) {

	#hp-area #hp-box-1 a{
		width:100%;
	}


}

/* Obě oblasti tlačítek */
.hp-box{
	width:100%;
}

/* Horní oblast */
#hp-box-1{
	background:#8cda77;
	margin-bottom:3em;
	border-radius: 5px;
}

/* Spodní oblast */
#hp-box-2{
	background:#8cda77;
	border-radius: 5px;
}

/* Nadpisy */
.hp-header{
	font-size:1.5em;
	text-align:center;
	padding: 1.6em;
	color: #4a2d03;
	font-weight: bold;
}

/* Na to radši nešahej :D */
.hp-content{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding: 0.2em;
    padding-bottom: 3em;
}

/* Všechna tlačítka */
#hp-area a{
	background: #f5f0bc;
	background: #b4f87f;
	flex:1;
	margin:0.5em;
	height:4em;
	line-height:2em;
	font-size:2em;
	text-decoration:none;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction: column;
}

/* Všechna tlačítka po najetí*/
#hp-area a:hover{
	background: #5ac11c;
}

/* Všechna tlačítka v horní oblasti */
#hp-box-1 a{
	color: #2b2b2b;
}

/* Všechna tlačítka v horní oblasti po najetí*/
#hp-box-1 a:hover{

}

/* Všechna tlačítka ve spodní oblasti */
#hp-box-2 a{
	margin:0.5em 5%;
	color: #2b2b2b;
}

/* Všechna tlačítka ve spodní oblasti po najetí*/
#hp-box-2 a:hover{

}

/* Tlačítko 1 */
a#hp-button-1{
	/*background: #739e41;*/
	color: #1d3501;
}

/* Tlačítko 1 po najetí*/
a#hp-button-1:hover{
	/*background: #5d7f35;*/

}

/* Tlačítko 2 */
a#hp-button-2{
	/*background: #e65e1d;*/
	color: #732703;
}

/* Tlačítko 2 po najetí*/
a#hp-button-2:hover{
	/*background: #d84f0d;*/
}

/* Tlačítko 3 */
a#hp-button-3{
	/*background: #7ba5ca;*/
	color: #0a4273;
}

/* Tlačítko 3 po najetí*/
a#hp-button-3:hover{
	/*background: #5a85ab;*/
}

/* Tlačítko 4 */
a#hp-button-4{
	/*background: #efd919;*/
	color: #716601;
}

/* Tlačítko 4 po najetí*/
a#hp-button-4:hover{
	/*background: #dac617;*/
}

/* Tlačítko 5 */
a#hp-button-5{
	/*background: #e65e1d;*/
	color: #732703;
}

/* Tlačítko 5 po najetí*/
a#hp-button-5:hover{
	/*background: #d84f0d;*/
}

/* Tlačítko 6 */
a#hp-button-6{
	/*background: #7ba5ca;*/
	color: #0a4273;
}

/* Tlačítko 6 po najetí*/
a#hp-button-6:hover{
	/*background: #5a85ab;*/

}

/* Tlačítko 7 */
a#hp-button-7{
	/*background: #efd919;*/
	color: #716601;
}

/* Tlačítko 7 po najetí*/
a#hp-button-7:hover{
	/*background: #dac617;*/
}

.hp-button-img{
	width:55px;
	height:55px;
	margin-top:0.1em;
}

.hp-button-img img{
	max-width:100%;
	max-height:100%;
}

.hp-button-name{
	line-height:1em;
	margin-top:5px;
}