Difference between revisions of "Team:UrbanTundra Edmonton/Notebook"

Line 6: Line 6:
 
<style>
 
<style>
  
−
.timeline {
+
*,
−
    list-style: none;
+
*::before,
−
    padding: 20px 0 20px;
+
*::after {
−
    position: relative;
+
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box;
 
}
 
}
  
−
    .timeline:before {
+
body {
−
        top: 0;
+
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
−
        bottom: 0;
+
  background: #456990;
−
        position: absolute;
+
  color: #fff;
−
        content: " ";
+
  overflow-x: hidden;
−
        width: 3px;
+
  padding-bottom: 50px;
−
        background-color: #eeeeee;
+
} /* INTRO SECTION
−
        left: 50%;
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
        margin-left: -1.5px;
+
−
    }
+
  
−
    .timeline > li {
+
.intro {
−
        margin-bottom: 20px;
+
  background: #F45B69;
−
        position: relative;
+
  padding: 100px 0;
−
    }
+
}
  
−
        .timeline > li:before,
+
.container {
−
        .timeline > li:after {
+
  width: 90%;
−
            content: " ";
+
  max-width: 1200px;
−
            display: table;
+
  margin: 0 auto;
−
        }
+
  text-align: center;
 +
}
  
−
        .timeline > li:after {
+
h1 {
−
            clear: both;
+
  font-size: 2.5rem;
−
        }
+
}
  
−
        .timeline > li:before,
 
−
        .timeline > li:after {
 
−
            content: " ";
 
−
            display: table;
 
−
        }
 
  
−
        .timeline > li:after {
+
/* TIMELINE
−
            clear: both;
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
        }
+
  
−
        .timeline > li > .timeline-panel {
+
.timeline ul {
−
            width: 46%;
+
  background: #456990;
−
            float: left;
+
  padding: 50px 0;
−
            border: 1px solid #d4d4d4;
+
}
−
            border-radius: 2px;
+
−
            padding: 20px;
+
−
            position: relative;
+
−
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+
−
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+
−
        }
+
  
−
            .timeline > li > .timeline-panel:before {
+
.timeline ul li {
−
                position: absolute;
+
  list-style-type: none;
−
                top: 26px;
+
  position: relative;
−
                right: -15px;
+
  width: 6px;
−
                display: inline-block;
+
  margin: 0 auto;
−
                border-top: 15px solid transparent;
+
  padding-top: 50px;
−
                border-left: 15px solid #ccc;
+
  background: #fff;
−
                border-right: 0 solid #ccc;
+
}
−
                border-bottom: 15px solid transparent;
+
−
                content: " ";
+
−
            }
+
  
−
            .timeline > li > .timeline-panel:after {
+
.timeline ul li::after {
−
                position: absolute;
+
  content: '';
−
                top: 27px;
+
  position: absolute;
−
                right: -14px;
+
  left: 50%;
−
                display: inline-block;
+
  bottom: 0;
−
                border-top: 14px solid transparent;
+
  transform: translateX(-50%);
−
                border-left: 14px solid #fff;
+
  width: 30px;
−
                border-right: 0 solid #fff;
+
  height: 30px;
−
                border-bottom: 14px solid transparent;
+
  border-radius: 50%;
−
                content: " ";
+
  background: inherit;
−
            }
+
}
−
 
+
−
        .timeline > li > .timeline-badge {
+
−
            color: #fff;
+
−
            width: 50px;
+
−
            height: 50px;
+
−
            line-height: 50px;
+
−
            font-size: 1.4em;
+
−
            text-align: center;
+
−
            position: absolute;
+
−
            top: 16px;
+
−
            left: 50%;
+
−
            margin-left: -25px;
+
−
            background-color: #999999;
+
−
            z-index: 100;
+
−
            border-top-right-radius: 50%;
+
−
            border-top-left-radius: 50%;
+
−
            border-bottom-right-radius: 50%;
+
−
            border-bottom-left-radius: 50%;
+
−
        }
+
−
 
+
−
        .timeline > li.timeline-inverted > .timeline-panel {
+
−
            float: right;
+
−
        }
+
−
 
+
−
            .timeline > li.timeline-inverted > .timeline-panel:before {
+
−
                border-left-width: 0;
+
−
                border-right-width: 15px;
+
−
                left: -15px;
+
−
                right: auto;
+
−
            }
+
−
 
+
−
            .timeline > li.timeline-inverted > .timeline-panel:after {
+
−
                border-left-width: 0;
+
−
                border-right-width: 14px;
+
−
                left: -14px;
+
−
                right: auto;
+
−
            }
+
  
−
.timeline-badge.primary {
+
.timeline ul li div {
−
    background-color: #2e6da4 !important;
+
  position: relative;
 +
  bottom: 0;
 +
  width: 400px;
 +
  padding: 15px;
 +
  background: #F45B69;
 
}
 
}
  
−
.timeline-badge.success {
+
.timeline ul li div::before {
−
    background-color: #3f903f !important;
+
  content: '';
 +
  position: absolute;
 +
  bottom: 7px;
 +
  width: 0;
 +
  height: 0;
 +
  border-style: solid;
 
}
 
}
  
−
.timeline-badge.warning {
+
.timeline ul li:nth-child(odd) div {
−
    background-color: #f0ad4e !important;
+
  left: 45px;
 
}
 
}
  
−
.timeline-badge.danger {
+
.timeline ul li:nth-child(odd) div::before {
−
    background-color: #d9534f !important;
+
  left: -15px;
 +
  border-width: 8px 16px 8px 0;
 +
  border-color: transparent #F45B69 transparent transparent;
 
}
 
}
  
−
.timeline-badge.info {
+
.timeline ul li:nth-child(even) div {
−
    background-color: #5bc0de !important;
+
  left: -439px;
 
}
 
}
  
−
.timeline-title {
+
.timeline ul li:nth-child(even) div::before {
−
    margin-top: 0;
+
  right: -15px;
−
    color: inherit;
+
  border-width: 8px 0 8px 16px;
 +
  border-color: transparent transparent transparent #F45B69;
 
}
 
}
  
−
.timeline-body > p,
+
time {
−
.timeline-body > ul {
+
  display: block;
−
    margin-bottom: 0;
+
  font-size: 1.2rem;
 +
  font-weight: bold;
 +
  margin-bottom: 8px;
 
}
 
}
  
−
    .timeline-body > p + p {
 
−
        margin-top: 5px;
 
−
    }
 
  
−
@media (max-width: 767px) {
+
/* EFFECTS
−
    ul.timeline:before {
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
        left: 40px;
+
−
    }
+
  
−
    ul.timeline > li > .timeline-panel {
+
.timeline ul li::after {
−
        width: calc(100% - 90px);
+
  transition: background .5s ease-in-out;
−
        width: -moz-calc(100% - 90px);
+
}
−
        width: -webkit-calc(100% - 90px);
+
−
    }
+
  
−
    ul.timeline > li > .timeline-badge {
+
.timeline ul li.in-view::after {
−
        left: 15px;
+
  background: #F45B69;
−
        margin-left: 0;
+
}
−
        top: 16px;
+
−
    }
+
  
−
    ul.timeline > li > .timeline-panel {
+
.timeline ul li div {
−
        float: right;
+
  visibility: hidden;
−
    }
+
  opacity: 0;
 +
  transition: all .5s ease-in-out;
 +
}
  
−
        ul.timeline > li > .timeline-panel:before {
+
.timeline ul li:nth-child(odd) div {
−
            border-left-width: 0;
+
  transform: translate3d(200px, 0, 0);
−
            border-right-width: 15px;
+
}
−
            left: -15px;
+
−
            right: auto;
+
−
        }
+
  
−
        ul.timeline > li > .timeline-panel:after {
+
.timeline ul li:nth-child(even) div {
−
            border-left-width: 0;
+
  transform: translate3d(-200px, 0, 0);
−
            border-right-width: 14px;
+
−
            left: -14px;
+
−
            right: auto;
+
−
        }
+
 
}
 
}
−
</style>
 
  
−
</head>
+
.timeline ul li.in-view div {
 +
  transform: none;
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
  
  
 +
/* GENERAL MEDIA QUERIES
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  
−
<div class="column full_size">
+
@media screen and (max-width: 900px) {
 +
  .timeline ul li div {
 +
    width: 250px;
 +
  }
 +
  .timeline ul li:nth-child(even) div {
 +
    left: -289px;
 +
    /*250+45-6*/
 +
  }
 +
}
  
 +
@media screen and (max-width: 600px) {
 +
  .timeline ul li {
 +
    margin-left: 20px;
 +
  }
 +
  .timeline ul li div {
 +
    width: calc(100vw - 91px);
 +
  }
 +
  .timeline ul li:nth-child(even) div {
 +
    left: 45px;
 +
  }
 +
  .timeline ul li:nth-child(even) div::before {
 +
    left: -15px;
 +
    border-width: 8px 16px 8px 0;
 +
    border-color: transparent #F45B69 transparent transparent;
 +
  }
 +
}
  
−
<div class="container">
+
</style>
−
    <div class="page-header">
+
−
        <h1 id="timeline">Timeline</h1>
+
−
    </div>
+
−
    <ul class="timeline">
+
−
        <li>
+
−
          <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">July 20<sup>th</sup> 2016</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>
+
−
                <ol>
+
−
                  <li>4 microlitres of milliq water with 1 microlitre of plasmid</li>
+
−
                  <li>5 microlitres of no chlorite dismutase</li>
+
−
                  <li>1 microlitre of cutsmart buffer (specifically 1.1111 microlitre)</li>
+
−
                    <ul>a. 10 x cutsmart buffer into tubes makes 1x [ ]</ul>
+
−
                  <li>When adding BsaI, only touch the surface of the BsaI to the pipette tip. The reason: has glycerol which is sticky. Take 0.5 microlitre of BsaI.</li>
