body {
	cursor: url('foo80.cur'), default;
}
html, body {
  margin: 0;
  padding: 0;
}
*{box-sizing: border-box;}

/*typography styling here*/
h1, h2, h3, h4, h5, p {font-family: 'Ubuntu', sans-serif;}
h1 {}
h2 {}
h3 {font-size: 22px;}
h4 {}
h5 {}
p {font-size: 16px;}
a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: #faf8e6;
}
/*unique typography
.huge a {font-size:100px; color:#fff; text-align: center;margin-top: 200px; display:block;} */

/* Typography style here */
.huge {
	font-size:80px; color:#faf8e6; text-align: center;margin-top: 100px; display:block;
}

/*header style here*/
.header {
	height: 100%;
	  background-image: linear-gradient(to top,  #ff8e1e, #fc6d2e, #f04c3c);
	  clip-path: polygon(
	    0 0, 100% 0, 100% 80%, 0% 90%); calc(100% - 6vw)
	  );
		/* position:fixed; */
		top:0px;
		left:0px;
		width:100%;
		z-index: 100;
  }

.hero {margin-top:100px;background:pink; min-height:400px;}

.row,.container-fluid {
	/* background-color: #faf8e6; */
	/* max-width: 1170px; */
	margin: auto;
}

/* section style here */
	#six {
	height: 100vh;
	/* border-bottom: thin dashed #333; */
	padding-top: 10%;
	width: 100%
	}/*you can change this*/
	#one {
		height: 370vh;
		padding-top: 10%
		width: 100%
		padding-bottom: 10%
	}
	#two {
		height: 230vh;
		/* padding-top: 10%; */
		width:100%;
		padding-bottom: 10%;

	}
	#three {
		height:450vh;
		padding-top:10%;
		width:100%;
		padding-bottom: 100%;
	}
	#four {
		height:320vh;
		padding-top:20%;
		width:100%;
		padding-bottom: 30%;
	}
	#five {
		height: 340vh;
		/* border-bottom: thin dashed #333; */
		padding-top: 10%;
		width: 100%
	}
.cell{
	min-height: 100px;
 	/* outline: thin grey solid; */
 }


/*parallax*/
.lg-green {
  width: 80%;
  height: 50%;
  background: #f04c3c;
  /* border-radius: 12px; */
}

/*transitions*/
a.spin, a.swell, a.levitate {display: block; width:200px; height: 200px; background:yellow; border-radius: 4px;
transition: all 1s ease;}
a.spin:hover {transform:rotate(45deg);}
a.swell:hover{transform:scale(1.5);}
a.levitate:hover{transform:scale(1.1); -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,.5);
	box-shadow: 0 0 20px 5px rgba(0,0,0,.5); }

/*bg video*/
video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(clouds.jpg) no-repeat;
    background-size: cover;
}
#video {height: 100vh;
}

/* hero image style goes here */
.heroimage {
	text-align: center;
	display: block;
	margin: 0 auto;
	height:60%;
	padding-top: 200px;
	color:#faf8e6;
	width: 100%

}

/* video style here */
#videoDiv {
	width: 100%;
	/* height: 360px;  */
	position: relative;
}
#videoBlock {width: 100%; height: 100%;  display: flex;  justify-content: center; align-items: center;}
#videoMessage {width: 100%; height:100%; position: absolute; top: 0; left: 0;}
#videoMessage *{padding:0.4em; margin:0}
#videoMessage {
	text-shadow: 2px 2px 2px #000000;
	color:white;
	z-index:99;
	padding-top:200px;
}
#videoMessage h1{font-size: 2em;color:#ffffff;text-align:center;}
#videoMessage h2{font-size: 1.5em;color:#ffffff;text-align:center;}
#videoMessage h3{font-size: 1.2em;color:#ffffff;text-align:center;}
.videoClick {text-align:center}
.videoClick a{color:white;background-color:rgba(241, 241, 241, 0.25);font-size: 1.7em;cursor:pointer;cursor:hand}
/* end video background  */

/* background image code here */
.kenburns-top {
	-webkit-animation: kenburns-top 5s ease-out infinite both;
	        animation: kenburns-top 5s ease-out infinite both;
}
/* backgrund image keyframes  starts here */
/* ----------------------------------------------
 * Generated by Animista on 2018-4-12 11:36:52
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
/* background image keyframe end here */

