.d-none { display: none !important;}

.btn { text-decoration: none; display: inline-block; background: #ccc; padding: 7px 20px; border-radius: 50px; font-family: "Campton"; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--primary-blue); cursor: pointer;}
.btn i { font-size: 14px; margin: 0 3px;}
.btn-blue { background: #203fc4; color: #fff;}
.btn-blue:hover { background: #203fc4; color: #fff;}
.btn-green { background: #2dbd54; color: #fff;}
.btn-green:hover { background: #24ad4a; color: #fff;}
.btn-red { background: #e63030; color: #fff;}
.btn-red:hover { background: #e02828; color: #fff;}
.btn-white { background: #f6f6f6; color: #111;}
.btn-white:hover { background: #eee; color: #111;} 
.btn-white-trans { background: transparent; color: #fff;}
.btn-white-trans:hover { background: #fff; color: #111;}
.btn-disabled { background: #ddd; color: #555;}
.btn-disabled-outline { background: #fff; border: 1px solid #aaa; color: #aaa;}
.btn-disabled-outline:hover { background: #fff; border: 1px solid #aaa; color: #aaa;}

.btn-blue-outline { background: transparent; border: 1px solid #203fc4; color: #203fc4;}
.btn-blue-outline:hover { background: #203fc4; color: #fff;}

.btn-white-outline { background: transparent; border: 1px solid var(--text-gray); color: var(--primary-blue);}
.btn-white-outline:hover { background: #fff; color: #111;}

.offers-header { float: left; width: 100%; background: #111; padding: 20px 0;}
.offers-header aside .menu { display: flex; justify-content: center;}
.offers-header aside .menu li { margin: 0 10px; list-style-type: none;}
.offers-header aside .menu li a { font-size: 16px; color: white;}

.offers-footer { float: left; width: 100%; background: #111; padding: 10px 0;}
.offers-footer aside .menu { display: flex; justify-content: center;}
.offers-footer aside .menu li { margin: 0 10px; list-style-type: none;}
.offers-footer aside .menu li a { font-size: 14px; color: #ddd;}

.hero-banner { float: left; width: 100%; background-size: cover !important; position: relative; padding: 50px 0;}
.hero-banner::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
.hero-banner .container { position: relative; z-index: 1;}
.hero-banner .inner { width: 60%; margin: auto; display: table; text-align: center;}
.hero-banner h1 { font-size: 40px; font-weight: 700; color: white; margin: 0 0 10px 0;}
.hero-banner p { font-size: 16px; color: white; margin: 0 0 30px 0;}
.hero-banner form { display: flex; justify-content: center; align-items: center;}
.hero-banner form .field { display: flex; margin: 0 10px 0 0; position: relative;}
.hero-banner form .field .close { position: absolute; right: 10px; top: 13px; font-size: 14px; font-weight: bold; color: black; width: 20px; height: 20px; padding: 1px; display: inline-block; cursor: pointer;}
.hero-banner form input[type="text"] { padding: 10px 15px; font-size: 20px; border: none;}
.hero-banner form input[type="text"]:focus { outline: none;}
.hero-banner form input[type="submit"] { background: red; padding: 13px 30px; font-size: 16px; font-weight: 700; color: white; text-transform: uppercase; border: none;}

.offers-list { float: left; width: 100%; background: #e9e9e9; padding: 30px 0 0 0; min-height: 700px;}
.offers-list .container { max-width: 1170px;}

.intro-section { margin: 20px 0 50px 0; background: #e9e9e9; display: flex; justify-content: start; align-items: center;}
.intro-section .image { width: 10%;}
.intro-section .image img { width: 100%; border-radius: 10px; max-width: 110px; height: 110px; object-fit: cover;}
.intro-section .text { width: 55%; padding: 0 30px; margin-top: -20px;}
.intro-section .text p { font-size: 18px;}
.intro-section .tabs { width: 35%; padding: 0 0 0 30px; display: flex; justify-content: flex-end; align-items: center;}
.intro-section .tabs a { display: block; font-size: 16px; color: #222; background: white; padding: 10px 20px; border-right: 1px solid #ccc; white-space: nowrap;}
.intro-section .tabs a:first-child { border-radius: 5px 0 0 5px;}
.intro-section .tabs a:last-child { border-radius: 0 5px 5px 0; border: none;}
.intro-section .tabs a:hover { box-shadow: 0 2px 2px 1px rgab(0,0,0,0.1);}
.intro-section .tabs a.active { background: #222; color: white;}

.offers-head { display: flex; justify-content: space-between; margin: 0 0 20px 0;}
.offers-head .heading h2 { font-size: 25px;}
.offers-head .sort-by { display: flex; align-items: center;}
.offers-head .sort-by label { font-size: 14px; margin: 0 10px 0 0; white-space: nowrap;}
.offers-head .sort-by select { background: white; font-size: 14px; border: 1px solid #ccc; border-radius: 5px; padding: 5px;}

.offers-section { counter-reset: offer-counter; margin: 0 0 80px 0;}

.offer-block { background: white; border-radius: 10px; margin: 0 0 40px 0; box-shadow: 0 3px 3px 1px rgba(0,0,0,0.1); counter-increment: offer-counter;}
.offer-block .top { background: #111; padding: 10px 15px; display: flex; align-items: center; position: relative; border-radius: 10px 10px 0 0;}
.offer-block .top::before { content: counter(offer-counter) ". "; position: absolute; left: -5px; top: 5px; font-size: 14px; color: black; background-image: url("../images/label-grey.png"); background-position: center center; background-repeat: no-repeat; background-size: 100%; width: 40px; height: 40px; line-height: 28px; text-align: center;}
.offer-block:first-child .top::before { background-image: url("../images/label-green.png"); color: white;}
.offer-block .top .name { font-size: 16px; font-weight: 700; color: white; padding: 0 0 0 40px;}
.offer-block .top .available { font-size: 14px; color: white; margin-left: auto;}
.offer-block .content { display: flex; justify-content: space-between; align-items: center; padding: 30px 20px;}
.offer-block .content .first { width: 20%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 20px 0; border-right: 1px solid #ddd; margin: 0 3% 0 0; height: 100%;}
.offer-block .content .first .logo { width: 60%; margin: 0 0 10px 0;}
.offer-block .content .first .logo img { width: 100%; height: auto;}
.offer-block .content .first .ratings { display: flex; justify-content: center; align-items: center;}
.offer-block .content .first .ratings img { margin: 0 2px;}
.offer-block .content .first .ratings span { font-size: 13px; font-style: italic; color: #777;}
.offer-block .content .second { width: 15%; display: flex; flex-wrap: wrap; border-right: 1px solid #ddd; margin: 0 3% 0 0; height: 100%;}
.offer-block .content .second .speed { width: 100%; margin: 0 0 10px 0;}
.offer-block .content .second .speed h4 { font-size: 14px;}
.offer-block .content .second .speed strong { font-size: 20px; font-weight: 700;}
.offer-block .content .second .price { width: 100%;}
.offer-block .content .second .price h4 { font-size: 14px;}
.offer-block .content .second .price strong { font-size: 20px; font-weight: 700;}
.offer-block .content .third { width: 32%;}
.offer-block .content .third .desc { width: 100%;}
.offer-block .content .third .desc ul li { font-size: 14px; background: url("../images/checkmark.png") left 5px no-repeat; background-size: 15px; margin: 0 0 10px 0; padding: 0 0 0 25px; text-align: left;}
.offer-block .content .third .desc ul li:last-child { margin: 0;}
.offer-block .content .fourth { width: 25%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height: 100%;  border-left: 1px solid #ddd; margin: 0 0 0 2%; min-height: 110px;}
.offer-block .content .cta { width: 80%;}
.offer-block .content .fourth .btn { width: 100%; margin: 0 0 20px 0; text-align: center; font-size: 18px;}
.offer-block .content .fourth .btn:hover { box-shadow:0 2px 1px 1px rgba(0,0,0,0.1)}
.offer-block .content .fourth .btn:last-child { margin: 0;}
.offer-block .offer-text { background: #eee; padding: 5px 10px; border-radius: 0 0 10px 10px;}
.offer-block .offer-text p { font-size: 13px; margin: 0;}
.offer-block .offer-text p a { color: #203fc4;}
.offer-block .offer-text p a:hover { text-decoration: none;}

.btn-loadmore { margin: 20px auto; display: table; background: transparent; border: 1px solid black;}
.btn-loadmore:disabled, .btn-loadmore[disabled] { background: #ccc; border: none;}

.before-cities { margin: 30px 0;}
.before-cities p { font-size: 20px;}

.cities-section { margin: 50px 0;}
.cities-section h2 { font-size: 25px; margin: 0 0 20px 0;}
.cities-section ul li { width: 25%;}
.cities-section ul li a { display: block; font-size: 16px; color: #203fc4;}

.map-section { width: 100%; margin: 0 0 50px 0;}
.map-section iframe { width: 100%; height: 400px;}

.disclaimer { float: left; width: 100%; background: #111; padding: 30px 0;}
.disclaimer p { font-size: 13px; text-align: center; color: #888;}

@media (min-width: 768px) and (max-width: 991px) {
.hero-banner .inner { width: 80%;}
.offers-list { padding: 30px 20px; width: 95%;}
.offer-block .content { flex-wrap: wrap;}
.offer-block .content .first { width: 25%;}
.offer-block .content .second { width: 25%;}
.offer-block .content .third { width: 40%;}
.offer-block .content .fourth { width: 100%; border: none; border-top: 1px solid #ddd; margin: 20px 0 0 0; padding: 20px 0 0 0; min-height: auto;}
.offer-block .content .cta { width: 100%; display: flex; align-items: center;}
.offer-block .content .fourth .btn { width: auto; margin: 0 20px 0 0;}
.offers-head .heading h2 { font-size: 16px;}
.intro-section { margin: 0 0 40px 0;}
.intro-section .text { width: 50%; padding: 0 25px;}
.intro-section .text p { font-size: 14px;}
.intro-section .tabs { width: 40%; padding: 0;}
.intro-section .tabs a { font-size: 14px;}
}

@media (max-width: 767px) {
.hero-banner .inner { width: 100%; display: flex; flex-direction: column;}
.hero-banner h1 { font-size: 30px;}
.hero-banner form input[type="text"] { width: 100%;}
.offers-section { padding: 0 20px;}
.offers-head { flex-wrap: wrap;}
.offers-head .heading { width: 100%; margin: 0 0 20px 0;}
.offers-head .heading h2 { font-size: 16px;}
.offer-block .top { flex-wrap: wrap; width: auto;}
.offer-block .top .name { width: 100%;}
.offer-block .top .available { width: 100%; padding: 0 0 0 40px;}
.offer-block .content { flex-wrap: wrap;}
.offer-block .content .first { width: 100%; border: none; border-bottom: 1px solid #ddd; padding: 0 0 15px 0; margin: 0 0 15px 0;}
.offer-block .content .first .logo { margin: 0 10px 0 0;}
.offer-block .content .second { width: 100%; border: none; border-bottom: 1px solid #ddd; padding: 0 0 15px 0; margin: 0 0 15px 0;}
.offer-block .content .second .speed { width: 50%; margin: 0;}
.offer-block .content .second .price { width: 50%;}
.offer-block .content .third { width: 100%; border: none; border-bottom: 1px solid #ddd; padding: 0 0 15px 0; margin: 0 0 15px 0;}
.offer-block .content .fourth { display: block; width: 100%; border: none; margin: 0; min-height: auto;}
.offer-block .content .cta { width: 100%;}
.offer-block .content .fourth .btn { width: 85%;}
.intro-section { margin: 0 0 40px 0; flex-wrap: wrap; align-items: start; padding: 0 20px; width: 90%;}
.intro-section .image { width: 24%;}
.intro-section .text { width: 70%; padding: 0 0 0 20px;}
.intro-section .text p { font-size: 14px;}
.intro-section .tabs { width: 100%; padding: 0; margin: 20px 0 0 0;}
.intro-section .tabs a { display: block; width: 100%; font-size: 15px; text-align: center;}
.offer-block .content .cta { width: 85%;}
.offer-block .content .fourth .btn { font-size: 16px;}
.map-section iframe { height: 250px;}
}