+
−
                  <li>Mix sample very gently then put into a 37 degrees celsius incubator for 1 hour. </li>
+
−
                  <li>Heat kill at 65 degrees celsius for 20 minutes. This kills the BsaI to prevent star activity. </li>
+
−
                  <li>Pulse down tubes then add 8 microlitre of milliq water. </li>
+
−
                  <li>Add 2 microlitres of T4DNA ligase buffer. </li>
+
−
                  <li>Add 0.5 microlitre of ligase then mix gently and incubate at room temperature for 30 minutes or longer </li>
+
−
                </ol>
+
−
              </p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li class="timeline-inverted">
+
−
          <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">July 21<sup>st</sup> 2016</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>
+
−
                <ol>
+
−
                  <li>Did some plating. </li>
+
−
                  <li>Plated three agar types:</li>
+
−
                    <ul>A. 4 plates of no antibiotic </ul>
+
−
                    <ul>B. 10 plates of kanamycin (CM)</ul>
+
−
                    <ul>C. 10 plates of ampicillin (Amp)</ul>
+
−
                  <li>Purpose: try to find the antibiotic marker on bacteria.</li>
+
−
                  <li>Observational expectations: If it’s purple, then there is no Cld gene sequence. If white then has CLd gene sequence. </li>
+
−
                  <li>Lives or dies on certain plates. Alive on ampicillin, then it has the marker. Dies it has the CM marker. </li>
+
−
                  <li>Added 20 microlitres in each plate</li>
+
−
                    <ul>A. A total of 7 plates</ul>
+
−
                    <ul>B. DNA minus has none, CM, and AMP</ul>
+
−
                    <ul>C. Positive control has CM and AMP</ul>
