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

}

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

    body {
        font: 18px/1.4em Raleway, Helvetica, Arial, sans-serif;
    }

    section {
        width: 904px;
        margin: 0 auto;
        padding: 0.01em 0 0.04em
    }

    #header {
        height: 380px;
    }

    #header section img {
        position: absolute;
        right: 0;
        top: -92px;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 2.5em;
    }

    .wrapper.green-background h2 {
        font-size: 2.8em;
    }

    h3 {
        font-size: 1.8em;
    }

    h4 {
        font-size: 1.2em;
        margin: 0.2em 0;
    }

    h5 {
        font-size: 1.1em;
        margin: 0.2em 0;
    }

    br {
        display: block;
    }

    aside {
        width: 360px;
        margin: 0 0 1em 2.5em;
    }

    .featured {
        background-size: cover;
        padding-top: 27em;
        padding-bottom: 6em;
    }

    #karine-before-after {
        width: 200px;
        margin-top: 10em;
    }

    .block {
        width: 280px;
        margin-right: 16px;
        display: inline-block;
        vertical-align: top;
        min-height: 720px;
    }

    .js .block.two.scale-up {
        transition-delay: 0.3s;
    }

    .js .block.three.scale-up {
        transition-delay: 0.6s;
    }

    .block.last {
        margin-right: 0;
    }

    .block h4 {
        font-size: 1.6em;
    }

    .block .top-img {
        height: 250px;
        width: 313px;
    }

    .solution h3 {
        position: relative;
        padding-left: 160px;
        margin: 0;
    }

    .solution h3.add-margin{
        margin-bottom: 50px;
    }
    .solution h3.with-before:before {
        content: "";
        background: url('../img/checks.jpg') 0 0 no-repeat;
        display: block;
        position: absolute;
        width: 152px;
        height: 152px;
        left:0;
        top: -1em;
    }

    .solution h3.with-before.hover:before {
        background-position: 0 -156px;
    }

    .solution.second h3 {
        margin-left: 340px;
    }

    .solution img {
        margin-top: 3.5em;
    }

    #sneak-peek-slider .bx-wrapper .bx-prev {
        left: -70px
    }

    #sneak-peek-slider .bx-wrapper .bx-next {
        right: -70px;
    }

    #top-success-story {
        position: relative;
        margin-bottom: 2.5em;
    }

    #top-success-story h2 {
        font-size: 2.8em;
    }

    #top-success-story img {
        position: absolute;
    }
    #top-success-story img:first-of-type {
        left: 0;
    }

    #top-success-story img:nth-of-type(2) {
        display: block;
        right: 20px;
        top: 300px;
    }

    #top-success-story iframe {
        padding-left: 7.3em;
        padding-top: 3em;
        height: 292px;
    }


    .success-story .wrapper {
        width:605px;
        position: relative;
        padding: 1.5em 7em 0.5em 2.5em;

    }

    .success-story img.right {
        position: relative;
        z-index: 2;
        right: 180px;
    }

    .success-story img.left {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 10px;
    }

    .success-story.alt .wrapper {
        width: 690px;
        left: 160px;
        padding: 1.5em 2.5em 0.5em 2.5em;
    }

    .success-story.alt .wrapper > div {
        width:615px;
        margin-left: 4em;
    }

    .triangle {
        width: 50px;
        margin: 0 auto;
        padding-top: 40px;
        position: static;
    }

    .triangle.first {
        width: 650px;
    }

    .triangle.second {
        width: 50px;
        position: relative;
        left: 250px;
    }

    .triangle:after {
        content: '';
        width: 0;
        height: 0;
    }

    .triangle.first:after {
        border-top: 120px solid #fff;
        border-right: 50px solid transparent;
        border-left: 80px solid transparent;
    }

    .triangle.second:after {
        border-top: 50px solid #fff;
        border-left: 50px solid transparent;
        border-right: 80px solid transparent;
    }

    .pro-testimonial {
        display: inline-block;
        vertical-align: top;
        width: 420px;
    }

    .pro-testimonial.first {
        margin-right: 50px;
    }

    .pro-testimonial div {
        height: 620px;
    }

    ul#product-content {
        width: 850px;
        margin: 0 auto;
    }

    ul#product-content li > img {
        display: inline-block;
        vertical-align: middle;
    }

    ul#product-content li div {
        display: inline-block;
        width: 600px;
        margin-left: 1em;
        vertical-align: middle;
    }

    .product > img, .product > div {
        display: inline-block;
        vertical-align: top;
    }

    .product > div {
        width: 560px;
        margin-left: 1em;
    }

    .purchase-button {
        width: 70%;
        font-size: 2.3em;
    }

    .digital-box {
        width: 70%;
        padding: 10px 42px;
    }

    #top-slider .bxslider li {
        height: 424px;
    }

    .js #karine-letter, .js .left-slide {
        position: relative;
        left: -10em;
        opacity: 0;
        transition: left 1s ease-out, opacity 0.5s ease-in ;
    }

    .js aside, .js #dave-letter , .js .right-slide {
        position: relative;
        right: -10em;
        opacity: 0;
        transition: right 1s ease-out, opacity 0.5s ease-in;
    }

    .js .top-slide {
        position: relative;
        top: 5em;
        opacity: 0;
        transition: top 1s ease-out, opacity 0.5s ease-in ;
    }

    .over-edge > img {
        max-width: none;
        position: relative;
        display: block;
        margin: 0 auto;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    img.left {
        margin-right: 45px;
    }

    img.right {
        margin-left: 45px;
    }

    .clear {
        clear: both;
    }

    .v4 .resp {
        display: none;
    }

    .v4 .problem {
        width: 90%;
    }

    .v4 .problem > img {
        display: inline;
        margin: 0 45px 0 0;
    }

    .v4 .solution {
        margin-bottom: 1.5em;
    }

    .v4 .solution h3 {
        padding-left: 0;
    }

    .v4 .solution.second h3 {
        margin-left: 400px;
    }

    .v4 .solution h3.with-before:before {
        display: none;
    }

    .v4 #karine-before-after {
        display: block;
    }

    .v4 #top-slider .top-recipes img {
        width: 320px;
        margin: 0 1em 1em 0;
        display: inline;
    }

}


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

    /* ===============
        Maximal Width
       =============== */

    section {
        width: 1026px;
        margin: 0 auto;
    }

    .block {
        width: 313px;
        margin-right: 24px;
        margin-top: 1em;
    }

    .pro-testimonial {
        width: 474px;
    }

    .pro-testimonial div {
        height: 590px;
    }

    .product > div {
        width: 650px;
        margin-left: 1em;
    }

    .v4 .sneap-peek-box{
        width: 960px;
        margin: 2em auto 0;
    }

}