/*////// WEB DESIGN SERVICE PAGE //////*/

/*//// BODY OVERRIDE ////*/
body {
    background: #ffffff;
    overflow-x: hidden;
}





/*////// HERO SECTION //////*/
section.hero-section {
    max-width: 192rem;
}
section.hero-section div.hero-container {
    position: relative;
    height: 61.5rem;
    margin: 0 0 -2rem 0;
    padding: 0 0 2rem 2rem;
    background-color: #4C4A4A;
    border-left: 10.4rem solid #4C4A4A;
}
/*// YELLOW ACCENT //*/
div.hero-yellow-accent {
    position: absolute;
    top: 5rem;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: calc( 100% - 5rem);
    width: calc(100% - 0rem);
    border: 0.2rem solid red;
    border: 0.2rem solid #FBBE15;
    border-right: none;
    border-bottom: none;
}
.hero-container .hero-flex-container {
    position: relative;
    z-index: 101;
}
.hero-flex-container .hero-flex-item {}

#hero-flex-item-1 {}
#hero-flex-item-1 .logo-header {
    width: 100%;
    padding: 24rem 0 0 5rem;
}
/*// HEADERS //*/
#hero-flex-item-1 h1 {
    position: relative;
    display: inline-block;
    padding-left: 14rem;
    margin: 1rem 0;
    color: #FBBE15;
    font-family: "Caecilia LT Pro";
    font-size: 8.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.164rem;
}
#hero-flex-item-1 h1:after {
    content: "";
    position: absolute;
    left: 0;
    top: 37%;
    transform: translateY(-50%);
    width: 10.7rem;
    height: 11.8rem;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}   
#hero-flex-item-1 h2 {
    display: inline-block;
    margin: 3rem 0 0 28rem;
    color: #FFF;
    font-family: "Caecilia LT Pro";
    font-size: 5.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.236; /* 123.636% */
    letter-spacing: -0.2rem;  
}





/*////// CONTENT SECTION //////*/
section.content-section {
    max-width: 192rem;
}
section.content-section div.content-container {
    position: relative;
    margin: 0 0;
    padding: 8rem 0 8rem 37rem;
    background-color: #FBF3DF;
    border-left: 10.4rem solid #FBF3DF;    
}
.content-container .content-flex-container {
    z-index: 101;
}
.content-flex-container .content-flex-item {}

/*// SPECIFICS //*/
/*/ TOP /*/
#content-flex-item-1 h2 {
    margin-bottom: 2rem;
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 5.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.27; /* 127.273% */
    letter-spacing: -0.1rem;
}
p.copy-text {
    width: 100%;
    margin: 0 0;
    padding: 0 0;    
    color: #000;
    font-family: 'caecilia-lt-roman', 'MuseoSlab-300', serif;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.571; /* 157.143% */
    letter-spacing: 0rem;
}
p.copy-text span {
    display: block;
}
span#indent-1 {
    padding-left: 5.5rem;
}
span#indent-2 {
    padding-left: 13.8rem;
}
span#indent-3 {
    padding-left: 16.3rem;
}
p#rapid-change-byline {
    margin-top: 3rem;
    padding-left: 17.8rem;
    color: #000000;
    font-family: "Caecilia LT Pro";
    font-size: 5.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 6.3rem;
}
/*/ BOTTOM /*/
#content-flex-item-2 p.copy-text {
    width: 100%;
    margin-top: 25rem;
    margin-left: -21rem;
}
/*// LAPTOP IMAGE //*/
img.web-dev-laptop {
    position: absolute;
    top: 57rem;
    left: 26%;
    transform: translate(-50%,-50%);
    z-index: 101;
    width: 79.9rem;
    width: 70rem;
    height: auto;
}

/*//// YELLOW ACCENT ////*/
div.content-yellow-accent {
    /*display: none;*/
    position: absolute;
    top: 0;
    left: 0;
    bottom: 41rem;
    z-index: 100;
    width: calc( 100% - 5rem);
    border-left: 0.2rem solid #FBBE15;
    border-bottom: 0.2rem solid #FBBE15;
}
div.right-accent {
    /*display: none;*/
    position: absolute;
    bottom: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: calc( 100% - 5rem);
    border-right: 0.2rem solid #FBBE15;
}



