/*----------------------------------------------------------------------------------------------------------------------------------- SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
    .sales-h1 {
        font-size: 180%;
        font-weight: 600;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 50px;
    }

    .sales-email-offer-box {
        background-color: #f6f6f6;
        display: block;
        position: relative;
        padding: 5px 5px;
        width: 90%;
        left: 5%;
        border: solid white 3px;
    }


    .sales-section {
        background-color: #fff;
        font-family: Lato, Arial, Helvetica, sans-serif;
        /* To make the text come out looking nicely. */
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
    }
    
    .sales-white-font {
        color: white;
    }
    
    .sales-center-box {
        position: relative;
        width: 50%;
        left: 25%;
    }
    
    .sales-section-top {
        /* background-image: url(/assets/img/slide-1.jpg); */
        background-image: linear-gradient(#000000b3,#000000b3), url(/assets/img/slide-3.jpg);
        /* padding: 12rem 0 3rem; */
        padding-top: 5rem;
        height: 100vh;
        position: relative;
        background-size: auto;
        background-position: center;
    }
    
    section.sales-section-top {
        background-color: black;
        opacity: 0.9;
        z-index: 2;
        position: relative;
    }
    
    .sales-ul-section-top {
        list-style-type: none;
        font-size: 150%;
        color: white;
    }
    
    /* ------ h1, h2 ...-------- */
    
    .sales-h1, .sales-h2, .sale-p {
        font-family: 'Poppins', sans-serif;
        color: #2eca6a;
        position: relative;
        width: 50%;
        margin-left: 25%;
        text-align: center;
    }
    
    .sales-h2  {
        font-size: 130%;
        font-weight: 300;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: white;
    }
    
    .sales-h2b {
        font-size: 180%;
        font-weight: 400;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 50px;
        color: black;
        /* position: relative;
        width: 50%;
        left: 25%; */
        text-align: center;
        padding-top: 50px;
    }
    
    .sales-h2b:after {
        display: block;
        height: 2px;
        background-color: #2eca6a;
        content: " ";
        width: 100px;
        margin: 0px auto;
        margin-top: 20px;
    }
    
    
    /* ------ h1, h2 ...-------- */
    
    
    
    .sales-round-btn {
        background-color:transparent;
        border: solid #2eca6a 1px;
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 16px;
      }
      .sales-section-top .sales-round-btn :hover {
        background-color: #2eca6a;
        color: red;
      }
    
    .sales-email-offer-box input:focus {
        border: solid #34ce57 2px;
        box-shadow: none;
        outline: none;
    }
    
    .sales-email-offer-box input:hover {
        border: solid #34ce57 2px;
        transition: border 8.s;
    }
    
    .btn.sales-email-offer-button {
        background-color: #28a745;    
        border: solid white 1px;
        color: white;
        margin-left: 5px;
    }
    
    .btn.sales-email-offer-button:hover {
        background-color: #34ce57;
        border: solid black 1px;
        color: black;
        transition: background-color .75s, color .75s, border .75s;
    }
    
    .sales-center-box .sales-email-offer-arrow {
        font-size: 200%;
    }
    
    /* --------- Call to action box end --------- */
    
    /* --------- Process Box ---------*/
    
    /* 
    This one is a shadow box type
    */
    .sales-process-box {
        margin: 5px 5px;
        padding: 5px;
        background-color: white;
        border-radius: 5px;
        /* width: 95%; */
        margin-left: 5%;
        box-shadow: 0 2px 2px #efefef;
        height: 205px;
        border: solid #28a745 1px;
    } 
    
    /* .sales-process-box {
        display: block;
        position: relative;
        width: 80%;
        left: 10%;
        color: black;
    } */
    
    /* --------- Process Box End ---------*/
    
    .sales-process-box-number {
        /* border-radius: 50%; */
        border: 2px solid #28a745;
        /* border-bottom: 2px solid #28a745;
        border-left: 2px solid #28a745; */
        color: white;
        background-color: #28a745;
        font-weight: 400;
        font-size: 110%;
        display: block;
        height: 35px;
        width: 35px;
        float: left;
        margin-right: 0px;
        margin-top: 0px;
        text-align: center;
        padding-bottom: 3px;
        margin-bottom: 15px;
    }
    
    .sales-process-step {
        padding-top: 5px;
    }
    
    
    /*--------- How the Process Work Section ---------*/
    
    .sales-how-section {
        background-color: white;
        height: 55vh;
    }
    
    
    /* Animation need to import the waypoint.js 
    (3 files, check js folder) and the animate.css file 
    https://animate.style/
    */ 
    
    /* -------------------------------*/
    
    .js--wp-1, 
    .js--wp-2, 
    .js--wp-3,
    .js--wp-4,
    .js--wp-5,
    .js--wp-6 {
        opacity: 0;
    }
    
    .js--ws-1.animated,
    .js--ws-2.animated,
    .js--ws-3.animated,
    .js--wp-4.animated,
    .js--wp-5.animated,
    .js--wp-6.animated
     {
        opacity: 1;
    }
    
    .js--wp-1.animated, .js--wp-6.animated {
        animation-duration: 1s;
    }
    .js--wp-2.animated {
        animation-duration: 1.25s;
    }
    .js--wp-3.animated {
        animation-duration: 1.5s;
    }
    .js--wp-4.animated {
        animation-duration: 1.75s;
    }
    .js--wp-5.animated {
        animation-duration: 2s;
    }
}

