EstebanDLPT (Talk | contribs) |
EstebanDLPT (Talk | contribs) m |
||
(362 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | <html | + | <html> |
− | + | <head> | |
− | + | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
− | + | <!--bootstrap core css--> | |
− | + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | |
+ | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
+ | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/interactmin?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | <!-- Para uso de MathJax, Juan Fernandez code --> | ||
+ | <script type="text/x-mathjax-config"> | ||
+ | MathJax.Hub.Config({ | ||
+ | TeX: { equationNumbers: { autoNumber: "AMS" } } | ||
+ | }); | ||
+ | </script> | ||
+ | <script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | ||
+ | <script type="text/x-mathjax-config"> | ||
+ | MathJax.Hub.Config({ | ||
+ | tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} | ||
+ | }); | ||
+ | </script> | ||
− | <!-- Bootstrap | + | <style> |
− | + | /****************************************** MathJax *******************************************************/ | |
− | + | .MathJax_Display { | |
− | + | text-align: left !important; | |
+ | } | ||
+ | /**************************************** Clear the default wiki settings *********************************/ | ||
+ | #home_logo, #sideMenu { | ||
+ | display:none; | ||
+ | } | ||
+ | #sideMenu, #top_title, .patrollink { | ||
+ | display:none; | ||
+ | } | ||
+ | #content, #HQ_page { | ||
+ | width: 100%; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | background-color: white; | ||
+ | //font-size: 100% !important; | ||
+ | } | ||
+ | #content { | ||
+ | margin-top: -16px; | ||
+ | } | ||
+ | #globalWrapper, #content, #HQ_page, #bodyContent, #mw-content-text{ | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | /*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/ | ||
+ | #top_menu_14 { | ||
+ | box-sizing: initial; | ||
+ | } | ||
+ | td a{ | ||
+ | padding-right: 0px !important; | ||
+ | } | ||
+ | #globalWrapper{ | ||
+ | padding-bottom: 0; | ||
+ | } | ||
+ | a { | ||
+ | color: #002bb8; | ||
+ | } | ||
+ | /*************************************************** Bootstrap Stuff ************************************************/ | ||
+ | .portfolio-item .caption .caption-content p { | ||
+ | font-weight: 300; | ||
+ | font-size: 1.2rem; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .portfolio-item { | ||
+ | max-width: none; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .portfolio-item .caption { | ||
+ | -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s; | ||
+ | -webkit-clip-path: inset(0px); | ||
+ | clip-path: inset(0px); | ||
+ | } | ||
+ | .portfolio-item .caption .caption-content { | ||
+ | transition: opacity 0.25s; | ||
+ | margin-left: 5rem; | ||
+ | margin-right: 5rem; | ||
+ | margin-bottom: 5rem; | ||
+ | } | ||
+ | .portfolio-item img { | ||
+ | -webkit-transition: -webkit-clip-path 0.25s ease-out; | ||
+ | -webkit-clip-path: inset(-1px); | ||
+ | clip-path: inset(-1px); | ||
+ | } | ||
+ | .portfolio-item:hover img { | ||
+ | -webkit-clip-path: inset(2rem); | ||
+ | clip-path: inset(2rem); | ||
+ | } | ||
+ | .portfolio-item:hover .caption { | ||
+ | background-color: rgba(29, 128, 159, 0.9); | ||
+ | -webkit-clip-path: inset(2rem); | ||
+ | clip-path: inset(2rem); | ||
+ | } | ||
+ | } | ||
+ | a { | ||
+ | color: #1D809F; | ||
+ | } | ||
+ | a:hover, a:focus, a:active { | ||
+ | color: #155d74; | ||
+ | } | ||
+ | .btn-primary { | ||
+ | background-color: #1D809F !important; | ||
+ | border-color: #1D809F !important; | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | .btn-primary:hover, .btn-primary:focus, .btn-primary:active { | ||
+ | background-color: #155d74 !important; | ||
+ | border-color: #155d74 !important; | ||
+ | } | ||
+ | .btn { | ||
+ | box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1); | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | .btn-xl { | ||
+ | padding: 1.25rem 2.5rem; | ||
+ | } | ||
+ | /*****************************************************custom css*****************************************************/ | ||
+ | |||
+ | @font-face{ | ||
+ | font-family: "Norwester"; | ||
+ | src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'), | ||
+ | url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype'); | ||
+ | } | ||
+ | @font-face{ | ||
+ | font-family: "Montserrat"; | ||
+ | src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'), | ||
+ | url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype'); | ||
+ | } | ||
+ | @font-face{ | ||
+ | font-family: "DosisRegular"; | ||
+ | src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'), | ||
+ | url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype'); | ||
+ | } | ||
+ | html { | ||
+ | } | ||
+ | ::-webkit-scrollbar { | ||
+ | background: #cccccc; | ||
+ | } | ||
+ | ::-webkit-scrollbar-thumb { | ||
+ | background: #6b916f; | ||
+ | } | ||
+ | ::-webkit-scrollbar-thumb:hover{ | ||
+ | background: #4f8455; | ||
+ | } | ||
+ | body, html { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | body { | ||
+ | font-family: "DosisRegular", sans-serif !important; | ||
+ | } | ||
+ | ul{ | ||
+ | margin: 0 !important; | ||
+ | } | ||
+ | h1, h2, h3, h4, h5, h6 { | ||
+ | font-weight: 700; | ||
+ | padding: 0 0 0 0; | ||
+ | margin: 0 0 0 0; | ||
+ | } | ||
+ | .text-faded { | ||
+ | color: rgba(255, 255, 255, 0.7); | ||
+ | } | ||
+ | .full-masthead { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .masthead { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); | ||
+ | } | ||
+ | .header-top { | ||
+ | height: 70%; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | background: rgb(248,247,246); | ||
+ | } | ||
+ | .video-header { | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .header-bottom { | ||
+ | height: 30%; | ||
+ | position: relative; | ||
+ | background: white; | ||
+ | padding: 10px 0px 10px 10px; | ||
+ | margin: 0px 0px 0px 0px;" | ||
+ | } | ||
+ | .div-header-bottom { | ||
+ | padding:5px 0px 0px 10px; | ||
+ | border-left: 10px solid #2f6361; | ||
+ | } | ||
+ | .header-background { | ||
+ | display: flex; | ||
+ | z-index: 1; | ||
+ | height: 83%; | ||
+ | width: 99%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | position: absolute; | ||
+ | direction: rtl; | ||
+ | } | ||
+ | .header-background-left, .header-background-center, .header-background-center-right, .header-background-right { | ||
+ | width: 18%; | ||
+ | } | ||
+ | .trail { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | top: 5%; | ||
+ | } | ||
+ | .header-title { | ||
+ | font-family: "Norwester", sans-serif !important; | ||
+ | text-align: left !important; | ||
+ | font-size: 9vw; | ||
+ | font-weight: 700 !important; | ||
+ | line-height: 1em; | ||
+ | padding-bottom: 0; | ||
+ | margin-bottom: -5px; | ||
+ | color: #3582d2; | ||
+ | } | ||
+ | .header-subtitle { | ||
+ | font-family: "Montserrat", monospace; | ||
+ | text-align: left !important; | ||
+ | font-size: 3.5vw; | ||
+ | font-weight: 600 !important; | ||
+ | line-height: 1em; | ||
+ | padding-bottom: 4px; | ||
+ | color: #5da565; | ||
+ | } | ||
+ | .body-title { | ||
+ | font-family: "Norwester", sans-serif !important; | ||
+ | font-size: 4vw; | ||
+ | font-weight: 600 !important; | ||
+ | line-height: 1em; | ||
+ | padding: 10px 0 10px 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .body-title h1 { | ||
+ | margin: 0 !important; | ||
+ | } | ||
+ | .body-subtitle { | ||
+ | font-family: "Montserrat", monospace !important; | ||
+ | font-size: 2.5vw; | ||
+ | font-weight: 400 !important; | ||
+ | line-height: 1.2em; | ||
+ | padding: 3% 0; | ||
+ | } | ||
+ | .scroll-to-top { | ||
+ | position: fixed; | ||
+ | right: 10px; | ||
+ | bottom: 10px; | ||
+ | display: none; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | text-align: center; | ||
+ | color: white !important; | ||
+ | background: rgba(52, 58, 64, 0.5); | ||
+ | line-height: 45px; | ||
+ | } | ||
+ | .scroll-to-top:focus, .scroll-to-top:hover { | ||
+ | color: white !important; | ||
+ | } | ||
+ | .scroll-to-top:hover { | ||
+ | background: #343a40; | ||
+ | } | ||
+ | .scroll-to-top i { | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | .hide { | ||
+ | display: none; | ||
+ | } | ||
− | + | /**************************************************************** FOOTER ****************************************/ | |
+ | .footer { | ||
+ | padding-top: 1rem; | ||
+ | padding-bottom: 1rem; | ||
+ | background: #404040; | ||
+ | } | ||
+ | .footer p{ | ||
+ | font-family: "DosisRegular", sans-serif !important; | ||
+ | font-size: 3vh; | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | #footerCopyright{ | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | .no-padding { | ||
+ | padding-right: 0 !important; | ||
+ | } | ||
+ | .social-link.fa { | ||
+ | color: #eeeeee; | ||
+ | opacity: 0.5; | ||
+ | font-size: 6vw; | ||
+ | transition: all 0.4s; | ||
+ | -webkit-transition: all 0.4s; | ||
+ | } | ||
+ | .social-link:hover { | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | .sponsor { | ||
+ | height: 10vh; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .sponsor-img { | ||
+ | height: 100%; | ||
+ | } | ||
− | + | /***********************************************************************************************************************/ | |
− | + | /************************************************* CONTENIDO GENERAL DE LA PAGINA **************************************/ | |
− | + | /***********************************************************************************************************************/ | |
− | + | ||
− | + | .articulo { | |
− | + | font-size: 1.7vw; | |
− | + | background: url(https://static.igem.org/mediawiki/2018/c/c2/T--Tec-Monterrey--Background_Trail.jpg); | |
− | + | background-size: contain; | |
+ | background-repeat-y: repeat; | ||
+ | background-repeat-x: no-repeat; | ||
+ | text-align: justify; | ||
+ | margin-top: 3%; | ||
} | } | ||
− | + | .seccion-responsiva { | |
− | + | width: 80%; | |
+ | background: white; | ||
+ | margin: 0.5% auto; | ||
+ | padding: 2% 5%; | ||
+ | border-radius: 40px; | ||
+ | box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); | ||
} | } | ||
− | + | .seccion-responsiva a { | |
− | + | color: #377bbf; | |
− | + | margin: 0; | |
− | + | font-size: 1.2em; | |
− | + | padding: 0 !important; | |
} | } | ||
− | + | .resumen > .body-title { | |
− | + | text-align: center; | |
} | } | ||
− | # | + | .introduccion > .body-title { |
− | + | text-align: center; | |
+ | } | ||
+ | .resumen::after, .introduccion::after { | ||
+ | content: ""; | ||
+ | width: 80%; | ||
+ | height: 2px; | ||
+ | display:block; | ||
+ | right: 0; | ||
+ | background-color: #000; | ||
+ | padding: 0; | ||
+ | margin: 3% auto; | ||
+ | } | ||
+ | .contenido { | ||
+ | } | ||
+ | .leyenda { | ||
+ | font-size: 1.4vw; | ||
+ | } | ||
+ | .contenido-con-imagen-derecha, .contenido-con-imagen-izquierda { | ||
+ | height: auto; | ||
+ | } | ||
+ | .imagen-derecha > img, .imagen-izquierda > img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .imagen-derecha > img.foto, .imagen-izquierda > img.foto, .imagen-centrada-reducida > img.foto, .imagen-centrada-completa > img.foto { | ||
+ | border-radius: 40px; | ||
+ | padding-top: 1%; | ||
+ | padding-bottom: 1%; | ||
+ | } | ||
+ | .contenido-con-imagen-derecha > .imagen-derecha { | ||
+ | float: right; | ||
+ | margin: 10px; | ||
+ | width: 40%; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .contenido-con-imagen-derecha > .texto-izquierda { | ||
+ | float: left; | ||
+ | width: 51%; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .contenido-con-imagen-izquierda > .imagen-izquierda { | ||
+ | float: left; | ||
+ | margin: 10px; | ||
+ | width: 40%; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .contenido-con-imagen-izquierda > .texto-derecha { | ||
+ | float: right; | ||
+ | width: 51%; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .imagen-centrada-reducida > img { | ||
+ | width: 50%; | ||
+ | margin-left: 25%; | ||
+ | margin-right: 25%; | ||
+ | } | ||
+ | .imagen-centrada-reducida > .leyenda { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .imagen-centrada-completa > img { | ||
+ | width: 100%; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | .imagen-centrada-completa > .leyenda { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .conclusion { | ||
+ | } | ||
+ | .referencias { | ||
+ | } | ||
+ | /******************************************** RESIZING CONTENTS ON SCREEN SIZE *************************************/ | ||
+ | @media screen and (max-width: 900px) { | ||
+ | .articulo { | ||
+ | font-size: 3vh; | ||
+ | line-height: 1.2em; | ||
+ | } | ||
+ | .body-title { | ||
+ | font-size: 6vh; | ||
+ | } | ||
+ | .body-subtitle { | ||
+ | font-size: 4vh; | ||
+ | } | ||
+ | .seccion-responsiva { | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | .masthead { | ||
+ | height: auto; | ||
+ | } | ||
+ | .header-top { | ||
+ | display: none; | ||
+ | } | ||
+ | .header-bottom { | ||
+ | height: auto; | ||
+ | } | ||
+ | .header-title { | ||
+ | font-size: 16vw; | ||
+ | } | ||
+ | .header-subtitle { | ||
+ | font-size: 8vw; | ||
+ | } | ||
+ | .header-background { | ||
+ | display: none; | ||
+ | } | ||
+ | .imagen-centrada-reducida > img { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .leyenda { | ||
+ | font-size: 2vh; | ||
+ | } | ||
+ | .social-link.fa { | ||
+ | font-size: 10vw; | ||
+ | } | ||
+ | .sponsor { | ||
+ | height: 10vw; | ||
+ | } | ||
} | } | ||
− | /*************************** | + | /******************************************************* TOPBAR MENU *********************************************/ |
+ | #topBarWrapper { | ||
+ | display: none; | ||
+ | } | ||
− | + | .topBar { | |
− | + | position: fixed; | |
+ | top: 18px; | ||
+ | z-index: 99; | ||
+ | height: 8vh; | ||
+ | width: 100%; | ||
+ | } | ||
− | + | #navbar { | |
− | + | position: fixed; | |
− | + | z-index: 99; | |
− | + | height: 8vh; | |
− | + | width: 100%; | |
− | + | background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%); | |
− | + | transition: all 0.3s; | |
− | + | -webkit-transition: all 0.3s; | |
+ | } | ||
− | + | #navbarLogoWrapper { | |
− | + | position: absolute; | |
+ | display: inline-block; | ||
+ | height: 100%; | ||
+ | -webkit-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | } | ||
− | + | #navbarLogoText { | |
− | + | display: inline-block; | |
− | + | font-size: 1vw; | |
− | + | color: white; | |
− | + | opacity: 0; | |
− | + | -webkit-transition: opacity 0.3s; | |
− | + | transition: opacity 0.3s; | |
− | + | } | |
− | + | ||
− | + | #navbarLogo { | |
− | } | + | height: 80%; |
− | + | margin-top: 5%; | |
− | /* | + | margin-bottom: 15%; |
− | + | margin-left: 20px; | |
− | + | padding-left: 20px; | |
− | + | display: inline-block; | |
− | + | } | |
− | + | ||
− | + | #navbarGif { | |
− | + | height: 80%; | |
− | + | margin-top: 5%; | |
− | </style> | + | margin-bottom: 15%; |
− | + | margin-left: 20px; | |
− | <body id=" | + | padding-left: 20px; |
− | <!-- Navigation | + | display: none; |
+ | } | ||
+ | |||
+ | #navbarGif, #navbarLogoWrapper:hover #navbarLogo { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #navbarLogo, #navbarLogoWrapper:hover #navbarGif { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #navbarLogoWrapper:hover { | ||
+ | transform: scale(1.4,1.4); | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #navbarLogoWrapper:hover > #navbarLogoText { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #navContainer { | ||
+ | z-index: 2; | ||
+ | height: 8vh; | ||
+ | width: 80%; | ||
+ | left: 10%; | ||
+ | position: fixed; | ||
+ | background-color: rgba(0,0,0,0); | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .navbar-linkContainer { | ||
+ | height: 100%; | ||
+ | width: 20%; | ||
+ | color: white; | ||
+ | background-color: rgba(0,0,0,0); | ||
+ | -webkit-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | cursor: default; | ||
+ | } | ||
+ | .navbar-linkContainerChild { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | width: 100%; | ||
+ | height: 1em; | ||
+ | margin: auto; | ||
+ | font-family: "Norwester", sans-serif; | ||
+ | font-weight: 700; | ||
+ | font-size: 1.5vw; | ||
+ | line-height: 1em; | ||
+ | border-right: 1px solid white; | ||
+ | } | ||
+ | |||
+ | #linkContainer_PeopleChild { | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | .navbar-linkContainer.active { | ||
+ | transform: scale(1.05,1.05); | ||
+ | border-radius: 5%; | ||
+ | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | ||
+ | background-color: #5da565; | ||
+ | -webkit-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | z-index: 9; | ||
+ | } | ||
+ | |||
+ | .activeChild { | ||
+ | border: 0; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | .collapsed-menu { | ||
+ | top: calc(8vh + 18px); | ||
+ | position: fixed; | ||
+ | z-index: 1; | ||
+ | width: 100%; | ||
+ | background-color: aquamarine; | ||
+ | } | ||
+ | |||
+ | .container-collapse { | ||
+ | padding: 0 10px 30px 10px; | ||
+ | width: 80%; | ||
+ | margin-left: 10%; | ||
+ | } | ||
+ | |||
+ | .height-support { | ||
+ | height: 20px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .mask { | ||
+ | height: 8vh; | ||
+ | width:100%; | ||
+ | background-color: rgba(0,0,0,0); | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | .navbarList { | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | width: 20%; | ||
+ | } | ||
+ | |||
+ | .navbarItem { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .navbarItemHeader { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | font-family: "Norwester", sans-serif; | ||
+ | font-weight: 500; | ||
+ | font-size: 1.8vw; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | padding-top: 10px; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .navbarItemContent { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | color: black; | ||
+ | font-size: 1.5vw; | ||
+ | line-height: 1.5em; | ||
+ | text-decoration: none; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | a.navbarItemHeader::after, a.navbarItemContent::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 2px; | ||
+ | display:block; | ||
+ | margin-top: 5px; | ||
+ | right: 0; | ||
+ | background-color: #000; | ||
+ | -webkit-transition: width 0.3s ease-in-out 0s; | ||
+ | transition: width 0.3s ease-in-out 0s; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | a.navbarItemHeader:link, a.navbarItemContent:link { | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a.navbarItemHeader:visited, a.navbarItemContent:visited { | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a.navbarItemHeader:active, a.navbarItemContent:active { | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a.navbarItemHeader:hover, a.navbarItemContent:hover { | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | a.navbarItemHeader:hover::after, a.navbarItemContent:hover::after { | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | background: #000; | ||
+ | } | ||
+ | |||
+ | .clearBoth { | ||
+ | clear: both; | ||
+ | } | ||
+ | /********************************************************* TOPBAR MENU ENDS *********************************************/ | ||
+ | /***************************************************** SIDEBAR MENU **************************************************/ | ||
+ | #sidebar { | ||
+ | display: block; | ||
+ | } | ||
+ | #sidebar-wrapper { | ||
+ | position: fixed; | ||
+ | top: 18px; | ||
+ | z-index: 2; | ||
+ | right: 0; | ||
+ | width: 283px; | ||
+ | height: 100%; | ||
+ | -webkit-transition: all 0.4s ease 0s; | ||
+ | -moz-transition: all 0.4s ease 0s; | ||
+ | -ms-transition: all 0.4s ease 0s; | ||
+ | -o-transition: all 0.4s ease 0s; | ||
+ | transition: all 0.4s ease 0s; | ||
+ | transform: translateX(300px); | ||
+ | background: #5da565; | ||
+ | } | ||
+ | .sidebar-nav { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 300px; | ||
+ | margin: 0; | ||
+ | padding: 10px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | .sub-sidebar-nav { | ||
+ | width:inherit; | ||
+ | list-style-type: none; | ||
+ | margin: 0; | ||
+ | padding: 10px; | ||
+ | position:static; | ||
+ | } | ||
+ | .sidebar-nav li.sidebar-nav-item a { | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | color: #fff; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .sidebar-nav-subitem { | ||
+ | list-style-type: none; | ||
+ | list-style: none; | ||
+ | text-decoration: none; | ||
+ | margin: 0; | ||
+ | padding: 10px; | ||
+ | color: #fff; | ||
+ | background: #2f6361; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | .sidebar-nav li a:hover { | ||
+ | text-decoration: none; | ||
+ | color: #000; | ||
+ | background: #2a8481; | ||
+ | } | ||
+ | .sidebar-nav li a:active, | ||
+ | .sidebar-nav li a:focus { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .sidebar-nav > .sidebar-brand { | ||
+ | font-size: 1.2rem; | ||
+ | background: rgba(52, 58, 64, 0.1); | ||
+ | height: 80px; | ||
+ | line-height: 50px; | ||
+ | padding-top: 15px; | ||
+ | padding-bottom: 15px; | ||
+ | padding-left: 15px; | ||
+ | position:relative; | ||
+ | left: -32; | ||
+ | } | ||
+ | .sidebar-nav > .sidebar-brand a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | .sidebar-nav > .sidebar-brand a:hover { | ||
+ | color: #fff; | ||
+ | background: none; | ||
+ | } | ||
+ | .brand-hider { | ||
+ | width: 290px; | ||
+ | height: 78px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: #2f6361; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 1px; | ||
+ | -webkit-transition: all 1s ease 0s; | ||
+ | -moz-transition: all 1s ease 0s; | ||
+ | -ms-transition: all 1s ease 0s; | ||
+ | -o-transition: all 1s ease 0s; | ||
+ | transition: all 1s ease 0s; | ||
+ | } | ||
+ | .brand-hider.active { | ||
+ | width: 10px; | ||
+ | right: 10px; | ||
+ | -webkit-transition: all 1s ease 0s; | ||
+ | -moz-transition: all 1s ease 0s; | ||
+ | -ms-transition: all 1s ease 0s; | ||
+ | -o-transition: all 1s ease 0s; | ||
+ | transition: all 1s ease 0s; | ||
+ | } | ||
+ | #sidebar-wrapper.active{ | ||
+ | right: 300px; | ||
+ | -webkit-transition: all 0.4s ease 0s; | ||
+ | -moz-transition: all 0.4s ease 0s; | ||
+ | -ms-transition: all 0.4s ease 0s; | ||
+ | -o-transition: all 0.4s ease 0s; | ||
+ | transition: all 0.4s ease 0s; | ||
+ | } | ||
+ | .menu-toggle { | ||
+ | position: fixed; | ||
+ | right: 10px; | ||
+ | top: 30px; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | text-align: center; | ||
+ | color: #fff !important; | ||
+ | background: rgba(52, 58, 64, 0.5); | ||
+ | line-height: 50px; | ||
+ | z-index: 999; | ||
+ | -webkit-transition: all 0.4s ease 0s; | ||
+ | -moz-transition: all 0.4s ease 0s; | ||
+ | -ms-transition: all 0.4s ease 0s; | ||
+ | -o-transition: all 0.4s ease 0s; | ||
+ | transition: all 0.4s ease 0s; | ||
+ | } | ||
+ | .menu-toggle:focus, .menu-toggle:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | .menu-toggle:hover { | ||
+ | background: #343a40; | ||
+ | } | ||
+ | /********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/ | ||
+ | @media screen and (min-width: 900px) { | ||
+ | #topBarWrapper { | ||
+ | display: block; | ||
+ | } | ||
+ | #sidebar { | ||
+ | display: none; | ||
+ | } | ||
+ | #scroll-to-top-btn { | ||
+ | display: none !important; | ||
+ | opacity: 0 !important; | ||
+ | } | ||
+ | } | ||
+ | /**********************************************************************************************************************/ | ||
+ | /******************************************************* SLIDESHOW ***************************************************/ | ||
+ | /**********************************************************************************************************************/ | ||
+ | .slideshow { | ||
+ | position: relative; | ||
+ | width: 80%; | ||
+ | height: 30vw; | ||
+ | margin: 0 10%; | ||
+ | overflow-y: hidden; | ||
+ | } | ||
+ | |||
+ | .slideshow .right-arrow-pane, .slideshow .left-arrow-pane{ | ||
+ | position:absolute; | ||
+ | right:0; | ||
+ | top:0; | ||
+ | height:100%; | ||
+ | width:10%; | ||
+ | background: rgba(0,0,0,0.3); | ||
+ | -webkit-transition: all 0.3s; | ||
+ | -moz-transition: all 0.3s; | ||
+ | -ms-transition: all 0.3s; | ||
+ | -o-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | z-index:75; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .slideshow .left-arrow-pane { | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | .slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow { | ||
+ | position:absolute; | ||
+ | top:50%; | ||
+ | left:30%; | ||
+ | transform:translate(-50%, -50%); | ||
+ | -webkit-transition: all 0.3s; | ||
+ | -moz-transition: all 0.3s; | ||
+ | -ms-transition: all 0.3s; | ||
+ | -o-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | /*z-index:50;*/ | ||
+ | } | ||
+ | |||
+ | .slideshow .left-arrow-pane .arrow { | ||
+ | right:30%; | ||
+ | left:auto; | ||
+ | transform: translate(50%, -50%); | ||
+ | } | ||
+ | |||
+ | .slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{ | ||
+ | height:5vw; | ||
+ | width:5vw; | ||
+ | transform:rotate(45deg); | ||
+ | border-style: solid; | ||
+ | border-color: rgba(255, 255, 255, .5); | ||
+ | border-width:5px 5px 0 0; | ||
+ | -webkit-transition: all 0.3s; | ||
+ | -moz-transition: all 0.3s; | ||
+ | -ms-transition: all 0.3s; | ||
+ | -o-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | } | ||
+ | |||
+ | .slideshow .left-arrow-pane .arrow div{ | ||
+ | transform:rotate(-135deg); | ||
+ | } | ||
+ | |||
+ | .slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover { | ||
+ | background:rgba(0,0,0,.25); | ||
+ | } | ||
+ | |||
+ | .slideshow .right-arrow-pane:hover .arrow { | ||
+ | left:35%; | ||
+ | } | ||
+ | |||
+ | .slideshow .left-arrow-pane:hover .arrow { | ||
+ | right:35%; | ||
+ | } | ||
+ | |||
+ | .slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{ | ||
+ | border-color:rgb(255,255,255); | ||
+ | } | ||
+ | |||
+ | .slideshow .bubbles { | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | height:10%; | ||
+ | bottom:0; | ||
+ | background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); | ||
+ | display:flex; | ||
+ | justify-content: center; | ||
+ | z-index:50; | ||
+ | } | ||
+ | |||
+ | .slideshow .bubbles div { | ||
+ | height:3vw; | ||
+ | width:3vw; | ||
+ | border-radius:5px; | ||
+ | border:solid white 3px; | ||
+ | margin:0 20px 0 0; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .slideshow .bubbles div:last-child { | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | |||
+ | .slideshow .bubbles div:hover { | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | .slideshow .bubbles div.active { | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn { | ||
+ | position:absolute; | ||
+ | height:5vw; | ||
+ | width:5vw; | ||
+ | bottom:1%; | ||
+ | right:12%; | ||
+ | background:rgba(0,0,0,.7); | ||
+ | border-radius:10px; | ||
+ | z-index:60; | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn .bars { | ||
+ | visibility: hidden; | ||
+ | position:absolute; | ||
+ | top:50%; | ||
+ | left:50%; | ||
+ | transform:translate(-50%, -50%); | ||
+ | width:3vw; | ||
+ | height:3vw; | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn .bars > div{ | ||
+ | float:right; | ||
+ | width:40%; | ||
+ | height:100%; | ||
+ | background:rgba(255,255,255,.8); | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn .bars > div:first-child { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn:hover { | ||
+ | background: rgba(34,34,34,1); | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn:hover .bars > div { | ||
+ | background: rgba(255,255,255,1); | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn .tri { | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | top:50%; | ||
+ | left:50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn .tri > div { | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-top: 2vw solid transparent; | ||
+ | border-left-style: solid; | ||
+ | border-left-width: 3vw; | ||
+ | border-left-color:rgba(255,255,255,.75); | ||
+ | border-bottom: 2vw solid transparent; | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn:hover .tri > div{ | ||
+ | border-left-color:rgba(255,255,255,1); | ||
+ | } | ||
+ | |||
+ | .slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .slideshow .content { | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slideshow .content .slide { | ||
+ | visibility:hidden; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | height:100%; | ||
+ | width:100%; | ||
+ | overflow-y: hidden; | ||
+ | -webkit-transition: left 1s; | ||
+ | -moz-transition: left 1s; | ||
+ | -ms-transition: left 1s; | ||
+ | -o-transition: left 1s; | ||
+ | transition: left 1s; | ||
+ | } | ||
+ | .slideshow .content .slide video, .slideshow .content .slide img { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .slideshow .content .slide:first-child { | ||
+ | visibility:visible; | ||
+ | left:0; | ||
+ | z-index: 1; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .slideshow .content .slide > img:first-child { | ||
+ | height:auto; | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slideshow .content .slide.active { | ||
+ | left:0 !important; | ||
+ | } | ||
+ | |||
+ | .slideshow .content .slide.left { | ||
+ | left:-100vw !important; | ||
+ | } | ||
+ | |||
+ | .slideshow .content .slide.right { | ||
+ | left:100vw !important; | ||
+ | } | ||
+ | |||
+ | .splash .slideshow .title { | ||
+ | top:65%; | ||
+ | left:200px; | ||
+ | } | ||
+ | |||
+ | #HQ_page .slideshow .title p { | ||
+ | font-size:7em; | ||
+ | } | ||
+ | |||
+ | .notransition { | ||
+ | -webkit-transition: none !important; | ||
+ | -moz-transition: none !important; | ||
+ | -ms-transition: none !important; | ||
+ | -o-transition: none !important; | ||
+ | transition: none !important; | ||
+ | } | ||
+ | /**********************************************************************************************************************/ | ||
+ | /**********************************************************************************************************************/ | ||
+ | /******************************************************* SLIDESHOW ENDS*************************************************/ | ||
+ | |||
+ | /********************************************************Loader**************************************************/ | ||
+ | #loader-wrapper { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | |||
+ | #loader { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 1001; | ||
+ | } | ||
+ | |||
+ | #loaderMessage { | ||
+ | position: absolute; | ||
+ | width: 50%; | ||
+ | height: 10%; | ||
+ | margin: 85% 25% 5% 25%; | ||
+ | font-size: 10%; | ||
+ | } | ||
+ | |||
+ | #videoLoader { | ||
+ | position:absolute; | ||
+ | width: 50%; | ||
+ | margin: 15% 25%; | ||
+ | } | ||
+ | |||
+ | #loader-wrapper .loader-section { | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | height: 51%; | ||
+ | background: rgb(214,230,223); | ||
+ | z-index: 1000; | ||
+ | -webkit-transform: translateY(0); | ||
+ | -ms-transform: translateY(0); | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | #loader-wrapper .loader-section.section-top { | ||
+ | top: 0; | ||
+ | } | ||
+ | #loader-wrapper .loader-section.section-bottom { | ||
+ | bottom: 0; | ||
+ | } | ||
+ | /* Loaded */ | ||
+ | .loaded #loader-wrapper .loader-section.section-top { | ||
+ | -webkit-transform: translateY(-100%); | ||
+ | -ms-transform: translateY(-100%); | ||
+ | transform: translateY(-100%); | ||
+ | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
+ | -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
+ | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
+ | } | ||
+ | .loaded #loader-wrapper .loader-section.section-bottom { | ||
+ | -webkit-transform: translateY(100%); | ||
+ | -ms-transform: translateY(100%); | ||
+ | transform: translateY(100%); | ||
+ | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
+ | -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
+ | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
+ | } | ||
+ | .loaded #loader { | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.3s ease-out; | ||
+ | -o-transition: all 0.3s ease-out; | ||
+ | transition: all 0.3s ease-out; | ||
+ | } | ||
+ | .loaded #loader-wrapper { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | /* JavaScript Turned Off */ | ||
+ | .no-js #loader-wrapper { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /**********************************************************************************************************************/ | ||
+ | /********************************************************* VERTICAL NAVBAR ********************************************/ | ||
+ | /**********************************************************************************************************************/ | ||
+ | .vertical-nav { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | /* -------------------------------- | ||
+ | Primary style | ||
+ | -------------------------------- */ | ||
+ | *, *::after, *::before { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: yellow; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .cd-image-replace { | ||
+ | /* replace text with image */ | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | text-indent: 100%; | ||
+ | white-space: nowrap; | ||
+ | color: transparent; | ||
+ | } | ||
+ | |||
+ | /* -------------------------------- | ||
+ | Navigation trigger - visible on small devices only | ||
+ | -------------------------------- */ | ||
+ | .cd-nav-trigger { | ||
+ | display: block; | ||
+ | position: fixed; | ||
+ | z-index: 102; | ||
+ | bottom: 30px; | ||
+ | right: 5%; | ||
+ | height: 44px; | ||
+ | width: 44px; | ||
+ | border-radius: 0.25em; | ||
+ | background: rgba(234, 242, 227, 0.9); | ||
+ | /* reset button style */ | ||
+ | cursor: pointer; | ||
+ | -webkit-appearance: none; | ||
+ | -moz-appearance: none; | ||
+ | -ms-appearance: none; | ||
+ | -o-appearance: none; | ||
+ | appearance: none; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | } | ||
+ | .cd-nav-trigger span { | ||
+ | /* central dot */ | ||
+ | position: absolute; | ||
+ | height: 4px; | ||
+ | width: 4px; | ||
+ | background-color: #3a2c41; | ||
+ | border-radius: 10%; | ||
+ | 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%); | ||
+ | } | ||
+ | .cd-nav-trigger span::before, .cd-nav-trigger span::after { | ||
+ | /* bottom and top dots */ | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | background-color: #3a2c41; | ||
+ | border-radius: inherit; | ||
+ | } | ||
+ | .cd-nav-trigger span::before { | ||
+ | top: -9px; | ||
+ | } | ||
+ | .cd-nav-trigger span::after { | ||
+ | bottom: -9px; | ||
+ | } | ||
+ | @media only screen and (min-width: 900px) { | ||
+ | .cd-nav-trigger { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* -------------------------------- | ||
+ | Vertical navigation | ||
+ | -------------------------------- */ | ||
+ | .cd-vertical-nav { | ||
+ | position: fixed; | ||
+ | z-index: 100; | ||
+ | right: 5%; | ||
+ | bottom: 30px; | ||
+ | width: 90%; | ||
+ | max-width: 400px; | ||
+ | max-height: 90%; | ||
+ | overflow-y: auto; | ||
+ | -webkit-transform: scale(0); | ||
+ | -moz-transform: scale(0); | ||
+ | -ms-transform: scale(0); | ||
+ | -o-transform: scale(0); | ||
+ | transform: scale(0); | ||
+ | -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-transition: all 0.2s; | ||
+ | -moz-transition: all 0.2s; | ||
+ | transition: all 0.2s; | ||
+ | border-radius: 0.25em; | ||
+ | background-color: rgba(234, 242, 227, 0.9); | ||
+ | } | ||
+ | .cd-vertical-nav a { | ||
+ | display: block; | ||
+ | padding: 1em; | ||
+ | } | ||
+ | .cd-vertical-nav a.active { | ||
+ | color: white; | ||
+ | } | ||
+ | .cd-vertical-nav.open { | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | -webkit-overflow-scrolling: touch; | ||
+ | } | ||
+ | .cd-vertical-nav.open + .cd-nav-trigger { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | .cd-vertical-nav.open + .cd-nav-trigger span { | ||
+ | background-color: rgba(58, 44, 65, 0); | ||
+ | } | ||
+ | .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after { | ||
+ | /* transform dots in 'X' icon */ | ||
+ | height: 3px; | ||
+ | width: 20px; | ||
+ | border-radius: 0; | ||
+ | left: -8px; | ||
+ | } | ||
+ | .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; | ||
+ | } | ||
+ | .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; | ||
+ | } | ||
+ | @media only screen and (min-width: 900px) { | ||
+ | .cd-vertical-nav { | ||
+ | /* reset style */ | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | bottom: auto; | ||
+ | height: 100vh; | ||
+ | width: 90px; | ||
+ | max-width: none; | ||
+ | max-height: none; | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | background-color: transparent; | ||
+ | /* vertically align its content*/ | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* navbar background */ | ||
+ | .cd-vertical-nav::before { | ||
+ | /* this is the navigation background */ | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: #397471; | ||
+ | -webkit-transform: translateX(100%); | ||
+ | -moz-transform: translateX(100%); | ||
+ | -ms-transform: translateX(100%); | ||
+ | -o-transform: translateX(100%); | ||
+ | transform: translateX(100%); | ||
+ | -webkit-transition: -webkit-transform 0.4s; | ||
+ | -moz-transition: -moz-transform 0.4s; | ||
+ | transition: transform 0.4s; | ||
+ | } | ||
+ | .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before { | ||
+ | -webkit-transform: translateX(0); | ||
+ | -moz-transform: translateX(0); | ||
+ | -ms-transform: translateX(0); | ||
+ | -o-transform: translateX(0); | ||
+ | transform: translateX(0); | ||
+ | } | ||
+ | .cd-vertical-nav ul { | ||
+ | /* vertically align <ul> inside <nav>*/ | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .cd-vertical-nav a { | ||
+ | position: relative; | ||
+ | padding: 2em 0 0; | ||
+ | margin: 0.5em auto; | ||
+ | border-bottom: none; | ||
+ | font-size: 1rem; | ||
+ | color: #FFF; | ||
+ | line-height: 1em; | ||
+ | } | ||
+ | .cd-vertical-nav a.active { | ||
+ | color: #FFF; | ||
+ | } | ||
+ | .cd-vertical-nav a::before, .cd-vertical-nav a::after { | ||
+ | /* used to create the filled circle and the background icon */ | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | /* Force Hardware Acceleration */ | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -moz-transform: translateZ(0); | ||
+ | -ms-transform: translateZ(0); | ||
+ | -o-transform: translateZ(0); | ||
+ | transform: translateZ(0); | ||
+ | } | ||
+ | .cd-vertical-nav a::before { | ||
+ | /* filled circle */ | ||
+ | top: 0; | ||
+ | height: 32px; | ||
+ | width: 32px; | ||
+ | border-radius: 50%; | ||
+ | background: #5DA565; | ||
+ | -webkit-transform: translateX(-50%) scale(0.1); | ||
+ | -moz-transform: translateX(-50%) scale(0.1); | ||
+ | -ms-transform: translateX(-50%) scale(0.1); | ||
+ | -o-transform: translateX(-50%) scale(0.1); | ||
+ | transform: translateX(-50%) scale(0.1); | ||
+ | -webkit-transition: -webkit-transform 0.4s, background-color 0.2s; | ||
+ | -moz-transition: -moz-transform 0.4s, background-color 0.2s; | ||
+ | transition: transform 0.4s, background-color 0.2s; | ||
+ | } | ||
+ | .cd-vertical-nav a::after { | ||
+ | /* icon */ | ||
+ | opacity: 0; | ||
+ | top: 8px; | ||
+ | height: 16px; | ||
+ | width: 16px; | ||
+ | background: url(../img/cd-nav-icons.svg) no-repeat; | ||
+ | -webkit-transform: translateX(-50%) scale(0); | ||
+ | -moz-transform: translateX(-50%) scale(0); | ||
+ | -ms-transform: translateX(-50%) scale(0); | ||
+ | -o-transform: translateX(-50%) scale(0); | ||
+ | transform: translateX(-50%) scale(0); | ||
+ | -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s; | ||
+ | -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s; | ||
+ | transition: transform 0.4s 0s, opacity 0.1s 0.3s; | ||
+ | } | ||
+ | .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before { | ||
+ | background-color: #70C27C; | ||
+ | } | ||
+ | .cd-vertical-nav .label { | ||
+ | display: block; | ||
+ | /* Force Hardware Acceleration */ | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -moz-transform: translateZ(0); | ||
+ | -ms-transform: translateZ(0); | ||
+ | -o-transform: translateZ(0); | ||
+ | transform: translateZ(0); | ||
+ | -webkit-transform: translateX(100%); | ||
+ | -moz-transform: translateX(100%); | ||
+ | -ms-transform: translateX(100%); | ||
+ | -o-transform: translateX(100%); | ||
+ | transform: translateX(100%); | ||
+ | -webkit-transition: all 0.4s; | ||
+ | -moz-transition: all 0.4s; | ||
+ | transition: all 0.4s; | ||
+ | line-height: 1em; | ||
+ | } | ||
+ | .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after { | ||
+ | -webkit-transform: translateX(-50%) scale(1); | ||
+ | -moz-transform: translateX(-50%) scale(1); | ||
+ | -ms-transform: translateX(-50%) scale(1); | ||
+ | -o-transform: translateX(-50%) scale(1); | ||
+ | transform: translateX(-50%) scale(1); | ||
+ | /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */ | ||
+ | -moz-transform: translateX(-50%) scale(1) rotate(0.02deg); | ||
+ | } | ||
+ | .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: -webkit-transform 0.4s, opacity 0s; | ||
+ | -moz-transition: -moz-transform 0.4s, opacity 0s; | ||
+ | transition: transform 0.4s, opacity 0s; | ||
+ | } | ||
+ | .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label { | ||
+ | -webkit-transform: translateX(0); | ||
+ | -moz-transform: translateX(0); | ||
+ | -ms-transform: translateX(0); | ||
+ | -o-transform: translateX(0); | ||
+ | transform: translateX(0); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* -------------------------------- | ||
+ | no-js | ||
+ | -------------------------------- */ | ||
+ | .no-js .cd-nav-trigger { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .no-js .cd-vertical-nav { | ||
+ | position: static; | ||
+ | height: auto; | ||
+ | width: 100%; | ||
+ | max-width: none; | ||
+ | background-color: #2A8481; | ||
+ | border-radius: 0; | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | .no-js .cd-vertical-nav::before { | ||
+ | display: none; | ||
+ | } | ||
+ | .no-js .cd-vertical-nav ul::after { | ||
+ | clear: both; | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
+ | .no-js .cd-vertical-nav li { | ||
+ | display: inline-block; | ||
+ | float: left; | ||
+ | } | ||
+ | .no-js .cd-vertical-nav a { | ||
+ | padding: 0 1em; | ||
+ | margin: 1.5em 1em; | ||
+ | color: #eaf2e3; | ||
+ | } | ||
+ | .no-js .cd-vertical-nav a.active { | ||
+ | color: #c0a672; | ||
+ | } | ||
+ | .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before { | ||
+ | display: none; | ||
+ | } | ||
+ | .no-js .cd-vertical-nav .label { | ||
+ | -webkit-transform: translateX(0); | ||
+ | -moz-transform: translateX(0); | ||
+ | -ms-transform: translateX(0); | ||
+ | -o-transform: translateX(0); | ||
+ | transform: translateX(0); | ||
+ | } | ||
+ | |||
+ | /********************************************************* TERMINA VERTICAL NAVBAR ***********************************/ | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!------------------------------------------------------- LOADER -------------------------------------------------------> | ||
+ | <div id="loader-wrapper"> | ||
+ | <div id="loader"> | ||
+ | <img id="videoLoader" src="https://static.igem.org/mediawiki/2018/e/e3/T--Tec-Monterrey--Page_Loader.gif"> | ||
+ | <div id="loaderMessage"></div> | ||
+ | </div> | ||
+ | <div class="loader-section section-top"></div> | ||
+ | <div class="loader-section section-bottom"></div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Navigation Bars--> | ||
+ | <!------------------------------------------------------- SIDEBAR MENU STARTS ------------------------------------------> | ||
+ | <div id="sidebar"> | ||
<a class="menu-toggle rounded" id="menuToggle" href="#"> | <a class="menu-toggle rounded" id="menuToggle" href="#"> | ||
− | < | + | <i class="fa fa-bars" style="font-size: 20px;"></i> |
</a> | </a> | ||
<nav id="sidebar-wrapper"> | <nav id="sidebar-wrapper"> | ||
Line 86: | Line 1,565: | ||
<li class="sidebar-brand"> | <li class="sidebar-brand"> | ||
<div class="brand-hider"></div> | <div class="brand-hider"></div> | ||
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey">Tec de Monterrey</a> |
</li> | </li> | ||
<li class="sidebar-nav-item" id="menuProject"> | <li class="sidebar-nav-item" id="menuProject"> | ||
− | <a | + | <a>Project</a> |
<ul class="sub-sidebar-nav"> | <ul class="sub-sidebar-nav"> | ||
<li class="sidebar-nav-subitem" id="subProject"> | <li class="sidebar-nav-subitem" id="subProject"> | ||
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Description">Description</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design">Design</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab">Interlab</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook">Notebook</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety">Safety</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Demonstrate">Demonstrate</a> |
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Medals">Medals</a> | ||
</li> | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li class="sidebar-nav-item" id="menuParts"> | <li class="sidebar-nav-item" id="menuParts"> | ||
− | <a | + | <a>Parts</a> |
<ul class="sub-sidebar-nav"> | <ul class="sub-sidebar-nav"> | ||
<li class="sidebar-nav-subitem" id="subParts"> | <li class="sidebar-nav-subitem" id="subParts"> | ||
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts">Parts</a> |
− | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve">Improved parts</a> | |
− | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/PartsList">Parts list</a> | |
− | <a | + | |
− | + | ||
− | <a | + | |
</li> | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li class="sidebar-nav-item" id="menuPeople"> | <li class="sidebar-nav-item" id="menuPeople"> | ||
− | <a | + | <a>People</a> |
<ul class="sub-sidebar-nav"> | <ul class="sub-sidebar-nav"> | ||
<li class="sidebar-nav-subitem" id="subPeople"> | <li class="sidebar-nav-subitem" id="subPeople"> | ||
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team">Team</a> |
− | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations">Collaborations</a> | |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions">Attribution</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Sponsors">Sponsors</a> |
− | <a | + | |
</li> | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li class="sidebar-nav-item" id="menuHP"> | <li class="sidebar-nav-item" id="menuHP"> | ||
− | <a | + | <a>Human Practices</a> |
<ul class="sub-sidebar-nav"> | <ul class="sub-sidebar-nav"> | ||
<li class="sidebar-nav-subitem" id="subHP"> | <li class="sidebar-nav-subitem" id="subHP"> | ||
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices">Human Practices</a> |
− | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement">Public & Educational Engagement</a> | |
− | <a | + | |
− | + | ||
− | + | ||
</li> | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li class="sidebar-nav-item" id="menuModeling"> | <li class="sidebar-nav-item" id="menuModeling"> | ||
− | <a | + | <a>Modeling</a> |
<ul class="sub-sidebar-nav"> | <ul class="sub-sidebar-nav"> | ||
<li class="sidebar-nav-subitem" id="subModeling"> | <li class="sidebar-nav-subitem" id="subModeling"> | ||
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Overview</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model#">D.E. System</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Quasi-Steady State</a> |
− | <a | + | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Protein Production</a> |
</li> | </li> | ||
</ul> | </ul> | ||
Line 151: | Line 1,624: | ||
</ul> | </ul> | ||
</nav> | </nav> | ||
− | + | </div> | |
+ | <!--------------------------------------------------------- SIDEBAR MENU ENDS --------------------------------------------> | ||
+ | <!--------------------------------------------------------- TOPBAR MENU STARTS -------------------------------------------> | ||
+ | <div id="topBarWrapper"> | ||
+ | <div class="topBar d-flex"> | ||
+ | <div id="navbar"> | ||
+ | <div id="navbarLogoWrapper"> | ||
+ | <img id="navbarLogo" src="https://static.igem.org/mediawiki/2018/7/76/T--Tec-Monterrey--ECoding_Menu_Logo_Still_200.png"/><img id="navbarGif" src="https://static.igem.org/mediawiki/2018/c/c3/T--Tec-Monterrey--ECoding_Menu_Gif.gif"/> | ||
+ | <h5 id="navbarLogoText">Home</h5> | ||
+ | </div> | ||
+ | <div id="navContainer"> | ||
+ | <a> | ||
+ | <div class="navbar-linkContainer" id="linkContainer_Project"> | ||
+ | <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a> | ||
+ | <div class="navbar-linkContainer" id="linkContainer_Parts"> | ||
+ | <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a> | ||
+ | <div class="navbar-linkContainer" id="linkContainer_HP"> | ||
+ | <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a> | ||
+ | <div class="navbar-linkContainer" id="linkContainer_Modeling"> | ||
+ | <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">MODELING</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a> | ||
+ | <div class="navbar-linkContainer" id="linkContainer_People"> | ||
+ | <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Project collapsed --> | ||
+ | <div class="collapse collapsed-menu" id="collapseProject"> | ||
+ | <div class="container-collapse"> | ||
+ | <div class="height-support"> | ||
+ | </div> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Description" | ||
+ | class="navbarItemHeader">Description</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Description#overview" class="navbarItemContent">Overview</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Description#system" class="navbarItemContent">System</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Description#references" class="navbarItemContent">References</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design" class="navbarItemHeader">Design</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#background" class="navbarItemContent">Background</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#module1" class="navbarItemContent">Module 1</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#module2" class="navbarItemContent">Module 2</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#system" class="navbarItemContent">System</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#adaptation" class="navbarItemContent">Adaptation</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab" class="navbarItemHeader">InterLab</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#procedure-interlab" class="navbarItemContent">Procedure</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#results-interlab" class="navbarItemContent">Results</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#conclusion-interlab" class="navbarItemContent">Conclusion</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook" class="navbarItemHeader">Notebook</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook#logbook" class="navbarItemContent">Logbook</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook#protocols" class="navbarItemContent">Protocols</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety" class="navbarItemHeader">Safety</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety#biosafety" class="navbarItemContent">Biosafety</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety#our-lab" class="navbarItemContent">Our Lab</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety#project-safety" class="navbarItemContent">Project Safety</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Demonstrate" class="navbarItemHeader">Demonstrate</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Medals" class="navbarItemHeader">Medals</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <br class="clearBoth"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Parts collapsed --> | ||
+ | <div class="collapse collapsed-menu" id="collapseParts"> | ||
+ | <div class="container-collapse"> | ||
+ | <div class="height-support"> | ||
+ | </div> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts" class="navbarItemHeader">Parts</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#overview" class="navbarItemContent">Overview</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#basic_parts" class="navbarItemContent">Basic Parts</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#composite_parts" class="navbarItemContent">Composite Parts</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#parts_collection" class="navbarItemContent">Collection</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve" class="navbarItemHeader">Improved Parts</a> | ||
+ | <br> | ||
+ | <a href="" class="navbarItemContent">Previous Parts</a> | ||
+ | <br> | ||
+ | <a href="" class="navbarItemContent">Improved Parts</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/PartsList" class="navbarItemHeader">Parts List</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <br class="clearBoth"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- People collapsed --> | ||
+ | <div class="collapse collapsed-menu" id="collapsePeople"> | ||
+ | <div class="container-collapse"> | ||
+ | <div class="height-support"> | ||
+ | </div> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team" class="navbarItemHeader">Team</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#page-top" class="navbarItemContent">Header</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#teamMembers" class="navbarItemContent">Team Members</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi1" class="navbarItemContent">PI 1</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi2" class="navbarItemContent">PI 2</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#instructor" class="navbarItemContent">Instructor</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#advisors" class="navbarItemContent">Advisors</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#collaborators" class="navbarItemContent">Collaborators</a> | ||
+ | <br> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations" class="navbarItemHeader">Collaborations</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations#collabs" class="navbarItemContent">Collabs</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations#meetups" class="navbarItemContent">Meetups</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions" class="navbarItemHeader">Attributions</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#tec-monterrey-work" class="navbarItemContent">What we have done</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#general-support" class="navbarItemContent">General Support</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#HP-support" class="navbarItemContent">HP Support</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#design-wiki" class="navbarItemContent">Design/Wiki</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#fund-raising" class="navbarItemContent">Fund raising</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#thanks" class="navbarItemContent">Thanks</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Sponsors" class="navbarItemHeader">Sponsors</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <br class="clearBoth"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- HP collapsed --> | ||
+ | <div class="collapse collapsed-menu" id="collapseHP"> | ||
+ | <div class="container-collapse"> | ||
+ | <div class="height-support"> | ||
+ | </div> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices" class="navbarItemHeader">Human Practices</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#page-top" class="navbarItemContent">Header</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#introduction-HP" class="navbarItemContent">Intro</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#action-HP" class="navbarItemContent">Action Plan</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#journey-HP" class="navbarItemContent">Journey</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#integrated-HP" class="navbarItemContent">Integrated</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#world-HP" class="navbarItemContent">World</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement" class="navbarItemHeader">Public & Educational Engagement</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#magazine" class="navbarItemContent">Magazine articles</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#presentation" class="navbarItemContent">Presentations</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#social" class="navbarItemContent">Social Media</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#congress" class="navbarItemContent">Congress</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#tour" class="navbarItemContent">Tour</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#workshops" class="navbarItemContent">Workshops</a> | ||
+ | <br> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#seminar" class="navbarItemContent">Seminar</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <br class="clearBoth"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Modeling collapsed --> | ||
+ | <div class="collapse collapsed-menu" id="collapseModeling"> | ||
+ | <div class="container-collapse"> | ||
+ | <div class="height-support"> | ||
+ | </div> | ||
+ | <ul class="navbar-nav mr-auto navbarList"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Overview</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Introduction</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Biological System</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">D.E. System</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Kinetic Diagram</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Equations</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Parameters</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Quasi-Steady State</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Equations</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;"> | ||
+ | <li class="nav-item navbarItem"> | ||
+ | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Protein Production</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Equations</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Experimentation</a> | ||
+ | <br> | ||
+ | <a href="#page-top" class="navbarItemContent">Parameters</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <br class="clearBoth"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="mask"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--------------------------------------------------------- TOPBAR MENU ENDS ---------------------------------------------> | ||
+ | <!--Scroll to top button--> | ||
+ | <a class="scroll-to-top rounded" href="#page-top" id="scroll-to-top-btn"> | ||
+ | <i class="fa fa-angle-up"></i> | ||
+ | </a> | ||
+ | </body> | ||
+ | </html> |
Latest revision as of 03:57, 18 October 2018