@import url(https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto:400,700,500,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
    padding:0;
    margin:0;
    color:#333;
    line-height: 1.2em;
    font-size:24px;
    font-family: 'Proxima Regular';
}
#top-bar{
    background: #4c1b3c;
    padding: 20px 15px;
}
#top-bar h2{
    color:#fff;
    text-transform:uppercase;
    margin:0;
    padding:0;
    text-align:Center;
    font-size:28px;
    
}
.wrapper{
    max-width:980px;
    margin:0 auto;
    padding:0 15px;
    width: auto;
}
.clear{clear:both;}
#social{
    width: 57px;
    background: #4c1b3c;
    position: fixed;
    left:0;
    text-align: center;
    top:180px;
    padding: 10px 7px 10px;
    z-index: 10;
    }
#social p{
    color:#fff;
    font: 14px 'Proxima Regular';
}
#social  img{display: initial; margin:0 0 10px;}
/**********banner page***/

#banner{
    background: url(https://drsrinipillay.com/assets/2017/04/Tinker-book-bonus-page-TOP-IMAGE-bg.jpg) top right no-repeat;
    background-size:cover;
    padding:70px 0;
}
#banner .text{
    max-width:720px;
}
#banner img{float:left;
    margin-right:40px;}
#banner  h1{
    font: 44px 'Proxima Light';
    padding:0;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
    line-height: 1.2em;
    color: #fff;
}
#banner  h1 span{color: #f5019b; font-weight: bold;}
a.yellowbtn{
      transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    color:#333;
    text-transform:uppercase;
    font:32px Oswald;
    text-decoration:none;
    display:block;
    max-width:525px;
    text-align:center;
    padding:25px 0;
    background: #ffcc33;
    margin: 50px auto 0;
}

#bonuses{
    padding:70px 0;
}
#bonuses h1:after{
    clear:Both;
    content:"";
    display:block;
}
#bonuses h1 img, h1.bonuses img{float:left;margin-right:20px;position: relative;top: -30px;}
#bonuses h1, h1.bonuses{
    font: 57px Nexa bold;
    text-transform: uppercase;
    color: #f5019b;
    margin: 0 auto 35px;
    text-align: center;
    max-width: 766px;
    }

    
a.btn {
    font-size: 27px;
    background: #360627;
    color: #fff;
    border: 2px solid #f30090;
    margin-top: 20px;
}#steps{
    padding:0;
    margin:0;
    text-align:Center;
}
#steps li p{
    font:400 27px 'Proxima Regular';
    color:#000;
    margin:10px 0;
    padding:0;
}
#steps li#step1{
    width: 210px;
}
#steps li#step2{
    width:370px;
}
#step2 a{
    color:#000;text-decoration:none;
}
#steps li#arrow{
    width:55px;
    margin-top:20px;
}
#steps li#step3{
    width:212px;
}
#steps li{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:top;
    text-align:center}
#bonuses a.btn {
    text-align: center;
    font-size: 34px;
    display: block;
    padding: 20px!important;
}

h2.reserve{
    color: #f5019b;
    font: 46px 'Proxima Regular';
    text-transform: uppercase;
    text-align: Center;
    line-height: 1em;
    margin-bottom: 70px;
}
h2.reserve span{
    color: #831560;
    font-family: 'Proxima Bold';
}

.bonuslist{
    margin: 0 0 70px;
    max-width: 850px;
    margin: 0 auto 70px;
}
.bonuslist img{
    float:left;
    margin-right: 0px;
    margin-top: 50px;
    width: 117px;
}
.bonuslist .text{
    width: 706px;
    float: right;
    text-align:center;
}
.bonuslist .text h2{
    color: #dabc65;
    text-transform:uppercase;
    text-align :Center;
    font: 36px Otama;
    margin: 0;
    padding: 0;
}
.bonuslist:after{
    clear:both;
    content:"";
    display:block;
}
.bonuslist .text h2 span{
    color: #831560;
    display:block;
    text-transform:none;
    font: 31px 'Proxima Bold';
}
.bonuslist .text p{
    color:#333;
    font: 23px 'Proxima Light';
    margin: 0;
    padding: 0;
    text-align: left;
}
div#reserve {
    background: #f6f6f6;
    padding: 70px 0;
}

