@import url(https://2017.igem.org/Team:BIT-China/css/boostrap?action=raw&ctype=text/css); /*rgba(8,41,59,1); F8A886*/
html,body { margin: 0; padding: 0;
height: 100%; width: 100%;
} body {
height: 100%; width: 100%; background-color: rgba(242,215,188,0.4);
} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
display: block;
} body {
line-height: 1;
} ol, ul {
list-style: none;
} blockquote, q {
quotes: none;
} blockquote:before, blockquote:after, q:before, q:after {
content: ; content: none;
} table {
border-collapse: collapse; border-spacing: 0;
} a {
font-family: 'Quicksand', sans-serif;
} /*.screen-hidden {
overflow: hidden;
}*/
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box;
} .navbar-static-top, .navbar, .navbar-default, .container {
border: 0; margin: 0; box-sizing: border-box;
} /*@media (min-width: 768px) .navbar-static-top {
border-radius: 0;
}*/ .navbar-static-top {
z-index: 1000; border-width: 0 0 1px;
} /*@media (min-width: 768px) .navbar {
border-radius: 4px;
}*/ .navbar-brand img {
/*width: 100%;*/ font-size: 0; padding: 0; margin: 0; height: 100%;
} .navbar { width: 100%;
min-width: 920px; top: 16px;
background-color: rgba(8,41,59,1);
background-image: url("https://static.igem.org/mediawiki/2017/3/38/Bit-china-2017logo.svg"); background-size: auto 100%; left: 0; /*border-color: #e7e7e7;*/ /*position: relative;*/ min-height: 70px; /*margin-bottom: 20px;*/ /*border: 1px solid transparent;*/
} .navbar-header {
width: 200px; height: 50px;
display: block;
float: left;
} .navbar-nav {
/*margin-left: 100px;*/
float: left; list-style: none; }
- navbar a {
text-decoration: none; font-size: 18px; font-weight: bold;
}
- navbar * {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
- navbar ul,
- navbar li {
margin: 0;
}
- navbar ul {
padding: 0; }
- navbar * {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .navbar .myactive { background-color: rgba(255,255,255,0.1); } @media (min-width: 768px) .navbar-nav>li {
float: left;
} .nav { margin: 0; } .nav>li { padding: 0 10px;
position: relative; display: block; float: left;
} /*.nav>li a {
position: relative; display: block; padding-top: 25px; padding-bottom: 25px; line-height: 20px; color: #ccc; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .nav>li a:hover {
color: rgba(255,255,255,0.5);*/
} /*------------------------dropup dropdown------------------------*/ .dropup, .dropdown {
position: relative;
} .dropdown-toggle:focus {
outline: 0;
} .dropdown-menu {
position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box;
text-transform: uppercase; font-family: 'Quicksand', sans-serif; font-weight: 400; font-size: 14px;
} .dropdown-menu.pull-right {
right: 0; left: auto;
} .dropdown-menu .divider {
height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;
} .dropdown-menu > li > a {
display: block; padding: 3px 20px; clear: both; /*font-weight: normal; line-height: 1.42857143; color: #333333;*/
white-space: nowrap; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
text-decoration: none; color: #fff; background-color: #f5f5f5; font-size: 2em;
} .dropdown-menu > .myactive > a, .dropdown-menu > .myactive > a:hover, .dropdown-menu > .myactive > a:focus {
color: #fff; text-decoration: none; outline: 0; background-color: #f5f5f5;
} .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
color: #fff;
} .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed;
} .open > .dropdown-menu {
display: block;
} .open > a {
outline: 0;
} .dropdown-menu-right {
left: auto; right: 0;
} .dropdown-menu-left {
left: 0; right: auto;
} .dropdown-header {
display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #777777; white-space: nowrap;
} .dropdown-backdrop {
position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 990;
} /*------------------------dropup dropdown------------------------*/ /*.movepic-container {
width: 100%; height: 100%; margin: 0; padding: 0; display: flex; text-align: center; overflow: hidden;
}*/ ul,ol,li {
/*font-size: 0;*//*控制ol,li之间没有空隙*/ list-style: none; /*padding: 0;*/
}
@media screen and (min-width: 678px) {
.my-banner img { width: 100%; } #navbar .nav>li { padding: 0 2px; margin: 0;
} @media screen and (min-width: 1024px) {
.my-banner img { width: 100%; }
} .page-border {
width: 100%; height: 100%; margin: 0; padding: 0; display: flex; text-align: center; overflow: hidden; /*margin: auto;*/ /*overflow: hidden;*/
}
- fullpage {
position: relative; top: 0; height: 100%; /*position: fixed;*/ width: 100%; /*top: -50px;*/ /*top: -667px;控制出现那一页图片*/ text-align: center; font-size: 0;
/*translate3d(0px, px , 0px);*/ -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s;
} .fp-section {
/*position: absolute;*/ /*visible的时候要加上*/ display: flex; height: 100%; width: 100%; /*-webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s;*/ animation-duration: 0.5s; animation-timing-function: ease-out; animation-name: slidein;
} @keyframes slidein {
from { transform: translateY(500px); } to { transform: translateY(0); }
}
.circle {
display: none; z-index: 100; position: fixed; width: 100%; bottom: 60px;
display: flex;
} .circle ol {
display: none; margin: auto;
} .circle li {
float: left; margin: 2em;
} .circle li span {
display: block; height: 20px; width: 20px; border: 6px solid #333; border-radius: 50%; margin: auto; background-color: #fff;
} .circle li span:hover {
opacity: 0.8; box-shadow: 2px 2px 2px #fff;
} .fa-circle {
color: #444; text-shadow: 2px 2px 2px #fff;
}
- Maxamed {
width: 100%; display: flex; position: fixed; bottom: 3em;
} .nav__mine {
position: relative; margin: auto;
}
.nav__item {
line-height: 1; position: relative; /*display: block;*/ margin: 10px; padding: 0; letter-spacing: 0; color: currentColor; border: 0; background: none; -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.nav__item:focus {
outline: none;
} .nav--maxamed .nav__item {
width: 36px; height: 36px;
}
.nav--maxamed .nav__item::before {
content: ; position: absolute; top: 0.75em; right: 0; width: 16px; height: 16px; box-shadow: inset 0 0 0 6px #3F598E; border: 2px solid #fff; border-radius: 50%; -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
}
.nav--maxamed .nav__item:not(.nav__item--current):focus::before, .nav--maxamed .nav__item:not(.nav__item--current):hover::before {
box-shadow: inset 0 0 0 6px #1D3045;
}
.nav--maxamed .nav__item--current::before {
-webkit-transform: scale3d(1.75,1.75,1); transform: scale3d(1.75,1.75,1); box-shadow: inset 0 0 0 1px #3F598E;
}
.nav--maxamed .nav__item-title {
position: absolute; left: 3.5em; top: 0; pointer-events: none; padding: 0.75em 0; font-weight: bold; white-space: nowrap; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav--maxamed .nav__item--current .nav__item-title {
opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1);
}
/*====================下拉栏=============================*/
.caret {
display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent;
} .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
/*color: transparent;*/ color: white; /*background-color: #e7e7e7;*/ background-color: transparent;
} .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.nav>li a {
position: relative; display: block; padding-top: 25px; padding-bottom: 25px; line-height: 20px; color: white; /*background-color: #08293b;*/ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.nav li>.dropdown-a {
position: relative; display: block; height: 50px; /*padding-top: 25px;*/ /*padding-bottom: 15px;*/ /*line-height: 50px;*/ color: white; background-color: #F8A886; vertical-align:middle; text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .nav li>.dropdown-a>span {
display: block; position: relative; top: -15px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .nav>li a:hover {
/*background-color: transparent;*/ color: #fff;
}
- navbar .dropdown-a:hover {
background-color: #F8A886; opacity: 0.8;
}
- navbar>ul>li>a:hover {
color: #F8A886;
}
- navbar>.nav>.myactive:hover {
color: #fff;
} .main-nav-link {
border: 0; margin: 0; height: 50px;
} .dropdown-menu li:first-child .dropdown-a{
border-top-right-radius: 10px; border-top-left-radius: 10px;
} .dropdown-menu li:first-child {
border-top-right-radius: 10px; border-top-left-radius: 10px;
} .dropdown-menu li:last-child .dropdown-a{
border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;
} .dropdown-menu li:last-child {
border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;
} .dropdown-menu {
border: 0; border-radius: 10px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} .nav>.dropdown>.dropdown-menu {
border-radius: 10px;
} .dropdown-menu:before {
/*z-index: 10000;*/ content: ; position: absolute; bottom: 100%; left: 30%; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 0; width: 0; border: 8px solid transparent; border-bottom-color: #F8A886; -webkit-transition: opacity .3s; transition: opacity .3s;
}
/*===========下拉菜单动画============*/ .nav li>.dropdown-a>span {
padding: 5px 20px; text-decoration: none; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out;
}
.nav li>.dropdown-a>span:before {
content: ""; position: absolute; bottom: 0; width: 0; border-bottom: solid 2px;
}
.nav li>.dropdown-a>span:before {
left: 0;
}
.nav li>.dropdown-a>span:hover {
color: #fff;
}
.nav li>.dropdown-a>span:hover:before {
width: 80%; left: 10%;
}
.nav li>.dropdown-a>span:before {
-webkit-transition: width .2s ease-in-out; transition: width .2s ease-in-out;
}
/*=====================my-main-container========================*/ .my-main-container, .my-banner {
position: relative; top: 70px; margin: 0;
} .my-main-container {
display: flex;
} .my-pdf {
margin: auto; padding-top: 100px; min-width: 856px; margin-bottom: 200px;
} .my-banner {
z-index: 1000; width: 100%; box-shadow: 5px 5px 20px #333;
} .my-content-box {
display: flex; flex-direction: column; width: 100%; /*margin: 2em;*/ padding: 50px;
} .my-content-box p {
/*margin: auto;*/
} .my-content-box img, .my-content-box span {
margin: auto;
} .my-content-box span {
padding: 2em; font-weight: bold;
} .my-content-box .formula {
width: 80%; margin-bottom: -50px;
} .my-img-box {
display: flex; justify-content: space-around;
} .my-backTop {
width: 40px; position: fixed; bottom: 40px; right: 40px; z-index: 1000; cursor: pointer; color: #F8A886; text-decoration: none;
} .my-backTop img {
width: 100%;
} .my-backTop:hover {
text-decoration: none;
} .my-backTop span {
font-size: 15px; font-weight: bold;
} .my-backTop img, .my-backTop span {
-webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; -ms-transition: all ease 0.4s; -o-transition: all ease 0.4s; transition: all ease 0.4s;
} .my-backTop:hover img {
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
} .my-backTop:hover span {
font-size: 20px; color: #F8A886;
} .effect {
display: inline-block; position: relative; text-decoration: none; color: #fff; text-transform: capitalize; font-family: 'Roboto', sans-serif; font-size: 18px; padding: 20px 0px; width: 150px; border-radius: 6px; overflow: hidden;
}
.effect.effect-4 {
-webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s;
} .effect.effect-4:before {
content: "\f178"; font-family: FontAwesome; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; font-size: 30px; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s;
} .effect.effect-4:hover {
text-indent: -9999px;
} .effect.effect-4:hover:before {
-webkit-transform: scale(1, 1); transform: scale(1, 1); text-indent: 0;
} .my-button {
z-index: 1000; position: fixed; bottom: 40px; right: 40px;
} /*=================================*/
- hexGrid {
width: 95%; height: 100%; margin-top: 100px; /*padding: 20px;*/ box-sizing: border-box; display: flex; flex-flow: row wrap; /*//从左到右、从上到下、多列显示*/ -webkit-flex-flow: row wrap; /*justify-content: space-between;*/ /*四个并列元素两头对齐,剩下空间平均分配*/ align-items: center; /*//侧轴对齐居中*/
}
- hexGrid>li {
padding: 0; margin: 50px 0; width: 20%;
}
- hexGrid>li:first-child {
width: 30%; left: 20%;
}
- hexGrid>li:nth-child(2) {
width: 30%; left: 30%; margin-right: 30%;
}
- hexGrid>li img {
width: 80%;
} .hex, .hexIn {
padding: 0; margin: 0;
} .hex {
position: relative; list-style-type: none; float: left; overflow: hidden; outline:1px solid transparent; animation-play-state: paused; animation-name: drive; animation-duration: 1s; animation-iteration-count: infinite; /*-webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; -ms-transition: all ease 0.4s; -o-transition: all ease 0.4s; transition: all ease 0.4s;*/
} .hex:hover {
animation-play-state: running; /*webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);*/
}
@keyframes drive {
0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); animation-timing-function: ease-out; } 25% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); animation-timing-function: ease-in; } 50% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); animation-timing-function: ease-out; } 75% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); animation-timing-function: ease-in;
} 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); animation-timing-function: ease-out; }
} .hexIn {
width: 100%; text-align: center; /*display: flex;*/
} .hexIn p {
z-index: 1000; position: absolute; /*margin: auto;*/
} .hexIn h1 {
position: absolute; bottom: 25px; font-size: 16px; font-weight: bold; color: #fff; width: 80%;
}
/*============================*/ .title-h1 {
font-weight: bold;
} .title-h2 {
width: 100%; padding-top: 86px; margin: auto; text-align: center; font-weight: bold; letter-spacing: 3px; /*text-shadow: 1px 1px 10px rgba(8,41,59,0.5);*/ /*text-decoration: underline;*/
} .title-h3 {
margin: 2em 0 1em 0; font-weight: bold; color: #234464;
} .title-h4 {
font-weight: bolder; text-indent: 4em;
} p {
line-height: 1.5em;
} .my-content-p {
width: 100%; margin: auto; /*font-family: Roboto, sans-serif;*/ font-family: 'Quicksand', sans-serif; /*font-weight: normal;*/ /*font-size: 10px;*/ /*font-size: 14px;*/ /*line-height: 1.42857143;*/ /*color: #333;*/ font-weight: 500; font-size: 18px !important; line-height: 1.7; margin-bottom: 20px; color: #333;
} .my-content-li {
width: 100%; margin: auto; /*font-family: Roboto, sans-serif;*/ font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 18px !important; line-height: 1.7; color: #333;
} .content_container { } .section-upline {
/*display: block;*/ width: 100%; /*height: 1px;*/ /*margin-bottom: 80px;*/
}
/*====================*/
- popup-change-task {
position: fixed; /*display: -webkit-flex; display: flex;*/ /*position: absolute;*/ top: 0; left: 0; z-index: 100; display: none; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.7);
} .popup-board {
/*position: relative;*/
height: 300px; width: 450px; margin: auto; border-radius: 20px; background-color: rgba(242,215,188,1); box-shadow: 5px 5px 20px #222; animation-duration: 0.5s; animation-timing-function: ease-out; animation-name: slidein;
} .popup-board header {
border-radius: 20px 20px 0 0; position: relative; width: 100%; height: 40px; background-color: #F8A886; text-align: center;
} .popup-board header h1 {
margin: 0; font-size: 1.3rem; color: #333; line-height: 40px;
} .popup-board header i {
position: absolute; top: 12px; right: 12px; cursor: pointer;
} .popup-board header i:hover {
opacity: 0.8;
} .popup-board section {
margin: 10%; /*text-align: center;*/
} .popup-board footer {
position: relative; width: 100%; height: 40px; text-align: center;
}
/*==============================轮播图*/ /*.cd-section img{
text-align: center;
}*/ .cd-section h1, .cd-section p {
/*position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 768px; text-align: center;*/
} .cd-section h1 {
color: white; font-weight: 300; text-transform: uppercase; font-size: 20px; font-size: 1.25rem;
} .cd-section p {
line-height: 1.6;
} @media only screen and (min-width: 768px) {
.cd-section h1 { font-size: 30px; font-size: 1.875rem; } .cd-section p { font-size: 20px; font-size: 1.25rem; line-height: 2; }
}
.cd-scroll-down {
position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 20px; width: 38px; height: 44px; /*background: url("../img/cd-arrow-bottom.svg") no-repeat center center;*/
}
/* No Touch devices */ .cd-nav-trigger {
display: none;
}
.no-touch #cd-vertical-nav {
position: fixed; left: 40px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1;
} .no-touch #cd-vertical-nav li {
text-align: left; margin: 6px 0;
} .no-touch #cd-vertical-nav a {
display: inline-block; /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */ -webkit-backface-visibility: hidden; backface-visibility: hidden;
} .no-touch #cd-vertical-nav a:after {
content: ""; display: table; clear: both;
} .no-touch #cd-vertical-nav a span {
float: left; display: inline-block; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6);
} .no-touch #cd-vertical-nav a:hover span {
-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
} .no-touch #cd-vertical-nav a:hover .cd-label {
opacity: 1;
} .no-touch #cd-vertical-nav a.is-selected .cd-dot {
background-color: rgba(8,41,59,1);
} .no-touch #cd-vertical-nav .cd-dot {
position: relative; /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/ top: 8px; height: 22px; width: 22px; margin: 6px 0; border-radius: 50%; background-color: #d88683; -webkit-transition: -webkit-transform 0.2s, background-color 0.5s; -moz-transition: -moz-transform 0.2s, background-color 0.5s; transition: transform 0.2s, background-color 0.5s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%;
} .no-touch #cd-vertical-nav .cd-label {
position: relative; margin-left: 10px; /*padding: .4em .5em;*/ padding: .6em .7em; color: white; background-color: rgba(8,41,59,1);; border-radius: 5px; font-size: 18px; font-size: 1.4rem; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; opacity: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
/* Touch devices */ .touch .cd-nav-trigger {
display: block; z-index: 2; position: fixed; bottom: 30px; right: 5%; height: 44px; width: 44px; border-radius: 0.25em; background: rgba(255, 255, 255, 0.9);
} .touch .cd-nav-trigger span {
position: absolute; height: 4px; width: 4px; background-color: #3e3947; border-radius: 50%; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
content: ; height: 100%; width: 100%; position: absolute; left: 0; background-color: inherit; border-radius: inherit;
} .touch .cd-nav-trigger span::before {
top: -9px;
} .touch .cd-nav-trigger span::after {
bottom: -9px;
}
.touch #cd-vertical-nav {
position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max-width: 400px; max-height: 90%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; border-radius: 0.25em; background-color: rgba(255, 255, 255, 0.9);
} .touch #cd-vertical-nav a {
display: block; padding: 1em; border-bottom: 1px solid rgba(62, 57, 71, 0.1);
} .touch #cd-vertical-nav a span:first-child {
display: none;
} .touch #cd-vertical-nav a.is-selected span:last-child {
color: #d88683;
} .touch #cd-vertical-nav.open {
-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
} .touch #cd-vertical-nav.open + .cd-nav-trigger {
background-color: transparent;
} .touch #cd-vertical-nav.open + .cd-nav-trigger span {
background-color: rgba(62, 57, 71, 0);
} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
background-color: #3e3947; height: 3px; width: 20px; border-radius: 0; left: -8px;
} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1px;
} .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); bottom: 0;
} .touch #cd-vertical-nav li:last-child a {
border-bottom: none;
}
@media only screen and (min-width: 768px) {
.touch .cd-nav-trigger, .touch #cd-vertical-nav { bottom: 40px; }
}