Difference between revisions of "Template:UCL/Style"

 
(36 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
 
@import url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
−
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400');
 
−
 
 
/*Futura*/
 
/*Futura*/
 
@font-face {
 
@font-face {
Line 13: Line 11:
 
     src: url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
 
     src: url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
 
     src: local('Futura'), local('Futura'),
 
     src: local('Futura'), local('Futura'),
−
    url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot") format("embedded-opentype"),
+
        url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot") format("embedded-opentype"),
−
    url("https://static.igem.org/mediawiki/2018/c/ce/T--UCL--futuramed.woff") format("woff"),
+
        url("https://static.igem.org/mediawiki/2018/c/ce/T--UCL--futuramed.woff") format("woff"),
−
    url("https://static.igem.org/mediawiki/2018/e/e6/T--UCL--futuramed.ttf") format("truetype"),
+
        url("https://static.igem.org/mediawiki/2018/e/e6/T--UCL--futuramed.ttf") format("truetype"),
 +
        url('https://static.igem.org/mediawiki/2018/8/84/T--UCL--Futura.otf');
 
   }
 
   }
  
Line 25: Line 24:
 
     src: url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
 
     src: url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
 
     src: local('Quicksand Regular'), local('Quicksand-Regular'),
 
     src: local('Quicksand Regular'), local('Quicksand-Regular'),
−
            url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot') format('embedded-opentype'),
+
        url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot') format('embedded-opentype'),
−
            url('https://static.igem.org/mediawiki/2018/a/aa/T--UCL--quicksand.ttf') format('truetype'),
+
        url('https://static.igem.org/mediawiki/2018/a/aa/T--UCL--quicksand.ttf') format('truetype'),
−
            url('https://static.igem.org/mediawiki/2018/7/74/T--UCL--QuicksandReg1.woff') format('woff');
+
        url('https://static.igem.org/mediawiki/2018/7/74/T--UCL--QuicksandReg1.woff') format('woff'),
 +
        url('https://static.igem.org/mediawiki/2018/0/06/T--UCL--QuicksandLight.otf');
 +
}
 +
 
 +
/* Lato Thin */
 +
@font-face {
 +
    font-family: 'Lato';
 +
    font-style: normal;
 +
    font-weight: 300;
 +
    src: url('https://static.igem.org/mediawiki/2018/0/05/T--UCL--LatoThin.eot');
 +
    src: local('Lato Thin'), local('Lato-Thin'),
 +
        url('https://static.igem.org/mediawiki/2018/0/05/T--UCL--LatoThin.eot') format('embedded-opentype'),
 +
        url('https://static.igem.org/mediawiki/2018/6/60/T--UCL--LatoThin1.ttf') format('truetype'),
 +
        url('https://static.igem.org/mediawiki/2018/4/4a/T--UCL--LatoThin2.ttf') format('woff'),
 
}
 
}
  
Line 37: Line 49:
 
#globalWrapper {
 
#globalWrapper {
 
     font-size: inherit;
 
     font-size: inherit;
 +
    margin-bottom: 0 !important;
 
     padding-bottom: 0 !important;
 
     padding-bottom: 0 !important;
 
}
 
}
  
 
#mw-content-text {
 
#mw-content-text {
−
     padding-top: 0 !important;
+
     margin-top: 0 !important;
 
}
 
}
  
Line 58: Line 71:
 
     height: 0px !important;
 
     height: 0px !important;
 
}
 
}
−
/* ====NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR==== */
+
 
 +
#bodyContent {
 +
    margin-top: 0 !important;
 +
}
 +
 
 +
 
 
body
 
body
 
{
 
{
−
   margin: 0;
+
   margin:0;
 
   padding:0;
 
   padding:0;
 
}
 
}
−
.menu_igem
+
/* ====NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR==== */
 +
.navbarzindex
 
{
 
{
−
   float: right;
+
   z-index: 99999999;
 +
  font-family: "Quicksand";
 +
  position: fixed;
 +
  top:0;
 +
  left:0;
 +
  width:100%;
 
}
 
}
−
.navbar_igem {
+
.img-logo_igem
−
    overflow: hidden;
+
{
−
    background-color: rgba(255,255,255,1);
+
  transition:0.3s;
−
    font-family: 'Quicksand', sans-serif;
+
  border-radius: 100%;
 +
  z-index: 10;
 +
  -webkit-transform: translateX(3vh);
 +
  transform: translateX(3vh);
 +
  position: fixed;
 +
  width:11vh;
 +
  height: 11vh;
 +
  margin-top:4vh;
 
}
 
}
  
−
.navbar_igem a {
+
.navbarzindex .topnav_igem {
−
    float: left;
+
  overflow: hidden;
−
    color: white;
+
  background-color: rgba(255,255,255,1);
−
    text-align: center;
+
  margin-top:16px;
−
    text-decoration: none;
+
  transition:0.3s;
−
    font-family: 'Quicksand', sans-serif;
+
}
 +
.navbarzindex.black .topnav_igem
 +
{
 +
  background-color: rgba(0, 0, 0, 0.75);
 +
  border-bottom: solid 1px rgba(255, 255, 255,1);
 +
  border-bottom-style: solid;
 +
}
 +
.topnav_igem a {
 +
  display: block;
 +
  color: rgba(242, 77, 25,1);
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
  font-size: 17px;
 +
}
 +
 
 +
.active_igem {
 +
  background-color: #4CAF50;
 +
  color: white;
 +
}
 +
 
 +
.topnav_igem .icon_igem {
 +
  display: none;
 
}
 
}
  
 
.dropdown_igem {
 
.dropdown_igem {
−
     float: left;
+
     float:left;
 
     overflow: hidden;
 
     overflow: hidden;
−
    font-family: 'Quicksand', sans-serif;
 
 
}
 
}
  
 
.dropdown_igem .dropbtn_igem {
 
.dropdown_igem .dropbtn_igem {
−
     font-size: 16px;
+
     font-size: 17px;
 
     border: none;
 
     border: none;
 
     outline: none;
 
     outline: none;
 
     color: rgba(242, 77, 25,1);
 
     color: rgba(242, 77, 25,1);
−
     padding: 20px 16px;
+
     padding:0;
 
     background-color: inherit;
 
     background-color: inherit;
 
     font-family: inherit;
 
     font-family: inherit;
 
     margin: 0;
 
     margin: 0;
−
     width: 160px;
+
     text-align:center;
−
     text-decoration: none;
+
     width:160px;
−
     transition:0.3s;
+
     height:60px;
 
}
 
}
  
