<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* CSS Document */

:root {
  --height-animation: 400px;
}

#mod_detail {
}
	#mod_detail h1 {
		padding-top: 50px;
		padding-bottom: 0px;
		margin-bottom: 20px;
		font-size: 70px;
		z-index: 499;
		text-transform: lowercase;
		background: url(../../images/graphic_yellow_one.png) no-repeat top right 
	}
	
	#mod_detail h2 {
		font-family: 'Raleway', serif;
		font-size: 30px;
		margin-bottom: 70px;
		font-weight: normal;
		font-style: italic
	}
		
	#mod_detail #animation-height {
		height: var(--height-animation);
	}

	#mod_detail #animation-load {
		width: 100%;
		height: var(--height-animation);
		position: absolute;
		text-align: center;
	}	
		#mod_detail #animation-load img {
			max-width: 100%;
		}
		
	#mod_detail #animation {
		width: 100%;
		height: var(--height-animation);
		position: absolute;
		text-align: center;
	}
		#mod_detail #animation img { max-height: height: var(--height-animation); }
		#mod_detail #animation #animation-text {
			position: absolute;
			bottom: 0;
			z-index: 500;
			width: 100%;
			font-size: 18px;
			text-align: center
		}
			#mod_detail #animation #animation-text span {
				position: absolute;
				
				z-index: 100;
				display: block;
				border-radius: 50%;
				background-color: #158189;
				width: 15px;
				height: 15px;
				margin-top: 7px;
			}
			#mod_detail #animation #animation-text span.span-left {margin-left: 30%; }
			#mod_detail #animation #animation-text span.span-right { right: 30%; }
	
		#mod_detail #animation #animation-bg {
			width: 100%;
			height: 45px;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 0
		}

	#mod_detail #text {
	}
		#mod_detail #text ul {
		}
			#mod_detail #text ul li {
				width: 100%;
				min-height: 27px;
				line-height: 27px;
				font-family: 'Raleway', serif;
				font-size: 16px;
				float: left;
				padding-right: 50px;
				margin-bottom: 0px;
				text-align: right;
				position: relative;
				
				padding-bottom: 30px;
				
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;		
			}
			#mod_detail #text ul li.both { width: 100%; height: 0px; clear: both; }
			#mod_detail #text ul li span {
				position: absolute;
				z-index: 100;
				right: 0;
				top: 0;
				display: block;
				border-radius: 50%;
			}
				#mod_detail #text ul li.li_1 span {
					width: 27px;
					height: 27px;
					background-color: #ff8b17
				}
				#mod_detail #text ul li.li_2 span {
					width: 14px;
					height: 14px;
					margin-right: 7px;
					margin-top: 7px;
					background-color: #07a856
				}
				#mod_detail #text ul li.li_3 span {
					width: 14px;
					height: 14px;
					margin-right: 7px;
					margin-top: 7px;
					background-color: #34c77f
				}
				#mod_detail #text ul li.li_4 span {
					width: 27px;
					height: 27px;
					background-color: #ffdf30
				}
				#mod_detail #text ul li.li_5 span {
					width: 20px;
					height: 20px;
					margin-right: 4px;
					margin-top: 4px;
					background-color: #ffb92b
				}
				#mod_detail #text ul li.li_6 span {
					width: 20px;
					height: 20px;
					margin-right: 4px;
					margin-top: 4px;
					background-color: #ff8b17
				}
				#mod_detail #text ul li.li_7 span {
					width: 18px;
					height: 18px;
					margin-right: 5px;
					margin-top: 5px;
					background-color: #ff791c
				}
				#mod_detail #text ul li.li_8 span {
					width: 14px;
					height: 14px;
					margin-right: 8px;
					margin-top: 8px;
					background-color: #09a958
				}
				#mod_detail #text ul li.li_9 span {
					width: 24px;
					height: 24px;
					margin-right: 2px;
					margin-top: 2px;
					background-color: #09a958
				}
				#mod_detail #text ul li.li_10 span {
					width: 26px;
					height: 26px;
					margin-right: 1px;
					margin-top: 1px;
					background-color: #ffb92b
				}
	
	#mod_detail #gallery {
		width: 100%;
		height: 360px;
		margin-top: 70px;
		background: url(../../images/zoo_23.png) no-repeat center 
	}
		#mod_detail #gallery ul {
		}
		#mod_detail ul#gallery li {
			position: relative;
			float: right;
			margin-right: 70px;
			margin-top: 40px;
		}
		#mod_detail ul#gallery img {
			border-radius: 50%;
		}
		
		#mod_detail ul#gallery li span.icon {
			display: none;
			/*
			position: absolute;
			width: 97px;
			height: 101px;
			right: -15px;
			bottom: -15px;
			background: url(../../images/gallery.png) no-repeat center*/
		}
	
	
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 767.98px){
	#mod_detail #text {
	}
		#mod_detail #text ul {
		}
			#mod_detail #text ul li {
				padding-left: 50px;
				text-align: left;
			}
			#mod_detail #text ul li span {
				right: none;
				left: 0;
			}
			
	#mod_detail #gallery {
		width: 100%;
		max-width: 300px;
		float: right;
		height: 200px;
		margin-top: -0px;
		background: url(../../images/zoo_23.png) no-repeat top;
		background-size: 100% 
	}
		#mod_detail #gallery ul {
		}
		#mod_detail ul#gallery li {
			position: relative;
			float: right;
			margin-right: 40px;
			margin-top: 20px;
		}
		#mod_detail ul#gallery img {
			width: 100px;
			border-radius: 50%;
		}
		
		#mod_detail ul#gallery li span.icon {
			/*
			position: absolute;
			width: 57px;
			height: 101px;
			right: -15px;
			bottom: -15px;
			background: url(../../images/gallery.png) no-repeat center;
			background-size: 100% 
			*/
		}
		
		#mod_detail #animation #animation-text {
			position: absolute;
			bottom: 0;
			z-index: 500;
			width: 100%;
			font-size: 14px;
			text-align: center
		}
			#mod_detail #animation #animation-text span {
				position: absolute;
				
				z-index: 100;
				display: block;
				border-radius: 50%;
				background-color: #158189;
				width: 10px;
				height: 10px;
				margin-top: 7px;
			}
			#mod_detail #animation #animation-text span.span-left {margin-left: 15%; }
			#mod_detail #animation #animation-text span.span-right { right: 15%; }

	#mod_detail #animation-load {
		width: 90%;
		height: var(--height-animation);
		position: absolute;
		text-align: center;
	}	
		#mod_detail #animation-load img {
			max-width: 90%;
		}
		
	#mod_detail #animation {
		width: 90%;
		height: var(--height-animation);
		position: absolute;
		text-align: center;
	}

}

/* Medium devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199.98px) { 
	.flex-container{
		display: -webkit-flex; /* Safari */
		display: flex;
	}
	
	#detail-info {
 		order: 1;
		display: block;	
	}
	#animation-div {
 		order: 2;	
		display: block;	
	}
}
	</pre></body></html>