* {
	margin:0px;
	padding:0px;
}

html, body {
	height:100%;
	background-image:url('../img/background.png');
	background-size:100% 100%;
}

.container {
	width:1000px;
	height:600px;
}

.relativeCenter {
	position:relative;
	
	top:calc(50% - 300px);
	left:calc(50% - 500px);
}

.castleImage {
	position:absolute;
	top:80px;
	left:315px;
	width:427px;
	height:473px;
}

.name {
	position:absolute;
	top:25px; /* 30 */
	left:245px;
}

.cloud1 {
	position:absolute;
	top:252px;
	left:123px;
}

.cloud2 {
	position:absolute;
	top:433px;
	left:167px;
}

.cloud3 {
	position:absolute;
	top:193px;
	left:257px;
}

.cloud4 {
	position:absolute;
	top:205px;
	left:691px;
}

.cloud5 {
	position:absolute;
	top:376px;
	left:734px;
}

.organisationButton {
	position:absolute;
	top:285px;
	left:76px;
}

.whoAreWeButton {
	position:absolute;
	top:231px;
	left:248px;
}

.findUsButton {
	position:absolute;
	top:242px;
	left:662px;
}

.enrollmentButton {
	position:absolute;
	top:467px;
	left:149px;
}

.reccomendButton {
	position:absolute;
	top:412px;
	left:709px;
}

.animationContainer {
	position:absolute;
	width:125px;
	height:133px;
}

.animationContainerBlu {
	position:absolute;
	width:122px;
	height:120px;
}

.animationContainerMag {
	position:absolute;
	width:125px;
	height:120px;
}

#animationContainerBlue {
	top:342px;
	left:185px;
}

#animationContainerRed {
	top:155px;
	left:110px;
}

#animationContainerMagenta {
	top:110px;
	left:245px;
}

#animationContainerYellow {
	top:115px;
	left:686px;
}

#animationContainerPink {
	top:282px;
	left:745px;
}

.popupContainer {
	width:650px;
	max-height:550px;
	
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:calc(50% - 325px);
	
	font-family:Comic Sans MS;
	font-size:15px;
	text-align:justify;
	font-weight:bold;
	
	color:rgb(74, 4, 17);
	background-color:white;
	border:5px solid rgb(74, 4, 17);
}

.background {
	position:absolute;
	top:0px;
	
	width:100%;
	height:100%;
	
	background:gray;
	opacity:0.3;
}

.contentContainer {
	width:calc(100% - 30px);
	max-height:calc(510px - 30px);
	background:white;
	padding:15px;
	margin-top:5px;
	overflow-y:auto;
}

.pointerHand {
	cursor:pointer; 
	cursor:hand;
}

.closeButton {
	height:25px;
	float:right;
}

.closeButtonContainer {
	height:25px;
	margin:10px;
	margin-bottom:0px;
}

/* pink fairy content styles */
.overallCont {
	position:relative;
	width:100%;
	margin:30px 0px;
}

.logoCont {
	width:30%;
	display:inline-block;
}

.descCont {
	width:calc(65% - 18px);
	display:inline-block;
	padding-left:18px;
	vertical-align:top;
}

.logoStyle {
	position:absolute;
	top:0px;
	bottom:0px;
	margin:auto;
	width:170px;
}

.popupFairyPosFix {
	width:0px;
	float:right;
	height:200px;
}

.popupFairy {
	float:right;
	clear:right;
	width:160px;
}