#about-thinker h2,h2.title{
    background:#4c1b3c;
    color:#bea458;
    text-align:center;
    padding:30px 10px;
    font:57px 'Otama';
}
 #questions p{
      color:#fff;
      font:23px 'Proxima Light';
      line-height: 1.3em;
 }
#questions{
    background: #291527 url(../images/questions.jpg) top center no-repeat;
    color:#fff;
    font:23px 'Proxima Light';
    padding: 50px 0;
	background-size: cover;
}
.question h3{
    text-align:center;
    color:#f5019b;
    font-size:46px;
    margin:0 0 20px;
}
.question{
    max-width:900px;
    padding:0 15px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}
.question:after{
    width:200px;
    height:1px;
    background:#bea458;
    display:block;
    margin: 50px auto;
    content:"";
}
.question:last-child:after{
    display:none;
}
ul.t-image{
    padding:0;
    margin:0;
    text-align:center;
}
ul.t-image img{
    margin-bottom:10px;
}
ul.t-image li p{
    font-size:16px!Important;
}
ul.t-image li{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:top;
    width:190px;
    margin:10px 20px;
    font-size:16px;
}
ul.t-image li span{
    color:#f5019b;
    display:block;
}
.question:first-child ul.t-image li{
    margin:10px 100px;
}

div#did-you-know {
    font: 23px 'Proxima Regular';
    padding:75px 0;
} 
 div#did-you-know p{
      font: 23px 'Proxima Regular';
 }
 div#did-you-know  span{
     color:#831560;
     font-family:'Proxima Bold'
 }

.sample div{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
}

.image {
    width: 200px;
}

.text {
    width: 74%;
    margin-left: 20px;
}

.sample {
    margin: 30px 0 0;
}
div#harness {
    background:url(../images/harness.jpg) top center no-repeat;
    background-size:cover;
    padding: 90px 0;
}
div#harness li:before {
     content:"";
   position:absolute;
   top:7px;
   left:2px;
    font-size:35px;
    width:10px;
    height:10px;
    background:#bea458;
    border-radius:100%;
}
div#harness li{
    position:relative;
    font-size:23px;
    margin:0 0 30px;
     color:#fff;
    padding-left:20px;
}

div#harness h3 {
    font-size: 35px;
    text-align: center;
    text-transform: none;
    margin: 0 0 30px;
    line-height: 1.2em;
}

div#harness p{
    font-size:23px;
    color:#fff
}

#testimonials{
    margin: 0 0 35px;
}
#testimonials li:nth-child(even){
    background:#f6f6f6
}
#testimonials li:nth-child(even) h3{
    text-align:right;
}
#testimonials ul{
    padding:0;
    margin: 40px 0 0;
}
#testimonials li:after{
    clear:both;
    content:"";
    display:block;
}
#testimonials li{
    padding:35px 0;
    list-style:none;
    margin:0;
}
#testimonials h3{
    color: #4c1b3c;
    font: 20px 'Proxima Bold';
    margin: 20px 0 0;
    padding:0;
    text-transform: none;
}
#testimonials p{
    color:#04080b;
    font: 23px 'Proxima Light';
    margin:0;
    padding:0;
}
#testimonials img.alignleft{
    float:Left;
    margin-right:25px;
}
#testimonials img.alignright{
     margin-left:25px;
    float:right;
}
div#about h2.title {
    margin-bottom: 50px;
}
#about p{
     font: 23px 'Proxima Regular';}

#about p span{
    color:#4c1b3c;
    font:23px 'Proxima Bold'
}

div#ordernow{
    background:url(../images/ordernow.jpg) top center no-repeat;
    background-size:cover;
    padding: 60px 0;
}
.bookholder, .textholder{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:top;
}
div#ordernow h2{
    font: 43px 'Proxima Light';
    padding:0;
    text-transform:uppercase;
    line-height: 1.2em;
    color: #fff;
    text-align:center;
    margin: 0 0 30px;
}
div#ordernow h2 span{color: #dabc65;font-family: Otama;display:block;}

.textholder {
    max-width: 650px;
    width:100%;
}

.bookholder {
    width:100%;
    max-width:270px;
    text-align: center;
}

