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

@-webkit-keyframes stayvisible	{from {visibility: visible;} to {visibility: visible;}}
@-moz-keyframes stayvisible		{from {visibility: visible;} to {visibility: visible;}}
@-ms-keyframes donothing		{0% {} 100% {}}
@-o-keyframes stayvisible		{from {visibility: visible;} to {visibility: visible;}}
@keyframes stayvisible			{from {visibility: visible;} to {visibility: visible;}}

@media screen and (min-width: 0){
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								algemeen voor hele site													    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
*					{margin: 0px; padding: 0px; border: 0px; 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, sans-serif; cursor: default; color: #000000;
					 background-color: #FFFFFF;}

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

input					{font-family: inherit; font-size: inherit;}

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;}

.ED					{position: relative; display: block; left: 0; top: 0; width: 100%; height: 2.5rem; line-height: 2.5rem; background-color: #000000; color: #FFFFFF; font-size: 0.8rem; z-index: 1;}

.xtitle span				{position: relative; display: inline-block; vertical-align: middle; left: 0; top: 0; line-height: 1rem; margin: -0.4rem -0.0rem 0 0; color: white; perspective: 15rem;}
	.xtitle span .swing	{position: absolute; left: -4.65rem; top: 0.1rem; width: 10rem; animation: swinging 3s ease-in-out infinite; transform-origin: center top;}
	.xtitle span .swing2	{position: absolute; left: -4.65rem; top: 0.1rem; width: 10rem; animation: swinging2 8s ease-in-out infinite; transform-origin: center top; transform-style: preserve-3d;}

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

.top					{position: fixed; left: 0; top: 70vh; width: 100%; padding: 1rem 0; z-index: 10; background-color: #FFFFFF; box-shadow: 0 0 2vw rgba(0, 0, 0, 1); opacity: 0; font-size: 0;}


	.logoLeft, .logoRight	{position: relative; display: inline-block; height: 7rem;}
	.sheep				{position: relative; display: inline-block; transition: 0.6s; transform-style: preserve-3d; height: 7rem; margin: 0 1rem 1rem 1rem; xmargin-bottom: 1rem;}
		.flip			{transform: rotateY(180deg);}
		.sheep img:nth-child(1)	{position: relative; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: #FFFFFF;}
		.sheep img:nth-child(2)	{position: absolute; height: 106%; left: 0; top: -3%; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
						 box-shadow: -0.05em 0.1em 0.2em rgba(0, 0, 0, 0.25); border-radius: 50%;}

	.Fashion			{position: absolute; right: 100%; height: 1rem;}
	.Group				{position: absolute; left: 100%; height: 1rem;}







	.xlogoLeft, .logoRight	{position: relative; display: inline-block; height: 7rem;}

	.xsheep									{position: relative; display: inline-block; height: 7rem; margin: 0 1rem 1rem 1rem;
										 -webkit-perspective: 1000px; -moz-perspective: 1000px;	-ms-perspective: 1000px; -o-perspective: 1000px;	perspective: 1000px;}
		.xsheep .content						{position: relative;	width: 100%; height: 100%;
										 -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out;
										 -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d;
										 transform-style: preserve-3d;
										 -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible;
										backface-visibility: visible;}
		.xsheep.flip .content						{transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg);}
		.xsheep img							{backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: visible; -o-backface-visibility: hidden;}
		.xsheep img:nth-child(1)					{position: relative; height: 100%;}
		.xsheep img:nth-child(2)					{position: absolute; height: 106%; left: 0; top: -3%;}
		.xsheep img:nth-child(1), .sheep.flip img:nth-child(1)	{transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);}
		.xsheep img:nth-child(2), .sheep.flip img:nth-child(2)	{transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg);}
		.xsheep img:nth-child(1), .sheep.flip img:nth-child(2)	{visibility: visible;
										 animation: stayvisible 0.5s both; -webkit-animation: stayvisible 0.5s both; -moz-animation: stayvisible 0.5s both; -ms-animation: donothing 0.5s;
										 -ms-transition: visibility 0s linear 0.17s; -o-animation: stayvisible 0.5s both;}
		.xsheep.flip img:nth-child(1), .sheep img:nth-child(2)	{visibility: hidden;
										 animation: stayvisible 0.5s both; -webkit-animation: stayvisible 0.5s both; -moz-animation: stayvisible 0.5s both; -ms-animation: donothing 0.5s;
										 -ms-transition: visibility 0s linear 0.17s; -o-animation: stayvisible 0.5s both;}

	.xlogoBig			{width: 25rem;}

	.xsheep				{position: relative; display: inline-block; height: 7rem; margin: 0 1rem 1rem 1rem; -webkit-transition: 0.6s; -moz-transition: 0.6s; -ms-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s;
					 -webit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}

		.xflip			{-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}
		.xsheep img:nth-child(1)	{position: relative; height: 100%; background-color: #FFFFFF; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
						 -o-backface-visibility: hidden; backface-visibility: hidden; }
		.xsheep img:nth-child(2)	{position: absolute; height: 106%; left: 0; top: -3%; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg);
						 transform: rotateY(180deg); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; 
						 -webkit-box-shadow: -0.05em 0.1em 0.2em rgba(0, 0, 0, 0.25); -moz-box-shadow: -0.05em 0.1em 0.2em rgba(0, 0, 0, 0.25); -ms-box-shadow: -0.05em 0.1em 0.2em rgba(0, 0, 0, 0.25); 
						 -o-box-shadow: -0.05em 0.1em 0.2em rgba(0, 0, 0, 0.25); box-shadow: -0.05em 0.1em 0.2em rgba(0, 0, 0, 0.25); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%;
						 -o-border-radius: 50%; border-radius: 50%;}

	.xFashion			{position: absolute; right: 100%; height: 1rem;}
	.xGroup				{position: absolute; left: 100%; height: 1rem;}

	.top:before 			{content: ""; position: absolute; left: 0; top: -3px; width: 100%; border-top: 1px solid #FFFFFF;}
	.top:after			{content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; border-bottom: 1px solid #FFFFFF;}

.block					{position: relative; left: 0; top: 0; width: 100%; background-color: #FFFFFF; z-index: 1;}

.ons-bedrijf				{margin-top: 100vh; padding-bottom: 5vw;}
	.ons-bedrijf:before 		{content: ""; position: absolute; left: 0; top: -3px; width: 100%; border-top: 1px solid #FFFFFF;}
	.ons-bedrijf .text		{display: inline-block; width: 80%;}

.title					{position: relative; display: inline-block; padding: 0.2rem 5vw 0.2rem 5vw; margin: 4rem 0 2rem 0; font-size: 1.25rem; text-transform: uppercase; font-weight: bold; color: #24538D;
					 border-top: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-family: Oswald;}
	.title img			{position: relative; display: inline-block; height: 2rem; vertical-align: middle; margin: 0 -0.7rem 0rem 0;}
	.title span			{display: inline-block; letter-spacing: 0.1rem;}
	
.onze-merken				{padding-bottom: 5vw; overflow: hidden;}
	.brandsContainer		{position: relative; left: 0; top: 0; width: 1000vw; text-align: left;}
		.brand			{display: inline-block; vertical-align: middle; width: 10rem; padding: 0 4rem 0 4rem;}
		.brand img		{width: 100%;}

.contact				{}
	.contact a			{color: #000000;}
	.contactBlock			{position: relative; left: 0; top: 0; width: 100%; padding: 1rem 0 3rem 0;}
	.HQ				{display: inline-block; vertical-align: bottom; width: 15rem; margin-right: 1vw; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.75);}
	.item				{position: relative; display: inline-block; color: #24538D; text-align: left; vertical-align: bottom; margin-right: 4vw;}
	.item span, .item a		{position: relative; display: block; padding-left: 1.5rem; margin-top: 0.25rem; color: #000000;}

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

	#GoogleMaps			{position: relative; left: 0; top: 0; width: 100%; height: 30vw;}
	#GoogleMaps:before		{content: ""; position: absolute; left: 0; top: 1px; width: 100%; border-top: 1px solid #FFFFFF; z-index: 1;}
	#GoogleMaps:after		{content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; border-top: 1px solid #FFFFFF;}
}










/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								phone portrait														    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 668px) and (orientation: portrait){
.top					{position: absolute; padding: 1rem 0 1.5rem 0;}
	.logoLeft, .logoRight	{height: 3rem;}
	.sheep				{height: 3rem; margin: 0 0.5rem 0.5rem 0.5rem}
	.Fashion			{height: 0.5rem;}
	.Group				{height: 0.5rem;}

.photo					{left: -10%; top: -10%; width: 120%; height: 120%; -webkit-animation-duration: 50s; -moz-animation-duration: 50s; -ms-animation-duration: 50s; -o-animation-duration: 50s; animation-duration: 50s;}

.ons-bedrijf .text			{width: 95%;}

	.HQ				{position: relative; width: 85vw; margin: 0 0 2rem 0;}
	.item				{width: 55%; margin: 0 0 1.5rem 0; text-align: center;}
	.item span, .item a		{padding-left: 0;}

	#GoogleMaps			{height: 50vh;}
}











/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								phone landscape														    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 668px) and (orientation: landscape){
.top					{position: absolute; padding: 1rem 0 1.5rem 0;}
	.logoLeft, .logoRight	{height: 3rem;}
	.sheep				{height: 3rem; margin: 0 0.5rem 0.5rem 0.5rem}
	.Fashion			{height: 0.5rem;}
	.Group				{height: 0.5rem;}

.photo					{left: -10%; top: -10%; width: 120%; height: 120%; -webkit-animation-duration: 50s; -moz-animation-duration: 50s; -ms-animation-duration: 50s; -o-animation-duration: 50s; animation-duration: 50s;}

.ons-bedrijf .text			{width: 95%;}

	.HQ				{width: 50vw; margin: 0 5rem 1.5rem 5rem;}
	.item				{vertical-align: top; margin: 0 2rem 2rem 2rem;}
	#GoogleMaps			{height: 75vh;}
}










/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								tablet portrait														    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 669px) and (max-width: 1200px) and (orientation: portrait){
.top					{position: absolute; padding: 2rem 0 2.5rem 0;}
	.logoLeft, .logoRight	{height: 5rem;}
	.sheep				{height: 5rem; margin: 0 0.5rem 0.5rem 0.5rem}
	.Fashion			{height: 0.75rem;}
	.Group				{height: 0.75rem;}

.photo					{left: -10%; top: -10%; width: 120%; height: 120%; -webkit-animation-duration: 50s; -moz-animation-duration: 50s; -ms-animation-duration: 50s; -o-animation-duration: 50s; animation-duration: 50s;}

	.HQ				{width: 50vw; margin: 0 8rem 1.5rem 8rem;}

	#GoogleMaps			{height: 50vh;}
}










/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								tablet landscape														    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 669px) and (max-width: 1200px) and (orientation: landscape){
.top					{position: absolute; padding: 2rem 0 2.5rem 0;}
	.logoLeft, .logoRight	{height: 5rem;}
	.sheep				{height: 5rem; margin: 0 0.5rem 0.5rem 0.5rem}
	.Fashion			{height: 0.75rem;}
	.Group				{height: 0.75rem;}

.photo					{left: -10%; top: -10%; width: 120%; height: 120%; -webkit-animation-duration: 50s; -moz-animation-duration: 50s; -ms-animation-duration: 50s; -o-animation-duration: 50s; animation-duration: 50s;}

	#GoogleMaps			{height: 75vh;}
}