body { background:#ecf5f4; padding:0; margin:0; font-family: sans-serif; color:#3A4046;}
a { color: #3A4046; color: #ffffff; text-decoration:none; }
a:hover { color: #FF5C5C !important; }

#zookat-vector-logo {margin:180px auto 0 auto; max-width:280px; max-height:250px; position:relative;}
	#draw-line, #logo-svg {-webkit-transform: translateX(11px); }
	#draw-line { stroke: #FF5C5C; }
	#butterfly_blank { fill: #FF5C5C; }
	#text { fill: #3A4046; fill: #ffffff; }
	#mask { fill:#ecf5f4; }
	#draw-line {position: absolute; width:100%; display:block; top:0; left:0;}
	#butterfly { transform: translateY(150px); -webkit-transform: translateY(150px); animation-name: butterfly_visible; animation-duration: 0.8s; animation-delay: 0.3s; animation-timing-function: ease-out; animation-fill-mode: forwards; -webkit-animation-name: butterfly_visible; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0.3s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; }
		#text, #footer  { opacity:0; filter:alpha(opacity=0); animation-name: opacity_to_100; animation-duration: 1s; animation-delay: 0.6s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; -webkit-animation-name: opacity_to_100; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.6s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards;}
		#butterfly_blank, #mask, #line0 { animation-name: opacity_to_0; animation-duration: 1s; animation-delay: 0.7s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; -webkit-animation-name: opacity_to_0; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.7s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards;}
		#line0 { animation-delay: 0.5s; -webkit-animation-delay: 0.5s;}
		#mask { animation-duration: 0s; -webkit-animation-duration: 0s; animation-delay: 1s; -webkit-animation-delay: 1s;}

.content {transform: translateY(50px); -webkit-transform: translateY(50px); opacity:0; filter:alpha(opacity=0); max-width:864px; margin: 0 auto; animation-name: content_visible; animation-duration: 0.8s; animation-delay: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; -webkit-animation-name: content_visible; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0.8s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards;}
.content h1 {  font-size:26px; font-weight: 200; letter-spacing: 11.1px;  color: #3A4046; color: #ffffff; text-transform:uppercase; line-height:30px; text-align:center; padding-bottom:0; margin-bottom:0; padding-left:12px;}
.content p {  font-size:12px; font-weight: 200; letter-spacing: 2px; color: #3A4046; color: #ffffff; text-transform:uppercase; line-height:20px; text-align:center }
.content p a { padding:0 5px; }

#footer { max-width:464px; margin: 60px auto; color:#b1babb;  font-size:11px; text-align:center; letter-spacing: 1px; font: 'SourceSansPro-Black', Helvetica, Arial; padding:0 10px; color: #fff; line-height: 15px;}
	#footer a { color:#b1babb;  color: #ffffff; }
	
@keyframes butterfly_visible { from {transform: translateY(150px);} to {transform: translateY(0px);} }
@-webkit-keyframes butterfly_visible { from {-webkit-transform: translateY(150px); } to {-webkit-transform: translateY(0px);} }
@keyframes opacity_to_0 { from {opacity:1; filter:alpha(opacity=100); } to {opacity:0; filter:alpha(opacity=0);} }
@-webkit-keyframes opacity_to_0 { from {opacity:1; filter:alpha(opacity=100); }to {opacity:0; filter:alpha(opacity=0);}}
@keyframes opacity_to_100{from {opacity:0; filter:alpha(opacity=0);}to {opacity:1; filter:alpha(opacity=100); }}
@-webkit-keyframes opacity_to_100{from {opacity:0; filter:alpha(opacity=0);}to {opacity:1; filter:alpha(opacity=100); }}
@keyframes content_visible { from {transform: translateY(50px); opacity:0; filter:alpha(opacity=0);} to {transform: translateY(0px); opacity:1; filter:alpha(opacity=100);} }
@-webkit-keyframes content_visible { from {-webkit-transform: translateY(50px); opacity:0; filter:alpha(opacity=0); } to {-webkit-transform: translateY(0px); opacity:1; filter:alpha(opacity=100);} }

#sidebar { width: 400px; height:100%; position:absolute; left:0; border-right: 1px solid rgba(0,0,0,0.05); background:#ecf5f4;}
#page { position:absolute; left:401px; border-left: 1px solid rgba(255,255,255,1); width:auto; height:100%; padding-left:40px; padding-top:80px; text-align:justify; padding-right:40px; max-width:700px; color: #fff;}

h1 { font-size:28px; font-weight: 200; letter-spacing: 4px; text-transform:uppercase; line-height:30px; padding-bottom:0; margin-bottom:0; padding-top:120px;}