/** css keyframe animation--*/

#slide-left {
    width: 300px;
    height: 200px;
    background:#2a3f95;
		color:#faf8e6;
		font-size:26px;
		text-align: center;
    position :relative;
		-webkit-animation: slide-left 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
		        animation: slide-left 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

/* key frames for slide-left */
/* ----------------------------------------------
 * Generated by Animista on 2018-4-8 10:59:27
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
/* end key frames for slide left */

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

/* Standard syntax */
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

/*clippy*/
#clippy {-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);;
background-image:url(../img/matterhorn.jpg);height:400px;}
/*----------------------------------
  Main
------------------------------------*/
/* my style code starts here */
.tracking-in-expand-fwd {
	font-size:80px;
	color:#faf8e6;
	text-align: center;
	margin-top: 10px;
	display:block;
font-family: 'Ubuntu', sans-serif;
		-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
		        animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;

}
/* ----------------------------------------------
 * Generated by Animista on 2018-4-8 0:44:53
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px);
            transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px);
            transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

#tracking-in-expand-fwd-top{
	font-size:80px;
	color:#faf8e6;
	text-align: center;
	margin-top: 10px;
	display:block;
	font-family: 'Ubuntu', sans-serif;
	-webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
	animation: mymove 3s infinite;
}

/* bounce animate code here */
#anim-one {
	text-align: center;
  padding-top: 100px;
  font-size: 0;
  font-weight: 700;
  color: #faf8e6;
	font-family: 'Ubuntu', sans-serif;
  animation: bounce-text 2s infinite cubic-bezier(0.245, 0.325, 0.670, 1.510)
}

@keyframes bounce-text {
   60%{
    font-size: 60px}
  100%{
    font-size: 60px}
}

/* end code for bounce text */

/* heart beat animation code here */
#anim-four{


  text-align: center;
  animation: heartbeat .5s cubic-bezier(0.245, 0.325, 0.510, 1.305) infinite alternate;
  font-size: 160px;
  margin-top: 60px;
  color:#f04c3c ;
  }

@keyframes heartbeat{
  to{
    transform: scale(1.2)}
    }
/* end heart animation code */

.imgcenter {
    text-align: center;
    display: block;
    margin: 0 auto;
		height:60%;
		padding-top: 50px;
		color:#faf8e6;
}
.about {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 35px;
    letter-spacing: 1px;
    max-width: 900px;
    margin: 40px auto;
		color:#faf8e6;
}

/* egg animation style here */


#egg {
		/* position: absolute; */
		bottom: 30px;
		display: inline-block;
		width: 126px;
		height: 60px;
		padding-top: 180px;
		text-align: center;
		text-shadow: 1px 1px rgba(250, 249, 246, 0.9);
		color: rgba(168, 168, 168, 0.8);
		font-weight: 900;
		border-radius: 63px 63px 63px 63px/108px 108px 72px 72px;
		background: radial-gradient(75% 100% at 63px 15px, #f7f7f2 0%, #eaeae3 30%, #b1ac9d 100%);
		box-shadow: 0px 3px 18px -4px rgba(40, 40, 40, 0.9);
		margin: 20px;
		margin-right: 45px;
		transition: all .2s linear 0;
		-webkit-transition: .2s;
		-webkit-transition-timing-function: linear;
		-webkit-animation: anime_egg_move 3s infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-direction: alternate;
}

@-webkit-keyframes anime_egg_move {
		from {}
		to {
				-webkit-transform: rotate(360deg);
				margin-left: 700px;
		}
}
/* end egg animation here  */

/* centered text on image code here */
/* #hen {
	position: relative;
	text-align: center;
    color:#faf8e6;
		font-size: 1.6em;
		font-weight: 500;
		letter-spacing: 1px;
		font-family: 'Ubuntu', sans-serif;
} */
/* Centered text */
.centered {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
		padding: 20px;
		background: #888833;
}
/*navigation style here*/
.nav ul {
	list-style-type:none;
	display:block;

}
.nav li {
	display:block;
	width:120px;
	padding-top: 30px;
	height: 75%
	position:absolute;
	z-index: 200;
}
/* hero sction style here

.heroimg {
    width: 70vw;
    padding-top: 10%;
    padding: 47px auto 40px auto;
    margin: auto;
    z-index: 9999;
}
 */
