@import "compass/css3";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Short+Stack&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
/* Vars */
/* Mixins */
/*** Containers ***/
 :root {
	 background-color: #222;
	 background-attachment: fixed;
	 font-size: 16px;
}
 @media screen and (max-width: 1100px) {
	 :root {
		 font-size: 14px;
	}
}
 @media screen and (max-width: 950px) {
	 :root {
		 font-size: 16px;
	}
}
 @media screen and (max-width: 600px) {
	 :root {
		 font-size: 8px;
	}
}
 @media screen and (min-width: 1300px) {
	 :root {
		 font-size: 18px;
	}
}
 @media screen and (min-width: 1600px) {
	 :root {
		 font-size: 20px;
	}
}
 body {
	 font-size: 1em;
	 cursor: url('cursor.png'), auto;
}
 h1 {
	 font-family: 'Walter Turncoat', sans-serif;
	 font-size: 2.5em;
	 font-weight: normal;
}
 h2 {
	 font-family: 'Walter Turncoat', sans-serif;
	 font-size: 2em;
	 margin: 0;
	 font-weight: normal;
}
 h3 {
	 font-family: 'Walter Turncoat', sans-serif;
	 font-size: 1.5em;
	 margin: 0;
	 font-weight: normal;
}
 a {
	 font-family: 'Short Stack', sans-serif;
	 text-decoration: none;
	 color: #050505;
	 cursor: url('click.png'), pointer;
}
 p {
	 font-family: 'Roboto Mono', sans-serif;
	 font-size: 1em;
	 margin: 0;
	 line-height: 1.3em;
}
 object, img {
	 max-width: 100%;
}
 div {
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
}
 #wrapper {
	 width: auto;
	 margin: 3.75rem auto 0;
	 padding: 0 3.5rem;
}
 #book {
	 width: 30rem;
	 height: 50rem;
	 margin: 0 auto;
	 position: relative;
	 z-index: 2;
}

/*center line*/
#book:before {
  content: "";
  position: absolute;
  top: 1rem;            
  left: 50%;            
  transform: translateX(-50%);
  height: 38rem;        
  width: 1px;           
  background: #c2c2c2;  
  z-index: 7;           
  
}

 .cover {
	 background-color: #abc3b5;
	 border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
	 /*box-shadow: inset 0px 0px 0.625rem rgba(255, 255, 255, 0.6), 0.3125rem 0.3125rem 0.625rem rgba(0, 0, 0, .4), 0.625rem 0.625rem 1.875rem rgba(0, 0, 0, .2);*/
}

 .nav {
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 position: absolute;
	 right: -3.5rem;
	 width: 8.5rem;
	 height: 4.375rem;
	 padding-top: 0.9375rem;
	 text-align: center;
	 text-transform: uppercase;
	 font-family: 'Short Stack', sans-serif;
	 font-size: 1em;
	 -webkit-transform: rotate(90deg);
	 -moz-transform: rotate(90deg);
	 transform: rotate(90deg);
	 border-radius: 0.5rem 0.5rem 0px 0px;
	 background-color: #fbfae8;
	 -webkit-transition: all 0.1s ease-in-out 0s;
	 -moz-transition: all 0.1s ease-in-out 0s;
	 -o-transition: all 0.1s ease-in-out 0s;
	 -ms-transition: all 0.1s ease-in-out 0s;
	 transition: all 0.1s ease-in-out 0s;
}
 .nav:hover {
	 right: -4.0rem;
}
 #sketchnotes {
	 top: 5.5rem;
	 z-index:4;
	 box-shadow: 0;
}
 #sketchnotes.current {
	 top: 5.75rem;
}
 #infographics {
	 top: 15.125rem;
	 z-index:8;
}
 #infographics.current {
	 top: 15.375rem;
}
 #design {
	 top: 24.75rem;
	 z-index:2;
}
 #design.current {
	 top: 24.0625rem;
}
 #home-nav .back-one {
	 background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%);
	 background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%);
	 background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%);
	 background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%);
	 background-image: linear-gradient(to top, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%);
}
 #home-nav .back-two {
	 background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 70%);
	 background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 70%);
	 background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 70%);
	 background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 70%);
	 background-image: linear-gradient(to top, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 70%);
}
 .card {
	 width: 21rem;
	 height: 12rem;
	 background-color: #fefefe;
	 position: absolute;
	 top: -0.9375rem;
	 right: 3.125rem;
	 -webkit-transform: rotate(10deg);
	 -moz-transform: rotate(10deg);
	 transform: rotate(10deg);
	 box-shadow: 0.3125rem -0.3125rem 20px rgba(0, 0, 0, .1);
}
 #card {
	 -webkit-transition: all 0.2s ease-in-out 0s;
	 -moz-transition: all 0.2s ease-in-out 0s;
	 -o-transition: all 0.2s ease-in-out 0s;
	 -ms-transition: all 0.2s ease-in-out 0s;
	 transition: all 0.2s ease-in-out 0s;
	 z-index:4;
}
 #card:hover {
	 top: -1.375rem;
	 right: 4.0625rem;
}

