.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: #ddd; 

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



  .ratesTable{ font-family: 'Open Sans', sans-serif; color:#242424; font-size:14px; margin-top:30px;}

.ratesTable h3{ font-size:24px; color: #333; line-height: 35px; margin-bottom: 15px; text-transform: uppercase; color:#242424;}



.ratesTable span{ display:block; line-height:28px; font-weight:bold;}

/* Responsive CSS for table */

/* Generic Styling, for Desktops/Laptops */

.responsiveTab { width: 100%; border-collapse: collapse;}

.responsiveTab span{ display:block; font-weight:600;}

.responsiveTab strong{ display:block; padding:10px 5px;}



/* Zebra striping */

.responsiveTab tr:nth-of-type(odd) { background: #e6f8ff; }

.responsiveTab th { background: #00aeef; color: white; font-weight: bold; }

.responsiveTab td, th { padding: 6px; border: 1px solid #00aeef; text-align: left; }



/*  Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */

@media (max-width:759px){
.responsiveTab td..ratelist-3{display:none;}	
}
@media  only screen and (max-width: 760px),

(min-device-width: 768px) and (max-device-width: 1024px)  {
.responsiveTab td..ratelist-2{display:block;}
    

/* Force table to not be like tables anymore */

.responsiveTab, thead, tbody, th, td, tr { display: block; }

        

/* Hide table headers (but not display: none;, for accessibility) */

.responsiveTab thead tr {  position: absolute; top: -9999px; left: -9999px;}

.responsiveTab tr { border: 1px solid #00aeef; }

.responsiveTab td { 

/* Behave  like a "row" */

border: none; border-bottom: 1px solid #00aeef; position: relative; padding-left: 50%; }

        

.responsiveTab td:before { 

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;  }

        

/* Label the data */

.responsiveTab td:nth-of-type(1):before { content: "Dates"; }

.responsiveTab td:nth-of-type(2):before { content: "Nightly"; }

.responsiveTab td:nth-of-type(3):before { content: "Weekly"; }

.responsiveTab td:nth-of-type(4):before { content: "Weekly"; }

.responsiveTab td:nth-of-type(5):before { content: "Monthly *"; }

.responsiveTab td:nth-of-type(6):before { content: "Event"; }

}

    

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

.responsiveTab{ padding: 0; margin: 0; width: 100%; }

}

    

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.responsiveTab { width: 100%; }

}





/* Pop Rates Responsive CSS for table */

/* Generic Styling, for Desktops/Laptops */

.ratesresponsiveTab { width: 100%; border-collapse: collapse; font-family: 'Open Sans';}

.ratesresponsiveTab span{ display:block; font-weight:600;}

.ratesresponsiveTab strong { display: block; padding: 10px 0px; font-weight: normal; font-size: 14px; line-height: 22px;

  text-align: left;

}



/* Zebra striping */

.ratesresponsiveTab tr:nth-of-type(odd) { background: #e6f8ff; }

.ratesresponsiveTab th { background: #00aeef; color: white; font-weight: bold; }

.ratesresponsiveTab td, th { border: 1px solid rgb(204, 204, 204); padding: 6px; text-align: left; font-size: 15px; line-height: 22px;}



/*  Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */

@media  only screen and (max-width: 760px),

(min-device-width: 768px) and (max-device-width: 1024px)  {

    

/* Force table to not be like tables anymore */

.ratesresponsiveTab, thead, tbody, th, td, tr { display: block; }

        

/* Hide table headers (but not display: none;, for accessibility) */

.ratesresponsiveTab thead tr {  position: absolute; top: -9999px; left: -9999px;}

.ratesresponsiveTab tr { border: 1px solid #ccc; }

.ratesresponsiveTab td { 

/* Behave  like a "row" */

border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }

        

.ratesresponsiveTab td:before { 

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;  }

        

/* Label the data */

.ratesresponsiveTab td:nth-of-type(1):before { content: "From"; }

.ratesresponsiveTab td:nth-of-type(2):before { content: "To"; }

.ratesresponsiveTab td:nth-of-type(3):before { content: "Nightly Standard Rate"; }

.ratesresponsiveTab td:nth-of-type(4):before { content: "Weekly Rate"; }

.ratesresponsiveTab td:nth-of-type(5):before { content: "Monthly Rate *"; }

.ratesresponsiveTab td:nth-of-type(6):before { content: "Min Stay"; }

.ratesresponsiveTab td:nth-of-type(7):before { content: "Total Guest"; }

.ratesresponsiveTab td:nth-of-type(8):before { content: "Total Days"; }

.ratesresponsiveTab td:nth-of-type(9):before { content: "Total Amount"; }

}



/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

.responsiveTab{ padding: 0; margin: 0; width: 100%; }
    .responsiveTab td.ratelist-3{display: none;}

}

    

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.responsiveTab { width: 100%; }
    .responsiveTab td.ratelist-3{display: block;}

}