- flex-flow: column wrap;
- }
-
- header {
- width: 45vw;
- }
-
- .content-wrapper {
- margin: 20px;
- width: auto;
- }
-}
-
-/************
- * Tapestry *
- ************/
-
-.orangered { background-color: #C84A0A; }
-.red { background-color: #C7434B; }
-.brown { background-color: #551C22; }
-.redbrown { background-color: #933B3C; }
-.lightbrown { background-color: #9E7764; }
-.grey { background-color: #A9938F; }
-.sand { background-color: #D2BE9A; }
-
-.tapestry {
- order: -1;
-}
-
-.tapestry,
-.tapestry div {
- transition: all 0.5s ease-in-out;
-}
-
-/* Large Tapestry */
-
-.tapestry {
- max-width: 42vw;
- max-height: 42vw;
- display: flex;
- flex-flow: row wrap;
- margin: 100px 0 0 100px;
-}
-
-
-.red {
- width: 14vw;
- height: 14vw;
-}
-
-.red:hover {
- margin: 3.5vw;
- width: 7vw;
- height: 7vw;
-}
-
-.brown,
-.orangered,
-.grey {
- width: 14vw;
- height: 28vw;
-}
-
-.grey:hover {
- width:7vw;
-}
-
-.sand {
- width: 42vw;
- height: 14vw;
-}
-
-.sand:hover {
- height: 2vw;
-}
-
-.redbrown {
- width: 7vw;
- height: 14vw;
-}
-
-.redbrown:hover {
- margin-bottom: 7vw;
-}
-
-.lightbrown {
- width: 7vw;
- height: 7vw;
-}
-
-.lightbrown:hover {
- height: 28vw;
-}
-
-.brown {
- display: flex;
- flex-flow: row wrap;
- align-content: flex-end;
- align-items: flex-end;
-}
-
-@media only screen and (max-width: 1024px) {
- .tapestry {
- max-width: 32vw;
- }
-
- .red {
- width: 32vw;
- height: 4vw;
- }
-
- .red:hover {
- margin: 0;
- width: 64vw;
- height: 16vw;
- }
-
- .orangered {
- width: 16vw;
- height: 20vw;
- }
-
- .brown {
- width: 32vw;
- height: 16vw;
- }
-
- .redbrown {
- width: 16vw;
- height: 16vw;
- position: relative;
- top: -16vw;
- left: 16vw;
- }
-
- .lightbrown {
- width: 8vw;
- height: 8vw;
- }
-
- .grey {
- height: 16vw;
- width: 24vw;
- }
-
- .sand {
- width: 8vw;
- height: 32vw;
- }
-}
-
-@media only screen and (max-width: 700px) {
- .tapestry {
- max-width: 80vw;
- max-height: 8vw;
- margin: 0px;
- flex-flow: column wrap;
- }
-
- .red {
- width: 4vw;
- height: 4vw;
- }
-
- .red:hover {
- width: 24vw;
- height: 24vw;
- }
-
- .orangered {
- width: 16vw;
- height: 8vw;
- }
-
- .brown {
- width: 32vw;
- height: 8vw;
- }
-
- .redbrown {
- width: 24vw;
- height: 4vw;
- position: relative;
- top: 0;
- left: 0;
- }
-
- .lightbrown {
- width: 8vw;
- height: 32vw;
- }
-
- .lightbrown:hover {
- height: 1vw;
- }
-
- .grey {
- height: 4vw;
- width: 38vw;