/*----------------------------------------------------------------------------------------------------------------------------------- SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {

    .sales-section {
        background-color: #fff;
        font-family: Lato, Arial, Helvetica, sans-serif;
        /* To make the text come out looking nicely. */
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
    }
    
    .sales-white-font {
        color: white;
    }
    
    .sales-center-box {
        position: relative;
        width: 50%;
        left: 25%;
    }
    
    .sales-section-top {
        /* background-image: url(/assets/img/slide-1.jpg); */
        background-image: linear-gradient(#000000b3,#000000b3), url(/assets/img/slide-3.jpg);
        /* padding: 12rem 0 3rem; */
        padding-top: 5rem;
        height: 100vh;
        position: relative;
        background-size: auto;
        background-position: center;
    }
    
    section.sales-section-top {
        background-color: black;
        opacity: 0.9;
        z-index: 2;
        position: relative;
    }
    
    .sales-ul-section-top {
        list-style-type: none;
        font-size: 150%;
        color: white;
    }
    
    /* ------ h1, h2 ...-------- */
    
    .sales-h1, .sales-h2, .sale-p {
        font-family: 'Poppins', sans-serif;
        color: #2eca6a;
        position: relative;
        width: 50%;
        margin-left: 25%;
        text-align: center;
    }
    
    .sales-h1 {
        font-size: 275%;
        font-weight: 600;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 50px;
    }
    
    .sales-h2  {
        font-size: 130%;
        font-weight: 300;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: white;
    }
    
    .sales-h2b {
        font-size: 240%;
        font-weight: 400;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: black;
        /* position: relative;
        width: 50%;
        left: 25%; */
        text-align: center;
        padding-top: 50px;
    }
    
    .sales-h2b:after {
        display: block;
        height: 2px;
        background-color: #2eca6a;
        content: " ";
        width: 100px;
        margin: 0px auto;
        margin-top: 20px;
    }
    
    
    /* ------ h1, h2 ...-------- */
    
    
    
    .sales-round-btn {
        background-color:transparent;
        border: solid #2eca6a 1px;
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 16px;
      }
      .sales-section-top .sales-round-btn :hover {
        background-color: #2eca6a;
        color: red;
      }
    
    /* --------- Call to action box --------- */
    .sales-email-offer-box {
        background-color: #f6f6f6;
        display: block;
        position: relative;
        padding: 5px 5px;
        width: 60%;
        left: 20%;
        border: solid white 3px;
    }
    
    .sales-email-offer-box input:focus {
        border: solid #34ce57 2px;
        box-shadow: none;
        outline: none;
    }
    
    .sales-email-offer-box input:hover {
        border: solid #34ce57 2px;
        transition: border 8.s;
    }
    
    .btn.sales-email-offer-button {
        background-color: #28a745;    
        border: solid white 1px;
        color: white;
        margin-left: 5px;
    }
    
    .btn.sales-email-offer-button:hover {
        background-color: #34ce57;
        border: solid black 1px;
        color: black;
        transition: background-color .75s, color .75s, border .75s;
    }
    
    .sales-center-box .sales-email-offer-arrow {
        font-size: 200%;
    }
    
    /* --------- Call to action box end --------- */
    
    /* --------- Process Box ---------*/
    
    /* 
    This one is a shadow box type
    */
    .sales-process-box {
        margin: 5px 5px;
        padding: 5px;
        background-color: white;
        border-radius: 5px;
        /* width: 95%; */
        margin-left: 5%;
        box-shadow: 0 2px 2px #efefef;
        height: 205px;
        border: solid #28a745 1px;
    } 
    
    /* .sales-process-box {
        display: block;
        position: relative;
        width: 80%;
        left: 10%;
        color: black;
    } */
    
    /* --------- Process Box End ---------*/
    
    .sales-process-box-number {
        /* border-radius: 50%; */
        border: 2px solid #28a745;
        /* border-bottom: 2px solid #28a745;
        border-left: 2px solid #28a745; */
        color: white;
        background-color: #28a745;
        font-weight: 400;
        font-size: 110%;
        display: block;
        height: 35px;
        width: 35px;
        float: left;
        margin-right: 0px;
        margin-top: 0px;
        text-align: center;
        padding-bottom: 3px;
        margin-bottom: 15px;
    }
    
    .sales-process-step {
        padding-top: 5px;
    }
    
    
    /*--------- How the Process Work Section ---------*/
    
    .sales-how-section {
        background-color: white;
        height: 65vh;
    }
    
    
    /* Animation need to import the waypoint.js 
    (3 files, check js folder) and the animate.css file 
    https://animate.style/
    */ 
    
    /* -------------------------------*/
    
    .js--wp-1, 
    .js--wp-2, 
    .js--wp-3,
    .js--wp-4,
    .js--wp-5,
    .js--wp-6 {
        opacity: 0;
    }
    
    .js--ws-1.animated,
    .js--ws-2.animated,
    .js--ws-3.animated,
    .js--wp-4.animated,
    .js--wp-5.animated,
    .js--wp-6.animated
     {
        opacity: 1;
    }
    
    .js--wp-1.animated, .js--wp-6.animated {
        animation-duration: 1s;
    }
    .js--wp-2.animated {
        animation-duration: 1.25s;
    }
    .js--wp-3.animated {
        animation-duration: 1.5s;
    }
    .js--wp-4.animated {
        animation-duration: 1.75s;
    }
    .js--wp-5.animated {
        animation-duration: 2s;
    }

}

