@media (min-height:400px) and (max-height:479px) {
	
	.container {
		height:400px;
	}
	
	.relativeCenter {
		top:calc(50% - 200px);
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:317px;
		height:363px;
	}
	
	.name {
		margin:auto;
		top:0px;
		bottom:83%;
		left:0px;
		right:0px;
	}
	/*Red------------------------------------------*/
	.cloud1 {
		position:absolute;
		top:192px;
		left:63px;
	}

	.organisationButton {
		position:absolute;
		top:225px;
		left:16px;
	}
	
	#animationContainerRed {
		top:95px;
		left:50px;
	}
	
	/*Blue------------------------------------------*/
	.cloud2 {
		position:absolute;
		top:323px;
		left:177px;
	}
	
	.enrollmentButton {
		position:absolute;
		top:357px;
		left:159px;
	}
	
	#animationContainerBlue {
		top:232px;
		left:195px;
	}
	
	/*Magenta------------------------------------------*/
	.cloud3 {
		position:absolute;
		top:153px;
		left:257px;
	}
	
	.whoAreWeButton {
		position:absolute;
		top:192px;
		left:248px;
	}
	
	#animationContainerMagenta {
		top:80px;
		left:245px;
	}
	
	/*Yellow------------------------------------------*/
	.cloud4 {
		position:absolute;
		top:170px;
		left:641px;
	}
	
	.findUsButton {
		position:absolute;
		top:202px;
		left:612px;
	}
	
	#animationContainerYellow {
		top:75px;
		left:636px;
	}
	
	/*Pink------------------------------------------*/
	.cloud5 {
		position:absolute;
		top:286px;
		left:794px;
	}

	.reccomendButton {
		position:absolute;
		top:322px;
		left:769px;
	}

	#animationContainerPink {
		top:192px;
		left:805px;
	}
	
	.popupContainer {
		width:650px;
		max-height:350px;
		font-size:15px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(300px - 30px);
		overflow-y:scroll;
	}
	
}

@media (min-height:480px) and (max-height:539px) {
	
	.container {
		height:480px;
		
	}
	
	.relativeCenter {
		top:calc(50% - 240px);
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:400px;
		height:436px;
	}
	
	.name {
		margin:auto;
		top:0px;
		bottom:85%;
		left:0px;
		right:0px;
	}
	
	/*Red------------------------------------------*/
	.cloud1 {
		position:absolute;
		top:212px;
		left:63px;
	}

	.organisationButton {
		position:absolute;
		top:245px;
		left:16px;
	}
	
	#animationContainerRed {
		top:115px;
		left:50px;
	}
	
	/*Blue------------------------------------------*/
	.cloud2 {
		position:absolute;
		top:353px;
		left:187px;
	}
	
	.enrollmentButton {
		position:absolute;
		top:387px;
		left:169px;
	}
	
	#animationContainerBlue {
		top:262px;
		left:205px;
	}
	
	/*Magenta------------------------------------------*/
	.cloud3 {
		position:absolute;
		top:153px;
		left:257px;
	}
	
	.whoAreWeButton {
		position:absolute;
		top:192px;
		left:248px;
	}
	
	#animationContainerMagenta {
		top:80px;
		left:245px;
	}
	
	/*Yellow------------------------------------------*/
	.cloud4 {
		position:absolute;
		top:200px;
		left:681px;
	}
	
	.findUsButton {
		position:absolute;
		top:232px;
		left:652px;
	}
	
	#animationContainerYellow {
		top:105px;
		left:676px;
	}
	
	/*Pink------------------------------------------*/
	.cloud5 {
		position:absolute;
		top:366px;
		left:794px;
	}

	.reccomendButton {
		position:absolute;
		top:402px;
		left:769px;
	}

	#animationContainerPink {
		top:272px;
		left:805px;
	}
	
	.popupContainer {
		width:650px;
		max-height:430px;
		font-size:15px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(380px - 30px);
		overflow-y:scroll;
	}
}

