/*------------------------------------*\
    CONTENTS
\*------------------------------------*/
/*
-----
aux.css overwrites and customizes general style.css
-----
GENERAL
HEADER

 $intro-statements
 $quotedArticleRightLeft
 $quotedArticleRight
 $illustratedParagraph (text on left/right)
 $single-column


persuasive-tells
is-puxm-right-for-you
single-column
table-layout
led-by-jared
roll-up-your-sleeves
expected-hours
this-intensive-won-t-happen-again-until-november
ready-to-do-this

FOOTER
I'll never try to be smarter with my CSS coding styles than Harry -> https://csswizardry.com/2012/04/my-html-css-coding-style/
*/

/*------------------------------------*\
    $GENERAL
\*------------------------------------*/
@import url("https://use.typekit.net/ddo1cgn.css");

.grid26 {
    display: grid;
    grid-template-columns: repeat(26, 1fr);
}
.grid24 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
}

.header-text-shadow {
    text-shadow: 4px 4px 4px rgba(97, 30, 2, 0.19);
}
/* a {
    color: var(--brightPurple) !important;
}
a:hover {
    color: var(--darkPurple) !important;
} */

:root{
    --newWhite: #eee7e7;
}
.anton {
    font-family: 'Anton';
}
.half-left {
    grid-column: 2 / 13;
}
.half-right {
    grid-column: 14 / 25;
}


@media(max-device-width: 800px) {
    .half-left,
    .half-right {
        grid-column: 2 / 25;
    }
}


.footer-notice a {
    color: #bebebe !important;
}

.take2to26{
    grid-column: 2 / 26;
}
/*
----------------------------
$BACKGROUNDS
----------------------------
*/

.invite-bg {
    background-image: url("images-aatur/invite-bg-top.png"), url("images-aatur/invite-bg-bottom.png");
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}

.lead .lead-text {
    margin: 20px 30px 5px 0;
    font-weight: 600;
    font-size: 18px;
    background-color: rgb(0, 0, 0);
    color: white;
    display: inline-block;
    padding: 2px 15px;
}
.lead {
    padding: 5px 30px;
}
.lead-wraper {
    padding-top: 60px;
    padding-bottom: 60px;
    /* make AUX promotional graphics smaller */
    margin: 0 auto;
}
@media only screen and(max-width: 700px) {
    .lead .lead-text {
        margin: 20px 30px 5px 0;
        font-weight: 600;
        font-size: 15px;
    }
}
.lead {
    padding: 5px 7px;
}

.yellow-bg {
    background-color: var(--darkYellow);
}
.purple-bg{
    background-color: var(--brightPurple);
}


/*------------------------------------*\
    $HEADER
\*------------------------------------*/
@media screen and (max-width: 800px) {
    #header .header {
        padding: 0;
    }
    #header .head-logo {
        flex-basis: 60%;
        margin: 20px;
    }
    #header  .head-button {
        flex-basis: 40%;
        margin: 20px;
        display: flex;
        justify-content: flex-end;
        align-content: center;
    }
    #header .head-button .cta-b {
        /* margin-left: auto; */
        display: flex;
        vertical-align: middle;
        align-content: center;
        padding: 0.8em 1em;

    }
}


.square-svg {
    padding-top: 40px;
    padding-bottom: 40px;


}

.square-svg img {
    padding-left: 20px;
    padding-right: 20px;
}

#hero .when {
    font-size: 35px;
    font-weight: 500;
    padding-top: 40px;
    font-family: 'Anton', sans-serif;
}

@media screen and (min-width: 1400px) {
    .square-svg {
        padding-top: 140px;
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 800px) {
    .basis30 {
        order: 2;
        max-width: 170px;
        padding-top: 25px;
        margin: 0 auto;
    }

    .basis60 {
        order: 1;
    }

    #hero .when {
        padding-top: 10px;
        font-size: 35px;
    }

    .square-svg {
        padding-bottom: 10px;
    }

    .square-svg img {
        padding-left: 0px;
    }
}

.cta-a {
    /* flex: 1; */
    font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff !important;
    border-radius: 0;
    background-color: var(--darkOrange);
    text-decoration: none;
    transition: background-color 0.24s ease;
    display: block;
    font-size: 1em;
    font-weight: 600;
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.8em 2em;
    max-width: 200px;
    letter-spacing: 1px;
}

.cta-a:hover {
    color: var(--newWhite) !important;
    background-color: var(--brightPurple);
}


.cta-b {
    /* flex: 1; */
    font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff !important;
    border-radius: 0px;
    background-color: var(--brightPurple);
    text-decoration: none;
    transition: background-color 0.24s ease;
    display: block;
    font-size: 1em;
    font-weight: 600;
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.8em 2em;
    max-width: 200px;
    letter-spacing: 1px;
}

