/* CSS reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	
margin:0;
	
padding:0;

}


html,body {
	
margin:0;
	
padding:0;

}


table {
	
border-collapse:collapse;
	
border-spacing:0;

}


fieldset,img { 
	
border:0;

}


input{
	
border:1px solid #b0b0b0;
	
padding:3px 5px 4px;
	
color:#979797;
	
width:190px;

}


address,caption,cite,code,dfn,th,var {
	
font-style:normal;
	
font-weight:normal;

}


ol,ul {
	
list-style:none;

}


caption,th {
	
text-align:left;

}


h1,h2,h3,h4,h5,h6 
{
	
font-size:100%;
	
font-weight:normal;

}


q:before,q:after {
	
content:'';

}


abbr,acronym { 
border:0;

}


/* General Demo Style */


body{
	
font-family: 'Carme', Arial, sans-serif;
	
font-weight: 400;
	
font-size: 15px;
	
color: #fff;

}

a {
	
text-decoration: none;

}


.clr{
	
clear: both;

}


/* Top Bar Style */


.henry-top{
font-family: 'Carme', Arial, sans-serif;	
background-color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;	
position: fixed;	
top: 0px;
left: 0px;	
width: 100%;	
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);	
-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
animation: slideOut 0.5s ease-in-out 0.3s backwards;
z-index:99;
}

@media only screen 
and (min-device-width : 768px) 
 {
.henry-top{
font-family: 'Carme', Arial, sans-serif;	
background-color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;	
position: fixed;	
top: 0px;
left: 0px;	
width: 100%;		
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);	
-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;	
animation: slideOut 0.5s ease-in-out 0.3s backwards;
}



#logo > img {
    height: auto;
    width: 100%;
}



.codrops-top a{
	
padding: 0px 10px;
	letter-spacing: 1px;
	
color: #333;
	
text-shadow: 0px 1px 1px #fff;
	
display: block;
	
float: left;
}


.codrops-top a:hover{
	
background: #fff;

}


.codrops-top span.right{
	
float: right;

}


.codrops-top span.right a{
	
float: left;
	
display: block;

}


/* Demo Buttons */


#codrops-demos{
   
 position: fixed;
	
z-index: 2000;
	
top: 50px;
	
right: 50px;

}


#codrops-demos a{
    
display: inline-block;
	
font-size: 12px;
	
width: 60px;
	
height: 24px;
	
color: #000;
	
line-height: 24px;
	
text-align: center;
	
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	
background: rgba(255,255,255,0.9);
	
text-transform: uppercase;

}


#codrops-demos a:hover{
	
background: #ddd;
	color: #000;

}


#codrops-demos a.current-demo,
#codrops-demos a.current-demo:hover{
	
background: #000;
	color: #fff;
	
cursor: default;

}


@-webkit-keyframes slideOut{
	
0%{top:-30px; opacity: 0;}
	
100%{top:0px; opacity: 1;}

}


@-moz-keyframes slideOut{
	
0%{top:-30px; opacity: 0;}
	
100%{top:0px; opacity: 1;}

}


@-o-keyframes slideOut{
	
0%{top:-30px; opacity: 0;}
	
100%{top:0px; opacity: 1;}

}


@-ms-keyframes slideOut{
	
0%{top:-30px; opacity: 0;}
	
100%{top:0px; opacity: 1;}

}


@keyframes slideOut{
	
0%{top:-30px; opacity: 0;}
	
100%{top:0px; opacity: 1;}

}