/*********** HOME PAGE REDESIGN ***********/
.site-main .svg-wrapper{
	height: 100px; 
	margin-bottom:0; 
	overflow: hidden; 
	position: relative;
}
.svg-wrapper svg {
    position: absolute;
    bottom: -2px;
    z-index: 10;
}
.svg-wrapper.top svg {
	top:-2px;
	background:#47894d;
}

.site-main .hide-mobile{
	display: none;
}
.icons-row {
	margin-top: 32px;
}
.home .grid-container {
    max-width: 100%;
}
.home .site-header {
    max-width: 1200px;
	margin: auto;
}
.landing-block h1{
	font-size: 42px;
	font-weight: 900;
	line-height: 46.2px;
	text-align: center;
	color: #4CAF50;
}
.landing-block h2{
	font-size: 36px;
	font-weight: 900;
	line-height: 46.2px;
	text-align: center;
	color: #4CAF50;
}
.landing-block > img {
    padding: 0 16px;
	max-width: 500px;
	width: 100%;
}
.landing-section{
	margin-bottom:0 !important;
	align-items: center;
	/* text-align: center; */
}

.landing-section h4{
	font-weight: 800;
	margin-bottom: 4px;
	line-height: 26px;
	font-size: 22px;
}
.landing-section.dark-green h1, .landing-section.dark-green h2{
	color: white;
}
.landing-block .column{
	padding: 0 24px;
}
.landing-section p, .landing-section h4{
	color: #21272A;
}
.landing-section{
	background-color: white;
}
.landing-section.green{
	background-color: #edf8ee;
}
.landing-section.dark-green{
	background-color: #47894d;
}
.landing-block{
    display:block;
	text-align: center;
}
.landing-section .primary-button{
	padding: 16px;
	background: #4CAF50;
	border-radius: 12px;
	font-weight: bold;
	color: white;
    cursor: pointer;
}
.landing-section .primary-button:hover{
	background: #2db732;
}
.desktop-cta img {
    object-fit: contain;
    height: 55px;
    padding-right: 16px;
    width: auto;
	cursor: pointer;
}
.secondary-link{
	color: #4CAF50;
    font-weight: 800;
	display: flex;
    justify-content: center;
	cursor: pointer;
}
.secondary-link:hover{
	color: #2db732;
}
.secondary-link .underline{
	text-decoration: underline;
	text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.secondary-link .no-underline{
	text-decoration: none;
	padding-left: 8px;
}
.landing-section.subsection .subtitle{
	font-size: 18px;
}
.landing-section.subsection .landing-block > img {
    max-width: 340px;
}

.landing-block .column{
	align-items: center;
	text-align: center;
}
.landing-icon {
    margin: 0 8px;
}
.column{
    display: flex;
    flex-direction: column;
	align-items: center;
	text-align: center;
}
.landing-icon{
	width: 40vw;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.landing-icon img{
	padding: 0 8px;
	max-width: 150px;
}
.icon-line{
	display: flex;
    justify-content: center;
}
.app-screens .screen{
    margin: 0 8px;
	position: relative;
}
.screen-dots{
	margin-bottom: 32px;
}
.screen img {
	max-width: 300px;
	width: 100%;
}
.screen .column {
    margin: 0 auto;
}
.screen-description {
    position: absolute;
    bottom: -1px;
}
.screen-description p{
	margin-bottom: 8px;
}
.screen-description svg{
    height: 50px;
    top: -49px;
	width: 100%;
    position: absolute;
}
.glider-title{
	display: none;
}
.glider-title {
    padding-top: 32px;
}
button.glider-dot.active {
    background: #4CAF50;
}
.screen-description-wrapper{
	background-color: #edf8ee;
	height: 150px;
	max-width: 350px;
}
.app-screens {
    padding-top: 64px;
}
.blog-section{
	text-align: center;
}
.guide{
	cursor: pointer;
    border-radius: 4px;
    margin: 0 8px;
    border: 2px solid #47894d;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.guide img{
	border-radius: 4px 4px 0 0;
	height: 30vw;
    object-fit: cover;
}
.guides-glider{
	padding-bottom: 32px;
}
.guide-img{
	position: relative;
	overflow: hidden;
}
.subsection .guide p {
	font-size: 14px;
	font-weight: 600;
}
.dark-green p, .dark-green h3, .dark-green button{
	color:white;
}
.forum-chat > div {
    display: flex;
	margin: 0 32px 32px;
}
.forum-chat img{
	margin-top: 32px;
	max-width: 125px;
	object-fit: contain;
}
.forum-chat a {
    color: white;
    
}
.forum-chat {
    padding-top: 32px;
	max-width: 500px;
    margin: auto;
}
.forum-chat .column {
    align-items: flex-start;
    text-align: left;
	font-size: 0.8em;
}

.reviews-glider {
    padding-bottom: 32px;
}
.review{
	border-radius: 8px;
    margin: 0 8px;
    border: 2px solid #47894d;
	text-align: left;
	padding: 16px;
}
.review .column{
	align-items: baseline;
	height: 100%;
    display: grid;
    align-content: stretch;
}
.review img{
	width: 100px;
	padding-bottom: 4px;
}
.review .author{
	align-self: flex-end;
	justify-self: flex-end;
}
.guides-glider, .growlogs-glider{
    padding-left: 8px;
}
.guides-glider p{
	text-align: center;
    padding: 0 8px;
}
.guides-glider img{
	width: 100%;
}
.glider{
	scrollbar-width: none;
}
.growlog{
	border-radius: 4px;
    margin: 0 8px;
	position: relative;
	cursor: pointer;
	max-height: 80vw;
	overflow: hidden;
}
.growlog::after {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(75, 75, 75, .4), rgba(30,30,30,1));
    pointer-events: none;
    border-radius: 4px;
	transition: opacity 0.3s ease;
	opacity: 1;
}
.growlog img{
    object-fit: cover;
	height: 100%;
}
.growlog .chip{
	display: inline-block;
    padding: 2px 8px;
    background-color: #697077;
    border-radius: 4px;
	width: fit-content;
}
.chip.vegetative{
	background-color: #47894d;
}
.growlog-content{
	position: absolute;
    bottom: 0;
	display: flex;
    flex-direction: column;
	padding: 8px;
	font-weight: 600;
	z-index: 10;
}
.growlog-content .name{
	font-weight: 800;
}
.growlog-content p{
	margin-bottom: 8px;
}
.bottom-section > p {
    margin-top: 32px;
    padding: 0 16px;
}
.bottom-section {
    text-align: center;
}
.bottom-section > img {
    padding: 0 16px;
	max-height: 300px;
    object-fit: contain;
	max-width: none;
	width: 100%;
}
.review p {
    text-align: left;
    margin-top: 8px;
}
.growlog .curing{
	background-color: #ff5722;
}
.growlog .drying{
	background-color: #f57f17;
}
.growlog .flowering{
	background-color: #bb6bd9;
}
@media (max-width:961px){
	.landing-section .primary-button:lang(de) {
		font-size: 18px !important;
	}
	.landing-block h1:lang(de) {
		font-size: 35px;
	}
	.landing-block h2:lang(de) {
		font-size: 32px;
	}
}
@media (min-width:961px){
	.desktop-row {
		display: flex;
		flex-direction: row;
	}
	.site-main .hide-mobile{
		display: inherit;
	}
	.app-section .landing-block {
		flex-direction: column;
	}
	.landing-section.subsection .subtitle{
		font-size: inherit;
	}
	.screens-wrapper {
		max-width: 500px;
	}
	.hide-desktop{
		display: none;
	}
	.home .site-main > div > div {
		max-width: 1200px;
		margin: auto;
	}
	.landing-block > .column{
		/* width: 50%; */
		justify-content: center;
		text-align: left;
		align-items: flex-start;
	}	 
	.landing-block > img{
	    width: 50%;	
	}
	.landing-block h1{
		text-align: left;
	}
	.landing-block {
		display: flex;
		flex-direction: row-reverse;
	}
	.landing-block h2 {
		font-size: 42px;
		text-align: left;
	}
	.landing-icon {
		width: auto;
		display: flex;
		margin:0;
		flex-direction: row;
	}
	.landing-icon img{
		max-height: 11vw;
		max-width: 130px;
		object-fit: contain;
	}
	.blog-section .landing-block {
		flex-direction: row-reverse;
	}
	.landing-section.subsection .landing-block > img{
		max-width: 500px;
		width: 40vw;
	}	
	.landing-icon .column{
		text-align: left;
		justify-content: center;
		align-items: flex-start;
	}
	.icon-line {
		display: inline-flex;
	}
	.icons-row {
		display: flex;
		padding-top: 32px;
	}
	.app-screens{
		display: flex;
	}
	.guide {
		display: flex;
		flex-direction: column;
		flex:1;
	}
	.guide-img {
		height: 120px;
	}
	.screen img {
		width: auto;
	}
	.app-screens .screen {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0 32px;
	}
	.guides-glider, .growlogs-glider, .reviews-glider {
		display: flex;
		justify-content: space-evenly;
	}
	.glider-title{
		display: block;
		font-weight: 600;
	}
	.guides-wrapper {
		padding: 0 32px;
	}
	.guides-glider img {
		object-fit: cover;
		height: 120px;
		position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease;
	}
	.guide:hover img, .growlog:hover > img {
		transform: scale(1.1);
	}
	.growlog:hover::after {
		opacity: .5;
	}
	.guides-glider p {
		margin: 16px;
		padding: 0;
		text-align: left;
	}
	.growlog{
		flex:1;
		height: 325px;
		position: relative;
		overflow: hidden;
	}
	.growlog img{
		position: absolute;
		left: 0;
        top: 0;
        width: 100%;
        height: 100%;
		transition: transform 0.3s ease;
	}
	.forum-chat{
		flex-direction: row;
    	justify-content: center;
		align-items: flex-start;
	}
	.forum-chat > div {
		max-width: 400px;
	}
	.bottom-section > img {
		max-width: 600px;
	}
	.review{
		flex: 1;
	}
}