@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400; 
  src: url(../fonts/roboto/roboto-regular-webfont.eot);
  src: url(../fonts/roboto/roboto-regular-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/roboto/roboto-regular.woff2) format('woff2');
  
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/roboto/roboto-medium-webfont.eot);
  src:url(../fonts/roboto/roboto-medium-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/roboto/roboto-medium.woff2) format('woff2');
  
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/roboto/roboto-bold-webfont.eot);
  src: url(../fonts/roboto/roboto-bold-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/roboto/roboto-bold.woff2) format('woff2');
   
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/roboto/roboto-black-webfont.eot);
  src: url(../fonts/roboto/roboto-black-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/roboto/roboto-black.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
html, body {
  margin: 0;
  padding: 0;
}
body{ font-size:14px; font-family: 'Open Sans', sans-serif;}
h1,h2,h3,h4,h5,h6{font-family: 'Roboto';}
a:hover, a:active, a:focus { text-decoration: none;}
ul {padding: 0; margin: 0;}
ul li { list-style: none;}
img { max-width: 100%;}
.hirelogoDesginer-logo { color: #2c3e50; float: left; font-size: 19px; padding: 22px; width: 150px;}
.hirelogoDesginer-logo img { width: 150px;}
.compare-design { position: relative;}
.compare-mobile-menu { color: #1d1449; display: inline-block; font-size: 28px; position: absolute; right: 30px; top: 25px;}

.compareDesign-header { background: #fff none repeat scroll 0 0; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2); left: 0; position: fixed; top: 0; width: 100%; z-index: 99;}
.compare-nav-list { float: right; margin: 26px 0 0; position: relative; text-align: right; vertical-align: bottom; width: 100%;}
.compare-nav-list li, .compare-nav-list > ul { display: inline-block;}
.compare-nav-list li a { color: #231A4E; display: inline-block; font-size: 17px; font-weight: 500; padding: 25px 20px; text-transform: capitalize; position: relative;}
.compare-item-action::after { border-bottom: 3px solid #ffc113; bottom: 1px; content: ""; left: 0; margin: 0 auto; position: absolute; right: 0; transition: all 0.4s ease 0s; width: 0;}
.active .compare-item-action::after, .compare-item-action:hover::after { width: 100%;}
.compare-banner { background: url(../images/banner.jpg) repeat scroll center center / cover ; padding: 80px 0 20px; position: relative;}
/*.compare-banner::after {  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}*/
.compare-banner-info { padding: 170px 0; display: inline-block; position: relative; width: 100%; z-index: 9;}
.comBan-title { width: 350px;color: #fff; font-size: 42px; margin: 15px 0 30px auto; text-align: right;text-transform: uppercase;font-weight: 900;}
.comBan-title > span { color: #ffc113;}
.comBan-details .comBanner-desc { color: #2c3e50; display: inline-block; font-size: 15px; font-weight: 600; margin: 0; padding: 0 0 23px; text-align: right; width: 100%; line-height: 24px;max-width: 445px;float: right;}
.compare-table { display: inline-block; padding: 50px 0; width: 100%;}
.comTable-info { display: inline-block; padding: 0 15px;  width: 100%;}
.comTable-header { background: #FFC113; border-bottom: 2px solid #FFC113; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2); color: #fff; float: left; padding: 20px 0; width: 100%;}
.comTable-grid-title { color: #1D1449; font-size: 15px; font-weight: 400; margin: 0; text-align: center; text-transform: uppercase;}
.comMiddle-grid-item { display: inline-block; width: 24.33%;}
.compare-table-td { border: 1px solid #FFC113; float: left; width: 100%;}
.comTd-holder { display: inline-block; text-align: center; width: 100%;}
.comTd-list { float: left; padding: 10px 0; width: 100%;}
.comTd-list:nth-child(2n) { background: #f4f5f9 none repeat scroll 0 0;}
.compare-site-visit { display: inline-block; width: 100%;}
.compare-td-css { text-align: center; display: table; height: 80px; width: 100%;}
.compare-td-css .comMiddle-grid-item, .compare-td-css .comTable-grid-item  { display: table-cell; vertical-align: middle;}
.table-data { color: #2c3e50; font-size: 16px; font-weight: 400; text-transform: capitalize;}
.comStar-rating { display: inline-block; margin: 0 0 0 5px;}
.comStar-rating .fa-star { color: #858282; font-size: 19px;}
.comStar-rating.active .fa-star { color: #f58462;}
.comRead-review { border-bottom: 2px solid #d0d0d0; color: #2c3e50; display: inline-block; font-size: 14px; font-weight: 400; margin: 3px 0 0; text-transform: capitalize; transition: all 0.4s ease 0s;}
.comRead-review:hover, .comRead-review:active, .comRead-review:focus { color: #000; border-bottom-color: #1D1449;}
.compare-review-modal { background: rgba(255, 255, 255, 1) none repeat scroll 0 0; bottom: 0; height: 100%; left: 0; overflow-x: hidden; overflow-y: auto; position: fixed; right: 0; top: 0; width: 100%; z-index: 999; display: none;}
.compare-review-modal.compare-show-review { display: block;}
.compare-modal-open { overflow: hidden;}
.comReview-header { background: #f4f5f9 none repeat scroll 0 0; display: inline-block; padding: 30px 0 50px; width: 100%;}
.review-header-info, .review-row, .review-logo, .rating-cell > div { display: inline-block; width: 100%;}
.review-header-info { padding: 0 30px;}
.comReview-title { color: #1D1449; display: inline-block; font-size: 29px; font-weight: 500; padding: 0 30px 30px; width: 100%;font-weight: 600;}
.review-logo > img { height: 135px;}
.review-rating { display: table; height: 130px; width: 100%;}
.rating-cell { display: table-cell; vertical-align: middle;}
.review-rating-title { color: #2c3e50; display: inline-block; font-size: 19px; font-weight: 600; width: 100%;}
.rating-number { color: #2c3e50; display: inline-block; float: left; font-size: 36px; padding: 0 15px 0 10px;}
.review-star { float: left; margin: 15px 0 0; width: auto;}
.add-review-btn { background: #1D1449 none repeat scroll 0 0; color: #fff; float: left; font-size: 13px; font-weight: 500; margin: 0 10px 0 0; padding: 12px;  text-transform: uppercase; transition: all 0.4s ease 0s; border: 2px solid transparent;}
.compare-table-td .review-star { display: inline-block; float: none;}
.add-review-btn:hover, .add-review-btn:active, .add-review-btn:focus { background: transparent none repeat scroll 0 0; border: 2px solid #1D1449; color: #000;}
.comReview-extra { display: inline-block; position: relative; width: 100%;}
.comReview-extra::before { border-left: 1px solid #ddd; content: ""; height: 100%; left: -30px; position: absolute; top: 0;}
.review-else { color: #2c3e50; display: inline-block; font-size: 19px; font-weight: 600; padding: 0 0 8px; text-transform: capitalize;}
.else-item { color: #000; display: inline-block; font-size: 14px; margin: 0 0 5px; width: 100%;}
.compare-about-company { color: #1D1449; display: inline-block; font-size: 15px;margin: 5px 0 0; text-decoration: underline; width: 100%;}
.compare-about-company:hover { color: #000;}
.review-middle { background: #fff none repeat scroll 0 0; display: inline-block; padding: 60px 20px; width: 100%;}
.reviews-list { display: inline-block; padding: 0 90px 0 180px; position: relative; width: 100%; margin: 0 0 30px;}
.review-user-info {  display: inline-block; left: 0; position: absolute; text-align: center; width: 170px;}
.review-user-img { display: inline-block; margin: 0 auto; width: 80px;}
.review-user-name { display: inline-block; font-size: 15px; font-weight: 600; text-transform: capitalize; width: 100%; padding: 5px 0 0;}
.review-users-comment::before {  border-color: transparent #f4f5f9 transparent transparent; border-style: solid; border-width: 12px; content: ""; left: -24px; position: absolute; top: 20px;}
.review-users-comment { background: #f4f5f9 none repeat scroll 0 0; display: inline-block; padding: 20px; position: relative; width: 100%;}
.review-users-comment .review-star { margin: 0; width: auto;}
.review-date { color: #a0a0a0; float: right; font-size: 13px;}
.review-headline { display: inline-block; padding: 10px 0 0; width: 100%;}
.headline-title { color: #303030; display: inline-block; font-size: 20px; font-weight: 600; margin: 0 0 5px; width: 100%;}
.headline-desc { color: #505050; display: inline-block;  font-size: 15px; width: 100%;}
.comReview-dialog { position: relative;}
.review-popup-close {  cursor: pointer; right: 30px; position: absolute; top: 20px; width: 40px;}
.compare-special-offer { background: #489f38 none repeat scroll 0 0; border-radius: 3px; color: #fff; display: inline-block; font-size: 14px; margin: 5px 0;  padding: 5px 11px; text-transform: capitalize;  width: auto; cursor: pointer;}
.offer-content { background: #1D1449; color: #fff; display: inline-block; min-height: 70px; padding: 15px 150px 15px 15px; position: relative; width: 100%;}
.offer-code { display: inline-block; font-size: 15px; line-height: 22px; width: 100%;}
.offer-save { color: #fff; position: absolute; right: 20px; top: 12px;}
.offer-save { color: #fff; position: absolute; right: 20px; top: 12px;}
.site-offer {display: none;  width: 50%;}
.special-offer-info { float: left; padding: 0 15px; width: 100%;}
.compare-special-offer i.caret-up { transform: rotate(180deg);}
.compare-special-offer i { transition: all 0.4s ease 0s;}
.icon-tooltip { cursor: pointer;}
.compare-visit-site { background: #ffc113 none repeat scroll 0 0; color: #1d1449; font-size: 13px; font-weight: 600; padding: 11px 20px; text-transform: uppercase;  transition: all 0.4s ease 0s; border: 2px solid #FFC113; display: inline-block;}
.compare-visit-site:hover, .compare-visit-site:active, .compare-visit-site:focus { background: transparent none repeat scroll 0 0; color: #1D1449;}
.offer-content .compare-visit-site:hover, .offer-content .compare-visit-site:active, .offer-content .compare-visit-site:focus { color: #fff;}
.mobile-nav-list-close, .compare-mobile-menu-btn { display: none;}
.rating-btn-info .compare-visit-site { float: left;}


.down-arrow { bottom: 0; display: inline-block; left: 0; margin: 0 auto; position: absolute; right: 0; width: 70px; cursor: pointer;
  -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
  animation: MoveUpDown 1s linear infinite; 
}
@keyframes MoveUpDown {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 40px;
  }
  100% {
    bottom: 0;
  }
}
@-moz-keyframes MoveUpDown {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 40px;
  }
  100% {
    bottom: 0;
  }
}
.down-arrow img { width: 70px; }

.compare-footer { background: #222222 none repeat scroll 0 0; float: left; padding: 25px 0 0; width: 100%;}
.comTask-title { position: relative; color: #efefef; display: inline-block; font-size: 19px; padding: 0 0 8px; text-transform: capitalize; width: 100%;}
.comTask-desc { color: #cfcfcf; font-size: 14px; margin: 5px 0 0;}
.footer-bottom { background: #111111; float: left; margin: 25px 0 0; width: 100%;}
.ft-copyright { color: #8f8f8f; display: inline-block; font-size: 15px; padding: 10px 15px; text-align: center; width: 100%;}

.address-detail { color: #cfcfcf; display: inline-block; line-height: 21px; width: 100%; margin: 5px 0 0;}
.contact-main-info { color: #cfcfcf; float: left;  width: 100%;}
.contact-footer a{ color: #fff; display: inline-block; padding: 5px 25px 0 10px;  text-decoration: underline;}
.contact-footer a:hover, .footer-bottom a:hover{color: #FFC113;}
.footer-bottom a{color: #fff;text-decoration: underline;}
.comTask-title::after {  border-bottom: 2px solid #ffc113; bottom: 5px; content: ""; left: 0; position: absolute; width: 30px;}
.add-review-form { margin-bottom: 35px; text-align: center; width: 100%; display: none;}
.add-reviews { background: #f4f5f9 none repeat scroll 0 0; display: inline-block; margin: 0 auto; max-width: 600px; padding: 10px 20px; text-align: left;
  width: 100%; position: relative;}
.add-reviews > div { display: inline-block; padding: 0 0 14px; position: relative; width: 100%;}

.add-star-ratings .comStar-rating { cursor: pointer; float: left; margin: 0; padding: 0 7px 0 0;}
.add-review-title { color: #505050; display: inline-block; font-size: 14px; text-transform: capitalize; width: 100%;}
.review-add-close { color: #1d1449; cursor: pointer; display: inline-block; font-size: 17px; position: absolute; right: 5px; top: 2px;}
.rating-stars { float: left; left: -4px; margin: 0 15px 0 0;  position: absolute; top: 21px;}
.rating-textInfo {  float: left; min-height: 40px; padding: 0 0 0 140px;  width: 100%;}
.rating-stars .comStar-rating.rating-hover .fa.fa-star { color: #FFC113; }
.review-textarea { border: 1px solid #ccc; display: inline-block; min-height: 120px; padding: 10px; resize: vertical; width: 100% !important;}
.add-review-heading .form-control { border-color: #ddd; border-radius: 0; box-shadow: none;}
.stars-description { color: #505050; font-size: 14px;}
.comTask-info { display: inline-block; width: 100%;}
.compare-star, .compare-star span { background: rgba(0, 0, 0, 0) url("../images/stars.png") repeat-x scroll 0 -18px; display: block; height: 18px; width: 140px;}

.compare-star span { background-position: 0 0;}
.review-submit-approve { display: block; margin: 0 0 40px; text-align: center;}
.review-submit-approve .approve-message { border: 1px dashed #ddd; color: #1d1449; display: inline-block; font-size: 15px; font-weight: 500; padding: 12px 20px;
  text-align: center;}
.add-review-heading .form-control.required-field-error, .review-textarea.required-field-error  { border-color: red;}
.review-users-comment .modal-star { display: inline-block; float: left;}
.compare-description .compare-description-padding{padding: 30px 0px;}
.compare-description .compare-description-details{margin: 40px 25px 0px;padding: 0px 24px;min-height: 300px; display: table;position: relative;}
.compare-description .middle{top: 170px;}
.compare-description .compare-description-details h3{font-size: 20px; margin: 0px 0px 10px;}
.compare-description .compare-description-details p{margin: 0; line-height: 24px;}
.compare-description  .compare-table-cell{display: table-cell; vertical-align: middle;}
.compare-description-details:before, .compare-description-details:after {content: '';position: absolute;width: calc(100% - 35px);height: calc(100% - 35px);border: 1px solid #333; pointer-events: none;-webkit-transition: .33s all ease;-o-transition: .33s all ease;transition: .33s all ease;}
.compare-description-details:before {top: 0;left: 0;border-width: 1px 0 0 1px;}
.compare-description-details:after {bottom: 0;right: 0;border-width: 0 1px 1px 0;}
.compare-description-details:hover:before, .compare-description-details:hover:after { width: 100%;height: 100%; border-color: #FFC113;}
.compare-heading{max-width: 790px;margin: 0 auto;padding: 0px 15px;}
.compare-heading h1{font-size: 32px; line-height: 40px; margin: 5px 0px;font-weight: 600;}
.compare-heading p{font-size: 16px;line-height: 24px; margin: 0px;}
@media (max-width: 1200px){
	.compare-special-offer { font-size: 12px;}	
	.compare-td-css .comStar-rating { margin: 0;}
	.add-review-btn { margin: 0 0 10px; text-align: center; width: 100%;}
	.rating-btn-info .compare-visit-site { text-align: center; width: 100%;}
}
@media (max-width: 991px){
	.compare-design .container { width: 100%;}
	.comTable-grid-title { font-size: 13px; }
	.comTable-header .comMiddle-grid-item { float: left;}
	.comStar-rating .fa-star, .table-data { font-size: 15px;}
	.compare-td-css { height: 60px;}
	.site-offer { width: 100%;}
	.compare-visit-site { font-size: 12px; padding: 11px 10px;}
	.compare-banner-info { padding: 90px 0;}	
	.rating-number {font-size: 30px; padding: 0 5px 0 0;}
	.reviews-list { padding: 0 20px 0 180px;}
	.review-rating-title {  font-size: 17px;}
	.col-md-4.col-sm-0 { display: none;}
	.compare-visit-site { font-size: 11px; padding: 6px;}
	.comBan-details .comBanner-desc{max-width: 354px;}
	.compare-description .compare-description-details{margin: 40px 0px 0px;}
}
@media (max-width: 767px){
	.compare-banner{background-image: none; background-color: #FFC01A;}
	.compare-nav-list { background: #ffc113 none repeat scroll 0 0; float: left; height: 100%; margin: 0; position: fixed; right: -100%; text-align: left; top: 0;
  transition: all 0.4s ease 0s; width: 250px;}
	.compare-nav-list.open-mbl-nav { right: 0; }
	.compare-nav-list > ul { margin: 40px 0 0;}
	.mobile-nav-list-close { color: #1d1449; cursor: pointer; font-size: 27px; position: absolute; right: 15px; top: 0; display: block;}
	.compare-mobile-menu-btn { color: #1d1449; font-size: 28px; position: absolute; right: 30px; top: 25px; cursor: pointer; display: block;}
	.compare-nav-list li { width: 100%;}
	.compare-nav-list li a { font-size: 16px; padding: 13px; width: 100%;}
	.compare-item-action::after { border-bottom: medium none;}
	.compare-item-action:hover, .compare-item-action:active, .compare-item-action:focus, .active .compare-item-action { background: #1d1449 none repeat scroll 0 0;  color: #fff;}
	.comTable-header, .comTd-list > .col-sm-6 { display: none;}
	.compare-table-td { border: none;}
	.compare-special-offer { width: 100%; text-align: center; font-size: 13px;}
	.compare-td-css { height: 90px;}
	.comReview-extra::before { display: none;}
	.reviews-list { padding:0;}
	.review-user-info { left: auto; margin: 0 0 15px; position: relative; text-align: center; width: 100%;}
	.review-users-comment::before { border-color: transparent transparent #f4f5f9; left: 0; margin: 0 auto; right: 0; top: -23px; width: 20px;}	
	.headline-title { font-size: 18px; text-align: center;}
	.headline-desc { font-size: 14px; text-align: center;}
	.comTask-info { margin: 0 0 20px;}
	.rating-stars { left: auto; position: relative; top: auto;}
	.rating-textInfo { float: left; padding: 0; min-height: 25px; width: 100%;}
	.comBan-title { font-size: 35px;width: 100%; text-align: center;}
	.comBan-details .comBanner-desc{max-width: 100%; text-align: center;}
	.down-arrow img { width: 40px;}
	.compare-heading h1 {font-size: 24px;line-height: 30px;}
	.compare-description .compare-description-details{min-height: auto; padding: 50px 15px;}
	.compare-description .middle{top: 0px;}
	@keyframes MoveUpDown {
	  0% {
		bottom: -1px;
	  }
	  50% {
		bottom: -20px;
	  }
	  100% {
		bottom: -1px;
	  }
	}
	@-moz-keyframes MoveUpDown {
	  0% {
		bottom: -1px;
	  }
	  50% {
		bottom: -20px;
	  }
	  100% {
		bottom: -1px;
	  }
	}

}
@media (max-width: 600px){
	.review-popup-close { width: 25px;}
	.comReview-title {  font-size: 23px; padding: 30px;}
}

@media (max-width: 480px){
	.review-header-info { padding: 0;}
	.add-review-btn { font-size: 11px; padding: 8px;}
	.rating-number { float: none; font-size: 25px; padding: 0; text-align: center; width: 100%;}
	.review-header-info .col-sm-7 { padding: 0;}
	.review-row .col-sm-6.col-xs-6:last-child { padding-left: 0;}
	.review-rating-title { font-size: 16px;}
	.review-star { float: none; margin: 0 0 5px; text-align: center; width: auto;}
	.review-date { display: inline-block; float: none; text-align: center; width: 100%;}
	.comTd-list > .col-sm-2.col-xs-4 { padding: 0 5px; width: 50%;}
	.comTd-list .compare-td-css { height: auto; margin: 10px 0 0;}
	.compare-td-css .comRead-review { margin: 0;}
	.compare-banner-info { padding: 30px 0;}
	.comBan-details .comBanner-desc { font-size: 15px;}
}

