.core-values,
.core-values p,
.core-values span,
.core-values h1 {
	position: relative;
	z-index: 999;
}
.core-values:after{
	content: "";
	background:white;
	position: absolute;
    width: 100vw;
    height: 70%;
    left: -10%;
    margin-top: -2%;
}
#preload{
    display: none;
}

.shape-wrapper {
	position: relative;
	height: 90vw;
}
.shapes-container {
    background-color: #fff;
    z-index: 999;
    position: absolute;
    width: 20%;
    height: 58vw;
}
.shape{
	width: 10%;
	height: 10%;
	display: inline-block;
	cursor: pointer;
	margin-bottom: 2rem;
	position: absolute;
	z-index: 2;
}

.shapes span{
	display: block;
	width: 8px;
	height: 8px;
	background-image: url("../img/shapes/diamond-blue.svg");
    background-size: contain;
}
.shapes p {
	font-family: Helvetica;
	line-height: 1.25;
}
.slots {
    width: 69%;
}
.slots div {
    z-index: 999;
}
.slot {
	position: absolute;
}


#slot-1 {
	background-image: url("../img/graphics/about/draggable/blue-outline.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 27%;
	height:27%;
	top: 0;
	left: 40%;
}
#slot-2 {
	background-image: url("../img/graphics/about/draggable/yellow-outline.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 18%;
	height:30%;
	top: 50%;
	right: 0;
}
#slot-3 {
	background-image: url("../img/graphics/about/draggable/orange-outline.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 28%;
	height:28%;
	top: 10%;
	right: 0;
}

#slot-4 {
	background-image: url("../img/graphics/about/draggable/red-outline.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 24%;
	height:24%;
	top: 60%;
	left: 35%;
	margin-bottom: 5%;
}

#slot-5 {
	background-image: url("../img/graphics/about/draggable/green-outline.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 36%;
	height:36%;
	top: 30%;
	left: 35%;
}


#shape-1 {
	background-image: url("../img/graphics/about/draggable/blue.svg");
	background-size: contain;
	background-repeat: no-repeat;
	top: 12%;
	left:0;
}
#shape-2 {
	background-image: url("../img/graphics/about/draggable/yellow.svg");
	background-size: contain;
	background-repeat: no-repeat;
	top: 45%;
	left: 0;
	transform: rotate(150deg);
}
#shape-3 {
	background-image: url("../img/graphics/about/draggable/orange.svg");
	background-size: contain;
	background-repeat: no-repeat;
	top: 24%;
	left: 0;
	transform: rotate(90deg);
}
#shape-4 {
	background-image: url("../img/graphics/about/draggable/red.svg");
	background-size: contain;
	background-repeat: no-repeat;
	top: 36%;
	left: 12%;
}
#shape-5 {
	background-image: url("../img/graphics/about/draggable/green.svg");
	background-size: contain;
	background-repeat: no-repeat;
	top: 18%;
	left: 10%;
	width: 12%;
	height: 12%;
	transform: rotate(90deg);
}
#shape-4.final {
    position: absolute;
}
.ui-droppable {
}
#slot-1.ui-droppable-hover {
	background-image: url("../img/graphics/about/draggable/blue-hover.svg");
}
#slot-4.ui-droppable-hover {
	background-image: url("../img/graphics/about/draggable/red-hover.svg");
}

#slot-5.ui-droppable-hover {
	background-image: url("../img/graphics/about/draggable/green-hover.svg");
}
#slot-3.ui-droppable-hover {
	background-image: url("../img/graphics/about/draggable/orange-hover.svg");
}
#slot-2.ui-droppable-hover {
	background-image: url("../img/graphics/about/draggable/yellow-hover.svg");
}


#shape-1.reveal {
	background-image: url("../img/graphics/about/draggable/blue-reveal.svg");
}
#shape-4.reveal {
	background-image: url("../img/graphics/about/draggable/red-reveal.svg");
}

#shape-5.reveal {
	background-image: url("../img/graphics/about/draggable/green-reveal.svg");
}
#shape-3.reveal {
	background-image: url("../img/graphics/about/draggable/orange-reveal.svg");
}
#shape-2.reveal {
	background-image: url("../img/graphics/about/draggable/yellow-reveal.svg");
}

@media only screen and (max-width:544px) {
	.shape-wrapper {
	    height: 150vh;
	}
	.shapes-container {
	    width: 100%;
	    height: 58vh;
	}
	.slots {
	    width: 100%;
	}

	.shape{
		width: 25vw;
		height: 25vw;
		display: inline-block;
		cursor: pointer;
		margin-bottom: 2rem;
		position: absolute;
		z-index: 2;
	}
	#shape-1 {
		top: 15vw;
		left:5vw;
	}
	#shape-2 {
		top: 20vw;
		left: auto;
		right: 25vw;
		transform: rotate(60deg);
	}
	#shape-3 {
		top: 40vw;
		left: 5vw;
		transform: rotate(90deg);
	}
	#shape-4 {
		top: 35vw;
		left: auto;
		right: 5vw;
	}
	#shape-5 {
		top: 40vw;
		left: 30vw;
		width: 30vw;
		height: 30vw;
	}
	#slot-1 {
		width: 45%;
		height:45%;
		top: 75vw;
		left: 5vw;
	}
	#slot-2 {
		width: 27%;
		height:40%;
		top: 175vw;
		right: 5vw;
	}
	#slot-3 {
		width: 47%;
		height:47%;
		top: 80vw;
		right: 5vw;
	}

	#slot-4 {
		width: 45%;
		height:45%;
		top: 175vw;
		left: 5vw;
		margin-bottom: 5%;
	}

	#slot-5 {
		width: 60%;
		height:60%;
		top: 130vw;
		left: 20vw;
	}
}


@media only screen and (max-width:768px) and (orientation: landscape) {
	#mission {
		padding-bottom: 0;
	}
	#management {
		padding-top: 0;
	}
}

@media only screen and (max-width:1200px){
	#mission {
		padding-bottom: 0;
	}
	#management {
		padding-top: 0;
	}
}