Difference between revisions of "Template:UCL/Style"

 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<html>
 +
<style>
 
@import url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
 
@import url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
Line 73: Line 75:
 
     margin-top: 0 !important;
 
     margin-top: 0 !important;
 
}
 
}
 +
 +
 
body
 
body
 
{
 
{
Line 134: Line 138:
 
     float:left;
 
     float:left;
 
     overflow: hidden;
 
     overflow: hidden;
−
 
 
}
 
}
  
Line 150: Line 153:
 
     height:60px;
 
     height:60px;
 
}
 
}
 +
 
.navbarzindex.black .dropdown_igem .dropbtn_igem {
 
.navbarzindex.black .dropdown_igem .dropbtn_igem {
 
   color:rgba(255, 255, 255, 1);
 
   color:rgba(255, 255, 255, 1);
Line 157: Line 161:
  
 
     position: absolute;
 
     position: absolute;
−
    background-color: #f9f9f9;
 
 
     z-index: 1;
 
     z-index: 1;
 
     margin-left:auto;
 
     margin-left:auto;
Line 175: Line 178:
 
     text-align:center;
 
     text-align:center;
 
     color:rgba(255, 255, 255, 1);
 
     color:rgba(255, 255, 255, 1);
−
     background-color:rgba(0, 0, 0, 1);
+
     background-color:rgba(0, 0, 0, 0.75);
 
     padding: 12px 16px;
 
     padding: 12px 16px;
 
     text-decoration: none;
 
     text-decoration: none;
Line 187: Line 190:
 
   }
 
   }
 
   .topnav_igem a.icon_igem {
 
   .topnav_igem a.icon_igem {
−
    float: center;
+
 
 
     display: block;
 
     display: block;
 
   }
 
   }
Line 257: Line 260:
 
   }
 
   }
 
  .floatright_igem{
 
  .floatright_igem{
−
  float:none important;
+
  float:none !important;
 +
}
 +
.floatleft_igem{
 +
float:left !important;
 
  }
 
  }
 
}
 
}
Line 464: Line 470:
 
   -webkit-align-items: center; /* Safari 7.0+ */
 
   -webkit-align-items: center; /* Safari 7.0+ */
 
   display: block;
 
   display: block;
−
   margin-top: 20vh;
+
   margin-top: 85vh;
−
   text-align: center;
+
   margin-left: 45vw;
  
 
}
 
}
Line 503: 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: "Lato", sans-serif;
+
   font-family: "Lato", sans-serif !important;
 
   font-weight: 300;
 
   font-weight: 300;
 
   vertical-align: super;
 
   vertical-align: super;
Line 520: Line 526:
  
 
/* SUBPAGE===============================================================================================================================================*/
 
/* SUBPAGE===============================================================================================================================================*/
−
body {
+
.background_img_igem {
−
     background-image: url('https://static.igem.org/mediawiki/2018/9/93/T--UCL--silkbackground.svg');
+
     background-image: url('https://static.igem.org/mediawiki/2018/9/98/T--UCL--silkbackground2.svg') !important;
−
     height: 100%;
+
     min-height: 100% !important;
−
     background-attachment: fixed;
+
    width: 100% !important;
−
     background-position: center;
+
     background-attachment: fixed !important;
−
     background-repeat: no-repeat;
+
     background-position: center !important;
−
     background-size: cover;
+
     background-repeat: no-repeat !important;
 +
     background-size: cover !important;
 +
    z-index: -5;
 
}
 
}
  
 
.container_igem {
 
.container_igem {
−
     margin-top: 2%;
+
     padding-bottom: 1rem;
−
    margin-bottom: 2%;
+
     background-color:rgba(0, 0, 0, 0.0);
−
     background-image: url('https://static.igem.org/mediawiki/2018/9/93/T--UCL--silkbackground.svg');
+
     padding-left: 5vw;
−
     height: 100%;
+
}
−
    background-attachment: fixed;
+
.container_igem2 {
−
    background-position: center;
+
     padding-bottom: 1rem;
−
     background-repeat: no-repeat;
+
     background-color:rgba(0, 0, 0, 0.0);
−
     background-size: cover;
+
−
 
+
 
}
 
}
−
 
 
.card_igem {
 
.card_igem {
 
     animation-duration: 1.5s;
 
     animation-duration: 1.5s;
Line 547: Line 552:
 
     border-radius: 1rem !important;
 
     border-radius: 1rem !important;
 
     margin-top: 5vh;
 
     margin-top: 5vh;
 +
    padding-top: 5vh;
 +
    padding-bottom: 7.5vh;
 +
    margin-left: 2rem;
 
}
 
}
  
−
@media screen and (max-width: 1126px) {
+
.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{
 
     .card_igem{
 
         margin-left: 7rem;
 
         margin-left: 7rem;
 +
    }
 +
}
 +
@media screen and (max-width: 401px) {
 +
    .card_igem{
 +
        margin-left: 0rem;
 
     }
 
     }
 
}
 
}
Line 561: Line 611:
 
     color: rgba(242, 77, 25,1);
 
     color: rgba(242, 77, 25,1);
 
     text-align: center;
 
     text-align: center;
−
     margin-top: 15vh;
+
     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;
 +
    }
 
}
 
}
  
Line 569: Line 699:
 
     font-weight: 400;
 
     font-weight: 400;
 
     margin-top: 1rem;
 
     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;
 
}
 
}
  
Line 582: Line 719:
 
     border-radius: 0.5rem !important;
 
     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 {
 
.sidenav {
−
     width: 10rem;
+
     width: 200px;
−
    position: fixed;
+
−
    position: -webkit-sticky; /*for Safari*/
+
 
     z-index: 1;
 
     z-index: 1;
 
     left: 0.5vw;
 
     left: 0.5vw;
−
    background: rgb(255, 255, 255, 0.95);
 
 
     border-radius: 1rem;
 
     border-radius: 1rem;
 
     overflow-x: hidden;
 
     overflow-x: hidden;
−
     background-color: white;
+
     overflow-y: scroll;
−
     position: fixed;
+
    vertical-align: middle;
 +
     position: absolute;
 
}
 
}
  
Line 614: Line 798:
 
     .sidenav{
 
     .sidenav{
 
         width:160px;
 
         width:160px;
 +
    }
 +
}
 +
@media screen and (max-width: 401px) {
 +
    .sidenav{
 +
        display:none;
 
     }
 
     }
 
}
 
}
Line 620: Line 809:
 
   padding-top: 75px;
 
   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================================================================== */
 +
 +
 +
 
/* ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE===== */
 
/* ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE===== */
  
Line 4,245: Line 5,369:
 
   }
 
   }
 
}
 
}
 +
</style>
 +
</html>

Latest revision as of 10:08, 9 December 2018