Difference between revisions of "Team:Tec-Monterrey/Templates/Tec-Monterrey General Format"

m
 
(355 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html lang="en">
+
<html>
−
  <head>
+
<head>
−
    <meta charset="utf-8">
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
−
    <meta name="description" content="Test wiki template Team:Tec-Monterrey">
+
<!--bootstrap core css-->
−
    <meta name="author" content="Esteban de la Peña">
+
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;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 Core CSS -->
+
     <style>
−
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">   
+
/****************************************** MathJax *******************************************************/
−
 
+
.MathJax_Display {
−
<script>
+
  text-align: left !important;
−
$(document).ready(function() {
+
}
−
$("#HQ_page").attr('id','');
+
/**************************************** Clear the default wiki settings *********************************/
−
(function($) {
+
    #home_logo, #sideMenu {
−
  /*"use strict"; // Start of use strict*/
+
        display:none;
−
 
+
    }
−
     //Sidebar menu animations
+
    #sideMenu, #top_title, .patrollink  {
−
     $('li.sidebar-nav-subitem').addClass('hide');
+
        display:none;
−
     $('#menuProject').hover(
+
    }
−
         function(){
+
    #content, #HQ_page {
−
            $('#subProject').stop().slideDown(600);
+
        width: 100%;
−
         }, function(){
+
        padding: 0;
−
            $('#subProject').stop().slideUp(800);
+
        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;
−
    $('#menuPeople').hover(
+
            -webkit-clip-path: inset(0px);
−
        function(){
+
             clip-path: inset(0px);
−
             $('#subPeople').stop().slideDown(600);
+
−
        }, function(){
+
−
             $('#subPeople').stop().slideUp(800);
+
 
         }
 
         }
−
    );
+
        .portfolio-item .caption .caption-content {
−
   
+
             transition: opacity 0.25s;
−
    $('#menuParts').hover(
+
            margin-left: 5rem;
−
        function(){
+
             margin-right: 5rem;
−
             $('#subParts').stop().slideDown(600);
+
            margin-bottom: 5rem;
−
        }, function(){
+
−
             $('#subParts').stop().slideUp(800);
+
 
         }
 
         }
−
    );
+
        .portfolio-item img {
−
   
+
             -webkit-transition: -webkit-clip-path 0.25s ease-out;
−
    $('#menuHP').hover(
+
            -webkit-clip-path: inset(-1px);
−
        function(){
+
             clip-path: inset(-1px);
−
             $('#subHP').stop().slideDown(600);
+
−
        }, function(){
+
−
             $('#subHP').stop().slideUp(800);
+
 
         }
 
         }
−
    );
+
        .portfolio-item:hover img {
−
   
+
             -webkit-clip-path: inset(2rem);
−
    $('#menuModeling').hover(
+
             clip-path: inset(2rem);
−
        function(){
+
−
             $('#subModeling').stop().slideDown(600);
+
−
        }, function(){
+
−
             $('#subModeling').stop().slideUp(800);
+
 
         }
 
         }
−
     );
+
        .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*****************************************************/
 
      
 
      
−
     $('#btnKnowTeam').click(function(){
+
     @font-face{
−
         $('#project').toggleClass('active');
+
        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');
−
  // Closes the sidebar menu
+
    }
−
    $(".menu-toggle").click(function(e) {
+
    @font-face{
−
    e.preventDefault();
+
         font-family: "Montserrat";
−
     $("#sidebar-wrapper").toggleClass("active");
+
        src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
−
     $('div.brand-hider').toggleClass("active");
+
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
−
     $(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
+
     }
−
     $(this).toggleClass("active");
+
     @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;
 +
    }
  
−
  // Smooth scrolling using jQuery easing
+
/**************************************************************** FOOTER ****************************************/
−
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
+
    .footer {
−
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+
        padding-top: 1rem;
−
      var target = $(this.hash);
+
        padding-bottom: 1rem;
−
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+
        background: #404040;
−
      if (target.length) {
+
    }
−
         $('html, body').animate({
+
    .footer p{
−
          scrollTop: target.offset().top
+
        font-family: "DosisRegular", sans-serif !important;
−
         }, 1000, "easeInOutExpo");
+
        font-size: 3vh;
−
         return false;
+
        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%;
 
     }
 
     }
−
  });
 
  
−
  // Closes responsive menu when a scroll trigger link is clicked
+
/***********************************************************************************************************************/
−
  $('#sidebar-wrapper .js-scroll-trigger').click(function() {
+
/************************************************* CONTENIDO GENERAL DE LA PAGINA **************************************/
−
    $("#sidebar-wrapper").removeClass("active");
+
/***********************************************************************************************************************/
−
    $(".menu-toggle").removeClass("active");
+
−
    $("div.brand-hider").removeClass("active");
+
−
    $(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
+
−
  });
+
  
−
  // Scroll to top button appear
+
.articulo {
−
  $(document).scroll(function() {
+
  font-size: 1.7vw;
−
    var scrollDistance = $(this).scrollTop();
+
  background: url(https://static.igem.org/mediawiki/2018/c/c2/T--Tec-Monterrey--Background_Trail.jpg);
−
    if (scrollDistance > 100) {
+
   background-size: contain;
−
      $('.scroll-to-top').fadeIn();
+
  background-repeat-y: repeat;
−
    } else {
+
  background-repeat-x: no-repeat;
−
      $('.scroll-to-top').fadeOut();
+
  text-align: justify;
−
    }
+
  margin-top: 3%;
−
   });
+
−
   
+
−
    $(window).on("load", function() {
+
−
        $('body').addClass('loaded');
+
−
    });
+
−
   
+
−
})(jQuery); // End of use strict
+
−
});
+
−
</script>
+
−
<style>
+
−
/* Clear the default wiki settings */
+
−
#home_logo, #sideMenu {
+
−
    display:none;
+
 
}
 
}
−
#sideMenu, #top_title, .patrollink  {
+
.seccion-responsiva {
−
    display:none;
+
  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);
 
}
 
}
−
#content {
+
.seccion-responsiva a {
−
    width:100%;
+
  color: #377bbf;
−
    padding:0px;
+
  margin: 0;
−
    margin-top:-20px;
+
  font-size: 1.2em;
−
    margin-left:0px;
+
  padding: 0 !important;
 
}
 
}
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
.resumen > .body-title {
−
    margin-bottom: 0px;
+
  text-align: center;
 
}
 
}
−
#bodyContent h4 {
+
.introduccion > .body-title {
−
    font-weight: bold;
+
  text-align: center;
 
}
 
}
−
body, html {
+
.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%;
 
   width: 100%;
−
  height: 100%;
 
 
}
 
}
−
body {
+
.imagen-derecha > img.foto, .imagen-izquierda > img.foto, .imagen-centrada-reducida > img.foto, .imagen-centrada-completa > img.foto {
−
   font-family:sans-serif;
+
   border-radius: 40px;
 +
  padding-top: 1%;
 +
  padding-bottom: 1%;
 
}
 
}
−
.btn-xl {
+
.contenido-con-imagen-derecha > .imagen-derecha {
−
   padding: 1.25rem 2.5rem;
+
   float: right;
 +
  margin: 10px;
 +
  width: 40%;
 +
  display: inline-block;
 
}
 
}
−
 
