/* padding body pour placement barre haute fixe */
body { padding-top: 60px;
       text-align: left;
       rfont-family: Georgia, serif;
	font-family: Luciole, Roboto;
}



/* Reglage couleur scroll */
html {
  --scrollbarBG: #5C821A;
  --thumbBG: #5C821A;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}


/* Diminution de la barre du haut 11.12.16 */
.navbar-brand {
  height: 20px;
  padding: 2px 2px;
  line-height: 20px;
}

.navbar-nav > li > a {
  padding-top: 5px;
  padding-bottom: 0px;
  line-height: 20px;
}

.navbar {
  background-color: #000000;
  font-family: Luciole, Roboto Condensed, Lato, Oswald, helvetica, sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: bold;
  min-height: 20px;
  margin-bottom: 0px;
}


.dropdown-item {
  font-family: Luciole, Roboto Condensed, Lato, Oswald, helvetica, sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
}

.dropdown-item a:focus,
.dropdown-item a:hover {
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background-color: #5C821A;
}

.dropdown-menu a:focus,
.dropdown-menu a:hover {
  text-decoration: none;
  color: #ffffff;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5C821A), to(#5C821A));
  background-image: -webkit-linear-gradient(top, #5C821A, 0%, #5C821A, 100%);
  background-image: -moz-linear-gradient(top, #5C821A 0%, #5C821A 100%);
  background-image: linear-gradient(to bottom, #5C821A 0%, #5C821A 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5C821A', endColorstr='#5C821A', GradientType=0);
  background-color: #5C821A;
}

/* rendre les menus scrollable */
.scrollable-menu {
	height: auto;
	max-height: 200px;
	overflow-y: auto;
	scrollbar-color: dark;
}

.pre-scrollable {
	color: #5C821A;
	scrollbar-color: dark;
}

/* Fin reglage diminution de la barre du haut 11.12.16 */

/* logo + texte centré remonté vers la barre du haut 11.12.16 */
.logo-numzero{
  font-family: Luciole, Roboto, Lato, Oswald, helvetica, sans-serif;
  font-size: 1.0rem;
  #margin-top: -20px;
  rmargin-left: auto;
  rmargin-right: auto; 
  margin: -20px -15px 0px -15px;
  text-align: center;
}

.slogan-nz {
  font-family: Luciole, Roboto, Lato, Oswald, helvetica, sans-serif;
  font-size: 1.6rem;
  rfont-weight: bold;
  line-height: 1.0em;
  margin-top:10;
  margin-bottom:10;
  color: #000000;
  text-align: center;
  rtext-transform: uppercase;
}

/* fin logo + texte centré remonté vers la barre du haut 11.12.16 */

/* on decale les boutons d'admin de la barre du haut */
.spip-admin-float {margin-top: 50px;}

/*=== MANCHETTE ===*/

/* Image manchette */
.wrapImage { position: relative; }
.background-image { z-index: -1; }
.overlay-text { position: absolute; top: 8px; left: 16px; font-family: 'Fjalla One', helvetica, sans-serif; font-size: 1.0rem;}
.overlay-text a { padding: 1px 3px; color: white; background-color: #000000; text-transform: uppercase;}
.overlay-text a:hover { padding: 1px 3px; color: white; background-color: #5C821A; text-transform: uppercase; text-decoration: none;}
.overlay-text-bottom-right { position: absolute; bottom: 8px; right: 16px; font-family: 'Fjalla One', helvetica, sans-serif; font-size: 0.8rem;}
.overlay-text-bottom-right a { padding: 2px 1px 0px 1px; color: black; background-color: #ffffff; text-transform: uppercase;}
.overlay-text-bottom-right a:hover { padding: 2px 1px 0px 1px; color: white; background-color: #000000; text-transform: uppercase; text-decoration: none;}

.mid h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: white;
  letter-spacing: -1px;
  text-align: center;
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.6rem;
  transform: translate(-50%, -50%);
}


/* Citations, code et poesie */

blockquote.spip{
  margin: 2em 3em 2em 3em;
  border-left: none;
}

blockquote{
  margin: 2em 3em 2em 3em;
  border-left: none;
  padding-left: 1em;
}

.caractencadre-spip {
    color: #5C821A;
    font-weight: bold;
}


/* Contenu article une */

une_zero h2 {
        font-family: Luciole, Roboto Condensed, Oswald, Lato, Oswald, helvetica, sans-serif;
        rfont-family: Roboto, sans-serif;
        rfont-size: 1.6rem;
        font-weight: bold;
        font-size: 1.6rem;
        line-height: 1.2em;
        margin-top:0;
	margin-bottom:0;
        padding-top: 5px;
	color: #000000; 
}

une_zero h3 {
        font-family: Luciole, Roboto Condensed, Oswald, Lato, Oswald, helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 1.2em;
        margin-top:0;
        margin-bottom:0;
        padding-top: 5px;
        color: #000000;
}

une_zero .intro {
        rfont-family: Verdana, Arial, Helvetica, sans-serif;
        font-family: Luciole, Roboto;
        font-weight: normal;
        margin: 2px;
        padding: 1px;
        font-size: 14px;
        text-align: left;
}

une_zero h2 a:link {
   color: #000000;
}

une_zero h2 a:hover {
   color: #5C821A;
}

une_zero hr {
   color: #5C821A;
   rbackground:red;
   rbackground-color: #5C821A;
}

.time {
	font-size: 0.8rem;
}

.rubrique {
   rbackground-color: #000000;
   color: #000000;
        font-size: 0.8rem;
}

.rubrique a:link,
.rubrique a:visited{
   color: #696969;
}
.rubrique a:hover{
   color: #5C821A;
}

.keyword {
   text-transform : uppercase;
        font-size: 0.8rem;
}

.keyword a:link,
.keyword a:visited{
   color: #5C821A;
}
.keyword a:hover{
   color: #000000;
}

.localisation {
   text-transform : uppercase;
   font-size: 0.8rem;
}

.localisation a:link,
.localisation a:visited{
   color: #5C821A;
}
.localisation a:hover{
   color: #000000;
}



/* Fin Contenu article une */

article_zero h1 {
        font-family: Luciole, Roboto Condensed, Lato, Oswald, helvetica, sans-serif;
        font-size: 2.2rem;
        line-height: 1.2em;
        margin-top:0;
	margin-bottom:0;
	color: #000000; 
}

article_zero h2 {
        font-family: Luciole, Roboto Condensed, Lato, Oswald, helvetica, sans-serif;
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.2em;
        margin-top:0;
        margin-bottom:0;
	color: #000000; 
}


/* Fin article */

.colonne-left {
    border-right: 0.2px solid #DCDCDC;
}

.colonne-left-article {
    border-right: 0.2px solid #DCDCDC;
    rpadding : 0 5% 0 1%;
    padding-right : 5%;
}

.without-dot {
    list-style-type: none;
    padding:0;
    margin:0;
}

/* .pagination a { padding: 3px 10px; border-radius: 5px; } */

/* Pagination */
.pagination a,
.pagination .on  { padding:.5em; margin: 0em; border-radius:.25em; }
.pagination a { background: #f0f0f0; text-decoration: none; }
.pagination .on,
.pagination a:hover,
.pagination a:focus,
.pagination a:active { font-weight: bold; background: #5C821A; color: #FFFFFF; }
.pagination .sep { visibility: hidden; }
.menu_articles .pagination strong {font-size:1em;}


/* gestion des logos spip */
.spip_logo {
	float: left;
	rdisplay: flex;
	rjustify-content: center;
}

.spip_logos {
    position: relative;
    max-width:100%;
    height:auto;
    padding-left :10px;
    padding-bottom :10px;
    padding-top :10px;
    margin-top:5px;
    margin-right:5px;
    margin-bottom:5px;
    rmargin-left:0;
    rz-index:1;
}

.spip_logos .desc { 
   display:block;
   position:absolute;
   font-family: 'Roboto', sans-serif;
   text-transform: uppercase;
   color: red; 
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.75);
   z-index:2;
}

.liste_droite {
 font-family: Luciole, Lato, Oswald, helvetica, sans-serif;
 text-transform: uppercase;
 line-height: 2em;
}
 


.titre_une {
        font-family: Luciole, Roboto Condensed, Oswald, Lato, Oswald, helvetica, sans-serif;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.2em;
        -moz-hyphens: none;
        -ms-hyphens:none;
        -webkit-hyphens:none;
}

.titre_article {
        font-family: Luciole, Roboto Condensed, Verdana, Arial, Helvetica, sans-serif;
        font-size: 1.4rem;
        line-height: 1.2em;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 2px;
}

.titre_soustitre {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #003300;
}

.titre_medium {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
}

.titre_small {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #003300;
}

.texte_article {
	font-family: Luciole, Roboto;
        font-weight: normal;
        margin: 1px;
        margin-bottom: -5px;
        padding: 1px;
        font-size: 1.0rem;
	line-height: 1.5rem;
}

.texte_ps {
        font-family: Luciole, Roboto;
        margin: 15px 1px -5px 1px;
        padding: 5px 1px 1px 1px;
        font-size: 1rem;
}

.texte_ps p {
        font-family: Luciole, Roboto Condensed;
        font-size: 1.0rem;
        font-weight: 700;
}


.texte_notes {
	font-family: Luciole, Roboto;
        font-weight: normal;
        margin: 15px 1px -5px 1px;
        padding: 5px 1px 1px 1px;
        font-size: 0.9rem;
        color: #424949;
	rborder-top: 1px dashed #424949;
}

.texte_chapo {
        rfont-family: Verdana, Arial, Helvetica, sans-serif;
	font-family: Luciole, Roboto Condensed;
        font-size: 1.2rem;
        font-weight: bold;
        padding: 1px;
	line-height: 1.5rem;
}

.texte_descriptif {
	font-family: Luciole, Roboto;
        font-weight: normal;
        margin: 1px;
        margin-bottom: -5px;
        padding: 5px;
        font-size: 1.0rem;
}

.block_descriptif {
        padding: 10px;
}


.comments {
	font-family: Luciole, Roboto;
	background: #ececec;
	margin-bottom: 3rem;
}

.comments h3 {
        padding-left: 5px;
	text-transform: uppercase;
}

/* BLOCK RUBRIQUE */
.block_thematique {
	border: 1px solid #5C821A;
	padding: 0.2em 0.4em 0 0.4em;
	margin: 2.5em 0 2.5em 0;
}

.thematique h2 {
	font-size: 1.2rem;
        rborder-bottom: 2px solid #5C821A;
        line-height: 1.1em;
        rmargin: 0 0 0.4em;
        padding: 0.2em 0 0.2em 0;
	margin: -0.2em -0.4em 0.5em -0.4em;
        text-transform: uppercase;
	text-align: center;
	color: #FFFFFF;
	background: #5C821A;
}

/* LE CALENDRIER */
#calendar {
        text-align: center;
        padding: 2px;
        padding-top: 0.5em;!important
        font-size: .7em;
        font-family: Arial, Helvetica, sans-serif;
}
#calendar table { width: 100%; margin: 0 auto; padding: 0; }
#calendar caption { padding: 0.5em 0; font-weight: bold; }
#calendar th { background: #FFF; font-weight: bold; color: #003300; }
#calendar th abbr {cursor: help;font-weight: bold;}
#calendar td { margin: 0; padding: 0; border: thin solid #FFFFFF; text-align: center; background: #ececec; line-height: 1.6em; }
#calendar td.horsperiode { background: #fff; color: #fff; }
#calendar td span { color: #aaa; }
#calendar td.today{background:#fff;font-weight:bold; color:#003300;}    /* comme son nom l'indique */
#calendar .occupe a{background: #990000;}
#calendar .occupe a:link{color: #ffffff;background: #990000;display: block;}

/*=== AGENDA (VOIR HABILLAGE) ===*/

/* Embed responsive video */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*=== TUNING SOCIALTAGS ===*/

/* Grossissement de la taille */
.socialtags img {
    height: 18px;
}

/* Augmentation de l'opacité */
.socialtags-hovers {
    opacity: 0.8;
}

/* Habillage des forums
---------------------------------------------- */

.repondre { 
    clear: both; 
    margin: 0.8em -0.2em 0em -0.2em; 
    text-align: center;
    font-family: Luciole, Roboto Condensed, Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    rfont-weight: bold;
    padding-top: .2em;
    padding-bottom: .2em;
    border-top: 1px dashed #5C821A;
    rborder-bottom: 1px dashed #666;
}

.repondre a:link {
    rtext-shadow: 2px 2px 4px #666;
}
.repondre a:hover{
    rtext-shadow: 2px 2px 4px #5C821A;
    text-decoration:none; 
    color: #5C821A;
}

/* Habillage des forums */
ul.forum { display: block; clear: both; margin: 0; padding: 0; }
ul.forum, ul.forum ul { list-style: none; }
.forum-fil { margin-top: 1.50em; }
.forum-fil ul { display: block; margin: 0; padding: 0; margin-left: 1em; }
.forum-chapo .forum-titre, .forum-chapo .forum-titre a { display: block; margin: 0; padding: 0; font-weight: bold; color: #333; }
.forum-texte { margin-left: 4em; padding: 0.50em 1em; color: #333; font-size: 0.8rem; font-family: Luciole, Roboto, Verdana, Arial, Helvetica, sans-serif;}
.forum-texte .hyperlien {}
.forum-texte .repondre { margin: 0; padding: 0.10em 0; text-align: right; }

/* Boite d'un forum : eclaircissement progressif des bords */
ul .forum-message { border: 0px dashed #5C821A; border-bottom: 0px dashed #5C821A; margin: 0; padding: 0; margin-bottom: 1em; }
ul ul .forum-message { border: 1px solid #A4A4A4; }
ul ul ul .forum-message { border: 1px solid #B8B8B8; }
ul ul ul ul .forum-message { border: 1px solid #CCC; }
ul ul ul ul ul .forum-message { border: 1px solid #E0E0E0; }
ul ul ul ul ul ul .forum-message { border: 1px dotted #E0E0E0; }

/* Boite de titre d'un forum : mise en couleur selon la profondeur du forum */
ul .forum-chapo { border: 0; border-bottom: 0px dotted #5C821A; margin: 0; padding: 3px 6px 2px 6px; background: #FFFFFF;}
ul ul .forum-chapo { background: #D4E8E8; }
ul ul ul .forum-chapo { background: #E4F0F0; }
ul ul ul ul .forum-chapo { background: #F4F8F8; border-bottom: 1px dotted #E0E0E0; }
ul ul ul ul ul .forum-chapo { background: #FFF; }

/* THEMATIQUES ACTUALITES 
---------------------------------------------- */

.themactu { 
    clear: both; 
    margin-top: 2.00em; 
    margin-right: 1em;
    margin-left: 1em;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #5C821A;
    font-size: 1em;
    rfont-weight: bold;
    rborder-top: 1px dashed #666;
    rborder-bottom: 1px dashed #666;
    background: #000000;
}

.themactu a:link {
    color: #FFFFFF;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.themactu a:hover{
    color: #5C821A;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none; 
}

/* SIGNATURE RUBRIQUES SPE (COUAC) 
---------------------------------------------- */

.rubspe {
    clear: both;
    margin: 0rem 0.5rem 2rem 0.5rem;
    padding: 10px 10px 2px 10px;
    text-align: left;
    font-family: Luciole, Roboto, Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    border-width: 1px;
    border-style: dotted;
}

.rubspe a:link {
    color: #000000;
    rfont-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.rubspe a:hover{
    color: #5C821A;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
}

.form_login,
.form_identifiants {
    clear: both;
    margin-bottom: 2.00em;
    margin-right: 1em;
    margin-left: 1em;
    padding: 10px 10px 10px 10px;
    text-align: left;
    font-family: Luciole, Roboto, Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    rfont-weight: bold;
    rborder-top: 1px solid #666;
    rborder-bottom: 1px solid #666;
    rborder-left: 1px solid #666;
    rborder-right: 1px solid #666;
    border-width: 1px;
    border-style: dotted;
    rbackground: #000000;
}

.form_login a:link,
.form_identifiants a:link {
    color: #000000;
}
.form_login a:hover,
.form_identifiants a:hover {
    color: #5C821A;
    text-decoration:none;
}

.form_login h3,
.form_identifiants h3 {
	text-transform: uppercase;
	text-align: center;
	font-family: 'Roboto Condensed', 'Fjalla One', helvetica, sans-serif;
}

.form_login .btn,
.form_identifiants .btn {
	text-transform: uppercase;
	font-weight: normal;
	background-color: #FFFFFF;
	border: 1px solid #cccccc;
}

.form_login legend,
.form_identifiants legend {
	font-weight: normal;
	font-family: 'Roboto Condensed', 'Fjalla One', helvetica, sans-serif;
	border-bottom: 0px;
	text-align: center;
}

.details {
	font-weight: bold;
	margin-top: 1em;
}

/* Effet sepia sur les images */
.sepia img
{
        filter: sepia(0);
        -webkit-filter: sepia(0);
        -moz-filter: sepia(0);
        -o-filter: sepia(0);
        -ms-filter: sepia(0);
}
.sepia img:hover
{
        filter: sepia(1);
        -webkit-filter: sepia(1);
        -moz-filter: sepia(1);
        -o-filter: sepia(1);
        -ms-filter: sepia(1);
}

/* Oembed */
.oembed_video {
    width: 100%; 
}

.oe-author_par,
.oe-author_name {
    display: none;
}

/* Suivi */
.suivi-resume {
    rbackground-color: #f5f5f5;
    background-color: #d3d3d3;
    border-radius: 8px;
    margin: .5em 0;
    padding: .3em;
}

.suivi-resume h4 {

    padding-left: .5em;
    margin: 0;
    padding-top: .2em;
    font-family: 'Roboto Condensed', 'Fira Sans Condensed','Lato','Open Sans',helvetica,sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
}

.majs-resume {
    list-style-type: disc;
    font-size: 1rem;
    font-family: 'Roboto', 'Fira Sans Condensed','Lato','Open Sans','Roboto Sans','Helvetica Neue',Arial,serif;
}

.majs {
	max-width: 100%;
	background-color: #ffffff;
	rborder: thin solid #000000;
}

.message-suivi {
	max-width: 100%;
	width: 100%;
}

.suivi-texte {
    padding-right: 1px;
}

li.suivi-fil, li.majs-fil {
    display: flex;
    clear: both;
    margin-bottom: .5em;
    padding: .5em .5em .5em .5em;
    border: thin solid #5C821A;
    list-style-type: none;
}

ul.majs-list > li.majs-fil:last-child {
    border-bottom: thin solid #5C821A;
}

/* Agenda */

.toutagenda {
    clear: both;
    padding-top: 1em;
    padding-bottom: 2em;
    text-align: center;
    font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.toutagenda a:link {
}
.toutagenda a:hover{
    text-decoration:none;
}

/* Grandes Categorie */

.categorie {
    text-align: left;
    font-family: Luciole, Roboto, Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 1em;
    background: #000000;
}

/* == NEWS LETTER INSCRIPTION == */


.newsletter-pied {
  background-color: #5C821A;  /*505759*/
  text-align: center;
  border-top: 1px solid #ced0cf;
}

.newsletter-pied {
  background-color: white;
}

.newsletter-pied h3 {
    color: #A30006;
    font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
    #text-transform: uppercase;
    font-size: 1.1rem;

}

.newsletter-pied h2 {
    color: #262626;
    font-style: italic;
}

newsletter-pied input {
  color: #828282;
  margin-bottom: 0;
  padding: 6px;
  #font-size: 21px;
  font-weight: normal;
  font-style: italic;
  line-height: 21px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  width:350px;
  background: #5C821A;

}

.newsletter-pied, #encart {
  background-color: #5C821A;  /*505759*/
  text-align: center;
  border-top: 1px solid #ced0cf;
}

.newsletter-pied, #encart {
  background: repeating-linear-gradient(
  315deg,
  #f5f5f5,
  #f5f5f5 20px,
  white 20px,
  white 40px);
}

.newsletter-pied h3, #encart h3 {
    color: #5C821A;
    #text-transform: uppercase;
    #font-size: 21px;
}

.newsletter-pied h2, #encart h2 {
    color: #262626;
    font-style: italic;
}

.newsletter-pied input, #encart input {
  font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
  margin-bottom: 5px;
  padding: 5px;
  font-size: 0.9em;
  color:black;
  font-style: normal;
  font-weight: normal;
  line-height: 30px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width:200px;
}

.newsletter-pied input.submit, #encart input.submit {
  color:white;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  background-color:#5C821A;
  border:none;
}

.newsletter-pied input.submit:hover, #encart input.submit:hover {
  box-shadow: 2px 2px 2px 1px gray;
}

.newsletter-pied a, #encart a {
  color:#5C821A;
  #text-decoration: underline;
}

/* == TEXTE ENCADRE POESIE == */
.texteencadre-spip {
  width: 350px;
  float: right;
}
.texteencadre-spip {
  font-family: Luciole, Lato, Georgia, serif;
}
.texteencadre-spip {
  color: #000033;
  background: #E7EEDE;
  rbackground: #C6D166;
  border-bottom: 2px solid #5C821A;
  border-left: 1px solid #C6D166;
  border-right: 2px solid #5C821A;
  border-top: 1px solid #C6D166;
  margin: 1em 0;
  margin-bottom: 1em;
  padding: .25em;
  position: relative;
}
*, ::after, ::before {
  box-sizing: border-box;
}