<!-- Styles For Checkout -->

body{

margin: 0 0 0 0;

font-family: 'Roboto', sans-serif;

background: #fff;

}

a:link,

a:visited{

text-decoration: inherit;

color: inherit;

}

a.textLink:link,

a.textLink:visited{

text-decoration: inherit;

color:#00F;

}

a.textLink:hover{

text-decoration: underline;

}

 #suggestLink{

font-style: italic;

color: #009;

text-decoration: underline;

font-weight: bold;

cursor: pointer;

}

#suggestion{

font-size: 13px;

}

.clear{

clear: both;

}

#hiddenOffers{

display: none !important;

}

.pullLeft{

float: left;

text-align: left;

}

.pullRight{

float: right;

text-align: right;

}

#headerBar{

width: 100%;

height: auto;

margin: 0 auto;

top: 0;

background: #30BD51;

color: #fff;

font-size: 20px;

text-align: center;

padding: 15px 0px;

}

#topLogo{

width: 200px;

height: auto;

margin: 0 auto;

margin-top: 12px;

}

#topBar{

width: 1000px;

height: auto;

margin: 0 auto;

margin-top: 12px;

background: #ebebeb;

padding: 8px 0px;

}

#topInner {

       width: 100%;

    height: 23px;

    margin: 0 auto;

    max-width: 360px;

}



#topText1 span::before{

    content:'';

    background: url('../images/checkout/shield1.png');

    width: 18px;

    height: 23px;

    position: absolute;

    left: 0;

    top: 0;

    background-size: contain;

}



.security-icon{

    display: inline-block;

    width: 50%;

    margin-left: 10px;

    float: right;

}



#topText1 span{

        display: inline-block;

    margin-left: 25px;

}



.creditlabel_column{

    clear: both;

    overflow: hidden;

}



.creditlabel{

    float: left;

}



.creditcardImage_column{

    float: right;

    max-width: 50%;

}



#shield1{

width: auto;

height: 23px;

float: left;

}



#shield1 img{

    height:100% !important;

}

#topText1{

width: calc(100% - 23px);

    height: 23px;

    float: none;

    line-height: 23px;

    text-align: center;

    color: #404040;

    font-size: 16px;

    position: relative;

}

#topText2{

width: 100%;

height: auto;

margin: 0 auto;

margin-top: 15px;

font-size: 16px;

color: #333;

text-align: center;

font-family: Arial;

}

#mainCheckout{

width: 1000px;

height: auto;

margin: 0 auto;

margin-top: 25px;

}

#checkoutLeft{

width: 550px;

height: auto;

float: left;

}

#checkoutRight{

width: 410px;

height: auto;

float: right;

}

#leftText1{

width: 100%;

height: auto;

font-size: 18px;

padding-bottom: 8px;

border-bottom: 1px solid #ddd;

color: #333;

}

.selectorBox{

width: calc(100% - 42px);

height: auto;

margin: 0 auto;

padding: 18px;

border-radius: 3px;

border: 1px solid #858585;

cursor: pointer;

margin-top: 15px;

}

.selectedBox{

border: 3px solid #000;

box-shadow: -1px 2px 4px 1px rgba(0,0,11,.15)

}

.selectorCheck{

width: 22px;

height: 22px;

float: left;

border: 1px solid #7c7c7c;

}

#innerCheck1,

#innerCheck2,

#innerCheck3,

#innerCheck4,

#innerCheck5,

#innerCheck6,

#innerCheck7,

#innerCheck8{

width: 18px;

height: 18px;

margin: 0 auto;

background: #fff;

margin-top: 2px;

}

.innerSelected{

background: #000 !important;

}

.selectorMid{

width: 240px;

height: auto;

float: left;

margin-left: 12px;

}

.selectorTitle{

width: 100%;

height: auto;

font-size: 17px;

font-weight: 700;

color: #222;

}

/*.selectorDevice{

width: 48px;

height: 48px;

float: left;

margin-top: 50px;

padding-bottom: 20px;

}*/

.selectorDevice {

    /*max-width: 200px;

     height: 48px; */

    float: left;

    margin-top: 20px;

    /* padding-bottom: 20px; */

}