+
.contenido-con-imagen-derecha > .texto-izquierda {
−
h1, h2, h3, h4, h5, h6 {
+
   float: left;
−
   font-weight: 700;
+
  width: 51%;
 +
  display: inline-block;
 
}
 
}
−
.text-faded {
+
.contenido-con-imagen-izquierda > .imagen-izquierda {
−
   color: rgba(255, 255, 255, 0.7);
+
   float: left;
 +
  margin: 10px;
 +
  width: 40%;
 +
  display: inline-block;
 
}
 
}
−
.scroll-to-top {
+
.contenido-con-imagen-izquierda > .texto-derecha {
−
   position: fixed;
+
   float: right;
−
   right: 10px;
+
   width: 51%;
−
   bottom: 10px;
+
   display: inline-block;
−
   display: none;
+
}
−
   width: 50px;
+
.imagen-centrada-reducida > img {
−
   height: 50px;
+
   width: 50%;
 +
   margin-left: 25%;
 +
   margin-right: 25%;
 +
}
 +
.imagen-centrada-reducida > .leyenda {
 
   text-align: center;
 
   text-align: center;
−
   color: white;
+
}
−
   background: rgba(52, 58, 64, 0.5);
+
.imagen-centrada-completa > img {
−
   line-height: 45px;
+
   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;
 
}
 
}
  
