@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@import url('http://fonts.googleapis.com/css?family=Libre+Franklin:400,800,900');


/* Body */
*
{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased
}
table,tr,td
{
  border-collapse:collapse
}
img,input::-moz-focus-inner
{
  border:0
}
img
{
  border:0
}
input:focus,textarea:focus,a:focus
{
  outline:0
}
a
{
  color:#000000;
  -webkit-transition:color 200ms linear,background-color 300ms cubic-bezier(0.23,1,0.32,1);
  -moz-transition:color 200ms linear,background-color 300ms cubic-bezier(0.23,1,0.32,1);
  -o-transition:color 200ms linear,background-color 300ms cubic-bezier(0.23,1,0.32,1);
  -ms-transition:color 200ms linear,background-color 300ms cubic-bezier(0.23,1,0.32,1);
  box-transition:color 200ms linear,background-color 300ms cubic-bezier(0.23,1,0.32,1)
}
a,a:hover
{
  text-decoration:none
}
a:hover
{
  color:#3072e5;
  cursor: pointer;
}

body img
{
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden
}

/* Basic styles */
  body
  {
    font-family:'Libre Franklin',serif;
    font-size:15px;
    color:#000;
    overflow-x:hidden;
    background: white;
  }

#logo {
  text-align: center;
  width: 100%;
  padding: 55px 10px;
  font-size: 2.5em;
  text-transform: capitalize;
  font-weight: 800;
  word-spacing: 3px;
  border-bottom: 1px solid #f2f2f2;
}
header ul {
  margin:auto;
  text-align: center;
}
header ul li {
  display: inline-block;
  margin : 0px 10px;
  padding : 20px 10px;
}
header ul li.active a {
  color : #3072e5;
}

.content .container{
  background : #f8f8f8;
}
.content {
  background: #f8f8f8;
}

.leftside {
  padding : 20px;
  padding-bottom: 40px;
}

.post {
  background: white;
  padding : 20px 20px;
  border : 1px solid #fcfcfc;
  margin-bottom: 20px;
}
.post .over-img {
  overflow: hidden;
}
.post .over-img img{
  min-width: 100%;
  width: 100%;
}

.post .info-post {
  padding-left: 20px;
}

.post .info-post p{
  margin-bottom: 10px;
}

.post .info-post .post-title{
  font-size: 1.8em;
}
.post-cat-date {
  font-size: 0.8em;
}
.post-excerpt  {
  font-size: 1em;
}

.post:after {
  content: '';
      display: block;
      clear: both;
}

.pag {
  margin-bottom: 20px;
  text-align: center;
  margin:auto;
  width: 100%;

}
.pag ul {

}
.pag ul li {
  display: inline-block;
  list-style: none;
  padding : 4px 8px;
  background: white;
  margin-left: 4px;
  margin-right: 5px;
}

.pag ul li.active {
  border : 1px solid #3072e5;
}

.pag ul li a {
  color : #919191;
}

.pag ul li:hover a {
 color : #3072e5;

}

.pag ul li.active a {
  color : #3072e5;
}

footer {
  background: #515151;
  padding : 10px 20px;
  color : white;
  text-align: center;
}

footer .container {
  background: #515151;
}

footer a {
  color: white;
}

footer p {
  display: inline-block;
}
footer ul {
  display: inline-block;
  margin-left: 25px;
}
footer ul li {
  display: inline-block;
  list-style: none;
  margin : 0px 10px;
}

.rightside {
  margin-bottom: 30px;
  padding-left: 10px;
}

.widget {
  margin-top: 20px;
  padding: 20px;
  width: 100%;
  background: white;
  text-align: center;
}

.widget .widget-name {
  display: inline-block;
  padding : 7px 14px;
  font-size: 1.1em;
  margin: auto;
  border : 1px solid #f2f2f2;
  margin-bottom: 12px;
}

.widget .widget-content {
  text-align: left;
}
.widget .widget-content .post-pop {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}
.widget .widget-content .post-pop .content-img-post-pop{
  width: 100%;
}
.widget .widget-content .post-pop .content-img-post-pop img{
  width: 100%;
}
.widget .widget-content .post-pop .post-pop-title {
    font-size: 1.1em;
    text-align: left;
}

.widget .widget-content .post-pop .post-pop-date {
  font-size: 0.7em;
  color : #4f4f4f;
  text-align: left;
  margin:10px 0px;
}

.post-content {
  padding : 20px;
  background: white;
}

.container-img-post img {
  width: 100%;
}

.meta-post div{
    display: inline-block;
    font-size: 0.9em;
}
.meta-post .date {
  color : #4c4c4c;
  padding-right: 15px;
  border-right : 1px solid #CCC;
}

.meta-post {
  margin-bottom: 15px;
}

.meta-post .categorie {
  margin-left: 15px;
  color : #4c4c4c;
}

.post-content-text {
  text-align: justify;
}
.post-content-text p{
  margin-bottom: 20px;
  font-size: 1.1em;
  margin-top: 10px;
}
.post-content-text a {
  color : #3072e5;
}

.post-content-text a:hover {
  text-decoration: underline;
}

.bio-user{
  text-align: justify;
}
.bio-user p{
  margin-bottom: 20px;
  font-size: 1.1em;
  margin-top: 10px;
}
.bio-user a {
  color : #3072e5;
}

.bio-user a:hover {
  text-decoration: underline;
}

.post-likes {
  width: 100%;
  text-align: center;
  background: white;
  margin-top: 20px;
  padding : 10px;
  color : #4c4c4c;
}
#likebouton img {
  width: 20px;
  margin : 5px;
}
.bio-user {
  margin-bottom: 20px;
}

.website-user a {
  color : #3072e5;
}
.post-content:after {
  content:'';
  display: block;
  clear: both;
}
.profile-pic {
  width: 100%;
}

hr {
  margin-top:20px;margin-bottom:20px;
}
.liked img, .follower img, .follows img {
  width: 25px;
  margin-right: 8px;
}
.liked, .follower, .follows {
  margin-bottom: 10px;
}
.liked a, .follower a, .follows a {
  margin-bottom: 5px;
}
.hide {
	display: none;
}
.show {
	display: block;
}

textarea#meta_description {
	height : 100px!important;
	min-height : 100px!important;
}

/* Autre */
.pure-button-primary {
	background-color: #3072e5!important;
	margin-top:15px;
}
.pure-form {
	text-align: center!important;
}
.text-center {
	text-align: center;
}
.pure-form input {
	width: 500px;
}
.pure-form select {
	width: 500px;
}
.pure-form textarea {
	min-height: 300px;
	width: 500px;
}



.message {
	padding : 20px;
	background: #cbeec4;
	font-size: 1em;
	color : #03370d;
	text-align: center;
	margin: 10px 0px;
}

.icon {display: none;}
.li-menu { display: none;}

/* Responsiveness */

@media screen and (min-width: 1151px) {

}
@media screen and (min-width: 1001px) and (max-width: 1150px) {
	.container {
		width: 980px!important;
	}
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
  .container {
    width: 800px!important;
  }


}
@media screen and (max-width: 799px) {

	body {
		overflow: visible;
	}
	.container {
      width: 480px!important;
    }


    html body .content .container .rightside {
      width: 100%!important;
    }
    html body .content .container .leftside{
      width: 100%!important;
    }
    .col-3 {
      width: 100%!important;
    }

}

@media screen and (max-width: 479px)  {
	body .container {
		width: 400px!important;
	}
  .rightside {
    width: 100%!important;
  }
  .leftside {
    width: 100%!important;
  }
  .col-3 {
    width: 100%!important;
  }
}