.decoration > div {
display: flex;
align-items: center; }
.decoration > div span {
transition: all 500ms ease; }
.line {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
display: block;
height: 1.5pt;
transform-origin: left; }
.line.displayed {
transform : scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1); }
.line.extra-small {
width: 10vh; }
.line.small {
width: 20vh; }
.line.medium {
width: 40vh; }
.line.large {
width: 98vh; }
.line.clay {
background-color: #de5516; }
.line.orange {
background-color: #f26a35; }
.line.poussin {
background-color: #ffb854; }
.diamond {
-webkit-transform: rotate(45deg) scale(0);
-ms-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
display: block;
border: solid 2pt;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin-left: 12px;
flex-shrink: 0;
background: #fff8f0; }
.diamond.displayed {
transform : rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1); }
.diamond.small {
width: 15px;
height: 15px; }
.diamond.medium {
width: 20px;
height: 20px; }
.diamond.large {
width: 35px;
height: 35px; }
.diamond.extra-large {
width: 50px;
height: 50px; }
.diamond.poussin {
border-color: #ffb854; }
.diamond.orange {
border-color: #f26a35; }
.diamond.clay {
border-color: #de5516; }
.diamond.last {
margin-right: 12px; }
@media only screen and (min-width: 1280px) {
.diamond.small {
width: 15px;
height: 15px; }
.diamond.medium {
width: 30px;
height: 30px; }
.diamond.large {
width: 60px;
height: 60px; }
.diamond.extra-large {
width: 120px;
height: 120px; } }