.cta-b:hover {
    color: #fff !important;
    background-color: var(--darkPurple);
}

.cta-c {
    /* flex: 1; */
    font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--darkPurple) !important;
    border-radius: 0;
    background-color: var(--newWhite);
    text-decoration: none;
    transition: background-color 0.24s ease;
    display: block;
    font-size: 1em;
    font-weight: 600;
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.8em 2em;
    max-width: 200px;
    letter-spacing: 1px;
    border: 1px transparent solid;
}

.cta-c:hover {
    color: var(--newWhite) !important;
    background-color: var(--brightPurple) !important;
    border: 1px solid white;
    -webkit-box-shadow: 2px 2px 10px 1px #380b1d66;
    box-shadow: 2px 2px 10px 1px #380b1d66;
}

.text-wall .h3 {
    font-family: 'Anton', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 1px 1px 0 transparent, 3px 3px 0 #ffffff, 3px 3px 0 #ffffff;
    text-align: center;
    display: block;
    color: white;
    line-height: 1;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 20px;

    /* text-transform: uppercase; */
    font-size: 35px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 5px rgba(17, 2, 53, 0.71);

}

.middleTextWall {
    grid-column: 1 / 27;
    padding: 30px 0px; 
}

.text-wall .h3 {
    font-family: 'Anton', sans-serif;
    font-size: 45px;
    font-weight: 600;
    text-shadow: none;
    text-align: center;
    display: block;
    color: #ffffff;
    line-height: 1.3;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 20px;
}

@media(max-device-width: 800px) {
    .middleTextWall {
        grid-column: 2 / 26;
        padding: 20px 0px; 
    }
    .text-wall {
        margin: 0;
        padding: 0;
    }

    .text-wall p {
        font-size: 45px;
    }
}

/*------------------------------------*\
    $intro-statements
\*------------------------------------*/
.introStatementsLeft .sec-desc {
    grid-column: 2 / 13;
    /* align text horizonaly  */
    display: grid;
    align-content: center;
}

.introStatementsLeft .sec-il {
    grid-column: 15 / 26;
}

.introStatementsLeft .sec-il img, 
.introStatementsRight .sec-il img
 {
    margin-top: 0;
    max-width: 250px;
}

.introStatementsRight .sec-il {
    grid-column: 3 / 13;
    text-align: right;
}

.introStatementsRight .sec-desc {
    grid-column: 14 / 25;
    display: grid;
    align-content: center;
}

.introStatementsRight .sec-il img {
    margin-top: 0;
}

.h2-statements {
    font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px !important;
    font-weight: 600;
    padding-bottom: 20px;
    /* color: gray; */
    line-height: 1.1;
}


@media(max-device-width: 800px) {
    .introStatementsLeft .sec-il,
    .introStatementsRight .sec-il {
        text-align: center;
    }

    .introStatementsRight .sec-desc,
    .introStatementsLeft .sec-desc,
    .introStatementsLeft .sec-il,
    .introStatementsRight .sec-il {
        grid-column: 1 / 26;
    }
    .introStatementsRight .sec-desc {
        order: 1;
    }
    .introStatementsRight .sec-il {
        order: 2;
    }

    .introStatementsLeft .sec-il img {
        margin-top: 0;
    }
}
.shadow-box {
    -webkit-box-shadow: 7px 7px 10px 0 rgb(27 51 91 / 8%);
    -moz-box-shadow: 7px 7px 10px 0 rgba(27, 51, 91, 0.075);
    box-shadow: 5px 5px 10px 0 rgb(27 51 91 / 8%), 13px 13px 15px 0 rgb(27 51 91 / 3%);
}






/*------------------------------------*\
    $illustratedParagraph
    text block on left side
\*------------------------------------*/
.sec-desc {
    grid-column: 2 / 14;
}

.sec-il {
    grid-column: 15 / 26;
}

.sec-il img {
    margin-top: 32px;
}

.shadow-box {
    -webkit-box-shadow: 7px 7px 10px 0 rgb(27 51 91 / 8%);
    -moz-box-shadow: 7px 7px 10px 0 rgba(27, 51, 91, 0.075);
    box-shadow: 5px 5px 10px 0 rgb(27 51 91 / 8%), 13px 13px 15px 0 rgb(27 51 91 / 3%);
}



@media(max-device-width: 800px) {
    .sec-il img {
        margin-top: 0;
    }

    .sec-desc {
        grid-column: 1 / 26;
    }

    .sec-il {
        grid-column: 1 / 26;
    }

}
/*------------------------------------*\
    $illustratedParagraph
    text block on right side
\*------------------------------------*/
.sec-desc-b {
    grid-column: 12 / 26;
}

.sec-il-b {
    grid-column: 2 / 11;
    text-align: right;
}

.sec-il-b img {
    margin-top: 32px;
}

