Template:TecCEM/Style

@font-face { 

   font-family: "TodaySHOP";
   src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot");
   src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/a/aa/T--TecCEM--TodaySHOP-Regular.woff")
           format("woff");
   font-weight: normal;
   font-style: normal;

}

@font-face { 

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot");
   src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/2/23/T--TecCEM--CaeciliaLTStd-Roman.woff")
           format("woff");
   font-weight: normal;
   font-style: normal;

}

@font-face { 

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot");
   src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/0/0f/T--TecCEM--CaeciliaLTStd-Italic.woff")
           format("woff");
   font-weight: normal;
   font-style: italic;

}

@font-face { 

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot");
   src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/6/6f/T--TecCEM--CaeciliaLTStd-Bold.woff")
           format("woff");
   font-weight: bold;
   font-style: normal;

}

  1. HQ_page {
   position: absolute;
   top: 4px;
   width: 100%;

}

  1. HQ_page,
  2. HQ_page p,
  3. HQ_page strong,
  4. HQ_page a,
  5. HQ_page li {
   font-family: "Caecilia LT Std", sans-serif;

} body { 

   font-size: 100%;

}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 { 

   font-size-adjust: 0.5;

}

  1. HQ_page {
   height: 100%;

}

  1. HQ_page p {
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: 1px;
   color: #333333 !important;

}

  1. HQ_page .lead {
   font-size: 1.25rem;
   font-weight: 300;
   color: #555555;

} @media (min-width: 43.75em) { 

   #HQ_page {
       font-size: 1rem;
       line-height: 1.375;
   }

}

h1 { 

   font-size: 2rem;
   line-height: 1.25;

}

@media (min-width: 43.75em) { 

   h1 {
       font-size: 2.5rem;
       line-height: 1.125;
   }

}

@media (min-width: 56.25em) { 

   h1 {
       font-size: 3rem;
       line-height: 1.05;
   }

}

h2 { 

   font-size: 1.625rem;
   line-height: 1.15384615;

}

@media (min-width: 43.75em) { 

   h2 {
       font-size: 2rem;
       line-height: 1.25;
   }

}

@media (min-width: 56.25em) { 

   h2 {
       font-size: 2.25rem;
       line-height: 1.25;
   }

}

h3 { 

   font-size: 1.375rem;
   line-height: 1.13636364;

}

@media (min-width: 43.75em) { 

   h3 {
       font-size: 1.5rem;
       line-height: 1.25;
   }

}

@media (min-width: 56.25em) { 

   h3 {
       font-size: 1.75rem;
       line-height: 1.25;
   }

}

h4 { 

   font-size: 1.125rem;
   line-height: 1.11111111;

}

@media (min-width: 43.75em) { 

   h4 {
       line-height: 1.22222222;
   }

}

blockquote { 

   font-size: 1.25rem;
   line-height: 1.25;

}

@media (min-width: 43.75em) { 

   blockquote {
       font-size: 1.5rem;
       line-height: 1.45833333;
   }

}

  1. HQ_page h1,
  2. HQ_page h2,
  3. HQ_page h3,
  4. HQ_page h4,
  5. HQ_page h5 {
   font-family: "TodaySHOP", sans-serif;
   letter-spacing: 3px;
   font-weight: normal;
   padding: 1px;

}

  1. mw-content-text {
   min-height: 100vh;

}

  1. content {
   width: 100% !important;
   height: 100% !important;
   margin-left: 0 !important;
   padding-left: 0 !important;

} .text-project > *, .text-project { 

   color: #ff1558 !important;

} .text-team > *, .text-team { 

   color: #17cc46 !important;

}

.text-safety > *, .text-safety { 

   color: #ef6fca !important;

}

.text-notebook > *, .text-notebook { 

   color: #0000ff !important;

}

.text-awards > *, .text-awards { 

   color: #ffdb27 !important;

}

.text-parts > *, .text-parts { 

   color: #ff9d33 !important;

}

.text-human-practices > *, .text-human-practices { 

   color: #0aa38c !important;

} div#gif-title h1 { 

   -webkit-text-stroke-width: 0;
   font-size: 3em;
   mix-blend-mode: multiply;

}

  1. parallax {
   position: fixed;
   top: 0;
   width: 100vw !important;
   height: 100vh !important;
   background: url("T--TecCEM--bgFire.jpg")
       no-repeat center center;
   opacity: 0.08;
   background-size: cover;
   z-index: -1;

}

  1. main-container {
   min-height: 100vh !important;
   position: relative;

}

  1. main-container p,
  2. main-container strong {
   color: white !important;

}

  1. main-container #abstract {
   position: absolute;
   left: 0;
   width: 100%;
   right: 0;
   margin: 0 auto;
   bottom: 15%;

} .first-container { 

   margin-top: 1rem;

} div#gif-title { 

   position: relative;
   height: 210px;
   max-width: 100% !important;
   overflow: hidden;

}

