/*** Color Scheme
top banner blue: 00418d w/75% opacity
button color, $49 pink: ed0188
all none white titles, paragraph text gray blue: 34495e
horizontal rule: 000000 w/30% opacity
sky blue: 2aacff
for packages, stroke is: 10px ffffff
gradient gold: c29e32 /  e8bd3b
gradient silver:8e8e8e / a2a2a2
gradient bronze:a27952 / c29163
packages more button gray: 000000 w/50% opacity
footer gradient may have 3 points: 000000 / 171717 / 262626

fonts imported thru Google Fonts
Open Sans Light,
Regular
Extra bold
**/
body {
    color: #34495e;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #34495e;
    font-family: "Open Sans", sans-serif;
}

p {
    color: #34495e;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
}

h2 {
    font-size: 31px;
    font-weight: 800;
}

h4 {
    font-size: 24px;
    font-weight: 300;
}

ul {
    padding-left: 25px;
}

ul li {
    list-style-type: none;
    background-image: url(../img/pool-service-24-7-check-box-icon.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 40px
}

hr {
    border: 1px solid rgba(0, 0, 0, 0.3);
}


.navbar-brand {
    font-size: 23px;
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

.navbar-brand span {
    font-size: 39px;
}

.cta {
    margin-top: 20px;
}

.header-phone {
    font-size: 39px;
}

.cta-text {
    font-size: 23px;
    color: #ffffff;
    font-weight: 600;
}

/*** Bootstrap overrides for buttons ***/
.btn {
    background-color: #ed0188;
    border: 2px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
}

.btn-primary {
    padding: 12px 70px
}

.btn-primary:hover {
    color: #ffffff;
    background-color: #ed0188;
    border-color: #ffffff;
}

.btn-primary:focus {
    color: #ffffff;
    background-color: #ed0188;
    border-color: #ffffff;
}

.btn-primary:active {
    color: #ffffff;
    background-color: #ed0188;
    border-color: #ffffff;
}

.btn-primary:visited {
    color: #ffffff;
    background-color: #ed0188;
    border-color: #ffffff;
}

.center-block {
    text-align: center;
}

header {
    min-height: 780px;
    width: 100%;
}

/*** Left Title in Hero Area ***/
.pool-cleaning-left-title {
    margin-top: 225px;
}

.pool-services-left-title {
    margin-top: -34px;
}

.pool-cleaning-left-title p {
    font-size: 49px;
    font-weight: 400;
}

.pool-services-left-title p {
    font-size: 85px;
    font-weight: 700;
    line-height: 85px;
}

.pool-cleaning-left-title p,
.pool-services-left-title p {
    color: #fff;
    text-shadow: -1px -1px 4px rgba(0, 0, 0, 0.66);
    text-align: center;
}



/*** Lead Box ***/
.lead-box-ab {
    position: absolute;
    width: 401px;
    top: 0px;
    right: 0px;
    background-color: #2aacff;
    margin-top: 50px;
    height: 629px;
    color: #ffffff;
    padding: 20px 30px 10px 30px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.15);
}

.lead-box-ab {
    background: rgba(42, 173, 255, 1);
    background: -moz-linear-gradient(top, rgba(42, 173, 255, 1) 0%, rgba(111, 199, 254, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(42, 173, 255, 1)), color-stop(100%, rgba(111, 199, 254, 1)));
    background: -webkit-linear-gradient(top, rgba(42, 173, 255, 1) 0%, rgba(111, 199, 254, 1) 100%);
    background: -o-linear-gradient(top, rgba(42, 173, 255, 1) 0%, rgba(111, 199, 254, 1) 100%);
    background: -ms-linear-gradient(top, rgba(42, 173, 255, 1) 0%, rgba(111, 199, 254, 1) 100%);
    background: linear-gradient(to bottom, rgba(42, 173, 255, 1) 0%, rgba(111, 199, 254, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2aadff', endColorstr='#6fc7fe', GradientType=0);
}

.page-thank-you .lead-box-ab {
    background-image: url(../img/thank-you-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
}

.lead-box hr {
    border: 1px solid #ffffff;
}

.page-thank-you .lead-box hr {
    margin: 30px 0;
}

.lead-box .title {
    font-size: 36px;
    line-height: 100%;
    letter-spacing: -1px
}

.lead-box .title-large {
    font-size: 45px;
    font-weight: 700;
    line-height: 70%;
    letter-spacing: -1.75px
}

.lead-box .text {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    line-height: 18px;
}

.page-thank-you .lead-box .text {
    font-size: 22.5px;
    font-weight: 600;
    line-height: 27px;
}

.page-thank-you .lead-box .title {
    font-size: 30.48px;
}

.lead-box-list {
    background-image: url(../img/pool-service-lock.png);
    background-repeat: no-repeat;
    background-position: left 5px;
    font-size: 13.5px;
    margin-top: 15px;
    line-height: 16px;
    padding-bottom: 5px;
    padding-top: 3px;
    text-align: left;
}

.page-thank-you .middle {
    padding: 48% 15px;
}

.input {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.input-wide {
    width: 100%;
}

.we-prove-it {
    margin-top: 65px;
    text-align: center;
}

.we-prove-it img {
    margin-left: 60px;
}

/*** Placeholder Styles ***/
::placeholder {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
}

.form-control-lg {
    border: 0px solid #ffffff;
    border-radius: 0;
    padding-top: 4%;
    padding-bottom: 5%;
    padding-left: 8px;
}

/***Section First Month ***/
.large-pink {
    font-size: 61px;
    color: #ed0188;
    font-weight: 800;
}


#first-month {
    padding: 35px 25px;
}

.first-month-text {
    font-weight: 700;
    font-size: 28px;
}

.first-month-list li {
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 9px;
}

.gray-logo {
    padding: 20px 0 0 0;
}

.page-thank-you .gray-logo {
    padding-bottom: 12px;
    margin-top: 50px;
}

.page-thank-you #first-month {
    padding: 0;
}


/*** OUR SERVICES SECTION -- Remove padding from between pics ***/
.col-lg-4.center-block {
    padding-left: 0;
    padding-right: 0;
}

#our-services {
    padding: 60px 0 80px 0;
}

#our-services h4 {
    margin-top: 15px;
}

#our-services p {
    padding-bottom: 0;
    margin-top: 10px;
    line-height: 29px;
}

