.types_of_plants {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	font-size: 1.3em;
	background: #fff;
	box-shadow: inset 0 0 30px #f2f2f2;
}

.types_of_plants, .types_of_plants * {
	position: relative;
	margin: 0;
	padding: 0;
}

.types_of_plants .nextBtn {
	display: none;
	position: absolute;
	bottom: 0%;
	right: 0%;
	width: 7%;
	height: 10%;
}

.types_of_plants .prevBtn {
	display: none;
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 7%;
	height: 10%;
}

/*=====================================
 =            common styles            =
 =====================================*/
.board {
	position: relative;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	text-align: center;
}

.vertical-horizontal-center {
	position: relative;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	text-align: center;
}

.vertical-center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	text-align: center;
}

.coverboardfull {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*================================================
 =            Notification Pulse Style            =
 ================================================*/
/**
 How to use:
 - To enable notification pulse add 'data-usernotification="notifyuser"'
 attribute to the html element inside board div
 */

@keyframes pulse {
0% { transform   : scale(0); opacity: 0.0; }
25% { transform  : scale(0); opacity: 0.6; }
50% { transform  : scale(0.1); opacity: 0.8; }
75% { transform  : scale(0.5); opacity: 1; }
100% { transform : scale(1); opacity: 0.0; }
}

@-moz-keyframes pulse {
0% { -moz-transform   : scale(0); opacity: 0.0; }
25% { -moz-transform  : scale(0); opacity: 0.6; }
50% { -moz-transform  : scale(0.1); opacity: 0.8; }
75% { -moz-transform  : scale(0.5); opacity: 1; }
100% { -moz-transform : scale(1); opacity: 0.0; }
}

@-webkit-keyframes pulse {
0% { -webkit-transform   : scale(0); opacity: 0.0; }
25% { -webkit-transform  : scale(0); opacity: 0.6; }
50% { -webkit-transform  : scale(0.1); opacity: 0.8; }
75% { -webkit-transform  : scale(0.5); opacity: 1; }
100% { -webkit-transform : scale(1); opacity: 0.0; }
}

/*for all element inside board*/
.board *[data-usernotification*="notifyuser"] {
	cursor: pointer;
}

.board *[data-usernotification*="notifyuser"]::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	background-color: white;
	border: 2px solid black;
	border-radius: 50%;
	-webkit-animation: pulse 1.2s ease-out infinite;
	-moz-animation: pulse 1.2s ease-out infinite;
	animation: pulse 1.2s ease-out infinite;
}

/*=====  End of Notification Pulse Style  ======*/

/*=====  End of common styles  ======*/

/*===============================================
 =            general template layout            =
 ===============================================*/

div.generalTemplateblock {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	/*border   : 1px solid red; */
}

/*=====  End of general template layout  ======*/

/*=========================================================
 =            general templated specific styles            =
 =========================================================*/

/*=====  End of general templated specific styles  ======*/

.imageblock {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

.contentblock {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-family: comfortaa_regular;
}
.chapter_title {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    font-size: 5vw;
    color: white;
    top: 4%;
    background: #FAD270;
    padding: 2%;
    border-radius: 2vmin;
    width: 50%;
    z-index: 1;
}
.bg_blue{
	background: #81C1FF;
}
.pink{
	background: #EC5D63;
}
.top_text {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 1%;
    font-size: 3vw;
		z-index: 99;
}
.brown_bg{
	background: #FAD270;
}
.blue{
	color: #3C78D8;
}
.rolldown{
	  animation: roll .5s ease-in-out forwards;
	  -webkit-animation: roll .5s ease-in-out forwards;
}
-webkit-@keyframes roll {
  0%{
    top: -15%;
  }
	100%{
    top: 0%;
  }
}
@keyframes roll {
	0%{
    top: -15%;
  }
	100%{
    top: 0%;
  }
}



.rollup{
	  animation: roll_up .5s ease-in-out forwards;
	  -webkit-animation: roll_up .5s ease-in-out forwards;
}
-webkit-@keyframes roll_up {
  0%{
    top: 0%;
  }
	100%{
    top: -15%;
  }
}
@keyframes roll_up {
	0%{
    top: 0%;
  }
	100%{
    top: -15%;
  }
}
.bigplant {
    position: absolute;
    font-size: 2vw;
    top: 82%;
    left: 21%;
    background: #FFD2BD;
    padding: 1%;
    border-radius: 2vmin;
    transform: translate(-50%,-50%);
		z-index: 99;
}
.smallplant {
    position: absolute;
    font-size: 2vw;
    background: #FFD2BD;
    padding: 1%;
    border-radius: 2vmin;
    transform: translate(-50%,-50%);
    top: 72%;
    left: 45%;
		z-index: 99;
}
.verysmallplant {
    position: absolute;
    font-size: 2vw;
    background: #FFD2BD;
    padding: 1%;
    border-radius: 2vmin;
    transform: translate(-50%,-50%);
    top: 57%;
		z-index: 99;
    left: 88%;
    width: 22%;
}
.bg_full {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
}

.left_plant {
    position: absolute;
    width: 42%;
    top: 49%;
    left: 21%;
    transform: translate(-50%,-50%);
    z-index: 95;
}
.mid_plant {
    position: absolute;
    width: 21%;
    left: 45%;
    transform: translate(-50%,-50%);
    top: 52%;
    z-index: 95;
}
.right_plant {
    width: 26%;
    right: -9%;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 95;
    top: 82%;
}

.pop_up{
	  animation: pops .5s 3 ease-in-out forwards;
	  -webkit-animation: pops .5s 3 ease-in-out forwards;
}
-webkit-@keyframes pops {
  0%{
    transform: translate(-50%,-50%) scale(1);
  }
	50%{
    transform: translate(-50%,-50%) scale(1.1);
  }
	100%{
    transform: translate(-50%,-50%) scale(1);
  }
}
@keyframes pops {
	0%{
		transform: translate(-50%,-50%) scale(1);
	}
	50%{
		transform: translate(-50%,-50%) scale(1.05);
	}
	100%{
		transform: translate(-50%,-50%) scale(1);
	}
}
.first_type, .second_type, .third_type, .fourth_type {
    position: absolute;
    width: 29%;
    bottom: 15%;
		transform: translateX(-50%);
		left: 12.5%;
}
.second_type{
	transform: translateX(-50%);
	left: 37.5%;
}
.third_type{
	transform: translateX(-50%);
	left: 62.5%;
}
.fourth_type{
	transform: translateX(-50%);
	left: 87.5%;
}
.first_type_text, .second_type_text, .third_type_text, .fourth_type_text {
    position: absolute;
    background: #FAD270;
    font-size: 2vw;
    top: 88%;
		left: 12.5%;
    z-index: 93;
    border-radius: 1vmin;
    padding: 1%;
    transform: translateX(-50%);
    width: 19%;
}
.second_type_text{
	transform: translateX(-50%);
	left: 37.5%;
}
.third_type_text{
	transform: translateX(-50%);
	left: 62.5%;
}
.fourth_type_text{
	transform: translateX(-50%);
	left: 87.5%;
}
.lemon{
	width:30% !important;
}
@media (min-aspect-ratio: 4/3) {
	.chapter_title{
		font-size: 8vmin;
	}
	.top_text,.bigplant,.smallplant,.verysmallplant{
		font-size: 4vmin;
	}
	.first_type_text, .second_type_text, .third_type_text, .fourth_type_text{
		font-size: 3.5vmin;
	}
}