/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 14 Feb, 2015, 13:21:12 AM
    Author     : jitendra
*/

/*Starting Utilities Mostly Applicable*/
body,dd,div,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,li,p,span,table,td,tr,ul, figure, img{margin:0;padding:0}li,ol,ul{list-style-type:none}a,a:hover{text-decoration:none}img,img:hover,input{border:none}.pull-left{float:left}.pull-right{float:right}.block-display{display:block}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.clear-fix{float:none;clear:both}.margin-l{margin-left:0!important}.margin-r{margin-right:0!important}.border-radious-n{border-radius:0!important}.uppercase{text-transform:uppercase}.inline-block-display{display:inline-block!important}.italic{font-style:italic!important}hr{border:none;height:1px;background-color:silver}.border-n{border:none!important}.red{color:#f10000!important}.blue{color:#0e76bc!important}

body{font:16px/1.4 'robotolight';}

.container{
    width: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 980px;
}

/*img{
    display: block;
    width: auto;
    max-width: 100%;
}*/

.hidden-pop {
    display: none;
}
#exitOverlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index: 900;
    /*opacity:.7;
    filter:alpha(opacity=70);*/
}
#exitPopup {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 999;
    margin:0 0 0 -350px;
	width:700px;
	border:1px solid #ec008c;
}
#exitPopup  img{width:100%;}


#header{
    background-color: #378bda;
    padding: 6px 0;
    position: fixed;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#header .right-content{width: 38%; padding-top: 8px;}
.button:hover{
    color:white;
}
.order-button button, .button {
    background: linear-gradient(to bottom, #71c100 0%, #568e00 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-weight: 500;
    padding: 4px 18px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.order-button button img{ display: inline-block;}
.button, .btn {
    background-color: #c18b67;
    border: 1px solid black;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font: 300 100%/36px 'robotobold',sans-serif;
    outline: medium none;
    padding: 0 6px;
    position: relative;
    transition: all 200ms ease 0s;
    vertical-align: middle;
}

header p{
    font:13px/1.2 'robotoregular';
    color: #FFF;
    width: 31%;
}

h1 {font: 60px/1.2 'robotomedium_italic';}
#banner{
    background-color: #000;
    padding: 20px 0 0 0;
    margin-top: 78px;
}
#banner .banner-content{ width: 1100px; margin: 0 auto;}
#banner .banner-txt{ width: 32%; padding-top: 30px;}

#top-bottle{ margin-top: 50px;}

#banner .banner-txt h1{
    font-size: 60px;
    letter-spacing: -0.03em;
    text-shadow: 2px 2px 2px #fff;
    text-transform: uppercase;
    color: #FFF;
}

#banner .banner-txt h1 small{ text-transform: none;}
#banner .banner-txt h1 strong{
    text-align: right;
    font:68px/1 'great_vibesregular';
    color: #337AB7;
    text-transform: none;
}
#banner .banner-txt p{
    font:35px/1.2 'robotolight';
    color: #FFF;
    text-transform: uppercase;
}

#banner .banner-txt p strong{
    color: #337AB7;
    font:35px/1.2 'robotomedium';
}
#banner .banner-txt .order-button{margin-top: 10px;}

#section-3{
    padding-top: 30px;
    background-color: #FFF;
}

#section-3 h1,
#section-4 h1,
#section-5 h1,
#section-6 h1,
#section-7 h1{
    color: #337AB7;
    font:35px/1.2 'robotobold';
    margin-bottom: 8px;
}
h1 span{
    font:italic 35px/1.2 'robotolight';
    display: block;
}
#section-3 p,
#section-4 p,
#section-5 p,
#section-6 p{
    font:16px/1.4 'robotolight';
}
#section-3 .content,
#section-4 .content,
#section-5 .content,
#section-6 .content{
    width: 50%;
    padding-top: 30px;
}
#section-3 img, #section-4 img{ margin-right: 50px;}

#section-4{
    padding: 50px 0;
    background-color: #000;
}
#section-4 img{
    position: absolute;
    top: -86px;
}

.white-color{color: #FFF !important;}
.black-color{color: #000 !important;}

#section-4 .content{padding-top: 0;}
#section-5{ padding: 40px 0;}
#section-6{
    background-color: #000;
    padding-top: 0;
    background: url(../images/img-5.png) no-repeat right center #000;
    padding: 20px 0;
}
#section-6 p{line-height: 1.3;}

#section-7{ margin: 40px 0;}

#section-7 small{
    color: #337AB7;
    font:16px/1.2 'robotomedium';
}
hr{ margin: 20px 0;}

#section-7 #testimonial{ margin: 20px 0;}

#section-7 #testimonial article{
    float: left;
    box-sizing: border-box;
    width: 23%;
    margin: 0 5px;
}
#section-7 #testimonial article img{
    display: block;
    margin: 10px auto;
}
#section-7 #testimonial article .content{}

#section-7 #testimonial article .content h2{
    color: #337AB7;
    font:18px/1.2 'robotobold';
    margin: 8px 0;
}
#section-7 #testimonial article .content h2 span{
    font:italic 13px/1.2 'robotoregular';
    display: block;
}
#section-7 #testimonial article .content p{
    font:14px/1.4 'robotolight';
}

#section-8{
    background: linear-gradient(to bottom, black 0%, #337AB7 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 0;
    transition: all 300ms ease 0s;
}

.form-bg{
    background-color: #000;
    width: 51%;
    height: 600px;
}

