/* Responsive CSS For all Bootstrap Breakpoints */
@media
only screen and (max-width : 1199px) {
/* Styles */
#nav-icon {
  width: 18px;
  height: 16px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  display: inline-block;
}
#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: var(--eerieBlack);
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0px;
}
#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
  top: 7px;
}
#nav-icon span:nth-child(4) {
  top: 14px;
}
#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.navbar-toggler { padding-right: 20px; padding-left: 20px; border-radius: 0; background: none; }
.navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler.open { background-color: var(--eerieBlack); }
.navbar-toggler-icon { color: var(--eerieBlack); display: flex; width: auto; height: auto; background: none; }
.navbar-toggler-icon em { display: inline-block; font-size: 13px; margin-right: 10px; line-height: 20px; font-style: normal; }
.navbar-toggler:hover #nav-icon span, .navbar-toggler:focus #nav-icon span, .navbar-toggler.open #nav-icon span { background: #FFF; }
#main-header.js-replace-color #nav-icon span, #main-header.dropdown-open #nav-icon span { background: #FFF; }

#mainMenu { position: absolute; left: 0; right: 0; top: 100%; padding-bottom: 20px; }
#mainMenu > .nav { max-width: 960px; margin: 0 auto; }
#main-header.js-replace-color #mainMenu, #main-header.dropdown-open #mainMenu { background-color: var(--eerieBlack); }

}

/* XS-MD ----------- */
@media
only screen and (max-width : 991px) {
/* Styles */
body { max-width: 100vw; overflow-x: hidden; overflow-y: visible; }
.container { max-width: 100%; padding-left: 30px; padding-right: 30px; }
#mainMenu > .nav { justify-content: center !important; }
#main-nav .dropdown-menu { padding-top: 32px; }
#main-nav .dropdown-column { flex: 1 0 33.3333%; max-width: 33.3333%; margin-bottom: 20px; }

.footer-top { padding-top: 100px; }

.home .hero .image img { margin-top: 0; max-width: 265px; }
body:not(.home) .hero .image { display: none; }
.hero h1 > span { height: 40px; padding: 0 8px; }
.hero h1 > span > svg { max-height: 25px; }

#why { padding: 100px 0; }

#process { padding: 100px 0; height: auto; }
#process .item.card .badge { top: 14px; }
#process .items { flex-direction: column; }
#process .item.primary { flex: 1 0 100%; max-width: 100%; width: 100%; }
#process .item.primary h2 br { display: none; }
#process .item.card { flex: 1 0 60%; max-width: 60%; width: 60%; }
#process .item.card::after { transform: rotate(45deg); }
#process .item.card:nth-child(odd) { align-self: flex-end; }
#process .item.card:nth-child(odd)::after { transform: scaleX(-1) rotate(45deg); right: auto; left: -65px; }
#process .item + .item { margin-left: 0; margin-top: 15px; }

#what { padding: 100px 0; }
#what .nav-pills .nav-link { font-size: 21px; }
#what .items > .item { flex: 1 0 100%; max-width: 100%; }

#results { padding: 100px 0; }

#testimonials .item { display: none; }
#testimonials .item:nth-child(1), #testimonials .item:nth-child(2) { display: flex; flex: 1 0 50%; max-width: calc(50% - 15px);}

#latest-posts { padding: 100px 0; }

#intro { padding: 100px 0; }
#intro .items { margin-top: 100px; }

}

/* SM - Small Devices ----------- */
@media
only screen and (max-width : 767px) {
/* Styles */
.container > section { margin-left: -15px; margin-right: -15px; }

.main-nav #logo > img { width: 140px; height: auto; }
#main-nav .social-links { margin-left: 10px; padding-left: 10px; }
.social-links > li + li { margin-left: 8px; }
.social-links > li > a { width: 30px; height: 30px; font-size: 12px; }
#mainMenu > .nav { flex-direction: column; align-items: stretch !important; }
#main-nav .menu-item { width: 100%; text-align: center; }
#main-nav .dropdown-menu { position: static; padding: 16px 0; }
#main-nav .dropdown-column { flex: 1 0 100%; max-width: 100%; margin-bottom: 10px; }
#main-nav .dropdown-column .nav-icon { flex: 1 0 32px; max-width: 32px; }
#main-nav .dropdown-column .dropdown-item { font-size: 14px; }
#main-nav .menu-item.btn { max-width: 70%; margin: 0 auto; }

.footer-top { padding-top: 60px; }
.footer-bot .col-md-6 + .col-md-6 { text-align: left; }
.footer-bot .col-md-6 > a { display: block; margin-top: 5px; }
.footer-bot a + a { margin-left: 0; }

.hero { padding-top: 150px; }
.hero h1 > span { display: none; }

#see-how-btn { transform: scale(.75); }

#growth-marketing { padding-bottom: 50px; }
#growth-marketing h2::after { display: none; }
#growth-marketing .image { margin-top: 30px; }

#why { padding: 70px 0; }

#cta-bar { padding: 60px 0; }
#cta-bar h2 .icon { display: none; }

#process { padding: 70px 0; }
#process .item { flex: 1 0 100% !important; max-width: 100% !important; width: 100%; }
#process .item.card:not(:last-child)::after { display: none; }
#process .item.card h4 { padding-right: 30px; }
#process .item.card .badge { right: 14px; }

#what { padding: 70px 0; }
#what .items { margin-top: 60px; }

#results { padding: 70px 0; }
#results .intro > .col-12:last-child { text-align: left; }
#results .item { flex: 1 0 100%; max-width: 100%; }
#results .item:nth-child(2n) { transform: none; }
#results .item .card { flex-direction: column; }
#results .item .link { margin: 20px 0 0 0; }

#testimonials { padding: 70px 0; }
#testimonials .item, #testimonials .item:nth-child(1), #testimonials .item:nth-child(2) { display: flex; flex: 1 0 100%; max-width: 100%; }
#testimonials .closing-text > .d-flex { flex-direction: column; }

#latest-posts { padding: 70px 0; }
#latest-posts .post { flex-direction: column; }
#latest-posts .post .image { flex: 1 0 100%; max-width: 100%; }

#intro { padding: 70px 0; }
#intro .items { margin-top: 70px; }

#faqs { padding-top: 70px; }

}

/* XS - Small Devices ----------- */
@media
only screen and (max-width : 576px) {


}

/* SM - Small Devices ----------- */
@media only screen
and (min-width : 576px)
and (max-width : 767px) {
/* Styles */



}

/* MD - Small Devices ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 991px) {
/* Styles */



}

/* > Tablet */
@media
only screen and (min-width : 992px) {
/* Styles */

.dropdown:hover > .dropdown-menu { display: block; }

}


/* LG - Medium Devices ----------- */
@media only screen
and (min-width : 992px)
and (max-width : 1199px) {
/* Styles */



}


/* XL - Large Devices */
@media only screen
and (min-width : 1200px)
and (max-width : 1399px) {
/* Styles */
#main-nav .menu-item:not(.btn) .nav-link { padding: 13px 12px; }


}