@charset "UTF-8";
.text-center {
  text-align: center; }

.cf {
  *zoom: 1; }
  .cf:before, .cf:after {
    content: " ";
    display: table; }
  .cf:after {
    clear: both; }

.area1 {
  /*&:nth-child(4n+1) {
  	img {
  	//border-color: hsla(random(365), random(365), 50, 1);
  		 border-image: linear-gradient(to right, $highlight1, darkorchid) 1;
  		border-radius: 20px;}
  }
  &:nth-child(4n+2) {
  	img {
  		border-color: $highlight4;}
  }
  &:nth-child(4n+3) {
  	img {
  		border-color: $highlight2;}
  }
  &:nth-child(4n+4) {
  	img {
  		border-color: $highlight3;}
  }*/ }
  .area1 img {
    background: -webkit-linear-gradient(#f0f0f0 0 0) padding-box, -webkit-linear-gradient(left, #FC7436, #d2d2d2);
    background: -o-linear-gradient(#f0f0f0 0 0) padding-box, -o-linear-gradient(left, #FC7436, #d2d2d2);
    background: linear-gradient(#f0f0f0 0 0) padding-box, linear-gradient(to right, #FC7436, #d2d2d2) border-box;
    transition: #f0f0f0 0.4s;
    border: 2px;
    border-right: 5px;
    border-style: solid;
    border-color: transparent;
    border-radius: 20px; }
  .area1 :hover img {
    background: linear-gradient(#868686 0 0) padding-box, linear-gradient(to right, #FC7436, #d2d2d2) border-box; }

body .wrapper {
  margin: 0 auto; }
  body .wrapper .speechbubble {
    background-color: #eaeaea;
    line-height: 1.75;
    padding: 15px 25px;
    margin-bottom: 10px;
    border-radius: 20px;
    cursor: default; }
    body .wrapper .speechbubble:nth-child(2n) {
      border-left: 5px solid; }
    body .wrapper .speechbubble:nth-child(2n):after {
      content: '';
      margin-top: -30px;
      padding-top: 0px;
      position: relative;
      bottom: -45px;
      left: 20px;
      border-width: 30px 0 0 30px;
      border-style: solid;
      border-color: #d2d2d2 transparent;
      display: none;
      width: 0; }
    body .wrapper .speechbubble:nth-child(2n+1) {
      border-right: 5px solid; }
    body .wrapper .speechbubble:nth-child(2n+1):after {
      content: '';
      margin-top: -30px;
      padding-top: 0px;
      position: relative;
      bottom: -45px;
      left: 350px;
      border-width: 30px 30px 0 0;
      border-style: solid;
      border-color: #d2d2d2 transparent;
      display: none;
      width: 0; }
    body .wrapper .speechbubble:nth-child(4n+1) {
      border-color: #FC7436; }
    body .wrapper .speechbubble:nth-child(4n+2) {
      border-color: #953204; }
    body .wrapper .speechbubble:nth-child(4n+3) {
      border-color: #FF5000; }
    body .wrapper .speechbubble:nth-child(4n+4) {
      border-color: #C94103; }
    body .wrapper .speechbubble p:before {
      content: "“";
      font-family: Georgia;
      font-size: 40px;
      line-height: 0;
      display: inline-block;
      display: -webkit-inline-box; }
    body .wrapper .speechbubble .username {
      display: inline;
      font-style: italic;
      float: right; }
      body .wrapper .speechbubble .username:before {
        content: '- '; }