* {
  transition: all .65s ease;
  box-sizing: border-box;
}

body,html {
    height: 100%;
}
body {
    background: #fafafa;
    font-family: "Raleway", sans-serif;
    margin: 0;
    padding: 0;
}

/*----------------------
   ANIMATION
----------------------*/
.fade-in {
    animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animate {
    transition: all 0.5s ease-out;
}
/*--------------------------
   TITLE PAGE + TEXTCENTER
--------------------------*/
h3 {
    font-size: 2rem;
    color: #f7686e;
    font-weight: 200;
}
.text-center {
    text-align: center;
}
/*----------------------
    LIENS
----------------------*/
a {
    text-decoration: none;
    color:#5a5a5a;
    position: relative; 
}
a:hover, a:focus{
    color: #ff7272; 
}
a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #ff7272;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
    transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
}
a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/*----------------------
    CONTAINER
----------------------*/
.container {
    max-width: 1280px;
    margin: 0 auto;
}
/*---------------------------
    HEADER + CONTAINER FLEX
---------------------------*/
.header {
    background: #212121;
    padding: 1rem;
    color: white;
}
.header .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
/*----------------------------------------
    HEADER+SITETITLE+SOUSTITLE+QUERY
----------------------------------------*/
.header .site__title, .header .site__tagline {
    font-weight: 400;
}
.logo {
    background: url("../img/pluxml-logo-black.png") top left no-repeat;
    background-size: auto;
    height: 4rem;
    background-size: 4rem;
    background-position: center center;
    padding-left: 11rem;
}
/*----------------------
   SITE TITLE
----------------------*/
.site__title, h1, h2 {
    font-size: 2.5rem;
}
.site__title a {
    color: #5a5a5a ;
    text-decoration: none;
}
.site__title a:hover {
    color: #f7686e;
}
.site__tagline {
  font-size: 1.3rem;
}
/*----------------------
    HEADER QUERY
----------------------*/
@media (max-width: 700px) {
    .header .site__title, .header .site__tagline {
        width: 100%;
        text-align: center;
  }
    .header .site__title {
        margin: 1rem;
      }
      .logo{height: 0;}
}
/*----------------------
    BKG IMG
----------------------*/
.full__hero {
    background-size: cover;
    min-height: 60%;
    width: 100%;
    background-repeat: no-repeat;
}

@media (max-width: 700px) {
    .full__hero {
        min-height: 20%;
  }
}
/*---------------------------------------
    NAVIGATION +DROPDOWN PAGE STATIQUES
---------------------------------------*/
 .nav {
    background: #fafafa;
    color: #212121;
    border-bottom: 1px solid #ddd;
} 
.nav a  {
    color: #212121;
    text-decoration: none;
}
.nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
.nav ul a, .nav ul li div {
    padding: 1rem 2rem;
    display: flex;
    text-transform: uppercase;
}
.nav ul div::after {
	content: '\21c5';
    margin-left: 1rem;
}
.nav ul li{
	position:relative;  
}

/*----------------------
   DROPDOWN 
----------------------*/
.nav ul ul {
    display:none;
    position:absolute;
	top:100%;
	left:0;
    background-color: #fafafa; 
	padding:0;
	z-index: 9999; 
    width:200px;
}
.nav ul li:hover > ul,.nav ul li:focus > ul {
	display:block;
    animation: fadein 0.8s;
}
.nav ul a:hover, .nav ul a:focus, ul li div:hover {
    background: #ddd;
    color: #Ff6067;
}
.nav ul .mobile__button a {
    position: absolute;
    left: -99999rem;
}
@media (max-width: 700px) {
    .nav ul {
        flex-wrap: wrap;
        justify-content: flex-start;
  } 
    .nav ul a, .nav ul li div{
        position: absolute;
        left: -99999rem;
  }
    .nav ul ul  {
        display: block !important;
        animation: fadein 0.1s;
    }
    .nav ul.open li, .nav ul ul  {
        width: 100%;
  }
    .nav ul.open li.mobile__button a {
        background: #fbf78d;
        color: #0e3447;
        
  }
    .nav ul.open a, .nav ul.open ul  {
        position: static;
  }
    .nav ul .mobile__button a {
        position: static;
  }
  .nav a {
    width: 100%;
  }
}
/* ---------------------------
     STICKY MENU
--------------------------- */
.menu-fixed {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.4s ease;
    background: #212121;
    color: #fff;
    border-bottom: 1px solid #212121;
}