+
−
                    <ul>D. Cld +/- has CM and AMP</ul>
+
−
                </ol>
+
−
                <h4>Competent cell transformation:</h4>
+
−
                <ol>
+
−
                  <li>1 microlitre of positive control added to competent cells (positive control: CPB we used yesterday before cutting and gluing)</li>
+
−
                  <li>10 microlitre of cloned plasmid added to competent cells (Cloned plasmid is what we did yesterday).</li>
+
−
                  <li>Positive control, negative control, and cloned plasmid were chilled for 30 minutes, heat shocked for 90 seconds, chilled on ice for 5 minutes, and finally incubated at 37 degrees celsius with 1 ml of LB broth.</li>
+
−
                </ol>
+
−
              </p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li>
+
−
          <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">July 22<sup>nd</sup> 2016</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
             
+
−
<p>
+
  
−
                 
+
</head>
−
<!--
+
  
−
<li>It was observed that there were little purple colonies, however the colors will develop more over a longer period.</li>
 
−
                <li>Results from yesterday:</li>
 
−
                  <ul>A. No Ab plates: very thick growth</ul>
 
−
                  <ul>B. Amp plates: no growth: conclusion: no amp marker</ul>
 
−
                  <ul>C. CM: growth</ul>
 
−
                <li>Results chart:</li>
 
−
-->
 
  
  
 +
<div class="column full_size">
  
  
−
                  <table style="width:96%">
+
<section class="intro">
−
                      <tr>
+
  <div class="container">
−
                          <th></th>
+
    <h1>Vertical Timeline &darr;</h1>
−
                          <th>+ control</th>
+
  </div>
−
                          <th>DNA -</th>
+
</section>
−
                          <th>Cld +</th>
+
−
                          <th>Cld -</th>
+
−
                      </tr>
+
−
                      <tr>
+
−
                          <td>No Antibiotic</td>
+
−
                          <td></td>
+
−
                          <td>Yes, very thick</td>
+
−
                          <td></td>
+
−
                          <td></rd>
+
−
                      </tr>
+
−
                      <tr>
+
−
                          <td>Amp</td>
+
−
                          <td>No growth</td>
+
−
                          <td>No growth</td>
+
−
                          <td>No growth</td>
+
−
                          <td>No growth</td>
+
−
                      </tr>
+
−
                      <tr>
+
−
                          <td>CM</td>
+
−
                          <td>Growth (purple colonies)</td>
+
−
                          <td>No growth</td>
+
−
                          <td>Possibly purple and white*</td>
+
−
                      <td>Possible purple and white*</td>
+
−
                      </tr>
+
−
                  </table>
+
−
                * Purple colour will develop more over larger period of time (perhaps over the weekend)
+
−
              </p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li class="timeline-inverted">
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li>
+
−
          <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
              <hr>
+
−
              <div class="btn-group">
+
−
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
+
−
                  <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
+
−
                </button>
+
−
                <ul class="dropdown-menu" role="menu">
+
−
                  <li><a href="#">Action</a></li>
+
−
                  <li><a href="#">Another action</a></li>
+
−
                  <li><a href="#">Something else here</a></li>
+
−
                  <li class="divider"></li>
+
−
                  <li><a href="#">Separated link</a></li>
+
−
                </ul>
+
−
              </div>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
        <li class="timeline-inverted">
+
−
          <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
+
−
          <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+
−
            </div>
+
−
          </div>
+
−
        </li>
+
−
    </ul>
+
−
</div>
+
  
 +
<section class="timeline">
 +
  <ul>
 +
    <li>
 +
      <div>
 +
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div>
 +
        <time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
 +
      </div>
 +
    </li>
 +
  </ul>
 +
</section>
  
 
</div>
 
</div>
 
</html>
 
</html>

Revision as of 04:28, 18 October 2016

URBAN TUNDRA ▤

Vertical Timeline ↓

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
  • Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
  • Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
  • Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
  • Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
  • In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.