/*////// GOOD WEBSITES SECTION //////*/
section.good-section {
    max-width: 192rem;
}
section.good-section div.good-container {
    position: relative;
    padding: 16rem 12rem 12rem 12rem;
    margin: 0 0;
    background-color: #ffffff;
}
div.good-container img.good-background {
    position: absolute;
    top: 0rem;
    left: 22rem;
    width: 60rem;
}
.good-container .good-flex-container {}
.good-flex-container .good-flex-item {
    border: 1px solid red;
    border: 1px solid transparent;
    min-height: 12rem;
}
/*// FLEX SPECOFICS //*/
#good-flex-item-1 {}
#good-flex-item-1 img.foreground-1 {
    position: absolute;
    top: -11rem;
    left: -12.1rem;
    width: 82.5rem;
}
#good-flex-item-1 img.foreground-2 {
    position: absolute;
    bottom: 8rem;
    left: -10rem;    
    width: 84.5rem;
}
#good-flex-item-2 {}
#good-flex-item-2 h3 {
    margin-bottom: 4rem;
    color: #4D4A4A;
    font-family: "Caecilia LT Pro";
    font-size: 8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 7rem; /* 87.5% */    
}
/*// GOOD CONTENT //*/
div.good-content {
    position: relative;
    padding: 4rem 2rem;
}
div.good-content div.good-accent {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 16.5rem;
    height: 0.6rem;
    background: #FBBE15;
}
div.good-content p {
    position: relative;
    margin: 2rem 0;
    color: #000;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 5.5rem;
}
div.good-content p span {
    color: #4D4A4A;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 5.5rem; /* 110% */
}
div.good-content p:after {
    content: "";
    position: absolute;
    top: 2.2rem;
    left: -4rem;
    width: 1.8rem;
    height: 1.8rem;
    background: #4D4A4A;
}





/*////// STARTER SECTION //////*/
section.starter-section { }
section.starter-section div.starter-container {
    padding: 11rem 13.5rem;
    background-color: #FBF3DF; 
    background: linear-gradient(
      90deg,
      rgba(207, 198, 177, 0.3) 4%,
      rgba(252, 195, 43, 0.3) 100%
    );
}

/*//// FLEX ////*/
div.starter-container div.starter-flex-container {
    justify-content: flex-start;
}
div.starter-flex-container div.starter-flex-item {}

/*// FLEX SPECIFICS //*/
#starter-flex-item-1 {}
#starter-flex-item-2 {
    padding-right: 21rem;
}

/*// ELEMENTS //*/
div.starter-flex-item h3 {
    position: relative;
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.34; /* 134.615% */
}
div.starter-flex-item h3:after {
    content: "";
    position: absolute;
    top: -2rem;
    left: -13.5rem;
    width: 31rem;
    height: 0.6rem;
    background: #FBBE15;\
}
div.starter-flex-item p {
    margin: 2rem 0;
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.57; /* 157.143% */
}
div.starter-container img.redesign-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 84rem;
    height: auto;
}





/*////// WEBSITE CONVERSION SECTION //////*/
section.conversion-section {
    max-width: 192rem;
}
section.conversion-section div.conversion-container {
    position: relative;
    padding: 14rem 12rem 14rem 12rem;
    margin: 0 0;
    background: #4D4A4A;
}

/*//// FLEX ////*/
div.conversion-container div.conversion-flex-container {}
div.conversion-flex-container div.conversion-flex-item {
    min-height: 12rem;
}
/*// FLEX SPECIFICS //*/
#conversion-flex-item-1 {}
#conversion-flex-item-2 {
    padding: 5.6rem 0 0 0;
}

/*// ELEMENTS //*/
div.conversion-flex-item h3 {
    color: #FFF;
    font-family: "Caecilia LT Pro";
    font-size: 5.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.27; /* 127.273% */
}
div.conversion-flex-item h4 {
    color: #FFF;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 7rem;
}
div.conversion-flex-item p {
    color: #FFF;
    font-family: "Caecilia LT Pro";
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 5.5rem;
}
div.conversion-flex-item a.section-button {
    display: inline-block;
    width: 100%;
    margin: 0 0;
    padding: 1.2rem 1rem;
    background: #FBBE15;
    border: 1px solid #FBBE15;
    color: #4D4A4A;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 4.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 6.5rem; /* 154.762% */
    transition: all .3s ease;
}
div.conversion-flex-item a.section-button:hover {
    background: #ffffff;
    border: 1px solid #FBBE15;
    color: #000000;
}
/*// ACCCNT LINE //*/
div.conversion-container div.conversion-accent {
    position: absolute;
    top: 8rem;
    right: 0;
    width: 184.5rem;;
    height: 60rem;;
    border-top: .25rem solid #FBBE15;
    border-left: .25rem solid #FBBE15;
}
div.conversion-container div.conversion-accent:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -.1rem;
    width: 20rem;
    height: .1rem;
    border-top: .25rem solid #FBBE15;
}





/*////// NO FREE MARKETING PLAN SECTION //////*/
section.nofree-section {}
section.nofree-section div.nofree-container {
    padding: 14rem 13.5rem 14rem 6rem;
}

/*//// FLEX ////*/
div.nofree-container div.nofree-flex-container {
    justify-content: flex-end;
}
div.nofree-flex-container div.nofree-flex-item {}

