/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
    general
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
*::selection {
	background: #E95022;
	color: #fff;
}
body {
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
    tablet overlay
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#tablet-landscape {
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.9);
	top: 0;
	display: none;
}
#tablet-landscape p {
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
	color: #fff;
	font-family: 'Heebo', sans-serif;
	font-weight: 800;
	font-size: 50px;
}
#tablet-landscape #icon-flip {
	height: 50vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: .25;
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
    nav-/top-section
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#section-nav {
	width: 100%;
	height: 400px;
	background: #000;
	position: fixed;
	color: #fff;
	z-index: 10;
	transition: top 1s ease;
	top: -300px;
}
#section-nav.open-nav {
	top: 0;
}
#section-nav .wrapper {
	width: 100%;
	max-width: 1200px;
	position: relative;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 100px 0 150px;
	font-family: 'Heebo', sans-serif;
	font-size: 20px;
	font-weight: 400;
}
/* text */
#section-nav .wrapper .desc {
	max-width: 620px;
	padding: 0 35px;
/* 	float: left; */
}
#section-nav .wrapper .desc a {
	color: #E95022;
	text-decoration: none;
}
#section-nav .wrapper .desc a:hover {
	text-decoration: underline;
}
/* title bar */
#section-nav .bottom-wrap {
	position: absolute;
	bottom: 0;
	height: 100px;
	width: 100%;
	cursor: pointer;
}
/* title */
h1 {
	font-family: 'Heebo';
	font-weight: 800;
	font-size: 30px;
	padding: 30px 0 30px 35px;
	width: calc(100% - 105px);
}
/* arrow */
#section-nav #nav-arrow {
	width: 43px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	box-sizing: content-box;
	padding: 34px 31px;
}
#section-nav #nav-arrow img {
	transition: transform 1s ease;
	transform: translateY(3px);
}
#section-nav #nav-arrow img.open-nav {
	transform: translateY(3px) rotate(180deg);
}
/* to prevent window hover while nav is open */
.overlay {
	width: 100%;
	height: 100vh;
	position: absolute;
	z-index: 1;
	transform: translateY(-100vh);
}
.overlay.open-nav {
	transform: none;
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
    illustration
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#section-house {
	height: calc(100vh - 100px);
	position: relative;
	margin-top: 100px;
	transition: transform 1s ease;
}
#section-house.open-nav {
	transform: translateY(100px);
}
#section-house .wrapper {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 900px;
}
#section-house .wrapper svg {
	width: 100%;
	position: relative;
	z-index: 1;
}
/* mobile */
#wall-mobile {
	height: 95%;
	position: absolute;
	left: 0;
	top: 0;
	background: red;
	width: 240px;
	background: url(../img/wall-mobile.svg);
	background-repeat: repeat-y;
	background-size: contain;
	display: none;
	margin-top: 200px;
}
#wall-mobile:before {
	content: "";
	width: 115%;
	height: 240px;
	position: absolute;
	left: 0;
	top: -200px;
	background: url(../img/wall-mobile-top.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	transform: translateX(-10px);
}
#wall-mobile:after {
	content: "";
	width: 107%;
	padding-bottom: 87%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(../img/wall-mobile-bottom.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	transform: translate(-10px,97%);
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
	svg
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
.st0 { fill:#E95022; }
.st1 { fill:#B1B19D; }
.st2 { fill:#969F94; }
.st3 { fill:#7B857B; }
.st4 { fill:#D2C3B7; }
.st5 { fill:#C3C8C0; }
.st6 { fill:#FFFFFF; }
.st7 { fill:#BE111F; }
.st8 { fill:#9C3810; }
.st9 { fill:#722800; }
.st10 { fill:#C7461C; }
.st11 { display:none; fill:#C7461C; }
.st12 { fill:#EE7140; }
.st13 { display:none; }
.st14 { display:inline; fill:#EE7140; }
.st15 { fill:#6A5743; }
.st16 { fill:#BD907A; }
.st17 { fill:#886955; }
.st18 { fill:#274242; }
.st19 { fill:#521900; }
.st20 { fill:#3A3A39; }
.st21 { display:none; fill:#521900; }
.st22 { fill:#3B3022; }
.st23 { display:inline; fill:#274242; }
.st24 { display:inline; fill:#F9F19D; }
.st25 { fill:#F9F19D; }
.st26 { opacity:0.5; }
.st27 { opacity:0.5; fill:#FFFFFF; enable-background:new; }
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
    hover elements
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#section-house .wrapper .window {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #fff;
	opacity: 0;
	z-index: 10;
}
/* window positions */
#section-house .wrapper #window-1 {
	border-radius: 50%;
	width: 12.5%;
	height: 12%;
	top: 12.2%;
	left: 23.5%;
}
#section-house .wrapper #window-2 {
	border-radius: 50%;
	width: 12.5%;
	height: 12%;
	top: 12.2%;
	left: 63.5%;
}
#section-house .wrapper #window-3 {
	width: 7.5%;
	height: 11.5%;
	top: 36.4%;
	left: 11.8%;
}
#section-house .wrapper #window-4 {
	width: 7.5%;
	height: 11.5%;
	top: 36.4%;
	left: 25.8%;
}
#section-house .wrapper #window-5 {
	width: 7.5%;
	height: 11.5%;
	top: 36.4%;
	left: 66%;
}
#section-house .wrapper #window-6 {
	width: 7.5%;
	height: 11.5%;
	top: 36.4%;
	left: 80.4%;
}
#section-house .wrapper #window-7 {
	width: 7.5%;
	height: 13%;
	top: 53.8%;
	left: 11.8%;
}
#section-house .wrapper #window-8 {
	width: 7.5%;
	height: 13%;
	top: 53.8%;
	left: 25.8%;
}
#section-house .wrapper #window-9 {
	width: 10.4%;
	height: 16%;
	top: 53%;
	left: 44.6%;
	border-radius: 100% 100% 0 0;
}
#section-house .wrapper #window-10 {
	width: 7.5%;
	height: 13%;
	top: 53.8%;
	left: 66%;
}
#section-house .wrapper #window-11 {
	width: 7.5%;
	height: 13%;
	top: 53.8%;
	left: 80.4%;
}
#section-house .wrapper #window-clock {
	height: 72px;
	width: 72px;
	left: 46.1%;
	top: 38.8%;
	border-radius: 50%;
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
	show bubbles on window hover
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#section-house .wrapper #window-1:hover ~ #bubble-1,
#section-house .wrapper #window-2:hover ~ #bubble-2,
#section-house .wrapper #window-3:hover ~ #bubble-3,
#section-house .wrapper #window-4:hover ~ #bubble-4,
#section-house .wrapper #window-5:hover ~ #bubble-5,
#section-house .wrapper #window-6:hover ~ #bubble-6,
#section-house .wrapper #window-7:hover ~ #bubble-7,
#section-house .wrapper #window-8:hover ~ #bubble-8,
#section-house .wrapper #window-9:hover ~ #bubble-9,
#section-house .wrapper #window-10:hover ~ #bubble-10,
#section-house .wrapper #window-11:hover ~ #bubble-11,
#section-house .wrapper #window-12:hover ~ #bubble-12,
#section-house .wrapper #window-13:hover ~ #bubble-13,
#section-house .wrapper #window-14:hover ~ #bubble-14,
#section-house .wrapper #window-clock:hover ~ #bubble-clock {
	transform: scale(1);
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
	bubbles
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#section-house .wrapper .bubbles {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	word-break: break-word;
}
#section-house .wrapper .bubbles .bubble {
	position: absolute;
	width: 310px;
	background: #fff;
	padding: 25px 30px 20px;
	border-radius: 23px;
	font-family: balloon-d, sans-serif;
	font-size: 20px;
	text-align: left;
	box-shadow: 0 0 30px rgba(0,0,0,.3);
	z-index: 10;
	transform: scale(0);
	transform-origin: 56px calc(100% + 23px);
	transition: transform .3s ease;
}
#section-house .wrapper .bubbles .bubble span {
	position: relative;
}
#section-house .wrapper .bubbles .bubble span:before {
	content: "";
	height: 3px;
	width: calc(100% - 5px);
	position: absolute;
	background: black;
	left: 0;
	bottom: 0;
}
#section-house .wrapper .bubbles .bubble span:after {
	content: ":";
	font-size: 28px;
	line-height: 0;
}
#section-house .wrapper .bubbles .bubble a {
	color: #E95022;
	text-decoration: none;
}
#section-house .wrapper .bubbles .bubble a:hover {
/* 	opacity: .75; */
	text-decoration: underline;
}
#section-house .wrapper .bubbles .bubble.r {
	transform-origin: 254px calc(100% + 23px);
}
#section-house .wrapper .bubbles .bubble.m {
	transform-origin: 147px calc(100% + 23px);
}
#section-house .wrapper .bubbles .bubble.t {
	transform-origin: 56px -23px;
}
#section-house .wrapper .bubbles .bubble.r.t {
	transform-origin: 254px -23px;
}
#section-house .wrapper .bubbles .bubble:before {
	content: "";
	position: absolute;
	width: 32px;
	height: 32px;
	background: #fff;
	bottom: -16px;
	left: 40px;
	transform: rotate(45deg);
}
#section-house .wrapper .bubbles .bubble.r:before {
	bottom: -16px;
	right: 40px;
	left: auto;
}
#section-house .wrapper .bubbles .bubble.m:before {
	bottom: -16px;
	left: 131px
}
#section-house .wrapper .bubbles .bubble.t:before {
	bottom: auto;
	top: -16px;
}
/* show bubble on bubble hover */
#section-house .wrapper .bubbles .bubble:hover {
	transform: scale(1);
}
/* bubble positions */
#section-house .wrapper .bubbles #bubble-1 {
	left: 23.5%;
	top: 21.7%;
}
#section-house .wrapper .bubbles #bubble-2 {
	left: 41.3%;
	top: 21.7%;
}
#section-house .wrapper .bubbles #bubble-3 {
	left: 9.3%;
	bottom: 61.5%;
}
#section-house .wrapper .bubbles #bubble-4 {
	left: 23.8%;
	bottom: 61.5%;
}
#section-house .wrapper .bubbles #bubble-5 {
	left: 41.3%;
	bottom: 61.5%;
}
#section-house .wrapper .bubbles #bubble-6 {
	left: 55.7%;
	bottom: 61.5%;
}
#section-house .wrapper .bubbles #bubble-7 {
	left: 9.7%;
	bottom: 42.7%;
}
#section-house .wrapper .bubbles #bubble-8 {
	left: 23.8%;
	bottom: 42.7%;
}
#section-house .wrapper .bubbles #bubble-9 {
	left: 33.3%;
	bottom: 42.7%;
}
#section-house .wrapper .bubbles #bubble-9.start {
	transition: none;
	transform: scale(1);
}
#section-house .wrapper .bubbles #bubble-10 {
	left: 41.7%;
	bottom: 42.7%;
}
#section-house .wrapper .bubbles #bubble-11 {
	left: 55.7%;
	bottom: 42.7%;
}
#section-house .wrapper .bubbles #bubble-clock {
	left: 33.4%;
	bottom: 60%;
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
	lights
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
.light {
	opacity: 0;
	transition: opacity .1s ease;
}
/* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
	animations
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
#hand1 {
	transform-origin: 49.8% 43.4%;
}
#hand2 {
	transform-origin: 49.7% 43.3%;
	
}
@keyframes clockAnimation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
 }
 /* =*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
	mobile layout
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */
@media (max-width: 1100px) {
	/* disable viewport size */
	body {
		overflow: scroll;
		height: auto;
	}
	/* title */
	#section-nav {
		top: -275px;
	}
	#section-nav .bottom-wrap {
		height: 135px;
	}
	h1 {
		padding-right: 10vw;
	}
	/* hide desktop illustration & show mobile */
	#illustration-desktop {
		display: none;
	}
	#wall-mobile {
		display: block;
	}
	#section-nav .wrapper {
		padding-top: 50px;
	}
	#section-house {
		height: auto;
		position: relative;
	}
	#section-house .wrapper {
		position: static;
		width: 100%;
		transform: none;
		padding: 300px 50px 50px 200px;
	}
	/* bubbles */
	#section-house .wrapper .bubbles {
		position: relative;
		z-index: 1;
	}
	#section-house .wrapper .bubbles .window {
		display: none;
	}
	#section-house .wrapper .bubbles .bubble {
		transition: none;
		transform: none;
		display: block;
		position: relative;
		bottom: auto !important;
		left: auto !important;
		margin-bottom: 50px;
		width: 100%;
		z-index: unset;
		font-size: 30px;
	}
	#section-house .wrapper .bubbles .bubble.l:before,
	#section-house .wrapper .bubbles .bubble.r:before,
	#section-house .wrapper .bubbles .bubble.m:before {
		right: auto;
		bottom: auto;
		left: -15px;
		top: 23px;
	}
	#section-house .wrapper .bubbles .bubble:after {
		content: "";
		height: 160px;
		width: 240px;
		position: absolute;
		background: url(../img/window-mobile-1.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left;
		left: -220px;
		top: 0;
		z-index: -1;
	}
	#section-house .wrapper .bubbles .bubble:nth-child(4n):after {
		background: url(../img/window-mobile-2.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left;
		left: -210px;
	}
	#section-house .wrapper .bubbles .bubble#bubble-clock:after {
		background: url(../img/clock.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		height: 150px;
		width: 150px;
		left: -155px;
	}
	#section-house .wrapper .bubbles .bubble#bubble-9:after {
		background: none;
	}
	#section-house .wrapper .bubbles .bubble:hover {
		transform: none;
	}
}
@media (max-width: 700px) {
	#section-nav {
		top: -290px;
	}
	#section-nav .wrapper {
		padding-top: 30px;
	}
	#section-nav .wrapper .desc {
		float: none;
		width: 100%;
	}
	h1 {
		font-size: 20px;
		padding-right: 30px;
	}
	#section-nav .bottom-wrap {
		height: 115px;
	}
	#section-house {
		margin-top: 70px;
	}
	#section-house .wrapper {
		padding: 150px 50px 50px 90px;
	}
	#wall-mobile:after {
		padding-bottom: 92%;
		width: 112%;
	}
	#section-house .wrapper .bubbles .bubble {
		font-size: 20px;
	}
	#section-house .wrapper .bubbles .bubble:before {
		height: 24px;
		width: 24px;
	}
	#section-house .wrapper .bubbles .bubble.l:before,
	#section-house .wrapper .bubbles .bubble.r:before,
	#section-house .wrapper .bubbles .bubble.m:before {
		left: -11px;
	}
	#section-house .wrapper .bubbles .bubble:after {
		left: -105px;
		width: 120px;
		top: -10px;
	}
	#section-house .wrapper .bubbles .bubble#bubble-clock:after {
		height: 80px;
		width: 80px;
		left: -70px;
		top: 10px;
	}
	#section-house .wrapper .bubbles .bubble:nth-child(4n):after {
		left: -105px;
	}
	#wall-mobile {
		margin-top: 120px;
		width: 120px;
	}
	#wall-mobile:before {
		height: 220px;
		width: 125%;
	}
}
@media (max-width: 500px) {
	#section-nav {
		top: -320px;
	}
	#section-nav .bottom-wrap {
		height: 85px;
	}
	h1 {
		width: 100%;
		padding: 15px 20px;
	}
	#section-nav .wrapper {
		padding: 20px 0 150px;
	}
	#section-nav .wrapper .desc {
		padding: 0 20px;
	}
	#section-nav  #nav-arrow {
		width: 100%;
		position: fixed;
		transform: none;
		box-sizing: border-box;
		height: 40px;
		top: auto;
		padding: 10px 0 0;
		text-align: center;
	}
	#section-nav  #nav-arrow img {
		filter: invert();
		height: 100%;
	}
	#wall-mobile {
		margin-top: 80px;
		width: 80px;
	}
	#section-house .wrapper {
		padding: 120px 20px 40px 40px;
	}
	#wall-mobile:after {
		padding-bottom: 96%;
		width: 116%;
	}
	#section-house .wrapper .bubbles .bubble {
		margin-bottom: 20px;
	}
	#section-house .wrapper .bubbles .bubble:after {
		height: 100px;
		width: 100px;
		left: -90px;
	}
	#section-house .wrapper .bubbles .bubble:nth-child(4n):after {
		left: -90px;
	}
}
@media (max-width: 400px) {
	#section-nav {
		top: -290px;
	}
	#section-nav .bottom-wrap {
		height: 113px;
	}
	h1 {
		padding-right: 25vw;
	}
}