/* Front Cover Stuff */
 #back-cover {
	 width: 60rem;
	 height: 40rem;
	 position: absolute;
}
 .paper {
	 width: 58.75rem;
	 height: 48.5rem;
	 background-color: #fbfae8;
	 position: absolute;
	 
	 left: 0.625rem;
	 top: 0.375rem;
	 padding: 1.3125rem;
	 border-radius: 1.25rem;
	 
	 /* for grid background - need to make it compatiable with all the browsers */
	 background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
   background-size: 1rem 1rem, 1rem 1rem, 2px 2px, 2px 2px;
	 /*box-shadow: 0px 0px 1.25rem red, inset 0px 0px 3.75rem pink;
	 background-image: -webkit-linear-gradient(left, rgba(242, 203, 155, 0) 40%, rgba(242, 203, 155, .3) 49%, rgba(242, 203, 155, .3) 51%, rgba(242, 203, 155, 0) 60%);
	 background-image: -moz-linear-gradient(left, rgba(242, 203, 155, 0) 40%, rgba(242, 203, 155, .3) 49%, rgba(242, 203, 155, .3) 51%, rgba(242, 203, 155, 0) 60%);
	 background-image: -ms-linear-gradient(left, rgba(242, 203, 155, 0) 40%, rgba(242, 203, 155, .3) 49%, rgba(242, 203, 155, .3) 51%, rgba(242, 203, 155, 0) 60%);
	 background-image: -o-linear-gradient(left, rgba(242, 203, 155, 0) 40%, rgba(242, 203, 155, .3) 49%, rgba(242, 203, 155, .3) 51%, rgba(242, 203, 155, 0) 60%);
  */	 

}
 #contact-line {
	 margin: 0.5rem 0px 0px 0.625rem;
	 font-family: 'Short Stack', sans-serif;
	 text-transform: uppercase;
	 font-size: 1.5em;
}
 #stack {
	 position: absolute;
	 right: 38rem;
	 top: 1.875rem;
	 width: 25.5rem;
	 height: 42rem;
	 z-index: 0;
	 -webkit-transition: all 0.2s ease-in-out 0s;
	 -moz-transition: all 0.2s ease-in-out 0s;
	 -o-transition: all 0.2s ease-in-out 0s;
	 -ms-transition: all 0.2s ease-in-out 0s;
	 transition: all 0.2s ease-in-out 0s;
	 -webkit-transform: rotate(5deg);
	 -moz-transform: rotate(5deg);
	 transform: rotate(5deg);
}
 #stack.blog {
	 -webkit-transform: rotate(0deg);
	 -moz-transform: rotate(0deg);
	 transform: rotate(0deg);
	 margin-top: 3.75rem;
}
 #stack:hover {
	 right: 39rem;
	 top: 1.25rem;
}
 .home #stack {
	 -webkit-transform: rotate(-5deg);
	 -moz-transform: rotate(-5deg);
	 transform: rotate(-5deg);
	 top: 2.5rem;
	 left: -1.125rem;
	 right: auto;
}
 .home #stack:hover {
	 left: -1.5rem;
	 top: 1.875rem;
}
 #blog-paper {
	/* Same size as book for now */
	 width: 30rem;
	 height: 40rem;
	 position: relative;
	 margin: 1em auto;
	 padding: 1em 2em;
	 border-radius: 0.1875rem;
	 background-color: #f2dd72;
	 background-image: -webkit-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-image: -moz-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-image: -ms-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-image: -o-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-size: 100% 1.2em;
	 background-position: 0 0.6em;
	 background-origin: content-box;
	 box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, .4);
}
 #blog-paper:before, #blog-paper:after {
	 content: "";
	 border-radius: 0.1875rem;
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 background-color: #f2dd72;
	 background-image: -webkit-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-image: -moz-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-image: -ms-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-image: -o-linear-gradient(#c2bf61 1px, transparent 1px);
	 background-size: 100% 1.2em;
	 background-position: 0 0.6em;
	 background-origin: content-box;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, .4);
	 -webkit-transition: all 0.1s ease-in-out 0s;
	 -moz-transition: all 0.1s ease-in-out 0s;
	 -o-transition: all 0.1s ease-in-out 0s;
	 -ms-transition: all 0.1s ease-in-out 0s;
	 transition: all 0.1s ease-in-out 0s;
}
 #blog-paper:before {
	 top: 0.25rem;
	 z-index: -1;
	 -webkit-transform: rotate(2deg);
	 -moz-transform: rotate(2deg);
	 transform: rotate(2deg);
}
 #blog-paper:after {
	 top: 0.5rem;
	 z-index: -2;
	 -webkit-transform: rotate(-2deg);
	 -moz-transform: rotate(-2deg);
	 transform: rotate(-2deg);
}
 .blog #book {
	 position: absolute;
	 z-index: -3;
	 left: -22.25rem;
}
 #blog-paper {
	 position: absolute;
	 width: 25.5rem;
	 height: 40rem;
	 margin: 0;
	 padding: 0;
}
 #blog-link {
	 font-family: 'Short Stack', sans-serif;
	 font-size: 1.5em;
	 text-transform: uppercase;
	 position: absolute;
	 right: 2.8125rem;
	 top: 3.125rem;
	 margin: 0;
	 -webkit-transform: rotate(90deg);
	 -moz-transform: rotate(90deg);
	 -ms-transform: rotate(90deg);
	 transform: rotate(90deg);
	 -webkit-transform-origin: 100% 100%;
	 -moz-transform-origin: 100% 100%;
	 -ms-transform-origin: 0% 0%;
	 transform-origin: 100% 100%;
}
 .home #blog-link {
	 left: 2.8125rem;
	 top: 1.25rem;
	 -webkit-transform: rotate(90deg);
	 -moz-transform: rotate(90deg);
	 -ms-transform: rotate(90deg);
	 transform: rotate(90deg);
	 -webkit-transform-origin: 0% 0%;
	 -moz-transform-origin: 0% 0%;
	 -ms-transform-origin: 0% 0%;
	 transform-origin: 0% 0%;
}


