/* *** background styles *** */

.background1{

	background-color: #ffcf01;

	
}

.background2{
	background-color: #222730; /* slate */
	background-image: ;
	background-repeat: no-repeat;
	background-size: /* auto,  */cover;
	background-position: 30% 5%;
}





.river{
	background-image:
	url(svg/cloud1.svg),
	url(svg/cloud2.svg),
	url(svg/cloud3.svg),
	url(svg/cloud4.svg),
	url(canyon-river.jpg); /* bright yellow */
	background-position: -10% 20%,60% 55%, 40% 80%, 90% 10%, left top;
	background-color: #ffcf01 ;
	background-repeat: no-repeat;
	background-size:auto, auto, auto, auto, contain ;
	min-height: 800px;
	
}

.die{
	background-image:
	url(svg/cloud4.svg),
	url(svg/cloud2.svg),
	url(svg/cloud1.svg),
	url(svg/cloud3.svg); /* bright yellow */
	background-position: -10% 20%,60% 55%, 70% 80%, 90% 10%;
/* 	background-color: #d8b31d ; */
	background-repeat: no-repeat;
	background-size:auto, auto, auto, auto;
	min-height: 800px;
	
}

.flew-back{
	background-image:
	url(svg/cloud1.svg),
	url(svg/cloud4.svg),
	url(svg/cloud2.svg);
	background-position: -10% 20%, 70% 80%, 70% 30%;
	background-repeat: no-repeat;
	background-size:auto, auto, auto;
	min-height: 800px;
	
}

.anthill{
	
	background-image:
	url(svg/cloud1.svg),
	url(svg/cloud3.svg),
	url(svg/cloud1.svg),
	url(canyon-sand.jpg); /* bright yellow */
	background-position: -10% 20%,5% 95%, 100% 80%, left top;
/* 	background-color: #d8b31d ; */
	background-repeat: no-repeat;
	background-size:auto, auto, auto, contain;
	min-height: 500px;
}


.ant-chamber{
	
	background-image:
	url(svg/cloud4.svg),
	url(svg/cloud2.svg),
	url(svg/cloud1.svg),
	url(svg/cloud3.svg); /* bright yellow */
	background-position: -10% 20%,60% 55%, 70% 80%, 90% 10%;
/* 	background-color: #d8b31d ; */
	background-repeat: no-repeat;
	background-size:auto, auto, auto, auto;
	/* min-height: 700px; */
}

.fish-group{
	background-image:
	url(svg/thin-fish2.svg),
	url(svg/perch-fish.svg),
	url(big-fish-canyon.jpg); 
	background-position: 95% 35%, 3% 80%, left top;
	background-repeat: no-repeat;
	background-color: #ffcf01;
	background-size:400px, 1000px, contain;
	min-height: 800px;
	
}

.running-away{
	
	background-image:
	url(svg/cloud2.svg),
	url(svg/cloud1.svg),
	url(canyon-sand.jpg); /* bright yellow */
	background-position: 125% 35%, 53% 70%, 0 -320%;
	background-repeat: no-repeat;
	background-color: #ffcf01;
	background-size:auto, auto, cover;
	min-height: 500px
	
}

.lotus{
	
	max-height: 400px;
}


.village{
	background-image:
	url(svg/cloud1.svg),
	url(svg/cloud2.svg),
	url(svg/cloud3.svg),
	url(svg/cloud4.svg),
	url(canyon-village.jpg); /* bright yellow */
	background-position: -10% 20%,60% 55%, 40% 80%, 90% 10%, left top;
	background-color: #65c298;
	background-repeat: no-repeat;
	background-size:auto, auto, auto, auto, cover;
	min-height: 700px;
	
}



/* *** button styles *** */


.switcher-canyon .button{
	background-color: #5bd79a;
	color:#fff;
}





/* *** SVG styles *** */


/* Savannah Color Set */

.st0{fill:#1b724d;} /* forest green */
.st1{fill:#e8c11e;} /* grayish yellow */
.st2{fill:#ffcf01;} /* bright yellow */
.st3{fill:#deb343;} /* brown */
.st4{fill:#b4652f;} /* dark brown */
.st5{fill:#b02166;} /* dark pink */
.st6{fill:#d23147;} /* bright pink */
.st7{fill:#222730;} /* dark slate gray */
.st8{fill:#ffffff;} /* white */
.st9{fill:#000000;} /* black */