.pimg1{
	background-image:url('../img/chicken.jpg');

    /* Set a specific height */
    min-height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
		opacity: 0.70;
}

.paraeffect {
	height:100px	;
	background-color: #ffce09;
	font-size: 16px;
	font-weight: 400;
	line-height:1.8em;
}
/* css keyframe animation */
#slide-fwd-tl {
    width: 400px;
    height: 200px;
    background:#ffce09;
    position :relative;
		duration:0.45s;
    -webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 3s infinite;
		transition-timing-function: ease-out-Quad;
}
/* section 3 code here */
.big1 {
	font-size: 20px;
	padding-bottom: 30px;
	text-align:left;
	color: #faf8e6;
	font-family: 'Lato', sans-serif;
	line-height: 1.5em;
	margin-left:20px;
	margin-right:20px;
}


.biggy {
		font-size: 25px;
		padding-bottom: 30px;
		text-align: center;
		color: #faf8e6;
		font-family: 'Roboto', sans-serif;
		line-height: 1.3em;
	}

	/* border: 3px solid #ffce09;
	border: 1px solid #ffce09;
    outline-style: solid;
    outline-color: #ffce09;
    outline-width: thick; */
		/* border-radius: 20px; */
  /* border: 3px solid #ffce09; */



.big2 {
	font-size: 16px;
	color: #faf8e6;
	text-align: center;
}
.pie{
margin-top: 50px;
}
.h4block {
	background-color: #ffce09;
	padding:0px 20px 50px 40px;
	width:50%
	transform: rotate(-2deg);
	-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  margin-bottom: 40px;
	height:100%
}
h4 {
	color: white;
    font-weight: 800;
    font-size: 35px;
    letter-spacing: 3px;
    margin-bottom: 0px;
		text-align: center;

}
.type1 {
	color:#ffce09;
	font-weight: 800;
	font-size: 100px;
	letter-spacing: 3px;
	/* margin-bottom: 20px; */
	text-align: center;
	font-family: 'Bungee Shade', cursive;
	/* font-family: 'Nunito', sans-serif; */
	padding-bottom: 50px;
}
.type2 {
	color: #faf8e6;;
	font-size:70px;
	letter-spacing: 3px;
font-family: 'Oswald', sans-serif;
	/* border: 5px solid red; */
	font-weight: bold;
	text-align: center;
	font-style: normal;
	padding-top:50px;
	padding-bottom:50px;
	/* background: yellow; */
}

.type3 {
	color: #faf8e6;;
	font-size:70px;
	letter-spacing: 3px;
font-family: 'Oswald', sans-serif;
	/* border: 5px solid red; */
	font-weight: bold;
	text-align: center;
	font-style: normal;
	/* padding-top:10px; */
	padding-bottom:50px;
	/* background: yellow; */
}
/* parallax effect */
.parallax {
    /* The image used */
    background-image: url('/img/parallex2.jpg');

    /* Full height */
    height: 30%;
		width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax1 {
    /* The image used */
    background-image: url('/img/parallex1.jpg');

    /* Full height */
    height: 30%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* end parallax */

#benefit li {
	/* background: #ff9999; */
	margin-top:20px;
	padding-top:10px;
	/* padding: 5px; */
	font-family: 'Lato', sans-serif;
}

#benefit1 li {
	/* background: #ff9999; */
	margin-top:20px;
	padding-top:10px;
	/* padding: 5px; */
	font-family: 'Lato', sans-serif;
	text-align: center;
}

/* flex box style here */
.flex-container {
  display: flex;
	flex-direction: column;
}
.flex-container > div {
  margin: 20px;
  padding: 30px;
  font-size: 25px;
	width: 600px;
  height:300px;
  margin: 10px;
  text-align: left;
  line-height: 50px;


}

/* .myth {
		width: auto;
    height: auto;
    text-align: center;
    padding-top: 40px;

} */

/* code for magic colors */

body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;
}

/* panel styles */
.panel {
  /* min height incase content is higher than window height */
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Ubuntu', sans-serif;
  /* outline: 10px solid hotpink; */
  /* turn above on to see the edge of panels */
}

