<style>

#content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
    margin: 0 0 0 0!important;
}
#bodyContent h1, #bodyContent h2 {
    margin-bottom: 0;
}
#globalWrapper{
    padding: 0;
}
#mw-content-text > p {
    margin:  0 0 0 0!important;
}

	#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
	/*#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }*/
	#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}

h1, h2, h3, h4, h5, h6 {
    border-bottom: 0px none;
}
</style>
<script>
window.onload = function(){
    document.querySelector("#HQ_page").id = '';
    console.log("HQ_delete");
}
</script>

<style>
/*before get rid of #HQ_page*/
#HQ_page p {
    font-size: 1.1rem;
}
/* Compete with HQ */
#mw-content-text 
{
    background-color: #f0f0f0;
    color: #f0f0f0;
}


html {
    scroll-behavior: smooth;
    color: #2C2C2C;
}
    @font-face
    {
        font-family:'font_one';
        src:url(https://static.igem.wiki/teams/4242/wiki/acme-regular.ttf)
    }
    .p1
    {
        font-family:'font_one';
        font-size:1.3rem;
        color:#f0f0f0;
    }
    .p2
    {
        font-family:'font_one';
        font-size:3.0rem;
        color:#f26b1f;
    }
    
    @font-face
    {
        font-family:'font_two';
        src:url(https://uploads.igem.org/teams/4242/wiki/Overlock-Regular.ttf)

    }
    .o
    {
        font-family:'font_two';
        font-size:1rem;
        color:#f0f0f0;
    }
body {
    position: relative;
    width:100%;
    height: auto;
    background-color: #21373d;
    font-family:'font one';
    overflow-y: scroll;
}



</style>


<style>
.fp-enabled body,html.fp-enabled
{
    margin:0;
    padding:0;
    overflow:hidden;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
.fp-section
{position:relative;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.fp-slide{float:left}
.fp-slide,.fp-slidesContainer{height:100%;display:block}
.fp-slides{z-index:1;height:100%;overflow:hidden;position:relative;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
.fp-section.fp-table,.fp-slide.fp-table{display:table;table-layout:fixed;width:100%}
.fp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}
.fp-slidesContainer{float:left;position:relative}
.fp-controlArrow{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:absolute;z-index:4;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.fp-controlArrow.fp-prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent}
.fp-controlArrow.fp-next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff}
.fp-scrollable{overflow:hidden;position:relative}.fp-scroller{overflow:hidden}.iScrollIndicator{border:0!important}
.fp-notransition{-webkit-transition:none!important;transition:none!important}
#fp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;-webkit-transform:translate3d(0,0,0)}
#fp-nav.fp-right{right:17px}#fp-nav.fp-left{left:17px}
#fp-nav ul,.fp-slidesNav ul{margin:0;padding:0}
#fp-nav ul li,.fp-slidesNav ul li{display:block;width:14px;height:13px;margin:7px;position:relative}
.fp-slidesNav ul li{display:inline-block}
#fp-nav ul li a,.fp-slidesNav ul li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}
#fp-nav ul li .fp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px;overflow:hidden;display:block;opacity:0;width:0;cursor:pointer}
#fp-nav ul li:hover .fp-tooltip,#fp-nav.fp-show-active a.active+.fp-tooltip{-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;width:auto;opacity:1}
#fp-nav ul li .fp-tooltip.fp-right{right:20px}#fp-nav ul li .fp-tooltip.fp-left{left:20px}.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section{height:auto!important}
.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell,.fp-responsive .fp-auto-height-responsive.fp-section{height:auto!important}
.fp-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* template */
html {
    scroll-behavior: smooth;
    color: #2C2C2C;
}
body {
    position: relative;
    width:100%;
    height: auto;
    background-color: #21373d;
    overflow-y: scroll;
}

/* home.css */
section {
    width: 100%;
    height: 100vh;
}
.wrapper {
    height: 100%;
}
/* Logo Part */
#Logo {
    position: relative;
}
.logo-wrapper {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
#Logo-video {
    min-width: 100%;
    width: auto;
    min-height: 100%;
    height: auto;
    z-index: -1;
}
img.big-logo {
    height: 32%;
    width: auto;
    margin-bottom: 15px;
}
h1.pagename {
    text-align: center;
    font-size: 2.8rem;
    margin: 0;
    padding:0;
}
hr.pagename {
    width:90%;
    border-top: 3px solid #2C2C2C;
}
p.pagename {
    width: 70%;
}
a.down {
    width: 50px;
    height: 50px;
    margin-top: 20px;
}
.down img {
    width: 100%;
    height: auto;
}
.bounce {
    animation: bounce 3s;
    animation-iteration-count: infinite;
  }
@keyframes bounce {
    0%, 25%, 50%, 75%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-12px);
    }
}

@media (min-width: 992px) { 
    a.down {
        position: absolute;
        top: 80%;
        left: calc(50% - 25px);
    }
}
/*nav*/
header div.bread {
    display: none!important;
}
/* Project */
.text-wrapper, .img-wrapper {
    height: auto;
    padding-left: 6vw;
    padding-right: 6vw;
    padding-bottom: 3%;
}
main .text-wrapper p{
    font-size:1rem;
}
img.device {
    width: 70%;
    height: auto;
}
.img-full {
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
}
/*large device like computer*/
@media (min-width: 992px) { 
    .text-wrapper {
        height: 100vh;
        padding-left: 6%;
        padding-right: 6%;
        padding-bottom: 0%;
    }
    .img-wrapper {
        height: 100vh;
        padding-right: 6%;
        padding-left: 1%;
    }
    .video-wrapper {
        height: 100vh;
    }
}

a.des-link {
    width: 40%;
    height: auto;
}
@media (min-width: 768px) {
    a.des-link {
        max-width: 20%;
        height: auto;
    }
}

</style>
