/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
								animaties
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@-webkit-keyframes zoomIn				{from {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
										 to {-webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2);}}

@keyframes zoomIn						{from {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
										 to {-webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2);}}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								algemeen voor hele site													    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
*										{margin: 0px; padding: 0px; border: 0px; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#mobile									{display: none;}

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

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

input, textarea							{font-family: inherit; font-size: inherit; color: #000000;}
.hidden									{display: none;}

h1, h2, .title							{display: inline-block; font-weight: normal; font-size: 2rem; vertical-align: middle; text-align: left; margin-bottom: 2rem;}
h1 u, h2 u, .title u					{text-decoration: none; border-bottom: 3px solid ;}

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

.ED										{position: relative; width: 100%; height: 2rem; line-height: 2rem; color: #000000; font-size: 0.8rem; background-color: #AAAAAA;}
	.ED a								{color: #000000;}

.block									{position: relative; left: 0; top: 0; width: 100%; padding: 4rem 3rem 4rem 3rem; text-align: center; background-color: #FFFFFF; font-size: 1rem;}

.button									{background-color: #8BB953; color: #000000; display: inline-block; vertical-align: middle; padding: 0.25rem 2rem 0.25rem 2rem;
										 text-transform: uppercase; xline-height: 1.1rem; xmargin: 1rem 2vw 0 2vw; text-shadow: none; transition: 0.35s; cursor: pointer; font-family: Oswald;
										 outline: 1px solid #8BB953; outline-offset: 1px;}
	.button:hover						{background-color: #F58220; outline-color: black;}

.title									{position: relative; display: inline-block; width: 100%; text-align: center; font-family: Oswald; text-transform: uppercase; color: #000000; padding-bottom: 2rem; z-index: 1;}
	.title:after						{content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 15rem; height: 0.35rem; background-color: #8BB953;}

.wrapper								{position: relative; display: inline-block; width: 1200px; xline-height: 1.5rem; xtext-align: left; font-size: 1rem;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								top & menu															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.menu									{opacity: 0; position: absolute; left: 0; top: auto; bottom: 5%; width: 100%; height: 5rem; line-height: 5rem; background-color: #FFFFFF; z-index: 10; text-transform: uppercase;
										 font-family: Oswald; xfont-size: 1.1; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); font-size: 0;}
	.menu.fixed							{position: fixed; top: 0; bottom: auto; xheight: 5rem;}
	.menu.fixed .logoHor				{opacity: 1;}
	.menu:before						{content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 1px; background-color: #FFFFFF;}
	.menu:after							{content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-color: #FFFFFF;}
	.menu span							{display: inline-block; vertical-align: middle; padding: 0 1rem; transition: 0.35s; font-size: 1rem; cursor: pointer;}
		.menu span:hover				{transform: scale(1.1);}
	.dot								{display: inline-block; vertical-align: middle; xborder-radius: 50%; background-color: #F58220; width: 8px; height: 8px;}
	.logo								{position: absolute; left: 0; top: 50%; transform: translateY(-50%); right: 0; width: 50%; margin: auto; z-index: 10;}
		.logo.notFixed					{position: absolute;}
	.logoHor							{opacity: 0; position: absolute; left: 2rem; top: 0; bottom: 0; margin: auto; width: 18vw; transition: 0.5s;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								home																    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.block.inspiration						{height: 100vh;}
	.inspiration .photo					{display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: no-repeat center / cover;
										 -webkit-animation: zoomIn 100s linear infinite; animation: zoomIn 100s linear infinite;}


.block.intro							{background-color: #FAFAFA;}
	.quickNav							{position: relative; display: inline-block; width: 25%; margin: 3rem 2rem 0 2rem; cursor: pointer; overflow: hidden; outline: 1px solid #BBBBBB; outline-offset: 2px; font-size: 0;}
		.quickNav img					{width: 100%; transition: 1s;}
		.quickNav span					{position: absolute; left: 10%; top: 50%; width: 80%; background: rgba(255, 255, 255, 0.85); padding: 1rem 0 1rem 0; font-family: Oswald; text-transform: uppercase; font-size: 1.25rem;
										 outline: 1px solid rgba(255, 255, 255, 0.85); outline-offset: 1px; transition: 1s;}
		.quickNav:hover img				{transform: scale(1.1);}
		.quickNav:hover span			{background-color: #FFFFFF; outline-color: #000000; font-size: 1rem;}

.block.container						{xpadding: 0; text-align: left; overflow: hidden;}
	.block.container .viewarea			{position: relative; left: 0; top: 0; width: 300vw; transition: 0.5s;}
	.block.container .area				{display: inline-block; vertical-align: top; width: 100vw; text-align: center;}

.block.slogan							{background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; font-family: Oswald; font-size: 2rem; letter-spacing: 0.1rem;}

.block.aboutUs							{background-color: #FFFFFF;}
	.block.aboutUs .wrapper				{z-index: 0;}
	.block.aboutUs .wrapper:after		{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../IMG/logoG.png") no-repeat right center / auto 90%; z-index: -1;}

.block.contact							{background-color: #F0F0F0; color: #0054A6;}
	.contact .dot						{margin: 0 0.5rem 0 0.5rem;}
	.contact img						{vertical-align: middle; width: 20rem;}
	.contact span						{vertical-align: middle;}
	.contact .socialMedia				{}
		.contact .socialMedia div		{position: relative; display: inline-block; width: 4rem; vertical-align: middle;}
		.contact .socialMedia div:hover img	{transform: scale(1.1);}
		.contact .socialMedia div:hover span	{color: #000000; bottom: -1.5rem;}
		.contact .socialMedia img		{width: 3rem; transition: 0.5s;}
		.contact .socialMedia span		{position: absolute; left: 0; bottom: 0; right: 0; margin: auto; font-size: 0.9rem; font-family: Oswald; color: transparent; transition: 0.5s;}
		
	.contact.form						{margin-top: 2rem;}
	.contact.form label					{display: inline-block; width: 10rem; text-align: right; margin: 0 0.25rem 0.1rem 0; xborder: 1px solid red;}
	.contact.form input					{display: inline-block; width: 35rem; xmargin-right: 10rem;}
	.xcontact.form input:nth-of-type(2)	{margin-right: 10rem;}
	.contact.form textarea				{display: inline-block; vertical-align: top; width: 35rem; height: 10rem; xmargin-right: 10rem;}
	.contact.form .thankYou				{display: none; color: #FF0000; padding-top: 1rem;}

	.contact .socialMedia .button		{margin-left: 2rem;}



/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								media queries														    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px){
.block									{padding: 4rem 0;}
.wrapper								{width: 100%;}
.logo									{width: 90%;}
.menu									{height: 5rem; line-height: 2.5rem;}
	.dot:nth-of-type(2)					{display: none;}
	.quickNav							{position: relative; display: inline-block; width: 80%; margin: 3rem 2rem 0 2rem; cursor: pointer; overflow: hidden; outline: 1px solid #BBBBBB; outline-offset: 2px; font-size: 0;}
.contact.form label						{width: 100vw; margin: 0; text-align: center;}
.contact.form input						{width: 95%;}
.contact.form textarea					{width: 95%;}
}