.house-cont {
	line-height: 0;
	position: relative;
}

.house-cont .winter > img, .house-cont .summer .wrap > img {
	width: 100%;
}

.abs {
	position: absolute;
	top: 0px;
	left: 0px;
}

.season {
	overflow: hidden;
}

.flipV {
	transform: scale(-1, 1);
}

.flow-red {
	fill: #FF0000;
}

.flow-blue {
	fill: #70B2ED;
}

.wrap {
	position: relative;
}

.popup {
	position: absolute;
	/*overflow: hidden;*/
	transform-origin: 50% 0%;

	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 1.5rem;
	white-space: nowrap;
	cursor: pointer;
}

.popup img {
	width: -moz-fit-content;
}

.popup h1 {
	font-family: 'Noticia Text', serif;
	font-style: italic;
	font-weight: 300;
}


.sun {
	top: 70%;
	left: 30.8%;
}

.sun img {
	transform-origin: center center;
	margin-top: 20%;
	transition: all 0.5s ease-in-out;
}

.sun span {
	opacity: 0;
	display: block;
	margin-top: 2rem;

	transition: all 0.3s ease-in-out;
}

.summer .sun-wrap:hover {
	top: 68%;
	left: 18.62%;
	width: 320px;
	height: 220px;
	border-radius: 0px;
	background-color: rgba(0, 103, 171, 0.8);
}

.summer .sun-wrap:hover img {
	margin-top: 8%;
}

.summer .sun-wrap:hover span {
	opacity: 1;
}

.summer .sun-wrap{
	background-color: #0067ab;
}

.info {
	top: 7%;
	left: 50%;
}

.info img {
	transform-origin: center center;
	margin-top: 30%;
	margin-bottom: 5%;
	transition: all 0.5s ease-in-out;
}

