<div class="support-css-excludes"></div>

<div class="site-content">
  <h1 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur voluptatum.</h1>
  <div class="row">
    <div class="col">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis est atque, omnis temporibus, id necessitatibus soluta! Praesentium nostrum laborum molestiae rem ipsa rerum dolore, ut. Hic quidem saepe minus iusto, beatae accusamus praesentium temporibus
        nostrum facere, possimus cum voluptas, delectus et. Quam quo maiores voluptate consequatur doloremque, vel sapiente sunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus omnis, quam! In alias, ducimus nisi totam quia nulla ad id itaque nesciunt fugit repudiandae deleniti consequatur dignissimos voluptate. Voluptatum perspiciatis, id, autem ex
        officia eaque dolore! In commodi dolor, tempore nostrum blanditiis, accusamus ipsum doloribus aperiam quod molestiae natus sapiente eveniet voluptatum deleniti, id incidunt tenetur minima soluta. Id incidunt laudantium eius velit blanditiis in
        vel repudiandae. Ad distinctio soluta quas deserunt, libero enim assumenda sit eligendi, dolores ab, id!</p>
    </div>
    <div class="col">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus omnis, quam! In alias, ducimus nisi totam quia nulla ad id itaque nesciunt fugit repudiandae deleniti consequatur dignissimos voluptate. Voluptatum perspiciatis, id, autem ex
        officia eaque dolore! In commodi dolor, tempore nostrum blanditiis, accusamus ipsum doloribus aperiam quod molestiae natus sapiente eveniet voluptatum deleniti, id incidunt tenetur minima soluta. Id incidunt laudantium eius velit blanditiis in
        vel repudiandae. Ad distinctio soluta quas deserunt, libero enim assumenda sit eligendi, dolores ab, id!</p>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <!-- /.row  -->
  <div class="avatar"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/a-person.jpg" alt="" width="300" height="300">
    <p class="profile">Lorem ipsum dolor sit amet..</p>
  </div>
</div>
<!-- /.site-content -->

body {
  background: #fafafa;
  color: #333;
  text-rendering: optimizeLegibility
}

img{
	max-width:100%;
	height:auto
}

/* https://github.com/christiannaths/Redacted-Font */

@font-face {
  font-family: redactedregular;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/redacted-regular.eot);
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/redacted-regular.eot?#iefix) format("embedded-opentype"), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/redacted-regular.woff2) format("woff2"), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/redacted-regular.woff) format("woff"), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/redacted-regular.ttf) format("truetype"), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/redacted-regular.svg#redactedregular) format("svg");
  font-weight: 400;
  font-style: normal
}

.notice {
  background-color: #fc3;
  color: #000;
  font-weight: 700;
  padding: 15px;
  text-align: center;
  font-size: .9em
}

.notice p {
  margin: 0
}

.site-content {
  max-width: 780px;
  margin: 80px auto;
  line-height: 1.82;
  font-family: redactedregular;
  position: relative
}

.site-content h1,
.site-content h2,
.site-content h3 {
  color: #555
}

.site-content p {
  color: #aaa
}

.site-content .title {
  padding: 0 20px
}

.site-content .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.site-content .col {
  width: 50%;
  padding: 20px
}

.site-content .avatar {
  width: 180px;
  height: 180px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 80px;
}

/* we can wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
  .site-content .avatar {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -90px;
    -ms-wrap-margin: 50px;
    -ms-wrap-flow: both
  }
}

.site-content .avatar img {
  border-radius: 10px
}

.site-content .profile {
  color: #ccc;
  font-size: 12px
}