@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;400;700&family=Snippet&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&display=swap');
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald);


body,
input,select,textarea,button,
div,span,p {
  font-family: 'Karla', Helvetica, sans-serif;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Lato', 'Helvetica', sans-serif;
  font-weight: 700;  
}

.push { margin-bottom: 0; margin-top: .5rem; }
.push1 { margin-bottom: 0; margin-top: 1rem; }
.push2 { margin-bottom: 0; margin-top: 2rem; }
.push3 { margin-bottom: 0; margin-top: 3rem; }
.push4 { margin-bottom: 0; margin-top: 4rem; }
.push5 { margin-bottom: 0; margin-top: 5rem; }

h1 { font-size: 3rem; margin: 0;}
h2 { font-size: 2.5rem; margin: 0;}
h3 { font-size: 2rem; margin: 0;}
h4 { font-size: 1.6rem; margin: 0; }
p { font-size: 1rem; line-height: 1.5; }
.radius { border-radius: .5rem; }
.button { font-weight: 400; }

.light {
  font-weight: 300;
}

.poplight {
  font-weight: 300;
}

.thick {
  font-weight: 700; 
}

.bigger {
  font-size: 1.2rem;
}

.round {
  border-radius: 50%;
}

.checked {
  color: #F9CA2B;
}

.categorylisting a {
  color: black;  
}

.whitelinking a {
  color: white;  
}

.dimmed {
  color: #A9A9A9; 
}

.karla {
  font-family: 'Karla', Helvetica, sans-serif;
  font-weight: 400;
}

<!-- top part -->



<!-- label colors -->

.lime {
  background-color: #BCE971;
  color: black;
}

.sun {
  background-color: #FFE360;
  color: black;  
}

.labelorder {
  background-color: #ECF9F8;
  color: black;
}

<!-- end of label colors -->
.breath {
  padding-top: 1rem;
  padding-bottom: 1rem;
}



.avatar {
  height: 32px;  
  width: 32px;
  border-radius: 50%;
}

.button {
  margin-bottom: 0;
  background-color: white;
  color: black;
  transition-duration: 0.4s;
}

.button.yehro {
  margin-bottom: 0;
  background-color: black;
  color: white;
  transition-duration: 0.4s;
}
.button.yehro:hover {
  background-color: white;
  border-color: black;
  color: black;
}

.button:hover {
  background-color: black;
  color: white;
}

.bg1 {
  background-color: #F24443;
}

.bg2 {
  background: white;
  font-color: black;
}

.bg2 .cell {
  margin-bottom: 1rem;

}

.bg72 .cell {
  padding: 20px;
  margin-bottom: 1rem;
  margin-right: 5px;
}

.aboutus p {
  font-size: 1.4rem;
}

.aboutus .thumbnail {
  box-shadow: 0 0 10px 1px #D5E7EE;
  border: .5rem; 
  padding: 20px;
}

.aboutus a:hover {
  color: #FB513C;
}

.hero {
  padding-top: 1rem;
}

.bg1 .hero h1, .bg1 .hero h2 {
  color: white;
}

.bg2 .callout {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem; 
}

.bg72 .callout {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem; 
}

.hipborder {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;  
}

.bg2 a {
  color: black;  
}

.bg72 a {
  color: black;  
}

.workyehro .callout {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;
  padding: 35px;
}

.workyehro a {
  color: black;
}

.hero h2 {
  font-size: 1.6rem;
  font-family: Nunito;
}
.services {
  margin-top: 3rem;
  padding-bottom: 3rem;
}

.navvy .logo {
  height: 60px;
}

.services a {
  color: black;
}

.benefits {
  padding-top: 3rem;
}

.how {
  padding-top: 6rem;
}

.bhow {
  padding-bottom: 6rem;
}

.roundingeffect {
  border-radius: 50px;
}

footer {
  padding-top: 3rem;
  margin-top: 3rem;
  background: #191919;
  padding-bottom: 3rem;
}

footer a, footer p {
  color: white;
  font-size: 1.1rem;
}

footer a:hover {
  color: #D6D6D6;
}

footer h1 {
  color: white;
}

header {
  background: #F24443;
  padding-bottom: 1rem;
}

header .grid-container {
  padding-top: 1rem;
  background: #F24443;
}

header a {
  color: white;
}

header li {
  font-size: 1.2rem
}

header a:hover {
  color: white;
}

header .logo {
  height: 40px;  
}

.linez {
   border: 10px solid black;
}

