/**  global css **/
* { font-family: "HelveticaNeue", Arial, sans-serif; }
 body{ -webkit-text-size-adjust: none; }
.header { min-height: 74px; background: #348AB6; font-family: "HelveticaNeue Medium", "Helvetica Medium", sans-serif; }
.header .row .show-for-large-up.top-menu.large-8.columns { padding-right: 0; } /* This code is for safari of blue navbar */
.header .button { height: 74px; line-height: 74px; font-size: 0.9rem; padding: 0 20px; margin: 0; font-weight: 100; background: none; }
.header .button-group li .button { border: 0;}
.header .button { background: linear-gradient(to bottom, #E43A5C 30%, #A40A2C 100%) no-repeat; background-position: 0 74px; transition: background-position 0.5s, background-color 0.3s; }
.header .button:hover { background-color: #3077A4; background-position: 0 65px; }
.header .button.active { background-color: #276788; background-position: 0 70px; cursor: pointer; }
.header .button.active:hover { background-position: 0 65px; }
.logo img { max-width: 368px; max-height: 59px; margin-top: 9px; }

.footer { text-align: center; color: #707070; font-weight: bold; background: #282D31; padding: 30px 0 20px; }
.footer pre { width: 100%; font-size: 0.8rem; font-family: "HelveticaNeue Medium", "Helvetica Medium", sans-serif; text-align: center; padding: 3px 20px;}
.footer .disclaimer { font-size: 0.8rem; font-family: "HelveticaNeue Medium", "Helvetica Medium", sans-serif; padding: 3px 0; margin-bottom: 10px; }
.footer img { margin: 10px auto 18px auto; display: block; }
.footer a { color: #707070; transition: color 1s;}
.footer a:hover { color: #909090; }

.button { transition: background 0.5s ease-out; font-family: "HelveticaNeue Medium", Arial, sans-serif; font-weight: bold; font-size: 1rem; white-space: nowrap; min-height: 30px; }
.button.crimson { background-color: #F6304C; border: 1px solid #AA0018; color: #FFFFFF; }
.button.crimson:hover { background-color: #D6252C; }
.button.gray { color: #4B4B4B; background-color: #CACACA; background-image: linear-gradient(to bottom, #FFFFFF 0%,#CACACA 100%); background-repeat: no-repeat; border: 1px solid #5F5F5F; transition: background-position ease-out 0.5s; }
.button.gray:hover { background-position: 0 -20px; }

.bg-gray3, .bg-alto   , section.gray-dark  { background: #D7D7D7; }
.bg-wildsand, .ads-bg, .bg-gray { background-color: #F4F4F4; }
.bg-radical-red { background-color: #F6304C; }

.font-color-1 { color: #F6304C; }
.font-color-2 { color: #3F3F3F; }
.font-color-3 { color: #B4B4B4; }
.font-color-4 { color: #0E0E0E; }

span.stars { display: inline-block; width: 100px; height: 20px; background-image: url("../images/stars.png"); vertical-align: 4px; }
.stars.rate50 { background-position:   0     0;   }
.stars.rate40 { background-position: -19px   0;   }
.stars.rate30 { background-position: -38px   0;   }
.stars.rate20 { background-position: -57px   0;   }
.stars.rate10 { background-position: -76px   0;   }
.stars.rate00 { background-position: -98px   0;   }
.stars.rate45 { background-position:   0   -17px; }
.stars.rate35 { background-position: -19px -17px; }
.stars.rate25 { background-position: -38px -17px; }
.stars.rate15 { background-position: -57px -17px; }
.stars.rate05 { background-position: -76px -17px; }
.right-arrow { background-image: url("../images/arrow-right.png"); width: 26px; height: 8px; display: inline-block; margin-left: 2px; margin-bottom: 1px; }
span.star { display: inline-block; width: 40px; height: 31px; background-image: url("../images/star.png"); background-repeat: no-repeat; }

.tiny-12 .pagination .current a { color: #FFF; }
.top10-sites { margin: 0 auto; }
.top10-sites .small-12 { padding: 0 10px; }
section.articles .fig { display: inline-block; float: right; margin: 0 0 0 15px; max-width: 320px; }

.bg-gray .font-color-1 { padding: 10px 0 7px 0; text-align: center; font-size: 2.3rem; line-height: 140%; margin-top: 10px; }

/* navigation bar */
.sites-menu-bg { height: 2rem; position: relative; background: #F4F4F4; border-bottom: 1px solid #A4A4A4; overflow: hidden; }
.sites-menu-bg ul { -webkit-margin-before: 0; -webkit-padding-start: 0; line-height: 2rem;}
.sites-menu-bg ul.small-block-grid-1 li { width: auto; float: left; margin: 0px 5px; padding-bottom: 0; clear: none; }
.sites-menu-bg ul li a { color: #7A7A7A; font-size: 13px; }
.sites-menu-bg ul li.active a { color: #000; font-size: 16px; font-weight: bold; }
.sites-menu-bg #bottom-side-container { padding: 0; height: 100%; width: 960px; margin: 0 auto; }
.sites-menu-bg #site-menu-wrap { width: 100%; overflow: hidden; }
.sites-menu-bg .st { width: 20px; height: 20px; border-radius: 50%; background: #F9163C; color: #FFF; font-weight: normal; font-size: 12px; display: inline-block; line-height: 20px; padding-left: 1px; vertical-align: 2px; }

/* Rate Us Now part for  */
.trustpilot-wrap .trustpilot { margin: 0 auto; }
.social-button { display: none; }

/* This class is added on scroll */ 
.fixed { position: fixed; top: 0; z-index: 1; }
.body-box { padding-top: 74px; }
.mobile-sidenav, .mobile-version { display: none; }

/* Mobile version for sidenav */
@media all and (max-width: 960px){
  .header, .sites-menu-bg { min-height: 0; height: 45px; }
  .header .large-4 { height: 45px; padding: 0; }
  .header .mobile-version { display: block; }
  .header .mobile-version ul { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; display: inline-block; line-height: 45px; margin-left: 65px; }
  .header .mobile-version ul li { list-style: none; float: left; margin-right: 20px; font-size: 16px; }
  .header .sidenav-side { height: 45px; width: 45px; background: #176893; display: inline-block; position: absolute; cursor: pointer; }
  .header .sidenav-icon { width: 25px; height: 25px; background-image: url('../images/sidenav-icon.png'); position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -14px; }
  .header a { display: inline-block; color: #FFF; }
  .header .logo img { display: none; }
  
  /* sidenav part */
  .mobile-sidenav { width: 220px; height: 100%; float: left; display: none; background: #3D3D3D; overflow: auto; }
  .mobile-sidenav.open { display: block; }
  .mobile-sidenav ul { height: auto; background: #3D3D3D; margin-left: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; cursor: pointer; }
  .mobile-sidenav ul li { height: 50px; list-style: none; border: 1px solid #333333; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; }
  .mobile-sidenav ul li.active { border-right: solid 1px #2284A1; background: #2BA6CB; }
  .mobile-sidenav ul li:first-child { position: relative; background: #3D3D3D; }
  .mobile-sidenav ul li:first-child span { width: 106px; height: 23px; background-image: url('../images/sidenav-logo.png'); position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -56px; }
  .mobile-sidenav ul li:last-child:after { content: ''; display: block; height: 50px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; }
  .mobile-sidenav ul li:nth-child(3) { padding-right: 4px; }
  .mobile-sidenav ul li a { color: #FFF; line-height: 50px; display: block; height: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-sidenav .sidenav-icon { width: 18px; height: 17px; background-image: url('../images/top10review-site-mobile-sid.png'); display: inline-block; vertical-align: -4px; margin: 0 15px; }
  .mobile-sidenav .icon-a { background-position: -21px 0; }
  .mobile-sidenav .icon-b { background-position: -44px 0; }
  .mobile-sidenav .icon-c { background-position: 58px 0; }
  .mobile-sidenav .icon-d { background-position: 38px 0; }
  .mobile-sidenav .icon-e { background-position: 18px 0; }

  section.articles .row:nth-child(n+2) h1 { font-size: 1.2rem; }
  section.articles .fig { float: none; max-width: 100%; margin: 0 0 5px 0; }

  .body-box { padding-top: 45px; }
  body.open .body-box { overflow: hidden; height: 100%; }
  body.open .body-box > * { min-width: 320px; }

  footer.footer { word-break: break-word; }
  footer.footer .row { background: #282D31; }
  footer.footer .disclaimer { margin-bottom: 10px; }
}

/* when screen > 960px that the menu should display PC version */
@media all and (min-width: 961px) and (max-width: 1024px){
  .header .row .medium-12 { width: 30%; }
  .show-for-large-up { display: block !important; width: 70%; }
  footer.footer .disclaimer { margin-bottom: 10px; }
}