@font-face {
  font-family: 'Intellect';
  src: url('ufonts.com_themix-_plain.eot'); /* IE9 Compat Modes */
  src: url('ufonts.com_themix-_plain.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ufonts.com_themix-plain.woff') format('woff'), /* Pretty Modern Browsers */
       url('ufonts.com_themix-plain.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'IntellectBold';
	src: url('TheMixBlackPlain.eot'); /* IE9 Compat Modes */
	src: url('TheMixBlackPlain.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('TheMixBlackPlain.woff') format('woff'), /* Pretty Modern Browsers */
		 url('TheMixBlackPlain.ttf')  format('truetype'),
		 url('TheMixBlackPlain.svg') format('svg'); /* Safari, Android, iOS */
}


    body {
		background-color: #570901;
		margin: 20px auto;
		color: white;
		font-family: Intellect, Arial;
		text-align: center;
		font-weight: bold;
		font-size: 24px;
		text-decoration: none!important;
	}

	a { color: white; text-decoration: none;}

	.visitekaartje {
		width:80%;
		margin: 0 auto;
		height: 500px;
		clear: both;
		margin-bottom: 100px;
	}

	img {margin-bottom: 10px; margin-top: 10px; display: inline-block; }

	.front, .back {
		border: 1px solid white;
	}

	.blauw
	{
		background-color: #CAE1Ef;
		height: 340px;
		padding-top: 20px;
	}

	.normal { margin-top: 20px; display:block; }

	p.bruin
	{
		color: #570901;
	}

	span.bruin {
		color: #570901;
		clear: both;

	}

	.wit { color: white; letter-spacing: 0.1em;}
	.upper
	{
		text-transform: uppercase;
		font-weight: 800;

	}

  .mobielspan {
    margin-top:20px;
    display:inline-block;
  }

	.left {width: 60%; float: left; margin-top: 30px; margin-left: 5%;}
	.right {width: 35%; text-align: left; float: left; margin-top: 65px; font-size: 84%;}

	.space { width: 70px; display: inline-block;}
	.large { font-size: 76px; letter-spacing: 0.1em; font-family: IntellectBold, Intellect, Arial; font-weight: normal;}

@media screen and (max-width: 1150px ){
	body { width: 100%; }
	.ios.logo {height: 200px;}
	.logo {  height: 170px; display: block; clear:both;}
	.visitekaartje { width: 90%; height: auto; min-height: 640px; margin-bottom: 50px; overflow:hidden; font-size: 36px;}
	.large { font-family: IntellectBold, Intellect, Arial; font-weight: normal; font-size: 76px; height: 10px; display: block;}
	.ios div {clear: both;}
	.left {width: 100%; float: none; margin: 30px auto; }
	.right {width: 65%;  float: none; text-align: center; margin: 15px auto; font-size: 36px; padding-bottom: 40px;}
	.wit span { clear: both; float: left; text-align: center; width: 100%; display: block; }
  .wit span.mobielspan { padding-bottom: 40px;}
	.normal {font-size: 28px; margin-top: 30px;}
	.space {display: none;}
	.blauw {height: 370px;}
	span.bruin {display: block; clear: both; }
	.second { padding-top: 40px;}
	.last { padding-bottom: 40px;}
}

@media screen and ( min-width: 1250px ){
	.visitekaartje {
		width:60%;
	}
}

@media screen and ( min-width: 1400px ){
	.visitekaartje {
		width:50%;
	}
}

@media screen and ( min-width: 1800px ){
	.visitekaartje {
		width:40%;
	}
}

@media screen and ( max-width: 480px ){
    .wit span {
      margin-top:5px!important;
      margin-bottom:20px;
    }
}