.form-bg h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 22px;
    margin-bottom: 34px;
    position: relative;
    text-align: center;
    width: 100%;
}

.form-bg h2:after {
    border-color: #337AB7 transparent transparent;
    border-style: solid;
    border-width: 32px 196px 0;
    content: "";
    display: block;
    font: 18px/1.2 "robotobold";
    height: 0;
    left: 67%;
    margin: 0 auto 0 -263px;
    position: absolute;
    width: 0;

}

.form-bg h2 span {
    background: none repeat scroll 0 0 #337AB7;
    display: block;
    padding-top: 14px;
    position: relative;
    font:18px/1.2 'robotobold';
    color: #FFF;
    text-transform: uppercase;
}

.frm-container{
    padding: 0 18px;
    margin: 10px 0;
}

.frm-container label{
    display: block;
    font:14px/1.4 'robotolight';
    color: #FFF;
}
.frm-container input[type='text'], select{
    border:none;
    padding: 6px;
    background-color: #FFF;
    width: 97.5%;
    margin: 6px 0;
}
.txt-1{
    color: #fff;
    display: block;
    font: 13px/1 arial;
    padding-top: 25px;
}
select{width: 100%;}

.width-half{ width: 48%;}

#formSubmit{
    background: linear-gradient(to bottom, #71c100 0%, #568e00 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-weight: 500;
    padding: 4px 18px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 50%;
    margin: 20px auto;
    border-radius: 6px;
    padding: 10px 0;
    font:18px/1.2 'robotobold';
    color: #FFF;
    cursor: pointer;
    margin-left:120px;
}
.txt{ color: #FFF; font-size: 12px;}

footer{padding: 15px 0;}
footer ul{text-align: center;}
footer ul li{
    display: inline-block;
    border-right:1px solid #000;
    padding: 0 5px;
	line-height:2px;
}
footer ul li:last-child{ border:none;}
footer ul li a{
    font:13px/1.2 'robotolight';
    color: #000;
	padding:0 4px;
}

footer ul li a:hover{color: #a9054d;}


/*Checkout page style start here*/

.border-box{
    border:2px dashed #ff0000;
    padding: 10px;
    margin: 15px auto;
    font:16px/1.2 'robotomedium';
    text-align: center;
    /*width: 95%;*/
}
.border-box span{color: #ff0000;}
#content-checkout{ margin-top: 20px;}
#content-checkout #left-content{ width: 57%;}
#content-checkout #right-content{ width: 40%;}

#content-checkout #left-content .box{
    border:2px solid #d70661;
    border-radius: 4px 4px 0 0;
    padding: 16px 3% 0;
    cursor: pointer;
}

#content-checkout #left-content .box h3{
    font:19px/1.2 'robotolight';
    color: #d70661;
    text-transform: uppercase;
}

img{ vertical-align: middle;}

#content-checkout #left-content #left{ width: 60%;}
#content-checkout #left-content #right{ width: 40%; position: relative; top: -20px;}
#content-checkout #left-content #right .total{
    font:15px/1.2 'robotolight';
    color: #000;
    text-transform: uppercase;
    text-decoration: line-through;
    text-align: center;
}
#content-checkout #left-content #right .saving{
    font:18px/1.2 'robotomedium';
    color: #d70661;
    text-transform: uppercase;
    text-align: center;
}

#content-checkout #left-content #right h2{
    text-align: center;
    font:35px/1.8 'robotobold';
}
#content-checkout #left-content #right  .compliments{
    font:16px/1.2 'robotobold';
    color: #d70661;
}
.shipping-details{
    border-radius: 0 0 6px 6px;
    background-color: #d70661;
    font:12px/2.8 arial;
    color: #FFF;
    text-align: center;
}
#content-checkout #left-content .terms{
    font:10px/1.2 'robotolight';
    color: #ff0000;
}
#content-checkout #right-content .form-bg{ width: 100%;}
#content-checkout #right-content #promises {
    background: none repeat scroll 0 0 #dcdada;
    border-radius: 7px;
    clear: both;
    color: #5a5a5c;
    margin: 18px 0;
    overflow: hidden;
    padding-bottom: 14px;
    position: relative;
}

#promises h3 {
    background: none repeat scroll 0 0 #838282;
    color: white;
    font:16px/1.2 'robotobold';
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 14px;
    padding: 3% 5%;
    text-align: center;
    text-transform: uppercase;
}
#promises p{
    padding: 5px 10px;
}

form input.error,select.error {
    background: url("../images/error-input.png") no-repeat scroll right center #fff;
    border: 1px solid orange !important;
}

form input.valid,select.valid {
    background: url("../images/tick-input.png") no-repeat scroll right center #fff;
    border: 1px solid green !important;
}

/*Checkout page style start here*/

/*********************Thankyou page* A.SH*****************/

.thankyou > section#banner {
    margin: 0;
}
.thankyou .pull-left {
    width: 300px;
}
.thankyou .banner-content > img#top-bottle {
    width: 200px;
}
.thankyou #banner .banner-txt {
    width: 50%;
}
.thankyou #banner .banner-txt h1 strong {
    font-size: 49px;
    letter-spacing: 0;
}
.thankyou #banner .banner-txt p {
    font-size: 25px;
    line-height: 45px;
    text-transform: none;
}
.thankyou #banner .banner-txt h1 {
    letter-spacing: 0;
    padding-top: 79px;
}

/*********************Thankyou page* A.SH*****************/