@charset "utf-8";
/* CSS Document */
html {
		padding: 0;
		margin: 0;
	}
	body {
		overflow-x: hidden
	}
	.menu {
		padding-top: 10px;
		font-weight: bold
	}
	.nav-link {
    text-decoration: none;
    color: #7b7a6c;
    margin-left: 80px;
		}
	.nav-link {
    padding-right: 4.5rem !important;
    margin-right: 19px !important;
}	

	#pos {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
		background-color: rgba(255,255,255,0.8);
	}
		.navbar{
			padding-right: 1.5rem !important;
		}	


	.nav-link:hover {
		color: #f79646;
	}
	.openBtn {
		background: #f1f1f1;
		border: none;
		padding: 10px 15px;
		font-size: 20px;
		cursor: pointer;
	}
	.openBtn:hover {
		background: #bbb;
	}
	.overlay {
		height: 100%;
		width: 100%;
		display: none;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.6);
		background-image: url("images/rat.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.overlay-content {
		position: relative;
		top: 46%;
		width: 80%;
		text-align: center;
		margin-top: 30px;
		margin: auto;
	}
	.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
		cursor: pointer;
		color: white;
	}
	.overlay .closebtn:hover {
		color: #ccc;
	}
	.overlay input[type=text] {
		padding: 15px;
		font-size: 17px;
		border: none;
		float: left;
		width: 80%;
		background: white;
	}
	.overlay input[type=text]:hover {
		background: #f1f1f1;
	}
	.overlay button {
		float: left;
		width: 20%;
		padding: 15px;
		background: #ddd;
		font-size: 17px;
		border: none;
		cursor: pointer;
	}
	.overlay button:hover {
		background: #bbb;
	}
	.pos {
		width: 100%;
	}
	.pic1 {
		border-radius: 17px;
		transform: rotate(2deg);
	}
	.pic2 {
		border-radius: 17px;
		transform: rotate(1deg);
	}
	.pic2 {
		transform: rotate(-1deg);
	}
	.pic2:hover {
		border-radius: 17px;
		transform: rotate(3deg);
	}
	.bfonts {
		font-family: 'Cormorant Upright', serif;
		font-size: 17px;
		color: #423f3f;
	}
	.sliderfonts {
		font-size: 27px !important;
		position: absolute !important;
		top: -14px !important;
		left: 99px !important;
	}
	.textpos {
		position: absolute;
		top: 301px;
		left: 390px;
		font-family: 'Caveat Brush', cursive;
		font-size: 49px;
		line-height: 0.8;
		text-shadow: 2px 3px rgba(0, 0, 0, 0.5);
		color: white;
	}
	.heading2 {
		font-family: 'Caveat Brush', cursive;
		font-size: 48px;
		line-height: 0.8;
		color: #545252;
	}
	.iconbutton {
		background-color: #fc6501;
		color: white;
		font-size: 23px;
		box-shadow: 2px 2px 2px #847777;
	}
	.sliderfonts {
		font-family: 'Cormorant Upright', serif;
		font-size: 26px;
		color: #f0efef;
		text-shadow: 2px 2px 2px rgba(34, 74, 115, 0.6);
	}
	.pic1:hover {
		transform: rotate(-2deg);
	}
	.str {
		margin-top: 0%;
	}
	.hfonts {
		font-family: 'Caveat Brush', cursive;
		font-size: 60px;
		line-height: 0.8;
	}
	.clip1 {
		height: 281px;
		width: 223px;
		clip-path: polygon(0 3%, 96% 0, 100% 100%, 0 96%);
		margin-left: 50px;
	}
	.clip2 {
		height: 281px;
		width: 223px;
		clip-path: polygon(3% 0, 100% 2%, 100% 95%, 0 100%);
		margin-left: 50px;
	}
	.birds {
		background-image: url("../images/flamingo1.jpg");
		background-size: cover;
		heigth: 281px;
	}
	.mammals {
		background-image: url("../images/lemur1.jpg");
		background-size: cover;
		heigth: 281px;
	}
	.reptiles {
		background-image: url("../images/tortoise.jpg");
		background-size: cover;
		heigth: 281px;
	}
	.aquatic {
		background-image: url("../images/fish.jpg");
		background-size: cover;
		heigth: 281px;
	}
	.mtext {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		color: white;
		font-size: 17px;
		padding-top: 94%;
		padding-right: 56%;
	}
	.rightarrow {
		padding-top: 94%;
		padding-right: 60%;
	}
	.arrowicon {
		position: absolute;
		top: 24%;
		left: 19%;
		color: white;
		font-size: 23px;
	}
	.pic4 {
		width: 100%;
		border-radius: 2px;
		transform: rotate(-2deg);
	}
	.box {
		overflow: hidden;
		position: relative;
		width: 240px;
		height: 240px;
	}
	.box:before, .box:after {
		content: '';
		background-color: orange;
		height: 99%;
		width: 147%;
		box-shadow: 0 0 5px rgba(0,0,0,0.5);
		opacity: 0;
		position: absolute;
		left: -20px;
		top: -74%;
		transition: all 0.3s ease;
		margin-left: 11px;
	}
	.box:after {
		top: auto;
		bottom: -69%;
		left: auto;
		right: 17px;
	}
	.box:hover:before, .box:hover:after {
		opacity: 0.9;
		transform: rotate(22deg);
	}
	.box img {
	}
	.box .box-content {
		color: #fff;
		text-align: right;
		opacity: 0;
		transform: rotateX(90deg);
		transform-origin: top center;
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 1;
		transition: all 0.3s ease;
	}
	.box:hover .box-content {
		opacity: 1;
		transform: rotateX(0);
	}
	.box .title {
		font-size: 21px;
		font-family: 'Caveat Brush', cursive;
		letter-spacing: 1px;
		margin-right: -2px;
	}
	.box .icon {
		width: 70%;
		padding: 7px 10px;
		margin: 0;
		list-style: none;
		opacity: 0;
		transform: rotateX(-90deg);
		transform-origin: bottom center;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		transition: all 0.3s ease;
	}
	.box:hover .icon {
		opacity: 1;
		transform: rotateX(0);

	}
	.box .icon li {
		display: inline-block;
		margin: 0 2px;
	}
	.box .icon li a {
		color: #fff;
		background-color: transparent;
		font-size: 15px;
		text-align: center;
		line-height: 32px;
		height: 35px;
		width: 35px;
		border: 2px solid #fff;
		border-radius: 50%;
		display: block;
		transition: all 0.3s;
	}
	.carousel-indicators li {

    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color:  #fff;
    background-clip: padding-box;
    border-top: 0px solid transparent !important;
    border-bottom: 0px solid transparent !important;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 42px;

}			
		