div#ordernow a.btn {

}
div#ordernow p{
    text-align:left;
    color:#fff;
       font:23px 'Proxima Regular'
}

div#first-panel, div#did-you-know {
    position: relative;
}

#first-panel:before, div#did-you-know:before{
    display:block;
    position:absolute;
    top: 5px;
    right:0;
    content:url(../images/pattern1.png);
}

div#second-panel, #third-panel{
    position: relative;
}

div#second-panel:before, #third-panel:before{
   display:block;
   position:absolute;
   top: -100px;
   left:0;
   content:url(../images/pattern2.png);
}
#footer-section{
    padding:50px 15px;
    max-width:900px;
    margin:0 auto;
    text-align:center;
    font-size:20px;
    color: #000;
}
#footer-section p{
    font:20px Open sans;
    color: #000;
}
#footer-section a{
    color:#000;
}

@media only screen and (max-width: 1200px){
	#first-panel:before, div#second-panel:before {opacity: .5;}
	div#did-you-know:before, #third-panel:before {opacity: .3;}
}


@media only screen and (max-width:977px){
	div#second-panel:before, #third-panel:before, #first-panel:before, div#did-you-know:before{
      display:none;
	}
	#social {display: none;}
    #receive div{display:block;margin:0 auto;text-align: Center;}
    #list{margin-left:0;text-align: left!important;}
    .bonuslist .text, .bonuslist.v2 .text{width:auto;float:none;}
    img{max-width:100%;}
    #steps li#arrow{display:none;}
    #steps li{
        width: auto!important;
        max-width:350px;
        margin:0 10px;
        }
    #bonuses h1 img, h1.bonuses img, #banner img{display: block;float:none;margin: 0 auto;}
	#ordernow .bookholder {display: block; max-width: 100%;}
	#ordernow .textholder {display: block; margin: 0 auto; text-align: center;}
	.sample div {display: block; margin: 0 auto; text-align: center;}
	.bonuslist img {float: none; margin: 10px auto; display: block;}
    #bonuses h1, h1.bonuses, .blue-bar h1, #banner h1,h2.reserve,
    #combopack-banner h1, #bonusdownload-banner h1{text-align:center;font-size:40px!important;}
    #banner .text{width:auto;text-align:Center;max-width: 100%; margin: 0 auto;}
}
@media only screen and (max-width:768px){
    #combopack-banner h1,#bonuses h1, h1.bonuses, .blue-bar h1, 
    #banner h1, h2.reserve, #bonusdownload-banner h1, div#ordernow h2 {font-size:30px!important}
    #learn img{float:none;margin:0 auto;display:block}
    .bonuslist .text p{font-size:24px;}
    .bonuslist .text h2, .bonuslist .text h2 span, .bonuslist.v2 .text h2{font-size:28px;}
    #author img.alignleft{display:block;float:none;margin:0 auto;}
    .sample div{display:block!Important;width:auto!important}
    .sample .image{
        text-align:center;
    }
}
@media only screen and (max-width:670px){
    .bookholder, .textholder{max-width:100%}
    .blue-bar.v4 h1 img{float:none;margin-top:0;top:0;display:block;margin:0 auto}
    #combopack-banner, #bonusdownload-banner {background-position: -600px 0;}
    #about-thinker h2, h2.title {font-size: 40px;}
	#steps li p {font-size: 22px;}
}
@media only screen and (max-width:550px){
	div#harness h3 {font-size: 28px;}
	#about-thinker h2, h2.title {font-size: 34px;}
	#footer-section p {font-size: 16px;}
}
@media only screen and (max-width:470px){
    .bonuslist img{float:none}
    p.download img{top:0}
    #combopack-banner, #bonusdownload-banner {background-position:-800px 0;}
	#testimonials img.alignleft, #testimonials img.alignright {float: none; display: block; margin: 0 auto 15px;}
	#testimonials {margin: 40px 0;}
	#about img {float: none; display: block; margin: 0 auto 15px;}
	.question:first-child ul.t-image li {margin: 10px auto;}
}
@media only screen and (max-width:370px){
   #combopack-banner, #bonusdownload-banner {background-position:-900px 0;}
   #about-thinker h2, h2.title {font-size: 28px;}
   #steps li p {font-size: 18px;}
}