div#gif-title * { 

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

} div#gif-title img { 

   min-width: 100%;

}

  1. content h1 {
   color: rgba(255, 255, 255, 0);
   -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: black;

}

  1. content strong {
   color: black;

}

  1. home_logo,
  2. sideMenu,
  3. top_title,

.patrollink { 

   display: none;

}

  1. content {
   margin-left: 0px;
   margin-top: -20px;
   padding: 0px;
   width: 100%;

}

body { 

   background-color: white;

}

.svgClass { 

   display: block;

} .bottom { 

   mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 40px;
   width: 40px;
   margin: auto;

} .open { 

   mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 20px;
   width: 20px;
   margin: auto;

} .closed { 

   mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 20px;
   width: 20px;
   margin: auto;

} .dropdown-menu.show { 

   background-color: rgba(250, 250, 250, 0.9);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   left: 20%;

}

a.dropdown-item, a.nav-link { 

   letter-spacing: 2px;

}

a.dropdown-item:active { 

   background-color: #f5e1e1;

}

div#top_menu_14 { 

   box-sizing: content-box;

}

  1. navbarContainer {
   background-color: rgba(250, 250, 250, 0.9);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 0px 0px 5px 5px;

}

  1. navbarContainer a {
   font-family: "TodaySHOP", serif;

}

  1. navbarContainer a:hover,#navbarContainer ul .dropdown-menu a:visited {
   color: #333333 !important;

} .navbar { 

   top: 18px;

}

@media only screen and (max-width: 812px) { 

   .navbar {
       top: 20px;
   }
   #navbarTecCEM .w-75.nav-fill {
       width: 100% !important;
   }
   #navbarContainer {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       margin: 2px 2px 2px 2px;
       border-radius: 5px;
   }

}

  1. HQ_page .sidebar-index * {
   font-family: "TodaySHOP", "HelveticaNeue-Light", "Helvetica Neue Light",
       "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

  1. HQ_page .sidebar-index .sidebar-header {
   text-align: center;

}

  1. HQ_page .sidebar-index > a {
   font-size: 1.3rem;
   font-weight: 600;
   letter-spacing: 2px;
   cursor: pointer;

}

  1. HQ_page .sidebar-index ul li {
   display: table;
   margin-bottom: 5px;
   cursor: pointer;

}

  1. HQ_page .sidebar-index ul li a {
   font-size: 1.1rem;
   cursor: pointer;

}

  1. HQ_page .sidebar-index ul li ul li a {
   font-size: 1rem;
   cursor: pointer;

}

  1. HQ_page .sidebar-index ul li ul li ul li a {
   font-size: 0.9rem;
   cursor: pointer;

} .wrapper { 

   display: flex;
   align-items: stretch;
   width: 100%;

}

.sidebar-index { 

   width: 20%;
   height: calc(100vh - 70px);
   position: sticky;
   align-self: flex-start;
   top: 70px;
   z-index: 900;
   margin: 0;
   padding: 1rem;

}

.sidebar-index a:after { 

   content: "";
   width: 0;
   height: 1px;
   display: block;
   background-color: #333;
   -webkit-transition: width 0.3s ease-in-out 0s;
   transition: width 0.3s ease-in-out 0s;
   padding: 0;
   margin: 0;

}

.sidebar-index a:hover:after { 

   width: 100%;

}

.wrapper .content { 

   width: 80%;
   padding: 2% 5% 2% 2%;

}

@media only screen and (max-width: 812px) { 

   .wrapper .content {
       width: 100%;
       padding: 2% 5%;
   }

}

.sidebar-index .dropdown { 

   position: absolute;
   left: 0px;

}

.sidebar-index a { 

   color: inherit;

}

.sidebar-index a:hover { 

   text-decoration: none;
   color: black !important;

}

.sidebar-index a:hover p { 

   color: black !important;

}

.sidebar-index a:visited, .sidebar-index a:focus { 

   color: inherit;
   text-decoration: none;

} .sidebar-index span.open, .sidebar-index span.closed { 

   background-color: black;
   vertical-align: middle;

} .navbar-expand-lg .navbar-nav .dropdown-menu { 

   width: 100%;
   top: 56px;
   left: 0px;

}