/* ----------------------------------------------------------------------------------------------- 
  Splash screen layout
----------------------------------------------------------------------------------------------- */ 

* { margin:0; padding:0; outline: 0; }
html, body { height:100%; }


html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { background-attachment: fixed !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; }


body { color: #fff; font: 100.01%/1.4 sans-serif; text-align: center; background: #000; }
body { font-family: 'Montserrat', sans-serif; }

p { margin-bottom: 2em !important; font-size: 1.1em; color: #fff; line-height: 24px; font-family: 'Poppins', sans-serif; }

a { color: #539623; }
a:hover { color: #ff9900; text-decoration: none; }

canvas { position: absolute; top: 0; left: 0; }



.home { display: table; width: 100%; height: 100%; background: #000 url('') center center no-repeat; background-size: cover; }

.home-content { display: table-cell; position: relative; vertical-align: middle; text-align: center; background: rgba(0,0,0,0.3); opacity: 0; transition: ease 0.5s; } 
.home-content:hover { background: rgba(0,0,0,0.5); } 

html.splash .home-content { opacity: 1 !important; }

.home-content.slideshow { background: rgba(0,0,0,0); } 

.home-content.static { opacity: 1 !important; }

.home-content h1 { margin: 1em 0 0.25em 0; font-size: 2em !important; color: #fff; font-weight: 400; text-shadow: 0px 4px 4px rgba(0,0,0,0.5); }
.home-content h2 { margin: 0 0 2em 0; font-size: 1em !important; color: #fff; font-weight: 400; text-shadow: 0px 4px 4px rgba(0,0,0,0.5); }

.logo { position: relative; display: inline-block; width: 90px; height: 90px; border: 0px solid #fff; cursor: pointer; border-radius: 50%; background-image: url('../img/humann-icon.svg');
background-color: #6eae44; background-repeat: no-repeat; background-position: center center; background-size: 75%; box-shadow: 0 0 8px 2px rgb(0,0,0, 0.1); transition: transform ease 0.3s; }
.logo:hover { transform: scale(1.1); background-color: #86d452; box-shadow: 0 0 64px rgb(255,255,255, 0.5);  transition: all ease 0.3s; }
.logo + .tooltip { margin-top: -1.5em !important; }

.logo.out { opacity: 0.25; }
.logo.out:hover { opacity: 1.0; }

.logo.slideshow { display: block; position: absolute; bottom: 2em; left: 2em; width: 48px; height: 48px; opacity: 0.5; }
.logo.slideshow:hover { opacity: 1.0; }

.home .attr { position: absolute; bottom: 0; width: 100%; }
.home .attr p { margin-bottom: 2em; text-align: center; font-size: .7em; color: rgba(255,255,255,0.5); }



#desc { font-size: 90%; color: #fff; }
#info { margin: 0; cursor: pointer; }
.info { margin: 0; cursor: pointer; }
.info span.mo { border-bottom: 1px dotted rgba(255,255,255,0.5); cursor: help; }


.hidden { display: none; }
.visible { display: block; }

.slim, .verbose { position: relative; }

.btn-group { opacity: 0; transition: ease 0.5s; }
.home-content:hover .btn-group { opacity: 1.0; }

.bg1 { position: relative; }
.bg2 { display: none; }


.btn { display: inline-block; min-width: 100px; margin: 0 2px; padding: .5em; background: rgba(0,0,0, 0.5); border: 1px solid #222; border-radius: 4px; text-decoration: none; }
.btn:hover { color: #fff; background: rgba(0,0,0, 0.75); border-color: #333; }

.extra { display: block; height: 45.6px !important; margin: 2em 0 0 0 !important; font-weight: normal; }
.extra a { text-decoration: none !important; }

.socials { display: block; }

.icon { display: inline-block; height: 32px; width: 32px; margin: 4px; border: 0px dotted pink; filter: grayscale(50%); }
.icon { background-image: url('../img/humann-icon.svg'); 
  background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 75%; transition: transform ease 0.3s; }
.icon:hover { transform: scale(1.25); background-color: transparent; transition: all ease 0.3s; filter: grayscale(0%); }


.site-bandlab { background-image: url('../img/logo-bandlab.svg') !important; }
.site-behance { background-image: url('../img/logo-behance.svg') !important; }
.site-facebook { background-image: url('../img/logo-facebook.svg') !important; }
.site-flickr { background-image: url('../img/logo-flickr.svg')  !important; }
.site-instagram { background-image: url('../img/logo-instagram.svg') !important; }
.site-youtube { background-image: url('../img/logo-youtube.svg') !important; }
.site-twitter { background-image: url('../img/logo-twitter.svg') !important; }