/* colours */
.color-violet {
  background-color: #2f8fed;
}
.color-indigo {
  background-color: #2a3f95;
}
.color-blue {
  background-color: #2F8FED;
}
.color-green {
  background-color: #2a3f95;
}
.color-yellow {
  background-color: #2f8fed;
}
.color-orange {
  background-color: #2a3f95;
}
.color-red {
  background-color: #2f8fed;
	/* background-image: -webkit-linear-gradient(70deg, #fff 50%, #004E95 50%); */

}

/* text pop up  for myth text effect style here*/
.text-pop-up-left {
	-webkit-animation: text-pop-up-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: text-pop-up-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

/* text pop up keyframe here */
/* ----------------------------------------------
 * Generated by Animista on 2018-4-15 13:12:52
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-pop-up-left
 * ----------------------------------------
 */
@-webkit-keyframes text-pop-up-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

/* end heart beat keyframe */

/* end of magic colors */

/* mounatin animation code here
body, html {
  overflow: hidden;
  height: 400px;
}  */

.scenery {
  position: relative;
  box-sizing: border-box;
  background-color: #D7EFF7;
  width: 100%;
  height: 100%;
  padding: 40px;
  overflow: hidden;
  animation: skysetting 12s infinite;
	clip-path: polygon(
		0 0, 100% 0, 100% 80%, 0% 90%); calc(100% - 6vw)
	); position:fixed;top:0px; left:0px; width:100%; z-index: 100;
}

.cloud, .cloud {
  background-color: #fafaff;
  width: 120px;
  height: 102px;
  border-radius: 50%;
  position: absolute;
  right: -200px;
  top: 10px;
}
.cloud.flip, .cloud.flip {
  transform: scaleX(-1);
}
.cloud.left, .cloud.left {
  top: 60px;
  left: -200px;
  animation: toright 25s infinite ease-in-out;
  animation-delay: 2s;
}
.cloud.right, .cloud.right {
  top: 120px;
  right: 0px;
  animation: toleft 20s infinite ease-in;
}
.cloud.faster, .cloud.faster {
  animation-duration: 15s;
}
.cloud.lower, .cloud.lower {
  top: 200px;
  animation-delay: 4s;
}
.cloud.bigger, .cloud.bigger {
  transform: scale(1.2);
}
.cloud:after, .cloud:after {
  content: "";
  background-color: #fafaff;
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 84px;
  height: 60px;
  border-radius: 50%;
}
.cloud:before, .cloud:before {
  content: "";
  background-color: #fafaff;
  position: absolute;
  left: -25px;
  bottom: -10px;
  width: 96px;
  height: 84px;
  border-radius: 50%;
}

.sun {
  transform: translate(-50%, 50%);
  left: 50%;
  position: relative;
  box-sizing: border-box;
  width: 140px;
  height: 140px;
  background-color: #ffd93b;
  border-radius: 70px;
  animation: glow 4s infinite, rise 12s infinite ease-in-out;
  border-color: rgba(255, 217, 59, 0.4);
  border-width: 15px;
  border-style: solid;
  background-clip: content-box;
  margin-top: 0px;
}

.mountains {
  margin-top: -135px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  position: absolute;
  left: 45%;
  bottom: 35%;
  transform: translate(-50%, 0%);
}
.mountains:before, .mountains:after {
  content: "";
  border: 180px solid transparent;
  border-bottom: 180px solid #95BF13;
  position: absolute;
}
.mountains:after {
  animation: mountain 12s infinite;
}
.mountains:before {
  margin-left: 180px;
  bottom: -180px;
  border-bottom-color: #7FA507;
  border-bottom-width: 135px;
  animation: mountain2 12s infinite;
}