.info h1 {
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.info span {
	opacity: 0;
	display: block;
	transition: all 0.3s ease-in-out;
}

.summer .info-wrap:hover {
	top: 3%;
	left: 50%;
	width: 480px;
	height: 340px;
	border-radius: 0;
	background-color: rgba(0, 103, 171, 0.8);
}

.summer .info-wrap:hover img {
	margin-bottom: 5%;
	margin-top: 8%;
}

.summer .info-wrap:hover span {
	opacity: 1;
}

.summer .info-wrap:hover h1 {
	opacity: 1;
}

.summer .info-wrap{
	background-color: #0067ab;
}

.info-wrap {
	width:88px;
	height:88px;
	border-radius: 44px;
	margin-left:-50%;
	overflow:hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	line-height: 2.8rem;
	text-align: center;
	transition: all 0.5s ease-in-out;
}

.winter .sun-wrap:hover {
	top: 68%;
	left: 18.62%;
	width: 320px;
	height: 220px;
	border-radius: 0px;
	background-color: rgba(237, 28, 36, 0.8);
}

.winter .sun-wrap:hover img {
	margin-top: 10%;
}

.winter .sun-wrap:hover span {
	opacity: 1;
}

.winter .sun-wrap{
	background-color: #ed1c24;
}

.winter .info-wrap:hover img {
	margin-bottom: 5%;
	margin-top: 10%;
}

.winter .info-wrap:hover span {
	opacity: 1;
}

.winter .info-wrap:hover h1 {
	opacity: 1;
}

.winter .info-wrap:hover {
	top: 3%;
	left: 34.94%;
	width: 506px;
	height: 356px;
	border-radius: 0;
	background-color: rgba(237, 28, 36, 0.8);
}

.winter .info-wrap{
	background-color: #ed1c24;
}

.sun-wrap{
	width:88px;
	height:88px;
	border-radius: 44px;
	margin-left:-50%;
	overflow:hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	line-height: 2.8rem;
	text-align: center;
	transition: all 0.5s ease-in-out;
}
.drag-bar img {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}

.drag-bar {
	position: absolute;
	height: 100%;
	display: flex;
	top: 0px;
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.drag-bar .flipV-left {
	transform: translateX(0px) scale(-1, 1);
	transition: all 0.3s ease-in-out;
}

.drag-bar .flipV-right {
	transition: all 0.3s ease-in-out;
}

.drag-bar:hover {
	cursor: e-resize;
}

.drag-bar:hover .flipV-left {
	transform: translateX(-3px) scale(-1, 1);
}

.drag-bar:hover .flipV-right {
	transform: translateX(3px);
}

.thumb {
	align-self: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-left: -23px;
}

.thumb img {
	margin: 0 2px;
}

.line {
	background-color: rgba(255, 255, 255, 0.8);
	width: 2px;
	height: 100%;
}

@media screen and (max-width: 1600px) {
	.popup{
		font-size: 1.4rem;
	}

	.popup h1 {

	}

	.info img {
		transform: scale(0.8);
		margin-top: 26%;
		margin-bottom: 3%;
	}
	.info-wrap {
		width:70px;
		height:70px;
		border-radius: 35px;
		line-height: 2.3rem;

	}
	.sun img {
		transform: scale(0.8);
		margin-top: 14%;
	}

	.sun span {
		margin-top: 1.5rem;
	}
	.sun-wrap{
		width:70px;
		height:70px;
		border-radius: 35px;
		line-height: 2.3rem;
	}

	.summer .info-wrap:hover {
		width: 400px;
		height: 290px;
	}
	.summer .info-wrap:hover img {
		margin-bottom: 3%;
		margin-top: 6%;
	}

	.winter .info-wrap:hover img {
		margin-bottom: 3%;
		margin-top: 6%;
	}
	.winter .info-wrap:hover {
		width: 420px;
		height: 300px;
	}

	.winter .sun-wrap:hover {
		top: 68%;
		left: 18.62%;
		width: 280px;
		height: 190px;
	}

	.summer .sun-wrap:hover {
		top: 68%;
		left: 18.62%;
		width: 280px;
		height: 190px;
	}
}
@media screen and (max-width: 1440px) {
	.popup{
		font-size: 1.2rem;
	}

	.popup h1 {

	}

	.info img {
		transform: scale(0.8);
		margin-top: 26%;
		margin-bottom: 3%;
	}
	.info-wrap {
		width:70px;
		height:70px;
		border-radius: 35px;
		line-height: 2.0rem;

	}
	.sun img {
		transform: scale(0.8);
		margin-top: 13%;
	}

	.sun span {
		margin-top: 1.2rem;
	}
	.sun-wrap{
		width:70px;
		height:70px;
		border-radius: 35px;
		line-height: 2.3rem;
	}

	.summer .info-wrap:hover {
		width: 340px;
		height: 250px;
	}
	.summer .info-wrap:hover img {
		margin-bottom: 3%;
		margin-top: 6%;
	}
	.winter .info-wrap:hover img {
		margin-bottom: 3%;
		margin-top: 6%;
	}
	.summer .sun-wrap:hover img {
		margin-bottom: -1%;
		margin-top: 6%;
	}
	.winter .sun-wrap:hover img {
		margin-bottom: -1%;
		margin-top: 6%;
	}

	.winter .info-wrap:hover {
		width: 340px;
		height: 250px;
	}

	.winter .sun-wrap:hover {
		top: 68%;
		left: 18.62%;
		width: 250px;
		height: 170px;
	}

	.summer .sun-wrap:hover {
		top: 68%;
		left: 18.62%;
		width: 250px;
		height: 170px;
	}
}
@media screen and (max-width: 1200px) {
	.popup{
		font-size: 1.1rem;
	}

	.popup h1 {

	}

	.info img {
		transform: scale(0.7);
		margin-top: 24%;
		margin-bottom: 3%;
	}
	.info-wrap {
		width:60px;
		height:60px;
		border-radius: 30px;
		line-height: 2.0rem;

	}
	.sun img {
		transform: scale(0.7);
		margin-top: 7%;
	}

	.sun span {
		margin-top: 1.2rem;
	}
	.sun-wrap{
		width:60px;
		height:60px;
		border-radius: 30px;
		line-height: 1.8rem;
	}


	.summer .info-wrap:hover img {
		margin-bottom: 2%;
		margin-top: 5%;
	}
	.winter .info-wrap:hover img {
		margin-bottom: 2%;
		margin-top: 5%;
	}
	.summer .sun-wrap:hover img {
		margin-bottom: -3%;
		margin-top: 3%;
	}
	.winter .sun-wrap:hover img {
		margin-bottom: -3%;
		margin-top: 3%;
	}

	.winter .info-wrap:hover {
		width: 310px;
		height: 235px;
	}
	.summer .info-wrap:hover {
		width: 310px;
		height: 235px;
	}
	.winter .sun-wrap:hover {
		top: 68%;
		left: 18.62%;
		width: 230px;
		height: 140px;
	}

	.summer .sun-wrap:hover {
		top: 68%;
		left: 18.62%;
		width: 230px;
		height: 140px;
	}
}