/* =============================
General Layout
===============================*/

/* Push footer down */
html, body {
  position: relative;
  min-height: 100%;
  font-family: 'Source Sans Pro';
}

/* Sections */
.section {
  min-height: 100vh;
}
.section > .content {
  padding-top: 70px;
}
.section.last > .content {
  padding-bottom: 50px;
}

/* Footer */
.footer {
  min-height: 30px; 
  position: absolute;
  bottom: -30px;
  width: 100%;
  background-color: rgba(245,245,245,0.1);
}


/* =============================
Navbar 
===============================*/
.navbar {
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.3);
  background-color: rgba(8,8,8,0.9);
}
.navbar li.active {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}


/* =============================
Cover Section 
===============================*/

#cover.section {
  background-image: url("../images/ep_naturalblack.png");
  color: white;
  margin: 0 -15px;
  height: 100vh; /* For IE Flexbox*/
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#cover.section h1 {
  font-weight: 900;
  font-size: 5em;
}

#cover.section h2 {
  font-weight: 400;
  font-size: 2em;
  opacity: 0.95;
}

#cover.section h3 {
  font-weight: 300;
  font-size: 1.8em;
  opacity: 0.85;
}

#cover.section .popover-title, #cover.section .popover-content, #cover.section .modal {
  color: black;
}


/* Icon Lists */
#icon-list a {
  font-size: 4em;
  letter-spacing: 0.25em;
}

#icon-list a .icon {
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  color: white;
  opacity: 0.8;
}

#icon-list a:hover .icon {
  transform: scale(1.3);
  opacity: 1;
}

/* Colors */
#icon-list a:hover .icon.linkedin {
  color: #0077B4;
}
#icon-list a:hover .icon.facebook {
  color: #3B5998;
}
#icon-list a:hover .icon.github {
  color: #323131;
}
#icon-list a:hover .icon.douban {
  color: #007711;
}
#icon-list a:hover .icon.resume {
  color: #C01E07;
}
#icon-list a:hover .icon.google-scholar {
  color: #4285F4;
}

/* Tooltips */
.tooltip {
  font-size: 1.5em;
}

.see-more a {
  font-size: 2em;
  color: white;
  position: absolute;
  bottom: 3%;
  right: 50%;
  transition: all 0.2s ease-in-out;
}

.see-more a:hover {
  transform: scale(1.5);
}

/* =============================
About Section 
===============================*/
#about.section p {
  font-size: 20px;
  font-weight: 400;
}


/* =============================
Projects Section 
===============================*/
#projects.section {
  /*font-size: 20px;*/
}
.project-image {
  position: relative;  
  cursor: pointer;
}


.project-caption {
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  position: absolute;
  top:4px;
  left:4px;
  right:4px;
  bottom: 4px;
  max-height: 0;
  transition: all 0.5s ease-in-out;
}

.project-image:hover .project-caption {
  max-height: 100%;
}

.project-caption h3, .project-caption p {
  color: white;
}

.modal .modal-body img {
  width: 100%;
}



/* =============================
Films Section 
===============================*/

section#films .movie-description {
  display: none;
}

i#refresh-random, i#toggle-favorites {
  cursor: pointer;
}

#film-recent-newer, #film-recent-older {
  cursor: pointer;
}

/* =============================
Footer
===============================*/
.footer .text-muted {
  margin-top: 1em;
}
.footer-credit {
  float: right;
}