/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*							keyframes																																	    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@keyframes zoomOut			{from {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
							 to {-webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);}}
@-webkit-keyframes zoomOut	{from {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
							 to {-webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);}}

@keyframes rotateEarth		{from {-webkit-transform: translateX(-50%); transform: translateX(-50%);} to {-webkit-transform: translateX(0); transform: translateX(0);}}
@-webkit-keyframes rotateEarth	{from {-webkit-transform: translateX(-50%); transform: translateX(-50%);} to {-webkit-transform: translateX(0); transform: translateX(0);}}

@keyframes spin				{0% {-webkit-transform: rotate(360deg); transform:rotate(360deg);}}
@-webkit-keyframes spin		{0% {-webkit-transform: rotate(360deg);}}

@-webkit-keyframes pulse	{0%, 50% {-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.5); box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.5);}
							 100% {-webkit-box-shadow: 0px 0px 0px 50px rgba(255, 0, 0, 0); box-shadow: 0px 0px 0px 50px rgba(255, 0, 0, 0);}}


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

html						{width: 100%; height: 100%; -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; left: 0; top: 0; width: 100%; height: 100%; text-align: center; font-size: 18px; font-family: Raleway; font-weight: 400; sans-serif; cursor: default;
							 color: #000000; background-color: #FFFFFF;}

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

input, textarea				{font-family: inherit; font-size: inherit; text-align: center;}

h1							{font-weight: normal; font-size: 2rem; display: inline; vertical-align: middle; margin-bottom: 2rem;}
h2							{font-weight: normal; font-size: 2rem; margin-bottom: 2rem;}
h3							{font-weight: normal; font-size: 1.25rem;}
h4							{font-weight: normal; font-size: 7rem; display: inline;}
h5							{font-weight: normal; font-size: 4.5rem; display: inline;}

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

.block						{position: relative; left: 0; top: 0; width: 100vw; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF; padding: 5rem 0 12rem 0; z-index: 1;}
.title						{position: relative; display: inline-block; font-size: 2rem; font-weight: 700; color: #000000; margin-bottom: 4rem;}
	.title:after			{content: ""; position: absolute; left: 0; bottom: -1rem; right: 0; margin: auto; width: 60%; border-top: 8px solid #078AB3;}

.mainIMG					{width: 100%; padding: 12rem 0 2rem;}

.ED							{position: relative; padding: 0; overflow: hidden; background-color: #000000;}
	.ED a					{position: relative; display: block; width: 100%; height: 2.5rem; line-height: 2.5rem; color: #FFFFFF; text-shadow: -1px -1px 2px #000000, 1px 1px 2px #000000;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								top & menu																																    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.photos						{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
	.photos.fixed			{position: fixed;}
	.photo					{position: absolute; left: -5%; top: -5%; width: 110%; height: 110%; z-index: -2; display: none; -webkit-animation: zoomOut 100s linear infinite; animation: zoomOut 100s linear infinite;}
	.photo:first-child		{background: url("../IMG/photos/1.jpg") no-repeat center / cover; z-index: -1; display: block;}

.top						{position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background-color: #FFFFFF; border-bottom: 8px solid #078AB3;
							 -webkit-box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5); box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5);}
	.logo					{display: inline-block; vertical-align: middle; height: 10rem; text-align: left; margin: 0 2.5vw;}
	.xlogo span				{display: block; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}
	.xlogo span:first-of-type{font-size: 2rem; font-weight: 700; color: #000000;}
	.xlogo span:last-of-type	{font-size: 1.18rem; color: #888888; line-height: 1rem;}
	.xlogo:hover span:last-of-type	{color: #078AB3;}
	.menuItems				{display: inline-block; margin: 0 2.5vw;}
	.menuItem				{position: relative; display: inline-block; vertical-align: middle; padding: 1rem; margin: 0 1rem; cursor: pointer;}
		.menuItem:after		{content: ""; position: absolute; left: 0; bottom: 0.5rem; right: 0; margin: auto; width: 0; border-top: 2px solid #078AB3; -webkit-transition: 0.5s; -o-transition: 0.5s;
							 transition: 0.5s;}
		.menuItem:hover::after, .menuItem.current:after	{width: 100%;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								our company																																    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.company					{margin-top: 85vh; border-top: 8px solid #078AB3; -webkit-box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5); box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5); background-color: #EEEEEE;}
	.company span			{display: inline-block; width: 60%; padding-bottom: 10rem;}
	.company a:hover		{-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05); -webkit-box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.25); box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.25);
							 background-color: #FFFFFF;}
		.brands				{position: relative; display: inline-block; left: 0; top: 0; width: 100%;}
		.company a			{position: relative; display: inline-block; width: 40%; border: 1px solid #AAAAAA; background-color: rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5);
							 box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5); margin: 2vw 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-shadow: -1px -1px 2px #FFFFFF, 1px 1px 2px #FFFFFF;}
		.company a:nth-of-type(odd)	{margin-right: 3vw;}
		.company a:nth-of-type(even){margin-left: 3vw;}
		.company a:nth-of-type(3)	{margin-right: 8vw;}
		.company a:nth-of-type(4)	{margin-left: 8vw;}
		.company a:nth-of-type(5)	{margin-right: 8vw;}
		.company a:nth-of-type(6)	{margin-left: 8vw;}
		.company img		{display: inline-block; vertical-align: middle; width: 40%; margin: 0 2vw 0 1vw;}
		.company	ul		{display: inline-block; vertical-align: middle; width: 50%; text-align: left; text-transform: uppercase; font-weight: 400;}

	.earth					{position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(20deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(20deg);
							 transform: translateX(-50%) translateY(-50%) rotate(20deg); width: 55rem; max-width: 70vw; height: 55rem; max-height: 70vw; border-radius: 50%; overflow: hidden;}
		.earth .map			{position: absolute; left: 0; top: 0; width: 400%; height: 100%; background: url("../IMG/earth.jpg") repeat-X center / 50% 100%;
							 -webkit-animation: rotateEarth 150s linear infinite; animation: rotateEarth 150s linear infinite;}
		.earth .clouds		{position: absolute; left: 0; top: 0; width: 400%; height: 100%; background: url("../IMG/clouds.png") repeat-X center / 50% 100%;
							 -webkit-animation: rotateEarth 120s linear infinite; animation: rotateEarth 120s linear infinite;}
		.earth .hurricane	{position: absolute; left: 30%; top: 30%; width: 2%; -webkit-animation: spin 25s linear infinite; animation: spin 25s linear infinite;}
		.earth .hurricaneBig1	{position: absolute; left: 14%; top: 45%; width: 4%; -webkit-animation: spin 25s linear infinite; animation: spin 25s linear infinite;}
		.earth .hurricaneBig2	{position: absolute; left: 64%; top: 45%; width: 4%; -webkit-animation: spin 25s linear infinite; animation: spin 25s linear infinite;}
		.earth .edge		{position: absolute; left: -0.2%; top: -0.2%; width: 100.5%; height: 100.5%; border-radius: 50%; -webkit-box-shadow: inset 0 0 3vw #EEEEEE, inset 0 0 1vw #EEEEEE, inset 0 0 0.5vw #EEEEEE;
							 box-shadow: inset 0 0 3vw #EEEEEE, inset 0 0 1vw #EEEEEE, inset 0 0 0.5vw #EEEEEE;}
		.cities				{position: absolute; left: 0; top: 0; width: 400%; height: 100%; -webkit-animation: rotateEarth 150s linear infinite; animation: rotateEarth 150s linear infinite; z-index: 1;}
			.city			{position: absolute; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%; -webkit-animation: pulse 3s ease-in-out infinite; animation: pulse 3s ease-in-out infinite; cursor: pointer;
							 border: 1px solid rgba(0, 0, 0, 0.5);}
			.city:after		{content: attr(data-city); position: absolute; left: -1rem; top: 1.5rem; font-size: 0.8rem; color: #FFFFFF; background-color: #000000; padding: 0.1rem 0.5rem;
							 opacity: 0; visibility: hidden; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg);
							 z-index: 1;}
			.city:hover::after	{opacity: 1; visibility: visible;}
			.Götenborg		{left: 49.55%; top: 17%; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
			.Hamburg		{left: 49.2%; top: 20%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
			.Hannover		{left: 49.15%; top: 21%; -webkit-animation-delay: 0.7s; animation-delay: 0.7s;}
			.Kopenhagen		{left: 49.6%; top: 19%; -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
			.Limassol1		{left: 2.5%; top: 31%; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
			.Limassol2		{left: 52.5%; top: 31%; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
			.Rotterdam		{left: 48.7%; top: 21.5%; width: 3px; height: 3px; background-color: #FFFFFF; border: 3px solid red;}
			.Rotterdam:before	{content: ""; position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.5);}
			.Philadelphia	{left: 37.5%; top: 27%; -webkit-animation-delay: 1s; animation-delay: 1s;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								video + slogan																															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.slogan						{padding: 0; overflow: hidden; background-color: #000000;}
	.slogan span			{position: relative; display: block; padding: 4rem 8rem; font-size: 2rem; font-weight: 700; color: #FFFFFF; text-shadow: -1px -1px 2px #000000, 1px 1px 2px #000000;}
.waterBG					{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../IMG/water.gif") no-repeat center / 100vw 100vh;
							 filter: blur(7px); -webkit-filter: blur(7px); -moz-filter: blur(7px); -o-filter: blur(7px); -ms-filter: blur(7px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="7");}
	.waterBG.fixed			{background-attachment: fixed;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								contact																																	    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contact					{padding-bottom: 0;}
	.contactBlock			{position: relative; left: 0; top: 0; width: 100%; padding: 1rem 0 3rem 0;}
	.item					{position: relative; display: inline-block; vertical-align: top; color: #078AB3; text-align: left; margin: 0 4vw 4vw 4vw;}
	.item span, .item a		{position: relative; display: block; padding-left: 1.5rem; margin-top: 0.25rem; color: #000000;}
	.item a label			{width: 11rem;}

	.address span:before	{content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: url("../IMG/home.png") no-repeat left top / auto 1rem;}
	.phone	a:before		{content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: url("../IMG/phone.png") no-repeat left 0.1rem / auto 1rem;}
	.email	a:before		{content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: url("../IMG/mail.png") no-repeat left 0.1rem / auto 1rem;}
	.Facebook a:before		{content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: url("../IMG/Facebook.png") no-repeat left 0.1rem / auto 1rem;}

	input.hidden			{position: absolute; left: -99999px;}
	.left					{display: inline-block; width: 25%; vertical-align: top; margin-right: 1vw;}
		label				{display: inline-block; width: 6rem;}
		input[type="text"], input[type="email"]		{display: inline-block; width: 100%; border: 1px solid #BBBBBB; margin-bottom: 1rem;}
		.button				{display: inline-block; margin-top: 1rem; padding: 0.5rem 2rem; background-color: #AAAAAA; cursor: pointer; border-radius: 0.5rem; -webkit-box-shadow: 0 0 0.5vw rgba(0, 0, 0, 1);
							 box-shadow: 0 0 0.5vw rgba(0, 0, 0, 1); -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;}
		.button:active		{-webkit-transform: scale(0.99); -ms-transform: scale(0.99); transform: scale(0.99); -webkit-box-shadow: none; box-shadow: none;}
		.thankYouMSG		{display: none; margin-top: 1rem; color: #FF0000;}
	.right					{display: inline-block; width: 40%; vertical-align: top; margin-left: 1vw;}
		textarea			{display: inline-block; width: 100%; height: 20rem; border: 1px solid #BBBBBB; margin-bottom: 4rem;}
}