−
.navbar_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
+
.navbarzindex.black .dropdown_igem .dropbtn_igem {
−
    background-color: rgba(242, 77, 25,1);
+
  color:rgba(255, 255, 255, 1);
−
    color:white;
+
 
}
 
}
  
 
.dropdown-content_igem {
 
.dropdown-content_igem {
−
    font-size: 16px;
+
 
−
    display: none;
+
 
     position: absolute;
 
     position: absolute;
−
    background-color: #f9f9f9;
 
−
    width: 160px;
 
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
 
     z-index: 1;
 
     z-index: 1;
−
     text-decoration: none;
+
     margin-left:auto;
−
     position: fixed;
+
     margin-right:auto;
 +
    display:none;
 
}
 
}
−
/* This is the nav ul li a */
+
 
 
.dropdown-content_igem a {
 
.dropdown-content_igem a {
−
     float: none;
+
     text-align:center;
−
     color: rgba(242, 77, 25,1);
+
     color:rgba(242, 77, 25,1);
 +
    background-color:rgba(255,255,255,1);
 
     padding: 12px 16px;
 
     padding: 12px 16px;
 
     text-decoration: none;
 
     text-decoration: none;
 
     display: block;
 
     display: block;
−
    text-align: center;
 
−
    transition:0.5s;
 
−
 
 
}
 
}
−
.dropdown-content_igem a:before
+
.navbarzindex.black .dropdown-content_igem a {
−
{
+
    text-align:center;
−
  content:'';
+
    color:rgba(255, 255, 255, 1);
−
  position:absolute;
+
    background-color:rgba(0, 0, 0, 0.75);
−
  top:0;
+
    padding: 12px 16px;
−
  left:0;
+
    text-decoration: none;
−
  width:100%;
+
    display: block;
−
  height:100%;
+
−
  transform-origin:top;
+
−
  transform:scaleY(0);
+
−
  transition: 0.5s;
+
−
  color:#000;
+
−
  z-index: -1;
+
 
}
 
}
  
 +
.showy {display: block;}
 +
@media screen and (max-width: 1110px) {
 +
  .topnav_igem a:not(:first-child), .dropdown_igem .dropbtn_igem {
 +
    display: none;
 +
  }
 +
  .topnav_igem a.icon_igem {
 +
 +
    display: block;
 +
  }
 +
.topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
 +
  background-color: rgba(242, 77, 25,1);
 +
  color: white;
 +
}
 +
.navbarzindex.black .topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
 +
  background-color: rgba(242, 77, 25,1);
 +
  color: white;
 +
}
 
.dropdown-content_igem a:hover {
 
.dropdown-content_igem a:hover {
 
     background-color: rgba(242, 77, 25,1);
 
     background-color: rgba(242, 77, 25,1);
−
     text-decoration: none;
+
     color: rgba(255,255,255,1);
 +
}
 +
/*  */
 +
.topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
 +
  background-color: rgba(242, 77, 25,1);
 +
  transition: 0.3s;
 +
  color:white;
 +
}
 +
.navbarzindex.black .dropdown_igem:hover .dropbtn_igem{
 +
  background-color: white;
 +
  color:black;
 +
}
 +
.dropdown-content_igem a:hover {
 +
    background-color: rgba(242, 77, 25,1);
 +
    color: rgba(255,255,255,1);
 +
    transition: 0.3s;
 
}
 
}
  
−
.dropdown-content_igem a:hover:before
+
.navbarzindex.black .dropdown-content_igem a:hover {
 +
  background-color: rgba(255, 255, 255, 1);
 +
  color: rgba(0,0,0,1);
 +
}
 +
/*  */
 +
.navbarzindex.black .icon_igem{
 +
  color:white;
 +
}
 +
.navbarzindex.black .topnav_igem a:hover{
 +
  background-color: white;
 +
  color:black;
 +
}
 +
.dropdown-content_igem
 
{
 
{
−
  transform-origin: top;
+
width:100vw;
−
  transform: scaleY(1);
+
 
}
 
}
−
.dropdown_igem:hover .dropdown-content_igem {
+
  .topnav.responsive_igem {position: relative;}
 +
  .topnav.responsive_igem .icon_igem {
 +
 
 +
  }
 +
  .dropdown_igem .dropbtn_igem{
 +
  font-size:22px;
 +
  font-weight:bold;
 +
  }
 +
  .topnav_igem.responsive a {
 +
    float: none;
 
     display: block;
 
     display: block;
−
}
+
    text-align: center;
  
−
.img-logo
+
  }
 +
  .topnav_igem.responsive .dropdown_igem {float: none;}
 +
  .topnav_igem.responsive .dropdown-content_igem {position: relative;}
 +
  .topnav_igem.responsive .dropdown_igem .dropbtn_igem {
 +
    display: block;
 +
    width: 100%;
 +
    text-align: center;
 +
 
 +
  }
 +
.floatright_igem{
 +
float:none !important;
 +
}
 +
.floatleft_igem{
 +
float:left !important;
 +
}
 +
}
 +
