:root {
    --bgc: #f6f6f4;
    --fonce: #211b1c;
    --groyen: #7d756c;

	--grauve: #795493;
	--griolet: #4e498a;
	--gridigo: #3a3f9e;

    --logoD: 162px;
    --logoP: 27px;
    --svgM: 10px;
}

body {
	background-color: var(--bgc);
	color: var(--fonce);

	font-family: Roboto;
}

h1, .font-bree {
	font-family: "Bree Serif";
}
h2, .font-playfair {
	font-family: "Playfair Display";
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}
a {
    color: var(--griolet);
} a:hover {
    color: var(--grauve);
    text-decoration: none;
}
.chapo {
    font-family: "Playfair Display";
    font-size: 1.25rem;
    line-height: 1.4em;
    font-weight: 500;
    color: var(--groyen);
}
i.fas {
    color: var(--grauve);
    font-size: 0.8rem;
}
hr {
    border-top-color: transparent;
}



.st0{fill:var(--grauve);}
.shape-logo {  
  float: left;
  shape-outside: polygon(
    calc(var(--logoD) /2 - var(--logoP)) calc(var(--svgM) *-1 - var(--logoP)),
    calc(var(--logoD) + var(--svgM) - var(--logoP)) calc(var(--logoD) /2 - var(--logoP)),
    calc(var(--logoD) /2 - var(--logoP)) calc(var(--logoD) + var(--svgM) - var(--logoP)),
    calc(var(--svgM) *-1 - var(--logoP)) calc(var(--logoD) /2 - var(--logoP))
    );
  width: var(--logoD);
  height: var(--logoD);
  position: relative;
  top: calc(-1 * var(--logoP)); 
  left: calc(-1 * var(--logoP));
}


.border-radius-3 {
    border-radius: 3px !important;
}
.bg-white {
    background: white;
}
.bg-grad-vert {
    background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
    background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
    background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
    background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
    background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
}
.bg-grad-grauve {
    background: -moz-linear-gradient(150deg, var(--grauve) 0%, var(--griolet) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, var(--grauve)), color-stop(100%, var(--griolet)));
    background: -webkit-linear-gradient(150deg, var(--grauve) 0%, var(--griolet) 100%);
    background: -o-linear-gradient(150deg, var(--grauve) 0%, var(--griolet) 100%);
    background: -ms-linear-gradient(150deg, var(--grauve) 0%, var(--griolet) 100%);
    background: linear-gradient(150deg, var(--grauve) 0%, var(--griolet) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );

	color: white;
}

.bg-img {
    background-position: center;
    background-size: cover;
}
.bg-img h2 {
    text-shadow: 0 0 4px var(--fonce);
    color: var(--bgc);
}
.bg-rats {
    background-image: url('images/rat.jpg');
    padding: 4em 0;
}
.bg-cafard {
    background-image: url('images/cafard.jpg');
    padding: 6em 0;
}
.bg-bacteries {
    background-image: url('images/bacteries.jpg');
    padding: 4em 0;
}


.shadow-soft {
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}

.text-grauve {
    color: var(--grauve);
}
.text-griolet {
    color: var(--griolet);
}
.text-gridigo {
    color: var(--gridigo);
}
.text-groyen {
    color: var(--groyen);
}