@keyframes mountain {
  0% {
    border-bottom-color: #BDD66E;
  }
  10% {
    border-bottom-color: #B0D627;
  }
  75% {
    border-bottom-color: #95BF13;
  }
  80% {
    border-bottom-color: #729113;
  }
  90% {
    border-bottom-color: #3B0659;
  }
  100% {
    border-bottom-color: #BDD66E;
  }
}
@keyframes mountain2 {
  0% {
    border-bottom-color: #b4d05a;
  }
  10% {
    border-bottom-color: #9ec023;
  }
  75% {
    border-bottom-color: #83a811;
  }
  80% {
    border-bottom-color: #607a10;
  }
  90% {
    border-bottom-color: #2b0441;
  }
  100% {
    border-bottom-color: #b4d05a;
  }
}
@keyframes skysetting {
  0% {
    background-color: #4BCCEF;
  }
  10% {
    background-color: #4BCCEF;
  }
  70% {
    background-color: #4BCCEF;
  }
  80% {
    background-color: #FF7C3B;
  }
  90% {
    background-color: #220854;
  }
  100% {
    background-color: #4BCCEF;
  }
}
@keyframes rise {
  0% {
    top: 110%;
    transform: scale(0.5);
  }
  30% {
    top: 0%;
    transform: scale(1);
    background-color: #FFD93B;
  }
  70% {
    top: 0%;
    transform: scale(1);
    background-color: white;
    border-color: rgba(255, 255, 255, 0.4);
  }
  100% {
    top: 110%;
    transform: scale(0.5);
  }
}
@keyframes toright {
  0% {
    left: -150px;
  }
  50% {
    left: 120%;
  }
  100% {
    left: -150px;
  }
}
@keyframes toleft {
  0% {
    right: -150px;
  }
  50% {
    right: 120%;
  }
  100% {
    right: -150px;
  }
}
@keyframes glow {
  0% {
    margin-left: 0px;
    margin-top: 0px;
  }
  50% {
    border-color: rgba(255, 217, 58, 0.2);
    background-color: #ffd93a;
    border-width: 0.3px;
    margin-left: 0.3px;
    margin-top: 0.3px;
  }
  100% {
    margin-left: 0px;
    margin-top: 0px;
  }
}
/* mountain animation end here */

/* style for smooth scroll */

/* --------------------------------

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



body, html {
  height: 100%;
}

a {
  color: #3e3947;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* --------------------------------

Modules - reusable parts of our design

-------------------------------- */
.cd-img-replace {
  /* replace text with a background-image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* --------------------------------

Main components

-------------------------------- */
.cd-section {
  min-height: 100%;
  position: relative;
  padding: 2em 0;
}
.cd-section:nth-of-type(odd) {
  background-color: #3e3947;
}
.cd-section:nth-of-type(odd) p {
  color: #898099;
}
.cd-section:nth-of-type(even) {
  background-color: #745360;
}
.cd-section:nth-of-type(even) p {
  color: #bda3ad;
}
.cd-section h1, .cd-section p {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 768px;
  text-align: center;
}
.cd-section h1 {
  color: white;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 20px;
  font-size: 1.25rem;
}
.cd-section p {
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .cd-section h1 {
    font-size: 30px;
    font-size: 1.875rem;
  }
  .cd-section p {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
  }
}

.cd-scroll-down {
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 20px;
  width: 38px;
  height: 44px;
  background: url("../img/cd-arrow-bottom.svg") no-repeat center center;
}

/* No Touch devices */
.cd-nav-trigger {
  display: none;
}

.no-touch #cd-vertical-nav {
  position: fixed;
  right: 40px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
.no-touch #cd-vertical-nav li {
  text-align: right;
}
.no-touch #cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both;
}
.no-touch #cd-vertical-nav a span {
  float: right;
  display: inline-block;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
.no-touch #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
  background-color: white;
}
.no-touch #cd-vertical-nav .cd-dot {
  position: relative;
  /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #d88683;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-label {
  position: relative;
  margin-right: 10px;
  padding: .4em .5em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

/* Touch devices */
.touch .cd-nav-trigger {
  display: block;
  z-index: 2;
  position: fixed;
  bottom: 30px;
  right: 5%;
  height: 44px;
  width: 44px;
  border-radius: 0.25em;
  background: rgba(255, 255, 255, 0.9);
}
.touch .cd-nav-trigger span {
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: #3e3947;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  background-color: inherit;
  border-radius: inherit;
}
.touch .cd-nav-trigger span::before {
  top: -9px;
}
.touch .cd-nav-trigger span::after {
  bottom: -9px;
}

