File: /home/ratbustersflorida/public_html/lp/assets/css/responsive.scss
// media variable
$to-1290: "only screen and (max-width : 1290px)";
$to-1199: "only screen and (max-width : 1199px)";
$to-1099: "only screen and (max-width : 1099px)";
$to-991: "only screen and (max-width : 991px)";
$to-767: "only screen and (max-width : 767px)";
$to-575: "only screen and (max-width : 575px)";
$from-1550: "only screen and (min-width : 1550px)";
$from-1291: "only screen and (min-width : 1291px)";
$from-1200: "only screen and (min-width : 1200px)";
$from-992: "only screen and (min-width : 992px)";
$from-768: "only screen and (min-width : 768px)";
$from-576: "only screen and (min-width : 576px)";
$between-575-767: "only screen and (min-width : 576px) and (max-width: 767px)";
// color variable
$navy-blue: #0b2154;
// from 1200
@media #{$from-1200} {
.container {
max-width: 1190px;
}
.home-facility-overview {
max-width: 600px;
}
}
// from 992
@media #{$from-992} {
.desk-ml-auto {
margin-left: auto;
}
.desk-mr-auto {
margin-right: auto;
}
}
// from 1290
@media #{$to-1290} {
.main-nav {
background: #fff;
nav {
.navbar-nav {
.nav-item {
a {
font-size: 16px;
}
.dropdown-menu {
li {
a {
font-size: 16px;
}
}
}
}
}
}
}
.main-nav-2 {
background-color: transparent;
}
.home-client-details-2 {
max-width: 735px;
}
}
// from 1099
@media #{$to-1099} {
.main-nav {
display: none !important;
}
.mobile-nav {
display: block;
position: relative;
}
.mean-container .mean-bar {
background-color: #fff;
padding: 5px 0;
}
.mean-nav {
.navbar-nav {
height: 325px;
overflow-y: scroll;
}
}
.mobile-nav .logo {
top: 14px;
width: 110px;
position: absolute;
z-index: 999;
left: 15px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
img {
width: 100%;
}
}
.mean-container a.meanmenu-reveal {
top: 50%;
transform: translateY(-50%);
padding: 0 15px 0 0;
span {
background: $navy-blue;
margin-top: 4px;
}
}
.meanclose {
color: $navy-blue !important;
}
}
// to 1199
@media #{$to-1199} {
.navbar-brand {
flex: 0 0 110px;
-ms-flex: 0 1 auto;
max-width: 110px;
width: 110px;
img {
width: 100%;
}
}
.main-nav {
nav {
.navbar-nav {
align-items: center;
.nav-item {
a {
margin-left: 10px;
margin-right: 10px;
}
.dropdown-menu {
li {
a {
font-size: 15px;
}
}
}
}
}
}
}
.navbar-option-item {
margin-left: 10px;
&:first-child {
margin-left: 0;
}
.btn1 {
font-size: 13px;
padding: 10px;
img {
flex: 0 0 14px;
-ms-flex: 0 1 auto;
max-width: 14px;
width: 14px;
margin-right: 5px;
}
}
}
.home-pricing-list-content {
padding: 0 10px;
}
.header-content-2 {
h1 {
font-size: 45px;
}
}
.business-carousel {
&.owl-theme {
.owl-nav {
top: 12px;
}
}
}
.pricing-item-header {
h3 {
font-size: 25px;
img {
flex: 0 0 25px;
-ms-flex: 0 1 auto;
max-width: 25px;
width: 25px;
}
}
}
.pricing-item-amount {
h4 {
font-size: 40px;
small {
font-size: 22px;
}
span {
font-size: 30px;
}
}
}
.authentication-user-panel {
padding: 100px 55px;
}
}
// to 991
@media #{$to-991} {
.section-mtb-40 {
margin-top: 0;
margin-bottom: 0;
}
.header-bg {
padding: 150px 0 140px;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.34);
}
}
.header-content {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
h1 {
font-size: 45px;
margin-bottom: 8px;
}
p {
font-size: 18px;
margin-bottom: 20px;
}
.section-button {
justify-content: center;
}
}
.home-about-title {
font-size: 40px;
}
.home-about-list-item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
}
.counter-content {
justify-content: center;
}
.counter-item {
flex: 0 0 50%;
-ms-flex: 0 1 auto;
max-width: 50%;
width: 50%;
&:nth-child(3) {
.counter-loader {
display: none;
}
}
}
.table-indicator-animation {
display: flex;
}
.home-facility-overview {
margin: auto;
max-width: 720px;
&.pr-20, &.pl-20 {
padding-left: 15px;
padding-right: 15px;
}
}
.client-carousel-thumb {
margin-left: auto;
margin-right: auto;
}
.client-carousel-caption {
text-align: center;
margin-top: 30px;
}
.client-carousel-control {
justify-content: center;
}
.home-download-details {
padding-right: 0;
}
.footer-content-list {
padding-left: 0;
}
.header-bg-2 {
background-image: none;
}
.header-content-2 {
max-width: 100%;
padding-bottom: 35px;
align-items: center;
text-align: center;
}
.header-content-2-img {
img {
display: block;
margin: auto;
transform: scale(1);
}
}
.home-download-section {
padding: 50px 0;
}
.home-facility-2-img {
margin-right: 0;
}
.scale-one-half {
transform: scale(1);
}
.scale-one-zero-six {
transform: scale(1);
}
.scale-one-zero-one {
transform: scale(1);
}
.client-details-carousel {
&.owl-theme {
.owl-nav {
position: relative;
margin-top: 10px;
top: auto;
right: auto;
justify-content: center;
}
}
}
.home-client-thumbnail-section {
margin-top: 40px;
}
.home-feature-section-3 {
padding: 50px 0;
}
.home-feature-box-3 {
padding: 50px 30px 20px;
}
.home-service-section-3 {
padding: 50px 0;
.home-service-start {
padding-top: 0;
}
}
.business-carousel {
.owl-stage-outer {
padding: 0;
}
&.owl-theme {
.owl-nav {
position: relative;
margin-top: 30px;
top: auto;
right: auto;
justify-content: center;
margin-bottom: 50px;
}
}
}
.client-carousel-caption-2 {
padding-top: 30px;
padding-right: 0;
text-align: center;
}
.owl-carousel {
.owl-item {
.client-carousel-img-2 {
img {
margin: auto;
}
}
}
}
.retail-section-bg {
padding: 50px 0 150px;
}
.review-section {
padding: 180px 0 20px;
}
.counter-content-box {
padding: 30px 30px 10px;
}
.home-service-start {
text-align: center;
align-items: center;
}
.about-img {
margin-left: auto;
margin-right: auto;
}
.worker-grid-item {
&:nth-child(1) {
margin-top: 0;
}
&:nth-child(4) {
margin-top: 0;
}
}
.blog-details-inner {
padding-right: 0;
}
.pricing-grid-item {
flex: 0 0 50%;
-ms-flex: 0 1 auto;
max-width: 50%;
width: 50%;
}
.authentication-item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
}
.authentication-img-bg {
display: none;
}
.home-client-details-2 {
.client-caption-para {
text-align: center;
}
}
.feature-margin-60 {
margin-top: 30px;
}
.section-title {
h2 {
margin-bottom: 20px;
}
}
.home-about-details {
padding-right: 0;
}
.home-image-content {
img {
display: block;
margin: auto;
}
}
.full-grid-overview {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
order: 2;
padding-left: 50px;
padding-right: 50px;
}
.full-grid-image {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
order: 1;
}
.img-right-res {
img {
display: block;
margin-left: auto;
margin-right: 0;
}
}
.img-left-res {
img {
display: block;
margin-left: auto;
margin-left: 0;
}
}
.img-left-res {
img {
display: block;
margin-left: 0;
margin-right: auto;
}
}
.section-minus-margin {
margin-bottom: -200px;
}
.home-logo-section {
padding: 250px 0 50px;
}
.home-download-image {
img {
display: block;
margin: auto;
animation: none;
}
}
.home-service-details-2 {
align-items: center;
}
.home-service-text-2 {
text-align: center;
}
.modal-box {
width: 80%;
}
.border-top-mob {
border-top: 1px solid #d8d8d8;
}
.home-quick-contact-2 {
padding-left: 0;
padding-right: 0;
}
.home-facility-image {
padding-left: 0;
padding-right: 0;
}
.review-text {
align-items: center;
text-align: center;
}
.header-content-3 {
h1 {
font-size: 45px;
}
}
.blog-post-thumb {
height: 100%;
}
.home-logo-section-2 {
padding: 100px 0 100px;
}
.footer-lower {
margin-top: 30px;
}
.worker-shape-item {
display: none;
}
.home-about-animated-img {
img {
animation: none;
}
}
.home-about-animation {
display: none;
}
.home-facility-animation {
display: none;
}
.home-pricing-category {
overflow-x: scroll;
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: #d2d2d2;
}
}
}
// to 767
@media #{$to-767} {
.p-tb-80 {
padding: 30px 0;
}
.p-tb-100 {
padding: 50px 0;
}
.p-tb-70 {
padding: 20px 0;
}
.pt-70 {
padding-top: 20px;
}
.pt-100 {
padding-top: 50px;
}
.pb-70 {
padding-bottom: 20px;
}
.pb-90 {
padding-bottom: 40px;
}
.pt-100 {
padding-top: 50px;
}
.pb-100 {
padding-bottom: 50px;
}
.pb-80 {
padding-bottom: 30px;
}
.home-logo-item {
a {
img {
opacity: 1;
width: 85%;
}
}
}
.header-bg {
height: 100%;
padding: 130px 0 150px;
}
.header-content {
padding-top: 0;
text-align: center;
h1 {
font-size: 40px;
}
p {
font-size: 16px;
}
.section-button {
justify-content: center;
}
}
.support-bank-info {
position: relative;
left: auto;
bottom: auto;
transform: translateY(0);
margin-top: -130px;
align-items: center;
text-align: center;
}
.header-support-group {
padding: 30px 0 15px;
.row {
justify-content: center;
}
}
.feature-section-one {
margin-top: 50px;
padding-bottom: 50px;
}
.section-title {
margin-bottom: 30px;
h2 {
font-size: 35px;
margin-bottom: 15px;
}
p {
font-size: 16px;
}
}
.home-about-title {
font-size: 30px;
margin-bottom: 20px;
}
.home-about-para {
margin-bottom: 20px;
font-size: 16px;
}
.home-about-list-item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
font-size: 16px;
}
.counter-content {
margin-top: 20px;
}
.counter-item {
h3 {
.counter {
font-size: 40px;
}
.counter-text-lg {
font-size: 40px;
}
.counter-text-sm {
font-size: 25px;
}
}
p {
font-size: 16px;
}
}
.home-service-start {
text-align: center;
h2 {
font-size: 35px;
margin-bottom: 20px;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
}
.home-facility-details {
.home-service-start {
text-align: center;
button {
margin-left: auto;
margin-right: auto;
}
}
}
.quick-contact-inner {
h2 {
font-size: 30px;
margin-bottom: 15px;
}
p {
font-size: 16px;
}
}
.home-logo-item {
flex: 0 0 25%;
-ms-flex: 0 1 auto;
max-width: 25%;
width: 25%;
a {
padding: 15px;
}
}
.client-carousel {
.owl-stage-outer {
padding: 50px 0 0;
}
}
.client-carousel-thumb {
width: 300px;
height: 300px;
}
.client-caption-para {
font-size: 18px;
margin-bottom: 20px;
}
.client-caption-title {
font-size: 20px;
}
.client-caption-designation {
font-size: 17px;
}
.client-carousel-control {
margin-top: 30px;
}
.download-option-list {
justify-content: center;
li {
flex: 0 0 70px;
-ms-flex: 0 1 auto;
max-width: 70px;
width: 70px;
height: 70px;
a {
img {
max-width: 25px;
}
}
}
}
.home-contact-inner {
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
}
.footer-lower {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
padding: 0 0;
margin-top: 0;
}
.header-bg-2 {
background-image: none;
padding: 120px 0 40px;
}
.header-content-2 {
padding-bottom: 25px;
h1 {
font-size: 40px;
margin-bottom: 8px;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
}
.home-about-animated-img {
max-width: 120px;
&.home-animated-table-img {
max-width: 190px;
}
}
.home-animated-img-left {
bottom: 0;
left: 0;
transform: translate(0%, 0%);
}
.home-client-details-2 {
.client-caption-para {
font-size: 25px;
text-align: center;
&:before {
font-size: 45px;
}
}
}
.home-client-thumbnail-section {
margin-top: 40px;
}
.client-thumbnail-carousel {
.owl-stage-outer {
overflow: hidden;
}
}
.client-thumbnail-content {
display: flex;
align-items: center;
justify-content: center;
}
.client-thumbnail-content {
display: flex;
align-items: center;
flex-direction: column,
}
.client-thumbnail-img {
margin-right: 0;
margin-bottom: 10px;
}
.client-thumbnail-carousel {
.owl-item {
&.current {
opacity: 1;
.client-thumbnail-img {
transform: scale(1);
}
}
}
}
.client-thumbnail-info {
text-align: center;
}
.download-feature {
margin-top: 0;
margin-bottom: 20px;
}
.download-feature-item {
flex: 0 0 50%;
-ms-flex: 0 1 auto;
max-width: 50%;
width: 50%;
}
.download-feature-item-inner {
h3 {
font-size: 25px;
}
p {
font-size: 16px;
margin-top: 10px;
}
}
.header-content-3 {
padding-top: 130px;
padding-bottom: 15px;
h1 {
font-size: 40px;
margin-bottom: 15px;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
.section-button {
justify-content: center;
margin-bottom: 30px;
}
}
.home-facility-image-3 {
.home-facility-item {
transform: scale(1);
}
}
.home-service-details-2 {
align-items: center;
}
.client-carousel-caption-2 {
.client-caption-para {
font-size: 25px;
}
}
.page-bg {
padding: 126px 0 70px;
}
.page-title-inner {
.section-title {
h1 {
font-size: 35px;
margin-bottom: 15px;
}
}
}
.blog-details-inner {
text-align: left;
}
.blog-tag-name {
justify-content: center;
}
.blog-people-comment-reply {
padding-left: 50px;
}
.pricing-grid-item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
}
.authentication-user-header {
h1 {
font-size: 28px;
}
}
.error-page-inner {
h1 {
font-size: 180px;
}
h3 {
font-size: 25px;
margin-top: 20px;
}
p {
font-size: 17px;
margin-top: 20px;
}
.btn1 {
margin-top: 20px;
}
}
.home-feature-box-3 {
margin: 0;
}
.service-blog-quote {
text-align: left;
}
.authentication-user-panel {
padding: 50px 15px;
}
.authentication-tab-item {
padding: 15px 20px;
}
.blog-comment-area {
margin-top: 30px;
}
.blog-comment-leave-area {
.sub-section-title {
font-size: 25px;
}
}
.home-pricing-category {
table {
thead {
tr {
th {
font-size: 16px;
}
}
}
tbody {
tr {
td {
font-size: 16px;
}
}
}
}
}
.faq-accordion-title {
font-size: 17px;
}
.blog-details-content {
h2 {
font-size: 22px;
}
}
.blog-post-title {
font-size: 22px;
}
.blog-post-para {
font-size: 16px;
}
.blog-details-list {
li {
padding: 10px 0;
font-size: 16px;
}
}
.section-minus-margin {
margin-top: 20px;
}
.home-logo-section-2 {
padding: 50px 0;
}
.footer-lower-item {
text-align: center;
}
.home-quick-contact {
padding: 50px 30px 30px;
}
}
// to 575
@media #{$to-575} {
.home-about-animated-img {
max-width: 90px;
&.home-animated-table-img {
max-width: 190px;
}
}
.section-mtb-40 {
margin-top: 0;
margin-bottom: 0;
}
.btn1 {
padding: 10px 15px;
font-size: 15px;
}
.btn-with-image {
img {
&:nth-child(2) {
transform: translate(15px, 25px);
}
}
i {
&:nth-child(2) {
transform: translate(15px, 25px);
}
}
&:hover {
img {
&:nth-child(2) {
transform: translate(15px, 0);
}
}
i {
&:nth-child(1) {
transform: translateY(-25px);
}
&:nth-child(2) {
transform: translate(15px, 0);
}
}
}
}
.header-inner {
padding: 0;
}
.header-content {
h1 {
font-size: 35px;
margin-bottom: 15px;
}
}
.support-thumb {
flex: 0 0 45px;
-ms-flex: 0 1 auto;
max-width: 45px;
width: 45px;
margin-right: 15px;
}
.home-about-list {
margin-top: 25px;
}
.home-service-start {
h2 {
font-size: 30px;
}
}
.home-pricing-list {
li {
font-size: 16px;
img {
flex: 0 0 20px;
-ms-flex: 0 1 auto;
max-width: 20px;
width: 20px;
}
}
}
.home-pricing-category {
table {
tbody {
tr {
td {
.price-availability {
width: 20px;
height: 20px;
}
img {
flex: 0 0 20px;
-ms-flex: 0 1 auto;
max-width: 20px;
width: 20px;
}
}
}
}
}
}
.full-grid-overview {
padding-left: 10px;
padding-right: 10px;
}
.home-logo-item {
flex: 0 0 33.33%;
-ms-flex: 0 1 auto;
max-width: 33.33%;
width: 33.33%;
a {
padding: 15px;
}
}
.footer-list {
li {
margin-bottom: 10px;
}
}
.footer-copyright-text {
p {
font-size: 13px;
}
}
.header-content-2 {
h1 {
font-size: 35px;
}
.section-button {
justify-content: center;
}
}
.home-client-details-2 {
.client-caption-para {
font-size: 20px;
&:before {
font-size: 35px;
}
}
}
.download-feature-item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
}
.download-feature-item-inner {
h3 {
font-size: 23px;
}
p {
font-size: 14px;
}
}
.header-content-3 {
h1 {
font-size: 35px;
}
}
.home-service-text {
text-align: center;
margin-top: 20px;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
}
a {
font-size: 15px;
}
}
.home-service-text-2 {
h3 {
font-size: 18px;
}
a {
font-size: 15px;
}
}
.client-carousel-caption-2 {
.client-caption-para {
font-size: 22px;
}
}
.owl-carousel {
.owl-item {
.client-carousel-btn {
button {
width: 50px;
height: 50px;
img {
width: 15px;
}
}
}
}
}
.holder-name {
font-size: 17px;
}
.holder-designation {
font-size: 14px;
}
.holder-para {
font-size: 16px;
}
.page-title-inner {
.section-title {
h1 {
font-size: 25px;
}
}
}
.page-breadcrumbs {
li {
font-size: 14px;
}
}
.about-logo-content {
padding: 20px;
.home-logo-item {
a {
padding: 10px;
}
}
}
.blog-people-comment-thumb {
flex: 0 0 80px;
-ms-flex: 0 1 auto;
max-width: 80px;
width: 80px;
height: 80px;
margin-right: 20px;
}
.blog-people-comment-details {
margin-top: 10px;
}
.blog-people-comment-reply {
margin-top: 20px;
padding-left: 25px;
.blog-people-comment-thumb {
flex: 0 0 60px;
-ms-flex: 0 1 auto;
max-width: 60px;
width: 60px;
height: 60px;
margin-right: 15px;
}
}
.blog-comment-leave-area {
padding: 35px 25px;
}
.blog-sidebar-item-header {
padding: 20px;
}
.blog-search-area {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-sidebar-item-details {
padding-left: 20px;
padding-right: 20px;
}
.blog-recent-item a {
padding: 20px 0;
}
.blog-sidebar-tag-details {
padding-top: 10px;
padding-bottom: 10px;
}
.pricing-item-header {
padding: 20px;
h3 {
font-size: 20px;
img {
flex: 0 0 22px;
-ms-flex: 0 1 auto;
max-width: 22px;
width: 22px;
}
}
}
.pricing-item-amount {
padding: 20px;
h4 {
font-size: 35px;
small {
font-size: 20px;
}
span {
font-size: 25px;
}
}
}
.pricing-item-body {
padding: 30px 20px;
}
.pricing-item-list {
li {
font-size: 16px;
.pricing-list-arrow {
flex: 0 0 13px;
-ms-flex: 0 1 auto;
max-width: 13px;
width: 13px;
margin-right: 12px;
font-size: 13px;
&:before {
font-size: 13px;
}
}
.pricing-list-info {
font-size: 17px;
i {
font-size: 17px;
&:before {
font-size: 17px;
}
}
}
}
}
.box-card-inner {
padding: 30px;
}
.box-card-title {
font-size: 21px;
}
.box-card-para {
font-size: 15px;
}
.box-card-link {
font-size: 16px;
}
.faq-accordion-header {
padding: 20px;
}
.faq-accordion-body-inner {
padding: 20px;
}
.authentication-user-header {
h1 {
font-size: 25px;
}
}
.error-page-inner {
h1 {
font-size: 100px;
letter-spacing: 15px;
}
h3 {
font-size: 23px;
margin-top: 20px;
}
p {
font-size: 17px;
margin-top: 20px;
}
.btn1 {
margin-top: 25px;
}
}
.blog-quote {
padding: 20px;
h3 {
font-size: 22px;
}
p {
font-size: 22px;
&.blog-tag-name {
font-size: 14px;
}
}
}
.client-carousel-thumb {
width: 240px;
height: 240px;
}
.terms-privacy {
.sub-section-title {
font-size: 22px;
}
p {
font-size: 16px;
}
}
.modal-box {
padding: 15px;
}
.modal-video {
iframe {
height: auto;
}
}
.counter-loader {
display: none;
}
.authentication-social-item {
flex: 0 0 100%;
-ms-flex: 0 1 auto;
max-width: 100%;
width: 100%;
}
}
// from 1550
@media #{$from-1550} {
.main-nav {
nav {
padding-left: 3rem;
padding-right: 3rem;
}
}
.navbar {
padding: .5rem 5rem;
}
.header-inner {
padding: 0 5rem;
}
.header-content {
h1 {
font-size: 80px;
}
p {
font-size: 20px;
}
}
.header-bg-2 {
padding: 190px 0 180px;
}
.full-grid-overview {
flex: 0 0 40%;
-ms-flex: 0 1 auto;
max-width: 40%;
width: 40%;
margin-left: auto;
margin-right: auto;
padding-left: 90px;
}
.header-content-2 {
h1 {
font-size: 85px;
}
}
.client-thumbnail-img {
flex: 0 0 105px;
-ms-flex: 0 1 auto;
max-width: 105px;
width: 105px;
height: 105px;
margin-right: 25px;
}
.header-content-3 {
max-width: 950px;
h1 {
font-size: 85px;
}
}
}
// from 768
@media #{$from-768} {
.navbar-expand-md {
justify-content: space-between;
}
}
@media #{$between-575-767} {
.home-facility-overview {
margin: auto;
max-width: 540px;
}
}