Team:UB-Indonesia/css/style

From 2014.igem.org

/* 

* Author: Carlos Alvarez
* URL: http://alvarez.is
*
* Project Name: Munter - Free Bootstrap 3 Theme
* Version: 1.0
* URL: http://blacktie.co
*/

.font-thin { font-family: "Titillium Web", sans-serif; font-weight: 200; }

.font-semibold { font-family: "Titillium Web", sans-serif; font-weight: 600; }

.font-light { font-family: "Titillium Web", sans-serif; font-weight: 300; }

  • {

position: relative; }

.breaker { clear: both; font-size: 1px; line-height: 1px; height: 1px; }

html, body { height: 100%; width: 100%; }

body { background-color: #2f2f2f; font-family: "Titillium Web", sans-serif; font-weight: normal; overflow-x: hidden; -webkit-font-smoothing: antialiased !important; }

.justify-text { text-align: justify; }

.navbar { background-color: #e4e6e5; background-color: rgba( 228, 230, 229, .85 ); border-bottom: 0 none; font-size: 12px; transition: .25s all linear; }

.navbar.inv { background-color: rgba( 0, 0, 0, .5 ); border-bottom: 1px solid #bfbfbf; }

.navbar .nav a { color: #5f5f5f; font-family: "Titillium Web", sans-serif; font-weight: 600; transition: all .5 linear; }

.navbar.inv a { color: #e4e6e5; }


.navbar-responsive-collapse { margin: 0 auto; width: `100%; }

.nav li { text-align: center; white-space: nowrap; }

.nav > li > a:hover, .nav > li > a:focus { background-color: inherit; outline: none; }

.navbar-brand { padding: 8px; }

.active-menu { background-color: #4e4e4e; content: '.'; display: block; height: 5px; left: 0; position: absolute; top: 0; transition: all .5 linear; width: 1%; z-index: 9; }

.inv .active-menu { background-color: #e4e6e5; }

.special-active-menu { z-index: 10; }

  1. special-active-menu-1,
  2. special-active-menu-9 {

background-color: #4e4e4e !important; }

  1. special-active-menu-2 {

background-color: #1abc9c !important; }

  1. special-active-menu-3 {

background-color: #e74c3c !important; }

  1. special-active-menu-4 {

background-color: #34495e !important; }

  1. special-active-menu-5 {

background-color: #e67e22 !important; }

  1. special-active-menu-6 {

background-color: #e67e22 !important; }

  1. special-active-menu-7 {

background-color: #e67e22 !important; }

  1. special-active-menu-8 {

background-color: #e67e22 !important; }

@media (min-width: 768px) and (max-width: 991px) { #slide-4 .content-row h2 { min-height: 6em; } }

@media (max-width: 767px) {

.nav li { text-align: left; white-space: nowrap; }

.navbar-responsive-collapse { width: 80%; }

.active-menu { display: none !important; }

.navbar-toggle { margin-right: 10px; }

.navbar { background-color: #e4e6e5 !important; padding: 0; }

.navbar .nav a { color: #e4e6e5; font-size: 16px; padding-left: 0; }

.icon { margin-right: 12px; }

.nav li[data-slide="1"], .nav li[data-slide="6"] { background-color: #2f2f2f; }

.nav li[data-slide="2"] { background-color: #1abc9c; }

.nav li[data-slide="3"] { background-color: #e74c3c; }

.nav li[data-slide="4"] { background-color: #34495e; }

.nav li[data-slide="5"] { background-color: #e67e22; }

.navbar-brand { margin: 0; text-align: left; } }

focus {outline:none;}
-moz-focus-inner {border:0;}

.slide { background-position: center center; background-repeat: no-repeat; padding-bottom: 65px; padding-top: 50px; text-align: center; }

  1. slide-1 {

background-image: url('https://static.igem.org/mediawiki/2014/8/8f/Headerub.png'); color: #ffffff; 

   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   width: 100%;

background-attachment: relative; background-position: center center; }

  1. slide-1 h1 {

padding-top: 130px; }

@media (max-width: 991px) { #slide-1 { background-position: -70% 0, 170% 0; } }

@media (max-width: 767px) { #slide-1 { background-image: none; } }

#home-row-1, #home-row-2 { padding-top: 25px; }

#home-row-1 h1 { font-size: 54px; }

#home-row-1 h4 { font-size: 32px; }

#home-row-2 { font-size: 25px; }

#home-row-2 .col-12 { height: 232px; padding-top: 30px; }

#home-row-2 .col-12 .home-hover { height: 166px; overflow: hidden; padding-top: 26px; transition: all ease-in .5s; }

#home-row-2 .col-12 .home-hover:hover { height: 166px; padding-top: 0; }

@media (max-width: 767px) { #home-row-1, #home-row-2 { padding-top: 16px; }

#home-row-1 h1 { font-size: 35px; }

#home-row-1 h4 { font-size: 21px; }

#home-row-2 { font-size: 16px; } }

  1. slide-2 {

background-color: #1abc9c; color: #e4e6e5; padding-top: 90px; }

.title-row { font-size: 45px; padding-bottom: 50px; }

.line-row .hr { background-color: #e4e6e5; height: 5px; margin: 0 auto; width: 33%; }

.subtitle-row { font-size: 35px; padding-bottom: 40px; padding-top: 40px; }

.content-row { padding-top: 45px; }

.content-row i, #about-row-5 i { display: block; margin: 0 auto; max-height: 100%; max-width: 100%; }

.content-row h2 { font-size: 28px; padding-bottom: 40px; }

.content-row h4 { font-family: "Titillium Web", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 20px; font-weight: 300; }

i { font-size: 80px; color: white; }


@media (max-width: 767px) { .title-row { font-size: 34px; padding-bottom: 33px; }

.subtitle-row { font-size: 26px; padding-bottom: 26px; padding-top: 26px; }

.content-row { padding-top: 29px; }

.content-row h2 { font-size: 24px; padding-bottom: 26px; }

.content-row h4 { font-size: 20px; } }

  1. slide-3 {

background-color: #000; margin: 0 auto; overflow: hidden; padding: 0; text-align: left; width: 100%; }

#slide-3 .col-12 { display: inline-block; height: 451px; margin: 0; padding: 0; width: 452px; }

#slide-3 a, #slide-3 img { display: inline-block; height: 100%; margin: 0 auto; width: 100%; }

@media (max-width: 991px) { #slide-3 { text-align: center; width: 100%; }

#slide-3 .row { left: 0 !important; margin: 0; width: 100% !important; }

#slide-3 .col-12 { height: auto; width: 50% }

#slide-3 a, #slide-3 img { height: auto; max-height: 100%; max-width: 100%; width: auto; } }

@media (max-width: 767px) { #slide-3 .col-12 { width: 100%; } }

  1. slide-4 {

background-color: #34495e; color: #e4e6e5; padding-top: 90px; }

  1. slide-4 i {

font-size: 80px; color: white; }


  1. slide-5 {

background-color: #f39c12; color: #e4e6e5; padding-top: 90px; }

  1. slide-6 {

background-color: #f3443f; color: #e4e6e5; padding-top: 90px; }

  1. slide-7 {

background-color: #23b1bb; color: #e4e6e5; padding-top: 90px; }

  1. slide-8 {

background-color: #e25740; color: #e4e6e5; padding-top: 90px; }

  1. slide-9 {

background-color: #303133; color: #e4e6e5; padding-top: 90px; }

@media (max-width: 767px) { #slide-9 { background-image: none; } }


#slide-9 a { color: inherit; outline: none; text-decoration: none; }

@media (max-width: 767px) { .with-hover-text{ margin-bottom: 2em; margin-top: 1em; } }

#contact-row-4 { padding-top: 125px; }

#contact-row-4 .col-12 { height: 175px; overflow: hidden; padding-top: 20px; transition: all ease-in .5s; }

#contact-row-4 img { display: block; margin: 0 auto; max-height: 100%; max-width: 100%; }

#contact-row-4 .col-12:hover { height: 175px; padding-top: 0; }

#contact-row-4 .col-12 .hover-text { display: none; font-size: 20px; }

  1. lightbox-out {

background-color: rgba( 0, 0, 0, 0.7 ); height: 100%; position: fixed; width: 100%; z-index: 99999; }

.with-hover-text span { display: none; }

.zoom { background-image: url('https://static.igem.org/mediawiki/2014/9/96/Zoom.png'); background-position: center center; background-repeat: no-repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 999; }

  1. arrows {

bottom: 10%; height: 80px; position: fixed; right: 10%; width: 80px; z-index: 1000; }

  1. arrows div {

background-image: url('https://static.igem.org/mediawiki/2014/3/32/Website-arrows.png'); cursor: pointer; height: 30px; position: absolute; width: 30px; }

  1. arrows div.disabled {

cursor: default; }

  1. arrow-up {

background-position: 30px 0; left: 25px; top: 0; }

  1. arrow-up.disabled {

background-position: 0 0; }

  1. arrow-down {

background-position: 30px -30px; left: 25px; bottom: 0; }

  1. arrow-down.disabled {

background-position: 0 -30px; }

  1. arrow-left {

background-position: 30px -60px; left: 0; top: 25px; }

  1. arrow-left.disabled {

background-position: 0 -60px; }

  1. arrow-right {

background-position: 30px -90px; right: 0; top: 25px; }

  1. arrow-right.disabled {

background-position: 0 -90px; }

.navigation-slide { cursor: pointer; }

Retrieved from "http://2014.igem.org/Team:UB-Indonesia/css/style"