@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);

/***********************************************
                Global styles
***********************************************/

html, body {
    width: 100%;
    height: 100%;
    background-image: url("../img/pattern.png");
}

body {
    font-family: Source Sans Pro, sans-serif;
    margin: 0 auto;
}

h1,h2,h3,p {
    margin: 0;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/***********************************************
                    Layout
***********************************************/

.container {
    width: 1006px;
    margin: 0 auto;
    position: relative;
}

header h1 {
    font-weight: 700;
    font-size: 40px;
    color: #EA167F;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 40px 20px 20px;
}

#promote {
    width: 886px;
    background-color: #fff;
    border-radius: 5px;
    padding: 40px 60px;
    margin-bottom: 40px;
}

#promote .books {
    position: absolute;
    left: 60%;
    bottom: 72%;
}

#promote h2 {
    font-size: 28px;
    font-weight: 600;
    color: #454545;
    margin-bottom: 35px;
}

#promote p {
    font-size: 21px;
    font-weight: 400;
    color: #2A2A2A;
    line-height: 1.6;
    letter-spacing: -0.7px;
}

#promote .col {
    width: 440px;
    margin-bottom: 70px;
}

.signUp {
    width: 410px;
    padding: 30px;
    background-color: #109EDD;
    display: inline-block;
    position: absolute;
    left: 56%;
    top: 30%;
}

.signUp h2 {
    font-size: 30px !important;
    color: #FFF !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}

.signUp p {
    font-size: 18px !important;
    color: #FFF !important;
    margin-bottom: 20px;
}

.signUp .form-control {
    width: 380px;
    padding: 10px 15px; 
    border: 0;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
}

.signUp .submit,
.signUp input[type=button] {
    background-color: #FFBA20;
    color: #251D72;
    border: none;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.7px;
    padding: 6px 32px;
    text-transform: uppercase;
    float: right;
}

::-webkit-input-placeholder {
   color: #C0C0C0;
   letter-spacing: -0.7px;
}

.clickBank img {
    margin-right: 50px;
}

.clickBank p {
    display: inline-block;
}

#letter {
    width: 686px;
    padding: 100px 160px;
    background-color: #FFF;
    border-radius: 5px;
    margin-bottom: 40px;
}

#letter p {
    font-size: 20px;
    color: #313131;
    margin-bottom: 25px;
}

#letter p:first-child {
    font-size: 36px;
}

#letter p:nth-child(6) {
    margin-bottom: 60px;
}

#letter h2 {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #DC6A16;
    margin-bottom: 60px;
}

#clickbank {
    width: 686px;
    padding: 100px 160px;
    background-color: #AC066E;
    border-radius: 5px;
    margin-bottom: 40px;
}

#clickbank h2 {
    font-size: 37px;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

#clickbank p {
    font-size: 24px;
    color: #FFF;
    text-align: center;
    margin-bottom: 25px;
}

#clickbank a {
    color: #FFD933;
}

#reasons {
    width: 826px;
    padding: 100px 70px 100px 110px;
    background-color: #FFF;
    border-radius: 5px;
    margin-bottom: 40px;
}

#reasons h2 {
     font-size: 32px;
     color: #E45F0F;
     font-weight: 600;
     margin-bottom: 55px;
     margin-left: 240px;
}

#reasons h3 {
    font-size: 26px;
    color: #759D16;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 45px;
}

#reasons p {
    font-size: 20px;
    color: #313131;
    margin-bottom: 25px;
}

.reasons {
    width: 580px;
    display: inline-block;
    margin-left: 90px;
}

.images {
    width: 151px;
    float: left;
    display: inline-block;
    text-align: center;
}

.images img:first-child {
    margin-bottom: 130px;
}

.images img:nth-child(2) {
    margin-bottom: 290px;
}

.images img:nth-child(3) {
    margin-bottom: 70px;
}

.images img:nth-child(4) {
    margin-bottom: 170px;
}

.images img:nth-child(5) {
    margin-bottom: 310px;
}

.images img:nth-child(6) {
    margin-bottom: 260px;
}

.images img:nth-child(7) {
    margin-bottom: 70px;
}

.images img:nth-child(8) {
    margin-bottom: 50px;
}

#headline {
    width: 626px;
    padding: 60px 190px;
    background-color: #C33981;
    border-radius: 5px;
    margin-bottom: 40px;
}

#headline h2 {
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
}

#money {
    width: 626px;
    padding: 60px 190px;
    background-color: #FFF;
    border-radius: 5px;
    margin-bottom: 40px;
}

#money h2 {
    font-size: 32px;
    font-weight: 500;
    color: #BF3727;
    margin-bottom: 40px;
}

#money p {
    font-size: 20px;
    color: #313131;
    margin-bottom: 25px;
}

#join {
    width: 686px;
    padding: 70px 160px;
    background-color: #AC066E;
    border-radius: 5px;
    margin-bottom: 30px;
}

#join h2 {
    font-size: 34px;
    font-weight: 600;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
}