−
.scroll-to-top:focus, .scroll-to-top:hover {
+
#navbarLogoText {
 +
  display: inline-block;
 +
  font-size: 1vw;
 
   color: white;
 
   color: white;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.3s;
 +
  transition: opacity 0.3s;
 
}
 
}
  
−
.scroll-to-top:hover {
+
#navbarLogo {
−
   background: #343a40;
+
  height: 80%;
 +
  margin-top: 5%;
 +
   margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  display: inline-block;
 
}
 
}
  
−
.scroll-to-top i {
+
#navbarGif {
−
   font-weight: 800;
+
  height: 80%;
 +
  margin-top: 5%;
 +
   margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  display: none;
 
}
 
}
  
−
#myVideo {
+
#navbarGif, #navbarLogoWrapper:hover #navbarLogo {
−
    position:absolute;
+
  display: none;
−
    right: 0;
+
−
    bottom: 0;
+
−
    max-width: 100%;
+
 
}
 
}
  
−
.masthead {
+
#navbarLogo, #navbarLogoWrapper:hover #navbarGif {
−
   min-height: 30rem;
+
  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;
 
   position: relative;
 +
  float: left;
 +
  text-align: center;
 +
  cursor: default;
 +
}
 +
.navbar-linkContainerChild {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 
   width: 100%;
 
   width: 100%;
−
   padding-top: 8rem;
+
   height: 1em;
−
   padding-bottom: 8rem;
+
  margin: auto;
−
    color: rgba(57,187,104,0.7)
+
  font-family: "Norwester", sans-serif;
 +
   font-weight: 700;
 +
  font-size: 1.5vw;
 +
  line-height: 1em;
 +
  border-right: 1px solid white;
 
}
 
}
  
−
.masthead h1 {
+
#linkContainer_PeopleChild {
−
   font-size: 4rem;
+
   border: 0;
−
  margin: 0;
+
−
  padding: 0;
+
 
}
 
}
  
−
@media (min-width: 992px) {
+
.navbar-linkContainer.active {
−
   .masthead {
+
   transform: scale(1.05,1.05);
−
    height: 100vh;
+
  border-radius: 5%;
−
   }
+
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
−
   .masthead h1 {
+
   background-color: #5da565;
−
    font-size: 5.5rem;
+
  -webkit-transition: all 0.3s;
−
   }
+
   transition: all 0.3s;
 +
  z-index: 9;
 
}
 
}
  
−
#project {
+
.activeChild {
−
    -webkit-transition: height 4s;
+
   border: 0;
−
   -moz-transition: height 4s;
+
   z-index: 10;
−
   -ms-transition: height 4s;
+
−
  -o-transition: height 4s;
+
−
    transition: height 4s;
+
−
    height: auto;
+
−
    background-image: url('/img/logoOficialCirculos.png');
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
    background-size: contain;
+
 
}
 
}
  
−
#project.active {
+
.collapsed-menu {
−
     -webkit-transition: height 4s;
+
     top: calc(8vh + 18px);
−
  -moz-transition: height 4s;
+
    position: fixed;
−
  -ms-transition: height 4s;
+
    z-index: 1;
−
  -o-transition: height 4s;
+
     width: 100%;
−
     transition: height 4s;
+
  background-color: aquamarine;
−
    height: 100%;
+
−
    background-image: url('/img/logoOficialCirculos.png');
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
    background-size: contain;
+
 
}
 
}
  
−
/* Side Menu */
+
.container-collapse {
−
#sidebar-wrapper {
+
   padding: 0 10px 30px 10px;
−
   position: fixed;
+
   width: 80%;
−
   z-index: 2;
+
   margin-left: 10%;
−
   right: 0;
+
}
−
  top: 20px;
+
 
−
  width: 250px;
+
.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%;
 
   height: 100%;
−
   -webkit-transition: all 0.4s ease 0s;
+
   width: 20%;
−
  -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(250px);
+
−
  background: #1D809F;
