/* Style sheet by Oki Trice - http://www.minisite911.com */
@charset "utf-8";

/**********************************************************************************/
/**********************************************************************************/
/* IMPORT GOOGLE WEB FONTS */
/**********************************************************************************/
/**********************************************************************************/

@import 'https://fonts.googleapis.com/css?family=Lato:400,700,900|Oswald:300,400,700|Open+Sans:400,600,700,800|PT+Sans:400,700';

/**********************************************************************************/
/**********************************************************************************/
/* GENERAL */
/**********************************************************************************/
/**********************************************************************************/
html{
    font-size: inherit;
}
body {
	background: #ffffff;
	/*font-family: 'Open Sans', sans-serif;*/
	font-family: 'Roboto', 'Open Sans', sans-serif !important;
	font-size: 16px; 
	color: #2e2e2e;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
@media (max-width: 768px) { 
	body { font-size: 14px; }
}

a:active, a:visited { color: blue; }
a:hover				{ color: #CC0000; text-decoration: underline; }

.container { }

.fontOswald		{ font-family: 'Oswald', sans-serif; }
.fontLato		{ font-family: 'Lato', sans-serif; }
.fontOpenSans	{ font-family: 'Open Sans', sans-serif; }
.fontPTSans		{ font-family: 'PT Sans', sans-serif; }

h4 { font-size: 16px; line-height: 20px; }


.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.hideme { display: none; }

.very-top-breadcrumb { background: #e6f5ff; border-bottom: 1px solid #dbdbdb; }

.top-left	{ float: left; padding-top: 10px; padding-bottom: 15px; }
.top-left img { max-width: 305px; width: 100%; display: inline-block; }

.top-right	{ float: right; padding: 20px 0 10px 0; text-align: right; color: white; font-size: 17px; line-height: 25px; color: #606060; }
.top-right b	{ color: #000000; }
.top-right i	{ color: rgb(19, 27, 143); font-size: 18px; }

@media (max-width: 1200px) { 
	.top-left, .top-right { float: none; }
	.top-left img { display: block; }
	.top-right { text-align: center; padding: 0 0 10px 0; margin-top: -10px; }
}

.max-840 { max-width: 840px; margin: 0 auto; }

.base-form { background: #f0f4ff; border: 5px solid #131b8f; padding: 20px 10px 0 10px; }

.step-order { max-width: 500px; width: 100%; }

@media (max-width: 768px) { 
	.base-form { padding: 20px 10px 0 10px; }
	.step-order { max-width: 390px; }
}

.panel-default	{ background: transparent; border: 0 !important; }
.panel-heading	{ }

.panel-default > .ph-top { 
	text-align: center; 
	color: #ffffff;
	font-size: 22px; 
	background: #28469d;
	margin-left: 15px; margin-right: 15px;
	/*
	background-image: -webkit-linear-gradient(top, #af90c9, #7a4597);
	background-image: -moz-linear-gradient(top, #af90c9, #7a4597);
	background-image: -ms-linear-gradient(top, #af90c9, #7a4597);
	background-image: -o-linear-gradient(top, #af90c9, #7a4597);
	background-image: linear-gradient(to bottom, #af90c9, #7a4597);
	*/
}
.ph-top span { color: #bebebe; font-size: 22px; padding-left: 5px; }

.panel-body { margin-left: 0px; margin-right: 0px; } 
.panel-body .img-secure { margin-bottom: -30px; }
.panel-body .img-verify { margin-top: 40px; margin-bottom: -30px; opacity: 0.6; }


label.error{display: none!important;}
.error {
    background: #ff9c9c !important;
    outline: none;
    border: 1px solid #C00!important;
}

#LoadingDiv {
    margin: 0px 0px 0px 0px;
    position: fixed;
    height: 100%;
    z-index: 9999;
    padding-top: 350px;
    width: 100%;
    clear: none;
    background: url(../new_images/trans.png);
    text-align: center;
    color: #273142;
    font-weight: bold;
    font-size: 20px;
}


@media (max-width: 768px) { 
	.panel-default > .ph-top { margin-left: 5px; margin-right: 5px; }
	.panel-body { margin-left: -10px; margin-right: -10px; }
}

.form-group input, .form-group select { /*background-color: #ffffff;*/ border-color: #c1c1c1; font-size: 15px; height: 42px; color: #2c2c2c; padding: 0 10px; }

.form-group button img { border: 0 none !important; }

.form-group label span { font-size: 13px; }

.input-group .bill-same-ship { font-size: 14px; color: #606060; font-weight: normal; }
.input-group .bill-same-ship span { padding-left: 8px; }
.input-group .join-club { font-size: 15px; color: #131b8f; font-weight: bold; }
.input-group .join-club span { padding-left: 8px; }
span.join-club-info { float: left; font-size: 14px; color: #999999; }

.panel-title-small { text-align: center; font-size: 12px; line-height: 16px; color: #888888; }

.cvvwhat { font-size: 10px; padding-top: 5px; padding-right: 20px; }
hr.join-club-hr { border-top: 1px dashed #909090; border-color: rgba(0, 0, 0, 0.2); }

.shrink { font-size: 12px; line-height: 12px; color: #909090; font-weight: normal; }
.change_qty { font-size: 12px; line-height: 12px; color: #909090; font-weight: normal; text-align: center; }

.testi-area { padding: 25px 20px 0 20px; }

.testi-area p { font-size: 15px; color: #606060; padding-bottom: 10px; }
.testi-area p.testi-title { font-size: 22px; color: #131b8f; letter-spacing: -1px; margin-bottom: 0px; }

.back-to-top { 
	background: #f5ad43;
	border: 1px solid #c48b36;
	color: #000000;
	text-shadow: -1px -1px 0px rgba(255,255,255,0.1);
	box-sizing: border-box;
	text-decoration: none;
	padding: 15px 25px;
	border-radius: 5px;
}
.back-to-top:hover, .back-to-top:focus {
	color: #000000;
	text-decoration: none;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #f6b75a;
  color: #333333;
}



#quantity {
	font-size: 12px;
	line-height: 30px;
	width: 180px;
	margin: 0px auto 0px;
	display: block;
	height: 40px;
	padding-left: 15px;
	border: 1px solid #b5b5b5;
	cursor: pointer;
	background: url("../images/small-arrow.png") no-repeat right 10px center, #fefefe;
	/* Old browsers */
	background: url("../images/small-arrow.png") no-repeat right 10px center, -moz-linear-gradient(top, #fefefe 0%, #ededed 100%);
	/* FF3.6+ */
	background: url("../images/small-arrow.png") no-repeat right 10px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ededed));
	/* Chrome,Safari4+ */
	background: url("../images/small-arrow.png") no-repeat right 10px center, -webkit-linear-gradient(top, #fefefe 0%, #ededed 100%);
	/* Chrome10+,Safari5.1+ */
	background: url("../images/small-arrow.png") no-repeat right 10px center, -o-linear-gradient(top, #fefefe 0%, #ededed 100%);
	/* Opera 11.10+ */
	background: url("../images/small-arrow.png") no-repeat right 10px center, -ms-linear-gradient(top, #fefefe 0%, #ededed 100%);
	/* IE10+ */
	background: url("../images/small-arrow.png") no-repeat right 10px center, linear-gradient(to bottom, #fefefe 0%, #ededed 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#ededed', GradientType=0);
	/* IE6-9 */
	-webkit-appearance: none;
	-moz-appearance: none;

}


.under-top-breadcrumb { background: #28469d; }
.under-top-breadcrumb .under-top { padding: 10px 0 5px 0; }
.under-top-breadcrumb h1 { font-size: 28px; color: #ffffff; margin-top: 0; }
.under-top-breadcrumb h1 i { color: #f4f7ff; }
.under-top-breadcrumb p { font-size: 16px; color: #dbdbdb; margin-top: -6px; }

@media (max-width: 768px) { 
	.under-top-breadcrumb h1 { font-size: 22px; }
	.under-top-breadcrumb p { font-size: 14px; }
}


.base-report h2 { font-size: 18px; }

.view-report { margin: 0 auto; max-width: 300px; height: auto; }
.view-report label { float: left; font-weight: normal; }
.view-report hr { border-color: #7b7b7b; width: 92%; margin-left: 0; }
.view-report div { margin-top: -10px; margin-bottom: -10px; }
.view-report div.finalrep { margin-top: -10px; margin-bottom: 15px; float: none; }
.view-report div.greener { color: #00d800; font-size: 18px; line-height: 14px; font-weight: bold; }

.view-report2 { margin: 0 auto; }
.view-report2 label { float: left; font-weight: normal; }
.view-report2 hr { border-color: #7b7b7b; width: 92%; margin-left: 0; }
.view-report2 div { margin-top: -10px; margin-bottom: -10px; }
.view-report2 div.finalrep { margin-top: -10px; margin-bottom: 15px; float: none; }
.view-report2 div.greener { color: #00d800; font-size: 18px; line-height: 14px; font-weight: bold; }

.view-report3 { margin: 0 auto; max-width: 350px; height: auto; }
.view-report3 label { float: left; font-weight: normal; }
.view-report3 hr { border-color: #7b7b7b; width: 100%; margin-left: 0; }
.view-report3 div { margin-top: -10px; margin-bottom: -10px; }
.view-report3 div.finalrep { margin-top: -10px; margin-bottom: 15px; float: none; text-align: right; }
.view-report3 div.finalrep .small { font-size: 12px; }

h2.vr3 { font-size: 18px; }

img.img-btl-small { max-width: 180px; width: 100%; }
img.p911-4btl { max-width: 500px; width: 100%; }


.very-bottom-breadcrumb { background: #f3f3f3; color: #aeaeae; border-top: 1px solid #d7d7d7; }
.menu-bottom { list-style: none; margin: 20px auto; }
.menu-bottom li { float: left; }
.menu-bottom li a { color: white; padding: 10px 30px; font-size: 16px; }
@media (max-width: 992px) { 
	.menu-bottom { margin: 20px 0px 0px 0px; padding: 0; }
	.menu-bottom li { float: none; text-align: center; }
	.menu-bottom li a { padding: 10px 0px; }
}

.very-bottom-breadcrumb p { font-size: 12px; line-height: 18px; letter-spacing: -0.02em; }
.very-bottom-breadcrumb p.copyright { font-size: 12px; }
.very-bottom-breadcrumb p a { color:#333333; }
.very-bottom-breadcrumb p.con-us { font-size: 14px; }

.box-in-footer {
	margin: 0 auto; padding: 10px 30px;
	max-width: 600px;
	border: 1px solid #aeaeae;
	font-size: 12px;
	color: #aeaeae;
	text-align: center;
}


/* ConatinerWrapper */
        .loadingMessageConatinerWrapper {
            font-family: 'Roboto', sans-serif;
            display: table;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: white;
            z-index: 10000
        }

        .loadingMessageConatinerWrapper .counter {
            text-align: center;
            margin: auto
        }

        .loadingMessageConatinerWrapper .step1,
        .loadingMessageConatinerWrapper .step2,
        .loadingMessageConatinerWrapper .step3,
        .loadingMessageConatinerWrapper .step4 {
            color: #363636;
            font-weight: 500;
            font-size: 1.25rem;
            padding-bottom: 20px;
        }

        .loadingMessageConatinerWrapper .counter .messageConatiner {
            color: #363636;
            font-weight: 500;
            font-size: 1.25rem;
            padding-bottom: 20px
        }

        .loadingMessageConatinerWrapper .counter .bar {
            width: 0%;
            margin: 0;
            background: #ccea1e;
            height: 12px;
            border-radius: 10px;
            border: none;
            box-shadow: 1px 1px 1px 1px #ccc;
            display: block;
            height: 100%;
            -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
            -moz-border-radius-topright: 8px;
            -moz-border-radius-bottomright: 8px;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            -webkit-border-top-left-radius: 20px;
            -webkit-border-bottom-left-radius: 20px;
            -moz-border-radius-topleft: 20px;
            -moz-border-radius-bottomleft: 20px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            background: -webkit-linear-gradient(linear, left bottom, left top, color-stop(0, #ccea1e), color-stop(1, #ccea1e));
            background-image: -moz-linear-gradient(center bottom, #ccea1e 37%, #ccea1e 69%);
            box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
            position: relative;
            overflow: hidden
        }

        .loadingMessageConatinerWrapper .counter .bar:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            z-index: 1;
            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            -webkit-animation: move 2s linear infinite;
            -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
            -moz-border-radius-topright: 8px;
            -moz-border-radius-bottomright: 8px;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            -webkit-border-top-left-radius: 20px;
            -webkit-border-bottom-left-radius: 20px;
            -moz-border-radius-topleft: 20px;
            -moz-border-radius-bottomleft: 20px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            overflow: hidden
        }

        @-webkit-keyframes move {
            0% {
                background-position: 0 0
            }

            100% {
                background-position: 50px 50px
            }
        }

        @keyframes move {
            0% {
                background-position: 0 0
            }

            100% {
                background-position: 50px 50px
            }
        }

        .loadingMessageConatinerWrapper .counter .baroutter {
            background: #d4d9de;
            height: 12px;
            border-radius: 10px;
            border: none;
            width: 100%;
            box-shadow: 1px 1px 1px 1px #ccc
        }

        .loadingMessageConatinerWrapper .counter {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            padding: 0 10%
        }

        @media only screen and (min-width: 40.063em) {
            .loadingMessageConatinerWrapper .counter {
                width: 30%;
                padding: 10% 30%;
            }
        }

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

            .loadingMessageConatinerWrapper .step1,
            .loadingMessageConatinerWrapper .step2,
            .loadingMessageConatinerWrapper .step3,
            .loadingMessageConatinerWrapper .step4 {
                color: #363636;
                font-weight: 500;
                font-size: 1.25rem !important;
                padding-bottom: 20px;
            }
        }







/* ADDITIONAL Styling */
.separator-5px  { height:5px; }  .separator-10px { height:10px; } 
.separator-15px { height:15px; } .separator-20px { height:20px; } 
.separator-25px { height:25px; } .separator-30px { height:30px; } 
.separator-35px { height:35px; } .separator-40px { height:40px; } 
.separator-45px { height:45px; } .separator-50px { height:50px; }
.separator-55px { height:55px; } .separator-60px { height:60px; }
.separator-65px { height:65px; } .separator-70px { height:70px; }
.separator-75px { height:75px; } .separator-80px { height:80px; }
.separator-85px { height:85px; } .separator-90px { height:90px; }
.separator-95px { height:95px; } .separator-100px { height:100px; }

.fontNormal		{ font-weight: 300; }
.fontBold		{ font-weight: 600; }
.fontBoldie		{ font-weight: 700; }
.fontBolder		{ font-weight: 800; }
.fontBlack		{ color: #000000; }
.fontRed		{ color: red; }
.fontDarkRed	{ color: #a10803; }


/* BACK TO TOP */
#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -50px; /* negative of the offset - height of link element */
    right: 20px; /* padding from the left side of the window */
}
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 50px; /* height of link element */
    right: 20px; /* padding from the left side of the window */
}
#top-link-block a { text-decoration: none; border: none; outline: none; }
#top-link-block a img:hover
{
    opacity: 0.6;
    filter: alpha(opacity=60);
}




/* Style sheet by Oki Trice - http://www.minisite911.com */



#recentBox{
    min-width: 300px;
    height: auto;
    position: fixed;
    z-index: 500;
    bottom: 10px;
    background: #fff;
    box-shadow: 0 0 5px #6f6f6f;
    border-radius: 5px;
    overflow: hidden;
    display: table;
    transform: translateX(-116%);
    animation-name: example;
    animation-duration: 10s;
}

#recentImg{
    width: 70px;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    display: table-cell;
    vertical-align: middle;
}
#recentText{
    background-color: #29af5c;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    line-height: 19px;
    display: table-cell;
    vertical-align: middle;
}


@keyframes example {
  0%   {left:0px; right:0px;}
  25%  {left:450px; right:0px;}
  50%  {left:450px; right:0px;}
  75%  {left:0px; right:0px;}
}

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
    #recentBox {
        max-width: 300px;
        min-width: inherit;
        width: 100%;
        top: 10px;
        bottom: auto;
    }
}
@media (max-width: 768px){
    #recentBox{
        transform: translateX(-140%)!important;
    }
}
@media (max-width: 640px){
    #recentBox{
        transform: translateX(-148%)!important;
    }
@media (max-width: 376px){
    #recentBox {
        top: 10px;
        bottom: auto;
    }
}