/* THE BELOW IS FOR THE EMPTY OPEN PAGES */

.open #book {
  width: 60rem; 
}

#paper-inside {
  width: 56rem;
  height: 38rem;
  background-color: #fbfae8;
  position: absolute;
  left: 2rem;
  top: 1rem;
  padding: 2rem;
  border-radius: 1.25rem;
  /*box-shadow: 0 0 0.4rem rgba(0, 0, 0, .4);
  background-image: linear-gradient(to right, rgba(242, 203, 155, 0) 40%, rgba(242, 203, 155, .3) 49%, rgba(242, 203, 155, .3) 51%, rgba(242, 203, 155, 0) 60%);
  */
  z-index:6;
}

.page-content {
  font-family: 'Roboto Mono', sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  width:50%;
}

.page-content.left {
  float: left;
}

.page-content.right {
  float: right;
  padding-left:1rem;
}

.open .notebook-skin {
  display: none; /* hide closed skin */
}


.extra-page {
  position: absolute;
  background-color: #fbfae8;
  border-radius: 1.25rem;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, .4);
}

/* Example for left-side pages */
.extra-page.left.one {
  width: 56.5rem;     
  height: 38rem;
  left: 1.75rem;      
  top: 1rem;
  z-index:5;
}

.extra-page.left.two {
  width: 57rem;
  height: 38rem;
  left: 1.5rem;
  top: 1rem;
  z-index:4;
}