+
−
  border-left: 1px solid rgba(255, 255, 255, 0.1);
+
 
}
 
}
  
−
.sidebar-nav {
+
.navbarItem {
−
   position: absolute;
+
   height: 100%;
−
  top: 0;
+
−
  width: 300px;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  list-style: none;
+
 
}
 
}
  
−
.sub-sidebar-nav {
+
.navbarItemHeader {
−
   width:inherit;
+
   display: inline-block;
−
   list-style-type: none;
+
   position: relative;
−
    margin: 0;
+
  font-family: "Norwester", sans-serif;
−
    padding: 0;
+
  font-weight: 500;
−
   position:static;
+
  font-size: 1.8vw;
 +
  color: black;
 +
  text-decoration: none;
 +
  padding-top: 10px;
 +
   width: auto;
 
}
 
}
  
−
.sidebar-nav li.sidebar-nav-item a {
+
.navbarItemContent {
−
   display: block;
+
   display: inline-block;
 +
  position: relative;
 +
  color: black;
 +
  font-size: 1.5vw;
 +
  line-height: 1.5em;
 
   text-decoration: none;
 
   text-decoration: none;
−
   color: #fff;
+
   width: auto;
−
  padding: 10px;
+
 
}
 
}
  
−
.sidebar-nav-subitem {
+
a.navbarItemHeader::after, a.navbarItemContent::after {
−
    list-style-type: none;
+
  content: "";
−
    list-style: none;
+
  position: absolute;
−
    text-decoration: none;
+
  width: 0;
−
    margin: 0;
+
  height: 2px;
−
    padding: 0;
+
  display:block;
−
    color: black;
+
  margin-top: 5px;
−
    background: black;
+
  right: 0;
−
    padding: 10px;
+
  background-color: #000;
 +
  -webkit-transition: width 0.3s ease-in-out 0s;
 +
  transition: width 0.3s ease-in-out 0s;
 +
  padding: 0;
 +
  margin: 0;
 
}
 
}
  
−
.sidebar-nav li a:hover {
+
a.navbarItemHeader:link, a.navbarItemContent:link  {
 +
  color: black;
 
   text-decoration: none;
 
   text-decoration: none;
−
  color: #000;
 
−
  background: rgba(255, 255, 255, 0.2);
 
 
}
 
}
−
 
+
a.navbarItemHeader:visited, a.navbarItemContent:visited  {
−
.sidebar-nav li a:active,
+
  color: black;
−
.sidebar-nav li a:focus {
+
  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;
 
   text-decoration: none;
 
}
 
}
  
−
.sidebar-nav > .sidebar-brand {
+
a.navbarItemHeader:hover::after, a.navbarItemContent:hover::after  {
−
  font-size: 1.2rem;
+
   width: 100%;
−
  background: rgba(52, 58, 64, 0.1);
+
   left: 0;
−
  height: 80px;
+
  background: #000;
−
  line-height: 50px;
+
−
  padding-top: 15px;
+
−
   padding-bottom: 15px;
+
−
   padding-left: 15px;
+
−
    position:relative;
+
 
}
 
}
  
−
.sidebar-nav > .sidebar-brand a {
+
.clearBoth {
−
  color: #fff;
+
  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;
 
}
 
}
  
−
.sidebar-nav > .sidebar-brand a:hover {
+
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
−
  color: #fff;
+
position:absolute;
−
  background: none;
+
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;
 
}
 
}
  
