/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{}

.primary-color{
    color: #0015FF;
}

.light-color{
    color: white;
}

.dark-color{
    color: black;
}

.primary-background{
    background-color: #b72d3b;
}

.light-background{
    background-color: white;
}

.dark-background{
    background-color: black;
}

img{max-width: 100%;}

.cta-fixed{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bfd255+0,8eb92a+50,72aa00+51,9ecb2d+100;Green+Gloss */
background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
}
.main-row {
    background-size: 1990px;
}

.logo-wrapper{
    max-width: 45%;
    margin-top: 0.6rem;
}

.step.active{
    opacity: 1;
    visibility: visible;
    display: block;
}

#leadForm{
    overflow: hidden;
}
.step {
    opacity: 0;
    visibility: hidden;
    display: none;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: black;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: black;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: black;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: black;
  }

.deco-wrapper{
    opacity: 0.2;
}
.deco-wrapper:after{
    position: absolute;
    content: "";
    right: -110px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 94px 0 0 110px;
    border-color: transparent transparent transparent #fff;
}

.deco-wrapper:before{
    position: absolute;
    content: "";
    left: -1920px;
    width: 1920px;
    height: 100%;
    background-color: white;
}

/* Cta Title */
.cta-title:after{
    content: "";
    position: absolute;
    right: 100%;
    top: 0px;
    background-color:#b72d3b;
    width: 1000px;
    height: 100%;
}

.cta-title:before {
    content: "";
    position: absolute;
    right: -110px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 94px 0 0 110px;
    border-color: transparent transparent transparent #b72d3b;
}

.phone-cta:before{
    content: "";
    position: absolute;
    left: -110px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 110px 88px 0;
    border-color: transparent #b72d3b transparent transparent;
}

/* Form Style start */
form input, form select, form date {width: 100%; padding: 0.8rem; border: none;}

form button, form a.main-button{
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.7rem;
    border: none;
    min-width: 30%;
    cursor: pointer;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

form button:hover, form a.main-button:hover{
    min-width: 50%;
}
/* Form Style End */

/* Features list */

.features-list{
    padding: 0px;
}

.features-list ul{
    padding: 0px;
}

.features-list ul li{
    padding: 0px 1.2rem;
    display: inline-block;
    background-image: url(../img/red-bullet.png);
    background-size: 0.7rem;
    background-repeat: no-repeat;
    background-position: left center;
    line-height: 2.5rem;
    font-size: 1rem;
}

.grid-text{
    display: none;
}

.grid-text.active{
    display: block;
}

@media all and (min-width: 1200px) and (max-width: 1600px) {
    html{font-size: 14px;}
    .cta-title:before {
        right: -80px;
        border-width: 82px 0 0 80px;
    }
    .main-row {
        background-size: 1710px;
    }
    .phone-cta:before {
        left: -90px;
        border-width: 0 90px 78px 0;
    }
}

@media all and (min-width: 1200px) and (max-width: 1600px) {
    html{font-size: 14px;}
    .cta-title:before {
        right: -80px;
        border-width: 82px 0 0 80px;
    }
    .deco-wrapper:after {
        right: -80px;
        border-width: 82px 0 0 80px;
    }
    .main-row {
        background-size: 1710px;
    }
    .phone-cta:before {
        left: -90px;
        border-width: 0 90px 78px 0;
    }
}

@media all and (min-width: 992px) and (max-width: 1200px) {
    html{font-size: 12px;}
    .cta-title:before {
        right: -70px;
        border-width: 70px 0 0 70px;
    }
    .deco-wrapper:after {
        right: -70px;
        border-width: 70px 0 0 70px;
    }
    .main-row {
        background-size: 1460px;
        background-position: -270px top !important;
    }
    .phone-cta:before {
        left: -70px;
        border-width: 0 70px 70px 0;
    }
    .testimonials-row{
        background-size: 1230px !important;
    }
}

@media all and (min-width: 0px) and (max-width: 991px) {
    html{font-size: 12px;}
    .cta-title:before {
        display: none;
    }
    .deco-wrapper:after {
        display: none;
    }
    .main-row {
        background-image: none !important;
    }
    .phone-cta:before {
        left: -70px;
        border-width: 0 70px 70px 0;
    }
    .testimonials-row{
        background-size: 1230px !important;
    }
    .price-wrapper{width: 100%; text-align: center;}
    .price-cta{width: 100%; text-align: center;}
    .logo-wrapper{margin-top: 2rem; margin-bottom: 5rem; margin-left: 2rem;}
    .logo-container{background-image: url(../img/background-image.jpg); background-repeat: no-repeat; background-size: 100%; background-position: top right;}
    .container.main-container{max-width: 100%; margin: 0px; padding: 0px;}
}

@media all and (min-width: 0px) and (max-width: 767px){
    .phone-cta:before {
        display: none;
    }  
    form button, form a.main-button{min-width: 50%;}
    .testimonials-row{padding: 2rem !important; background-image: none !important;}
    footer{padding-bottom: 90px;}
}