@media(min-device-width: 800px) and(max-device-width: 1280px) {
    .sec-desc-b {
        grid-column: 13 / 26;
    }

    .sec-il-b {
        grid-column: 2 / 12;
        text-align: left;
    }

    .sec-il-b img {
        margin-top: 32px;
    }
}

@media(max-device-width: 800px) {
    .sec-il-b img {
        margin-top: 0;
        text-align: left;
    }

    .sec-desc-b {
        grid-column: 1 / 26;
    }

    .sec-il-b {
        grid-column: 1 / 26;
        text-align: left;
    }

}
/*------------------------------------*\
    $single-column
\*------------------------------------*/
.single-column {
    grid-column: 1 / 20;
}


@media(max-device-width: 800px) {
    .single-column {
        grid-column: 1 / 27;
    }
}




/*------------------------------------*\
    $quotedArticleLeft
\*------------------------------------*/

    .quotedArticleLeft .sec-desc {
        grid-column: 2 / 17;
    }

    .quotedArticleLeft .sec-il {
        grid-column: 18 / 27;
    }

    .quotedArticleLeft .sec-il img {
        padding-top: 32px;
    }

@media(max-device-width: 800px) {
    .quotedArticleLeft .sec-il img {
        padding-top: 12px;
        order: 1;
    }

    .quotedArticleLeft .sec-desc {
        order: 2;
        grid-column: 1 / 26;
    }

    .quotedArticleLeft .sec-il {
        grid-column: 1 / 26;
    }


}
.heading-highlighted {
    /* Chris Coyier https://css-tricks.com/multi-line-padded-text/  */
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 35px;
    letter-spacing: 2px;
    font-weight: 300;
    background-color: var(--brightPurple);
    color: #fff;
    display: inline;
    padding: 2px 10px;
    margin: 0;
    line-height: 1.75;
    /* Needs prefixing */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/*------------------------------------*\
    $quotedArticleRight
\*------------------------------------*/
.quotedArticleRight .sec-il {
    grid-column: 4 / 14;
}

.quotedArticleRight .sec-desc {
    grid-column: 15 / 26;
}


.quotedArticleRight .sec-il img {
    padding-top: 132px;
}


@media(max-device-width: 800px) {
    .quotedArticleRight .sec-il img {
        padding-top: 132px;
        order: 1;
    }

    .quotedArticleRight .sec-desc {
        order: 2;
        grid-column: 1 / 26;
    }

    .quotedArticleRight .sec-il {
        grid-column: 1 / 26;
    }

}






/*------------------------------------*\
    $ready-to-do-this
\*------------------------------------*/
#ready-to-do-this .grid26 {
    margin-top: 30px;
}

.sec-desc-step {
    grid-column: 6 / 22;
}

.sec-il-step {
    grid-column: 2 / 5;
}

.sec-il-step img {
    max-width: 100px;
    margin-left: auto;
    margin-right: 0;
    display: block;
}

.sec-desc-step h3 {
    margin-top: 0;
    margin-bottom: 5px;
}

@media(max-device-width: 800px) {
    .sec-desc-step {
        grid-column: 1 / 26;
    }

    .sec-il-step {
        grid-column: 1 / 26;
    }

    .sec-il-step img {
        max-width: 150px;
        margin: auto;
        display: block;
    }

}


/*------------------------------------*\
    $timetable
\*------------------------------------*/


.table-layout .row-image {
    flex-basis: 40%;
    min-height: 350px;
}

.table-text-area {
    flex-basis: 60%;
}

.table-layout .row {
    display: flex;
    background-color: white;
    margin-bottom: 20px;

    border: 1px solid rgb(242, 241, 248);
    -webkit-box-shadow: 7px 7px 10px 0 rgb(27 51 91 / 8%);
    -moz-box-shadow: 7px 7px 10px 0 rgba(27, 51, 91, 0.075);
    box-shadow: 5px 5px 10px 0 rgb(27 51 91 / 8%), 13px 13px 15px 0 rgb(27 51 91 / 3%);

}

.table-layout h3 {
    margin-top: 0;
    margin-bottom: 0;
}

@media only screen and(max-width: 700px) {
    .table-layout .row {
        flex-direction: column;
    }

    .table-layout .row-image {
        min-height: 0;
    }
}


.row-img-inside-day1 {
    background-image: url("puxm-images/june19.png");
    background-size: contain;
}

.row-img-inside-day2 {
    background-image: url("puxm-images/june20.png");
    background-size: contain;
}

.row-img-inside-day3 {
    background-image: url("puxm-images/june21.png");
    background-size: contain;
}

.row-img-inside-day4 {
    background-image: url("puxm-images/june22.png");
    background-size: contain;
}

.row-img-inside-day5 {
    background-image: url("puxm-images/june23.png");
    background-size: contain;
}

@media only screen and(min-width: 700px) {

    .row-image {
        max-width: 350px;
    }
}