@media screen and (min-width: 1111px) {
 +
.floatright_igem{
 +
float:right;
 +
}
 +
.dropdown-content_igem
 
{
 
{
−
  float:left;
+
width:160px;
−
  transition:0.3s;
+
}
−
  box-shadow: 3px 3px 10px #d0513a;
+
.dropdown-content_igem{
−
  border-radius: 100%;
+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
  z-index: 99999;
+
−
  -webkit-transform: translateX(3vh);
+
−
  transform: translateX(3vh);
+
−
  position:fixed;
+
−
  width:9vh;
+
−
  height: 9vh;
+
 
}
 
}
  
−
@media screen and (max-width:700px) {
+
.topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
−
    .particle-bg-intro, .scroll, .section1, .section2, .section3,
+
  background-color: rgba(242, 77, 25,1);
−
    .section4, .section5 {
+
  transition: 0.3s;
−
        width: 100%;
+
  color:white;
−
    }
+
}
 +
.navbarzindex.black .dropdown_igem:hover .dropbtn_igem{
 +
  background-color: white;
 +
  color:black;
 +
}
 +
.dropdown-content_igem a:hover {
 +
    background-color: rgba(242, 77, 25,1);
 +
    color: rgba(255,255,255,1);
 +
    transition: 0.3s;
 
}
 
}
  
−
@media screen and (max-width:700px) {.particle-bg-heading, .acronym, .acronym1, .acronym2,
+
.navbarzindex.black .dropdown-content_igem a:hover {
−
.acronym3, .acronym4, .heading, .heading1, .heading2, .heading3,
+
  background-color: rgba(255, 255, 255, 1);
−
.heading4, {
+
  color: rgba(0,0,0,1);
−
    width: 100%;
+
−
    }
+
 
}
 
}
  
−
/* ====HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING==== */
+
.dropdown_igem:hover > .dropdown-content_igem {
 +
    display:block;
  
 +
}
 +
}
 +
.show_igem
 +
{
 +
display:block;
 +
}
  
 
/* Fixed background/canvas */
 
/* Fixed background/canvas */
 
#particles-js
 
#particles-js
 
{
 
{
−
   height: 100vh;
+
   height: 107vh;
−
  /*
+
−
  background: url('https://static.igem.org/mediawiki/2018/7/7d/T--UCL--SilkStock1.jpg');
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
  */
+
 
   background: black;
 
   background: black;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
Line 212: Line 325:
 
   flex: 0 0 100%;
 
   flex: 0 0 100%;
 
   max-width: 100%;
 
   max-width: 100%;
−
   padding: 1em 1em 5em;
+
   padding: 4em 1em 5em;
−
 
+
 
}
 
}
  
Line 220: Line 332:
 
{
 
{
 
   position: absolute;
 
   position: absolute;
−
   top:15vh;
+
   top:12vh;
 
   left:10vw;
 
   left:10vw;
 
   right:50vw;
 
   right:50vw;
 +
  height: 100vh
 
}
 
}
 
.particle-bg-heading .acronym
 
.particle-bg-heading .acronym
Line 326: Line 439:
 
.particle-bg-intro
 
.particle-bg-intro
 
{
 
{
−
   font-family: "Quicksand";
+
   font-family: "Quicksand", sans-serif;
 
   font-size:1rem;
 
   font-size:1rem;
−
   font-weight: 100;
+
   font-weight: 400;
 
   position: relative;
 
   position: relative;
 
   line-height: 1.75;
 
   line-height: 1.75;
Line 339: Line 452:
 
   white-space: pre-wrap;      /* current browsers */
 
   white-space: pre-wrap;      /* current browsers */
 
   width:40vw;
 
   width:40vw;
 +
  top: 6vh;
 
}
 
}
  
Line 350: Line 464:
 
   animation-direction: alternate-reverse;
 
   animation-direction: alternate-reverse;
 
   position: absolute;
 
   position: absolute;
−
  top:90vh;
 
−
  left:45vw;
 
 
   text-decoration: none;
 
   text-decoration: none;
 
   z-index:2;
 
   z-index:2;
−
   width:5vw;
+
   width:1vw;
 +
  display: -webkit-flex; /* Safari */
 +
  -webkit-align-items: center; /* Safari 7.0+ */
 +
  display: block;
 +
  margin-top: 85vh;
 +
  margin-left: 45vw;
 +
 
 
}
 
}
  
Line 360: Line 478:
 
     text-decoration: inherit;
 
     text-decoration: inherit;
 
     color: inherit;
 
     color: inherit;
−
     cursor: auto;
+
     cursor: pointer;
 +
    margin-bottom: 0;
 +
    padding-bottom: 0;
 +
    bottom: 0;
 
}
 
}
  
Line 366: Line 487:
 
     text-decoration: inherit;
 
     text-decoration: inherit;
 
     color: inherit;
 
     color: inherit;
−
     cursor: auto;
+
     cursor: pointer;
 
}
 
}
 +
/* HOMEPAGE___SECTIONS========= HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========*/
 +
 +
.h1_igem_homepage {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 5rem;
 +
    color: rgba(242, 77, 25,1);
 +
    text-align: center;
 +
    line-height: 6rem;
 +
}
 +
 
section.section1
 
section.section1
 
{
 
{
Line 377: Line 509:
 
   width: 80vw;
 
   width: 80vw;
 
   margin:30px auto;
 
   margin:30px auto;
−
   text-align: center;
+
   text-align: center !important;
−
   font-size: 24px;
+
   font-size: 24px !important;
−
   line-height: 30px;
+
   line-height: 30px !important;
−
   font-family: "Josefin Sans";
+
   font-family: "Lato", sans-serif !important;
 
   font-weight: 300;
 
   font-weight: 300;
 
   vertical-align: super;
 
   vertical-align: super;
Line 392: Line 524:
 
   height: 100vh;
 
   height: 100vh;
 
}
 
}
 +
 +
/* SUBPAGE===============================================================================================================================================*/
 +
.background_img_igem {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/9/98/T--UCL--silkbackground2.svg') !important;
 +
    min-height: 100% !important;
 +
    width: 100% !important;
 +
    background-attachment: fixed !important;
 +
    background-position: center !important;
 +
    background-repeat: no-repeat !important;
 +
    background-size: cover !important;
 +
    z-index: -5;
 +
}
 +
 +
.container_igem {
 +
    padding-bottom: 1rem;
 +
    background-color:rgba(0, 0, 0, 0.0);
 +
    padding-left: 5vw;
 +
}
 +
