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; }
- special-active-menu-1,
- special-active-menu-9 {
background-color: #4e4e4e !important; }
- special-active-menu-2 {
background-color: #1abc9c !important; }
- special-active-menu-3 {
background-color: #e74c3c !important; }
- special-active-menu-4 {
background-color: #34495e !important; }
- special-active-menu-5 {
background-color: #e67e22 !important; }
- special-active-menu-6 {
background-color: #e67e22 !important; }
- special-active-menu-7 {
background-color: #e67e22 !important; }
- 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; }
- 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; }
- 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; } }
- 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; } }
- 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%; } }
- slide-4 {
background-color: #34495e; color: #e4e6e5; padding-top: 90px; }
- slide-4 i {
font-size: 80px; color: white; }
- slide-5 {
background-color: #f39c12; color: #e4e6e5; padding-top: 90px; }
- slide-6 {
background-color: #f3443f; color: #e4e6e5; padding-top: 90px; }
- slide-7 {
background-color: #23b1bb; color: #e4e6e5; padding-top: 90px; }
- slide-8 {
background-color: #e25740; color: #e4e6e5; padding-top: 90px; }
- 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; }
- 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; }
- arrows {
bottom: 10%; height: 80px; position: fixed; right: 10%; width: 80px; z-index: 1000; }
- arrows div {
background-image: url('https://static.igem.org/mediawiki/2014/3/32/Website-arrows.png'); cursor: pointer; height: 30px; position: absolute; width: 30px; }
- arrows div.disabled {
cursor: default; }
- arrow-up {
background-position: 30px 0; left: 25px; top: 0; }
- arrow-up.disabled {
background-position: 0 0; }
- arrow-down {
background-position: 30px -30px; left: 25px; bottom: 0; }
- arrow-down.disabled {
background-position: 0 -30px; }
- arrow-left {
background-position: 30px -60px; left: 0; top: 25px; }
- arrow-left.disabled {
background-position: 0 -60px; }
- arrow-right {
background-position: 30px -90px; right: 0; top: 25px; }
- arrow-right.disabled {
background-position: 0 -90px; }
.navigation-slide { cursor: pointer; }