* { margin: 0; padding: 0; }

.ds38
{
  position: absolute;
  top: 10px;
  right: 10px;
}

.titel
{
  text-align: center;
  position: absolute;
  top: 10px;
  font-weight: normal;
  font-size: 2.9em;
  line-height: 2.0em;
  color: #545454;
  letter-spacing: -0.04em;
}

.rv
{
  position: absolute;
  top: 74px;
  left: 23%;
  font-size: 1.9em;
}

body { background: #ffffff; font-size: 62.5%; font-family: Tahoma, Arial, sans-serif; color: #333; padding-bottom: 25px; }

img { border:0; }

p { font-size: 1.2em; line-height: 1.3em; margin-bottom: 10px; }

h1 { font-weight: normal; font-size: 1.9em; line-height: 2.0em; color: #545454; letter-spacing: -0.04em; }
h2 { font-weight: normal; font-size: 2.3em; line-height: 2.0em; color: #545454; letter-spacing: -0.04em; text-align: right; }

/** containers **/
#wrap { width: 800px; margin: 0 auto; background: #d7dfe0; border-radius: 7px; margin-top: 55px; }
#wrap header { border-bottom: 1px solid #b6bdbe; margin: 15px 22px; margin-bottom: 35px; padding-top: 20px; position: relative;  }

#wrap footer { border-top: 1px solid #b6bdbe; padding-bottom: 40px; margin: 15px 22px;  }

#wrap header .list-style-buttons { position: absolute; right: 0; }

/** list view **/
ul.list { list-style: none; width: 100%; }
ul.list li { display: block; background: #c9d0d1; padding: 10px 15px; }

ul.list li.alt { background: #d7dfe0; }

ul.list li section.left { display: block; float: left; width: 350px; position: relative; padding-left: 20px; }
ul.list li section.right { display: block; float: right; margin-right: 10px; width: 250px; text-align: right; }

ul.list li section.left img.thumb { float: left; margin-right: 10px; }
ul.list li section.left img.featured-banner { position: absolute; left: -18px; top: 35px; }

ul.list li section.left h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; text-transform: uppercase; color: #707375; font-size: 1.4em; line-height: 1.6em; }
ul.list li section.left span.meta { color: #93989b; font-weight: normal; font-size: 1.1em; }


ul.list li section.right span.price { font-weight: bold; display: block; margin-bottom: 15px; color: #ad3939; font-size: 1.6em; text-align: right; }

ul.list li section.right a.firstbtn { margin-right: 7px; }

/** grid view **/
ul.grid { list-style: none; margin: 0 auto; padding-left: 25px; }
ul.grid li { position: relative; display: block; float: left; width: 220px; height: 200px; border: 0; padding: 5px 22px; margin-bottom: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
ul.grid li.noborder { border: 0; }
ul.grid li.border { border-right: 3px solid #b6bdbe; }

ul.grid li section.left { position: relative; }
ul.grid li section.right { /* nothing */ }

ul.grid li section.left img.featured-banner { position: absolute; top: 0; }

ul.grid li section.left h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; text-transform: uppercase; color: #707375; font-size: 1.4em; line-height: 1.5em; }
ul.grid li section.left span.meta { display: block; color: #93989b; font-weight: normal; font-size: 1.1em; margin-bottom: 7px; }

ul.grid li section.right span.price { font-weight: bold; display: block; margin-bottom: 5px; color: #ad3939; font-size: 1.75em; }


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }



/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 430px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}