−
.brand-hider {
+
.slideshow .left-arrow-pane {
−
    width: 298px;
+
left:0;
−
    height: 78px;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    background: black;
+
−
    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 {
+
.slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow {
−
    width: 10px;
+
position:absolute;
−
    right: 10px;
+
top:50%;
−
    -webkit-transition: all 1s ease 0s;
+
left:30%;
−
  -moz-transition: all 1s ease 0s;
+
transform:translate(-50%, -50%);
−
  -ms-transition: all 1s ease 0s;
+
-webkit-transition: all 0.3s;
−
  -o-transition: all 1s ease 0s;
+
    -moz-transition: all 0.3s;
−
  transition: all 1s ease 0s;
+
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    /*z-index:50;*/
 
}
 
}
  
−
#sidebar-wrapper.active{
+
.slideshow .left-arrow-pane .arrow {
−
  right: 250px;
+
right:30%;
−
  width: 300px;
+
left:auto;
−
  -webkit-transition: all 0.4s ease 0s;
+
transform: translate(50%, -50%);
−
  -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 {
+
.slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{
−
  position: fixed;
+
height:5vw;
−
  right: 10px;
+
width:5vw;
−
  top: 30px;
+
transform:rotate(45deg);
−
  width: 60px;
+
border-style: solid;
−
  height: 60px;
+
border-color: rgba(255, 255, 255, .5);
−
  text-align: center;
+
border-width:5px 5px 0 0;
−
  color: #fff;
+
-webkit-transition: all 0.3s;
−
  background: rgba(52, 58, 64, 0.5);
+
    -moz-transition: all 0.3s;
−
  line-height: 50px;
+
    -ms-transition: all 0.3s;
−
  z-index: 999;
+
    -o-transition: all 0.3s;
−
  -webkit-transition: all 0.4s ease 0s;
+
    transition: all 0.3s;
−
  -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 {
+
.slideshow .left-arrow-pane .arrow div{
−
  color: #fff;
+
transform:rotate(-135deg);
 
}
 
}
  
−
.menu-toggle:hover {
+
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
−
  background: #343a40;
+
background:rgba(0,0,0,.25);
 
}
 
}
  
−
.service-icon {
+
.slideshow .right-arrow-pane:hover .arrow {
−
  background-color: #fff;
+
left:35%;
−
  color: #1D809F;
+
−
  height: 7rem;
+
−
  width: 7rem;
+
−
  display: block;
+
−
  line-height: 7.5rem;
+
−
  font-size: 2.25rem;
+
−
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
 
}
 
}
  
−
.callout {
+
.slideshow .left-arrow-pane:hover .arrow {
−
  padding: 15rem 0;
+
right:35%;
−
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
+
−
  background-position: center center;
+
−
  background-repeat: no-repeat;
+
−
  background-size: cover;
+
 
}
 
}
  
−
.callout h2 {
+
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
−
  font-size: 3.5rem;
+
border-color:rgb(255,255,255);
−
  font-weight: 700;
+
−
  display: block;
+
−
  max-width: 30rem;
+
 
}
 
}
  
−
.portfolio-item {
+
.slideshow .bubbles {
−
  display: block;
+
position:absolute;
−
  position: relative;
+
width:100%;
−
  overflow: hidden;
+
height:10%;
−
  max-width: 530px;
+
bottom:0;
−
  margin: auto auto 1rem;
+
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
 +
display:flex;
 +
justify-content: center;
 +
z-index:50;
 
}
 
}
  
−
.portfolio-item .caption {
+
.slideshow .bubbles div {
−
  display: flex;
+
height:3vw;
−
  height: 100%;
+
width:3vw;
−
  width: 100%;
+
border-radius:5px;
−
  background-color: rgba(33, 37, 41, 0.2);
+
border:solid white 3px;
−
  position: absolute;
+
margin:0 20px 0 0;
−
  top: 0;
+
cursor:pointer;
−
  bottom: 0;
+
−
  z-index: 1;
+
 
}
 
}
  
−
.portfolio-item .caption .caption-content {
+
.slideshow .bubbles div:last-child {
−
  color: #fff;
+
margin-right: 0;
−
  margin: auto 2rem 2rem;
+
 
}
 
}
  
−
.portfolio-item .caption .caption-content h2 {
+
.slideshow .bubbles div:hover {
−
  font-size: 0.8rem;
+
background-color: white;
−
  text-transform: uppercase;
+
 
}
 
}
  
−
.portfolio-item .caption .caption-content p {
+
.slideshow .bubbles div.active {
−
  font-weight: 300;
+
background-color:white;
−
  font-size: 1.2rem;
+
 
}
 
}
  
−
@media (min-width: 992px) {
+
.slideshow .pauseBtn {
−
  .portfolio-item {
+
position:absolute;
−
    max-width: none;
+
height:5vw;
−
    margin: 0;
+
width:5vw;
−
  }
+
bottom:1%;
−
  .portfolio-item .caption {
+
right:12%;
−
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
+
background:rgba(0,0,0,.7);
−
    -webkit-clip-path: inset(0px);
+
border-radius:10px;
−
    clip-path: inset(0px);
+
z-index:60;
−
  }
+
−
  .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);
+
−
  }
+
 
}
 
}
  
−
footer.footer {
+
.slideshow .pauseBtn .bars {
−
  padding-top: 5rem;
+
visibility: hidden;
−
  padding-bottom: 5rem;
+
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:3vw;
 +
height:3vw;
 
}
 
}
  
−
footer.footer .social-link {
+
.slideshow .pauseBtn .bars > div{
−
  display: block;
+
float:right;
−
  height: 4rem;
+
width:40%;
−
  width: 4rem;
+
height:100%;
−
  line-height: 4.3rem;
+
background:rgba(255,255,255,.8);
−
  font-size: 1.5rem;
+
−
  background-color: #1D809F;
+
−
  transition: background-color 0.15s ease-in-out;
+
−
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
 
}
 
}
  
−
footer.footer .social-link:hover {
+
.slideshow .pauseBtn .bars > div:first-child {
−
  background-color: #155d74;
+
float:left;
−
  text-decoration: none;
+
 
}
 
}
  
−
a {
+
.slideshow .pauseBtn:hover {
−
  color: #1D809F;
+
background: rgba(34,34,34,1);
 +
cursor: pointer;
 
}
 
}
  
−
a:hover, a:focus, a:active {
+
.slideshow .pauseBtn:hover .bars > div {
−
  color: #155d74;
+
background: rgba(255,255,255,1);
 
}
 
}
  
−
.btn-primary {
+
.slideshow .pauseBtn .tri {
−
  background-color: #1D809F !important;
+
visibility: hidden;
−
  border-color: #1D809F !important;
+
position: absolute;
−
  color: #fff !important;
+
top:50%;
 +
left:50%;
 +
transform: translate(-50%, -50%);
 
}
 
}
  
−
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+
.slideshow .pauseBtn .tri > div {
−
  background-color: #155d74 !important;
+
width: 0;
−
  border-color: #155d74 !important;
+
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;
 
}
 
}
  