.mobileTitle{

width: 100%;

height: auto;

font-size: 17px;

font-weight: 700;

color: #222;

display: none;

}

.selectorRight{

width: calc(100% - 300px);

height: auto;

float: right;

}

.selectorRecommended{

width: 100%;

height: 16px;

margin-top: 52px;

font-size: 14px;

color: #222;

text-align: right;

}

.selectorStrike{

width: 100%;

height: auto;

margin-top: 5px;

font-size: 17px;

color: #cc0000;

text-align: right;

text-decoration: line-through;

}

.selectorPrice{

width: 100%;

height: auto;

margin-top: 5px;

font-size: 18px;

color: #222;

text-align: right;

font-weight: 700;

}

.mobileRecommended{

width: 100%;

height: 16px;

margin-top: 10px;

font-size: 14px;

color: #222;

text-align: left;

display: none;

}

.mobileStrike{

width: 100%;

height: auto;

margin-top: 5px;

font-size: 17px;

color: #cc0000;

text-align: left;

text-decoration: line-through;

display: none;

}

.mobilePrice{

width: 100%;

height: auto;

margin-top: 5px;

font-size: 18px;

color: #222;

text-align: left;

font-weight: 700;

display: none;

}

.mobileDevice{

width: 100%;

height: auto;

margin-top: 20px;

display: none;

}

#leftText2{

width: 100%;

height: auto;

font-size: 15px;

padding-bottom: 8px;

border-bottom: 1px solid #ddd;

color: #333;

margin-top: 25px;

}

#leftText3{

width: 100%;

height: auto;

margin: 0 auto;

font-family: Arial, sans-serif;

color: #222;

font-size: 14px;

font-weight: 700;

margin-top: 10px;

}

#leftText4{

width: 100%;

height: auto;

margin: 0 auto;

font-family: Arial, sans-serif;

color: #222;

font-size: 14px;

font-weight: 700;

margin-top: 10px;

}

#leftText5{

width: 100%;

height: auto;

margin: 0 auto;

font-family: Arial, sans-serif;

color: #222;

font-size: 14px;

font-weight: 700;

margin-top: 10px;

}

#savingsBox{

width: 100%;

height: auto;

margin: 0 auto;

margin-top: 20px;

border: 1px dashed #EA0013;

background: rgba(248,231,28,0.2);

padding: 20px 0px;

}

#savingsLeft{

width: 200px;

height: auto;

float: left;

}

#savingsRight{

width: calc(100% - 245px);

height: auto;

float: right;

text-align: right;

font-weight: 700;

font-size: 17px;

margin-right: 15px;

}

#discountText{

width: 100%;

height: 20px;

color: #d00;

margin-top: 20px;

margin-bottom: 15px;

}

#discount1{

display: none;

}

#rightText1{

width: 100%;

height: auto;

font-size: 18px;

padding-bottom: 8px;

border-bottom: 1px solid #ddd;

color: #333;

}

#paypalButton{

width: 100%;

height: auto;

margin: 0 auto;

margin-top: 20px;

background: #ffc438;

border-radius: 5px;

border-bottom: 3px solid #c8951d;

cursor: pointer;

padding: 10px 0px;

}

#paypalLogo{

width: 100px;

height: auto;

margin: 0 auto;

}



#ccButton {

    width: 100%;

    max-width: 250px;

    height: auto;

    margin: 0 auto;

    margin-top: 20px;

    background: #ffc438;

    border-radius: 5px;

    border-bottom: 3px solid #c8951d;

    cursor: pointer;

    padding: 7px 0px;

}



#cclogo{

	text-align: center;

}



#cclogo img{

	width: 30px;

	height: auto;

	margin: 0 auto;

	margin-right: 15px;

	    vertical-align: middle;

}



#cclogo span{

font-weight: bold;

    text-align: center;

    vertical-align: middle;

    font-size: 11px;

    text-transform: uppercase;

}

#rightLine1{

width: 100%;

height: 2px;

background: #ddd;

margin: 0 auto;

z-index: 1;

margin-top: 25px;

}

#lineText1{