.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 0.25em;
  background-color: rgba(255, 255, 255, 0.9);
}
.touch #cd-vertical-nav a {
  display: block;
  padding: 1em;
  border-bottom: 1px solid rgba(62, 57, 71, 0.1);
}
.touch #cd-vertical-nav a span:first-child {
  display: none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
  color: #d88683;
}
.touch #cd-vertical-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
  background-color: transparent;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
  background-color: rgba(62, 57, 71, 0);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  background-color: #3e3947;
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
  border-bottom: none;
}

@media only screen and (min-width: 768px) {
  .touch .cd-nav-trigger, .touch #cd-vertical-nav {
    bottom: 40px;
  }
}
/* end code for smooth scroll */

/* types of egg animation */

	 #eggs {
		 display:block;
		 width: 126px;
		 height: 180px;
		 background-color: #FFCC00;
		 border: 1px solid #FFCC00;
		 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
		 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

		 position: absolute;
		 top: 50%;
		 left: 50%;
		 margin: -90px 0 0 -63px;
		 /* padding-top: 100px; */
	 }
	 .shaking {
		 /*animation: shake 2s cubic-bezier(.36,.07,.19,.97) both infinite;
		 transform: translate3d(0, 0, 0);
		 backface-visibility: hidden;
		 perspective: 1000px;*/
	 }
	 @keyframes shake {
		 10%, 90% {
			 transform: translate3d(-1px, 0, 0);
		 }
		 20%, 80% {
			 transform: translate3d(2px, 0, 0);
		 }
		 30%, 50%, 70% {
			 transform: translate3d(-4px, 0, 0);
		 }
		 40%, 60% {
			 transform: translate3d(4px, 0, 0);
		 }
	 }
	 .bubble {
		 width: 280px;
		 height: 40px;
		 line-height: 40px;
		 color: #333;
		 background: #ccc;
		 position: absolute;
		 margin-left: -140px;
		 -moz-border-radius: 10px;
		 -webkit-border-radius: 10px;
		 border-radius: 10px;

		 opacity: 0;
		 transform: scale(.4);
	 }
	 .scaled {
		 animation: bubble .35s ease-out both;
	 }
	 @keyframes bubble {
		 0% {
			 opacity: 0;
			 transform: scale(.4);
		 }
		 75% {
			 opacity: .75;
			 transform: scale(1.15);
		 }
		 100% {
			 opacity: 1;
			 transform: scale(1);
		 }
	 }
	 .left {
		 left: 280px;
	 }
	 .right {
		 right: 140px;
	 }
	 .bubble.right:before {
		 right: auto;
		 left: 100%;
		 border-right: 0 none;
		 border-left: 8px solid currentColor;
	 }
	 .bubble:before {
		 content:"";
		 position: absolute;
		 right: 100%;
		 top: 16px;
		 width: 0;
		 height: 0;
		 border-top: 4px solid transparent;
		 border-right: 8px solid currentColor;
		 border-bottom: 4px solid transparent;
	 }
	 .eye {
		 background-color: #fff;
		 border-radius: 50%;
		 height: 40px;
		 left: 50%;
		 margin-left: -20px;
		 position: absolute;
		 top: 20%;
		 width: 40px;
		 box-shadow: inset 2px 2px 4px 3px #999;
	 }
	 .eye-inner {
		 background-color: #3c3c3c;
		 border-radius: 50%;
		 height: 16px;
		 left: 50%;
		 margin-left: -8px;
		 margin-top: -8px;
		 position: absolute;
		 top: 50%;
		 width: 16px;

		 transition: transform .6s ease
		 /*animation: eye 4s ease-out both infinite;
		 transform: translate3d(0, 0, 0);
		 backface-visibility: hidden;
		 perspective: 1000px;*/
	 }
	 @keyframes eye {
		 0%, 100%, 25% {
			 transform: translate3d(0, 0, 0);
		 }
		 30%, 60% {
			 transform: translate3d(-40%, 40%, 0);
		 }
		 70%, 90% {
			 transform: translate3d(40%, 0, 0);
		 }
	 }
	 /* end egg animation  */



















/*----------------------------------
  Medium devices
------------------------------------*/

@media (max-width: 1024px) {


}



/*----------------------------------
  Phablets
------------------------------------*/

@media (max-width: 767px) {


}


/*----------------------------------
Phones
------------------------------------*/

@media (max-width: 480px) {

}