−
.btn-secondary {
+
.slideshow .pauseBtn:hover .tri > div{
−
  background-color: #ecb807 !important;
+
border-left-color:rgba(255,255,255,1);
−
  border-color: #ecb807 !important;
+
−
  color: #fff !important;
+
 
}
 
}
  
−
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
+
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
−
  background-color: #ba9106 !important;
+
visibility: visible;
−
  border-color: #ba9106 !important;
+
 
}
 
}
  
−
.btn-dark {
+
.slideshow .content {
−
  color: #fff !important;
+
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
        overflow: hidden;
 
}
 
}
  
−
.btn {
+
.slideshow .content .slide {
−
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+
visibility:hidden;
−
   font-weight: 700;
+
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%;
 
}
 
}
  
−
.bg-primary {
+
.slideshow .content .slide:first-child {
−
  background-color: #1D809F !important;
+
visibility:visible;
 +
left:0;
 +
z-index: 1;
 +
        width: 100%;
 
}
 
}
  
−
.text-primary {
+
.slideshow .content .slide > img:first-child {
−
  color: #1D809F !important;
+
height:auto;
 +
        width: 100%;
 +
        overflow: hidden;
 
}
 
}
  
−
.text-secondary {
+
.slideshow .content .slide.active {
−
  color: #ecb807 !important;
+
left:0 !important;
 
}
 
}
  
−
.hide {
+
.slideshow .content .slide.left {
−
     display: none;
+
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**************************************************/
 
#loader-wrapper {
 
#loader-wrapper {
 
     position: fixed;
 
     position: fixed;
Line 554: Line 1,101:
 
#loader {
 
#loader {
 
     position: relative;
 
     position: relative;
−
     left: 50%;
+
     width: 100%;
−
     top: 50%;
+
     height: 100%;
−
    width: 250px;
+
−
    height: 250px;
+
−
    margin: -125px 0 0 -125px;
+
 
     z-index: 1001;
 
     z-index: 1001;
 +
}
 +
 +
#loaderMessage {
 +
    position: absolute;
 +
    width: 50%;
 +
    height: 10%;
 +
    margin: 85% 25% 5% 25%;
 +
    font-size: 10%;
 
}
 
}
  
 
#videoLoader {
 
