@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);

body {padding: 0;}
#b_page > header {display: none;}
#b_page > .page_move > #top > header {display: block; width: 100%; position: absolute; left: 0; top: 0; height: 37px; background: #FF5BAB;}
#b_page > .page_move > #top > header a {display: block; float: right; height: 37px; line-height: 37px; color: #fff; font-size: 18px; padding: 0 40px; margin-left: 3px; background: #F887C2; font-weight: normal;  transition: background .2s ease;}
#b_page > .page_move > #top > header a:hover {background: #ff5bab; background: #F887C2;}
#b_page > .page_move > #top > header a.jobs-link {background: #00c1ff;}
#b_page > .page_move > #top > header a.jobs-link:hover {background: #00c1ff;}
#b_page > .page_move > #top > header h2 {font-family: "Source Sans Pro"; color: #fff; float: left; font-size: 22px; font-weight: normal; line-height: 37px; margin: 0 0 0 3%; }

#top {height: 100vh; min-height: 600px; background: url(/images/cre/home/top_img.jpg) no-repeat left center; background-size: cover; position: relative; font-family: "Source Sans Pro";}
.oldie #top {height: 1000px;}
#top h1 {font-family: "Source Sans Pro"; white-space: nowrap; padding: 0 5.5%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.53; color: #fff; font-weight: 300; font-size: 65px; background: #FFAE00; position: absolute; left: 0; bottom: 0;}
.top-content {padding: 60px 0 0;}
.top-content a.logo-link {padding-left: 3%;}
.top-content h2 {margin: 10px 0 10px 3%; color: #FF5BAB; font-size: 50px; font-family: "Source Sans Pro"; font-weight: 300;}
.top-content h2 br {display: none;}
.top-content ul {margin: 0 0 20px 4.5%;}
.top-content ul li {padding: 0 0 0 70px; line-height: 40px; color: #FF5BAB; font-size: 30px; font-family: "Source Sans Pro"; font-weight: 300; background: url("/images/cre/home/check.png") no-repeat 25px center;}
.top-content a.button {margin-left: 3%; height: 65px; line-height: 61px; border: solid 2px #FC66B0; background: #F887C2; font-size: 28px; padding: 0 80px; transition: all .2s ease;}
.top-content a.button:hover {background: #ff5bab; /*border: solid 2px #ff9326;*/}

#categories {padding: 35px 5.5%; background: #F5F6F6; font-family: "Source Sans Pro";}
.categories-wrapper {margin-left: -30px;}
.category {float: left; width: 33.333333%;}
.category .category-inner {margin: 0 0 35px 30px; position: relative;}

.cat-bottom {border: solid 1px #f1f1f1; height: 65px; line-height: 65px; font-size: 32px; padding-left: 50px; position: relative; z-index: 20;}
.tagesmutter .cat-bottom {background: #fff url("/images/cre/home/cat-1-ico.png") no-repeat 15px center;}
.haushaltshilfe .cat-bottom {background: #fff url("/images/cre/home/cat-2-ico.png") no-repeat 15px center;}
.tiersitter .cat-bottom {background: #fff url("/images/cre/home/cat-3-ico.png") no-repeat 15px center;}
.altenpfleger .cat-bottom {background: #fff url("/images/cre/home/cat-4-ico.png") no-repeat 15px center;}
.gartenhilfe .cat-bottom {background: #fff url("/images/cre/home/cat-5-ico.png") no-repeat 15px center;}
.nachhilfe .cat-bottom {background: #fff url("/images/cre/home/cat-6-ico.png") no-repeat 15px center;}

.cat-top {position: relative; z-index: 20;}
.cat-top img {max-width: 1000%; width: 100%; position: relative; z-index: 1;}
.cat-top .over {text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 8% 9% 15%; position: absolute; z-index: 10; width: 100%; height: 100%; left: 0; top: 0; background: rgba(255,255,255,0.85); -webkit-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 0;}
.touch .cat-top .over {display: none;}
.no-touch .category .category-inner:hover .over {opacity: 1;}
.cat-top .over ul {text-align: left; font-size: 24px; line-height: 1.5; list-style-type: disc;}
.cat-top .over p {text-align: left; font-size: 24px; line-height: 1.5;}
.cat-top .over a.button { bottom: 10%; color: #fff !important;  font-family: "Source Sans Pro";  font-size: 26px;  left: 9%; padding: 0; position: absolute; width: 82%;}

.cat-touch-link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100;}
.no-touch .cat-touch-link {display: none;}

.tagesmutter .over a.button {background: #f7047a;}
.haushaltshilfe .over a.button {background: #00c1ff;}
.tiersitter .over a.button {background: #9728ff;}
.altenpfleger .over a.button {background: #ffae00;}
.gartenhilfe .over a.button {background: #05cf00;}
.nachhilfe .over a.button {background: #449cfe;}

#bottom-info {padding: 30px 11.5% 60px 5.5%; background: #00c1ff}
#bottom-info h1 {margin-bottom: 0.5em; font-family: "Source Sans Pro"; line-height: 1.15; color: #fff; font-weight: 300; font-size: 65px; }
#bottom-info a.button {background: #333; border-radius: 0;  font-family: "Source Sans Pro";  font-size: 30px;  font-weight: 400;  height: 60px;  line-height: 2;  margin-right: 100px;  padding: 0 45px; transition: background .2s ease;}
#bottom-info a.button:hover {background: #707070;}

footer { padding-top: 0;}

@media screen and (max-width: 1680px) {
	#top h1 {font-size: 60px;}
	.cat-top .over ul {font-size: 18px;} 
	.cat-top .over p {font-size: 18px;} 
	
	.top-content a.logo-link img {width: 336px;}
	.top-content h2 {font-size: 42px;}
	.top-content h2 br {}
	.top-content ul li {font-size: 28px;}
	.top-content a.button {height: 60px; line-height: 56px; font-size: 24px;}


}

@media screen and (max-width: 1400px) {
	#b_page > .page_move > #top > header h2 {font-size: 18px;}
	#b_page > .page_move > #top > header a {padding: 0 30px;}
	#top h1 {font-size: 50px;}
	#bottom-info h1 a.button {margin-left: 0;}
	.cat-top .over ul {font-size: 15px;} 
	.cat-top .over p {font-size: 15px;} 
	.cat-top .over a.button {font-size: 18px; height: 36px;  line-height: 36px;}
	.cat-bottom {font-size: 26px; background-size: auto 34px!important;}
	
	.top-content a.logo-link img {width: 280px;}
	.top-content h2 {font-size: 38px;}
	.top-content h2 br {}
	.top-content h2 span {display: none;}
	.top-content ul li {font-size: 24px; background-size: auto 80%;}
	.top-content a.button {height: 56px; line-height: 52px; font-size: 20px;}
}

@media screen and (max-width: 1100px) {
	#top h1 {font-size: 45px;}
}