@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-Screen.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-Screen.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-Light.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-Light.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-LightIta.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-LightIta.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-Regular.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-RegularIta.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-RegularIta.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-Bold.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'PxGrotesk';
  src: url('/fonts/PxGrotesk/PxGrotesk-BoldIta.woff') format('woff'),
       url('/fonts/PxGrotesk/PxGrotesk-BoldIta.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

body {
  font-family:"PxGrotesk", "Helvetica", "Arial", sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
}

.title-element p {
  font-size:40px; padding:0; margin:0 0 0 0px; text-align:center;
  }

.listing-image-wrap {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1); margin: 1rem;
  }
  
.listing-image-wrap:hover {
  box-shadow: 0 10px 20px rgba(255, 0, 0, 1), 0 10px 10px rgba(0,0,0,0.22);
}
  
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; 
      background: url('https://dl.dropboxusercontent.com/u/812784/ftan%402x.png') no-repeat center center fixed !important;
      font-weight: 200 !important;
      font-style: normal !important;
}
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #000; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }