@charset "UTF-8";
/* DEFAULT */
@media only screen {
  .answer {
    color: #FFFFFF;
    margin-top: 0;
    margin-bottom: 1.5em;
  }
  .question {
    color: #FFFFFF;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 0;
  }
  .check {
    height: 20px;
    margin-right: 10px;
    width: 27px;
  }
  .half {
    padding: 1px 2vw;
  }
  .li {
    margin: 0 25px;
  }
  .outcome {
    background-color: rgba(0, 20, 112, 0.50);
    border-radius: 10px;
    padding: 2vw 2vw 0 2vw;
  }
  .result {
    background: url("../images/results.webp") no-repeat 50% 0%;
    background-size: contain;
    border: 1px solid #FFFFFF;
    padding-top: 100px;
  }
  .review {
    border: 1px solid #FF00FF;
    border-radius: 10px;
    margin: 1%;
    padding: 0 1vw;
    width: 28%;
  }
  .service {
    height: 100px;
    width: 100px;
  }
  .stars {
    height: 30px;
    margin: 2px 16px -2px 6px;
    width: 149px;
  }
  .step {
    color: #00FFFF;
    font-family: 'inter-bold', Helvetica, Arial, "sans-serif";
    font-size: 4em;
    margin: 0;
  }
  .swoosh {
    margin-top: -60px;
  }
  .talents {
    background-color: rgba(61, 15, 146, 0.50);
    border-radius: 10px;
    padding: 0 2vw;
  }
  #analysis {
    background-color: rgba(61, 15, 146, 0.50);
    border-radius: 20px;
    margin: 40px 2vw;
  }
  #cta-1 {
    margin: 14px;
  }
  #cta-1a a {
    padding: 8px 28px;
  }
  #cta-1a a:hover {
    color: #FF0000;
    text-decoration-color: #FF0000;
  }
  #cta-1b a {
    color: #FFFFFF;
    ;
    text-decoration: none;
  }
  #cta-1b a:hover {
    color: #001470;
    text-decoration: underline;
    text-decoration-color: #001470;
  }
  #cta-2 a {
    color: #FFFFFF;
    padding: 8px 12px;
  }
  #cta-2 a:hover {
    color: #00F600;
    text-decoration-color: #00F600;
  }
  #cta-2b a {
    padding: 8px 22px;
  }
  #cta-3 a, #cta-4 a {
    color: #FFFFFF;
    padding: 8px 12px;
  }
  #cta-3 a:hover, #cta-4 a:hover {
    color: #00F600;
    text-decoration-color: #00F600;
  }
  #cta-5 {
    margin: 0 1em;
  }
  #cta-5 a {
    color: #FFFFFF;
    padding: 8px 22px;
  }
  #cta-5 a:hover {
    color: #00F600;
    text-decoration-color: #00F600;
  }
  #cta-6a a {
    padding: 8px 10px;
  }
  #cta-6b a {
    padding: 8px 24px;
  }
  #cta-6c a {
    padding: 8px 16px;
  }
  #design {
    margin: 0 auto;
    max-width: 1000px;
  }
  #dfw {
    margin-top: 10px;
  }
  #graphic-design {
    padding: 60px 0;
  }
  #grid1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  #grid1 p {
    color: #FFFFFF;
    font-weight: bold;
    margin: 40px 2vw 2vw 2vw;
    text-align: left;
  }
  #grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #grid4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin: 0 auto;
    max-width: 1000px;
  }
  #grid5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  #left {
    border-right: 1px solid #00FFFF;
  }
  #reviews, #package, #outcomes, #process, #talent, #faq, #website {
    padding-bottom: 60px;
  }
  #trust, #package, #outcomes, #process, #talent, #faq, #website {
    padding-top: 60px;
  }
  #swoosh {
    height: auto;
    max-width: 2000px;
    width: 60vw;
  }
  #talent p {
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
  }
  #web-design, #graphic-design, #outcomes, #process, #talent, #faq {
    background: url("../images/web-design.webp") no-repeat 50% 50%;
    background-size: cover;
  }
}
/* MEGAPIXEL */
@media only screen and (min-width: 1921px) {}
/* DESKTOP */
@media only screen and (max-width: 1920px) {}
/* LAPTOP */
@media only screen and (max-width: 1280px) {
  .result {
    padding-top: 60px;
  }
}
/* TABLET */
@media only screen and (max-width: 1024px) {
  #grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}
/* MOBILE */
@media only screen and (max-width: 768px) {
  .result {
    padding-top: 100px;
    max-width: 400px;
  }
  .review {
    width: 98%;
  }
  #analysis h2 {
    margin: 0;
  }
  #cta-5 {
    margin: 0;
  }
  #grid1 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-row-gap: 2vw;
  }
  #grid3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #grid5 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
  #left {
    border-right: 0;
  }
  #rfa {
    flex-direction: column;
  }
}
/* PHONE */
@media only screen and (max-width: 600px) {
  #grid2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
  }
  #grid3 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #grid4 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}