/*
	Theme Name:  MiPro Theme 2023
	Theme URI:   https://www.ccgideas.com
	Description: Custom WordPress Theme built by Cummings Creative Group and based upon the EA Starter Theme by Bill Erickson: https://github.com/billerickson/EA-Starter
	Author:      Bill Erickson & Nathan Owens
	Author URI:  https://www.ccgideas.com
	Version:     1.0.0
	License:     GPL-2.0+
	License URI: http://www.gnu.org/licenses/gpl-2.0.html


	BEFORE MODIFYING THIS THEME:
	Please read the instructions here (private repo): https://github.com/Cummings-Creative-Group/CCG-WordPressStarterTheme/tree/master/themes/ccgBlank2020-guten
	Devs, contact me if you need access
*/

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
blockquote {
	font-size: 110%;
	padding: 10px;
	background: #f3f3f3;
	font-style: italic;
}
blockquote p {
	font-size: 110%;
}
blockquote cite {
	font-size: 100%;
	font-style: normal;
	opacity: .7;
}
blockquote em {
	font-style: normal;
}
blockquote > p:last-child {
    margin-bottom: 0;
}

.clear{clear:both;}


.alignwide,
.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}


/* Gravity Forms custom classes: labels-hidden & labels-hidden-top */
.gform_wrapper .gform_fields .labels-hidden label { 
	/* hides any label with the field */
	display: none!important;
  }
  .gform_wrapper .gform_fields .labels-hidden-top > label {
	   /* only hides the field's top label */
	display: none!important;
  }
  .gform_wrapper .gform_fields .gfield .ginput_container input[type="text"] {
	width: 100%;
  }
  .gform_button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
  }
  
  /* there's also Gravity Forms classes like gf_left_half, gf_right_half, gf_left_third, gf_middle_third, gf_list_2col, gf_list_3col */


 /**********************************
  TURN OFF PAGE TITLE
 */ 
  /* .entry-title {
	display: none;
  } */
 /**********************************
 */


/* WordPress (WP) Admin Bar */
#wpadminbar {
    min-width: 0;
    max-width: 40px;
    overflow: hidden;
    transition: .5s;
}
#wpadminbar:hover {
    max-width: 100%;
    overflow: unset;
}
@media screen and (max-width: 782px) {
    #wpadminbar {
        top: unset;
        bottom: 0;
        position: fixed;
    }
}

section.no-results {
    min-height: 50vh;
}
.grecaptcha-badge {
    z-index: 99999999;
}


/* THEME STYLES */

body {
  margin: 0;
}
.mipro-wrap {
  font-family: 'Overpass', sans-serif;
}
.mipro-wrap * {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 25px;
  padding-right: 25px;
}

/***** typography *****/
.mipro-wrap h1 {
  margin-top: 38px;
  margin-bottom: 38px;
  font-weight: 700;
  line-height: 1.5;
}
.mipro-wrap h1 em {
  display: block;
}
.text-red {
  color: #F51900;
}
.text-center {
  text-align: center;
}
/***** header *****/
.header {
  background-color: #000;
}
.logo {
  /* height: 47px; */
  height: 35px;
  display: inline-block;
}
.logo img {
  height: 100%;
  width: auto;
  display: block;
}