/*// SPECIFICS //*/
#nofree-flex-item-1 {}
#nofree-flex-item-2 {
    padding-top: 4rem;
}

/*// ELEMENTS //*/
div.nofree-flex-item h3 {
    position: relative;
    margin-bottom: 3rem;
    color: #4D4A4A;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25; /* 125% */    
}
div.nofree-flex-item h3.top-line {
    margin-bottom: 6rem;
}
div.nofree-flex-item h3.top-line:after {
    content: "";
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 16.5rem;
    height: 0.6rem;
    background: #FBBE15;
}
div.nofree-flex-item p {
    margin: 2rem 0;
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.57; /* 157.143% */
}
div.nofree-flex-item p.pad-left {
    padding-left: 8rem;
}
div.nofree-flex-item p strong {
    font-weight: bold;
}
div.nofree-flex-item a.section-button {
    display: inline-block;
    width: 100%;
    margin: 4rem 0;
    padding: 1.2rem 1rem;
    background: #FBBE15;
    color: #4D4A4A;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 4.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5476; /* 154.762% */
}
div.nofree-container img.plan-image {
    position: absolute;
    top: 4rem;
    left: 1rem;
    width: 62rem;
    height: auto;
}



/*////// OUR WORK SECTION //////*/
section.work-section {
    background: #4D4A4A;
}
section.work-section div.work-container {
    padding: 12rem 0 11rem 0;
}

/*//// FLEX ////*/
div.work-container div.work-flex-container {}
div.work-flex-container div.work-flex-item {
    text-align: center;
}

/*// SPECIFICS //*/
#work-flex-item-1 {
    padding: 0 0 6rem 0;
}
#work-flex-item-2 {}
#work-flex-item-3 {
    padding: 1rem 0;
    text-align: center;
}

/*// ELEMENTS //*/
div.work-flex-item h3 {
    position: relative;
    color: #FBBE15;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.346; /* 134.615% */
}
div.work-flex-item h3:after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 9.5rem;
    height: 0.6rem;
    background: #FBBE15;
}

/*// SLIDER //*/
#case-study-slider {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0;
    padding: 0 0;
}
#case-study-slider div.slide {
    display: inline-block;
    position: relative;
    width: 25%;
    height: 35rem;
    margin: 0 0;
    padding: 0 0;   
    overflow: hidden; 
}
div.slide a.hotspot {
    z-index: 1000;
}
div.slide div.slide-img {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
div.slide div.hover-overlay {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background: rgba(0,0,0,.33);
    transition: opacity .3s ease;
}
div.slide:hover div.hover-overlay {
    opacity: 1;
}
/*/ CASE STUDY CATEGORY /*/
div.slide div.project-category {
    position: absolute;
    z-index: 500;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);    
}
div.project-category h2 { 
    color: #FFF;
    text-align: center;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 1.4252rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.2; /* 222.222% */
    text-transform: capitalize;
}
div.project-category h3 {
    color: #FBBE15;
    font-family: "Caecilia LT Pro";
    font-size: 1.5835rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.9794rem;
    text-transform: uppercase;    
}
div.slide div.project-category h3:after {
    display: none;
}
div.slide h4 {
    position: absolute;
    z-index: 500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    width: 100%;
    padding: 0 0rem;
    margin: 0 0;   
    color: #FBBE15;
    text-align: center;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.555; /* 155.523% */
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .3s ease;
}
div.slide:hover h4 {
    opacity: 1;
}
/*// PREVIOUS NEXT ARROWS //*/
div.slider-navigation {
    position: relative;
    width: 13rem;
    height: 4rem;
    margin: 0 auto;
}
div.slider-navigation #previous-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    cursor: pointer;
}
div.slider-navigation #next-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;
}




/*////// BLUEPRINT SECTION //////*/
section.blue-section { 
    max-width: 192rem; 
}
section.blue-section div.blue-container { 
    position: relative;
    margin: 0 0;
    padding: 18rem 0 26rem 8rem;
    background-color: #FBF3DF;
    background: linear-gradient(
      90deg,
      rgba(207, 198, 177, 0.3) 4%,
      rgba(252, 195, 43, 0.3) 100%
    );
    background-size: 58rem;
    background-position: top right;
    background-repeat: no-repeat;
    background-image: url('https://splatstage.wpengine.com/wp-content/uploads/2025/05/splat-service-page-blueprint-background.png');
}
div.blue-container div.blue-flex-container {}
div.blue-flex-container div.blue-flex-item { }

div.blue-flex-item h3 {
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 5.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.165rem;
}
div.blue-flex-item p { 
    margin: 2rem 0;
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.57; /* 157.143% */
}
div.blue-flex-item a.section-button {
    display: inline-block;
    width: 100%;
    margin: 0rem 0 4rem 0;
    padding: 1.2rem 1rem;
    background: #FBBE15;
    color: #4D4A4A;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 4.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5476; /* 154.762% */
}