width: 275px;

height: 18px;

margin: 0 auto;

margin-top: -8px;

z-index: 2;

background: #fff;

line-height: 18px;

color: #333;

text-align: center;

font-size: 15px;

font-weight: 700;

margin-bottom: 30px;

}

input:focus {

outline: none !important;

border-color: #4fcee9 !important;

box-shadow: 0 0 4px #4fcee9 !important;

}

#rightText2{

width: 100%;

height: auto;

font-size: 18px;

padding-bottom: 8px;

border-bottom: 1px solid #ddd;

color: #333;

margin-top: 25px;

margin-bottom: 20px;

}

#checkoutButton{

width: 100%;

height: auto;

margin: 0 auto;

margin-top: 20px;

background: #29af5c;

border-radius: 5px;

border-bottom: 3px solid #128e41;

cursor: pointer;

padding: 23px 0px;

color: #fff;

font-size: 18px;

font-weight: 600;

text-align: center;

}

#rightLine2{

width: 100%;

height: 2px;

background: #29af5c;

margin: 0 auto;

z-index: 1;

margin-top: 25px;

}

#lineText2{

width: 250px;

height: 18px;

margin: 0 auto;

margin-top: -8px;

z-index: 2;

background: #fff;

line-height: 18px;

color: #333;

text-align: center;

font-size: 15px;

font-weight: 700;

margin-bottom: 15px;

}

#secureImg{

width: 70%;

height: auto;

margin: 0 auto;

}

#guarImg{

width: 100%;

height: auto;

margin: 0 auto;

}

#fbContainer{

width: 996px;

height: auto;

margin: 0 auto;

margin-top: 30px;

}

.fbBox{

width: 278px;

height: auto;

min-height: 189px;

float: left;

margin-left: 16px;

margin-right: 16px;

padding: 15px 10px;

border: 1px solid #ddd;

}

.fbPic{

width: 32px;

height: 32px;

float: left;

}

.fbMain{

width: calc(100% - 42px);

height: auto;

float: right;

}

.fbTop{

width: 100%;

height: auto;

margin-bottom: 4px;

font-size: 14px;

}

.fbMid{

width: 100%;

height: auto;

margin-bottom: 10px;

font-size: 14px;

color: #333;

}

.fbBot{

width: 100%;

height: auto;

font-size: 12px;

color: #3f5c9a;

}

#guaranteeBox{

width: calc(100% - 50px);

height: auto;

margin: 0 auto;

padding: 0px 25px;

margin-top: 25px;

}

#guaranteeImg{

width: 125px;

height: auto;

float: left;

}

#guaranteeText{

width: calc(100% - 125px - 30px);

height: auto;

float: right;

color: #666666;

font-size: 13px;

text-align: left;

line-height: 18px;

}

#footer1{

width: 100%;

height: auto;

margin: 0 auto;

background: #333;

padding-top: 25px;

padding-bottom: 50px;

margin-top: 40px;

}

#footerText{

width: 250px;

height: auto;

margin: 0 auto;

text-align: center;

color: #fff;

font-size: 14px;

font-weight: bold;

font-family: Arial;

}

#extraText{

width: 95%;

height: auto;

margin: 0 auto;

text-align: center;

color: #888;

font-size: 11px;

font-family: Arial;

margin-top: 25px;

}

#leaveFade{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 950;

background: rgba(0, 0, 0, 0.7);

display: none;

}

#leavePop{

width: 800px;

height: auto;

position: fixed;

top: 150px;

left: calc(50% - 400px);

z-index: 1000;

background: #ffe300 ;

border: 5px solid #e43b2c ;

border-radius: 10px;

padding-bottom: 60px;

display: none;

}

.innerStyling{

width: 700px;

height: auto;

margin: 0 auto;

text-align: center;



}

#leaveX1{

width: 35px;

height: 35px;

float: right;

margin-right: -20px;

margin-top: -20px;

z-index: 1005;

cursor: pointer;

}

#innerA1{

color: #2f2f2f ;

font-size: 34px;

font-weight: bold;

padding-top: 70px;

}

#innerB1{

color: #0000ee ;

font-size: 24px;

