@keyframes float1 {
  0%	{transform: rotate(12deg);}
  100%	{transform: rotate(-8deg);}
}
@keyframes float2 {
  0%	{transform: scaleX(-1) rotate(30deg);}
  100%	{transform: scaleX(-1) translateY(-5px) rotate(0deg);}
}

@media screen and (min-width: 0){
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							algemeen voor hele site
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
*									{margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box;}

.mobile								{display: none;}

html								{font-size: 18px; width: 100vw; height: 100vh;
									 -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%;}
body								{overflow-X: hidden; overflow-Y: scroll; text-align: center; font-family: Lato, Arial, sans-serif; cursor: default; color: #000000;
									 background-color: #FFFFFF;}

a									{text-decoration: none; outline: none; border: none;}
a:link								{color: inherit;}
a:visited							{color: inherit;}
a:hover								{color: inherit;}
a:active							{color: inherit;}

input, select, textarea				{font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; border: 1px solid black;}

.vertCenter							{display: inline-block; vertical-align: middle; height: 100%;}

.ED									{position: relative; width: 100%; height: 2rem; line-height: 2rem; color: #000000; background-color: #99CC00; font-size: 0.85rem;}
	.ED:after						{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
									 background: url("../IMG/BGdrawingW.png") repeat fixed center / 35rem 35rem; opacity: 0.15;}
	.ED a							{position: relative; color: #000000; z-index: 2;}

.active								{cursor: pointer; }

.block								{position: relative; display: block; left: 0; top: 0; width: 100vw; background-color: #FFFFFF; font-size: 0; z-index: 5; box-sizing: border-box;}

ul									{list-style: none;}
	ul li:before					{content: "•"; color : #F48D20; margin-right: 0.25rem;}

.button								{position: relative; display: inline-block; border-radius: 0.5rem; padding: 0.5rem 1.5rem 0.5rem 1.5rem; font-weight: 700; cursor: pointer;
									 text-align: center;}
	.label							{color: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.25);
									 background: -webkit-radial-gradient(92% 25%, circle, transparent 4%, rgba(0, 0, 0, 0.35) 4%, #99CC00 5%); transform: rotate(-8deg);
									 transition: 0.25s;}
	.label:hover					{background: -webkit-radial-gradient(92% 25%, circle, transparent 4%, rgba(0, 0, 0, 0.35) 4%, #FF5E30 5%);}

.close								{position: absolute; right: -0.75rem; top: -0.75rem; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; border: 1px solid #FF5E30;
									 box-shadow: -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25); border-radius: 50%; font-size: 0.75rem; text-align: center; cursor: pointer;
									 box-sizing: border-box; background-color: #FFFFFF; color: #FF5E30; transition: 0.1s;}
	.close:after					{content: "X"; position: absolute; left: 0; right: 0; margin: auto; transition: 0.5s;}
	.close:hover::after				{transform: rotate(360deg);}
	.close:active					{transform: scale(0.5);}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							top & menu
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.topBar								{position: fixed; background-color: #99CC00; height: 2rem; line-height: 2rem; padding: 0 18vw 0 18vw; font-size: 0.85rem;
									 color: #FFFFFF; z-index: 101; xoverflow: hidden; xwidth: 80vw;}
	.topBar:after					{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
									 background: url("../IMG/BGdrawingW.png") repeat center / 35rem 35rem; opacity: 0.15;}
	.topBar a						{color: #FFFFFF;}
	.topBar .location				{float: left; margin-right: 2vw;}
	.topBar .phone					{float: left;}
		.topBar .nav				{position: relative; z-index: 1;}
		.topBar .nav img			{display: inline-block; vertical-align: middle; height: 1rem; margin-right: 0.5rem;}
	.topBar .socialMedia			{xposition: relative; float: right; xz-index: 1;}
		.topBar .socialMedia a		{margin-right: 1rem;}

.logo								{position: fixed; left: 1rem; top: 2.5rem; xbottom: 0; xmargin: auto; height: 4.5rem; xtransition: bottom 1s; z-index: 1001;}
	.logo img:nth-child(1)			{position: absolute; left: 4.6rem; top: -0.2rem; height: 50%; transform-origin: 40px 30px; animation: 3s float1 ease-in-out alternate infinite; transition: top 1s;}
	.logo img:nth-child(2)			{position: absolute; left: 0; bottom: 0; height: 75%;}

.menu								{position: fixed; background-color: #FFFFFF; margin-top: 2rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); z-index: 100; xwidth: 80vw;}
												 
		.menuItem					{display: inline-block; padding: 2rem 1rem 2rem 1rem; font-size: 1rem; transition: padding 1s, color 0.25s;}
		.menuItem.current			{color: #F48D20; xfont-weight: 700; cursor: default; font-family: "Caveat"; font-size: 1.5rem;}
		.menuItem.holder			{font-family: "Caveat"; font-size: 1.5rem;}
		.menuItem:hover				{color: #F48D20;}
	.menu.fixed	.menuItem			{padding: 0.5rem 1rem 0.5rem 1rem;}
	.xmenu.fixed	.logo				{top: 2rem;}
	.xmenu.fixed	.logo img:nth-child(1)	{top: 0.25rem;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							contactblok onderaan iedere pagina
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contact							{position: relative; left: 0; top: 0; width: 100%; background-color: #FF8F71; padding: 4rem 0 4rem 0; color: #FFFFFF; z-index: 1;
									 box-shadow: inset 0 0.5rem 1rem rgba(0, 0, 0, 0.25); overflow: hidden;}
	.contact:after					{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; xz-index: 2;
									 background: url("../IMG/BGdrawingW.png") repeat fixed center / 35rem 35rem; opacity: 0.15;}
	.contact .title					{font-family: "Caveat"; font-size: 2.5rem; margin-bottom: 2rem;}
	.contactInfo					{position: relative; display: inline-block; vertical-align: top; font-size: 1rem; text-align: left; xmargin: 1rem 5vw; z-index: 13 !important; xborder: 1px solid blue;}
	.icon							{display: inline-block; vertical-align: middle; width: 1rem; margin-right: 0.5rem;}
	.contactInfo a					{position: relative; display: block; color: #FFFFFF;}
	.contactInfo a span				{display: inline-block; vertical-align: middle;}
		.contact .logo				{xmargin-top: 8rem; margin: 1rem 15vw 0 5vw;}
		.contact .logo	img:nth-child(1)	{position: absolute; left: 54.5%; top: -92%; height: 6rem; transform-origin: 60% 99%; animation: 4s float1 ease-in-out alternate infinite;}
		.contact .logo	img:nth-child(2)	{position: relative; height: 5rem;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							home
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.inspiration						{height: 80vh; margin-top: 5rem; font-size: 1rem; xz-index: 1; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}
	.inspiration .image				{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: cover; display: none;}
	.inspiration .text				{position: absolute; top: 7rem; right: 0; width: 35%; min-width: 25rem; padding-right: 1rem; text-align: left; z-index: 10; background-color: rgba(255, 255, 255, 0.75);}
	.inspiration span				{display: block;}
	.inspiration h1					{color: #F48D20; font-size: calc(1.5rem + 1vw); font-family: "Caveat"; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);}
	.inspiration span:nth-of-type(1){color: #000000; font-size: calc(1rem + 0.75vw); font-weight: bold; margin: 0.25rem 0 1rem 0; text-shadow: 0 0 0.25rem #FFFFFF;}
	.inspiration span:nth-of-type(2){color: #000000; font-size: calc(1rem + 0.25vw); margin-bottom: 3rem; text-shadow: 0 0 0.25rem #FFFFFF;}
	.inspiration span:nth-of-type(3){color: #000000; font-size: calc(1rem + 1vw); text-shadow: 0 0 0.25rem #FFFFFF;}
		.inspiration .button img:nth-child(1)	{position: absolute; right: 1.3rem; top: -1.25rem; height: 2rem; transform: scaleX(-1);
									 transform-origin: 30px 30px; animation: 4s float2 ease-in-out alternate infinite;}
		.inspiration .button img:nth-child(2)	{position: absolute; right: 0.25rem; top: -0.1rem; xwidth: 0.75rem; height: 0.5rem; transform: scaleX(-1);}
	.inspiration .comeAndSee		{width: 95%; background-color: rgba(255, 255, 255, 0.75); padding: 1rem; text-shadow: 0 0 0.25rem #FFFFFF;}
		.inspiration .comeAndSee h3	{color: #F48D20; font-size: 1.5rem; font-family: "Caveat"; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);}
		
.quickNav							{position: relative; left: 0; top: 0; width: 100%; background-color: #FFC4A9; z-index: 2; padding: 5rem 0 5rem 0;}
	.quickNav:after					{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; xz-index: 2;
									 background: url("../IMG/BGdrawingW.png") repeat fixed center / 35rem 35rem; opacity: 0.15;}
	.quickNav .navBlock				{position: relative; display: inline-block; vertical-align: top; left: 0; width: 20rem; height: 15rem; color: #FFFFFF; text-align: left;
									 font-size: 1rem; z-index: 1; margin: 1rem 0 1rem 0; perspective: 2000px; perspective-origin: center; transition: 0.75s;}
		.cube						{position: relative; left: 0; transform-style: preserve-3d; transition: 0.75s;}
		.cube div:not(.close)		{position: absolute; width: 20rem; height: 15rem; padding: 1rem; transition: 0.75s;}
		.navBlock.spin				{z-index: 10 !important;}
		.navBlock.spin .cube		{transform: rotateY(-90deg); transform-origin: left center;}
		.navBlock.spin:nth-child(1) .cube div:not(.close)	{background-color: #FF5E30 !important;}
		.navBlock.spin:nth-child(2) .cube div:not(.close)	{background-color: #F48D20 !important;}
		.navBlock.spin:nth-child(3) .cube div:not(.close)	{background-color: #99CC00 !important;}
		.quickNav .front			{xtransform: translateZ(1);}
		.quickNav .right			{position: relative; transform: translateZ(-20rem) rotateY(-270deg) translateX(0rem); transform-origin: 20rem center; width: 60vw !important; font-size: 0.85rem;}
			.quickNav .right .content	{position: absolute; left: 0; top: 5%; width: 98% !important; height: 90% !important; overflow-Y: auto; background-color: transparent;}

	.quickNav .navBlock:nth-child(1) .front		{background-color: #FF5E30;}
	.quickNav .navBlock:nth-child(1) .right		{background-color: #AF0E00;}
	.quickNav .navBlock:nth-child(2)			{margin-left: 4vw; margin-right: 4vw;}
	.quickNav .navBlock:nth-child(2) .front		{background-color: #F48D20;}
	.quickNav .navBlock:nth-child(2) .right		{background-color: #A43D00;}
	.quickNav .navBlock:nth-child(3) .front		{background-color: #99CC00;}
	.quickNav .navBlock:nth-child(3) .right		{background-color: #497C00;}
	.quickNav .navBlock h2	{display: block; font-family: "Caveat"; font-weight: bold; calc(1rem + 1.5vw); margin-bottom: 0.5rem; text-align: center;}
	.quickNav .navBlock span		{display: none;}
	.quickNav .navBlock .button		{position: absolute; left: 0; bottom: 1rem; right: 0; margin: auto; width: 10rem; height: 2rem; line-height: 2rem; padding: 0;
									 background-color: #FFFFFF; transition: 0.25s;}
	.quickNav .navBlock:nth-child(1) .button	{color: #FF8F71;}
	.quickNav .navBlock:nth-child(2) .button	{color: #F48D20;}
	.quickNav .navBlock:nth-child(3) .button	{color: #99CC00;}
	.quickNav .navBlock:nth-child(4) .button	{color: #FF5E30;}
	.quickNav .navBlock .button:hover			{color: #000000;}

.block.staff						{padding-top: 3rem; xbackground-color: #FFFFFF; box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2);}
	.staff .title					{display: block; font-size: calc(1rem + 1.5vw); font-family: "Caveat"; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); color: #F48D20;
									 margin-bottom: 2rem;}
	.staff .text					{display: inline-block; font-size: 1rem; margin-bottom: 3rem;}
	.staff .team					{position: relative; display: inline-block; width: 100%; xpadding-top: 10rem;}
	.staff .team.autumn				{xbackground: url("../IMG/BGautumn.jpg") no-repeat center bottom / cover;}
		.staff img					{width: 100%;}
		.staff .head				{position: absolute; width: 9vw; height: 11vw; border: 5px solid #99CC00; border-radius: 50%; z-index: 2; opacity: 0;
									 transition: 0.5s; cursor: pointer; box-sizing: border-box; font-size: 0;}
		.staff .head:nth-of-type(1)	{left: 19.5%; bottom: 31.8vw;}
		.staff .head:nth-of-type(2)	{left: 28.7%; bottom: 32.8vw;}
		.staff .head:nth-of-type(3)	{left: 37.9%; bottom: 32.7vw;}
		.staff .head:nth-of-type(4)	{left: 46.6%; bottom: 30.8vw;}
		.staff .head:nth-of-type(5)	{left: 55.9%; bottom: 30.7vw;}
		.staff .head:nth-of-type(6)	{left: 66.2%; bottom: 37vw;}
		.staff .head:nth-of-type(7)	{left: 74.5%; bottom: 32.3vw;}
		.staff .head:hover			{opacity: 1;}
		.staff .head .label			{position: absolute; left: 50%; top: 101%; width: 8rem; font-size: 1rem;
									 border-radius: 0.5rem; padding: 1.5rem 1.5rem 0.5rem 1.5rem; font-weight: 700; cursor: pointer;
									 background: -webkit-radial-gradient(50% 20%, circle, transparent 2%, #FF5E30 7%);}
		.staff .head .label:after	{content: ""; position: absolute; left: 52%; transform: translateX(-50%); top: -0.3rem; width: 1rem; height: 1rem;
									 background: url("../IMG/string.png") no-repeat center / 100%;}
		.staff .head .label.one		{transform: translateX(-50%) rotate(-8deg);}
		.staff .head .label.two		{transform: translateX(-50%) rotate(2deg);}
		.staff .head .label.three	{transform: translateX(-50%) rotate(-2deg);}
		.staff .head .label.four	{transform: translateX(-50%) rotate(12deg);}
		.staff .head .label.five	{transform: translateX(-50%) rotate(1deg);}
		.staff .head .label.six		{transform: translateX(-50%) rotate(8deg);}
		.staff .head .label.seven	{transform: translateX(-50%) rotate(-2deg);}
	.staff .button					{background-color: #99CC00; color: #FFFFFF; transition: 0.25s;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							zo werken wij
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.activity							{position: relative; display: block;}
	.activity .clock				{position: relative; display: inline-block; vertical-align: middle; width: 2rem; height: 2rem; margin: 0.25rem 0.5rem 0.25rem 0;}
		.activity .clockBase		{position: absolute; left: 0; top: 0; width: 100%; height: 100%;
									 border-radius: 50%; background-image: linear-gradient(to right, transparent 50%, #F48D20 0);}
		.activity .clockMask		{position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; border: 1px solid #CCCCCC; border-radius: 50%;
									 background-image: linear-gradient(to right, transparent 50%, #FFFFFF 0); box-sizing: border-box;}
		.activity .hours1			{position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
									 background-image: -o-linear-gradient(left, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));
									 background-image: linear-gradient(to right, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));}
		.activity .hours1:before	{content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg);
									 transform: rotate(30deg); background-image: -o-linear-gradient(left, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));
									 background-image: linear-gradient(to right, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));}
		.activity .hours1:after		{content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg);
									 transform: rotate(60deg); background-image: -o-linear-gradient(left, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));
									 background-image: linear-gradient(to right, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));}
		.activity .hours2			{position: absolute; left: 0; top: 50%; width: 100%; height: 1px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
									 background-image: -o-linear-gradient(left, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));
									 background-image: linear-gradient(to right, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));}
		.activity .hours2:before	{content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg);
									 transform: rotate(30deg); background-image: -o-linear-gradient(left, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));
									 background-image: linear-gradient(to right, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));}
		.activity .hours2:after		{content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg);
									 transform: rotate(60deg); background-image: -o-linear-gradient(left, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));
									 background-image: linear-gradient(to right, #CCCCCC 5px, transparent 5%, transparent calc(100% - 5px), #CCCCCC calc(100% - 5px));}
		.activity span				{position: relative; left: 2.25rem; top: 0; display: inline-block; vertical-align: middle; width: 8rem; height: 2rem; line-height: 1.75rem;
									 text-align: right; xborder: 1px solid red;}
	.activity p						{display: inline-block; vertical-align: text-top; width: 90%; padding-left: 8rem; xborder: 1px solid blue;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							zo werken wij, ons team, aanmelden, nieuws, vacatures, oudercommissie
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.block.content						{font-size: 1rem; width: 80%; margin: 2rem auto 4rem auto; text-align: left;}
	.block.content.horCenter		{text-align: center;}
	.block.content h1, .block.content h2	{color: #F48D20; font-size: 2.5rem; font-family: "Caveat";}
	.block.content ol				{padding-left: 1.25rem;}
	.block.content .icon			{margin: 1rem 0.5rem 1rem 0;}
	.block.content a				{text-decoration: underline;}
	.block.content a span			{display: inline-block; vertical-align: middle;}
	.block.content.spaceHolder		{margin-top: 9rem;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							ons team
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.team								{}
	.teamMember						{}
		.teamMember.left			{text-align: left;}
		.teamMember.right			{text-align: right;}
		.teamMemberContainer		{display: inline-block; vertical-align: middle;}
		.teamMemberContainer .photoAndName		{display: inline-block; vertical-align: middle; text-align: center; margin-right: 0.5rem;}
		.teamMemberContainer .photoAndName img	{width: 10rem; border-radius: 50%; border: 5px solid #99CC00; border-radius: 50%;}
		.teamMemberContainer .photoAndName .name{font-weight: bold;}
		.teamMemberContainer .text				{display: inline-block; vertical-align: middle; width: 50%; text-align: left;}
		.teamMemberContainer b		{font-family: "Caveat"; color: #F48D20; font-size: 1.5rem; font-weight: normal;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							aanmelden
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mailbox							{position: relative; display: block; left: 0; top: 0; width: 100%; height: 30rem; overflow: hidden;}
	.mailbox.beleid					{background: url("../IMG/wennen.jpg") no-repeat center center / cover;}
	.mailbox.onsTeam				{background: url("../IMG/BGautumn.jpg") no-repeat center bottom / cover;}
	.mailbox.aanmelden				{background: url("../IMG/aanmelden.jpg") no-repeat center center / cover;}
	.mailbox.nieuws					{background: url("../IMG/koe.jpg") no-repeat center top / cover;}
	.mailbox.contactPage			{background: url("../IMG/wennen.jpg") no-repeat center top / cover;}

.table								{display: block; font-size: 0;}
	.table .cell					{display: inline-block; vertical-align: top; width: 10rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 1rem;
									 border: 1px solid #DDDDDD;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							vacatures
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.vacancy							{display: inline-block; xwidth: 60%; margin: 2rem 0 2rem 0; text-align: left;}
	.vacancy img					{float: left; width: 21rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 1); margin: 0 2rem 2rem 2rem;}
	.vacancy label					{display: inline-block; width: 6rem;}
	.vacancy b						{display: block; margin-bottom: 0.25rem; color: #F48D20;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							nieuws
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.newsLetter							{display: inline-block; margin: 2rem 4rem 2rem 0; text-align: center;}
	.newsLetter img					{width: calc(55vw / 6); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 1); transition: 0.25s;}
	.newsLetter:hover img			{transform: scale(1.05);}
	.newsLetter span				{margin-top: 0.25rem;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
							contact
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.block.contactInfo					{margin: 2rem 0 4rem 0; font-size: 1rem; xborder: 1px solid blue; text-align: center; xz-index: 2;}
	.contactBlock					{display: inline-block; vertical-align: top; padding-top: 2rem; margin: 0 4vw 0 4vw; text-align: left; xborder: 1px solid red;}
	.contactBlock.address			{background: url("../IMG/homeB.png") no-repeat top center / 1.5rem auto;}
	.contactBlock.mail				{background: url("../IMG/contactB.png") no-repeat top center / 1.5rem auto;}
	.contactBlock span				{display: inline-block; width: 3.5rem; line-height: 1.5rem;}
	.contactBlock a					{color: #000000;}
	.contactInfo .line				{position: absolute; top: 0; display: inline-block; height: 100%; border-right: 1px solid #DDDDDD;}
	.contactInfo a.center			{display: block; text-align: center; text-decoration: underline;}

.block.contactForm					{font-size: 1rem;}
.contactForm						{position: relative; left: 0; top: 0; width: 100%; padding-bottom: 7rem;}
	.xcontactForm:before			{content: ""; position: absolute; left: 0; top: 0; width: 98%; height: 100%; z-index: -1;}
	.contactForm .generalText		{display: inline-block; xbackground-color: rgba(255, 255, 255, 0.25); margin-bottom: 2rem;}
	.contactForm label				{display: inline-block; width: 6rem; max-width: 99%; line-height: 1.5rem; margin-right: 0.25rem; xbackground-color: rgba(255, 255, 255, 0.5);}
	.contactForm label.right		{text-align: right;}
	.contactForm label.center		{text-align: center;}
	.contactForm input				{display: inline-block; width: 25rem; max-width: 99%; line-height: 1.5rem; xbackground-color: rgba(255, 255, 255, 0.8); border: 1px solid #AAAAAA;
									 margin-bottom: 0.25rem;}
	.contactForm input.hidden		{position: absolute; left: -9999px; top: -9999px;}
	.contactForm textarea			{display: inline-block; width: 40rem; max-width: 99%; height: 10rem; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #AAAAAA;}
	.contactForm .button			{background-color: #F48D20; color: #FFFFFF;}


}



/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								media queries																															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1420px){
}

@media screen and (max-width: 1300px){
}

@media screen and (max-width: 1050px){
.mobile								{position: fixed; right: 1rem; top: 0.5rem; width: 1.5rem; height: 1.75rem; margin: auto; color: #FFFFFF; font-size: 0.8rem; cursor: pointer;
									 z-index: 102; display: block;}
	.xmobile:after					{content: "menu"; margin-left: 1.75rem;}
	.mobile span					{position: absolute; left: 0; width: 100%; height: 0.15rem; background-color: #FFFFFF; xborder: 1px solid rgba(0, 0, 0, 0.5);
									 -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;}
	.mobile span:nth-child(1)		{top: 0%;}
	.mobile span:nth-child(2)		{top: 25%;}
	.mobile span:nth-child(3)		{top: 50%;}
	.mobile div						{display: none; position: absolute; bottom: -5px; width: 100%;}

	.mobile.open span				{box-shadow: none; border: 0;}
	.mobile.open span:nth-child(1)	{top: 25%; transform: translateY(-50%); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg);
									 transform: rotate(135deg);}
	.mobile.open span:nth-child(2)	{opacity: 0;}
	.mobile.open span:nth-child(3)	{top: 25%; transform: translateY(-50%); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg);
									 transform: rotate(-135deg);}

.logo								{top: 1rem;}

.menu								{display: none; xtop: 0rem; padding-bottom: 2rem;}
	.menuItem						{display: block; width: 50%; padding: 0.5rem 0 0.25rem 0; margin: 0 auto 0.5rem auto;}

.topBar								{box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);}
.topBar .location					{display: none;}
.topBar .phone						{display: inline-block; float: none; margin: 0 1rem 0 1rem;}
.topBar .socialMedia				{display: inline-block; float: none; margin: 0 1rem 0 1rem;}

.contact .logo	img:nth-child(1)	{left: 52.25%;}
.contactInfo						{display: block; xwidth: 100%; margin: 1rem 0; xborder: 1px solid blue; text-align: center;}
	.contactInfo .logo				{margin: 8rem 2rem 5rem 0;}

.inspiration						{margin-top: 2rem;}
.inspiration .text					{width: 90%; min-width: auto; padding-right: 1rem; text-align: left; z-index: 10;}
.staff img							{xwidth: 95%;}

.mailbox							{height: 50vh;}

.activity span						{text-align: left;}
.activity p							{display: block; width: 100%; padding-left: 3rem; margin: -0.75rem 0 1rem 0;}

.table .cell						{width: 24.75vw; height: auto; font-size: 0.65rem;}

.newsLetter							{display: inline-block; margin: 1rem 1rem 2rem 1rem; text-align: center;}

.contactForm label.right			{text-align: center;}
}

@media screen and (max-width: 1050px) and (orientation: landscape){
}

@media screen and (max-width: 700px){
.topBar .location					{display: none;}
.topBar .socialMedia				{display: none;}
.block.content						{width: 99%; xmargin: 0; xpadding: 0 1rem 0 0.25rem; xtext-align: center;}
.teamMember							{display: block; margin-bottom: 3rem; xtext-align: center;}
	.teamMember.left				{text-align: center;}
	.teamMember.right				{text-align: center;}
	.teamMemberContainer .photoAndName		{margin: 0 0 0.5rem 0;}
	.teamMemberContainer .text		{display: inline-block; vertical-align: middle; width: 100%; text-align: left;}
}

@media screen and (max-width: 600px){
}

@media screen and (max-width: 400px){
.topBar .phone						{display: none;}
}

@media (hover: none){
}