/*//// SPECIFICS ////*/
#blue-flex-item-1 {
    padding-lefy: 4rem;
}
#blue-flex-item-2 {}
#blue-flex-item-2 img {
    position: absolute;
    bottom: 0;
    right: 0;    
    width: 80%;
}




/*////// ARTICLES SECTION //////*/
section.articles-section {}
section.articles-section div.articles-container {
    padding: 14rem 2rem 14rem 2rem;
}

/*//// FLEX ////*/
div.articles-container div.articles-flex-container {}
div.articles-flex-container div.articles-flex-item {}

/*// SPECIFICS //*/
#articles-flex-item-1 {
    padding: 4rem 0;
}

/*// ELEMENTS //*/
div.articles-flex-item h3 {
    position: relative;
    color: #4D4A4A;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.346; /* 134.615% */
}
div.articles-flex-item h3:after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 9.5rem;
    height: 0.6rem;
    background: #FBBE15;
}
/*// ARTICLES //*/

div.articles-flex-container div.article {
    max-width: calc(33% - 1rem);
    transition: background .4s ease;
}
div.articles-flex-container div.article:hover {
    background: rgba(217, 217, 217, 0.60);
}
div.article article {}
article div.image-container {
    width: 100%;
    height: 25.5rem;
    background-color: silver;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
article div.title-container {
    position: relative;
    width: 100%;
    height: 15rem;
    margin: 4rem 3rem;
    padding: .6rem 2rem;
    border-left: .2rem solid rgba(251, 190, 21, 1);
}
div.title-container h2 {
    color: #4D4A4A;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 2.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.23; /* 123.077% */
    text-transform: capitalize;
}
div.title-container p {
    position: absolute;
    left: 2rem;
    bottom: .6rem;
    color: #4D4A4A;
    font-family: "Trade Gothic Next LT Pro";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 4rem;
    text-transform: capitalize;
}




/*////// BELEIVE SECTION //////*/
section.beleive-section {
    background: #4d4a4a;
}
section.beleive-section div.beleive-container {
    padding: 2rem 0;
}

/*//// FLEX ////*/
div.beleive-container div.beleive-flex-container {}
div.beleive-flex-container div.beleive-flex-item {}

/*// ELEMENTS //*/
div.beleive-flex-item h3 {
    color: #FBBE15;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.156rem;
}





/*////// CLIENT SECTION //////*/
section.client-section {
    background: #f5f5f5;
}
section.client-section div.client-container {
    padding: 0 0 10rem 0;
}

/*//// HEADER FLEX ////*/
div.client-container div.client-header-flex-container {}
div.client-header-flex-container div.container-article-width {
    padding: 8rem 0;
    background: #ffffff;
    border-bottom: 1px solid #dcdcdc;
}

/*// ELEMENTS //*/
div.container-article-width h3 {
    position: relative;
    color: #4D4A4A;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.346; /* 134.615% */
}
div.container-article-width h3:after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 9.5rem;
    height: 0.6rem;
    background: #FBBE15;
}

/*//// TESTIMONIAL FLEX ////*/
div.client-container div.testimonial-flex-container {
    justify-content: center;
    gap: 2rem 0;
    padding: 2rem 22rem;
}
div.testimonial-flex-container div.testimonial {}

/*// ELEMENTS //*/
div.testimonial p {}
div.testimonial p.client-name {}
div.testimonial p.client-firm {}
div.testimonial p.client-firm a {}

/*// FLEX SPECIFICS //*/
#testimonial-1 {}
#testimonial-2 {}




/*////// GOT QUESTIONS SECTION //////*/
section.got-section {
    background: #FBBE15;
}
section.got-section div.got-container {
    padding: 2rem 0;
}
div.got-flex-item h3 {
    color: #4D4A4A;
    text-align: center;
    font-family: "Caecilia LT Pro";
    font-size: 5.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.34; 
}