/*----------------------------------------------------------------------------------------------------------------------------------- TABLETS PORTRAIT */
 @media only screen and (min-width: 768px) {

    .sales-section {
        background-color: #fff;
        font-family: Lato, Arial, Helvetica, sans-serif;
        /* To make the text come out looking nicely. */
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
    }
    
    .sales-white-font {
        color: white;
    }
    
    .sales-center-box {
        position: relative;
        width: 50%;
        left: 25%;
    }
    
    .sales-section-top {
        /* background-image: url(/assets/img/slide-1.jpg); */
        background-image: linear-gradient(#000000b3,#000000b3), url(/assets/img/slide-3.jpg);
        /* padding: 12rem 0 3rem; */
        padding-top: 5rem;
        height: 100vh;
        position: relative;
        background-size: auto;
        background-position: center;
    }
    
    section.sales-section-top {
        background-color: black;
        opacity: 0.9;
        z-index: 2;
        position: relative;
    }
    
    .sales-ul-section-top {
        list-style-type: none;
        font-size: 150%;
        color: white;
    }
    
    /* ------ h1, h2 ...-------- */
    
    .sales-h1, .sales-h2, .sale-p {
        font-family: 'Poppins', sans-serif;
        color: #2eca6a;
        position: relative;
        width: 50%;
        margin-left: 25%;
        text-align: center;
    }
    
    .sales-h1 {
        font-size: 275%;
        font-weight: 600;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 50px;
    }
    
    .sales-h2  {
        font-size: 130%;
        font-weight: 300;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: white;
    }
    
    .sales-h2b {
        font-size: 240%;
        font-weight: 400;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: black;
        /* position: relative;
        width: 50%;
        left: 25%; */
        text-align: center;
        padding-top: 50px;
    }
    
    .sales-h2b:after {
        display: block;
        height: 2px;
        background-color: #2eca6a;
        content: " ";
        width: 100px;
        margin: 0px auto;
        margin-top: 20px;
    }
    
    
    /* ------ h1, h2 ...-------- */
    
    
    
    .sales-round-btn {
        background-color:transparent;
        border: solid #2eca6a 1px;
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 16px;
      }
      .sales-section-top .sales-round-btn :hover {
        background-color: #2eca6a;
        color: red;
      }
    
    /* --------- Call to action box --------- */
    .sales-email-offer-box {
        background-color: #f6f6f6;
        display: block;
        position: relative;
        padding: 5px 5px;
        width: 60%;
        left: 20%;
        border: solid white 3px;
    }
    
    .sales-email-offer-box input:focus {
        border: solid #34ce57 2px;
        box-shadow: none;
        outline: none;
    }
    
    .sales-email-offer-box input:hover {
        border: solid #34ce57 2px;
        transition: border 8.s;
    }
    
    .btn.sales-email-offer-button {
        background-color: #28a745;    
        border: solid white 1px;
        color: white;
        margin-left: 5px;
    }
    
    .btn.sales-email-offer-button:hover {
        background-color: #34ce57;
        border: solid black 1px;
        color: black;
        transition: background-color .75s, color .75s, border .75s;
    }
    
    .sales-center-box .sales-email-offer-arrow {
        font-size: 200%;
    }
    
    /* --------- Call to action box end --------- */
    
    /* --------- Process Box ---------*/
    
    /* 
    This one is a shadow box type
    */
    .sales-process-box {
        margin: 5px 5px;
        padding: 5px;
        background-color: white;
        border-radius: 5px;
        /* width: 95%; */
        margin-left: 5%;
        box-shadow: 0 2px 2px #efefef;
        height: 205px;
        border: solid #28a745 1px;
    } 
    
    /* .sales-process-box {
        display: block;
        position: relative;
        width: 80%;
        left: 10%;
        color: black;
    } */
    
    /* --------- Process Box End ---------*/
    
    .sales-process-box-number {
        /* border-radius: 50%; */
        border: 2px solid #28a745;
        /* border-bottom: 2px solid #28a745;
        border-left: 2px solid #28a745; */
        color: white;
        background-color: #28a745;
        font-weight: 400;
        font-size: 110%;
        display: block;
        height: 35px;
        width: 35px;
        float: left;
        margin-right: 0px;
        margin-top: 0px;
        text-align: center;
        padding-bottom: 3px;
        margin-bottom: 15px;
    }
    
    .sales-process-step {
        padding-top: 5px;
    }
    
    
    /*--------- How the Process Work Section ---------*/
    
    .sales-how-section {
        background-color: white;
        height: 65vh;
    }
    
    
    /* Animation need to import the waypoint.js 
    (3 files, check js folder) and the animate.css file 
    https://animate.style/
    */ 
    
    /* -------------------------------*/
    
    .js--wp-1, 
    .js--wp-2, 
    .js--wp-3,
    .js--wp-4,
    .js--wp-5,
    .js--wp-6 {
        opacity: 0;
    }
    
    .js--ws-1.animated,
    .js--ws-2.animated,
    .js--ws-3.animated,
    .js--wp-4.animated,
    .js--wp-5.animated,
    .js--wp-6.animated
     {
        opacity: 1;
    }
    
    .js--wp-1.animated, .js--wp-6.animated {
        animation-duration: 1s;
    }
    .js--wp-2.animated {
        animation-duration: 1.25s;
    }
    .js--wp-3.animated {
        animation-duration: 1.5s;
    }
    .js--wp-4.animated {
        animation-duration: 1.75s;
    }
    .js--wp-5.animated {
        animation-duration: 2s;
    }

} 


/*----------------------------------------------------------------------------------------------------------------------------------- TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
 
    .sales-section {
        background-color: #fff;
        font-family: Lato, Arial, Helvetica, sans-serif;
        /* To make the text come out looking nicely. */
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
    }
    
    .sales-white-font {
        color: white;
    }
    
    .sales-center-box {
        position: relative;
        width: 50%;
        left: 25%;
    }
    
    .sales-section-top {
        /* background-image: url(/assets/img/slide-1.jpg); */
        background-image: linear-gradient(#000000b3,#000000b3), url(/assets/img/slide-3.jpg);
        /* padding: 12rem 0 3rem; */
        padding-top: 5rem;
        height: 100vh;
        position: relative;
        background-size: auto;
        background-position: center;
    }
    
    section.sales-section-top {
        background-color: black;
        opacity: 0.9;
        z-index: 2;
        position: relative;
    }
    
    .sales-ul-section-top {
        list-style-type: none;
        font-size: 150%;
        color: white;
    }
    
    /* ------ h1, h2 ...-------- */
    
    .sales-h1, .sales-h2, .sale-p {
        font-family: 'Poppins', sans-serif;
        color: #2eca6a;
        position: relative;
        width: 50%;
        margin-left: 25%;
        text-align: center;
    }
    
    .sales-h1 {
        font-size: 275%;
        font-weight: 600;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 50px;
    }
    
    .sales-h2  {
        font-size: 130%;
        font-weight: 300;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: white;
    }
    
    .sales-h2b {
        font-size: 240%;
        font-weight: 400;
        text-transform: uppercase;
        word-spacing: 5px;
        line-height: 20px;
        color: black;
        /* position: relative;
        width: 50%;
        left: 25%; */
        text-align: center;
        padding-top: 50px;
    }
    
    .sales-h2b:after {
        display: block;
        height: 2px;
        background-color: #2eca6a;
        content: " ";
        width: 100px;
        margin: 0px auto;
        margin-top: 20px;
    }
    
    
    /* ------ h1, h2 ...-------- */
    
    
    
    .sales-round-btn {
        background-color:transparent;
        border: solid #2eca6a 1px;
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 16px;
      }
      .sales-section-top .sales-round-btn :hover {
        background-color: #2eca6a;
        color: red;
      }
    
    /* --------- Call to action box --------- */
    .sales-email-offer-box {
        background-color: #f6f6f6;
        display: block;
        position: relative;
        padding: 5px 5px;
        width: 60%;
        left: 20%;
        border: solid white 3px;
    }
    
    .sales-email-offer-box input:focus {
        border: solid #34ce57 2px;
        box-shadow: none;
        outline: none;
    }
    
    .sales-email-offer-box input:hover {
        border: solid #34ce57 2px;
        transition: border 8.s;
    }
    
    .btn.sales-email-offer-button {
        background-color: #28a745;    
        border: solid white 1px;
        color: white;
        margin-left: 5px;
    }
    
    .btn.sales-email-offer-button:hover {
        background-color: #34ce57;
        border: solid black 1px;
        color: black;
        transition: background-color .75s, color .75s, border .75s;
    }
    
    .sales-center-box .sales-email-offer-arrow {
        font-size: 200%;
    }
    
    /* --------- Call to action box end --------- */
    
    /* --------- Process Box ---------*/
    
    /* 
    This one is a shadow box type
    */
    .sales-process-box {
        margin: 5px 5px;
        padding: 5px;
        background-color: white;
        border-radius: 5px;
        /* width: 95%; */
        margin-left: 5%;
        box-shadow: 0 2px 2px #efefef;
        height: 205px;
        border: solid #28a745 1px;
    } 
    
    /* .sales-process-box {
        display: block;
        position: relative;
        width: 80%;
        left: 10%;
        color: black;
    } */
    
    /* --------- Process Box End ---------*/
    
    .sales-process-box-number {
        /* border-radius: 50%; */
        border: 2px solid #28a745;
        /* border-bottom: 2px solid #28a745;
        border-left: 2px solid #28a745; */
        color: white;
        background-color: #28a745;
        font-weight: 400;
        font-size: 110%;
        display: block;
        height: 35px;
        width: 35px;
        float: left;
        margin-right: 0px;
        margin-top: 0px;
        text-align: center;
        padding-bottom: 3px;
        margin-bottom: 15px;
    }
    
    .sales-process-step {
        padding-top: 5px;
    }
    
    
    /*--------- How the Process Work Section ---------*/
    
    .sales-how-section {
        background-color: white;
        height: 55vh;
    }
    
    
    /* Animation need to import the waypoint.js 
    (3 files, check js folder) and the animate.css file 
    https://animate.style/
    */ 
    
    /* -------------------------------*/
    
    .js--wp-1, 
    .js--wp-2, 
    .js--wp-3,
    .js--wp-4,
    .js--wp-5,
    .js--wp-6 {
        opacity: 0;
    }
    
    .js--ws-1.animated,
    .js--ws-2.animated,
    .js--ws-3.animated,
    .js--wp-4.animated,
    .js--wp-5.animated,
    .js--wp-6.animated
     {
        opacity: 1;
    }
    
    .js--wp-1.animated, .js--wp-6.animated {
        animation-duration: 1s;
    }
    .js--wp-2.animated {
        animation-duration: 1.25s;
    }
    .js--wp-3.animated {
        animation-duration: 1.5s;
    }
    .js--wp-4.animated {
        animation-duration: 1.75s;
    }
    .js--wp-5.animated {
        animation-duration: 2s;
    }

}