/* EXTRAS

-------------------------------- */

/* Padding */

.noPadBot {
    padding-bottom: 0 !important
}

.noPadTop {
    padding-top: 0 !important
}

.padBot {
    padding-bottom: 24px
}

.padTop {
    padding-top: 24px
}



.containerPadBot {
    padding-bottom: 7%;
}

.containerPadTop {
    padding-top: 7%;
}



/* Margins */

.noMargBot {
    margin-bottom: 0
}

.noMargTop {
    margin-top: 0 !important
}

.margBot {
    margin-bottom: 0.667em
}
/* 12px */

.margTop {
    margin-top: 0.667em
}
/* 12px */



/* Floats */

.floatR {
    float: right;
}

.floatL {
    float: left;
}



/* Text Alignments */

.alignR {
    text-align: right;
}

.alignC {
    text-align: center;
}



/* ICONS

--------------------------------- */

.iconEmail:before {
    content: '\77';
    font-family: 'fontcon';
    margin: -4px 10px 0 0;
    display: inline-block;
    vertical-align: middle;
}



/* CHARACTER STYLES 

--------------------------------- */

.colorGreenBold {
    font-weight: 800;
    color: #00B259;
}



.colorLimeBold {
    font-weight: 800;
    color: #a8d035;
}



.colorWhite {
    color: #fff !important
}

.colorGrey {
    color: #777 !important
}





/* BUTTONS

-------------------------------- */

/* Button sizes */

.buttonLrg a {
    font-size: 29px
}

.buttonSm a {
    font-size: 1.111em;
}
/* 20px */



/* Button Base */

button.outline {
    margin-top: 1em; /* 16px */
}

.outline a {
    border: solid 3px;
    border-radius: 50px;
    font-weight: 800;
    padding: 0.556em 1em; /* 10px 22px */
    display: inline-block;
    width: auto;
    margin: 0 auto;
    -webkit-transition: background .2s ease-in-out;
}



/* Button colours */

/* add ".whiteOutline" to "button.outline" for a white button */

.outline.whiteOutline {
    color: #fff;
    border-color: #fff;
}



/* add ".greenOutline" to "button.outline" for a green button */

.outline.greenOutline {
    color: #00B259;
    border-color: #00B259;
}



/* add ".darkOutline" to "button.outline" for a dark button */

.outline.darkOutline {
    color: #414042;
    border-color: #414042
}



/* Button Hover States*/

.outline.whiteOutline a:hover {
    background: rgba(255,255,255,0.25);
}

.outline.greenOutline a:hover {
    border-color: inherit;
    background: #00B259;
    color: #fff;
}



.outline.darkOutline a:hover {
    background: rgba(0,0,0,0.1);
}



/* LINKS 

--------------------------------- */

/* Add ".cta" to any "a" to create a bolded/underlined link */

a.cta {
    font-weight: 700;
    color: #00B259;
    border-bottom: solid 2px #00B259;
    -webkit-transition: border-color, color 0.1s linear;
}



    a.cta:hover {
        cursor: pointer;
        border-color: #a8d035;
        color: #a8d035;
    }



/* LIST STYLES

--------------------------------- */

/* dl = Definition List */

.counterList {
    counter-reset: my-badass-counter;
    max-width: 400px;
    margin: 0 auto;
}



    /* dt = Definition Term */

    .counterList dt {
        text-align: left;
        padding-left: 45px;
        position: relative;
        font-size: 18px;
        padding-bottom: 15px;
        line-height: 1.3
    }



        .counterList dt:before {
            content: counter(my-badass-counter);
            counter-increment: my-badass-counter;
            position: absolute;
            left: 0;
            top: -2px;
            background-color: #00B259; /*#a8d035*/
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            padding: 7px;
            border-radius: 100px;
            height: 16px;
            width: 16px;
            text-align: center;
            line-height: 1
        }



/* Regular List */

ul.longArrowList {
    font-weight: 300;
    margin-top: 0.278em
}



    ul.longArrowList li {
        font-size: 1em;
        margin-bottom: 1em;
        position: relative;
        margin-left: 1.5em;
        text-align: left;
        line-height: 1.4em
    }



        ul.longArrowList li:last-child {
            margin-bottom: 0
        }



        /* Adds the "long arrow" icon as a bullet for each li */

        ul.longArrowList li:before {
            content: "\4d";
            font-family: 'fontcon';
            position: absolute;
            left: -30px;
        }



/* PARAGRAPH STYLES

--------------------------------- */

/* Use this on dark backgrounds */

.p400 p {
    font-weight: 400 !important
}



p.calloutP-only {
    font-size: 1.333em;
    line-height: 1.333em
}



/* Use this when there is MORE than ONE paragraph in a ".calloutBand" section */

p.calloutP {
    font-size: 1.111em;
}



/* Use "p.calloutP-only" when there is only ONE paragraph in a ".calloutBand" */