/*////// FAQ SECTION //////*/
section.faq-section {
    background-color: #FBF3DF;
    background: linear-gradient(
      90deg,
      rgba(207, 198, 177, 0.3) 4%,
      rgba(252, 195, 43, 0.3) 100%
    );

}
section.faq-section div.faq-container {
    padding: 6rem 16rem 16rem 16rem;
    background-position: top right;
    background-size: 20%;
    background-repeat: repeat-y;
    background-image: url(https://splatstage.wpengine.com/wp-content/uploads/2025/06/splat-service-page-faq-background-v3.png);
}

/*//// FLEX ////*/
div.faq-container div.faq-flex-container {
    z-index: 1000;
}
div.faq-flex-container div.faq-flex-item {}

div.faq-flex-item h3 {
    color: #4D4A4A;
    text-align: center;
    font-size: 4rem;
    font-style: normal;
    line-height: 1; /* 100% */
    letter-spacing: 0.2rem;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
    font-family: 'TradeGothicLTPro-BdCn20';
}
div.faq-accent {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10rem;
    z-index: 100;
    width: calc( 100% - 5rem);
    border: 0.2rem solid #FBBE15;
    border-right: none;
    border-top: none;
}



/*//// FAQ ACCORDIAN ////*/
div.faq-flex-container div.accordian-container {
    height: auto;
    border-radius: 1rem;
    border-bottom: 2px solid #4D4A4A;
}
/*// ACCORDIAN TOP //*/
div.accordian-top {
    position: relative;
    height: auto;
    padding: 1.5rem 3rem 0 3rem;  
}
div.accordian-top h4 {
    color: #4D4A4A;
    font-family: 'TradeGothicLTPro-BdCn20';
    font-size: 3.5rem;
    font-style: normal;
    line-height: 1.14; /* 114.286% */
    letter-spacing: 0.0525rem;
}

/*//// ICON ////*/
div.accordian-top .accordian-icon {
   position: absolute;
   top: 105%;
   right: 2rem;
   transform: translateY(-50%);
   width: 2.4rem;
   color: #ffffff;
   visibility: initial;
   cursor: pointer;
}
/*// ICON VISIBILITY //*/
div.accordian-top.open .accordian-icon.closed { visibility: hidden; }
div.accordian-top.open .accordian-icon.opened { visibility: visible; }

div.accordian-top .accordian-icon.closed { visibility: visible; }
div.accordian-top .accordian-icon.opened { visibility: hidden; }

/*// ACCORDIAN BOTTOM //*/
div.accordian-bottom {
    height: auto;
    max-height: 0;
    padding: 0rem 3rem 0 3rem;
    transition: all .5s ease;
    overflow: hidden;
}
div.accordian-bottom.open {
   height: auto;
   padding: 0rem 3rem 3rem 3rem;
   max-height: 100rem;
}
div.accordian-bottom p {
    color: #000;
    font-family: "Caecilia LT Pro";
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.45; /* 145.833% */
    letter-spacing: -0.036rem;
}
div.accordian-bottom p a {
    text-decoration: underline;
}
/*// SPECIFICS //*/
#faq-flex-item-1 {
    padding: 3rem 0;
}





/*////// CONTACT SECTION //////*/
section.contact-section {
    max-width: 192rem;
}
section.contact-section div.contact-container {
    position: relative;
    padding: 5rem 28rem;
    margin: 0;
}

.contact-container .contact-flex-container {}
.contact-flex-container .contact-flex-item {}

#contact-flex-item-1 {
    padding: 8rem 0 0 0;
}
#contact-flex-item-1 h2 {
    text-align: center;
}
#contact-flex-item-1 .yellow-line.title-line {}
#contact-flex-item-2 p {
    margin: 2rem 0;
}
#contact-form {}
#contact-form .sending-scrim {}
.sending-scrim .sending-icon {}





/*//// REPONSIVE ////*/
@media only screen and (max-width: 1920px) { 

        html { font-size: 0.521vw !important; }

}
@media only screen and (max-width: 1440px) { }
@media only screen and (max-width: 1365px) { }