.container_igem2 {
 +
    padding-bottom: 1rem;
 +
    background-color:rgba(0, 0, 0, 0.0);
 +
}
 +
.card_igem {
 +
    animation-duration: 1.5s;
 +
    animation-iteration-count: 1;
 +
    background-color: rgb(255, 255, 255, 1) !important;
 +
    border-radius: 1rem !important;
 +
    margin-top: 5vh;
 +
    padding-top: 5vh;
 +
    padding-bottom: 7.5vh;
 +
    margin-left: 2rem;
 +
}
 +
 +
.card_pic_igem {
 +
    animation-duration: 1.5s;
 +
    animation-iteration-count: 1;
 +
    background-color: rgb(255, 255, 255, 1) !important;
 +
    border-radius: 1rem !important;
 +
    margin-top: 1rem;
 +
}
 +
 +
.card-text_igem {
 +
    font-family: 'Lato', sans-serif !important;
 +
    font-weight: 300;
 +
    line-height: 1.6em;
 +
    margin-bottom: 1rem !important;
 +
    margin-top: 2rem !important;
 +
    font-size: 1rem !important;
 +
}
 +
.bypass{
 +
  text-align: center !important;
 +
  margin-bottom: 1rem !important;
 +
}
 +
.card-text_igem2 {
 +
    font-family: 'Lato', sans-serif !important;
 +
    font-weight: 300;
 +
    line-height: 1.6em;
 +
    margin-bottom: 0.1rem !important;
 +
    margin-top: 0.2rem !important;
 +
    font-size: 1rem !important;
 +
}
 +
.basicparts{
 +
  margin-top: 5vh;
 +
}
 +
@media screen and (max-width:1441px) {
 +
  .specialmargin {
 +
    margin-bottom: 5vh;
 +
  }
 +
}
 +
 +
@media screen and (max-width: 1399px) {
 +
    .card_igem{
 +
        margin-left: 7rem;
 +
    }
 +
}
 +
@media screen and (max-width: 401px) {
 +
    .card_igem{
 +
        margin-left: 0rem;
 +
    }
 +
}
 +
 +
.h1_igem_subpage {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 5rem;
 +
    color: rgba(242, 77, 25,1);
 +
    text-align: center;
 +
    padding-top: 2rem;
 +
    padding-bottom: 2rem;
 +
    line-height: 1rem;
 +
}
 +
 +
.h1_igem_subpage1 {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 5rem;
 +
    color: rgba(242, 77, 25,1);
 +
    text-align: center;
 +
    padding-top: 7rem;
 +
    padding-bottom: 1rem;
 +
    line-height: 1rem;
 +
}
 +
 +
.h1_igem_subpage2 {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 5rem;
 +
    color: rgba(242, 77, 25,1);
 +
    text-align: center;
 +
    line-height: 1rem;
 +
}
 +
 +
.h1_igem_subpage3 {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 5rem;
 +
    color: rgba(242, 77, 25,1);
 +
    text-align: center;
 +
    padding-top: 7rem;
 +
    padding-bottom: 2rem;
 +
    line-height: 1rem;
 +
}
 +
 +
@media screen and (max-width: 401px) {
 +
    .h1_igem_subpage, .h1_igem_subpage1{
 +
        font-size: 3rem;
 +
    }
 +
}
 +
 +
.subpage_img_igem {
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
    width: 80vh;
 +
    height: 80vh;
 +
    display: block;
 +
    margin-top: 1rem;
 +
}
 +
 +
.subpage_img_igem1 {
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
    width: 100vh;
 +
    height: 100vh;
 +
    display: block;
 +
}
 +
 +
@media screen and (max-width: 401px) {
 +
    .subpage_img_igem{
 +
        width: 30vh;
 +
        height: 30vh;
 +
        margin-top: 5rem;
 +
    }
 +
}
 +
 +
@media screen and (max-width: 769px) {
 +
    .subpage_img_igem{
 +
        width: 40vh;
 +
        height: 40vh;
 +
        margin-top: 5rem;
 +
    }
 +
}
 +
 +
@media screen and (max-width: 1025px) {
 +
    .subpage_img_igem{
 +
        width: 50vh;
 +
        height: 50vh;
 +
        margin-top: 5rem;
 +
    }
 +
}
 +
 +
.card-title h4 {
 +
    font-size: 2.5rem;
 +
    font-family: 'Quicksand', sans-serif;
 +
    font-weight: 400;
 +
    margin-top: 1rem;
 +
}
 +
.vanish {
 +
    font-size: 1.5rem !important;
 +
    font-family: 'Quicksand', sans-serif !important;
 +
    font-weight: 400;
 +
    margin-top: 1rem;
 +
    text-align: center !important;
 +
}
 +
 +
.card_igem_img {
 +
    display: block;
 +
    max-width: 100%;
 +
    max-height: 100%;
 +
    left: 0;
 +
    right: 0;
 +
    top: 0;
 +
    bottom: 0;
 +
    margin: 0.5rem;
 +
    border-radius: 0.5rem !important;
 +
}
 +
 +
.card_igem_sponsor {
 +
    display: block;
 +
    max-width: 100%;
 +
    max-height: 100%;
 +
    left: 0;
 +
    right: 0;
 +
    top: 0;
 +
    bottom: 0;
 +
    margin-top: 2rem;
 +
    margin-bottom: 2rem;
 +
    vertical-align:middle !important;
 +
    align-items: center !important;
 +
}
 +
 +
.model_img{
 +
    padding:1rem;
 +
}
 +
 +
.h4_sponsor {
 +
    font-family: 'Quicksand', sans-serif;
 +
    font-size: 1rem;
 +
}
 +
.animatedhover {
 +
  -webkit-animation-duration: 1s;
 +
  animation-duration: 1s;
 +
  -webkit-animation-fill-mode: both;
 +
  animation-fill-mode: both;
 +
  animation-play-state: paused;
 +
}
 +
 +