p.calloutP-only,
p.calloutP {
    text-align: center;
    font-weight: 400
}



p.pLrg {
    font-size: 1.222em
}



/* PRICE STYLES

--------------------------------- */

.priceGroup {
    margin: 0 auto 1.111em auto;
    color: #fff;
    width: 315px;
    display: inline-block;
}



a.regPrice {
    background-color: #a8d035;
    border-radius: 200px;
    height: 150px;
    width: 150px;
    padding-top: 1.944em;
    display: inline-block;
    float: left;
}



    a.regPrice:first-child {
        margin: 0 0.833em 0 0
    }



.priceHeader {
    text-align: center;
    font-size: 1.333em;
    margin-bottom: 0;
    font-weight: 600;
}



.price {
    font-size: 2.8em;
    text-align: center;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
}



/* DISCLAIMER

--------------------------------- */

.disclaimer {
    max-width: 600px;
    border: solid 1px #ccc;
    padding: 0.85em;
    margin: 0.85em auto 0;
    background-color: #f8f8f8
}



    .disclaimer p {
        font-size: 0.889em;
        text-align: center
    }



/* BORDERS

--------------------------------- */

/* When adding a border or a background-color to any div, start with ".fullBorder" to create the necessary padding. */

.fullBorder {
    padding: 1.5em;
}



/* Border Bottom padding and margins */

.borderBottomPadMarg {
    margin-bottom: 1.667em;
    padding-bottom: 1.667em
}



/* Border Top padding and margins */

.borderTopPadMarg {
    margin-top: 1.667em;
    padding-top: 1.667em
}



/* Border Weights */

.borderBottom {
    border-bottom: solid 1px;
}

.borderTop {
    border-top: solid 1px
}



/* Border Colours */

.borderWhite {
    border-color: #fff
}

.borderGreyLight {
    border-color: #e1e1e1
}



/* BACKGROUNDS

---------------------------------*/

/* Colours */

.bgLime {
    background-color: #a8d035
}

.bgGreen {
    background-color: #00B259
}

.bgGreyLight {
    background-color: #e8e8e8
}



/* */

.fadedBlack {
    background-color: rgba(0,0,0,0.2);
    min-height: 150px
}



/* FEAT AND TOP IMAGES

---------------------------------*/

.mainImg {
    background: url(../images/featImg/featImg.jpg) center no-repeat;
    background-size: cover
}

/* Add a slightly darker background the main button on the home page */
.featImgInner button.outline a {
    background-color: rgba(0,0,0,0.3);
}

.topImgSchedules {
    background: url(../images/topImg/topImgSchedules.jpg) center no-repeat;
    background-size: cover
}

.topImgAbout {
    background: url(../images/featImg/greenwaveTeam.jpg) center 40% no-repeat;
    background-size: cover
}

.topImgCoaches {
    background: url(../images/topImg/topImgCoaches.jpg) center no-repeat;
    background-size: cover
}

.topImgContact {
    background: url(../images/topImg/topImgContact.jpg) center no-repeat;
    background-size: cover
}

.topImgParties {
    background: url(../images/topImg/topImgParties.jpg) center no-repeat;
    background-size: cover
}

.hiringCoach {
    background: url(../images/hiringCoaches.jpg) center no-repeat;
    background-size: cover;
}

/* MIN-WIDTH 768px 
----------------------------------- */

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

    /* add for extra ".container" padding */

    .containerPadBot {
        padding-bottom: 2.778em;
    }
    /* 50px */

    .containerPadTop {
        padding-top: 2.778em;
    }
    /* 50px */



    /* .buttonSm a     {font-size: 24px;}24px */

    button.outline {
        margin-top: 1.333em;
    }
    /* 24px */



    p.pLrg {
        font-size: 1.444em
    }
    /* 24px */

    p.calloutP {
        font-size: 1.222em;
    }
    /* 22px */

    p.calloutP-only {
        font-size: 1.444em;
    }
    /* 26px */

    p.intro {
        font-size: 1.333em;
    }



    .priceGroup {
        width: 395px
    }

    a.regPrice {
        height: 170px;
        width: 170px;
        padding-top: 2.333em; /* 42px */
        float: none;
    }



        /* add a space on the first price circle */

        a.regPrice:first-of-type {
            margin: 0 2.778em 0 0
        }
    /* 0 50px 0 0 */

    .price {
        font-size: 3.056em
    }
    /* 55px */

}



/* MIN-WIDTH 1024px 

----------------------------------- */

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

    /* Removes transluscent black from the featImg */

    .fadedBlack {
        background-color: transparent;
    }

    .topImgAbout .fadedBlack {
        background-color: rgba(0,0,0,0.2);
        min-height: 300px;
    }

    .topImgAbout .container {
        padding-top: 70px;
    }

    .featImgInner {
        max-width: 51%;
        float: right;
        text-align: right;
    }
}