.menu-fixed.nav a  {
    color: #fff;
}
.menu-fixed.nav ul ul{
    background: #212121;
    transition: all 0.4s ease;
}
/*----------------------
    POST
----------------------*/
.post {
    padding: 1.4rem;
}
/*----------------------
    POST-CONTENT
----------------------*/
 .article-content {
     padding: 0.8rem;
} 
.article-content p{
     line-height: 1.5;
}
/*----------------------
    GRID ARTICLES
----------------------*/
.grid {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;    
}
/*---------------------------
    ARTICLES SUR 2 COLONNES
---------------------------*/
.grid .article {
    max-width: 47%;
    background: #fafafa;
    color: #0a2c43;
    border-bottom: 1px solid #212121;
    margin-bottom: 2.18rem;
    position: relative;
    overflow: hidden;
}
.grid .article .article-title a {
    color: #212121;
    font-size: 24px;
    margin: 0 0 5px 0;
    text-decoration: none;
    font-weight: 200;
}
.grid .article .article-title a:hover {
     color: #FF6067; 
}
.grid .article .article-image  {
    max-width: 100%;
}
img {
    max-width: 100%; 
    /* width: 600px; height: 399px;
        object-fit: cover;
        overflow: hidden;
        object-position: 50% 0; 
    border: 1px solid black; */
}

.grid .article:hover, .grid .article:focus {
    background: #f7f5f5;
    border-bottom-color: #FF6067;
}
/*----------------------
   STYLE META
----------------------*/
.art-author, .art-date, .art-cat, .art-tags {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
}
.art-date {
    background: #212121;
    color: #fff;
}
.art-more a{
    color: #FF6067;
}
.art-more a:hover{
    color: #212121;
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    .grid .article {
        max-width: 47%;
        width: 47%;
        margin-left: 1%;
    }
}

@media (max-width: 660px) {
  .grid .article {
    max-width: 100%;
    width: 100%;
  }
}
.grid.meta .article  {
      max-width: 31%;
}
.grid.meta .article:hover, .grid.meta .article:focus {
    background: #f7f5f5;
    border-bottom-color: #FF6067;
}
@media (max-width: 770px) {
  .grid.meta .article  {
    max-width: 48%;
  }
}
@media (max-width: 770px) and (max-width: 660px) {
  .grid.meta .article  {
    max-width: 100%;
    width: 100%;
  }
    .article-content {
    padding: 0.8rem;
}
}

/*-----------------------
    BREADCRUMB
-----------------------*/
ul.breadcrumb{
    margin-top: 2rem;
    background: #ebebeb;
    display: flex;
    /*align-items: right;
    justify-content: right;*/
   
}
ul.breadcrumb li{
    list-style-type: none;
    margin-left: 0.5rem;
    padding: 20px 3px;
}
.breadcrumb li + li:before,
.breadcrumb > li + li a:before {
	content: '/';
    color: red;
    margin-right: 1rem;
}
@media (max-width: 770px) and (max-width: 660px) {
    ul.breadcrumb li{
   margin-left: 0; 
}
    
}
/*----------------------
    ASIDE
----------------------*/
.aside {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset;
    padding: 0 10px; 
    border: 1px solid #f4f4f4;
    width:100%; 
}
ul.inline-list {
	font-size: 0rem;
	margin: 1.5rem 0;
	padding-left: 0;
}
ul.inline-list li {
	display: inline-block;
	list-style-type: none;
	margin-left: 1.5rem;
	font-size: 1.5rem;
}
ul.inline-list li:first-child {
	margin-left: 0;
}
ul.unstyled-list {
	padding-left: 0;
}
ul.unstyled-list li {
	list-style-type: none;
}
ul.unstyled-list li a {
    line-height: 1.9;
}
 ul.tag-list li {
    display: inline-flex;
    margin-right: 1rem;
     font-size: 1.5rem;
}
@media (max-width: 770px) and (max-width: 660px) {
    ul.tag-list{
        margin-left: 0;
    }
    ul.tag-list li {
        font-size: 1rem;
        padding: 0.1rem
    }
    
}


 ul.tag-list li.tag-size-1 a {
    font-size: 0.5rem;
 }
 ul.tag-list li.tag-size-2 a {
    font-size: 0.8rem;
 }
 ul.tag-list li.tag-size-3 a {
    font-size: 1rem;
 }
 ul.tag-list li.tag-size-4 a {
    font-size: 1.2rem;
 }
 ul.tag-list li.tag-size-5 a {
    font-size: 1.4rem;
 }
 ul.tag-list li.tag-size-6 a {
    font-size: 1.6rem;
 }
 ul.tag-list li.tag-size-7 a {
    font-size: 1.8rem;
 }
 ul.tag-list li.tag-size-8 a {
    font-size: 2rem;
 }
 ul.tag-list li.tag-size-9 a {
    font-size: 2.2rem
 }
 ul.tag-list li.tag-size-10 a {
    font-size: 2.4rem;
 }
 ul.tag-list li.tag-size-max a {
    font-size: 2.8rem;
 } 