/***** banner *****/
@keyframes scrolling-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.banner {
  background: linear-gradient(113.98deg, #EBEBEB -2.55%, rgba(217, 217, 217, 0) 86.8%);
}
.banner__phone {
  display: flex;
  justify-content: center;
}
.banner-hero {
  position: relative;
}
.banner-hero__device {
  width: 100%;
  height: auto;
}
.banner-hero__list {
  position: absolute;
  color: #fff;
  overflow: hidden;
}
.banner-hero__list ol {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: translateY(100%);
  animation: 2s cubic-bezier(0.42, 0, 0.7, 1.4) 2.2s scrolling-up forwards;
}
.banner-hero__list li {
  font-size: 36px;
  line-height: 1.27;
}
.banner-hero__list small {
  font-size: 0.67em;
  font-weight: 400;
  display: block;
}

/***** banner device animation *****/
@keyframes big-circle-scaling {
  0% {
    transform: scale(0);
    background-color: rgba(171, 9, 9, 0.3);
  }
  100% {
    transform: scale(3.75);
    background-color: rgba(171, 9, 9, 0.2);
  }
}
@keyframes middle-circle-scaling {
  0% {
    transform: scale(0);
    background-color: rgba(171, 9, 9, 0.3);
  }
  100% {
    transform: scale(2.75);
    background-color: rgba(171, 9, 9, 0.2);
  }
}
@keyframes small-circle-scaling {
  0% {
    transform: scale(0);
    background-color: rgba(171, 9, 9, 0.3);
  }
  100% {
    transform: scale(1.75);
    background-color: rgba(171, 9, 9, 0.3);
  }
}
@keyframes logo-scaling {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
@keyframes hide-circles {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

.banner-hero__animation {
  position: absolute;
  background-color: #F51900;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation: 0.5s linear 2s 1 forwards hide-circles;
}

.mi-pro-animation__logo {
  position: relative;
  width: auto;
  z-index: 2;
  animation: 0.5s linear 1s 1 forwards logo-scaling;
}
.mi-pro-animation__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.mi-pro-animation__circle--small {
  animation: 0.5s linear 1s 1 forwards small-circle-scaling;
}
.mi-pro-animation__circle--middle {
  animation: 1s linear 0.5s 1 forwards middle-circle-scaling;
}
.mi-pro-animation__circle--big {
  animation: 1.5s linear 0s 1 forwards big-circle-scaling;
}

.stores {
  display: flex;
}
.stores--center {
  margin-bottom: 120px;
  justify-content: center;
  align-items: center;
}

/***** steps *****/
.steps {
  padding-top: 90px;
  padding-bottom: 40px;
}

.number-list {
  position: relative;
  padding-bottom: 65px;
  margin-bottom: 15px;
}
.number-list:before {
  content: "";
  position: absolute;
  bottom: 0;
  border-left: 1px dashed #000;
}
.number-list:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 32px;
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
}
.number-list h2 {
  margin: 0;
  padding: 0;
}
.number-list a {
  text-decoration: none;
  font-weight: 700;
  font-style: italic;
  color: #F51900;
  padding-left: 3px;
  padding-right: 3px;
}
.number-list__number {
  position: relative;
  border-radius: 50%;
  border: 1px solid #F51900;
  display: flex;
  justify-content: center;
  color: #F51900;
  background-color: #fff;
  flex-shrink: 0;
  transition: all 0.5s linear;
}
.number-list__number.on {
  color: #fff;
  box-shadow: inset 0 0 0 50px #F51900;
}
.number-list__headline {
  display: flex;
  align-items: center;
}

.number-list__device {
  display: flex;
  justify-content: center;
}

.squared-list {
  font-weight: 500;
}
.squared-list ul {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}
.squared-list li:not(.quote-ones) {
  position: relative;
  padding-left: 22px;
  line-height: 1.2;
}
.squared-list li:not(.quote-ones):before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  border: 1px solid #F51900;
  transition: all 0.5s linear;
}
.squared-list li.full:not(.quote-ones):before {
  box-shadow: inset 0 0 0 10px #F51900;
}

.quote-ones {
  position: relative;
  padding: 15px;
  background-color: #fff;
  display: flex;
}
.quote-ones:before,
.quote-ones:after {
  content: "";
  position: absolute;
  height: 39px;
  display: block;
}
.quote-ones:before {
  top: 0;
  left: 0;
  border-top: 1px solid #F51900;
  border-left: 1px solid #F51900;
}
.quote-ones:after {
  right: 0;
  bottom: 0;
  border-right: 1px solid #F51900;
  border-bottom: 1px solid #F51900;
}

/***** animated device *****/
.animated-device {
  position: relative;
}
.aminated-device__animation {
  position: absolute;
  transition: all 0.5s linear;
}
.animated-device__main {
  width: 100%;
}

/***** footer *****/
.footer {
  background-color: #000;
  color: #fff;
  font-weight: 600;
}
.footer a {
  color: inherit;
}

/***** media queries *****/

@media (max-width: 1439px) {
  .footer {
    padding-left: 45px;
    padding-right: 45px;
  } 
}

@media (max-width: 1033px) {

  .banner-hero {
    width: 237px;
  }
  .banner-hero__list {
    left: 18px;
    right: 30px;
    bottom: 67px;
    top: 69px;
  }
  .banner-hero__list li {
    font-size: 22px;
  }
  .banner__headline h1 {
    display: none;
  }
  .banner__mobile-headline {
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
  }
  .banner__mobile-headline h1 {
    margin-top: 0;
  }

  .quote-ones:before,
  .quote-ones:after {
    width: 246px;
  }

  .squared-list li:not(.quote-ones) {
    font-size: 20px;
  }
  .squared-list li:not(.quote-ones):before {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 740px) {
  .mipro-wrap h1 {
    font-size: 32px;
  }
  .mipro-wrap h2 {
    font-size: 32px;
  }
  .mipro-wrap .content h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .header {
    padding-top: 11px;
    padding-bottom: 10px;
  }

  .logo {
    height: 27px;
  }

  .banner {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .banner__mobile-headline {
    position: relative;
    display: block;
    padding-bottom: 10px;
  }
  .banner__mobile-headline:after {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 109px;
    height: 1px;
    border-top: 2px solid #F51900;
  }

  .banner-hero__animation {
    left: 17px;
    top: 16px;
    height: 402px;
    width: 190px;
    border-radius: 20px;
  }
  .mi-pro-animation__logo {
    height: 33px;
  }
  .mi-pro-animation__circle {
    width: 106px;
    height: 106px;
    margin-left: -54px;
    margin-top: -54px;
  }

  .number-list:before {
    left: 50%;
    top: 0;
  }
  .number-list:after {
    left: 50%;
    margin-left: -3px;
  }
  .number-list__headline {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .number-list__number {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 62px;
  }
  .number-list__number:before {
    margin-left: -29px;
    margin-top: -29px;
  }
  .number-list__device {
    position: relative;
    width: 100%;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    background-color: #fff;
  }
  .number-list h2 {
    position: relative;
    background-color: #fff;
  }

  .quote-ones {
    font-size: 22px;
  }
  

  .squared-list ul {
    position: relative;
    margin-left: 0;
    padding-left: 0;
    background-color: #fff;
  }
  .squared-list li:not(.quote-ones):before {
    width: 13px;
    height: 13px;
  }
  .squared-list li {
    margin-top: 36px;
  }

  .stores {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    padding-top: 11px;
    padding-bottom: 8px;
    background-color: #fff;
    box-shadow: 0px -1px 14px rgba(0, 0, 0, 0.12);
    justify-content: space-around;
  }
  .stores.stores--center {
    display: none;
  }
  .stores__item {
    max-width: 35%;
  }
  .stores img {
    max-width: 100%;
    height: auto;
  }

  .animated-device {
    width: 178px;
  }
  .aminated-device__animation--dashboard {
    top: 87px;
    right: 36px;
    width: 120px;
  }
  .aminated-device__animation--dashboard.on {
    top: 56px;
    right: 70px;
    width: 153px;
  }
  .aminated-device__animation--activities {
    top: 133px;
    right: 16px;
    width: 151px;
  }
  .aminated-device__animation--activities.on {
    top: 120px;
    right: 60px;
    width: 160px;
  }
  .aminated-device__animation--pick {
    top: 75px;
    right: 20px;
    width: 146px;
  }
  .aminated-device__animation--pick.on {
    top: 60px;
    right: 70px;
    width: 160px;
  }

  .footer {
    padding-top: 30px;
    padding-bottom: 120px;
    padding-bottom: clamp(100px, 23vw, 130px);
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
  }
  .footer__phone {
    font-size: 16px;
  }
  .footer__copy {
    margin-top: 20px;
    font-size: 12px;
  }
}

@media (min-width: 741px) {

  .mipro-wrap h2 {
    font-size: 42px;
  }

  .banner__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .banner__headline,
  .banner__phone {
    flex: 1;
  }
  .banner__stores {
    flex-direction: column;
    margin-bottom: 100px;
  }

  .steps__item {
    display: flex;
  }

  .number-list:before {
    left: 35px;
    top: 70px;
  }
  .number-list__number {
    width: 70px;
    height: 70px;
    font-size: 42px;
    line-height: 74px;
    margin-right: 19px;
  }
  .number-list__number:before {
    margin-top: -35px;
    margin-left: -35px;
  }

  .squared-list ul {
    margin-left: 30px;
  }
  .squared-list li {
    margin-top: 45px;
  }

  .quote-ones {
    margin-left: -50px;
  }

  .footer {
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center; /* space-between */
  }
  .footer__phone {
    font-size: 20px;
  }
  .footer__copy {
    font-size: 16px;
  }
}

@media (min-width: 741px) {
  .header {
    padding-top: 20px;
    padding-bottom: 19px;
  }
}

@media (min-width: 741px) and (max-width: 1033px) {
  .mipro-wrap h1 {
    font-size: 48px;
  }

  /* .header {
    padding-top: 31px;
    padding-bottom: 31px;
  } */

  .banner {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .stores--vertical {
    flex-direction: column;
    padding-left: 30px;
    border-left: 3px solid #F51900;
  }

  .banner-hero__animation {
    left: 17px;
    top: 16px;
    height: 402px;
    width: 190px;
    border-radius: 17px;
  }
  .mi-pro-animation__logo {
    height: 33px;
  }
  .mi-pro-animation__circle {
    width: 106px;
    height: 106px;
    margin-left: -54px;
    margin-top: -54px;
  }

  .animated-device {
    width: 197px;
  }
  .aminated-device__animation--dashboard {
    top: 96px;
    right: 40px;
    width: 132px;
  }
  .aminated-device__animation--dashboard.on {
    top: 64px;
    right: 77px;
    width: 170px;
  }
  .aminated-device__animation--activities {
    top: 146px;
    right: 17px;
    width: 168px;
  }
  .aminated-device__animation--activities.on {
    top: 150px;
    right: 73px;
    width: 160px;
  }
  .aminated-device__animation--pick {
    top: 86px;
    right: 23px;
    width: 161px;
  }
  .aminated-device__animation--pick.on {
    top: 60px;
    right: 77px;
    width: 190px;
  }

  .qoute-ones {
    font-size: 26px;
  }

}

@media (min-width: 741px) and (max-width: 1439px) {
  .steps__device {
    width: 47%;
  }
  .steps__info {
    width: 53%;
  }

  .number-list__device {
    position: absolute;
    top: 0;
    left: -88%;
    width: 88%;
  }
}

@media (min-width: 1034px) {
  /* .header {
    padding-top: 36px;
    padding-bottom: 35px;
  } */

  .banner {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .banner__mobile-headline {
    display: none;
  }
  .banner__headline h1 {
    position: relative;
    padding-left: 30px;
  }
  .banner__headline h1:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 15px;
    border-left: 3px solid #F51900;
  }

  .banner-hero {
    width: 377px;
  }

  .banner-hero__list {
    left: 34px;
    right: 60px;
    bottom: 102px;
    top: 111px;
  }

  .banner-hero__animation {
    left: 25px;
    top: 24px;
    height: 641px;
    width: 304px;
    border-radius: 30px;
  }
  .mi-pro-animation__logo {
    height: 53px;
  }
  .mi-pro-animation__circle {
    width: 156px;
    height: 156px;
    margin-left: -78px;
    margin-top: -78px;
  }

  .squared-list li:not(.quote-ones) {
    font-size: 24px;
  }
  .squared-list li:not(.quote-ones):before {
    width: 15px;
    height: 15px;
  }

  .quote-ones {
    font-size: 32px;
  }

  .animated-device {
    width: 275px;
  }
  .aminated-device__animation--dashboard {
    top: 134px;
    right: 59px;
    width: 183px;
  }
  .aminated-device__animation--dashboard.on {
    top: 73px;
    right: 108px;
    width: 275px;
  }
  .aminated-device__animation--activities {
    top: 206px;
    right: 24px;
    width: 234px;
  }
  .aminated-device__animation--activities.on {
    top: 150px;
    right: 100px;
    width: 300px;
  }
  .aminated-device__animation--pick {
    top: 120px;
    right: 32px;
    width: 217px;
  }
  .aminated-device__animation--pick.on {
    top: 70px;
    right: 108px;
    width: 287px;
  }
  
}

@media (min-width: 1034px) and (max-width: 1439px) {
  .mipro-wrap h1 {
    font-size: 52px;
  }
  .quote-ones:before,
  .quote-ones:after {
    width: 285px;
  }
}

@media (min-width: 1440px) {
  .mipro-wrap h1 {
    font-size: 62px;
  }
  
  .quote-ones:before,
  .quote-ones:after {
    width: 387px;
  }

  .steps__device,
  .steps__info {
    flex: 1;
    width: 50%;
  }

  .number-list__device {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
  }

  .footer {
    padding-left: 81px;
    padding-right: 81px;
  }
}