#videoLoader {
 
     position:absolute;
 
     position:absolute;
−
     right: 0;
+
     width: 50%;
−
     bottom: 0;
+
     margin: 15% 25%;
−
    max-width: 100%;
+
 
}
 
}
  
Line 573: Line 1,124:
 
         width: 100%;
 
         width: 100%;
 
         height: 51%;
 
         height: 51%;
−
         background: rgb(216,228,222);
+
         background: rgb(214,230,223);
 
         z-index: 1000;
 
         z-index: 1000;
 
         -webkit-transform: translateY(0);
 
         -webkit-transform: translateY(0);
Line 615: Line 1,166:
 
         display: none;
 
         display: none;
 
     }
 
     }
−
</style>
+
 
−
   </head>
+
 
−
<body id="page-top">
+
/**********************************************************************************************************************/
−
<!-- Navigation Bar-->
+
/********************************************************* 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="#">
−
       <img class="img-fluid" src="img/portfolio-4.jpg" alt="Menu">
+
       <i class="fa fa-bars" style="font-size: 20px;"></i>
 
     </a>
 
     </a>
 
     <nav id="sidebar-wrapper">
 
     <nav id="sidebar-wrapper">
Line 626: Line 1,565:
 
         <li class="sidebar-brand">
 
         <li class="sidebar-brand">
 
           <div class="brand-hider"></div>
 
           <div class="brand-hider"></div>
−
           <a class="js-scroll-trigger" href="#page-top">Tec de Monterrey</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 class="js-scroll-trigger" href="#page-top">Project</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 class="js-scroll-trigger" href="#page-top">Overview</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Description">Description</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Description</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Design">Design</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Background</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab">Interlab</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Design</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook">Notebook</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Results</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety">Safety</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Safety</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 class="js-scroll-trigger" href="#services">Parts</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 class="js-scroll-trigger" href="#page-top">Overview</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts">Parts</a>
−
                    <a class="js-scroll-trigger" href="#page-top">Basic parts</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve">Improved parts</a>
−
                    <a class="js-scroll-trigger" href="#page-top">Composite Parts</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/PartsList">Parts list</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Parts Collection</a>
+
−
                    <a class="js-scroll-trigger" href="#page-top">Improved parts</a>
+
−
                     <a class="js-scroll-trigger" href="#page-top">Parts list</a>
+
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </li>
 
         </li>
 
         <li class="sidebar-nav-item" id="menuPeople">
 
         <li class="sidebar-nav-item" id="menuPeople">
−
           <a class="js-scroll-trigger" href="#about">People</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 class="js-scroll-trigger" href="#page-top">Overview</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Team">Team</a>
−
                    <a class="js-scroll-trigger" href="#page-top">Team</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations">Collaborations</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Attributions</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions">Attribution</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Collaborations</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Sponsors">Sponsors</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Sponsors</a>
+
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </li>
 
         </li>
 
         <li class="sidebar-nav-item" id="menuHP">
 
         <li class="sidebar-nav-item" id="menuHP">
−
           <a class="js-scroll-trigger" href="#portfolio">Human Practices</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 class="js-scroll-trigger" href="#page-top">Overview</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices">Human Practices</a>
−
                    <a class="js-scroll-trigger" href="#page-top">Silver HP</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement">Public & Educational Engagement</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Integrated HP</a>
+
−
                    <a class="js-scroll-trigger" href="#page-top">Education</a>
+
−
                    <a class="js-scroll-trigger" href="#page-top">Public Engagement</a>
+
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </li>
 
         </li>
 
         <li class="sidebar-nav-item" id="menuModeling">
 
         <li class="sidebar-nav-item" id="menuModeling">
−
           <a class="js-scroll-trigger" href="#contact">Modeling</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 class="js-scroll-trigger" href="#page-top">Overview</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Overview</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Interlab</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Model#">D.E. System</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Software Tool</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Quasi-Steady State</a>
−
                     <a class="js-scroll-trigger" href="#page-top">Lac Operon</a>
+
                     <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Protein Production</a>
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
Line 691: 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>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:57, 18 October 2018