font-weight: bold;

padding-top: 25px;

}

#innerC1{

color: #e43b2c ;

font-size: 26px;

padding-top: 20px;

}

#innerD1{

color: #2f2f2f ;

font-size: 18px;

padding-top: 25px;

}

#innerE1{

width: 300px;

height: auto;

margin: 0 auto;

text-align: center;

font-family: arial;

color: #2f2f2f ;

font-size: 32px;

padding-top: 20px;

font-weight: bold;

letter-spacing: 2px;

}

#innerF1{

width: 150px;

height: auto;

margin: 0 auto;



color: #4e4e4e ;

font-size: 10px;

padding-top: 5px;

text-align: center;

}

#innerFa1{

width: 75px;

height: auto;

float: left;

}

#innerFb1{

width: 75px;

height: auto;

float: right;

}

#innerButton1{

width: 400px;

height: auto;

margin: 0 auto;

margin-top: 40px;

padding: 12px 0px;

color: #fff;

font-size: 24px;

font-weight: bold;

text-align: center;

background: #0bba18 ;

border-radius: 4px;

border: 1px solid #099513 ;

cursor: pointer;

}

#innerButton1:hover{

background: #03880d ;

border: 1px solid #04730c ;

}

.priceGroup2{

display: none;

}

#recentBox{

width: 290px;

padding: 15px;

height: auto;

position: fixed;

z-index: 500;

left: 15px;

bottom: -115px;

background: #fff;

display: none;

box-shadow: 0px 0px 5px #000;

}

#recentImg{

width: 65px;

height: auto;

float: left;

//padding-top: 25px;

}

#recentText{

width: calc(100% - 80px);

height: auto;

float: left;

font-size: 13px;



margin-left: 15px;

}

input#billShipSame {

    position: relative;

    width: 16px;

    height: 16px;

    vertical-align: middle;

    margin: 0;

}

@media screen and (max-width: 1000px) {

body{

overflow-x: hidden;

}

#headerBar{

font-size: 17px;

}

#topLogo{

margin-top: 7px;

}

#topBar{

width: 100%;

margin-top: 7px;

}

#topText2{

font-size: 15px;

}

#mainCheckout{

width: 100%;

}

#checkoutLeft{

width: 97%;

float: none;

margin: 0 auto;

}

#checkoutRight{

width: 97%;

float: none;

margin: 0 auto;

margin-top: 25px;

}

.selectorBox{

width: calc(100% - 32px);

height: auto;

margin: 0 auto;

padding: 13px;

border-radius: 3px;

border: 1px solid #858585;

cursor: pointer;

margin-top: 15px;

}

.selectorMid{

width: 225px;

height: auto;

float: left;

margin-left: 8px;

}

/*.selectorRight{

width: 68px;

height: auto;

float: right;

}*/



.selectorRight {

    max-width: 250px;

	width:100%;

    height: auto;

    float: left;

}



.mobileTitle,

.mobileRecommended,

.mobileStrike,

.mobilePrice,

.mobileDevice{

display: block;

}

.selectorTitle,

.selectorDevice,

.selectorRecommended,

.selectorStrike,

.selectorPrice{

display: none;

}

#savingsLeft{

width: 150px;

}

#savingsRight{

width: calc(100% - 195px);

font-size: 16px;

}

#fbContainer{

width: 100%;

}

.fbBox{

width: 90%;

height: auto;

float: none;

margin: 0 auto;

margin-bottom: 16px;

min-height: 141px;

}

#leavePop{

width: 90%;

top: 50px;

left: 5%;

border: 3px solid #e43b2c ;

border-radius: 8px;

padding-bottom: 40px;

}

.innerStyling{

width: 80%;

}

#innerA1{

font-size: 26px;

padding-top: 30px;

}

#innerB1{

font-size: 22px;

padding-top: 15px;

}

#innerC1{

font-size: 22px;

padding-top: 12px;

}

#innerD1{

font-size: 16px;

padding-top: 15px;

}

#innerButton1{

width: 90%;

margin-top: 30px;

padding: 10px 0px;

font-size: 20px;

border-radius: 3px;

}

}