.tag-size-1 a	{ color: #cc66cc; }
.tag-size-2 a	{ color: #000000; }
.tag-size-3 a	{ color: #cc0000; }
.tag-size-4 a	{ color: #b252f6; }
.tag-size-5 a	{ color: #999999; }
.tag-size-6 a	{ color: #996633; }
.tag-size-7 a	{ color: #6666cc; }
.tag-size-8 a	{ color: #339999; }
.tag-size-9 a	{ color: #009900; }
.tag-size-10 a	{ color: #ff99ff; }
.tag-size-max a	{ color: #ff6600; }
 
/*----------------------
    FOOTER
----------------------*/
.footer {
    background: #212121;
    color: white;
    padding: 3rem;
    margin-top: 3rem;
}

/*.footer a {
  color: #F7EE1A;
  text-decoration: none;
  border-bottom: 1px solid;
}*/
.footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.footer ul li {
    list-style-type: none;
     margin-bottom: 1rem;;
}
@media (max-width: 770px) and (max-width: 660px) {
    .footer  {
        padding: 1rem;
    }
    .footer ul{
        flex-direction: column;
    }
}
/*----------------------
   COMMENTS PLUCSS STYLE
----------------------*/

.comment {
	background-image: url('../img/user.png');
	background-repeat: no-repeat;
	margin-bottom: 2.5rem;
	padding-left: 6rem;
}
.comment blockquote {
	margin: 0;
	font-size: 1rem;
    line-height: 1.8;
}
.type-admin {
	background-color: #F0F8FF;
	padding: .2rem .5rem;
}
.nbcom {
	background-color: #212121;
	border-radius: .3rem;
	color: #fff;
	padding: .4rem .6rem;
}
.nbcom:hover {
	background-color: #FF6067;
	color: #fff;
	text-decoration: none;
}
.level-0 {
	margin-left: 0;
}
.level-1 {
	margin-left: 5rem;
}
.level-2 {
	margin-left: 10rem
}
.level-3 {
	margin-left: 15rem;
}
.level-4 {
	margin-left: 20rem;
}
.level-5,
.level-max {
	margin-left: 25rem;
}
@media (max-width: 768px) {
  .comment { background-image: none; padding-left: 0; }
  .level-1 { margin-left: 1rem; }
  .level-2 { margin-left: 2rem; }
  .level-3 { margin-left: 3rem; }
  .level-4 { margin-left: 4rem; }
  .level-5, .level-max { margin-left: 5rem; }
}
#id_answer {
	margin-bottom: 1.5rem;
	padding:1.5rem;
	border:1px solid #eee;
	width:100%;
	background:#fafafa;
	display:none;
}
.capcha-letter,
.capcha-word {
	font-weight: bold;
}
.capcha-word {
	background-color: #ddd;
	
	transition-duration: .2s;
}
.capcha-word:hover {
	background-color: #666;
	color: #fff;
	transition-duration: .2s;
}
/*----------------------
    FORM PLUCSS STYLE
----------------------*/
fieldset {
	border: none;
	padding: 0;
}
legend {
	margin-bottom: 1.5rem;
	padding: 0;
}
label {
	display: block;
	padding-bottom: .3rem;
}
button,
input,
select,
textarea {
	font: inherit;
	height: 3rem;
	margin: 0;
	outline: none;
	padding-left: .4rem;
	padding-right: .4rem;
	width: 100%;
}
button,
input {
	overflow: visible;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
	border-color: transparent;
	cursor: pointer;
	padding-left: .7rem;
	padding-right: .7rem;
	width: auto;
}
textarea {
	height: auto;
	overflow: auto;
}
select {
	padding-left: .2rem;
	padding-right: 0;
}
optgroup {
	font-weight: bold;
	font-style: normal;
}
[type="checkbox"],
[type="radio"] {
	height: auto;
	padding: 0;
	width: auto;
}
[type="file"] {
	height: auto;
	padding: 0;
}
[disabled]:hover {
	cursor: not-allowed;
}
.dark {
    background-color: #212121; 
    color: #fff;
}
/*-------------------------
    PAGINATION PLUCSS STYLE
-------------------------*/
.pagination {
	margin: 3rem 0 3rem 0;
}
.pagination a {
	background-color: #ddd;
	border-radius: .3rem;
	color: #212121;
	padding: .9rem .7rem;
	transition-duration: .2s;
}
.pagination a:hover {
	background-color: #ff6067;
	color: #fff;
	text-decoration: none;
}
.pagination span:first-letter,
.pagination a:first-letter {
	text-transform: uppercase;
}
.p_first,
.p_prev,
.p_current,
.p_next,
.p_last {
	display: inline-block;
}