View source for Template:Main2021

<html>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
    /**********************************************************************************************/
    /* DEFAULT WIKI SETTINGS */
    /**********************************************************************************************/
    #home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {
        display:none;
    }
     #content {
        margin-left:0px;
         margin-top:-7px;
         padding:0px;
         width:100%;
    }
     body {
        background-color:#ffffff;
    }
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
        margin-bottom: 0px;
    }
     #bodyContent a[href ^="https://"], .link-https {
        padding-right:0px;
    }
    /**********************************************************************************************/
    /* MENU */
    /**********************************************************************************************/
    /*igem menu div - this wraps the whole of the menu*/
     .igem_menu {
         background-color: #ddd6d0;
         border-right: 2px solid #99948f;
         float: left;
         height: 100vh;
         overflow-y: auto;
         overflow-x: hidden;
         padding: 0px;
         position: fixed;
         left: 0%;
         text-align: left;
         width: 198px;
         display: block;
         z-index: 99;
    }
    /*logo styling*/
     .igem_menu_logo {
         background-image: url(https://static.igem.org/mediawiki/2021/c/c8/2021_igem_logo_horizontal.svg);
         height: 50px;
         width: 100%;
         float: left;
         cursor: pointer;
         background-repeat: no-repeat;
         margin: 10px 0px;
         background-size: 150px;
         background-position: center;
    }
     .igem_menu_item a {
         color: #000;
         text-decoration:none;
    }
     #all_menu_items{
         display:block;
    }
    /*menu item styling // layer one*/
    /******************************************************************************************/
    /* div for menu items (hubs or not)*/
     .igem_menu_item{
         background-color: #ddd6d0;
         border-bottom: 1px solid #99948f;
         clear: both;
         cursor: pointer;
         font-weight: bold;
         height: 35px;
        /*40px*/
         width: 100%;
    }
     .igem_menu_item.last_item{
         margin-bottom:60px;
    }
    /*styling for hub icons */
     .hub_icon{
         float: left;
         padding: 0px 3%;
         width: 10%;
         height: 36px;
         background-repeat: no-repeat;
         background-size: 20px;
         background-position: center;
    }
    /*hub icons */
     .hub_icon.about{
         background-image: url(https://static.igem.org/mediawiki/2019/8/8b/Menu_icon_about.svg);
    }
     .hub_icon.calendar{
         background-image: url(https://static.igem.org/mediawiki/2019/4/46/Menu_icon_calendar.svg);
    }
     .hub_icon.teams{
         background-image: url(https://static.igem.org/mediawiki/2019/0/0b/Menu_icon_teams.svg);
    }
     .hub_icon.competition{
         background-image: url(https://static.igem.org/mediawiki/2019/f/f8/Menu_icon_competition.svg);
    }
     .hub_icon.giant_jamboree{
         background-image: url(https://static.igem.org/mediawiki/2019/4/43/Menu_icon_jamboree.svg);
    }
     .hub_icon.judging{
         background-image: url(https://static.igem.org/mediawiki/2019/f/fd/Menu_icon_judging.svg);
    }
     .hub_icon.safety{
         background-image: url(https://static.igem.org/mediawiki/2019/7/71/Menu_icon_safety.svg);
    }
     .hub_icon.human_practices{
         background-image: url(https://static.igem.org/mediawiki/2019/4/43/Menu_icon_human_practices.svg);
    }
     .hub_icon.measurement{
         background-image: url(https://static.igem.org/mediawiki/2019/d/d2/Menu_icon_measurement.svg);
    }
     .hub_icon.diversity{
         background-image: url(https://static.igem.org/mediawiki/2021/e/e5/Diversity_icon.svg);
    }
     .hub_icon.resources{
         background-image: url(https://static.igem.org/mediawiki/2019/7/78/Menu_icon_resources.svg);
    }
     .hub_icon.sponsors{
         background-image: url(https://static.igem.org/mediawiki/2019/7/73/Menu_icon_sponsors.svg);
    }
     .hub_icon.videos{
         background-image: url(https://static.igem.org/mediawiki/2021/0/0c/Menu_icon_videos.svg);
    }
    /*red dots*/
     .hub_icon > .new_content{
         background-color: red;
         height: 10px;
         width: 10px;
         border-radius: 50%;
         float: right;
         margin-top: 5px;
    }
    /*specification for hub icon title images*/
     .main_title_icon {
         width:40px!important;
    }
    /*styling for the title of the menu item*/
     .hub_title{
         float: left;
         font-size: 90%;
         padding: 9px 3% 2px 3%;
         width:62%;
    }
    /*submenu and subsubmenus access button styling */
     .submenu_access {
         background-color: #ddd6d0;
         float: left;
         font-size: 130%;
         font-weight: bold;
         max-width: 100px;
         padding: 9px 3% 7px 3%;
         text-align: center;
         width: 10%;
    }
    /*HERE*/
    /* submenu access icon "+" "-"*/
     .submenu_access::before {
         content: "+";
    }
    /* submenu access icon "+" "-"*/
     .submenu_access.showing::before {
         content: "-";
    }
    /* change color when the submenu below is displayed*/
     .submenu_access.showing {
         background-color: #eae7e5;
    }
     .submenu_access:hover {
         background-color: #eae7e5;
    }
     .igem_menu_item:hover, .igem_menu_item.current_hub{
         background-color: #f8ed6e;
    }
    /*submenu item styling // layer two*/
    /**********************************************************************************************/
    /*submenu wrapper*/
     .igem_submenu{
         background-color:#eae7e5;
         clear:both;
         display:none;
         float: left;
         width:100%;
    }
    /*styling for a submenu item*/
     .submenu_item {
         border-bottom: 1px solid #99948f;
         height: 25px;
         float: left;
         font-size: 85%;
         padding: 10px 0px 0px 19%;
         width: 100%;
    }
    /*when the submenu item has a subsubmenu - make room for submenu access class on the same line*/
     .submenu_item.with_subsub_menu{
         width: 65%;
    }
     .submenu_item.with_subsub_menu.with_icon{
         width: 84%;
         padding: 10px 0px 0px 0%;
    }
     .submenu_item.with_icon, .subsubmenu_item.with_icon{
         padding: 10px 0px 0px 0px;
    }
     .icon_submenu{
         width: 16%;
         float: left;
         margin-top: -10px;
         margin-right: 3%;
         height: 35px;
         float: left;
         background-repeat: no-repeat;
         background-size: 17px;
         background-position: center;
    }
     .submenu_item.with_subsub_menu.with_icon > .icon_submenu{
         padding-left: 2.5%;
    }
     .icon_submenu.new{
         background-image: url('https://static.igem.org/mediawiki/2021/3/37/Small_icon_flag.svg');
    }
    /* submenu access styling if its inside a submenu */
     .igem_submenu > .submenu_access {
         background-color:#eae7e5;
         border-bottom: 1px solid #99948f;
         padding: 8px 3% 8px 3%;
    }
     .igem_submenu > .submenu_access:hover {
         background-color: #fff;
    }
     .igem_submenu > .submenu_access.showing {
         background-color: #fff;
         border-bottom: 1px solid #fff;
    }
     .submenu_item:hover, .submenu_item.with_subsub_menu:hover, .submenu_item.current_page, .submenu_item.with_subsub_menu.current_page {
         background-color: #f8ed6e;
         border-bottom: 1px solid #99948f;
    }
    /*for subsection titles */
     .submenu_item.subsection_title{
         color: #000;
         font-weight: 500;
         padding-left: 4%;
    }
     .submenu_item.subsection_title:hover{
         cursor: pointer;
         background-color:#eae7e5;
         border-bottom: 1px solid #99948f;
    }
    /*submenu item styling // layer three*/
    /**********************************************************************************************/
     .igem_subsubmenu{
         background-color: #fff;
         clear:both;
         display:none;
    }
     .subsubmenu_item {
         background-color:#fff;
         border-bottom: 1px solid #99948f;
         font-size: 80%;
         height: 22px;
         padding: 7px 0px 4px 19%;
    }
     .subsubmenu_item:hover, .igem_submenu > .submenu_access.showing:hover, .submenu_access.showing:hover, .subsubmenu_item.current_subpage {
         background-color:#f8ed6e;
    }
    /*mobile menu bar styling*/
    /**********************************************************************************************/
     .igem_mobile_menu_bar {
         background-color:#ddd6d0;
         border-bottom: 2px solid #99948f;
         cursor:pointer;
         display:none;
         float:left;
         margin-top: 0;
         padding: 5px 0;
         position:fixed;
         width:100%;
         z-index: 100;
         min-height: 28px;
    }
     .igem_logo_mobile img {
         width:70px;
    }
     .igem_logo_mobile {
         float:left;
         padding-left: 5%;
         width: 30%;
    }
     .igem_menu_control_mobile img {
         width:25px;
    }
     .igem_menu_control_mobile {
         float:right;
         padding-right:5%;
         padding-top:5px;
         text-align:right;
         width: 30%;
    }
    /**********************************************************************************************/
    /* CONTENT OF THE PAGE */
    /**********************************************************************************************/
    /* general wrapper for the content */
     .igem_content_wrapper {
         background-color:white;
         display:block;
         width:-webkit-calc(100% -200px);
         width:-moz-calc(100% - 200px);
         width:calc(100% - 200px);
         float:right;
    }
     .igem_content_wrapper.light {
         background-color: #aab3ca;
    }
     .igem_content_wrapper.dark {
         background-color:#2c3e66;
    }
    /*special themes*/
     .igem_content_wrapper.dark p, .igem_content_wrapper.dark h1, .igem_content_wrapper.dark h2, .igem_content_wrapper.dark h3, .igem_content_wrapper.dark h4, .igem_content_wrapper.dark h5, .igem_content_wrapper.dark h6, .igem_content_wrapper.dark > .igem_column_wrapper > .column.full_size > .highlight.post > .details {
         color:#ffffff !important;
    }
    /* subwrapper to center content */
     .igem_column_wrapper {
         margin: auto;
         max-width: 1250px;
         width: 85%;
    }
    /*general styling*/
    /*************************************************/
    /*font sizes for all the h titles*/
     .igem_content_wrapper h1{
        font-size: 28px;
    }
     .igem_content_wrapper h2{
        font-size: 24px;
    }
     .igem_content_wrapper h3{
        font-size: 22px;
    }
     .igem_content_wrapper h4{
        font-size: 20px;
    }
     .igem_content_wrapper h5{
        font-size: 18px;
    }
     .igem_content_wrapper h6{
        font-size: 15px;
    }
    /*font family freeroad bold*/
     @font-face {
         font-family: Freeroad_Bold;
         src: url(https://static.igem.org/mediawiki/2021/9/94/Freeroad_Bold.ttf);
    }
    /*font family freeroad*/
     @font-face {
         font-family: Freeroad_Regular;
         src: url(https://static.igem.org/mediawiki/2021/9/9d/Freeroad_Regular.ttf);
    }
    /* styling for the titles h1, h2*/
     .igem_column_wrapper h1, .igem_column_wrapper h2 {
         border-bottom:0px;
         color: #2d3e66;
         font-family: Freeroad_Bold, Arial;
         line-height: initial;
         padding: 5px 0px;
         font-weight: normal!important;
    }
    /* styling for the titles h3, h4, h5, h6 */
     .igem_column_wrapper h3, .igem_column_wrapper h4, .igem_column_wrapper h5, .igem_column_wrapper h6 {
         border-bottom:0px;
         color: #2d3e66;
         font-family: Freeroad_Regular, Arial;
         line-height: initial;
         padding: 5px 0px;
         font-weight: normal;
    }
    /* text */
     .igem_column_wrapper p {
         font-family: Arial;
         font-size: 16.51px;
         color: #000000;
         text-align: left;
         letter-spacing: 0.25px;
         margin: .8em 0 1em 0;
    }
    /* Links */
     .igem_column_wrapper a {
         color: #2d3e66;
         font-weight: bold;
         text-decoration: underline;
         text-decoration-color:#2d3e66;
         transition: all 0.4s ease;
         -webkit-transition: all 0.4s ease;
         -moz-transition: all 0.4s ease;
         -ms-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
    }
    /* hover for the links */
     .igem_column_wrapper a:hover {
         color: #009f98;
         text-decoration:none;
    }
    /* accessibility focus for the links */
     .igem_column_wrapper a:focus {
         color: #009f98;
         text-decoration:none;
         background-color:#fff2a8;
    }
    /*for images that are href*/
     a.image_href{
         text-decoration:none;
    }
    /* non numbered lists */
     .igem_column_wrapper ul {
         font-family:Arial;
         list-style: disc;
         padding:0px;
         font-size: 16.51px;
         color: #000000;
         text-align: left;
         letter-spacing: 0.25px;
    }
     .igem_column_wrapper td > ul {
         padding:0px;
    }
    /* numbered lists */
     .igem_column_wrapper ol {
         font-family:Arial;
         padding:0px;
         font-size: 16.51px;
         color: #000000;
         text-align: left;
         letter-spacing: 0.25px;
    }
    /* Table */
     .igem_column_wrapper table {
         border: 2px solid #99948f;
         border-collapse: collapse;
         font-size: 120%;
         width: 100%;
    }
     .igem_column_wrapper th {
         background-color: #ddd6d0;
         border: 2px solid #99948f;
         border-collapse: collapse;
         font-size: 17px;
         padding: 10px;
         font-weight: bold;
         vertical-align: text-top;
         text-align: left;
         letter-spacing: 0.25px;
    }
     .igem_column_wrapper td {
         border: 2px solid #99948f;
         border-collapse: collapse;
         padding: 10px;
         vertical-align: text-top;
         font-size: 16.25px;
         color: black;
         text-align: left;
         letter-spacing: 0.25px;
    }
    /*layout classes*/
    /**********************************************************************************************/
    /*layout*/
    /*main layout class */
     .column {
         float:left;
         margin:1% 1%;
         padding: 0px;
    }
    /* 100% */
     .full_size {
         width:98%;
    }
    /* 50% */
     .half_size {
         width: 48%;
    }
    /* 33% */
     .third_size {
         width: 31.33%;
    }
    /* 25% */
     .quarter_size {
         width: 23%;
    }
    /* 66% */
     .two_third_size {
         width: 64.6%;
    }
    /* 75% */
     .three_quarter_size {
         width: 73%;
    }
     .full_size img, .half_size img, .two_third_size img, .third_size img, .three_quarter_size img, .quarter_size img {
         margin-bottom: 15px;
         width: 100%;
    }
    /* page break */
     .clear {
         clear:both;
    }
     .clear.extra_space {
         clear:both;
         height: 15px;
    }
    /*double the extra space to page break with clear class*/
     .clear.double_extra_space {
         height: 30px;
    }
    /*full width image*/
     .full_image{
         width:100%;
         margin-top: -30px;
    }
    /* horizontal gray line to divide the page*/
     .line_divider {
         border-top: 1px solid #99948f;
         margin: auto;
         width: 98%;
    }
    /*highlight class can be used style divs*/
     .highlight {
         padding: 2%;
         border-radius: 10px;
    }
     .column.half_size > .highlight {
        padding:2% 4.08%;
    }
     .column.third_size > .highlight{
        padding: 2% 6.25%;
    }
     .column.quarter_size > .highlight {
         padding: 2% 8.5%;
    }
     .column.three_quarter_size > .highlight {
         padding: 2% 2.7%;
    }
     .column.two_third_size > .highlight {
         padding: 2% 3.03%;
    }
     .highlight.border.dark{
         border: 4px solid #2C3E66;
         background-color: inherit;
    }
     .highlight.border.medium {
         border: 4px solid #5C6F9B;
         background-color: inherit;
    }
     .highlight.border.light {
         border: 4px solid #aab3ca;
         background-color: inherit;
    }
     .highlight.border.red {
         border: 4px solid #DD2626;
         background-color: inherit;
    }
     .highlight.border.gray, .highlight.border {
         border: 4px solid #DDD6D0;
         background-color: inherit;
    }
     .highlight.border.coral {
         border: 4px solid #EE5757;
         background-color: inherit;
    }
     .highlight.border.wine {
         border: 4px solid #C02359;
         background-color: inherit;
    }
     .highlight.border.orange {
         border: 4px solid #F69C55;
         background-color: inherit;
    }
     .highlight.border.purple {
         border: 4px solid #C14998;
         background-color: inherit;
    }
     .highlight.border.teal {
         border: 4px solid #00A099;
         background-color: inherit;
    }
     .highlight.border.lightgreen {
         border: 4px solid #71B94E;
         background-color: inherit;
    }
     .highlight.border.darkgreen{
         border: 4px solid #2F6748;
         background-color: inherit;
    }
     .highlight.border.yellow{
         border: 4px solid #F9EE6E;
         background-color: inherit;
    }
     .highlight.gray {
         background-color:#eae7e5;
         border: 4px solid #eae7e5;
    }
     .highlight.dark{
         border: 4px solid #2C3E66;
         background-color: #2C3E66;
    }
     .highlight.medium{
         border: 4px solid #5C6F9B;
         background-color: #5C6F9B;
    }
     .highlight.light{
         border: 4px solid #aab3ca;
         background-color:#aab3ca;
    }
    /*support classes*/
    /**************************************************************/
    /*Button */
    /************************************************/
     .button {
         font-size: 15px;
         margin: 30px auto;
         text-align: center;
    }
     .button a {
         background-color: #2C3E66!important;
         color: #ffffff!important;
         font-weight: bold;
         margin: auto;
         text-decoration: none !important;
         padding: 10px 15px !important;
         line-height: 18px;
         border-radius: 8px;
         letter-spacing: 0.5px;
         display: inline-flex;
    }
     .button a:hover, .button a:focus {
         background-color: #5C6F9B!important;
    }
     .button.light a {
         background-color: #aab3ca!important;
         color:#2C3E66 !important;
    }
     .button.light a:hover, .button.light a:focus {
         background-color: #2C3E66!important;
         color: #aab3ca !important;
    }
     .button.dark a {
         background-color: #2C3E66 !important;
         color: white!important;
    }
     .button.dark a:hover, .button.dark a:focus {
         background-color: #5C6F9B!important;
    }
    /*coming soon button */
     .button.comingsoon a {
         background-color: #F69C55 !important;
         cursor: default;
    }
     .button.comingsoon a:hover, .button.comingsoon a:focus {
         background-color: #F69C55 !important;
    }
    /*orange button */
     .button.orange a {
         background-color: #F69C55 !important;
    }
    /*purple button */
     .button.purple a {
         background-color: #C14998 !important;
    }
    /*teal button */
     .button.teal a {
         background-color: #00A099 !important;
    }
    /*coral button */
     .button.coral a {
         background-color: #EE5757 !important;
    }
    /*lightgreen button */
     .button.lightgreen a {
         background-color: #71B94E !important;
    }
    /*darkgreen button */
     .button.darkgreen a {
         background-color: #2F6748 !important;
    }
    /*wine button */
     .button.wine a {
         background-color: #C02359 !important;
    }
     .button.yellow a {
         background-color: #F9EE6E !important;
    }
     .button.purple a:hover, .button.orange a:hover, .button.teal a:hover, .button.coral a:hover, .button.lightgreen a:hover, .button.darkgreen a:hover, .button.wine a:hover, .button.yellow a:hover{
         background-color: #5C6F9B !important;
    }
     .button.purple a:focus, .button.orange a:focus, .button.teal a:focus, .button.coral a:focus, .button.lightgreen a:focus, .button.darkgreen a:focus, .button.wine a:focus, .button.yellow a:focus{
         background-color: #5C6F9B !important;
    }
    /*image opacity */
     .image_href:hover{
         opacity: 0.5;
    }
    /*image caption*/
     .igem_column_wrapper p.image_caption {
         font-size: 12px;
    }
    /* dark background highlights*/
     .highlight.decoration_dark_background h3{
         color:#00afaa;
    }
     .highlight.decoration_dark_background{
         background-color: #111c4e;
         border-radius: 15px;
         border: 4px solid #111c4e;
         color: white;
         padding: 4% 1.5%;
    }
    /*make divs next to each other same heigth*/
     .row{
         display: flex;
         clear:both;
         width:100%;
    }
    /*width specifications for posts*/
     .row > .column.half_size {
        display: flex;
    }
     .row > .column.third_size {
        display: flex;
    }
     .row > .column.quarter_size {
        display: flex;
    }
     .row > .column.three_quarter_size {
        display: flex;
    }
     .row > .column.two_third_size {
        display: flex;
    }
    /*width for highlight boxes in rows*/
     .row > .column.half_size > .highlight.gray {
        width:100%;
    }
     .row > .column.third_size > .highlight.gray {
        width:100%;
    }
     .row > .column.quarter_size > .highlight.gray {
        width:100%;
    }
     .row > .column.three_quarter_size > .highlight.gray {
        width:100%;
    }
     .row > .column.two_third_size > .highlight.gray {
        width:100%;
    }
    /*post items */
     .highlight.post {
         border: 4px solid #99948F;
         float: left;
         padding: 1% 
    }
    /*width specifications for posts*/
     .column.full_size > .highlight.post {
        width: 97%;
    }
    /*.column.half_size > .highlight.post {
        width: 96%;
    }
     .column.third_size > .highlight.post {
        width: 95%;
    }
     .column.quarter_size > .highlight.post {
        width: 94%;
    }
     .column.three_quarter_size > .highlight.post {
        width: 96.8%;
    }
     .column.two_third_size > .highlight.post {
        width: 96.6%;
    }
    */
    /*details for the posts */
     .highlight.post > .details{
         clear: both;
         margin:1%;
         font-size:15px;
    }
     .highlight.post > .details > .title{
         font-size: 20px;
         float: left;
         font-family: Freeroad_Regular, Arial;
    }
     .highlight.post > .details > .keyword{
         font-size: 20px;
         float: right;
         color: #98938E;
         font-family: Freeroad_Regular;
         font-style: italic;
    }
    /*Title icons - News posts*/
     .highlight.post > .details > .title.base::before {
         background-image: url(https://static.igem.org/mediawiki/2020/7/7c/Small_icon_igem_gear.svg);
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.alert::before {
         background-image: url('https://static.igem.org/mediawiki/2021/4/44/Small_icon_alert.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.note::before {
         background-image: url('https://static.igem.org/mediawiki/2021/c/cb/Small_icon_note.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.announcement::before {
         background-image: url('https://static.igem.org/mediawiki/2021/8/86/Small_icon_announcement.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.heart::before {
         background-image: url('https://static.igem.org/mediawiki/2021/e/e2/Small_icon_heart.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.notice::before {
         background-image: url('https://static.igem.org/mediawiki/2021/a/a8/Small_icon_notice.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.reminder::before {
         background-image: url('https://static.igem.org/mediawiki/2021/5/58/Small_icon_reminder.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.pinned::before {
         background-image: url('https://static.igem.org/mediawiki/2021/6/63/Small_icon_pinned.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
     .highlight.post > .details > .title.why::before {
         background-image: url('https://static.igem.org/mediawiki/2021/5/51/Small_icon_why.svg');
         background-size: 25px 25px;
         content: "";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
    }
    /*Title icons - Events*/
     .highlight.post > .details > .title.team_meetup::before {
         background-image: url('https://static.igem.org/mediawiki/2021/7/7c/Small_icon_meetup.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
     .highlight.post > .details > .title.igem_hq::before {
         background-image: url('https://static.igem.org/mediawiki/2021/7/7c/Small_icon_igem_gear.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
     .highlight.post > .details > .title.sponsors::before {
         background-image: url('https://static.igem.org/mediawiki/2021/1/18/Small_icon_sponsors.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
     .highlight.post > .details > .title.ambassadors::before {
         background-image: url('https://static.igem.org/mediawiki/2021/f/f8/Small_icon_ambassadors.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
    /*Title icons - collabs*/
     .highlight.post > .details > .title.working_group::before {
         background-image: url('https://static.igem.org/mediawiki/2021/3/3e/Small_icon_working_group.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
     .highlight.post > .details > .title.social_media::before {
         background-image: url('https://static.igem.org/mediawiki/2021/8/80/Small_icon_social_media.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
     .highlight.post > .details > .title.survey::before {
         background-image: url('https://static.igem.org/mediawiki/2021/e/ef/Small_icon_surveys.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
     .highlight.post > .details > .title.creative::before {
         background-image: url('https://static.igem.org/mediawiki/2021/3/3d/Small_icon_design.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
         margin-bottom: -5px;
         margin-left: -3px;
         margin-right: 5px;
    }
    /*post detail icons - event and collab info*/
     .highlight.post > .details > .host::before {
         background-image: url('https://static.igem.org/mediawiki/2021/0/0d/Collab_team.svg');
         background-repeat: no-repeat;
         content: "Team: ";
         font-weight: bold;
         padding-left: 20px;
    }
     .highlight.post > .details > .date::before {
         background-image: url('https://static.igem.org/mediawiki/2021/6/6d/Event_time.svg');
         background-repeat: no-repeat;
         content: "Date: ";
         font-weight: bold;
         padding-left: 20px;
    }
     .highlight.post > .details > .location::before {
         background-image: url('https://static.igem.org/mediawiki/2021/6/64/Collab_location.svg');
         background-repeat: no-repeat;
         content: "Location: ";
         font-weight: bold;
         padding-left: 20px;
    }
     .highlight.post > .details > .contact::before {
         background-image: url('https://static.igem.org/mediawiki/2021/f/f5/Collab_contact.svg');
         background-repeat: no-repeat;
         content: "Contact: ";
         font-weight: bold;
         padding-left: 20px;
    }
    /******************************************************************************************/
    /******************************************************************************************/
    /******************************************************************************************/
    /* iconography for posts */
     .small_icon.email {
         background-image: url(https://static.igem.org/mediawiki/2021/f/f5/Collab_contact.svg);
         background-repeat: no-repeat;
         display: inline-block;
         height: 25px;
         margin-bottom: -7px;
         width: 25px;
    }
    /******************************************************************************************/
    /******************************************************************************************/
    /******************************************************************************************/
    /*on this page */
     .on_page::after{
         background-image:url('https://static.igem.org/mediawiki/2021/7/7d/On_this_page.svg');
         background-size: 25px 25px;
         content:"";
         display: inline-block;
         height: 25px;
         width: 25px;
    }
    /*hub icon next to hub title*/
     .hub_icon_title{
         width: 20px;
         float: left;
         margin-right: 8px;
    }
    /* center content */
     p.center_content, h1.center_content, h2.center_content, h3.center_content, h4.center_content, h5.center_content, h6.center_content, img.center_content {
         margin:auto;
         text-align:center!important;
    }
    /*Multiple links in a ul */
    /************************************************/
     .multiple_links a{
         color: black !important;
    }
     .multiple_links a:hover {
         color: #00afaa !important;
    }
    /*Make text red and bold*/
    /************************************************/
     .red_text {
         color: #ED2424!important;
         font-weight:bold;
    }
    /**gallerys *****************************************************************************/
     .gallery > .content, .gallery > .controls{
         float: left;
         width: 100%;
         height: 100%;
         position: relative;
    }
     .gallery > .controls{
         margin-top:10px;
    }
     .gallery > .content > .slide img {
         margin-bottom: 0px;
    }
     .gallery > .content > .slide{
         display:none;
    }
     .gallery > .content > .slide.current {
         display:block;
    }
     .gallery > .controls > .button{
         float: left;
         height: 26px;
         width: 36px;
         border: 2px solid #2C3E66;
         background-color: #aab3ca;
         border-radius: 5px;
         color: #2C3E66;
         font-weight: bold;
         margin: 0px 10px 0px 0px;
         padding: 8px 0px 0px 0px;
         cursor: pointer;
    }
     .gallery > .controls > .button.current, .gallery > .controls > .button:hover{
         background-color:#2C3E66;
         color:#ffffff;
    }
     .content > .navigation.prev, .content> .navigation.next{
         width: 40px;
         height: 50%;
         background-color:#99948F;
         position: absolute;
         float: left;
         z-index: 1;
         bottom: 25%;
         border-radius: 5px;
         cursor: pointer;
         opacity: 50%;
         text-align: center;
         font-weight: bold;
         font-size: 18px;
         background-position: center;
         background-repeat: no-repeat;
         background-image: url(https://static.igem.org/mediawiki/2021/a/a8/Icon_arrow_left.svg);
    }
     .content > .navigation.next{
         right: 0;
         background-image: url(https://static.igem.org/mediawiki/2021/e/e6/Icon_arrow_right.svg);
    }
     .content > .navigation.prev:hover, .content> .navigation.next:hover{
         opacity: 100%;
    }
    /******************************************/
    /*navigation_support*/
     .navigation_support {
         float: left;
         background-color: #eae7e5;
         padding: 11px 13px 0px 13px;
         margin-right: 1%;
         margin-bottom: 1%;
         border-radius: 5%;
         height: 33px;
         color: #636263;
         border: 3px solid #eae7e5;
    }
     .navigation_support.title{
         background-color: #fff;
         border: 3px solid #eae7e5;
    }
     .navigation_support:hover, .active{
         background-color:#2d3e66;
         border: 3px solid #2d3e66;
         color:#ffffff;
    }
    /*track navigation */
    /************************************************/
     .track_navigation{
         float:left;
         width:7.69%;
    }
     .track_navigation> img {
         opacity: 1.0;
    }
     .track_navigation> img:hover{
         opacity: 0.5;
    }
    /*calendar*/
    /***********************************************/
     .month_title{
         color: #2C3E66;
         font-family: Freeroad_Regular, Arial;
         line-height: initial;
         padding: 9px 0px;
         font-size: 200%;
         margin-bottom: 10px;
    }
     .calendar_accordion_control{
         background-color: #2C3E66;
         border-radius: 14%;
         color: #ffffff !important;
         float: left;
         margin: -10px 20px 0px 0px;
         text-align: center;
         padding: 10px 0px 5px 0px;
         width: 40px;
         cursor: pointer;
    }
     .calendar_accordion_control:hover, .calendar_accordion_control.purple:hover {
         background-color:#5C6F9B;
    }
     .calendar_accordion_control::before {
         content: "-";
    }
     .calendar_accordion_control.hide::before {
         content: "+";
    }
     .calendar_accordion_content{
         display: block;
         margin-bottom: 15px;
         float: left;
         width:100%;
    }
     .calendar_accordion_content.hide{
         display: none;
         padding-bottom: 0px;
    }
    /*deadline's date*/
     .deadline_date {
         border: 2px solid #c1c1c1;
         border-radius: 5%;
         color: #000;
         float: left;
         font-size: 155%;
         font-weight:bold;
         margin-right: 5%;
         max-width: 100px;
         padding: 30px 0px;
         text-align: center;
         width: 15%;
    }
    /* description of the deadline*/
     .deadline_content {
         float: left;
         width:75%;
    }
    /*controlled image size*/
     .controlled_size_image{
         max-width: 300px;
    }
    /*read more class for large sections of text*/
     .read_more {
         background-color:#2C3E66;
         border: 1px solid #2C3E66;
         border-radius:5px;
         color: #ffffff;
         font-weight: bold;
         padding: 0px 12px;
    }
     .read_more:hover, .read_more:focus {
         background-color:#5C6F9B;
         border: 1px solid #5C6F9B;
         color: #ffffff;
         cursor:pointer;
    }
     .read_more::before{
         content: "Read more";
         white-space:nowrap;
    }
     .read_more.show_less::before{
         content: "Show less";
    }
     .read_more_text{
         display:none;
    }
    /************/
    /*subtitle sections */
     .subtitle_wrapper{
        width:100%;
        float:left;
         height: 60px;
    }
     .subtitle_wrapper > .subtitle{
         width: 72%;
         margin-left: 3%;
         float: left;
    }
     .subtitle_wrapper > .subtitle.single_line{
         padding-top: 14px;
    }
     .subtitle_wrapper > .accordion{
         width:12%;
        float:right;
    }
     .subtitle_wrapper > .icon{
         width: 13%;
         float: left;
         background-size: 100%;
         height: 60px;
         background-repeat: no-repeat;
    }
     .subtitle_wrapper > .icon.competition_requierements{
         background-image: url(https://static.igem.org/mediawiki/2021/f/f8/Competition_requierements.svg);
    }
     .subtitle_wrapper.page_title > .icon{
         width: 8%;
         float: left;
         background-size: 50px;
         height: 60px;
         background-repeat: no-repeat;
    }
     .subtitle_wrapper.page_title > .subtitle{
         margin-left:0px;
         width:90%;
         padding-top:14px;
    }
    /*new accordions*/
    /**accordions + / - */
     .accordion_control{
         background-color: #2d3e66;
         border-radius: 50%;
         color: #ffffff !important;
         margin: 9px 0px 0px 0px;
         text-align: center;
         font-size: 25px;
         cursor: pointer;
         font-weight: bold;
         height: 28px;
         width: 35px;
         float: right;
         padding: 8px 2px 2px 2px;
    }
     .accordion_control.purple{
         background-color: #C14998;
    }
     .accordion_control:hover, .accordion_control.purple:hover{
         background-color: #5c709b;
    }
     .accordion_control::before{
         content:"+";
    }
     .accordion_control.expanded::before{
         content:"-";
    }
     .accordion_content{
        display:none;
    }
     .accordion_content.open{
        display:block;
    }
    /*font changes for */
     .highlight.dark h1, .highlight.dark h2, .highlight.dark h3, .highlight.dark h4, .highlight.dark h5, .highlight.dark h6 {
         color:#F59B55;
    }
     .highlight.medium h1, .highlight.medium h2, .highlight.medium h3, .highlight.medium h4, .highlight.medium h5, .highlight.medium h6 {
         color:#F8ED6E;
    }
     .highlight.dark p, .highlight.medium p, .highlight.dark li, .highlight.medium li {
         color:#ffffff;
    }
     .highlight.border.dark p, .highlight.border.medium p, .highlight.boder.dark h1, .highlight.border.medium h1, .highlight.border.dark h2, .highlight.border.medium h2, .highlight.border.dark h3, .highlight.border.medium h3, .highlight.border.dark h4, .highlight.border.medium h4, .highlight.border.dark h5, .highlight.border.medium h5, .highlight.border.dark h6, .highlight.border.medium h6, .highlight.border.dark li, .highlight.border.medium li {
         color:black;
    }
    /***************************/
    /*COLLABORATIONS PAGE */
     #filtered_options{
        display:none;
    }
    /* div to hold a long list and make it scrollable*/
     .scrolling_list{
         border: 1px solid #e2dee1;
         height: 300px;
         overflow-y: scroll;
         padding:10px;
    }
     .scrolling_list.show_all{
         border: 1px solid #ffffff;
         height: auto;
    }
     .scrolling_list::-webkit-scrollbar {
         width: 1em;
    }
     .row.grey_backgrounds > .column.half_size > .scrolling_list::-webkit-scrollbar-thumb {
         background-color: #0069A6;
         outline: 1px solid #0069A6;
    }
     .scrolling_list::-webkit-scrollbar-track {
         background-color:#f2f2f2;
    }
     .scrolling_list::-webkit-scrollbar-thumb {
         background-color: #e2dee1;
         outline: 1px solid #e2dee1;
    }
     .scrolling_list.show_all::-webkit-scrollbar-track {
         background-color:#ffffff;
    }
    /* for long list - example collaborations */
     .left_square{
         background-color: #e2dee1;
         border-radius: 5%;
         border: 2px solid #e2dee1;
         color: #000000;
         float: left;
         font-size: 110%;
         font-weight: bold;
         height: 25px;
         margin-right: 1%;
         max-width: 25px;
         min-width: 25px;
         padding: 7px 5px 0px 5px;
         text-align: center;
    }
    /* for long list - example collaborations */
     .left_square .white_b{
         background-color: #e2dee1;
         border-radius: 5%;
         border: 2px solid #e2dee1;
         color: #000000;
         float: left;
         font-size: 110%;
         font-weight: bold;
         height: 25px;
         margin-right: 1%;
         max-width: 25px;
         padding: 7px 15px 0px 15px;
         text-align: center;
         width: 2%;
    }
     .left_square.sponsor_icon{
         background-image: url(https://static.igem.org/mediawiki/2021/1/18/Small_icon_sponsors.svg);
         background-size: 25px;
         background-color: white;
         background-repeat: no-repeat;
         background-position: center;
    }
     .left_square.ambassadors_icon{
         background-image: url('https://static.igem.org/mediawiki/2021/f/f8/Small_icon_ambassadors.svg');
         background-size: 25px;
         background-color: white;
         background-repeat: no-repeat;
         background-position: center;
    }
     .left_square.igemhq_icon{
         background-image: url('https://static.igem.org/mediawiki/2021/7/7c/Small_icon_igem_gear.svg');
         background-size: 25px;
         background-color: white;
         background-repeat: no-repeat;
         background-position: center;
    }
     .left_square.meetup_icon{
         background-image: url('https://static.igem.org/mediawiki/2021/7/7c/Small_icon_meetup.svg');
         background-size: 25px;
         background-color: white;
         background-repeat: no-repeat;
         background-position: center;
    }
    /* wrapper for the elements of the list*/
     .styled_list_item{
         float:left;
         margin-bottom:5px;
         width:100%;
    }
    /*information side of the list */
     .right_side_info{
         float:left;
         margin-top: -11px;
         width:80%;
    }
     .right_side_info p{
         padding:0px;
    }
     .scroll_control{
         background-color: #0069A6;
         border-radius: 5%;
         border: 2px solid #f2f2f2;
         color: #ffffff;
         cursor: pointer;
         float: left;
         font-size: 110%;
         font-weight: bold;
         height: 30px;
         margin: 10px;
         padding: 7px 15px 0px 15px;
    }
     .scroll_control:hover{
         background-color:#00afaa;
         color:#ffffff;
    }
     .scroll_control::before{
         content:'SHOW MORE';
    }
     .scroll_control.show_less::before{
         content:'SHOW LESS';
    }
    /* button for sorting options of the collabs*/
     .sort_option{
         background-color: #f2f2f2;
         border-radius: 5%;
         border: 2px solid #f2f2f2;
         color: #000000;
         cursor:pointer;
         float:left;
         font-size: 110%;
         font-weight: bold;
         height: 30px;
         margin: 10px;
         padding: 7px 15px 0px 15px;
    }
     .sort_option.current_option, .sort_option:hover {
         background-color:#2C3E66 ;
         border: 2px solid #2C3E66;
         color:#fff;
    }
    /*information for collaborations */
     .details .post_information {
         clear:both;
         color: black;
         float:left;
         font-size: 130%;
         margin-bottom:1%;
         width: 100%;
    }
     .details .post_information.post_team::before {
         background-image: url(https://static.igem.org/mediawiki/2021/0/0d/Collab_team.svg);
         background-repeat: no-repeat;
         content: "Team: ";
         font-weight: bold;
         padding-left: 20px;
    }
     .details .post_information.post_location::before {
         background-image: url(https://static.igem.org/mediawiki/2021/6/64/Collab_location.svg);
         background-repeat: no-repeat;
         content: "Location: ";
         font-weight: bold;
         padding-left: 20px;
    }
     .details .post_information.post_contact::before {
         background-image: url(https://static.igem.org/mediawiki/2021/f/f5/Collab_contact.svg);
         background-repeat: no-repeat;
         content: "Contact: ";
         font-weight: bold;
         padding-left: 20px;
    }
     .details .post_information.post_date::before {
         background-image: url('https://static.igem.org/mediawiki/2021/6/6d/Event_time.svg');
         background-repeat: no-repeat;
         content: "Date: ";
         font-weight: bold;
         padding-left: 20px;
    }
    /* specifications for information details for the collaboration page */
     .column.full_size > .highlight.post_item > .column.full_size, .column.full_size > .characteristics_x > .highlight.post_item > .column.full_size {
         width:100%;
         margin: 1% 0px 0px 0px;
    }
     .column.full_size > .characteristics_x > .highlight.post_item > .column.three_quarter_size{
         margin: 0;
         width: 75%;
    }
     .column.full_size > .highlight.post_item > .column.full_size p, .column.full_size > .characteristics_x > .highlight.post_item > .column.full_size p{
         padding:0px 1%;
    }
     .column.full_size > .highlight.post_item > .column.three_quarter_size p, .column.full_size > .characteristics_x >.highlight.post_item > .column.three_quarter_size p{
         padding: 0px 5% 0px 1%;
    }
    /*main page*/
     .main_message{
         background-color:#ed242724;
         border-top: 4px solid #ED2427;
         border-bottom: 4px solid #ED2427;
         margin-top:0px;
         padding: 2.5% 4% 1% 4%;
         width:92%;
         text-align:left;
         float:left;
    }
     .main_message .icon_alert{
         float: left;
         margin-left: -4px;
         margin-top: -7px;
         width: 30px;
         background-image: url(https://static.igem.org/mediawiki/2021/4/44/Small_icon_alert.svg);
         background-size: 25px 25p x;
         display: inline-block;
         height: 25px;
         background-repeat: no-repeat;
         width: 25px;
         padding-right:10px;
    }
     .main_message .title{
         border-bottom: 0px;
         color: #1e1d1e;
         float: left;
         font-family: Freeroad_Regular;
         font-size: 150% 
    }
     .main_message .text{
         float: left;
    }
     .main_message .text p{
         font-size: 130%;
         font-family: Arial;
         padding: 5px 0px;
    }
     .main_message .text a{
         color: #2C3E66;
         font-weight: bold;
         text-decoration: underline;
         text-decoration-color: #2C3E66;
    }
     .main_message .text a:hover{
         text-decoration:none;
    }
     .main_welcome_img{
         margin-top:-60px;
    }
    /*styled select dropdowns */
     .styled_select{
         padding: 10px;
         background-color: #2c3e66;
         border: 2px solid #2c3e66;
         font-weight: bold;
         margin-top: 5px;
         border-radius: 5px;
         cursor: pointer;
         color: #ffffff;
    }
     .styled_select:hover{
         background-color: #abb4ca;
         color: #2c3e66;
    }
     .title_interaction{
         float: left;
         font-size: 130%;
         padding-top: 18px;
        font-family: Freeroad_Bold, Arial;
         margin-right: 16px;
    }
     .full_size_image{
        margin-top:-60px;
    }
    /*iconography*/
     .subtitle_wrapper > .icon.competition_rules{
         background-image: url(https://static.igem.org/mediawiki/2021/8/8c/Competition_rules.svg);
    }
     .subtitle_wrapper > .icon.competition_register_team{
         background-image: url(https://static.igem.org/mediawiki/2021/b/b9/Competition_register_team.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables{
         background-image: url(https://static.igem.org/mediawiki/2021/e/ee/Competition_deliverables.svg);
    }
     .subtitle_wrapper > .icon.competition_positive_contribution{
         background-image: url(https://static.igem.org/mediawiki/2021/d/d9/Competition_positive_contribution.svg);
    }
     .subtitle_wrapper > .icon.competition_fees{
         background-image: url(https://static.igem.org/mediawiki/2021/5/59/Competition_fees.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_wiki{
         background-image: url(https://static.igem.org/mediawiki/2021/f/ff/Competition_deliverables_wiki.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_poster{
         background-image: url(https://static.igem.org/mediawiki/2021/5/56/Competition_deliverables_poster.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_presentation{
         background-image: url(https://static.igem.org/mediawiki/2021/2/2c/Competition_deliverables_presentation.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_video{
         background-image: url(https://static.igem.org/mediawiki/2021/e/e2/Competition_deliverables_video.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_judging_form{
         background-image: url(https://static.igem.org/mediawiki/2021/9/95/Competition_deliverables_judgingform.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_attributions{
         background-image: url(https://static.igem.org/mediawiki/2021/e/e1/Competition_deliverables_attribution.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_safety_forms{
         background-image: url(https://static.igem.org/mediawiki/2021/6/6d/Competition_deliverables_safetyforms.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_registry_pages{
         background-image: url(https://static.igem.org/mediawiki/2021/0/0a/Competition_deliverables_registrypages21.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_project_description{
         background-image: url(https://static.igem.org/mediawiki/2021/5/56/Competition_deliverables_projectdescription.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_title_abstract{
         background-image: url(https://static.igem.org/mediawiki/2021/e/e5/Competition_deliverables_titleandabstract.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_track_selection{
         background-image: url(https://static.igem.org/mediawiki/2021/c/c9/Competition_deliverables_trackselection.svg);
    }
     .subtitle_wrapper > .icon.competition_deliverables_team_roster{
         background-image: url(https://static.igem.org/mediawiki/2021/8/8f/Competition_deliverables_teamroster.svg);
    }
     .subtitle_wrapper > .icon.judging_introduction{
         background-image: url(https://static.igem.org/mediawiki/2021/c/c8/Judging_introduction2.png);
    }
     .subtitle_wrapper > .icon.judging_medals{
         background-image: url(https://static.igem.org/mediawiki/2021/b/b0/Judging_medals.svg);
    }
     .subtitle_wrapper > .icon.judging_awards{
         background-image: url(https://static.igem.org/mediawiki/2021/7/7a/Judging_awards2.png);
    }
     .subtitle_wrapper > .icon.judging_pagesforawards{
         background-image: url(https://static.igem.org/mediawiki/2021/4/45/Judging_pagesforawards2.png);
    }
     .subtitle_wrapper > .icon.judging_rubric{
         background-image: url(https://static.igem.org/mediawiki/2021/5/50/Judging_rubric3.png);
    }
     .subtitle_wrapper > .icon.judging_resourcesforjudges{
         background-image: url(https://static.igem.org/mediawiki/2021/6/6f/Judging_resources2.png);
    }
     .subtitle_wrapper > .icon.judging_judginghandbook{
         background-image: url(https://static.igem.org/mediawiki/2021/8/83/Judging_handbook2.png);
    }
     .subtitle_wrapper > .icon.judging_applytojudge{
         background-image: url(https://static.igem.org/mediawiki/2021/f/f4/Judging_apply2.png);
    }
     .subtitle_wrapper > .icon.teams_slack{
         background-image: url(https://static.igem.org/mediawiki/2021/3/37/Icon_slack.svg);
    }
     .subtitle_wrapper > .icon.resources_findinspiration{
         background-image: url('https://static.igem.org/mediawiki/2021/f/fb/Resources_findinspiration.svg');
    }
     .subtitle_wrapper > .icon.resources_findspace{
         background-image: url('https://static.igem.org/mediawiki/2021/9/97/Resources_findspace.svg');
    }
     .subtitle_wrapper > .icon.safety_environmental{
         background-image: url('https://static.igem.org/mediawiki/2021/7/73/Safety_enviromentalsamples.svg');
    }
     .subtitle_wrapper > .icon.safety_riskgroups{
         background-image: url('https://static.igem.org/mediawiki/2021/a/ab/Safety_biosafetylvl.svg');
    }
     .subtitle_wrapper > .icon.safety_whitelist{
         background-image: url('https://static.igem.org/mediawiki/2021/c/c8/Safety_whitelist.svg');
    }
    /*video containers and iframes */
     .video-container {
         position: relative;
         padding-bottom: 56.25%;
         height: 0;
         overflow: hidden;
    }
     .video-container iframe {
         position: absolute;
         top:0;
         left: 0;
         width: 100%;
         height: 100%;
    }
    /*mobile*/
    /**********************************************************************************************/
    /*mobile */
    /* 1100px */
    /************************************************/
     @media only screen and (max-width: 1100px) {
         .igem_menu{
             display:none;
             float: right;
             position: fixed;
             margin-top: 40px;
        }
         .igem_mobile_menu_bar{
            display:block
        }
         .igem_content_wrapper {
            width:100%;
             padding-top:40px;
        }
         .igem_column_wrapper{
            padding-top:25px;
        }
        /*full width image*/
         .full_image{
             margin-top: -55px;
        }
    }
    /* 850px */
    /************************************************/
     @media only screen and (max-width: 850px) {
         .igem_column_wrapper {
            width: 96%;
        }
    }
    /* 650px */
    /************************************************/
     @media only screen and (max-width: 650px) {
         .full_size, .half_size, .two_third_size, .third_size, .three_quarter_size, .quarter_size {
            width:98%;
        }
         .row{
            display:initial;
        }
         .column.full_size > .highlight, .column.half_size > .highlight, .column.third_size > .highlight, .column.two_third_size > .highlight, .column.three_quarter_size > .highlight, .column.quarter_size > .highlight{
             padding:2%;
        }
    }
</style>

<script>
    // This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
    $(document).ready(function() {

        //check if the user is in the approved list to view Dev pages and HQ info content
        function check_if_user_allowed() {

            switch (wgUserName) {
                case "Sifuentes anita":
                case "Vinoo":
                case "THaddock":
                case "Meagan":
                case "Abigail":
                case "Kitwa":
                case "Pdmillett":
                case "Randy":
                case "disrani":
                case "alexanian":
                case "schlander":
                case "emoustaka":
                case "Nemanja":
                case "Bluepumpkin":
                case "Palmer":
                case "tk":
                case "psilver":
                case "drew":
                case "kinglchow":
                case "edeisenstein":
                case "jakebeal":
                case "rnlanger":
                case "Mstine":
                case "Nluebke":
                case "Cworkman":
                case "Pjwu":
                case "pauljames":
                case "nluebke":
                case "Bbeason":
                case "Bocemun":
                case "maschi":
                case "Maschi":
                case "sorensera":
                case "Sorensera":
                case "Caro_Elizondo":
                case "caro_elizondo":
                case "hassnain_qasim":
                case "Hassnain_Qasim":
                case "alexanian":
                case "kristinellis":
                    return true;
                    break;

                default:
                    return false;
                    break;
            }
        }

        //general menu functionality
        function menu_functionality() {

            //accessing submenus and subsubmenus
            $(".submenu_access").click(function() {
                $(this).toggleClass("showing");
                $(this).next().fadeToggle(400);
            });

            //mobile menu access 
            $(".igem_mobile_menu_bar").click(function() {
                $(this).next().fadeToggle(400);
            });

        }

        //highlight current page in the menu
        function highlight_current_page_menu() {

            var page_url = "https://2021.igem.org/";

            switch ((wgPageName.match(/\//g) || []).length) {

                //this is a hub
                case 0:
                    page_url = page_url + wgPageName;
                    $("a[href$='" + page_url + "']").parent().addClass("current_hub");
                    $(".current_hub .igem_submenu").fadeToggle(400);
                    $(".current_hub .igem_submenu").prev().toggleClass("showing");
                    break;

                case 1:
                    //open the hub
                    page_url = page_url + wgPageName.substring(0, wgPageName.indexOf('/'));
                    $("a[href$='" + page_url + "']").parent().addClass("current_hub");
                    $(".current_hub .igem_submenu").fadeToggle(400);
                    $(".current_hub .igem_submenu").prev().toggleClass("showing");

                    // select sub menu page
                    page_url = "https://2021.igem.org/" + wgPageName;
                    $("a[href$='" + page_url + "'] > .submenu_item").addClass("current_page");

                    // if sub menu has a sub sub menu - open it 
                    $(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
                    $(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);

                    break;

                case 2:
                    //open the hub
                    page_url = page_url + wgPageName.substring(0, wgPageName.indexOf('/'));
                    $("a[href$='" + page_url + "']").parent().addClass("current_hub");
                    $(".current_hub .igem_submenu").fadeToggle(400);
                    $(".current_hub .igem_submenu").prev().toggleClass("showing");

                    page_url = "https://2021.igem.org/";
                    page_url = page_url + wgPageName.substring(0, wgPageName.lastIndexOf('/'));
                    $("a[href$='" + page_url + "'] > .submenu_item").addClass("current_page");

                    $(".current_page").parent().next().toggleClass("showing");
                    $(".current_page").parent().next().next().fadeToggle(400);

                    page_url = "https://2021.igem.org/";
                    page_url = page_url + wgPageName;
                    $("a[href$='" + page_url + "'] > .subsubmenu_item").addClass("current_subpage");

                    // if sub menu has a sub sub menu - open it 
                    break;
            }
        }

        //if there is a gallery/carousels on the page
        if ($('.gallery').length > 0) {

            //first, get total number of gallerys on the page
            var total_gallerys = $('.gallery').length;
            //create an array to store them
            var gallery_ids = [];

            //setup
            var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>";
            let slide_counter = 0;

            //next get their unique ids and setup navigation controls 
            for (x = 0; x < total_gallerys; x++) {

                //setup: add navigation buttons 
                $('.gallery:eq(' + x + ') > .content').prepend(navigation);

                //setup: count number of slides to add controls buttons 
                slide_counter = $('.gallery:eq(' + x + ') > .content > .slide').length;

                for (y = 0; y < slide_counter; y++) {
                    $('.gallery:eq(' + x + ') > .controls').append("<div class='button'>" + (y + 1) + "</div>");
                }

                //add current to first slide and first button
                $('.gallery:eq(' + x + ') > .content > .slide:eq(0)').addClass('current');
                $('.gallery:eq(' + x + ') > .controls > .button:eq(0)').addClass('current');

                //only add the carousels for autorotation
                gallery_ids[x] = $('.gallery.carousel:eq(' + x + ')').attr('id');
            }

            //activate gallery controls and rotation function
            gallery_slides(gallery_ids);
        }

        ////////////////////////////////////////////////////////////
        //GALLERIES + CAROUSELS 
        function gallery_slides(gallery_ids) {

            var clicked_gallery = '';

            //if a navigation button is clicked
            $('.gallery > .content> .navigation').click(function() {

                //get which gallery was clicked
                clicked_gallery = $(this).parent().parent().attr('id');

                //make clicked element have a temp class
                $(this).addClass('temp');

                clicking_gallerys(clicked_gallery, gallery_ids, 'navigation');

            });

            //if a button is clicked
            $('.gallery > .controls> .button').click(function() {

                //get which gallery was clicked
                clicked_gallery = $(this).parent().parent().attr('id');

                //make clicked element have a temp class
                $(this).addClass('temp');

                clicking_gallerys(clicked_gallery, gallery_ids, 'button');
            });

            //automatic rotation
            //variable to hold the class specifications for slides + buttons
            var slide = '';
            var button = ''
            //for each gallery in the page
            //change images every 3.5 seconds

            window.setInterval(function() {

                for (y = 0; y < gallery_ids.length; y++) {

                    //specific ids > classes
                    slide = '#' + gallery_ids[y] + '> .content > .slide';
                    button = '#' + gallery_ids[y] + '> .controls> .button';

                    //check if there is another sibling next
                    if ($(slide + '.current').next().length > 0) {

                        $(slide + '.current').next().addClass('temp');
                        $(button + '.current').next().addClass('temp');
                    }

                    //if not, setup for next round to start at the beginning of the gallery
                    else {
                        $(slide).first().addClass('temp');
                        $(button).first().addClass('temp');
                    }

                    //for current slide, remove current status so its not displayed anymore
                    $(slide + '.current').removeClass('current');
                    $(button + '.current').removeClass('current');

                    //for next slide, add current status so it can be seen now
                    $(slide + '.temp').removeClass('temp').addClass('current');
                    $(button + '.temp').removeClass('temp').addClass('current');
                }
            }, 3500);
        }

        function clicking_gallerys(clicked_id, gallery_ids, type_of_click) {

            //store the current number 
            var c_number = '';

            //for a button clicked, it will base it off temp 
            if (type_of_click == 'button') {
                $('#' + clicked_id + '> .controls > .button').html(function(i) {
                    if ($(this).hasClass('temp')) {
                        c_number = i;
                    }
                });
            }

            //for a navigation button, it will get current button and add or subtract to it
            if (type_of_click == 'navigation') {

                $('#' + clicked_id + '> .content > .slide').html(function(u) {
                    if ($(this).hasClass('current')) {
                        c_number = u;
                    }
                });

                //is it previous or next?
                if ($('#' + clicked_id + '> .content> .navigation.temp').hasClass('next')) {
                    c_number++;

                    //if it surpases the number of siblings, return to 0
                    if (c_number >= ($('#' + clicked_id + '> .content > .slide').length)) {
                        c_number = 0;
                    }
                }
                if ($('#' + clicked_id + '> .content> .navigation.temp').hasClass('prev')) {
                    c_number--;
                }
            }

            //remove and append

            //clean temps
            $('#' + clicked_id + '> .controls > .button.temp').removeClass('temp');
            $('#' + clicked_id + '> .content> .navigation.temp').removeClass('temp');

            //remove previous selection
            $('#' + clicked_id + '> .controls >.button.current').removeClass('current');
            $('#' + clicked_id + '> .content >  .slide.current').removeClass('current');

            //add current selection     
            $('#' + clicked_id + '> .content > .slide:eq(' + c_number + ')').addClass('current');
            $('#' + clicked_id + '> .controls > .button:eq(' + c_number + ')').addClass('current');

            //remove that id from rotation
            var index = gallery_ids.indexOf(clicked_id);

            if (index > -1) {
                gallery_ids.splice(index, 1);
            }

            return gallery_ids;
        }

        //function for image sliders
        function image_slider_rotation() {

            var slider_counter;
            var clicked_image_number = 0;
            var controller_number = 0;

            //constant rotation
            setInterval(function() {

                slider_counter = $("ul.image_slider li.current_image").index() + 1;

                $("ul.image_slider li.current_image").removeClass("current_image");
                $("ul.image_number li.current_image_number").removeClass("current_image_number");

                if (slider_counter >= $('ul.image_slider li').length) {
                    slider_counter = 1;
                } else {
                    slider_counter += 1;
                }

                $("ul.image_slider li:nth-child(" + slider_counter + ")").addClass("current_image");
                $("ul.image_number li:nth-child(" + slider_counter + ")").addClass("current_image_number");

            }, 5000);

            //if a number is clicked 
            $("ul.image_number li").click(function() {
                clicked_image_number = $(this).index() + 1;

                $("ul.image_slider li.current_image").removeClass("current_image");
                $("ul.image_number li.current_image_number").removeClass("current_image_number");

                $("ul.image_slider li:nth-child(" + clicked_image_number + ")").addClass("current_image");
                $("ul.image_number li:nth-child(" + clicked_image_number + ")").addClass("current_image_number");
            });

            //if a controller next/prev is clicked 
            $(".image_controller").click(function() {
                controller_number = $("ul.image_slider li.current_image").index() + 1;

                $("ul.image_slider li.current_image").removeClass("current_image");
                $("ul.image_number li.current_image_number").removeClass("current_image_number");

                if ($(this).hasClass("next")) {
                    if (controller_number >= $('ul.image_slider li').length) {
                        controller_number = 1;
                    } else {
                        controller_number += 1;
                    }
                } else if ($(this).hasClass("prev")) {
                    if (controller_number <= 1) {
                        controller_number = $('ul.image_slider li').length;
                    } else {
                        controller_number -= 1;
                    }
                }

                $("ul.image_slider li:nth-child(" + controller_number + ")").addClass("current_image");
                $("ul.image_number li:nth-child(" + controller_number + ")").addClass("current_image_number");

            });
        }

        // load desired content function
        function load_these_items(source_page, destination_div) {

            $("#" + destination_div).load(source_page, function() {});
        }

        //display what option the user selected
        function displaying_selected_sort_option() {

            var hold_content = "";
            var selected_sorting_type;

            //when the user clicks 
            $('.sort_option').click(function() {

                //clean and remove
                $("#filtered_options").empty();
                $('.current_option').removeClass('current_option');
                $(this).addClass('current_option');

                //get id / what type of collab the user selected
                selected_sorting_type = $(this).attr('id');

                //in case all were selected, display the default div
                if (selected_sorting_type == "all") {
                    $("#filtered_options").hide();
                    $("#all_options").show();
                } else {
                    //else, hide default div 
                    $("#all_options").hide();

                    //find all instances of the class
                    $('.' + selected_sorting_type).each(function(index) {

                        if (wgPageName.includes("Schedule")) {
                            hold_content = hold_content + $(this).html();
                        } else {
                            hold_content = hold_content +
                                "<div class='clear extra_space'></div>" +
                                $(this).html();
                        }
                    });

                    //append and show
                    $("#filtered_options").append(hold_content);
                    $("#filtered_options").show();

                    //clean hold content
                    hold_content = "";
                }
            });
        }

        ////////////////////////////////////////////////////////////
        //TIME ZONE CONVERTER

        //time zone functions 
        //main function for switching time
        function change_time_zone(month, day, time, duration, change) {

            //holds days per month 
            const days_in_month = [31, 28, 31, 30,
                31, 30, 31, 31,
                30, 30, 30, 31
            ];

            //maximum amount of days in the month we are in 
            var months_days_limit = days_in_month[month];

            //time event starts 
            var time_start = time + change;

            //convert duration minutes in military format (e.g. 90 --> 130)
            //note that, if duration is already in military format, this makes no change 
            if (duration % 60 == 0) {
                duration = (duration / 60) * 100;
            } else if (duration > 60) {
                duration = (((duration / 60) | 0) * 100) + (duration % 60);
            }

            //add converted minutes
            var time_end = time_start + duration;

            //check if time_end needs to be adjusted
            var time_end_minutes = time_end % 100;

            if (time_end_minutes == 60) {
                time_end = (time_end - 60) + 100;
            } else if (time_end_minutes > 60) {
                //from those minutes, get how many hours
                var sixty = ((time_end_minutes / 60) | 0) * 100;

                //add hours plus minutes in military format
                time_end_minutes = sixty + ((time_end % 100) - 60);

                //get the final time end by adding the correct minute convertion
                time_end = (time_start - (time_start % 100)) + time_end_minutes;
            }

            //check if adjusted time change crosses the international date line
            if (time_start >= 2400) {

                time_start = time_start - 2400;
                day = day + 1;
            } else if (time_start < 0) {

                time_start = time_start + 2400;
                day = day - 1;
            }

            // check if adjusted end time crosses the date line
            // unlike above, no change to the day, as we consider only the start day
            if (time_end >= 2400) {
                time_end = time_end - 2400;
            } else if (time_end < 0) {
                time_end = time_end + 2400;
            }

            //check if the new day switches months
            if (day > months_days_limit) {
                month = month + 1;
                day = day - months_days_limit;
            }
            if (day <= 0) {
                month = month - 1;
                day = days_in_a_month[month];
            }

            //style date and time
            var date_changed = month_day_for_display(month, day) + ", " +
                hour_for_display(time_start) + " - " +
                hour_for_display(time_end);

            //return date changed and styled
            return date_changed;
        }

        //switch hours from 24 to 12 format
        function switch_to_twelve_hour(hour) {
            if (hour % 12 == 0) return 12; // no such thing as 0 hours  
            return hour % 12;
        }

        //make months + days look nice
        function month_day_for_display(month, day) {

            const months_array = ['January', 'February', 'March', 'April', 'May', 'June',
                'July', 'August', 'September', 'October', 'November', 'December'
            ];

            //return month 
            return (months_array[month - 1] + " " + day);
        }

        //make hours and minutes look nice 
        function hour_for_display(hour_x) {

            //store hours, minutes and midday for time start and time end
            var hour_obj = {
                hours: 0,
                minutes: 0,
                midday: "AM"
            };

            //get hours 
            hour_obj.hours = (hour_x / 100) | 0;

            //check if PM, (by default its AM)
            if (hour_x > 1159) {
                hour_obj.midday = "PM";
            }
            hour_obj.hours = switch_to_twelve_hour((hour_x / 100) | 0);

            //get minutes
            hour_obj.minutes = hour_x % 100;

            //if minutes are 0, change to 00 for displaying
            if (hour_obj.minutes < 10) {
                hour_obj.minutes = "0" + hour_obj.minutes;
            }

            return (hour_obj.hours + ":" + hour_obj.minutes + "  " + hour_obj.midday);
        }

        //append the values for the time zone select dropdown
        function time_zone_dropdown() {

            //list of all the ids for the UTC time zones we display
            const utcs_ids = ["UTC_minus_12", "UTC_minus_11", "UTC_minus_10", "UTC_minus_09", "UTC_minus_08",
                "UTC_minus_07", "UTC_minus_06", "UTC_minus_05", "UTC_minus_04", "UTC_minus_03", "UTC_minus_02",
                "UTC_minus_01", "UTC_0' selected='selected", "UTC_plus_01", "UTC_plus_02", "UTC_plus_03",
                "UTC_plus_04", "UTC_plus_05", "UTC_plus_06", "UTC_plus_07", "UTC_plus_08", "UTC_plus_09",
                "UTC_plus_10", "UTC_plus_11", "UTC_plus_12", "UTC_plus_13", "UTC_plus_14"
            ];

            //list of all the UTC names of time zones
            var utcs_names = ["UTC -12", "UTC -11", "UTC -10", "UTC -09", "UTC -08",
                "UTC -07", "UTC -06", "UTC -05", "UTC -04 (EDT)", "UTC -03",
                "UTC -02", "UTC -01", "UTC 0", "UTC +01", "UTC +02 (CEST)", "UTC +03",
                "UTC +04", "UTC +05", "UTC +06", "UTC +07 ", "UTC +08 (CST) ", "UTC +09",
                "UTC +10", "UTC +11", "UTC +12", "UTC +13", "UTC +14"
            ];

            //this will determine the difference between UTCs
            let utc_value = -1200;

            //this will hold the options to append to the dropdown select
            var timezone_values_str = '';
            for (x = 0; x < utcs_ids.length; x++) {

                timezone_values_str = timezone_values_str +
                    "<option id='" + utcs_ids[x] +
                    "' value='" + utc_value + "'>" +
                    utcs_names[x] + "</option>";

                utc_value = utc_value + 100;
            }

            //append the options
            $("#timezone_converter").append(timezone_values_str);

            //its ready!
            return true;
        }

        ///////////////////////////////////////////////////////////////////////////

        //clean and setup
        $("#HQ_page").attr('id', '');

        //hide / show content

        //if HQ_info exists, display the content only for HQ
        if ($("#HQ_info").length) {

            if (check_if_user_allowed() == true) {
                $("#HQ_info").show();
            } else {
                $("#HQ_info").hide();
            }
        }

        //if it is a Dev page, hide it unless it is an approved user
        if (wgPageName.substring(0, 3) == 'Dev') {

            console.log(check_if_user_allowed());

            if (check_if_user_allowed() == true) {
                $(".igem_content_wrapper").show();
            } else {
                $(".igem_content_wrapper").hide();
            }
        }

        //menu

        //start menu functionality
        menu_functionality();

        //highlight current page on the menu
        highlight_current_page_menu();

        //mobile bar
        if ($(".igem_mobile_menu_bar").is(":visible")) {
            $(".igem_content_wrapper").click(function() {
                $(".igem_menu").hide();
            });
        }

        // loading content

        //sponsors
        if ($("#load_sponsors_here").length) {
            load_these_items("https://2021.igem.org/Main_Page #all_sponsor_logos", "load_sponsors_here");
        }

        //news items
        if ($("#load_news_here").length) {
            load_these_items("https://2021.igem.org/Teams/News_Archive #load_these_news_items", "load_news_here");
        }

        //registration updates
        if ($("#load_registration_updates_here").length) {
            load_these_items("https://2021.igem.org/Registration_updates #updates", "load_registration_updates_here");
        }

        //support functionality or special pages

        //if image_slider exists, activate the automatic rotation slider and functionality
        if ($("#image_carrousel").length) {
            image_slider_rotation();
        }

        //filtering options
        if ($("#filtered_options").length) {
            displaying_selected_sort_option();
        }

        //time zones
        //if there is a time zone converter 
        if ($("#timezone_converter").length) {

            console.log("here");
            //global variables
            var hold_all_dates = [];
            var date_counter = 0;

            //grab original dates 
            var grab_date;
            var date_array;

            //change dates to Boston timezone and collect all dates into a global variable
            $('.date_timezone').each(function(i, obj) {

                //get the date
                grab_date = $(this).html();

                //change date to a number array
                date_array = grab_date.split(',').map(Number);

                //create an id for that specific date, we will use this later to append 
                $(this).attr('id', 'dt_' + date_counter);

                //add to global variables
                hold_all_dates[date_counter] = date_array;
                date_counter++;

                //clean the div and have it ready for the change
                $(this).empty();

                //now append that date in UTC:
                $(this).append(change_time_zone(date_array[0], date_array[1], date_array[2], date_array[3], 0));

            });

            //setup timezone select 
            var select_is_ready = false;

            // DAYLIGHT SAVINGS TIME
            select_is_ready = time_zone_dropdown();

            //once timezone is ready, allow user to change time zones
            if (select_is_ready) {
                //if the user wants to change the timezone
                $("#timezone_converter").on("change", function(e) {

                    //get the timezone requested 
                    var timezone_selected = $(this).val();
                    var time_difference = parseInt(timezone_selected);

                    //empty all timezones getting ready for appending
                    $('.date_timezone').empty();

                    //get each date_timezone by number id 
                    for (x = 0; x < date_counter; x++) {

                        $('#dt_' + x).append(change_time_zone(hold_all_dates[x][0],
                            hold_all_dates[x][1],
                            hold_all_dates[x][2],
                            hold_all_dates[x][3],
                            time_difference));

                    }

                });

            } else {
                console.log('error with appending timezone select');
            }

        }

        //navigation support
        if ($("#navigation_support").length) {
            var current_page_link = "https://2021.igem.org/" + wgPageName;
            $("a[href$='" + current_page_link + "'] > .navigation_support").addClass("active");
        }

        //expand collapse functionality
        $(".collapsible_accordion_access").click(function() {
            $(this).toggleClass("displaying_content");
            $(this).parent().next().toggleClass("hide_content");
        });

        //read more functionality
        $(".read_more").click(function() {
            $(this).toggleClass("show_less");
            $(this).prev(".read_more_text").fadeToggle(400);
        });

        //accordion functionality
        $(".accordion_control").click(function() {
            $(this).toggleClass("expanded");
            $(this).parent().parent().next().toggleClass("open");
        });

        //calendar accordion functionality
        $(".calendar_accordion_control").click(function() {
            $(this).toggleClass("hide");
            $(this).parent().next().toggleClass("hide");
        });

        //showing a longer list
        $('#scroll_list_display').click(function() {
            $('.scrolling_list').toggleClass('show_all');
            $('.scroll_control').toggleClass('show_less');
        });

    });
</script>

<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--HTML -->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Matomo -->
    <script type="text/javascript">
        var _paq = window._paq = window._paq || [];
          _paq.push(["setCookieDomain", "*.2021.igem.org"]);
          _paq.push(["setDomains", ["*.2021.igem.org"]]);
          _paq.push(['trackPageView']);
          _paq.push(['enableLinkTracking']);
          (function() {
            var u="https://matomo.igem.org/";
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', '5']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
          })();
    </script>
    <noscript><p><img src="https://matomo.igem.org/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
    <!-- End Matomo Code -->

</head>

<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--MENU -->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="igem_mobile_menu_bar">

    <div class="igem_logo_mobile">
        <img src="https://static.igem.org/mediawiki/2021/c/c8/2021_igem_logo_horizontal.svg">
    </div>

    <div class="igem_menu_control_mobile">
        <img id="menu_control_image" src="https://static.igem.org/mediawiki/2021/2/25/Main_menu_icon.svg">
    </div>

</div>

<div class="igem_menu">

    <a href="https://2021.igem.org">
        <div class="igem_menu_logo">

        </div>
    </a>

    <!---- ABOUT ---->
    <div class="igem_menu_item" id="about">

        <a href="https://2021.igem.org/About">
            <div class="hub_icon about "> </div>

            <div class="hub_title">
                ABOUT
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://igem.org/About" target="_blank">
                <div class="submenu_item  ">

                    About iGEM ⇗
                </div>
            </a>

            <a href="https://igem.org/Previous_iGEM_Competitions" target="_blank">
                <div class="submenu_item">
                    Previous Competitions ⇗
                </div>
            </a>

            <a href="https://igem.org" target="_blank">
                <div class="submenu_item">
                    iGEM.org ⇗
                </div>
            </a>

            <a href="https://igem.org/Staff" target="_blank">
                <div class="submenu_item">
                    Staff ⇗
                </div>
            </a>

            <a href="https://igem.org/Newsletters" target="_blank">
                <div class="submenu_item">
                    Newsletters ⇗
                </div>
            </a>

            <a href="https://igem.org/Privacy_Policy" target="_blank">
                <div class="submenu_item">
                    Privacy Policy ⇗
                </div>
            </a>

            <a href="https://igem.org/Contact" target="_blank">
                <div class="submenu_item">
                    Contact ⇗
                </div>
            </a>

            <a href="https://2021.igem.org/Sitemap">
                <div class="submenu_item">
                    Sitemap
                </div>
            </a>

        </div>
    </div>

    <!----  CALENDAR  ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Calendar">
            <div class="hub_icon calendar"> 
                <!--<div class="new_content"></div>--></div>

            <div class="hub_title">
                CALENDAR
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Calendar/Events">
                <div class="submenu_item ">
                    Meetups & Events
                </div>
            </a>

            <a href="https://festival.igem.io/" target="_blank">
                <div class="submenu_item">
                    Opening Weekend Festival ⇗
                </div>
            </a>
        </div>

    </div>

    <!----  TEAMS ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Teams">
            <div class="hub_icon teams">
                <div class="new_content"></div>
            </div>

            <div class="hub_title">
                TEAMS
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Teams/Grants">
                <div class="submenu_item with_subsub_menu">
                    Team Grants
                </div>
            </a>
            <div class="submenu_access"></div>

            <div class="igem_subsubmenu">
                <a href="https://2021.igem.org/Teams/Grants/Impact">
                    <div class="subsubmenu_item">
                        Impact Grant
                    </div>
                </a>

                <a href="https://2021.igem.org/Teams/Grants/Safety">
                    <div class="subsubmenu_item">
                        Safety & Security Grant
                    </div>
                </a>
            </div>

            <div class="submenu_item subsection_title"> Team Information</div>
            <a href="https://igem.org/Team_List?year=2021" target="_blank">
                <div class="submenu_item">
                    Team List ⇗
                </div>
            </a>

            <a href="https://igem.org/Team_Wikis?year=2021" target="_blank">
                <div class="submenu_item">
                    Team Wikis ⇗
                </div>
            </a>

            <a href="https://igem.org/Team_Parts?year=2021" target="_blank">
                <div class="submenu_item">
                    Team Parts ⇗
                </div>
            </a>

            <div class="submenu_item subsection_title"> Community </div>

            <!-- Abi, add  <div class="submenu_item with_icon with_subsub_menu">  to the sub hub you want a red flag ]
                    then add <div class="icon_submenu new"></div> inside of it -->

            <a href="https://2021.igem.org/Teams/Collaborations">
                <div class="submenu_item">
                    Collaborations
                </div>
            </a>

            <a href="https://2021.igem.org/Teams/Mentorship">
                <div class="submenu_item">
                    Mentorship
                </div>
            </a>

            <a href="https://2021.igem.org/Teams/Slack">
                <div class="submenu_item">
                    iGEM Global Slack
                </div>
            </a>

            <a href="https://2021.igem.org/Teams/Ambassadors">
                <div class="submenu_item with_subsub_menu with_icon"><div class="icon_submenu new"></div>
                    Ambassadors
                </div>
            </a>
            <div class="submenu_access"></div>

            <div class="igem_subsubmenu"> 
                <a href="https://2021.igem.org/Teams/Ambassadors/Calls">
                    <div class="subsubmenu_item with_icon"><div class="icon_submenu new"></div>
                        Ambassador / Team Calls
                    </div>
                </a>
            </div>

            <a href="https://2021.igem.org/Teams/News_Archive">
                <div class="submenu_item">
                    News Archive
                </div>
            </a>

            <div class="submenu_item subsection_title"> Quick Links </div>

            <a href="https://igem.org/Account_Apply" target="_blank">
                <div class="submenu_item">
                    Create an Account ⇗
                </div>
            </a>

            <a href="https://igem.org/Join_Team.cgi" target="_blank">
                <div class="submenu_item">
                    Join a Team ⇗
                </div>
            </a>
        </div>
    </div>

    <!---- COMPETITION ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Competition">
            <!-- Abi, add  <div class="new_content"></div> to the hub you want a red dot next to like below-->
            <div class="hub_icon competition"></div>

            <div class="hub_title">
                COMPETITION
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Competition/Registration">
                <div class="submenu_item with_subsub_menu">

                    Register A Team
                </div>
            </a>
            <div class="submenu_access"></div>

            <div class="igem_subsubmenu">

                <a href="https://2021.igem.org/Competition/Registration/Team_Fee">
                    <div class="subsubmenu_item">
                        Team Fee
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Registration/Handbook">
                    <div class="subsubmenu_item">
                        Handbook
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Registration/HS_Consent_Forms">
                    <div class="subsubmenu_item">
                        Consent Forms
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Registration/Commercial_Teams">
                    <div class="subsubmenu_item">
                        Commercial Teams
                    </div>
                </a>

            </div>

            <div class="submenu_item subsection_title"> 2021 Requirements </div>

            <a href="https://2021.igem.org/Competition/Team_Requirements">
                <div class="submenu_item">
                    Team Requirements
                </div>
            </a>

            <a href="https://2021.igem.org/Competition/Rules_of_Conduct">
                <div class="submenu_item with_subsub_menu">
                    Rules of Conduct
                </div>
            </a>
            <div class="submenu_access"></div>

            <div class="igem_subsubmenu">

                <a href="https://2021.igem.org/Competition/Rules_of_Conduct/Responsible_Conduct">
                    <div class="subsubmenu_item">
                        Responsible Conduct
                    </div>
                </a>
            </div>

            <a href="https://2021.igem.org/Competition/Deliverables">
                <!-- Abi, add  <div class="submenu_item with_icon with_subsub_menu">  to the sub hub you want a red flag ]
                    then add <div class="icon_submenu new"></div> inside of it -->

                <div class="submenu_item with_subsub_menu">
                    Deliverables
                </div>
            </a>

            <div class="submenu_access"></div>

            <div class="igem_subsubmenu">

                <a href="https://2021.igem.org/Competition/Deliverables/Safety_Forms">
                    <div class="subsubmenu_item">
                        Safety Forms
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Promotion_Video">
                    <div class="subsubmenu_item">

                        Promotion Video
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Wiki">
                    <div class="subsubmenu_item">
                        Team Wiki
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Poster">
                    <div class="subsubmenu_item">
                        Team Poster
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Presentation">
                    <div class="subsubmenu_item">

                        Team Presentation
                    </div>
                </a>

                <!-- Abi, add  <div class="subsubmenu_item with_icon">  to the subsubpage you want a red flag
                    then add <div class="icon_submenu new"></div> inside of it -->

                <a href="https://2021.igem.org/Competition/Deliverables/Judging_Form">
                    <div class="subsubmenu_item">
                        Judging Form
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Project_Attributions">
                    <div class="subsubmenu_item">
                        Project Attribution
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Part_Pages">
                    <div class="subsubmenu_item">
                        Part Pages
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Project_Description">
                    <div class="subsubmenu_item">
                        Project Description
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Title_and_Abstract">
                    <div class="subsubmenu_item">
                        Title and Abstract
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Tracks">
                    <div class="subsubmenu_item">
                        Track Selection
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Deliverables/Team_Roster">
                    <div class="subsubmenu_item">
                        Team Roster
                    </div>
                </a>

            </div>

            <div class="submenu_item subsection_title">Other Information </div>

            <a href="https://2021.igem.org/Competition/Tracks">
                <div class="submenu_item with_subsub_menu">
                    About Tracks
                </div>
            </a>
            <div class="submenu_access"></div>

            <div class="igem_subsubmenu">

                <a href="https://2021.igem.org/Competition/Tracks/Diagnostics">
                    <div class="subsubmenu_item">
                        Diagnostics
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Energy">
                    <div class="subsubmenu_item">
                        Energy
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Environment">
                    <div class="subsubmenu_item">
                        Environment
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Food_Nutrition">
                    <div class="subsubmenu_item">
                        Food and Nutrition
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Foundational_Advance">
                    <div class="subsubmenu_item">
                        Foundational Advance
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Hardware">
                    <div class="subsubmenu_item">
                        Hardware
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/High_School">
                    <div class="subsubmenu_item">
                        High School
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Information_Processing">
                    <div class="subsubmenu_item">
                        Information Processing
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Manufacturing">
                    <div class="subsubmenu_item">
                        Manufacturing
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/New_Application">
                    <div class="subsubmenu_item">
                        New Application
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Open">
                    <div class="subsubmenu_item">
                        Open
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Software">
                    <div class="subsubmenu_item">
                        Software
                    </div>
                </a>

                <a href="https://2021.igem.org/Competition/Tracks/Therapeutics">
                    <div class="subsubmenu_item">
                        Therapeutics
                    </div>
                </a>
            </div>

            <a href="https://2021.igem.org/Competition/Phase_II">
                <div class="submenu_item">
                    Two-Phase Projects
                </div>
            </a>

            <a href="https://2021.igem.org/Competition/Distribution_Kit">
                <div class="submenu_item">
                    Distribution Kit
                </div>
            </a>

        </div>
    </div>

    <!---- GIANT JAMBOREE ---->
    <div class="igem_menu_item">
        <a href="https://jamboree.igem.org/" target="_blank">
            <div class="hub_icon giant_jamboree">
                <!--<div class="new_content"></div>-->
            </div>

            <div class="hub_title">
                GIANT JAMBOREE ⇗
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Giant_Jamboree/Register">
                <div class="submenu_item"><!--<div class="icon_submenu new"></div>-->
                    Team Registration
                </div>
            </a>

        </div>

    </div>

    <!---- JUDGING ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Judging">
            <div class="hub_icon judging">
                <!--<div class="new_content"></div>-->
            </div>
            <div class="hub_title">
                JUDGING
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <!--Section: For Teams -->
            <div class="submenu_item subsection_title"> For Teams </div>

            <a href="https://2021.igem.org/Judging/Introduction">
                <div class="submenu_item">
                    Introduction
                </div>
            </a>

            <a href="https://2021.igem.org/Judging/Medals">
                <div class="submenu_item">
                    Medals
                </div>
            </a>

            <a href="https://2021.igem.org/Judging/Awards">
                <div class="submenu_item">
                    Awards
                </div>
            </a>

            <a href="https://2021.igem.org/Judging/Pages_for_Awards">
                <div class="submenu_item">
                    Pages for Awards
                </div>
            </a>

            <a href="https://2021.igem.org/Judging/Rubric">
                <div class="submenu_item">
                    Rubric
                </div>
            </a>

            <a href="https://2021.igem.org/Judging/Judging_Form">
                <div class="submenu_item">
                    Judging Form ⇗
                </div>
            </a>

            <div class="submenu_item subsection_title">Other Information </div>

            <a href="https://2021.igem.org/Judging/Committee">
                <div class="submenu_item">
                    Committees
                </div>
            </a>

            <!--Section: For Judges -->
            <div class="submenu_item subsection_title"> For Judges </div>

            <a href="https://2021.igem.org/Judging/Resources">
                <div class="submenu_item ">

                    Resources
                </div>
            </a>

            <a href="https://2021.igem.org/Judging/Apply">
                <div class="submenu_item">
                    Application
                </div>

            </a>


            <a href="https://static.igem.org/mediawiki/2021/f/f6/2021_judging_handbook_v1.pdf">
                <div class="submenu_item with_icon">
                    <div class="icon_submenu new"></div>Judging Handbook
                </div>
            </a>


        </div>
    </div>

    <!---- SAFETY ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Safety">
            <div class="hub_icon safety">
                <!--<div class="new_content"></div>-->
            </div>
            <div class="hub_title">
                SAFETY
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <div class="submenu_item subsection_title"> Online Events </div>
            <a href="https://2021.igem.org/Safety/Workshops">
                <div class="submenu_item">
                    Workshops
                </div>
            </a>

            <div class="submenu_item subsection_title"> Requirements </div>

            <a href="https://2021.igem.org/Safety/Working_Safely">
                <div class="submenu_item">
                    Working Safely
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Rules">
                <div class="submenu_item">
                    Rules
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Policies">
                <div class="submenu_item">
                    Policies
                </div>
            </a>
            <a href="https://2021.igem.org/Safety/Coronavirus">
                <div class="submenu_item">
                    Coronavirus
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Do_not_Release">
                <div class="submenu_item">
                    Do Not Release
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Roles">
                <div class="submenu_item">
                    Roles
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Committee">
                <div class="submenu_item">
                    Committee
                </div>
            </a>

            <div class="submenu_item subsection_title"> Tools </div>
            <a href="https://2021.igem.org/Safety/Risk_Groups">
                <div class="submenu_item">
                    Risk Groups
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/White_List">
                <div class="submenu_item">
                    White List
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Risk_Assessment_Tool">
                <div class="submenu_item">
                    Risk Assessment Tool
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Environmental_Samples">
                <div class="submenu_item">
                    Environmental Samples
                </div>
            </a>
            <a href="https://2021.igem.org/Safety/Exemplary_Projects">
                <div class="submenu_item">
                    Exemplary Projects
                </div>
            </a>

            <div class="submenu_item subsection_title"> Forms</div>
            <a href="https://2021.igem.org/Safety/Final_Safety_Form">
                <div class="submenu_item">
                    Safety Form
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Check_In">
                <div class="submenu_item">
                    Check In Form
                </div>
            </a>

            <a href="https://2021.igem.org/Safety/Animal_Use_Check_In">
                <div class="submenu_item">
                    Animal Use Form
                </div>
            </a>

        </div>

    </div>

    <!---- HUMAN PRACTICES ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Human_Practices">
            <div class="hub_icon human_practices"> </div>

            <div class="hub_title">
                HUMAN PRACTICES
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Human_Practices/Introduction">
                <div class="submenu_item">
                    Introduction
                </div>
            </a>

            <a href="https://2021.igem.org/Human_Practices/FAQ">
                <div class="submenu_item">
                    FAQ
                </div>
            </a>

            <a href="https://2021.igem.org/Human_Practices/Resources">
                <div class="submenu_item">
                    Resources
                </div>
            </a>

            <a href="https://2021.igem.org/Human_Practices/Examples">
                <div class="submenu_item">
                    Examples
                </div>
            </a>

            <a href="https://2021.igem.org/Human_Practices/History">
                <div class="submenu_item">
                    History
                </div>
            </a>

            <a href="https://2021.igem.org/Human_Practices/Committee">
                <div class="submenu_item">
                    Committee
                </div>
            </a>

        </div>

    </div>

    <!---- ENGINEERING ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Engineering">
            <div class="hub_icon measurement">
                <!--<div class="new_content"></div>-->
            </div>

            <div class="hub_title">
                ENGINEERING
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Engineering/Introduction">
                <div class="submenu_item">
                    Introduction
                </div>
            </a>

            <a href="https://2021.igem.org/Engineering/Design">
                <div class="submenu_item">
                    Design
                </div>
            </a>
            <a href="https://2021.igem.org/Engineering/Build">
                <div class="submenu_item">
                    Build
                </div>
            </a>

            <a href="https://2021.igem.org/Engineering/Test">
                <div class="submenu_item">
                    Test
                </div>
            </a>

            <a href="https://2021.igem.org/Engineering/Learn">
                <div class="submenu_item">
                    Learn
                </div>
            </a>

            <a href="https://2021.igem.org/Engineering/Examples">
                <div class="submenu_item">
                    Exemplary Projects
                </div>
            </a>

            <a href="https://2021.igem.org/Engineering/Committee">
                <div class="submenu_item">
                    Committee
                </div>
            </a>

            <a href="https://2021.igem.org/Engineering/StackExchange">
                <div class="submenu_item">
                    StackExchange
                </div>
            </a>

            <div class="submenu_item subsection_title"> Online Events </div>

            <a href="https://2021.igem.org/Engineering/Webinars">
                <div class="submenu_item">
                    Webinars
                </div>
            </a>

        </div>
    </div>

    <!---- DIVERSITY---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Diversity">
            <div class="hub_icon diversity"> </div>

            <div class="hub_title">
                DIVERSITY
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://2021.igem.org/Diversity/Introduction">
                <div class="submenu_item">
                    Introduction
                </div>
            </a>
            <a href="https://2021.igem.org/Diversity/Gender">
                <div class="submenu_item">
                    Gender Diversity
                </div>
            </a>
            <a href="https://2021.igem.org/Diversity/Committee">
                <div class="submenu_item">
                    Committee
                </div>
            </a>
            <a href="https://2021.igem.org/Diversity/Recommendations">
                <div class="submenu_item">
                    Recommendations
                </div>
            </a>
            <a href="https://2021.igem.org/Diversity/Excellence">
                <div class="submenu_item">
                    Examples
                </div>
            </a>
            <a href="https://2021.igem.org/Diversity/Black_Lives_Matter">
                <div class="submenu_item">
                    Black Lives Matter
                </div>
            </a>

        </div>
    </div>

    <!----  VIDEOS ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Videos">
            <div class="hub_icon videos"> </div>

            <div class="hub_title">
                VIDEOS
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://video.igem.org/" target="_blank">
                <div class="submenu_item">
                    Video Universe ⇗
                </div>
            </a>

            <a href="https://2021.igem.org/Videos/Production">
                <div class="submenu_item">
                    Production
                </div>
            </a>

            <!--<a href="https://2021.igem.org/Videos/Submission">
                    <div class="submenu_item">
                        Submission
                    </div>
                </a>-->

            <a href="https://2021.igem.org/Videos/Examples">
                <div class="submenu_item">
                    Examples
                </div>
            </a>
            <!--<a href="https://2021.igem.org/Videos/FAQ">
                    <div class="submenu_item">
                        FAQ
                    </div>
                </a>-->

        </div>
    </div>

    <!---- RESOURCES ---->
    <div class="igem_menu_item">
        <a href="https://2021.igem.org/Resources">
            <div class="hub_icon resources"> </div>

            <div class="hub_title">
                RESOURCES
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <div class="submenu_item subsection_title"> General </div>

            <a href="https://2021.igem.org/Resources/Navigating_iGEM">
                <div class="submenu_item">
                    Navigating iGEM
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Tips_for_Teams">
                <div class="submenu_item">
                    Tips for Teams
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Start_A_Team">
                <div class="submenu_item">
                    Start a Team
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Funding">
                <div class="submenu_item">
                    Funding
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/FAQ">
                <div class="submenu_item">
                    FAQ
                </div>

            </a>

            <a href="https://2021.igem.org/Resources/SDGs">
                <div class="submenu_item ">
                    SDGs
                </div>
            </a>

            <div class="submenu_item subsection_title"> Wet and Dry Lab </div>
            <a href="https://2021.igem.org/Resources/Troubleshooting">
                <div class="submenu_item  with_subsub_menu">
                    Cloning Help
                </div>
            </a>

            <div class="submenu_access"></div>

            <div class="igem_subsubmenu">

                <a href="https://2021.igem.org/Resources/Troubleshooting/Transformations">
                    <div class="subsubmenu_item">
                        Transformations
                    </div>
                </a>

                <a href="https://2021.igem.org/Resources/Troubleshooting/Restriction_Digests_and_Ligations">
                    <div class="subsubmenu_item">
                        Digests & Ligations
                    </div>
                </a>

            </div>

            <a href="http://parts.igem.org/Main_Page" target="_blank">
                <div class="submenu_item">
                    Parts Registry ⇗
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Software_Tools">
                <div class="submenu_item">
                    Software Tools
                </div>
            </a>

            <div class="submenu_item subsection_title"> Documentation</div>
            <a href="https://2021.igem.org/Resources/Telling_your_Story">
                <div class="submenu_item">
                    Telling your Story
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Wiki_Editing_Help">
                <div class="submenu_item">
                    Wiki Editing Help
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Using_HTML_CSS_and_Javascript">
                <div class="submenu_item">
                    HTML CSS Javascript
                </div>
            </a>

            <a href="https://2021.igem.org/Resources/Template_Documentation">
                <div class="submenu_item">
                    Template Documentation
                </div>
            </a>

        </div>

    </div>

    <!---- SPONSORS ---->
    <div class="igem_menu_item last_item" id="sponsors">
        <a href="https://2021.igem.org/Sponsors">
            <div class="hub_icon sponsors">
<div class="new_content"></div>
            </div>

            <div class="hub_title">
                SPONSORS
            </div>
        </a>

        <div class="submenu_access"></div>

        <div class="igem_submenu">

            <a href="https://igem.org/Sponsorship" target="_blank">
                <div class="submenu_item">
                    Become a Sponsor ⇗
                </div>
            </a>

            <a href="https://2021.igem.org/Sponsors/Special_Offers">
                <div class="submenu_item with_icon">
                    <div class="icon_submenu new"></div>
                    Special Offers
                </div>
            </a>

            <a href="https://2021.igem.org/Sponsors/IDT">
                <div class="submenu_item">
                    IDT
                </div>
            </a>


            <a href="https://2021.igem.org/Sponsors/TwistBioscience">
                <div class="submenu_item">
                    Twist Bioscience
                </div>
            </a>


            <a href="https://2021.igem.org/Sponsors/GenScript">
                <div class="submenu_item">
                    GenScript
                </div>
            </a>

            <a href="https://2021.igem.org/Sponsors/Beckman_Coulter">
                <div class="submenu_item">
                    Beckman Coulter
                </div>
            </a>

            <a href="https://2021.igem.org/Sponsors/Benchling">
                <div class="submenu_item" style="margin-bottom: 60px;">
                    Benchling
                </div>
            </a>

        </div>

    </div>

</div>

<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-- CONTENT -->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="igem_content_wrapper">
    <div class=" igem_column_wrapper">

        <div class="clear extra_space"></div>
        <div class="clear extra_space"></div>