/* Right-side pages */
.extra-page.right.one {
  width: 57.5rem;
  height: 38rem;
  left: 1.25rem;    
  top: 1rem;
  z-index: 3;
}

.extra-page.right.two {
  width: 58rem;
  height: 38rem;
  left: 1rem;
  top: 1rem;
  z-index:2;
}

/* for floor plan*/

.main-content {
  margin: 6em auto;
  display: grid;
  /*width: 750px;*/
  width:41.6667rem;
  grid: 5.55rem 4.44rem 8.88rem 5.55rem 6.66rem/4.44rem 4.44rem repeat(2, 1fr) 4.167rem 4.167rem 2fr;
  border: 0.22rem solid #096b72;
  border-width: 0.22rem 0 0 0.22rem;
  position: relative;
  top:-15%;
}
.main-content > div {
  position: relative;
}
.main-content > .door-hor {
  top: -0.22rem;
  left: 0.833rem;
}

.utility {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  border: 0.22rem solid #096b72;
  border-width: 0 0.22rem 0.22rem 0;
}
.utility .door-hor {
  bottom: -1.889rem;
  left: 1rem;
}

.kitchen {
  grid-row: 1 / span 3;
  grid-column: 3 / span 2;
}

.kitchen:after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 55%;
  width: 100%;
}

.kitchen .island {
  position: absolute;
  width: 5.55rem;
  height: 2.5rem;
  border: 0.11rem solid #096b72;
  top: 5.55rem;
  left: 2.778rem;
}
.kitchen .island:before, .kitchen .island:after,
.kitchen .island .chair {
  content: "";
  position: absolute;
  width: 1.3889rem;
  height: 1.3889rem;
  bottom: -1.944rem;
  border-radius: 50%;
  border: 0.111rem solid #096b72;
  left: 0.277rem;
  background: #ffc107;
}
.kitchen .island:after {
  left: 2.111rem;
}
.kitchen .island .chair {
  left: 3.889rem;
}
.kitchen .rug {
  width: 2.222rem;
  height: 2.222rem;
  top: 2.778rem;
  right: 2.5rem;
}
.kitchen .ref {
  position: absolute;
  border: 0.111rem solid #096b72;
  top: -0.111rem;
  width: 2.5rem;
  height: 2.222rem;
  left: 0.44rem;
}
.kitchen .cabinets {
  position: absolute;
  border: 0.111rem solid #096b72;
  top: -0.111rem;
  width: 6.667rem;
  height: 2.222rem;
  right: 2.0556rem;
}
.kitchen .cabinets .stove {
  position: absolute;
  width: 3rem;
  height: 1.778rem;
  border: 0.111rem solid #096b72;
  right: 0.111rem;
  top: 0.11rem;
}
.kitchen .cabinets .stove:before, .kitchen .cabinets .stove:after {
  content: "";
  position: absolute;
  width: 0.88rem;
  height: 0.88rem;
  top: 0.277rem;
  border-radius: 50%;
  border: 0.111rem solid #096b72;
  left: 0.277rem;
}
.kitchen .cabinets .stove:after {
  right: 0.277rem;
  left: auto;
}
.kitchen .sink {
  position: absolute;
  right: -0.0556rem;
  border: 0.111rem solid #096b72;
  top: -0.111rem;
  width: 1.944rem;
  height: 5.444rem;
}
.kitchen .sink .sink-tap-1,
.kitchen .sink .sink-tap-2 {
  position: absolute;
  width: 1.0556rem;
  height: 0.833rem;
  border: 0.111rem solid #096b72;
  right: 0.444rem;
  bottom: 1.5rem;
  border-radius: 0.222rem;
}
.kitchen .sink .sink-tap-2 {
  bottom: 0.556rem;
  height: 0.556rem;
}
.kitchen .sink .sink-tap-2:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 0.222rem;
  height: 0.222rem;
  border: 0.0556rem solid #096b72;
  right: -0.444rem;
  top: -0.333rem;
}