@media (min-height:540px) and (max-height:599px) {
	
	.container {
		height:540px;
	}
	
	.relativeCenter {
		top:calc(50% - 270px);
		
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:460px;
		height:476px;
	}
	
	.name {
		margin:auto;
		top:0px;
		bottom:85%;
		left:20px;
		right:0px;
	}
	
	/*Red*/
	.cloud1 {
		position:absolute;
		top:192px;
		left:63px;
	}

	.organisationButton {
		position:absolute;
		top:225px;
		left:16px;
	}

	#animationContainerRed {
		top:95px;
		left:50px;
	}

	/*Blue*/
	.cloud2 {
		position:absolute;
		top:353px;
		left:177px;
	}

	.enrollmentButton {
		position:absolute;
		top:387px;
		left:159px;
	}

	#animationContainerBlue {
		top:252px;
		left:195px;
	}

	/*Magenta*/
	.cloud3 {
		position:absolute;
		top:153px;
		left:257px;
	}
 
	.whoAreWeButton {
		position:absolute;
		top:192px;
		left:248px;
	}
	 
	#animationContainerMagenta {
		top:80px;
		left:245px;
	}
	 
	/*Yellow*/
	.cloud4 {
		position:absolute;
		top:190px;
		left:691px;
	}
	 
	.findUsButton {
		position:absolute;
		top:222px;
		left:662px;
	}
	 
	#animationContainerYellow {
		top:95px;
		left:686px;
	}
	 
	/*Pink*/
	.cloud5 {
		position:absolute;
		top:356px;
		left:794px;
	}

	.reccomendButton {
		position:absolute;
		top:382px;
		left:769px;
	}

	#animationContainerPink {
		top:252px;
		left:805px;
	}
	
	.popupContainer {
		width:650px;
		max-height:490px;
		font-size:15px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(440px - 30px);
		overflow-y:scroll;
	}

}

@media (min-height:600px) and (max-height:639px) {
	
	.container {
		height:600px;
	}
	
	.relativeCenter {
		top:calc(50% - 300px);
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:490px;
		height:536px;
	}
	
	.name {
		margin:auto;
		top:0px;
		bottom:85%;
		left:0px;
		right:0px;
	}
	
	/*Red------------------------------------------*/
	.cloud1 {
		position:absolute;
		top:232px;
		left:53px;
	}

	.organisationButton {
		position:absolute;
		top:265px;
		left:6px;
	}
	
	#animationContainerRed {
		top:135px;
		left:40px;
	}
	
	/*Blue------------------------------------------*/
	.cloud2 {
		position:absolute;
		top:373px;
		left:187px;
	}
	
	.enrollmentButton {
		position:absolute;
		top:407px;
		left:169px;
	}
	
	#animationContainerBlue {
		top:282px;
		left:205px;
	}
	
	/*Magenta------------------------------------------*/
	.cloud3 {
		position:absolute;
		top:153px;
		left:257px;
	}
	
	.whoAreWeButton {
		position:absolute;
		top:192px;
		left:248px;
	}
	
	#animationContainerMagenta {
		top:80px;
		left:245px;
	}
	
	/*Yellow------------------------------------------*/
	.cloud4 {
		position:absolute;
		top:210px;
		left:681px;
	}
	
	.findUsButton {
		position:absolute;
		top:242px;
		left:652px;
	}
	
	#animationContainerYellow {
		top:115px;
		left:676px;
	}
	
	/*Pink------------------------------------------*/
	.cloud5 {
		position:absolute;
		top:366px;
		left:794px;
	}

	.reccomendButton {
		position:absolute;
		top:402px;
		left:769px;
	}

	#animationContainerPink {
		top:272px;
		left:805px;
	}
	
	.popupContainer {
		width:650px;
		max-height:550px;
		font-size:15px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(500px - 30px);
		overflow-y:scroll;
	}
	
}