.animatedhover:hover {
 +
  -webkit-animation-duration: 1s;
 +
  animation-duration: 2s;
 +
  -webkit-animation-fill-mode: both;
 +
  animation-fill-mode: both;
 +
  animation-play-state: running;
 +
  animation-iteration-count: infinite;
 +
}
 +
 +
.h2_card_igem {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 2rem;
 +
    color: rgba(0, 0, 0,1);
 +
    margin-bottom: 1rem;
 +
}
 +
 +
 +
.sidenav {
 +
    width: 200px;
 +
    z-index: 1;
 +
    left: 0.5vw;
 +
    border-radius: 1rem;
 +
    overflow-x: hidden;
 +
    overflow-y: scroll;
 +
    vertical-align: middle;
 +
    position: absolute;
 +
}
 +
 +
.sidenav a {
 +
    padding: 6px 8px 6px 16px;
 +
    text-decoration: none;
 +
    font-size: 1rem;
 +
    background-color: tomato;
 +
    color:white;
 +
    display: block;
 +
    font-family: 'Quicksand', sans-serif;
 +
}
 +
 +
.sidenav a:hover {
 +
    background-color: white;
 +
    color: tomato;
 +
 +
}
 +
 +
@media screen and (max-width: 1025px) {
 +
    .sidenav{
 +
        width:160px;
 +
    }
 +
}
 +
@media screen and (max-width: 401px) {
 +
    .sidenav{
 +
        display:none;
 +
    }
 +
}
 +
.yaypadding
 +
{
 +
  padding-top: 75px;
 +
}
 +
 +
.accordion {
 +
    background-color: rgb(13, 13, 13, 0.8);
 +
    color: tomato;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: center;
 +
    outline: none;
 +
    font-size: 1.5rem;
 +
    font-family:"Quicksand";
 +
    transition: 0.4s;
 +
    border-radius: 0.5rem;
 +
}
 +
 +
 +
.active, .accordion:hover {
 +
    background-color: #ff3300;
 +
    color: #eee;
 +
}
 +
 +
.panel {
 +
    padding: 8px 18px;
 +
    display: none;
 +
    background-color:  #262626;
 +
    color: #eee;
 +
    overflow: hidden;
 +
    border-radius: 0.5rem;
 +
}
 +
 +
.sidenav_accordion {
 +
    height: 100vh;
 +
    width: 2.3rem;
 +
    position: fixed;
 +
    z-index: 1;
 +
    top: 75;
 +
    left: 0;
 +
    background-color: rgb(13, 13, 13, 0.9);
 +
    overflow-x: hidden;
 +
    padding-top: 20px;
 +
 +
}
 +
 +
.sidenav_accordion a {
 +
    padding: 4px 2px 2px 1px;
 +
    text-decoration: none;
 +
    font-size: 0.8rem;
 +
    color: #737373;
 +
    display: block;
 +
    text-align: center;
 +
    line-height: 1.1rem;
 +
}
 +
 +
.sidenav_accordion a:hover {
 +
    color: tomato;
 +
}
 +
.accordion_column {
 +
    float: left;
 +
    width: 50%;
 +
    padding: 10px;
 +
}
 +
.accordion_row:after {
 +
    content: "";
 +
    display: table;
 +
    clear: both;
 +
}
 +
.accordion_image{
 +
    width:80%;
 +
    margin: 5vh;
 +
}
 +
 +
@media screen and (max-height: 450px) {
 +
  .sidenav_accordion {padding-top: 15px;}
 +
  .sidenav_accordion a {font-size: 18px;}
 +
}
 +
 +
.leftspace {
 +
  position: relative;
 +
  left: 410;
 +
  bottom: 450;
 +
}
 +
 +
.button_circle {
 +
    background-color: tomato;
 +
    border: none;
 +
    color: white;
 +
    padding: 1px 5px;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    display: inline-block;
 +
    font-size: 10px;
 +
    margin: 5px 0.1px;
 +
    cursor: pointer;
 +
    border-radius: 80%;
 +
 +
  }
 +
 +
.button_circle:hover {background-color: red}
 +
 +
    #myContainer {
 +
      width: 400px;
 +
      height: 300px;
 +
      position: relative;
 +
      background:  rgb(102, 102, 102, 0.7);
 +
      border-radius: 5%;
 +
    }
 +
    #myRFP1 {
 +
      width: 40px;
 +
      height: 25px;
 +
      position: relative;
 +
      left: 30px;
 +
      bottom: 155px;
 +
      background-color:  #ff6666;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myInteinRN1 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 15px;
 +
      bottom: 172px;
 +
      background-color: #ff9966;
 +
      border-radius: 80%;
 +
    }
 +
 +
 +
    #myInteinRC1 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 70px;
 +
      bottom: 180px;
 +
      background-color: #ffffcc;
 +
      border-radius: 10%;
 +
    }
 +
 +
 +
    #myGFP1 {
 +
      width: 40px;
 +
      height: 25px;
 +
      position: relative;
 +
      left: 100px;
 +
      bottom: 196px;
 +
      background-color:  #b3ffb3;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myInteinGN1 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 85px;
 +
      bottom: 213px;
 +
      background-color: #ffffcc;
 +
      border-radius: 80%;
 +
    }
 +
 +
    #myInteinGC1 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 140px;
 +
      bottom: 220px;
 +
      background-color:  #ff9966;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myRFP2 {
 +
      width: 40px;
 +
      height: 25px;
 +
      position: relative;
 +
      left: 170px;
 +
      bottom: 237px;
 +
      background-color:  #ff6666;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myInteinRN2 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 155px;
 +
      bottom: 253px;
 +
      background-color: #ff9966;
 +
      border-radius: 80%;
 +
    }
 +
 +
 +
    #myInteinRC2 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 210px;
 +
      bottom: 261px;
 +
      background-color: #ffffcc;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myGFP2 {
 +
      width: 40px;
 +
      height: 25px;
 +
      position: relative;
 +
      left: 240px;
 +
      bottom: 278px;
 +
      background-color:  #b3ffb3;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myInteinGN2 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 225px;
 +
      bottom: 294px;
 +
      background-color: #ffffcc;
 +
      border-radius: 80%;
 +
    }
 +
 +
    #myInteinGC2 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 280px;
 +
      bottom: 302px;
 +
      background-color:  #ff9966;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myRFP3 {
 +
      width: 40px;
 +
      height: 25px;
 +
      position: relative;
 +
      left: 310px;
 +
      bottom: 319px;
 +
      background-color:  #ff6666;
 +
      border-radius: 10%;
 +
    }
 +
 +
    #myInteinRN3 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 295px;
 +
      bottom: 335px;
 +
      background-color: #ff9966;
 +
      border-radius: 80%;
 +
    }
 +
 +
 +
    #myInteinRC3 {
 +
      width: 15px;
 +
      height: 8px;
 +
      position: relative;
 +
      left: 350px;
 +
      bottom: 343px;
 +
      background-color: #ffffcc;
 +
      border-radius: 10%;
 +
    }
 +
 +