.bathroom-2 {
  grid-column: 5 / span 2;
  border: 0.22rem solid #096b72;
  border-width: 0 0 0.22rem 0.22rem;
}
.bathroom-2 .rug {
  width: 2.5rem;
  height: 1.3889rem;
  top: 45%;
  left: 1.3889rem;
  transform: rotate(-40deg);
  z-index: 20;
}
.bathroom-2 .door-hor {
  bottom: -0.222rem;
  left: 2.222rem;
  transform: rotate(180deg);
}
.bathroom-2 .window-hor {
  left: 1.667rem;
}
.bathroom-2 .toilet {
  left: auto;
  right: 0.44rem;
}
.bathroom-2 .vanity {
  bottom: auto;
  top: -0.111rem;
  width: 2.778rem;
}

.bedroom-2 {
  grid-column: 7 / span 1;
  grid-row: 1 / span 2;
  border: 0.222rem solid #096b72;
  border-width: 0 0.222rem 0.222rem;
}
.bedroom-2 .door-ver {
  left: -0.222rem;
  bottom: 0.55rem;
  transform: scaleY(-1);
}
.bedroom-2 .window-hor {
  left: 2.5rem;
  width: 6.667rem;
}

.living-room {
  grid-column: 5 / span 3;
  grid-row: 3 / span 1;
  border: 0.222rem solid #096b72;
  border-width: 0 0.222rem 0 0;
}

.bedroom-1 {
  grid-column: 1 / span 4;
  grid-row: 4 / span 2;
  border: 0.222rem solid #096b72;
  border-width: 0.222rem 0 0.222rem 0;
}

.bedroom-1:after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 4px; /* Make the right border width */
  background: linear-gradient(to bottom, #096b72 46%, transparent 46%);
}

.bedroom-1:before{
  content: "";
  position: absolute;
  top: 0;
  right: 29%;
  height: 100%;
  width: 71%;
}

.bedroom-1 .rug {
  left: 20%;
  top: 20%;
  height: 8.333rem;
}
.bedroom-1 .door-hor {
  top: -0.222rem;
  left: 2.222rem;
}
.bedroom-1 .window-hor {
  left: 1.667rem;
  top: auto;
  bottom: -0.333rem;
  width: 11.111rem;
}
.bedroom-1 .bed {
  height: 5.556rem;
  width: 9.44rem;
  transform: scaleX(-1);
  left: -0.111rem;
  top: 3.889rem;
  background-color:#fbfae8;
}
.bedroom-1 .bed .pillow {
  height: 1.944rem;
  top: 0.444rem;
  right: 0.833rem;
}
.bedroom-1 .bed .pillow:nth-child(3) {
  bottom: 0.444rem;
  top: auto;
}
.bedroom-1 .bed-table {
  width: 1.3889rem;
  height: 1.3889rem;
  top: 2.0055rem;
  right: auto;
  left: -0.111rem;
}
.bedroom-1 .bed-table:nth-child(5) {
  top: auto;
  bottom: 0.277rem;
  width: 1.3889rem;
  height: 1.3889rem;
}

.closet {
  grid-column: 4 / span 1;
  grid-row: 4 / span 1;
  z-index: 3;
  border-left: 0.222rem solid #096b72;
}
.closet .wall-gap {
  left: -0.222rem;
  top: 1.667rem;
}

