html, body {
 width: 100%;
 height: 100%;
 margin: auto;
}

body {
 background-color: #dddddd;
 color: #191a1d;
 font-family: Calibri;
 font-size: 14px;
 overflow-x: none;
}

a {
 color: #191a1d;
}

img {
 border: 0;
}

form {
 margin: auto;
}

h1, h2, h3, h4, h5, p {
 margin-top: 0;
}


.red {
 color: #d21922;
}
.zwart {
 color: #191a1d;
}
.grijs {
 color: #666;
}




#container {
 width: 100%;
 height: 100%;
 margin: auto;
}

#header, #content, #footer {
 margin: auto;
 position: relative;
 max-width:100%;
 overflow-x: none;
}



#header, #footer {
 width: 1010px;
}

#content {
 width: 970px;
 padding: 20px;
 background-color: #FFF;
 border-radius: 10px;
 min-height: 300px;
}


#header {
 height: 296px;
 height: 236px;
}

#header #madchen {
 position: absolute;
 right: -10px;
 top: 0;
}

#header h1 {
 display: none;
}

#headertxt {
 position: absolute;
 left: 4px;
 top: 100px;
 font-size: 23px;
 font-weight: bold;
 letter-spacing: -1px;
}

#headertxt .dik {
 font-size: 30px;
 color: #d21922;
}

#headertxt .kosten {
 font-size: 11px;
 font-weight: normal;
}

#footer {
 text-align: center;
 margin-top: 20px;
 margin-bottom: 20px;
}

#content .intro {
 font-weight: bold;
 font-size: 11px;
 color: #666;
}

#content .tagline {
 background-color: #d21922;
 padding: 10px;
 text-align: center;
 color: #FFF;
 border-radius: 10px;
 font-size: 14px;
 font-weight: bold;
}

#content .tagline h3 {
 font-size: 20px;
 margin-bottom: 12px;
}

.clear {
 float: none;
 clear: both;
 display: block;
}

.dames {
 margin-top: 20px;
}

.dames {
 width:680px;
float:left;
}
.dame {
 width:238px;
 height: 693px;
float:left;
margin-top: 20px;
}
.dame img {
margin-top: 20px;
}

.dames ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: block;
 position: relative;
 width: 260px;
 height: 400px;
 background: #CCC;
 margin-right: 10px;
 margin-bottom: 10px;
 float: left;
 border-radius: 10px;
}

.dames ul li {
 display: none;
 position: absolute;
 text-align: left;
 margin-left: 0;
 text-indent: 0;
 list-style: none;
 color: #666;
 width: 240px;
}

.dames ul li.name {
 display:block;
 font-size: 26px;
 font-weight: bold;
 text-align: center;
 top: 4px;
 letter-spacing: -1px;
}

.dames ul li.clientcode {
 display:block;
 font-size: 20px;
 font-weight: bold;
 text-align: center;
 top: 34px;
 letter-spacing: -1px;
}

.dames ul li.pic1 {
 display:block;
left: 10px;
top: 65px;
 height: 200px;
 overflow: hidden;

 background-repeat:no-repeat;
 xbackground-postion: center center;
 xbackground-attachment: fixed; 

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

 border-radius: 10px;

}

.dames ul li.description {
 display:block;
 margin: auto;
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 top: 324px;
 xletter-spacing: -1px;
 background: #FFF;
 border-radius: 10px;
 width: 220px;
 padding: 10px;
 left: 10px;
}

.dames ul li.age {
 display:block;
 top: 274px;
 left: 14px;
}

.dames ul li.cupsize {
 display:block;
 top: 274px;
 left: 80px;
}

.dames ul li.figure {
 display:block;
 top: 294px;
 left: 14px;
}

.dames ul li b {
 color: #000;
}

.dames ul li.phoneStatus {
 display:block;
 top: 14px;
 right: 14px;
 width: 50px;
 font-size: 10px;
 text-align: center;
 padding-top: 4px;
 padding-bottom: 4px;
 color: #FFF;
 border-radius: 10px;
}

.phoneStatus.Online {
 background-color: green;
 font-weight: bold;
}

.phoneStatus.Offline {
 background-color: red;
}


.subtelinfo {
 width:510px;
 margin-left:0;
 margin-right: 0;
 margin-bottom: 10px;
 background: #d21922;
 color: #FFF;
 border-radius: 10px;
 padding: 10px;
 display: block;
 position: relative;
 float:left;
 font-weight: bold;
 font-size: 17px;
 text-align:center;
}

.rbutton {
 background-color: #008000;
 padding: 10px;
 text-align: center;
 color: #FFF;
 border-radius: 10px;
 font-size: 16px;
 font-weight: bold;
 margin-left:-50px;
 margin:bottom: 22px;
 cursor:pointer;
}




 .subtelinfo a {
  color; #FFF;
}



@media only screen and (max-width:1010px) {
 #madchen, .dame { display: none;}
}

@media only screen and (max-width:1023px) {
 #content { padding:0;}
.subtelinfo,
 .dames {
  width:100%;
 }
 .subtelinfo.a2,  .subtelinfo.a4, .subtelinfo.a8, .subtelinfo.a10, .subtelinfo.a14, .subtelinfo.a16, .subtelinfo.a20, .subtelinfo.a22 {
  display: none;
 }
 .subtelinfo {
  padding-left: 0;
  padding-right: 0;
 }
}

@media only screen and (max-width:808px) {
 .dames {
  width: 540px;
  margin:auto;
  margin-top: 10px;
  float:none;
 }
 .dames ul {
  margin-right: 5px;
  margin-left: 5px;
 }
 #logo img {
  max-width: 100%;
 }
 #header {
  height: auto;
  display: block;
 }
 #headertxt {
  position:relative;
  top: auto;
  left: auto;
 }
 #header,#footer {
  max-width: 100%;
 }
}

@media only screen and (max-width:539px) {
 .dames {
  width: 260px;
  margin:auto;
  margin-top: 10px;
  float:none;
 }
 .dames ul {
  margin-right: 0px;
  margin-left: 0px;
 }

}