li {
	font-family: 'Cormorant Upright', serif;
		color:rgb(208, 199, 199);
		font-size:17px;
}
ul {
	line-height: 30px
}
.fa-long-arrow-alt-right {
	color: #f27107;
	font-size: 20px;
}
.fa-long-arrow-alt-right:hover {
	color: #f27107;
	font-size: 20px;
}
li:hover .fa-long-arrow-alt-right {
	transform: rotate(-17deg);
}
	
	footer p{
		
	line-height:30px;	
	font-family: 'Cormorant Upright', serif;
		color:rgb(208, 199, 199);
		font-size:17px;	
	}	
		
	
	.lasttext1 {
		position: absolute;
		top: 600px;
		left: 39px;
		font-size: 49px;
		border-radius: 14px;
		font-family: "Libre Baskerville", Georgia, serif;
		color: white;
		border: 0px solid white;
		;
	}
	.lasttext2 {
		position: absolute;
		top: 700px;
		left: 26px;
		font-size: 49px;
		border-radius: 14px;
		font-family: "Libre Baskerville", Georgia, serif;
		color: white;
		border: 0px solid green;
	}

		.inc,.fla,.ana,.fro,.ing,.dho,.cro,.blu{
			display:none;
		}	

	.parallax2 {
		background: url("../images/lastbg1.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 827px;
		background-attachment: fixed;
		position: relative;
	}
	.box .icon li a:hover {
		box-shadow: 0 0 5px #fff;
	}
	@media only screen and (max-width:990px) {
	.box {
		margin: 0 0 30px;
	}
	
	
	
	