.bathroom-1 {
  grid-column: 4 / span 2;
  grid-row: 5 / span 1;
  z-index: 2;
  border: 0.222rem solid #096b72;
}
.bathroom-1 .door-ver:nth-child(1) {
  left: -0.22rem;
  bottom: 0.55rem;
  transform: scaleY(-1);
}
.bathroom-1 .door-ver:nth-child(2) {
  right: -0.222rem;
  bottom: 2.222rem;
  transform: scaleX(-1);
}
.bathroom-1 .window-hor {
  top: auto;
  bottom: -0.33rem;
  right: 1.667rem;
}
.bathroom-1 .rug {
  width: 2.778rem;
  height: 1.111rem;
  top: 3.055rem;
  left: 5.556rem;
  z-index: 20;
}

.office {
  grid-row: 4 / span 2;
  grid-column: 5 / span 3;
  border: 0.222rem solid #096b72;
  border-width: 0.222rem 0;
}
.office .door-hor {
  top: -0.222rem;
  left: 2.5rem;
}
.office .window-hor {
  top: auto;
  bottom: -0.333rem;
  left: 4.556rem;
  width: 3rem;
}
.office .table {
  width: 8.889rem;
  height: 1.3889rem;
  transform: scaleY(-1);
  top: -0.222rem;
  right: 3.6111rem;
}

.patio {
  grid-row: 4 / span 2;
  grid-column: 7 / span 1;
  margin-top: 0.222rem;
  position: relative;
}
.patio:before {
  content: "";
  width: 140%;
  height: 0.222rem;
  background: #096b72;
  bottom: 50%;
  left: -21%;
  transform: rotate(-44deg);
  position: absolute;
}
.patio:after {
  content: "";
  width: 140%;
  height: 7.778rem;
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 11.944rem solid #fbfae8;
  border-left: 12.3889rem solid transparent;
}
.patio .real-patio {
  width: 139%;
  height: 4.44rem;
  position: absolute;
  z-index: 20;
  transform: rotate(-44deg);
  bottom: 2.1667rem;
  margin-left: -1.111rem;
  border: 2px solid #096b72;
  border-width: 0 2px 2px 2px;
}

/*utilities*/
.wall-gap {
  position: absolute;
  background: #fbfae8;
  width: 0.222rem;
  height: 2.22rem;
}

.door-hor {
  position: absolute;
  width: 2.5rem;
  height: 1.944rem;
  overflow: hidden;
  z-index: 10;
  border-top: 5px solid #fbfae8;
}
.door-hor:before {
  content: "";
  position: absolute;
  width: 0.111rem;
  height: 1.5rem;
  border: 1px solid #096b72;
  border-bottom:0px;
}
.door-hor:after {
  content: "";
  position: absolute;
  width: inherit;
  height: 4.44rem;
  width: 7.22rem;
  right: -0.055rem;
  bottom: -0.0277rem;
  border-radius: 50%;
  border: 1px solid #096b72;
}

.door-ver {
  position: absolute;
  height: 2.5rem;
  width: 1.944rem;
  overflow: hidden;
  z-index: 10;
  border-left:5px solid #fbfae8;
}
.door-ver:before {
  content: "";
  position: absolute;
  height: 0.111rem;
  width: 1.5rem;
  border: 1px solid #096b72;
  border-right:0;
}
.door-ver:after {
  content: "";
  position: absolute;
  width: inherit;
  width: 4.44rem;
  height: 7.22rem;
  right: -0.055rem;
  bottom: 0.0277rem;
  border-radius: 50%;
  border: 1px solid #096b72;
}

