html.hc-yscroll {
overflow-y: scroll
} .igem_top_bar img {
height: 3.2rem !important;
} ul{ list-style:none; padding-left: 0; }
body.hc-nav-open {
position: fixed; width: 100%; min-height: 100%
}
.hc-mobile-nav {
display: none; position: fixed; top: 0; height: 100%; z-index: 9999;
}
.hc-mobile-nav .nav-container {
position: fixed; z-index: 10000; top: 0; width: 240px; max-width: 100%; height: 100%; transition: transform .4s ease
}
.hc-mobile-nav .nav-wrapper {
width: 100%
}
.hc-mobile-nav .nav-wrapper.nav-wrapper-1 {
position: static; height: 100%; overflow: scroll; overflow-x: visible; overflow-y: auto
}
.hc-mobile-nav input[type="checkbox"] {
display: none
}
.hc-mobile-nav label {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; cursor: pointer
}
.hc-mobile-nav a {
position: relative; display: block; box-sizing: border-box; cursor: pointer
}
.hc-mobile-nav.disable-body::after, .hc-mobile-nav.disable-body .nav-wrapper::after {
content: ; position: fixed; z-index: 9990; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overscroll-behavior: none; visibility: hidden; opacity: 0; transition: visibility 0s ease .4s, opacity .4s ease
}
.hc-mobile-nav.disable-body.nav-open::after, .hc-mobile-nav.disable-body .sub-level-open::after {
visibility: visible; opacity: 1; transition-delay: .05s
}
.hc-mobile-nav.nav-levels-overlap ul .nav-wrapper {
position: absolute; z-index: 9999; top: 0; height: 100%; visibility: hidden; transition: visibility 0s ease .4s, transform .4s ease
}
.hc-mobile-nav.nav-levels-overlap ul li.level-open>.nav-wrapper {
visibility: visible; transition: transform .4s ease
}
.hc-mobile-nav.side-left {
left: 0
}
.hc-mobile-nav.side-left .nav-container, .hc-mobile-nav.side-left.nav-levels-overlap li .nav-wrapper {
left: 0; transform: translate3d(-100%, 0, 0)
}
.hc-mobile-nav.side-left.nav-levels-overlap li.level-open>.nav-wrapper {
transform: translate3d(-40px, 0, 0)
}
.hc-mobile-nav.nav-open .nav-container {
transform: translate3d(0, 0, 0)
}
.hc-mobile-nav::after, .hc-mobile-nav .nav-wrapper::after {
background: rgba(0, 0, 0, 0.3)
}
.hc-mobile-nav .nav-wrapper {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c5a5a), to(#1c5a5a));
}
.hc-mobile-nav a {
padding: 14px 17px; font-size: 1rem; color: #fff !important; z-index: 1; background: rgba(0, 0, 0, 0); border-bottom: 1.5px solid rgba(255, 255, 255, 0.3)
}
h2 a:nth-child(2) {
display: none;
}
.hc-mobile-nav h2 a, .hc-mobile-nav h2 {
font-size: 1.5rem; font-weight: bolder; text-align: left; padding: 20px 17px; color: #fff; line-height: 1.5rem;
}
.hc-mobile-nav li {
text-align: left
}
.hc-mobile-nav li.nav-close span, .hc-mobile-nav li.nav-parent span.nav-next, .hc-mobile-nav li.nav-back span {
width: 45px; position: absolute; top: 0; right: 0; bottom: 0; text-align: center; cursor: pointer; transition: background .2s ease
}
.hc-mobile-nav span.nav-next::before, .hc-mobile-nav li.nav-back span::before {
content: ; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-left: -2px; box-sizing: border-box; border-top: 2px solid #fff; border-left: 2px solid #fff; transform-origin: center
}
.hc-mobile-nav span.nav-next::before {
transform: translate(-50%, -50%) rotate(135deg)
}
.hc-mobile-nav li.nav-back span::before {
transform: translate(-50%, -50%) rotate(-45deg)
}
.hc-mobile-nav.side-right span.nav-next::before {
margin-left: 0; margin-right: -2px; transform: translate(-50%, -50%) rotate(-45deg)
}
.hc-mobile-nav.side-right li.nav-back span::before {
margin-left: 0; margin-right: -2px; transform: translate(-50%, -50%) rotate(135deg)
}
- container {
display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column;
}
- main-nav {
display: none
}
header {
position: absolute;
}
header .toggle {
position: fixed; margin-left: 0; cursor: pointer; display: none; z-index: 9980; min-height: 3rem; position: relative; top: 0; float: left; display: block; cursor: pointer; box-sizing: content-box; font-size: 10px; line-height: 24px;
}
header .toggle span {
width: 30px; top: 16px; position: absolute; margin-top: 24px; margin-left: 3vw; color: red; transform: translateY(-50%); transform-origin: 50% 50%
}
header .toggle span, header .toggle span::before, header .toggle span::after {
border-radius: 5px; position: fixed; left: 0; height: 4px; background: #1c5a5a; transition: all .1s ease;
}
header .toggle span::before, header .toggle span::after {
content: ; width: 100%
}
header .toggle span::before {
top: -10px
}
header .toggle span::after {
bottom: -10px
}
header .toggle div {
display: inline-block; margin-right: 15px
}
.hc-mobile-nav .nav-container {
width: 280px
}
@media screen and (min-width: 769px) {
#container { display: none; }
}
.hc-mobile-nav li.Project>a::before {
content: "\f009"; font-family: fontawesome; display: inline-block; height: 19px; width: 19px; margin-right: 15px; text-align: center;
}
.hc-mobile-nav li.Home>a::before {
content: "\f2db"; font-family: fontawesome; display: inline-block; width: 19px; height: 19px; margin-right: 15px; text-align: center;
}
.hc-mobile-nav li.Model>a::before {
content: "\f1fe"; font-family: fontawesome; display: inline-block; width: 19px; height: 19px; margin-right: 15px; text-align: center;
}
.hc-mobile-nav li.Human_Practice>a::before {
content: "\f2b5"; font-family: fontawesome; display: inline-block; width: 19px; height: 19px; margin-right: 15px; text-align: center;
}
.hc-mobile-nav li.Other_Works>a::before {
content: "\f1ce"; font-family: fontawesome; display: inline-block; width: 19px; height: 19px; margin-right: 15px; text-align: center;
}
.hc-mobile-nav li.Team>a::before {
content: "\f0c0"; font-family: fontawesome; display: inline-block; width: 19px; height: 19px; margin-right: 15px; text-align: center;
}
.speh2::after {
content: "\f015"; font-family: fontawesome; position: absolute; top: 40px; color: #fff !important; display: inline-block; right: 0; width: 35px; height: 24px;
}
.hc-mobile-nav .nav-wrapper .speh2 a, .hc-mobile-nav .nav-wrapper .contactUs a {
padding: 0; margin: 0; border: 0;
}
.hc-mobile-nav .nav-wrapper .contactUs {
position: relative; display: inline-block; font-size: 1.2rem; bottom: 0; margin: auto 0; font-weight: normal!important;
}
.nav-wrapper .mobile_media_1 span:after,
.nav-wrapper .mobile_media_2 span:after,
.nav-wrapper .mobile_media_3 span:after {
font-family: fontawesome; position: relative; bottom: 0; color: #fff !important; display: inline-block; right: 0; width: 24px; height: 24px;
}
.nav-wrapper .mobile_media_1, .nav-wrapper .mobile_media_2, .nav-wrapper .mobile_media_3 {
padding:20px 5px; position: relative; border: 0; float: right; text-align: center; vertical-align: middle; line-height: 24px;
}
.nav-wrapper .mobile_media_1 span:after {
content: "\f082";
}
.nav-wrapper .mobile_media_2 span:after {
content: "\f081";
}
.nav-wrapper .mobile_media_3 span:after {
content: "\f0e0";
}
@media screen and (max-width: 769px){ .igem_top_bar{ width: 100vw; height: 3rem; z-index: 1000; -moz-box-shadow:0px 4px 15px #737373; -webkit-box-shadow:0px 4px 15px #737373; box-shadow:0px 4px 15px #737373; } .igem_top_bar .nav,#jiannan{ display: none; } .igem_top_bar .logo img{ height: 2.5rem; margin: 0.25rem 1rem 0.25rem 0; position: relative; float: right; } } @media screen and (min-width: 769px) and (max-width: 89.9375rem){ .igem_top_bar{ width: 100vw;
} #jiannan{ display: none; } .igem_top_bar .logo img{ margin: 0.5rem 0 0.5rem 1vw; } #Team{ margin-right: 5%; } }