#our-services img {
    margin-top: 25px;
    border: 1px solid #c9c9c9;
}

/*** Background Images for different sections***/

.header-bg,
.your-backyard-bg,
.title-bg,
.pricing-bg,
.satisfied-customer-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.header-bg {
    background-image: url(../img/pool-service-24-7-little-girl-by-the-pool.jpg);
}

.title-bg {
    background-color: rgba(0, 65, 141, 0.75);
    padding: 34px 0;
}

.your-backyard-bg {
    background-image: url(../img/pool-service-24-7-gorgeous-outside-pool.jpg);
    padding: 100px 60px 100px 60px;

}

.pricing-bg {
    background-image: url(../img/pool-service-24-7-pricing-packages.jpg);
}

.satisfied-customer-bg {
    background-image: url(../img/pool-service-24-7-satisfied-customers.jpg);
    padding-top: 70px;
    padding-bottom: 90px;
}

.right-block {
    text-align: right;
    padding-right: 0;
}

.your-backyard-bg h2,
.your-backyard-bg p,
.satisfied-customer-bg h2,
.satisfied-customer-bg p {
    color: #ffffff;
}

.your-backyard-bg p {
    font-size: 26px;
}

.your-backyard-bg h2 span {
    color: #2aacff;
}

/*** Pricing Box Section ***/
.pricing-bg {
    padding-top: 48px;
    padding-bottom: 66px;
}

.pricing-bg h2 {
    margin-bottom: 60px;
}

.pricing-box h3,
.pricing-box p {
    color: #ffffff;
}

.pricing-box h3 {
    line-height: 20px;
    padding-top: 18px;
    font-size: 32px;
}

.pricing-box {
    text-align: center;
    border: 10px solid #ffffff;
    -webkit-box-shadow: 0px 0px 11px -4px rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 11px -4px rgba(0, 0, 0, 0.9);
    width: 335px;
    height: 253px;
}


.pricing-box hr {
    width: 35%;
    margin-top: 0;
    border: 1px solid #ffffff;

}

.starting-at {
    font-size: 15px;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 0;
    line-height: 120%
}

.starting-price {
    font-size: 66px;
    font-weight: 800;
    margin-bottom: 0;
    padding-top: 0;
    line-height: 45px;
}

.starting-price span {
    font-size: 38px;
    vertical-align: super;
}

.starting-resident {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 30px;

}

.starting-state {
    font-size: 12px;
    font-weight: 600;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.45);
    color: rgba(0, 0, 0, 0.45);
    padding: 8px 50px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 0;
    margin-top: 20px;
}

.btn-secondary:hover {
    /**    background-color: transparent; **/
    border: 1px solid rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 1) !important;
}

.btn-secondary:focus {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.45);
    color: rgba(0, 0, 0, 0.45);
}

.btn-secondary:active {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.45);
    color: rgba(0, 0, 0, 0.45);
}