.door-sliding {
  position: absolute;
  background: linear-gradient(to right, #096b72 0, #096b72 8%, #fff 8%, #fff 92%, #096b72 92%);
  width: 11.111rem;
  height: 0.33rem;
  transform: rotate(-44deg);
  bottom: 50%;
  margin-bottom: -0.5rem;
  z-index: 15;
}
.door-sliding:before, .door-sliding:after {
  content: "";
  position: absolute;
  height: 0.111rem;
  width: 70%;
  border: 1px solid #096b72;
}
.door-sliding:before {
  top: -0.0555rem;
}
.door-sliding:after {
  right: 0;
  bottom: 0;
}

.window-hor {
  position: absolute;
  top: -0.333rem;
  height: 0.33rem;
  border: 2px solid #096b72;
  width: 4.44rem;
  background: #e2f0f1;
  z-index: 10;
}

.window-ver {
  position: absolute;
  right: -0.333rem;
  top: 0.444rem;
  height: 7.778rem;
  border: 2px solid #096b72;
  width: 0.333rem;
  background: #e2f0f1;
}

.vanity {
  width: 5rem;
  height: 1.667rem;
  position: absolute;
  border: 2px solid #096b72;
  bottom: -0.111rem;
  right: -0.111rem;
}
.vanity:before {
  content: "";
  position: absolute;
  border: 1px solid #096b72;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #096b72;
  height: 0.833rem;
  width: 0.833rem;
  border-radius: 50%;
  top: 0.277rem;
  left: 50%;
  margin-left: -0.4166rem;
}

.toilet {
  width: 1.667rem;
  height: 0.444rem;
  position: absolute;
  border: 2px solid #096b72;
  bottom: -0.111rem;
  left: 2.222rem;
}
.toilet:after {
  content: "";
  position: absolute;
  border: 2px solid #096b72;
  height: 1.22rem;
  width: 1.111rem;
  border-radius: 20px 20px 0 0;
  top: -1.444rem;
  left: 50%;
  margin-left: -0.666rem;
}

.bathtub {
  width: 6.111rem;
  height: 2.667rem;
  position: absolute;
  border: 2px solid #096b72;
  top: -0.111rem;
  left: -0.111rem;
}
.bathtub:before {
  content: "";
  position: absolute;
  width: 4.722rem;
  height: 1.3889rem;
  border-radius: 0.1667rem;
  border: 2px solid #096b72;
  top: 0.555rem;
  left: 0.555rem;
}

.shower {
  width: 3.0556rem;
  height: 2.778rem;
  position: absolute;
  border: 2px solid #096b72;
  top: -0.111rem;
  left: -0.111rem;
  border-radius: 0 0% 2000% 0;
}
.shower:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 0.333rem;
  height: 0.333rem;
  border: 1px solid #096b72;
  left: 0.333rem;
  top: 0.333rem;
}

.bed {
  width: 7.7778rem;
  height: 3.889rem;
  position: absolute;
  border: 2px solid #096b72;
  right: -0.111rem;
  top: 1.944rem;
  border-radius: 8px 0 0 8px;
  background: #fbfae8;
}
.bed .blanket {
  width: 55%;
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  border-right: 2px solid #096b72;
  background: repeating-linear-gradient(to right, transparent, transparent 6px, rgba(9, 107, 114, 0.5) 6px, rgba(9, 107, 114, 0.5) 8px), repeating-linear-gradient(to bottom, transparent, transparent 6px, rgba(9, 107, 114, 0.5) 6px, rgba(9, 107, 114, 0.5) 8px);
}
.bed .blanket:before {
  content: "";
  position: absolute;
  right: -1rem;
  width: 0;
  height: 100%;
  border-right: 2px solid #096b72;
}
.bed .pillow {
  width: 1.3889rem;
  border: 2px solid #096b72;
  height: 2.222rem;
  border-radius: 6px;
  right: 0.444rem;
  top: 0.777rem;
  position: absolute;
  background: #ffc107;
}

.bed-table {
  width: 1.667rem;
  height: 1.667rem;
  top: -0.111rem;
  right: -0.111rem;
  position: absolute;
  border: 2px solid #096b72;
}