.h4_notebook {
 +
    font-family: 'Quicksand', sans-serif;
 +
    color: tomato;
 +
    font-size: 1.5rem;
 +
    margin-bottom: 1rem;
 +
}
 +
 +
.h4_cards {
 +
    font-family: 'Quicksand', sans-serif;
 +
    color: black;
 +
    font-size: 1.5rem;
 +
    margin-bottom: 1rem;
 +
    text-align: left;
 +
}
 +
/*  */
 +
.collapsible {
 +
background-color: #777;
 +
color: white;
 +
cursor: pointer;
 +
padding: 1rem;
 +
border: none;
 +
text-align: center;
 +
outline: none;
 +
font-size: 2rem;
 +
border-radius: 0.5rem;
 +
font-family: 'Quicksand', sans-serif;
 +
transition: 0.3s;
 +
margin-left: 2rem;
 +
width: 50vw;
 +
}
 +
.activelol{
 +
  background-color: rgba(28,28,28,1)
 +
}
 +
.activelol, .collapsible:hover {
 +
background-color: #555;
 +
}
 +
 +
.collapsible:after {
 +
content: '\002B';
 +
color: white;
 +
font-weight: bold;
 +
float: right;
 +
}
 +
 +
.activelol:after {
 +
content: "\2212";
 +
}
 +
 +
.collapsible1 {
 +
background-color: #777;
 +
color: white;
 +
cursor: pointer;
 +
border: none;
 +
text-align: center;
 +
outline: none;
 +
font-size: 2rem;
 +
border-radius: 0.5rem;
 +
font-family: 'Quicksand', sans-serif;
 +
transition: 0.3s;
 +
width: 50vw;
 +
margin-top: 1rem;
 +
margin-bottom: 1rem;
 +
padding-top: 1rem;
 +
padding-bottom: 1rem;
 +
}
 +
.activelol1{
 +
  background-color: rgba(28,28,28,1)
 +
}
 +
.activelol1, .collapsible1:hover {
 +
background-color: #555;
 +
}
 +
 +
.collapsible1:after {
 +
content: '\002B';
 +
color: white;
 +
font-weight: bold;
 +
float: right;
 +
}
 +
 +
.activelol1:after {
 +
content: "\2212";
 +
}
 +
 +
.collapsible_content {
 +
max-height: 0;
 +
overflow: hidden;
 +
transition: max-height 0.2s ease-out;
 +
background-color: #f1f1f1;
 +
padding-left: 2.5vw;
 +
padding-right: 2.5vw;
 +
border-radius: 0.5rem !important;
 +
margin-left: 2rem;
 +
}
 +
 +
.collapsible_content1 {
 +
max-height: 0;
 +
overflow: hidden;
 +
transition: max-height 0.2s ease-out;
 +
background-color: #f1f1f1;
 +
border-radius: 0.5rem !important;
 +
}
 +
 +
@media screen and (max-width: 1399px) {
 +
    .collapsible, .collapsible_content {
 +
        margin-left: 7rem;
 +
    }
 +
}
 +
 +
.specialp
 +
{
 +
margin-top: 0.5rem !important;
 +
margin-bottom: 0 !important;
 +
}
 +
tbody tr:hover
 +
{
 +
  height:43px;
 +
  background-color: rgb(214, 214, 214);
 +
  color:black;
 +
  z-index: -1;
 +
  transition: 0.15s;
 +
}
 +
.tableleft
 +
{
 +
  text-align: left;
 +
}
 +
.tablecenter{
 +
  text-align: center;
 +
}
 +
.tableright{
 +
  text-align: right;
 +
}
 +
@media screen and (max-width: 1126px) {
 +
  .collapsible{
 +
      margin-left: 7rem;
 +
  }
 +
}
 +
@media screen and (max-width: 401px) {
 +
  .collapsible{
 +
      margin-left: 0rem;
 +
  }
 +
}
 +