@media (min-height:1000px) and (max-height:1199px) {
	
	.container {
		height:1000px;
	}
	
	.relativeCenter {
		top:calc(50% - 500px);
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:780px;
		height:816px;
	}
	
	.name {
		margin:auto;
		top:30px;
		left:0px;
		right:0px;
		width:800px;
	}
	
	/*Red*/
	.cloud1 {
		position:absolute;
		top:442px;
		left:53px;
		width:160px;
		height:70px;
	}

	.organisationButton {
		position:absolute;
		top:485px;
		left:36px;
		width:200px;
		height:40px;
	}
	
	#animationContainerRed {
		top:285px;
		left:50px;
		width:140px;
		height:200px;
	}
	
	/*Blue*/
	.cloud2 {
		position:absolute;
		top:702px;
		left:53px;
		width:160px;
		height:70px;
	}
	
	.enrollmentButton {
		position:absolute;
		top:745px;
		left:36px;
		width:200px;
		height:40px;
	}
	
	#animationContainerBlue {
		top:545px;
		left:50px;
		width:140px;
		height:200px;
	}
	
	/*Magenta*/
	.cloud3 {
		position:absolute;
		top:283px;
		left:187px;
		width:160px;
		height:70px;
	}
	
	.whoAreWeButton {
		position:absolute;
		top:332px;
		left:168px;
		width:200px;
		height:40px;
	}
	
	#animationContainerMagenta {
		top:140px;
		left:175px;
		width:140px;
		height:200px;
	}
	
	/*Yellow*/
	.cloud4 {
		position:absolute;
		top:300px;
		left:681px;
		width:160px;
		height:70px;
	}
	
	.findUsButton {
		position:absolute;
		top:332px;
		left:652px;
		width:200px;
		height:40px;
	}
	
	#animationContainerYellow {
		top:135px;
		left:686px;
		width:140px;
		height:200px;
	}
	
	/*Pink*/
	.cloud5 {
		position:absolute;
		top:596px;
		left:794px;
		width:160px;
		height:70px;
	}

	.reccomendButton {
		position:absolute;
		top:640px;
		left:769px;
		width:200px;
		height:40px;
	}

	#animationContainerPink {
		top:452px;
		left:805px;
		width:140px;
		height:200px;
	}
	
	.popupContainer {
		width:800px;
		left:calc(50% - 400px);
		max-height:950px;
		font-size:15px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(900px - 30px);
		overflow-y:scroll;
	}
	
}

@media (min-height:1200px) and (max-height:1399px) {
	
	.container {
		height:1200px;
	}
	
	.relativeCenter {
		top:calc(50% - 600px);
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:850px;
		height:886px;
	}
	
	.name {
		margin:auto;
		top:50px;
		left:0px;
		right:0px;
		width:800px;
	}
	
	/*Red*/
	.cloud1 {
		position:absolute;
		top:442px;
		left:53px;
		width:160px;
		height:70px;
	}

	.organisationButton {
		position:absolute;
		top:485px;
		left:36px;
		width:200px;
		height:40px;
	}
	
	#animationContainerRed {
		top:285px;
		left:50px;
		width:140px;
		height:200px;
	}
	
	/*Blue*/
	.cloud2 {
		position:absolute;
		top:742px;
		left:53px;
		width:160px;
		height:70px;
	}
	
	.enrollmentButton {
		position:absolute;
		top:785px;
		left:36px;
		width:200px;
		height:40px;
	}
	
	#animationContainerBlue {
		top:585px;
		left:50px;
		width:140px;
		height:200px;
	}
	
	/*Magenta*/
	.cloud3 {
		position:absolute;
		top:283px;
		left:207px;
		width:160px;
		height:70px;
	}
	
	.whoAreWeButton {
		position:absolute;
		top:332px;
		left:188px;
		width:200px;
		height:40px;
	}
	
	#animationContainerMagenta {
		top:140px;
		left:195px;
		width:140px;
		height:200px;
	}
	
	/*Yellow*/
	.cloud4 {
		position:absolute;
		top:300px;
		left:681px;
		width:160px;
		height:70px;
	}
	
	.findUsButton {
		position:absolute;
		top:332px;
		left:652px;
		width:200px;
		height:40px;
	}
	
	#animationContainerYellow {
		top:135px;
		left:686px;
		width:140px;
		height:200px;
	}
	
	/*Pink*/
	.cloud5 {
		position:absolute;
		top:596px;
		left:794px;
		width:160px;
		height:70px;
	}

	.reccomendButton {
		position:absolute;
		top:640px;
		left:769px;
		width:200px;
		height:40px;
	}

	#animationContainerPink {
		top:452px;
		left:805px;
		width:140px;
		height:200px;
	}
	
	.popupContainer {
		width:900px;
		left:calc(50% - 450px);
		max-height:1350px;
		font-size:35px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(1100px - 30px);
		overflow-y:scroll;
	}
	
	.closeButtonContainer {
		height:40px;
		margin:10px;
		margin-bottom:0px;
	}
	
	.closeButton {
		height:40px;
		float:right;
	}
	
	.popupFairy {
		width:260px;
	}
	
}

