body {
  margin: 0px;
  padding: 0px;
}

@import url('https://fonts.googleapis.com/css?family=Lato');

body
{
  background-color: #14a1cc;
  font-family:'Lato';
  margin:0;
  padding:0;
}

a
{
  color:#fff;
  text-decoration:none;
}

.material-icons
{
  font-size:24px;
  margin-right:12px;
  vertical-align:text-bottom;
}

.menu
{
  background:#3f51b5;
  color:#fff;
  height:50px;
  position:relative;
}

.menu .title
{
  font-size:15px;
  font-weight:bold;
  line-height:50px;
  padding:0 20px;
  text-transform:uppercase;
}

.menu nav
{
  background:inherit;
  font-size:20px;
  font-weight:bold;
  height:0;
  overflow:hidden;
  text-transform:uppercase;
  transition:height .2s;
}

.menu nav > *
{
  display:block;
  letter-spacing:1px;
  line-height:2.5;
  padding:0 20px;
  width:100%;
  color:#fff;
}

.menu nav input
{
  background:rgba(0,0,0,.2);
  border:none;
  color:#fff;
}

.menu .burger
{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  color:inherit;
  cursor:pointer;
  font-family:'Material Icons';
  font-size:30px;
  line-height:50px;
  margin:0;
  outline:0;
  padding:0;
  position:absolute;
  text-align:center;
  top:0;
  right:10px;
  width:50px;
}

.menu .burger:before
{
  content:'menu';
}

.menu .burger:checked:before
{
  content:'close';
}

.menu .burger:checked + nav
{
  height:calc(45vh - 50px);
  position:relative;
  z-index: 4;
}

p
{
  padding:5px;
}

p,h2 {
  font-size:15px;
  color:black;
  text-align:center;
}

img {
  width:100%;
  position:relative;
}

a{
  color:blue;
}

.pagination {
  color:blue;
}

li {
    list-style:none;
    display:inline;
}

ul {
  text-align: center;
  margin-right: 60px;
}

#lirelasuite {
  display:none;
}

.reseausociaux{
  border: red solid 2;
  width:100px;
  height:100px;
  display:flex;
  flex-direction: row;
 }

.form_connexion > *{
    display:flex;
    flex-direction: column;
    width:300px;
    margin:auto;
}

.lasuite {
    color:brown;
    font-variant:small-caps;
}
.demasquer {
    display:none;
}

#post1:hover .demasquer {
    display:inline;
}

#post1:hover .lasuite {
    display:none;
}

.demasquer:hover {
    display: inline;
}

article {
  border: 1px dashed #666;
  padding: 20px;
}

footer{
  display: flex;
  justify-content: space-around;
  align-self: flex-end;
  background:#3f51b5;
}

footer .reseausociaux{
  height: auto;
  display: flex;
  align-items: center;
}