#join p {
    width: 488px;
    font-size: 22px;
    color: #FFF;
    margin-left: 115px;
    margin-bottom: 25px;
}

#join p:nth-child(4) {
    margin-bottom: 0;
}

#join form {
    margin-left: 115px;
}

#join .form-control {
    width: 423px;
    padding: 10px 15px; 
    border: 0;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
}

#join .submit {
    background-color: #FFBA20;
    color: #FFF;
    border: none;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.7px;
    padding: 6px 32px;
    text-transform: uppercase;
    margin-left: 296px;
    margin-bottom: 20px;
}
.mailto {
    color: #fff;
    text-decoration: none;
    font-size: 26px;
    font-weight: 600;
}

footer {
    margin-bottom: 45px;
}

footer small {
    text-align: center;
    display: block;
    font-size: 15px;
    color: #848585;
}

@media screen and (min-width: 991px) and (max-width: 1090px) {
    .container {
        width: 890px !important;
        box-sizing: border-box;
    }
    #promote .books {
        width: 400px;
    }
    .signUp {
        left: 53%;
    }
    .images img:first-child {
      margin-bottom: 200px;
    }
    .images img:nth-child(2) {
      margin-bottom: 320px;
    }
    .images img:nth-child(3) {
      margin-bottom: 80px;
    }
    .images img:nth-child(4) {
      margin-bottom: 210px;
    }
    #reasons {
        padding: 100px 50px;
    }
    .reasons {
        width: 540px;
    }
    #join p {
        margin: 0 auto 25px auto;
    }
    #join form {
        margin-left: 45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 990px) {
    .container {
        width: 90% !important;
    }
    #promote,
    #letter,
    #clickbank,
    #reasons,
    #headline,
    #money,
    #join {
        box-sizing: border-box;
        padding: 20px;
    }
    #promote .books {
        position: relative;
        left: 0;
        top: 0;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    .col {
        max-width: 100%;
    }
    .signUp {
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        left: 0;
        margin: 0 auto 20px auto;
        display: block;
        overflow: hidden;
    }
    .signUp .form-control {
        max-width: 100%;
        box-sizing: border-box;
    }
    .signUp .mailto {
        font-size: 24px;
    }
    .reasons {
        width: 100%;
    }
    #reasons h2 {
        margin-left: 0;
    }
    .reasons,
    #join form,
    #join .form-control {
        margin-left: 0;
        max-width: 100%;
    }
    #join p {
        margin: 0 auto 25px auto;
        max-width: 100%;
    }
    .images {
        width: 100%;
    }
    .images img {
        margin-bottom: 0 !important;
    }
    #join .join-form {
        max-width: 420px;
        margin: 0 auto;
    }
    #join .form-control {
        box-sizing: border-box;
    }
    #join .submit {
        float: right;
    }
}

@media screen and (max-width: 480px) {
    .container {
        width: 90% !important;
    }
    #main-header {
        overflow: hidden;
    }
    #main-header h1 {
        font-size: 30px;
        margin: 40px 0;
    }
    #promote {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        box-sizing: border-box;
        overflow: hidden;
    }
    #promote .books {
        position: static;
        width: 100%;
        height: auto;
    }
    #promote .col {
        width: 100%;
    }
    #promote h2 {
        font-size: 26px;
    }
    #promote p {
        font-size: 20px;
    }
    .signUp {
        width: 110%;
        position: relative;
        left: -5%;
        top: -5%;
        box-sizing: border-box;
    }
    .signUp .form-control,
    #join .form-control {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 15px;
        font-size: 18px;
    }
    .signUp h2 {
        font-size: 26px !important;
    }
    .signUp .submit,
    #join .submit {
        font-size: 18px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .signUp p {
        line-height: 22px !important;
    }
    .clickBank {
        margin-top: 40px;
    }
    #letter,
    #clickbank,
    #reasons,
    #headline,
    #money,
    #join {
        width: 100%;
        padding: 50px 5%;
        box-sizing: border-box;
        border-radius: 0;
        margin-bottom: 0;
    }
    #letter h2,
    #clickbank h2,
    #reasons h2,
    #money h2,
    #join h2 {
        font-size: 26px;
    }
    #letter p,
    #clickbank p,
    #reasons p,
    #money p,
    #join p {
        font-size: 18px;
    }
    #reasons h2 {
        margin: 0;
    }
    .images {
        width: 100%;
        text-align: center;
        margin-top: 40px;
    }
    .images img {
        margin-bottom: 40px !important;
        display: inline-block;
    }
    .images img:nth-child(n+3){
        display: none;
    }

    .reasons {
        width: 100%;
        margin: 0;
    }
    #reasons h3 {
        font-size: 24px;
    }
    #join {
        margin-bottom: 35px !important;
    }
    #join p,
    #join form {
        width: 100%;
        margin-left: 0;
        overflow: hidden;
    }
    #join .submit {
        float: right;
    }
    #join #name {
        margin-bottom: 0;
    }
    .mailto {
        font-size: 16px;
    }
}