.liney {
  border: 2px solid #DFE6E9
}

.questions .accordion {
  margin-top: 1.2rem;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.questions a {
  font-size: 1rem;
  color: black;
}

.questions p {
  margin-top: .5rem;  
}

.singup .callout {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;
}

.singup a {
  color: black;
  font-size: 1rem;
}

.signupbutton {
  border-radius: .5rem;  
}

.singleblog a {
  color: black;  
}

.blog a {
  color: black;  
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-decoration: none;
  margin: 3px 2px;
}

.subscription {
  padding: 20px;
}

.backgroundpink {
  background-color: #F24443;
}

.reachus .callout {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;
}

.stepthree {
  background: #F3F3F3; 
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: 100%;
  margin-top: 100px;
  left: 50%;
  padding: 4rem;
}

.xstepthree .thumbnail {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem; 
  padding-bottom: 3rem;
  border-radius: 8px;
}

.pc-a {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;
  background-color: #ECF9F8;
}

.pc-b {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;
  background-color: #ECF9F8;
}

.pc-c {
  box-shadow: 0 0 4px 1px #E7E9E9;
  border: .5rem;
  background-color: #ECF9F8;
}
.pc-c a {
  color: white;
}

.pc-d {
  box-shadow: 0 0 6px 1px #E7E9E9;
  border: 1rem;
  background-color: #ECF9F8;
}

.auth h1 {
  font-size: 1.75rem;
}


<!--section of slides -->


<!-- end of section of slides -->

<!-- homepage articles blocks -->
.a-col-1 {
  position: relative;
  width: 25%;
  webkit-box-flex: 0;
  webkit-flex: 0 0 auto;
  ms-flex: 0 0 auto;
  flex: 0 0 auto;
  color: #fff;
}

.a-col-2 {
  width: 75%;
  padding-right: 1vw;
  padding-left: 1vw;
  webkit-box-flex: 0;
  webkit-flex: 0 0 auto;
  ms-flex: 0 0 auto;
  flex: 0 0 auto;
  grid-auto-columns: 1fr;
  grid-column-gap: 40px;
  ms-grid-columns: 1fr 1fr;
  ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.a-col-2 a {
  color: black;
}

.a-col-h2 {
  max-width: 800px;
  margin-top: -30px;
  font-size: 90px;
  line-height: 110px;
  letter-spacing: -1px;
}

.a-col-p {
  font-size: 23px;
}

.mytextdiv{
  display:flex;
  flex-direction:row;
   align-items: center;
}
.mytexttitle{
  flex-grow:0;
  margin-right: 15px

}

.divider{
  width:  80%;
  height: 1px;
  background-color: #9f9f9f;
}


 <!-- end of article homepage css -->
.xlearnmore {
  padding-bottom: 10px;
  border-bottom: 1px solid #1f67db;
  line-height: 48px;
  color: black;
}

.learny p {
  color: black;
  padding-bottom: 10px;
  border-bottom: 1px solid #1f67db;
  line-height: 90%;
  width: 15%;
}

.learnys p {
  color: black;
  padding-bottom: 10px;
  border-bottom: 1px solid #1f67db;
  line-height: 90%;
}

.maininfo {
 padding: 5rem;
}

.maininfo .cell {
  padding: 3rem;
}

<!-- stuff -->
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 18px;  
  border: none;
  outline: none;
  color: white;
  padding: 10px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 110px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

/* ---------------------- Small Screens --------------------- */

@media screen and (max-width: 39.9375em) {

  
  .navvy .avatar {
    height: 32px;
    width: 32px;
  }
  
  .learny p {
    color: black;
    padding-bottom: 10px;
    border-bottom: 1px solid #1f67db;
    line-height: 90%;
    width: 24%;
  }
  
  .navvy {
    font-size: .9rem !important;
  }
  
  footer .cell {
    padding-bottom: 1rem;
  }
  
  .icon {
  padding-left: 1rem;
  }
  
  .hero h1 {
    font-size: 2.6rem;
    line-height: 3rem;
    margin-bottom: 1.3rem;
  }
  
  .stepthree h3 {
    font-size: 1.4rem;
  }
  
  .xstepthree img {
   height: auto; 
    width: auto; 
    max-width: 55px; 
    max-height: 55px;  
  }
  
  .phonez a {
    color: black;  
  }
  
  .phonez .fas {
    background: white;  
  }
  
  .benefits h2 {
    line-height: 1.2;  
  }
  
  .frog {
    font-size: 1.4rem;
  }
  
}