.btn-secondary:visited {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.45);
    color: rgba(0, 0, 0, 0.45);
}

/*** Gradient Styles ***/

.gold-box {
    background: rgba(232, 189, 59, 1);
    /* Old Browsers */
    background: -moz-linear-gradient(top, rgba(232, 189, 59, 1) 0%, rgba(194, 158, 50, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(232, 189, 59, 1)), color-stop(100%, rgba(194, 158, 50, 1)));
    /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, rgba(232, 189, 59, 1) 0%, rgba(194, 158, 50, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(232, 189, 59, 1) 0%, rgba(194, 158, 50, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(232, 189, 59, 1) 0%, rgba(194, 158, 50, 1) 100%);
    /* IE 10+ */
    background: linear-gradient(to bottom, rgba(232, 189, 59, 1) 0%, rgba(194, 158, 50, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8bd3b', endColorstr='#c29e32', GradientType=0);
    /* IE6-9 */
}

.silver-box {
    background: rgba(162, 162, 162, 1);
    background: -moz-linear-gradient(top, rgba(162, 162, 162, 1) 0%, rgba(142, 142, 142, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(162, 162, 162, 1)), color-stop(100%, rgba(142, 142, 142, 1)));
    background: -webkit-linear-gradient(top, rgba(162, 162, 162, 1) 0%, rgba(142, 142, 142, 1) 100%);
    background: -o-linear-gradient(top, rgba(162, 162, 162, 1) 0%, rgba(142, 142, 142, 1) 100%);
    background: -ms-linear-gradient(top, rgba(162, 162, 162, 1) 0%, rgba(142, 142, 142, 1) 100%);
    background: linear-gradient(to bottom, rgba(162, 162, 162, 1) 0%, rgba(142, 142, 142, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a2a2a2', endColorstr='#8e8e8e', GradientType=0);
}

.bronze-box {
    background: rgba(194, 145, 99, 1);
    background: -moz-linear-gradient(top, rgba(194, 145, 99, 1) 0%, rgba(162, 121, 82, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(194, 145, 99, 1)), color-stop(100%, rgba(162, 121, 82, 1)));
    background: -webkit-linear-gradient(top, rgba(194, 145, 99, 1) 0%, rgba(162, 121, 82, 1) 100%);
    background: -o-linear-gradient(top, rgba(194, 145, 99, 1) 0%, rgba(162, 121, 82, 1) 100%);
    background: -ms-linear-gradient(top, rgba(194, 145, 99, 1) 0%, rgba(162, 121, 82, 1) 100%);
    background: linear-gradient(to bottom, rgba(194, 145, 99, 1) 0%, rgba(162, 121, 82, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c29163', endColorstr='#a27952', GradientType=0);
}

/*** Styles for Satisfied Customers Carousel ***/

.carousel {
    padding-top: 25px;
    min-height: 360px
}

.carousel-inner {
    width: 600px;
}

.carousel-col-2 {
    max-width: 41.666667%
}

.carousel-item {
    color: #ffffff;
}

.carousel-item {
    width: 80%;
    margin-left: 95px;
    font-size: 26px;
    font-style: italic;
    font-family: "Open Sans", sans-serif;
    font-weight: 200
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 22px;
    height: 37px;
}

.carousel-control-next-icon {
    background-image: url(../img/right-arrow.png);
}

.carousel-control-prev-icon {
    background-image: url(../img/left-arrow.png);

}

.carousel-control-prev {
    left: -23px;
}

.carousel-control-next {
    right: -74px;
}

.slide-contact {
    margin-left: 100px;
    ;
}

.footer-grad {
    background: rgba(38, 38, 38, 1);
    background: -moz-linear-gradient(top, rgba(38, 38, 38, 1) 0%, rgba(23, 23, 23, 1) 50%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(38, 38, 38, 1)), color-stop(50%, rgba(23, 23, 23, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(38, 38, 38, 1) 0%, rgba(23, 23, 23, 1) 50%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(38, 38, 38, 1) 0%, rgba(23, 23, 23, 1) 50%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(38, 38, 38, 1) 0%, rgba(23, 23, 23, 1) 50%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(38, 38, 38, 1) 0%, rgba(23, 23, 23, 1) 50%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#262626', endColorstr='#000000', GradientType=0);
    color: #ffffff;
}

footer {
    padding: 30px 0 30px 0;
}

.footer-child {
    margin-top: 10px;
}



/***********************************
******** RESPONSIVE STYLES *********
************************************/

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

    .we-prove-it img {
        margin-left: -15px;
    }

    .gray-logo img {
        width: 90%;
    }

    .carousel-override-1 {
        max-width: 35%;
    }

    .carousel-override-2 {
        max-width: 55%;
    }

    .carousel-inner {
        width: 550px;
    }

    .slide-contact {
        margin-left: 80px;
    }

    .pricing-box {
        width: 290px;
    }

    #our-services img {
        width: 92%;
    }

    .pool-cleaning-left-title p,
    .pool-services-left-title p {
        margin-left: -115px;
    }


}

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

    .pool-cleaning-left-title p,
    .pool-services-left-title p {
        margin-left: 0;
    }

    .pool-cleaning-left-title {
        margin-top: 20px;
    }

    .lead-box-ab {
        right: 0;
        position: relative;
        margin: 0 auto;
    }

    .lead-box .title {
        letter-spacing: -1.5px;
        font-size: 34px;
    }

    .lead-box .title-large {
        letter-spacing: -2px;
        font-size: 45px;
    }

    .carousel-control-next {
        right: -60px;
    }

    .carousel-control-prev {
        left: 0;
    }

    .slide-button-center {
        text-align: center;
        margin-left: 30px;
    }

    header {
        min-height: 882px;
    }

    .header-bg {
        background-position: -485px top;
    }

    .header-bg .col-lg-4 {
        text-align: center;
    }

    .navbar-brand {
        margin: 0;
    }

    .right-block {
        text-align: center;
        padding-right: 0;
        margin: 0;
    }

    .pricing-box {
        margin: 0 auto;
    }

    .pricing-box.silver-box {
        margin-top: 30px;
    }

    .pricing-box.bronze-box {
        margin-top: 30px;
    }

    .satisfied-customer-bg {
        background-position: -120px center;
    }

    .slide-contact {
        margin-left: 230px;
    }

    .mobile-center {
        text-align: center;
    }

    .we-prove-it {
        margin-top: 17px;
    }

    .we-prove-it img {
        margin-left: 0;
        width: 86%;
    }

    .your-backyard-bg {
        padding: 60px 40px 60px 40px;
    }

    .col-lg-4.center-block {
        margin-bottom: 50px;
    }

    #our-services {
        padding: 60px 0 0px 0;
    }

    .pricing-box {
        width: 335px;
    }

    .carousel-override-1 {
        max-width: 10%;
    }

    .carousel-override-2 {
        max-width: 81%;
    }

    .slide-contact {
        margin-left: 0;
    }

    .satisfied-customer-bg {
        background-position: -220px center;
    }

    .first-month-text {
        line-height: 44px;
    }
}

@media only screen and (max-width: 600px) {
    .pricing-box {
        width: 86%;
    }

    .pool-cleaning-left-title p {
        font-size: 39px;
    }

    .pool-services-left-title p {
        font-size: 60px;
    }

    #our-services img {
        width: 83%;
    }

    .lead-box-ab {
        position: relative;
        width: auto;
        margin-top: 50px;
        height: auto;
        padding: 20px 30px 10px 30px;
    }

    .navbar-brand img {
        width: 90%;
    }

    .cta-text {
        font-size: 23px;
    }

    .header-phone {
        font-size: 23px !important;
    }

    .gray-logo img {
        width: 95%;
    }

    .we-prove-it img {
        margin-left: 0;
        width: 95%;
    }

    .btn-primary {
        padding: 12px 25px;
    }

    .slide-contact {
        margin-left: 64px;
        margin-top: 25px;
    }

    .footer-grad img {
        width: 95%;
    }

    .first-month-list {
        margin-bottom: 0;
    }

    .lead-box .title {
        font-size: 30px;
    }

    .lead-box .title-large {
        font-size: 39px;
    }

    .we-prove-it img {
        margin-left: 0;
        width: 100%;
    }

    .your-backyard-bg h2,
    .satisfied-customer-bg h2 {
        font-size: 25px;
    }

    .your-backyard-bg {
        padding: 50px 20px 60px 20px;
    }

    .your-backyard-bg p {
        font-size: 24px;
    }

    .col-lg-4.center-block {
        margin-bottom: 10px;
    }

    .satisfied-customer-bg {
        background-position: -321px center;
    }

    .carousel-inner {
        width: 300px;
    }

    .carousel-item {
        margin-left: 48px;
        font-size: 20px;
    }

    .carousel-control-prev {
        left: -18px;
    }

    .carousel-control-next {
        right: -34px;
    }

    .carousel-override-2 {
        margin-left: -10px;
    }

    .slide-contact {
        margin-left: 19px;
    }

    .slide-button-center {
        text-align: center;
        margin-left: 0;
    }

}