@media (min-height:1400px) {
	
	.container {
		height:1400px;
	}
	
	.relativeCenter {
		top:calc(50% - 700px);
	}
	
	.castleImage {
		margin:auto;
		top:10%;
		bottom:0px;
		left:0px;
		right:0px;
		width:870px;
		height:1020px;
	}
	
	.name {
		margin:auto;
		top:70px;
		left:0px;
		right:0px;
		width:900px;
	}
	
	/*Red*/
	.cloud1 {
		position:absolute;
		top:642px;
		left:53px;
		width:180px;
		height:80px;
	}

	.organisationButton {
		position:absolute;
		top:685px;
		left:36px;
		width:240px;
		height:60px;
	}
	
	#animationContainerRed {
		top:445px;
		left:50px;
		width:180px;
		height:260px;
	}
	
	/*Blue*/
	.cloud2 {
		position:absolute;
		top:982px;
		left:33px;
		width:180px;
		height:80px;
	}
	
	.enrollmentButton {
		position:absolute;
		top:1020px;
		left:0px;
		width:240px;
		height:60px;
	}
	
	#animationContainerBlue {
		top:775px;
		left:30px;
		width:180px;
		height:260px;
	}
	
	/*Magenta*/
	.cloud3 {
		position:absolute;
		top:373px;
		left:197px;
		width:180px;
		height:80px;
	}
	
	.whoAreWeButton {
		position:absolute;
		top:412px;
		left:158px;
		width:240px;
		height:60px;
	}
	
	#animationContainerMagenta {
		top:180px;
		left:185px;
		width:180px;
		height:260px;
	}
	
	/*Yellow*/
	.cloud4 {
		position:absolute;
		top:420px;
		left:681px;
		width:180px;
		height:80px;
	}
	
	.findUsButton {
		position:absolute;
		top:462px;
		left:652px;
		width:240px;
		height:60px;
	}
	
	#animationContainerYellow {
		top:235px;
		left:686px;
		width:180px;
		height:260px;
	}
	
	/*Pink*/
	.cloud5 {
		position:absolute;
		top:726px;
		left:794px;
		width:180px;
		height:80px;
	}

	.reccomendButton {
		position:absolute;
		top:770px;
		left:769px;
		width:240px;
		height:60px;
	}

	#animationContainerPink {
		top:532px;
		left:805px;
		width:180px;
		height:260px;
	}
	
	.popupContainer {
		width:900px;
		left:calc(50% - 450px);
		max-height:1350px;
		font-size:35px;
	}
	
	.contentContainer {
		width:calc(100% - 30px);
		max-height:calc(1300px - 30px);
		overflow-y:scroll;
	}
	
	.closeButtonContainer {
		height:40px;
		margin:10px;
		margin-bottom:0px;
	}
	
	.closeButton {
		height:40px;
		float:right;
	}
	
	.popupFairy {
		width:300px;
	}
	
}