.table {
  width: 5rem;
  height: 0.833rem;
  bottom: -0.111rem;
  right: 1.111rem;
  position: absolute;
  border: 2px solid #096b72;
}
.table:before {
  content: "";
  position: absolute;
  border: 2px solid #096b72;
  width: 1.111rem;
  height: 0.88rem;
  top: -1.111rem;
  left: 50%;
  margin-left: -0.555rem;
  border-radius: 40px 40px 0 0;
  background: linear-gradient(to bottom, transparent 0, transparent 50%, #096b72 50%, #096b72 60%, transparent 60%);
}

.sofa {
  width: 7.22rem;
  height: 2.22rem;
  bottom: -0.11rem;
  right: 1.111rem;
  position: absolute;
  border: 2px solid #096b72;
  border-radius: 8px 8px 0 0;
  background: #ffc107;
}
.sofa:before {
  content: "";
  position: absolute;
  border: 2px solid #096b72;
  border-width: 0 2px 2px;
  width: 80%;
  height: 70%;
  left: 8%;
  border-radius: 0 0 4px 4px;
  background: #fbfae8;
}
.sofa:after {
  content: "";
  position: absolute;
  border: 2px solid #096b72;
  width: 1.667rem;
  height: 1.667rem;
  transform: rotate(60deg);
  left: -2.778rem;
  bottom: 2.778rem;
  border-radius: 0.333rem;
  background: #ffc107;
}

.coffee-table,
.patio-table {
  width: 2.222rem;
  height: 2.222rem;
  bottom: 3.333rem;
  right: 4.44rem;
  border-radius: 50%;
  position: absolute;
  border: 2px solid #096b72;
  background: #fbfae8;
}

.patio-table {
  width: 1.667rem;
  height: 1.667rem;
  bottom: 1.944rem;
  z-index: 25;
}

.patio-chair {
  width: 1.889rem;
  height: 1.444rem;
  bottom: 1.667rem;
  left: 3.611rem;
  border-radius: 20px 20px 0 0;
  position: absolute;
  border: 2px solid #096b72;
  background: #ffc107;
  z-index: 25;
  transform: rotate(-95deg);
}
.patio-chair:before {
  content: "";
  position: absolute;
  width: 1.3889rem;
  height: 82%;
  border-radius: inherit;
  background: #fbfae8;
  bottom: 0;
  left: 10%;
  border: 1px solid #096b72;
  border-width: 1px 1px 0;
}
.patio-chair:nth-child(5) {
  transform: rotate(15deg);
  bottom: 4.167rem;
  left: 6.3889rem;
}

.tv-set {
  width: 7.778rem;
  height: 1.111rem;
  top: -0.111rem;
  right: 1.944rem;
  border-radius: 0 0 50% 50%;
  position: absolute;
  border: 2px solid #096b72;
}

.rug {
  width: 8.333rem;
  height: 6.111rem;
  top: 1.3889rem;
  right: 1.944rem;
  position: absolute;
  background: rgba(255, 193, 7, 0.25);
}

.name {
  font: 0.75em "Roboto Mono", serif;
  text-transform: uppercase;
  color: #096b72;
  position: absolute;
  text-align: center;
  z-index: 30;
}

.utility .name {
  width: 200%;
  transform: rotate(-90deg);
  bottom: 45%;
  left: -2.111rem;
}

.kitchen .name {
  top: 20%;
  left: 30%;
}

.bathroom-2 .name {
  top: 2.5rem;
  left: 2.222rem;
}

.bedroom-2 .name {
  width: 5.556rem;
  bottom: 1.3889rem;
  left: 1.3889rem;
}

.living-room .name {
  top: 2.111rem;
  left: 30%;
}

.bedroom-1 .name {
  width: 5.556rem;
  top: 1.3889rem;
  left: 7.22rem;
}

.closet .name {
  top: 1.944rem;
}

.bathroom-1 .name {
  bottom: 2.222rem;
  right: 2.778rem;
}

.office .name {
  width: 4.44rem;
  top: 45%;
  left: 30%;
}

.patio .name {
  right: 1.111rem;
  top: 40%;
}

/* hovers */

.utility:hover, .closet:hover, .bedroom-1:hover:before, .bedroom-2:hover, .living-room:hover, .office:hover, .bathroom-1:hover, .bathroom-2:hover, .kitchen:hover:after, .real-patio:hover{
  opacity:0.5;
  background-color:lightblue;
}