@media screen and (max-width: 1025px) { 

        html { font-size: 10px !important; }

}
@media screen and (max-width: 851px) { 

        /*//// TOP NAV OVERRIDE ////*/
        nav { height: auto; }


        section { overflow: hidden; }


        /*////// HERO SECTION //////*/
        section.hero-section {}
        section.hero-section div.hero-container { height: auto; padding: 4rem 2rem; border: none; }
        #hero-flex-item-1 .logo-header { width: 100%; padding: 10rem 0 8rem 0; }
        #hero-flex-item-1 h1 { padding-left: 7rem; font-size: 6rem; }
        #hero-flex-item-1 h1:after { left: 0; top: 0; width: 4rem; height: 4rem; }
        #hero-flex-item-1 h2 { margin: 0 0; font-size: 2.6rem; }


        /*////// CONTENT SECTION //////*/
        section.content-section {}
        section.content-section div.content-container { height: auto; padding: 6rem 2rem; border: none; }
        img.web-dev-laptop { position: relative; top:0; left: 0; transform: none; width: 90%; }
        div.content-yellow-accent,
        div.right-yellow-accent { display: none; }
        #content-flex-item-1 h2 { font-size: 3rem; }
        p.copy-text { font-size: 1.6rem; line-height: 1.3; }
        p.copy-text br { display: none; }
        p.copy-text span,
        span#indent-1,
        span#indent-2 { display: inline; padding: 0 0; }
        p#rapid-change-byline { margin-top: 1rem; padding-left: 0; font-size: 2.6rem; line-height: 1.3; }
        #content-flex-item-2 p.copy-text { margin-top: 6rem; margin-left: 0; }


        /*////// GOOD WEBSITES SECTION //////*/
        section.good-section {}
        section.good-section div.good-container { height: auto; padding: 4rem 2rem; border: none; }
        #good-flex-item-1 img.foreground-1 { display: none; }
        #good-flex-item-1 img.foreground-2 { position: relative; bottom: 0; left: 0; width: 90%; }
        #good-flex-item-2 h3 { font-size: 3rem; margin-bottom: 0; }

        div.good-content { padding: 4rem 2rem 0 2rem; }
        div.good-content div.good-accent { height: 0.2rem; }
        div.good-content p { font-size: 1.8rem; line-height: 1.1; }
        div.good-content p span { font-size: 2.2rem; line-height: 1.1; }
        div.good-content p br { display: none; }
        div.good-container img.good-background { top: 0; left: 0; width: 80%; opacity: .7; }
        div.good-content p:after { top: 1rem; left: -2rem; width: .8rem; height: .8rem; }


        /*////// STARTER SECTION //////*/
        section.starter-section {}
        section.starter-section div.starter-container { height: auto; padding: 6rem 2rem; border: none; }
        div.starter-flex-item h3 { font-size: 3rem; }

        #starter-flex-item-2 { padding-right: 0; }
        div.starter-flex-item p { font-size: 1.8rem; line-height: 1.1; }
        div.starter-flex-item p br { display: none; }
        div.starter-container img.redesign-image { position: relative; bottom: 0; right: 0; width: 75%; float: right; }


        /*////// WEBSITE CONVERSION SECTION //////*/
        section.conversion-section {}
        section.conversion-section div.conversion-container { height: auto; padding: 6rem 2rem; border: none; }
        div.conversion-flex-item h3 { margin: 2rem 0; font-size: 3rem; }
        div.conversion-flex-item h4 { margin: 2rem 0; font-size: 2.4rem; line-height: 1.3; }
        div.conversion-flex-item p {  margin: 2rem 0; font-size: 1.7rem; line-height: 1.6; }
        div.conversion-flex-item br { display: none; }
        div.conversion-flex-item a.section-button { font-size: 2rem; line-height: 1.2; }
        div.conversion-container div.conversion-accent { display: none; }


        /*////// NO FREE MARKETING PLAN SECTION //////*/
        section.nofree-section {}
        section.nofree-section div.nofree-container { height: auto; padding: 6rem 2rem; border: none; }
        div.nofree-container img.plan-image { position: relative; top: 0; left: 0; width: 80%; }
        div.nofree-flex-item h3 { font-size: 3rem; }
        h3.top-line { margin-bottom: 6rem; }

        div.nofree-flex-item p { font-size: 1.7rem; line-height: 1.6; }
        div.nofree-flex-item p br { display: none; }
        div.nofree-flex-item p.pad-left { padding-left: 0; }
        div.nofree-flex-item a.section-button { font-size: 2rem; line-height: 1.2; }
        #nofree-flex-item-2 { padding-top: 0rem; }


        /*////// OUR WORK SECTION //////*/
        section.work-section {}
        section.work-section div.work-container { height: auto; padding: 6rem 2rem; border: none; }
        div.work-flex-item h3 { padding: 0 4rem; font-size: 3rem; line-height: 1.2; }
        div.slide div.hover-overlay { opacity: .3; }
        div.slide h4 { top: 75%; font-size: 2rem; color: #ffffff; opacity: 1; }


        /*////// BLUEPRINT SECTION //////*/
        section.blue-section {}
        section.blue-section div.blue-container {  height: auto; padding: 6rem 2rem; border: none; background-image: none; }
        div.blue-flex-item h3 { font-size: 3rem; }
        div.blue-flex-item p { font-size: 1.7rem; line-height: 1.6; }
        #blue-flex-item-2 img { position: relative; margin: 4rem 0; }
        div.blue-flex-item a.section-button { font-size: 2rem; line-height: 1.2; }


        /*////// ARTICLES SECTION //////*/
        section.articles-section {}
        section.articles-section div.articles-container { height: auto; padding: 2rem 2rem; border: none; }
        div.articles-flex-item h3 { font-size: 3rem; }
        div.articles-flex-container div.article { max-width: 100%; }
        article div.title-container { height: auto; margin: 2rem 1rem 4rem 1rem; padding: .6rem 2rem; }
        div.title-container h2 { font-size: 2.2rem; }
        div.title-container p { position: relative; left: 0; margin: 2rem 0; font-size: 1.6rem; }


        /*////// BELEIVE SECTION //////*/
        section.beleive-section {}
        section.beleive-section div.beleive-container { height: auto; padding: 6rem 2rem; border: none; }
        div.beleive-flex-item h3 { font-size: 3rem; }


        /*////// CLIENT SECTION //////*/
        section.client-section {}
        section.client-section div.client-container { height: auto; padding: 6rem 2rem; border: none; }
        div.client-header-flex-container div.container-article-width { padding: 0 0; }
        div.container-article-width h3 { font-size: 3rem; }
        div.testimonial p { font-size: 2rem; }


        /*////// GOT QUESTIONS SECTION //////*/
        section.got-section {}
        section.got-section div.got-container { height: auto; padding: 6rem 2rem; border: none; }
        div.got-flex-item h3 { font-size: 3rem; } 


        /*////// FAQ SECTION //////*/
        section.faq-section {}
        section.faq-section div.faq-container { height: auto; padding: 6rem 2rem; border: none; background-image: none; }
        #faq-flex-item-1 { padding: 0 0; }
        div.faq-flex-item h3 { font-size: 3rem; }
        div.accordian-top,
        div.accordian-top.open { padding: 2rem 0 0 0; }
        div.accordian-bottom,
        div.accordian-bottom.open { padding: 0 0 2rem 0; }
        div.accordian-top h4 { font-size: 2.2rem; }
        div.accordian-bottom p { font-size: 1.7rem; line-height: 1.2; }


        /*////// CONTACT SECTION //////*/
        section.contact-section {}
        section.contact-section div.contact-container { height: auto; padding: 6rem 2rem; border: none; }
        #contact-flex-item-1 { padding: 0 0 0 0; }
        div.wpcf7 div.input-container.half-width { width: 100%; }

}
@media screen and (max-width: 480px) {

        /*//// TOP NAV OVERRIDE ////*/
        nav { height: auto; }


        section { overflow: hidden; }


        /*////// HERO SECTION //////*/
        section.hero-section {}
        section.hero-section div.hero-container { height: auto; padding: 4rem 2rem; border: none; }
        #hero-flex-item-1 .logo-header { width: 100%; padding: 10rem 0 8rem 0; }
        #hero-flex-item-1 h1 { padding-left: 7rem; font-size: 6rem; }
        #hero-flex-item-1 h1:after { left: 0; top: 0; width: 4rem; height: 4rem; }
        #hero-flex-item-1 h2 { margin: 0 0; font-size: 2.6rem; }


        /*////// CONTENT SECTION //////*/
        section.content-section {}
        section.content-section div.content-container { height: auto; padding: 6rem 2rem; border: none; }
        img.web-dev-laptop { position: relative; top:0; left: 0; transform: none; width: 90%; }
        div.content-yellow-accent,
        div.right-yellow-accent { display: none; }
        #content-flex-item-1 h2 { font-size: 3rem; }
        p.copy-text { font-size: 1.6rem; line-height: 1.3; }
        p.copy-text br { display: none; }
        p.copy-text span,
        span#indent-1,
        span#indent-2 { display: inline; padding: 0 0; }
        p#rapid-change-byline { margin-top: 1rem; padding-left: 0; font-size: 2.6rem; line-height: 1.3; }
        #content-flex-item-2 p.copy-text { margin-top: 6rem; margin-left: 0; }


        /*////// GOOD WEBSITES SECTION //////*/
        section.good-section {}
        section.good-section div.good-container { height: auto; padding: 4rem 2rem; border: none; }
        #good-flex-item-1 img.foreground-1 { display: none; }
        #good-flex-item-1 img.foreground-2 { position: relative; bottom: 0; left: 0; width: 90%; }
        #good-flex-item-2 h3 { font-size: 3rem; margin-bottom: 0; }

        div.good-content { padding: 4rem 2rem 0 2rem; }
        div.good-content div.good-accent { height: 0.2rem; }
        div.good-content p { font-size: 1.8rem; line-height: 1.1; }
        div.good-content p span { font-size: 2.2rem; line-height: 1.1; }
        div.good-content p br { display: none; }
        div.good-container img.good-background { top: 0; left: 0; width: 80%; opacity: .7; }
        div.good-content p:after { top: 1rem; left: -2rem; width: .8rem; height: .8rem; }


        /*////// STARTER SECTION //////*/
        section.starter-section {}
        section.starter-section div.starter-container { height: auto; padding: 6rem 2rem; border: none; }
        div.starter-flex-item h3 { font-size: 3rem; }

        #starter-flex-item-2 { padding-right: 0; }
        div.starter-flex-item p { font-size: 1.8rem; line-height: 1.1; }
        div.starter-flex-item p br { display: none; }
        div.starter-container img.redesign-image { position: relative; bottom: 0; right: 0; width: 75%; float: right; }


        /*////// WEBSITE CONVERSION SECTION //////*/
        section.conversion-section {}
        section.conversion-section div.conversion-container { height: auto; padding: 6rem 2rem; border: none; }
        div.conversion-flex-item h3 { margin: 2rem 0; font-size: 3rem; }
        div.conversion-flex-item h4 { margin: 2rem 0; font-size: 2.4rem; line-height: 1.3; }
        div.conversion-flex-item p {  margin: 2rem 0; font-size: 1.7rem; line-height: 1.6; }
        div.conversion-flex-item br { display: none; }
        div.conversion-flex-item a.section-button { font-size: 2rem; line-height: 1.2; }
        div.conversion-container div.conversion-accent { display: none; }


        /*////// NO FREE MARKETING PLAN SECTION //////*/
        section.nofree-section {}
        section.nofree-section div.nofree-container { height: auto; padding: 6rem 2rem; border: none; }
        div.nofree-container img.plan-image { position: relative; top: 0; left: 0; width: 80%; }
        div.nofree-flex-item h3 { font-size: 3rem; }
        h3.top-line { margin-bottom: 6rem; }

        div.nofree-flex-item p { font-size: 1.7rem; line-height: 1.6; }
        div.nofree-flex-item p br { display: none; }
        div.nofree-flex-item p.pad-left { padding-left: 0; }
        div.nofree-flex-item a.section-button { font-size: 2rem; line-height: 1.2; }
        #nofree-flex-item-2 { padding-top: 0rem; }


        /*////// OUR WORK SECTION //////*/
        section.work-section {}
        section.work-section div.work-container { height: auto; padding: 6rem 2rem; border: none; }
        div.work-flex-item h3 { padding: 0 4rem; font-size: 3rem; line-height: 1.2; }
        div.slide div.hover-overlay { opacity: .3; }
        div.slide h4 { top: 75%; font-size: 2rem; color: #ffffff; opacity: 1; }


        /*////// BLUEPRINT SECTION //////*/
        section.blue-section {}
        section.blue-section div.blue-container {  height: auto; padding: 6rem 2rem; border: none; background-image: none; }
        div.blue-flex-item h3 { font-size: 3rem; }
        div.blue-flex-item p { font-size: 1.7rem; line-height: 1.6; }
        #blue-flex-item-2 img { position: relative; margin: 4rem 0; }
        div.blue-flex-item a.section-button { font-size: 2rem; line-height: 1.2; }


        /*////// ARTICLES SECTION //////*/
        section.articles-section {}
        section.articles-section div.articles-container { height: auto; padding: 2rem 2rem; border: none; }
        div.articles-flex-item h3 { font-size: 3rem; }
        div.articles-flex-container div.article { max-width: 100%; }
        article div.title-container { height: auto; margin: 2rem 1rem 4rem 1rem; padding: .6rem 2rem; }
        div.title-container h2 { font-size: 2.2rem; }
        div.title-container p { position: relative; left: 0; margin: 2rem 0; font-size: 1.6rem; }


        /*////// BELEIVE SECTION //////*/
        section.beleive-section {}
        section.beleive-section div.beleive-container { height: auto; padding: 6rem 2rem; border: none; }
        div.beleive-flex-item h3 { font-size: 3rem; }


        /*////// CLIENT SECTION //////*/
        section.client-section {}
        section.client-section div.client-container { height: auto; padding: 6rem 2rem; border: none; }
        div.client-header-flex-container div.container-article-width { padding: 0 0; }
        div.container-article-width h3 { font-size: 3rem; }
        div.testimonial p { font-size: 2rem; }


        /*////// GOT QUESTIONS SECTION //////*/
        section.got-section {}
        section.got-section div.got-container { height: auto; padding: 6rem 2rem; border: none; }
        div.got-flex-item h3 { font-size: 3rem; } 


        /*////// FAQ SECTION //////*/
        section.faq-section {}
        section.faq-section div.faq-container { height: auto; padding: 6rem 2rem; border: none; background-image: none; }
        #faq-flex-item-1 { padding: 0 0; }
        div.faq-flex-item h3 { font-size: 3rem; }
        div.accordian-top,
        div.accordian-top.open { padding: 2rem 0 0 0; }
        div.accordian-bottom,
        div.accordian-bottom.open { padding: 0 0 2rem 0; }
        div.accordian-top h4 { font-size: 2.2rem; }
        div.accordian-bottom p { font-size: 1.7rem; line-height: 1.2; }


        /*////// CONTACT SECTION //////*/
        section.contact-section {}
        section.contact-section div.contact-container { height: auto; padding: 6rem 2rem; border: none; }
        #contact-flex-item-1 { padding: 0 0 0 0; }
        div.wpcf7 div.input-container.half-width { width: 100%; }

}
@media only screen and (max-width: 380px) { }
@media only screen and (max-width: 320px) { }

/*//// LANDSCAPE RESPONSIVE ////*/
@media screen and (max-width: 850px) and (orientation: landscape) { }
@media screen and (max-width: 600px) and (orientation: landscape) { }