.table-layout ul,
.table-layout ol {
    margin-block-start: 0;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 20px;
}

.table-text-area {
    padding: 20px;
}

.time-stamp {
    font-weight: 800;
    color: white;
    padding: 4px 10px;
    background-color: #a33973;
    display: inline-block;
}


/* Updates June 18 2021, ASAP*/
/* #how-the-take .sec-desc {
    grid-column: 3 / 17;
}

#how-the-take .sec-il {
    grid-column: 19 / 26;
} */

@media(max-device-width: 800px) {
    /* #how-the-take .sec-il img {
        margin-top: 0;
    }

    #how-the-take .sec-desc {
        grid-column: 1 / 26;
    }

    #how-the-take .sec-il {
        grid-column: 1 / 26;
    } */

}




/* 
@media only screen and(min-width: 1000px) {
    .lead-wraper .img-resp {
        padding-left: 60px;
    }

} */



/*------------------------------------*\
    $timetable
\*------------------------------------*/


.pricing-box {
    position: relative
}

.pricing-box .box-content {
    border-top: 1px rgb(192, 189, 192) solid;
    margin: 20px 0;
    padding-bottom: 50px;
    padding-top:10px;
    display: block;
}

.pricing-box .box-content ul {
    padding-inline-start: 20px;
}

.pricing-box .cta-b {
    max-width: 100%;
    left: 15px;
    right: 15px;
    bottom: 0;
    margin-top: 20px;
    display: block;
    position: absolute;
    margin-bottom: 20px;
}

.first-box {
    grid-column: 1/9;
    padding: 10px 20px
}

.second-box {
    grid-column: 9/17;
    padding: 10px 20px
}


.third-box {
    grid-column: 17/25;
    /* background-color: rgb(232 225 229); */
    padding: 10px 20px;
}

.pricing-box h3 {
    display: block;
    /* min-height: 80px; */
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 29px;
}

.pricing-box .price {
    display: block;
    text-align: center;
    font-size: 30px;
}


.pricing-box li p {
    margin-bottom: 0;
}

.pricing-box li p {
    font-size: 17px;
}

.pricing-box .top-box {
    min-height: 495px;
    padding: 0 5px;
}

.pricing-box .box-head {
    min-height: 106px;
}

@media (max-device-width: 800px) {
  .first-box,
    .second-box,
  .third-box {
        grid-column: 1/27 !important;
    }

    .top-box {
        min-height: 0px;
    }

    .pricing-box  .third-box {
        margin-top: 20px;
    }

    #is-puxm-right {
        padding-left: 0;
        padding-right: 0;
    }
}

/* .order-boxes .third-box {
    background-color: rgb(232 224 235);
    border: #9b0e5c 2px dashed;
    display: block;
}

.order-boxes .third-box:hover {
    background-color: rgb(222 209 227);
} */



/* 
Oct 12th 2021 Quick Fixes  
*/

.introStatementsLeft .sec-il img, .introStatementsRight .sec-il img {
    margin-top: 0;
    max-width: 120px;
}

.heading-highlighted {
    font-size: 29px;}


    .sec-il-b img {
        max-width: 200px !important;
    }

    .sec-il img {
        max-width: 200px !important;
    }





/*
----------------------------
START TESTIMONIALS
----------------------------
*/
.testimonial-quote {
    margin-right: 20px;
    margin-bottom: 40px;
}

.testimonial-quote:last-of-type{
    margin-right:0px;
}

@media only screen and (max-width: 700px) {
    .testimonial-quote {
        margin-right: 0px !important;
    }
}
.testimonial-quote .emph{
    color: var(--darkPurple);
    color:black;
    font-weight: bold;
}

.testimonial-quote-bg:before {
    content: "“";
    font-family: "Anton";
    font-weight: 900;
    width: 60px;
    height: 15px;
    line-height: 60px;
    background: #fff;
    text-align: center;
    font-size: 80px;
    color: var(--brightPurple);
    position: absolute;
    top: -6px;
    left: 4%;
}


/* .testimonial-quote-bg:after {
    content: "@kammiri";
    font-family: "Anton";
    font-weight: 900;
    padding-left: 11px;
    padding-right: 12px;
    line-height: 28px;
    background: #fff;
    text-align: center;
    font-size: 28px;
    color: var(--brightYellow);
    position: absolute;
    bottom: -10px;
    right: 22%;
} */


.testimonial-quote-bg {
    border-top: 5px solid var(--brightPurple);
    border-bottom: 0px solid var(--brightPurple);
    
    background-color: #f2f2f2;
    text-align: left;
    position: relative;
    /* background-image: url("puxm-images/white-bg.png"); */
    background-size: cover;
}

.testimonial-quote-inside {
    padding: 20px;
}
/*
END TESTIMONIALS
*/