.marginlr{
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
.textcenter{
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
.row{
 +
  margin-left: 0 !important;
 +
  margin-right: 0 !important;
 +
}
 +
.loqclass{
 +
  text-align: center !important;
 +
  margin-bottom: 3rem !important;
 +
}
 +
.filler1{
 +
  padding:2vh;
 +
}
 +
.kin1{
 +
}
 +
.kin2{
 +
}
 +
.speciall{
 +
  margin-left: 7vw;
 +
}
 +
.kinesismagazine{
 +
  width:100%;
 +
  height:100%;
 +
}
 +
.paddingss{
 +
  margin-left:7.5vw;
 +
  margin-right: 7.5vw;
 +
  margin-bottom: 6vh;
 +
  border:5px grey solid;
 +
  margin-top: 3vh;
 +
}
 +
.insta{
 +
  width:80%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top: 5vh;
 +
  margin-bottom: 3vh;
 +
  border-radius: 3rem;
 +
}
 +
 +
.cards_logos{
 +
  width:80%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  border-radius: 3rem;
 +
}
 +
 +
.cards_logos1{
 +
  width:50%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
.cards_logos2{
 +
  width:50%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  border-radius: 3rem;
 +
}
 +
 +
.cards_logos3{
 +
  width:100%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 1rem;
 +
}
 +
 +
.cards_logos4{
 +
  width:105%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 1rem;
 +
}
 +
 +
.cards_logos5{
 +
  width:80%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 1rem;
 +
}
 +
 +
.cards_logos6{
 +
  width:110.4%;
 +
  display:block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 1rem;
 +
}
 +
 +
.customise{
 +
  position: relative;
 +
  width: 100vw;
 +
  min-height: 1px;
 +
  padding-right: 15px;
 +
  padding-left: 15px;
 +
}
 +
.lol{
 +
  display: inline-block;
 +
}
 +
.lol:hover{
 +
  color:tomato;
 +
  transition:0.3s;
 +
  animation-iteration-count: infinite;
 +
  animation-duration: 0.1s;
 +
}
 +
.superwow{
 +
  background-color: orange !important;
 +
  color:white !important;
 +
}
 +
.yin{
 +
  background-color: black;
 +
  color:white;
 +
  border-radius: 1rem;
 +
  transition: 0.3s;
 +
}
 +
.yin:hover{
 +
  background-color: white;
 +
  color:black;
 +
  transition: 0.3s;
 +
}
 +
.yang{
 +
  background-color: white;
 +
  color:black;
 +
  border-radius: 1rem;
 +
}
 +
.yang:hover{
 +
  background-color: #ff9f80;
 +
  color:black;
 +
  transition: 0.5s;
 +
}
 +
.removepadding
 +
{
 +
  padding-bottom:0 !important;
 +
  text-align: justify !important;
 +
  font-size: 1rem;
 +
    font-family: 'Quicksand', sans-serif;
 +
    font-weight: 400;
 +
    margin-top: 1rem;
 +
}
 +
.argss{
 +
  text-align: center !important;
 +
}
 +
.sshh{
 +
  text-decoration: none;
 +
  color:rgb(255, 133, 102);
 +
  transition: 0.15s;
 +
}
 +
 +
.sshh:hover{
 +
  text-decoration: none;
 +
  color:rgb(255, 0, 53);
 +
  transition: 0.15s;
 +
}
 +
 +
.sshh1{
 +
  text-decoration: none;
 +
  color:rgb(153, 0, 0) !important;
 +
  transition: 0.15s;
 +
}
 +
 +
.sshh1:hover{
 +
  text-decoration: none;
 +
  color:rgb(77, 0, 0);
 +
  transition: 0.15s;
 +
}
 +
 +
.h3_insta {
 +
    font-size: 1.5rem;
 +
    font-family: 'Quicksand', sans-serif;
 +
    color: black;
 +
    text-align: center;
 +
    background-color: white;
 +
    width: 15rem;
 +
}
 +
 +
.flippy
 +
{
 +
    animation-iteration-count: infinite;
 +
    animation-duration: 1s;
 +
}
 +
 +
.flip-card {
 +
  background-color: transparent;
 +
}
 +
 +
.flip-card-inner {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 22vh;
 +
  text-align: center;
 +
  transition: transform 0.6s;
 +
  transform-style: preserve-3d;
 +
}
 +
 +
.flip-card:hover .flip-card-inner {
 +
  transform: rotateY(180deg);
 +
}
 +
 +
.flip-card-front, .flip-card-back {
 +
  position: absolute;
 +
  width: 100%;
 +
  height: 100%;
 +
  backface-visibility: hidden;
 +
}
 +
 +
.flip-card-front {
 +
  background-color: transparent;
 +
  color: black;
 +
}
 +
 +
.flip-card-back {
 +
  background-color: transparent;
 +
  color: black;
 +
  transform: rotateY(180deg);
 +
}
 +
.carousel-item{
 +
  background-color: rgba(28,28,28,1);
 +
}
 +
 +
.list-group-item_igem1 {
 +
  color: white;
 +
  background-color: rgb(255, 133, 102);
 +
}
 +
 +
.list-group-item_igem2 {
 +
  color: white;
 +
  background-color: rgb(255, 219, 77);
 +
}
 +
 +
.list-group-item_igem3 {
 +
  color: white;
 +
  background-color: rgb(255, 77, 77);
 +
}
 +
 +
.list-group-item_igem4 {
 +
  color: white;
 +
  background-color: rgb(255, 166, 77);
 +
}
 +
 +
.infographic_igem {
 +
    width: 90vw;
 +
    height: auto;
 +
}
 +
 +
.carousel-inner img {
 +
      width: 33vw;
 +
      height: 33vw;
 +
  }
 +
  .holysss{
 +
display:block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
  }
 +
  .lmao{
 +
    padding-bottom: 2vh !important;
 +
  }
 +
  .lmaoo{
 +
    padding-bottom: 0.5vh !important;
 +
    margin-bottom: 5vh !important;
 +
  }
 +
  .fuq img{
 +
    width:100%;
 +
  }
 +
  .orange{
 +
    color:tomato;
 +
  }
 +
 +
  .orange_bkgr{
 +
      background-color: white;
 +
      border-radius: 0.5rem;
 +
      color: tomato !important;
 +
  }
 +
 +
.carousel_title_igem {
 +
    font-size: 2rem !important;
 +
    font-weight: 800 !important;
 +
    font-family: "Quicksand", sans-serif !important;
 +
    color: tomato !important;
 +
    background-color: rgba(28,28,28,0.75);
 +
}
 +
 +
  .wwww{
 +
    background-color: rgba(28,28,28,1);
 +
    font-size: 1rem !important;
 +
    font-weight: 400 !important;
 +
    font-family: "Lato", sans-serif !important;
 +
  }
 +
.sucks{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border:green 5px solid;
 +
  transition: 0.3s;
 +
  opacity: 0.5;
 +
}
 +
.sucks:hover{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border: green 5px solid;
 +
  transition:0.3s;
 +
  opacity: 1;
 +
}
 +
.sucks2{
 +
  width:30vh;
 +
  height:30vh;
 +
  border-radius: 50%;
 +
  border:rgb(54, 173, 224) 5px solid;
 +
  transition: 0.3s;
 +
  opacity: 0.5;
 +
}
 +
.sucks2:hover{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border: rgb(54, 173, 224) 5px solid;
 +
  transition:0.3s;
 +
  opacity: 1;
 +
}
 +
.sucks3{
 +
  width:30vh;
 +
  height:30vh;
 +
  border-radius: 50%;
 +
  border:rgba(28,28,28,1) 5px solid;
 +
  transition: 0.3s;
 +
  opacity: 0.5;
 +
}
 +
.sucks3:hover{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border: rgba(28,28,28,1) 5px solid;
 +
  transition:0.3s;
 +
  opacity: 1;
 +
}
 +
.sucks4{
 +
  width:30vh;
 +
  height:30vh;
 +
  border-radius: 50%;
 +
  border:rgba(21, 38, 98, 1) 5px solid;
 +
  transition: 0.3s;
 +
  opacity: 0.5;
 +
}
 +
.sucks4:hover{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border: rgba(21, 38, 98, 1) 5px solid;
 +
  transition:0.3s;
 +
  opacity: 1;
 +
}
 +
.sucks5{
 +
  width:30vh;
 +
  height:30vh;
 +
  border-radius: 50%;
 +
  border:red 5px solid;
 +
  transition: 0.3s;
 +
  opacity: 0.5;
 +
}
 +
.sucks5:hover{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border: red 5px solid;
 +
  transition:0.3s;
 +
  opacity: 1;
 +
}
 +
.sucks6{
 +
  width:30vh;
 +
  height:30vh;
 +
  border-radius: 50%;
 +
  border:rgba(50, 223, 156, 1) 5px solid;
 +
  transition: 0.3s;
 +
  opacity: 0.5;
 +
}
 +
.sucks6:hover{
 +
  width:30vh;
 +
  border-radius: 50%;
 +
  border: rgba(50, 223, 156, 1) 5px solid;
 +
  transition:0.3s;
 +
  opacity: 1;
 +
}
 +
.elimination{
 +
  padding-bottom: 0 !important;
 +
}
 +
.eeeee{
 +
    margin-bottom: 1.5vh;
 +
}
 +
.ohwow{
 +
  margin-bottom: 15vh;
 +
}
 +
.mmmm{
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
.removedec{
 +
  text-decoration: none;
 +
}
 +
.mrfont{
 +
  font-family: 'Lato', sans-serif !important;
 +
  font-weight: 300;
 +
  line-height: 1.6em;
 +
  text-align: justify !important;
 +
}
 +
.mrfont2{
 +
  font-family: 'Lato', sans-serif !important;
 +
  font-weight: 300;
 +
  line-height: 1.6em;
 +
  text-align: center !important;
 +
}
 +
.card_igem.mmmmm p{
 +
    text-align: justify !important;
 +
}
 +
.ooooo{
 +
  border: 2px solid rgba(138, 138, 138, 1);
 +
  margin-top: 2rem;
 +
}
 +
.oooo th{
 +
  width:300px;
 +
}
 +
figcaption{
 +
  font-size: 11px;
 +
}
 +
 +
.video_igem{
 +
    padding-top: 1.5rem;
 +
    padding-bottom: 1.5rem;
 +
}
 +
 +
.list_padding_igem {
 +
    padding-bottom: 1.5rem;
 +
}
 +
 +
.table_text_igem{
 +
    font-family: 'Lato', sans-serif !important;
 +
    font-weight: 300;
 +
    line-height: 1.6em;
 +
}
 +
 +
.m1{
 +
  width:25vw;
 +
}
 +
.nodec{
 +
  text-decoration: none;
 +
}
 +
 +
.gifs{
 +
  width:15vw;
 +
  margin:1rem;
 +
  border-radius: 1rem;
 +
}
 +
.yyyyy{
 +
  background-color: white;
 +
  transition: 0.3s;
 +
}
 +
.yyyyy:hover{
 +
  background-color: rgb(214, 214, 214);
 +
  transition: 0.3s;
 +
  border-radius: 1rem;
 +
}
 +
.marrrgin{
 +
  margin-left: 10vw;
 +
}
 +
.marrgin{
 +
  margin-right: 10vw;
 +
}
 +
.margintopp{
 +
  margin-top: 5vh;
 +
}
 +
 +
.model_h6 {
 +
    padding-top: 1rem;
 +
    padding-bottom: 1rem;
 +
}
 +
 +
.model_caption_title_igem {
 +
    font-weight: bold;
 +
    color: tomato;
 +
}
 +
code {
 +
    border-radius: 3px;
 +
    font-family: courier, monospace;
 +
    padding: 0 3px;
 +
    color: black;
 +
    font-size: 1.4rem;
 +
    line-height: 2rem;
 +
}
 +
/* FOOTER===============================================================================================================================================*/
 +
 +
.footer {
 +
  position: relative;
 +
  left: 0;
 +
  width: 100vw;
 +
  background-color: rgb(28,28,28, 1);
 +
  color: white;
 +
  text-align: center;
 +
  font-family: "Quicksand", sans-serif;
 +
  padding-top: 4vh;
 +
}
 +
 +
.footer_img_igem {
 +
    margin-bottom: 5px;
 +
}
 +
 +
.h2_footer_igem {
 +
    font-weight: 400;
 +
    font-family: "Quicksand", sans-serif;
 +
    font-size: 2rem;
 +
    color: rgba(242, 77, 25,1);
 +
    text-align: center;
 +
    padding-bottom: 1rem;
 +
}
 +
.contacticons
 +
{
 +
  transition: 0.075s;
 +
}
 +
.contacticons:hover
 +
{
 +
  opacity: 0.5;
 +
 +
}
 +
 +
/* PARALLAX================================================================== */
 +
  
  
Line 4,019: Line 5,369:
 
   }
 
   }
 
}
 
}
−
 
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 10:08, 9 December 2018