@charset "utf-8";
/* CSS Document */

@-webkit-keyframes flipInX {
  0% { -webkit-transform: perspective(400px) rotateX(90deg); }

  30% { -webkit-transform: perspective(400px) rotateX(-10deg); }

  70% { -webkit-transform: perspective(400px) rotateX(10deg); }

  100% { -webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes flipInX {
  0% { -moz-transform: perspective(400px) rotateX(90deg); }

  30% { -moz-transform: perspective(400px) rotateX(-10deg); }

  70% { -moz-transform: perspective(400px) rotateX(10deg); }

  100% { -moz-transform: perspective(400px) rotateX(0deg); } }

@-o-keyframes flipInX {
  0% { -o-transform: perspective(400px) rotateX(90deg);
       opacity: 0; }

  30% { -o-transform: perspective(400px) rotateX(-10deg); }

  70% { -o-transform: perspective(400px) rotateX(10deg); }

  100% { -o-transform: perspective(400px) rotateX(0deg); } }

@keyframes flipInX {
  0% { transform: perspective(400px) rotateX(90deg);
       opacity: 0; }

  30% { transform: perspective(400px) rotateX(-10deg); }

  70% { transform: perspective(400px) rotateX(10deg); }

  100% { transform: perspective(400px) rotateX(0deg); } }

.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill: both;
  -moz-animation-fill: both;
  -ms-animation-fill: both;
  -o-animation-fill: both;
  animation-fill: both; }

.flipInX {
  -webkit-animation-name: flipInX;
  -moz-animation-name: flipInX;
  -ms-animation-name: flipInX;
  -o-animation-name: flipInX;
  animation-name: flipInX; }

/* =============================================== /*
/*                                                 /* 
/*                     Messages                    /*
/*                                                 /*
/* =============================================== */

#messages {
  position: relative;
 margin:0px;
  padding: 0;

  list-style: none; }

#messages li {
  float: left;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #c8c7b4; }

#messages li:nth-child(2n) .infos {
  float: right;
  margin-left: 20px; }

#messages li:nth-child(2n) .infos a {
  -webkit-box-shadow: 1px 1px 0 1px rgba(90, 81, 15, 0.2);
  -moz-box-shadow: 1px 1px 0 1px rgba(90, 81, 15, 0.2);
  box-shadow: 1px 1px 0 1px rgba(90, 81, 15, 0.2);
  left: inherit; }

#messages li:nth-child(2n) .content { border-width: 1px 3px 4px 4px; }

#messages li:nth-child(2n) .content:after,
#messages li:nth-child(2n) .content:before {
  right: -9px;
  left: inherit;
  -webkit-transform: rotate(41deg);
  -moz-transform: rotate(41deg);
  -o-transform: rotate(41deg);
  transform: rotate(41deg); }

#messages li:nth-child(2n) .facebook { right: -10px; }

#messages li:nth-child(2n) .twitter { right: -5%; }

#messages li:nth-child(2n) .github { right: -1%; }

#messages .infos {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  float: left;
  padding: 3px;
  width: 160px;
  height: 160px;
  border: 3px solid #12b7e5; }

#messages .infos a {
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  -ms-border-radius: 17px;
  -o-border-radius: 17px;
  border-radius: 17px;
  -webkit-box-shadow: -1px 1px 0 1px rgba(90, 81, 15, 0.2);
  -moz-box-shadow: -1px 1px 0 1px rgba(90, 81, 15, 0.2);
  box-shadow: -1px 1px 0 1px rgba(90, 81, 15, 0.2);
  position: absolute;
  width: 20px;
  height: 22px;
  background-color: #12b7e5;
  color: #fff;
  text-decoration: none;
  text-indent: -10000px;
  font-size: 11px; }

#messages .infos a:hover {
  padding: 0 10px 0 18px;
  width: auto;
  border: none;
  text-indent: 0;
  opacity: 0.95; }

#messages img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 100%; }

/* =============================================== /*
/*                                                 /* 
/*      + SVG sprite (social media icons ).        /*
/*      + You can use PNG if your navigator don't  /*
/*        support SVG format.                      /*
/*                                                 /*
/* =============================================== */

.sprite {
  background: url("https://docs.google.com/uc?export=download&id=0B3VygIVAuRCQRzF1d0RyWHFFRU0") no-repeat;
  background-size: 23px; }

.twitter {
  background-position: -1px 5px;
  top: 16%;
  left: -2%; }

.twitter:hover { background-color: #2094dd !important; }

.facebook {
  background-position: -2px -27px;
  top: 42%;
  left: -8%; }

.facebook:hover { background-color: #3b5998 !important; }

.github {
  background-position: -2px -10px;
  bottom: 17%;
  left: -1%; }

.github:hover { background-color: #444 !important; }

.content {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  float: left;
  margin-left: 20px;
  padding: 15px 25px;
  width: 900px;
  border-width: 1px 4px 4px 3px;
  border-style: solid;
  border-color: #F5F5F5;
  background-color: #fff;

/* ==================================================================== /*
/*                                                                      /* 
/*   + Css Patterns from : http://lea.verou.me/css3patterns/            /* 
/*   + Arbaoui mehdi : Fix a gradient color bug in OPERA,FIREFOX        /*
/*     and SAFARI (only new versions)                                   /*
/*                                                                      /*
/* ==================================================================== */

  background-image: -linear-gradient(0deg, transparent 18px, #f6f6f6 0, #f6f6f6 20px, transparent 19px),
                    -linear-gradient(#f6f6f6 0.1em, transparent 0.1em);
  background-image: -webkit-linear-gradient(0deg, transparent 11px, #f6f6f6 0, #f6f6f6 14px, transparent 12px),
                    -webkit-linear-gradient(#f6f6f6 0.1em, transparent 0.1em);
  background-image: -moz-linear-gradient(0deg, transparent 11px, #f6f6f6 0, #f6f6f6 13px, transparent 12px),
                    -moz-linear-gradient(#f6f6f6 0.1em, transparent 0.1em);
  background-size: 100% 18px;
  color: #666;

 

}


.content:after, .content:before {
  border-bottom: 23px solid transparent;
  border-right: 20px solid #f2f2f2;
  top: 35px;
  content: '';
  position: absolute;
  left: -9px;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  -o-transform: rotate(220deg);
  transform: rotate(220deg); }

.content h3 {
  font-family: 'open_sanssemibold';
  margin: 0;
  padding: 0;
  font-weight: normal; 
  font-size:16px;
  border-bottom:none;}

.content p {
  margin: 10px 0 0 0;
  font-size: 13px;
  line-height: 1.7em;
   font-family: 'open_sansregular';

   }

.content p a {
  text-decoration: none;
  background-color: #f7f3c5;
  border-bottom: solid 1px #cfcebe;
  color: #834202;
  padding: 1px 4px; }

.content p a:hover { background-color: #f5ec82; }

.content span {

  color: #12b7e5;
 font-family: 'open_sanssemibold';
 font-weight:normal;
 font-size:12px; 

 }

.content:before {
  top: 34px;
  left: -11px;
  border-right: 19px solid rgba(0, 0, 0, 0.1); }