.checkoutForm{

	padding: 50px 0;    

}

.checkLft h2{

	color: #64666a;

    font-weight: bold;

    font-size: 30px;

    margin-bottom: 20px;

}

.checkLft h3{

	color: #009ade;

    font-weight: 600;

    font-size: 20px;

    margin-bottom: 30px;

}

.form-control{

	background-color: #f0fcff!important;

	height: 50px!important;

    border: 1px solid #dadbdc!important;

    border-radius: 0!important;

}

.form-group{

    margin-bottom: 2rem;

}

/* select,input{

    font-size: 15px!important;

    font-family: Arial;

    font-weight: bold!important;

    color: #6a6c70!important;

} */

.form-control::placeholder {

  color: #6a6c70;

  /* font-weight: bold; */

  font-family: Gotham-Medium!important;

}



.form-control:-ms-input-placeholder {

  color: #6a6c70;

  /* font-weight: bold; */

  font-family: Gotham-Medium!important;

}



.form-control::-ms-input-placeholder { 

  color: #6a6c70;

  /* font-weight: bold; */

  font-family: Gotham-Medium!important;

}



.form-group .row .col-md-6:last-child,.form-group .row .col-md-4,.crdAr .col-md-3{

	padding-left: 0;

}



.creditNo{

    position: relative;

}

.creditNo::after{

    content: " ";

    position: absolute;

    left: 6px;

    top: 10px;

    background: url(../../images/newcheckout/creditcard-icon.png?v=1.50) no-repeat center center / contain;

    width: 32px;

    height: 32px;

}



.creditNo input{

    padding-left: 41px;

}



/* The container */

.cuschkbx {

  display: block;

  position: relative;

  padding-left: 27px;

  margin-bottom: 20px;

  cursor: pointer;

  font-size: 14px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  color: #64666a;

   font-weight: 400;

}



/* Hide the browser's default checkbox */

.cuschkbx input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



/* Create a custom checkbox */

.checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 20px;

  width: 20px;

  background-color: #eee;

}



/* On mouse-over, add a grey background color */

.cuschkbx:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

.cuschkbx input:checked ~ .checkmark {

  background-color: #2196F3;

  border-radius: 2px;

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.cuschkbx input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.cuschkbx .checkmark:after {

  left: 5.75px;

  top: 2px;

  width: 7px;

  height: 13px;

  border: solid white;

  border-width: 0 1px 1px 0;

  -webkit-transform: rotate(20deg);

  -ms-transform: rotate(20deg);

  transform: rotate(20deg);

}



.congoTxt{

    color: #64666a;

    font-size: 12px;

    line-height: 19px;

    font-family: 'Gotham-Medium';

    text-align: center;

}

.termsTxt{

	/* font-weight: bold; */

    color: #64666a;

    font-size: 12px;

    line-height: 19px;  

    border: 1px solid #64666a;   

    padding: 10px;

    margin-top: 2rem;

    font-family: 'Gotham-Medium';          

    /* display: flex;

    align-items: baseline;  */  
        text-align: justify;  

}
.termsTxt.d-flx{ display: flex;   

    align-items: baseline; }
.termsTxt.nwChk{
    padding: 6px;
    background: #e4edf4;
    margin-bottom: 2rem;
    border: 1px solid #5fa5d5;
    font-weight: bold;
    color: #000;
    font-size: 12px;
    line-height: 19px;
    font-family: inherit;display: flex;align-items: flex-start;}

.termsTxt input{

    position: relative;

    top: 3px;

}

.termsTxt label{

    padding-left: 10px;

}
/********************popup*******/
.overlay {
    background-color: rgba(255, 255, 255, .97);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;   
    z-index: 99999;
}
.popUp {
    display: -ms-flexbox;
    display: -ms-flex;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -ms-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    padding: 20px 15px; 
    height: 100%;
    max-width: 55%;
}
.step3 .popUp h3{color: #64666a;
    font-size: 30px;
    margin: 0;
    text-align: center;line-height: 30px;}
.step3  .popUp h1{color: #64666a;
    font-size: 27px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.2;}
.step3 .popUp h2{color: #64666a;
    font-size: 25px;
    margin: 0;margin-bottom: 20px;
    text-align: center;font-weight: 600;}
.pop{width:48%;background: #fff;padding: 0 0 30px 0;box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px;border-radius:10px 10px 10px 10px;text-align: center;
}
.popBx{display: flex;
    justify-content: space-between;        
}
/* .cardSec{ Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f8fbfe+50,e0effd+100 
background: linear-gradient(to right,  #ffffff 0%,#f8fbfe 50%,#e0effd 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ } */
.popBx .pop img{border-radius: 10px 10px 0 0;}
.cardSec img{display: block;margin: 0 auto;}

.redBtn{
    
/* background: linear-gradient(to right,  #ff826e 0%,#fc5c47 50%,#fa4731 100%); */

background: #F93822 ;
color: #fff !important;
    text-transform: uppercase;  
    display: inline-block;
    text-align: center;
    padding: 10px;font-size: 16px;
    border-radius: 5px;margin-top: 15px;  width:100%;  
}
.blueBtn{
/* background: linear-gradient(to right,  #00c9fd 0%,#00abf6 50%,#0078ea 100%);  */
background: #009ADE ;
color: #fff !important;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 10px;font-size: 16px;
    border-radius: 5px;margin-top: 15px;width:100%; 
}
a:hover{text-decoration: none !important;}
.cardSec{padding: 0 20px 0 20px ;}
.cross {
    position: absolute;
    right: 15px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: #000;
    padding: 14px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 2px;
    font-weight: bold;
    /* opacity: 0.5; */
    display: flex;
    justify-content: center;
    cursor: pointer;
}






.orderDetails{

	background: #f0fcff;

    padding: 20px 10px;

}



.orderDetails h3{

	color: #009ade;

    font-weight: bold;

    text-align: left!important;

    font-size: 21px!important;

}



.odRow{

	display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



.ch2 .checkmark{

	height: 25px;

    width: 25px;

    border: 2px solid #2196F3;

    border-radius: 5px;

    top: -1px;

    background-color: #fff;

}

.ch2.cuschkbx{

	padding-left: 34px;

    font-weight: bold;

}



.rushbtn input{

	width: 100%!important;

    background: #f93822;

    font-size: 26px!important;

    padding: 6px 10px;

    border-radius: 5px;

    /* font-weight: bold!important; */

    transition: all 0.2s ease;

    color:#fff!important;

}



.rushbtn input:hover{

	background: #f93822;

	transform: scale(1.02);

}

.freeTrailTxt{

	color: #f93822;

	display: none;

}

.freeTrailTxt a{

	color: #f93822;

	text-decoration: underline;

}

.cntrySel select.no-error,.cntrySel select.has-error{

    background-position-x: 96.5%;

}

.shipStateSel select.no-error,.shipStateSel select.has-error{

    background-position-x: 92.5%;

}

.expMnt select.no-error,.expMnt select.has-error,.expYr select.no-error,.expYr select.has-error{

    background-position-x: 94.5%;

}

.shipStateSel1 select.no-error,.shipStateSel1 select.has-error{

    background-position-x: 97.5%;

}
/* New Checkout Design */

.steps{

    margin-bottom: 6rem;

}

.steps ul{

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    padding-left: 0;

}

.steps li.active{

    background: #009ade;

    color: #fff;

}

.steps li{

    width: 30%;

    text-align: center;

    background: #e2e2e2;

    font-size: 25px;

    margin: 0px 10px;

    border-radius: 5px;

    color: #636566;

}

.step1 h2{

    text-align: center;

    color: #64666a;

    font-size: 35px;

    margin-bottom: 4rem;

}

.step1 h3,.step2 h3,.step3 h3{

    text-align: center;

    color: #009ade;

    font-size: 31px;

    margin-bottom: 5rem;

}

.step2 h3,.step3 h3{

    margin-top: 5rem;

}

.checkoutForm select,.checkoutForm input{

    color: #6d7074!important;

    font-family: Gotham-Medium!important;

    font-size: 18px!important;

}

.contiBtn{

    width: 100%!important;

    background-color: #009ade;

    color: #fff;

    font-size: 25px;

    padding: 5px 10px;

    margin-top: 7rem;

}

/* .step2{

    display: none;

}

.step3{

    display: none;

} */

.stepsMain{

    position: fixed;

    width: 100%;

    left: 0;

    background: #fff;

    z-index: 9999;

    padding: 20px;

}



.steps{

    max-width: 50%;

    margin: auto;

}

.termsTxt a{

    color: #009ade!important;

    text-decoration: none!important;

}

.step1{

    margin-top: 10rem;

}

.rushbtn input{

    color: #fff!important;

}

@media (max-width:1280px){
.popUp{max-width:50%}
.step3 .popUp h3{font-size: 22px;line-height: 22px;}
.step3 .popUp h2{font-size: 21px;margin-bottom: 14px;}
.step3 .popUp h1{font-size: 23px;}
.redBtn, .blueBtn{font-size: 9px;}
.pop{padding-bottom: 30px;}

}

@media (max-width:1198px){

	.checkLft h3{

		font-size: 18px;

	}
    .redBtn, .blueBtn{width: 100%;}
  .redBtn, .blueBtn{font-size: 9px;}
  .steps li{width: 25%;}
  .popBr{display: none;}

}

@media (max-width:992px){

	.checkoutForm {

	    padding: 30px 0;

	}
    .step3 .popUp h3 {
    font-size: 19px;
    line-height: 22px;
}
.step3 .popUp h1 {
    font-size: 19px;
}
.step3 .popUp h2 {
    font-size: 18px;
    margin-bottom: 14px;  
}

.popUp{max-width:90%}

    /* .creditNo input{

		background: url(../../images/newcheckout/creditcard-icon.png?v=1350) no-repeat 6px 10px / 9%;

	} */

    select, input{

        font-size: 10px!important;

    }

    .cuschkbx{

        font-size: 12px;  

    }

}    

@media (max-width:767px){
    .popUp{max-width: 90%;padding: 0;}
    .step3 .popUp h3{font-size: 21px;}
    .step3 .popUp h1{font-size: 20px;line-height: 26px;}
    .step3 .popUp h2{font-size: 18px;}
    .redBtn{font-size: 11px;}
    .blueBtn{font-size: 11px;}

	.checkLft h2{

		font-size: 25px;

    	margin-bottom: 10px;

    	line-height: 1;

	}

	.checkLft h3{

		font-size: 16px;

		margin-bottom: 15px;

	}

	.form-group .row .col-md-6:last-child, .form-group .row .col-md-4,.crdAr .col-md-3{

		padding-left: 15px;

	}



	.form-group input,.form-group select{

		margin-bottom: 1rem;

	}

	.form-group{

		margin-bottom: 0!important;

	}

	/* .creditNo input{

		background: url(../../images/newcheckout/creditcard-icon.png?v=1350) no-repeat 6px 10px / 7%;

	} */

	.cuschkbx{

		font-size: 12px;

	}

	.pdtAr .col-md-4{

		text-align: center;

	}

	.pdtAr .col-md-4 img{

		height: 300px;

    	object-fit: contain;

    	margin-bottom: 20px;

	}

	.termsTxt{

		/* margin-top: 0!important; */

        margin-top: 2rem;

	}

    .rushbtn input{

        font-size:22px;

    }

    .cntrySel select.no-error,.cntrySel select.has-error{

        background-position-x: 96.5%;

    }

    .shipStateSel select.no-error,.shipStateSel select.has-error{

        background-position-x: 96.5%;

    }

    .expMnt select.no-error,.expMnt select.has-error,.expYr select.no-error,.expYr select.has-error{

        background-position-x: 96.5%;

    }

    .shipStateSel1 select.no-error,.shipStateSel1 select.has-error{

        background-position-x: 96.5%;

    }

    select, input{

        font-size: 14px!important;

    }

}



@media (max-width:440px){

    /* .creditNo input{

		background: url(../../images/newcheckout/creditcard-icon.png?v=1350) no-repeat 6px 10px / 9%;

	} */



}

#opt_select{

    font-size: 12px!important;

    height: 45px;

}

.customRadio{

    margin-top: 10px;

}

.threebxsMain{

    border: 1px solid #222;

    padding: 15px;

    /* min-height: 250px; */

}



.threebxsMain p{

    margin-bottom: 0;

    font-weight: bold;

    color: #64666a;

    line-height: 25px;

    font-size: 16px;

}

@media (max-width:1199px){

    .threebxsMain{

        padding: 10px;

        /* min-height: 300px; */

    }

    .threebxsMain p{

        line-height: 20px;

        font-size: 13px;

    }

    .rushbtn input{

        font-size: 22px!important;

    }

}

@media (max-width:767px){

    .threebxsMain{

        min-height: 0;

        margin-bottom:15px;

    }

}



/* Custom Menu only for checkout page */

.cusheaderBtn{

    background: transparent;

    padding: 0 10px;

}

.menu-section{

    min-height: 0;

}

.hdrList{

    display: none;

    position: absolute;

    right: 0;

    top: 42px;

    z-index: 999999;

    background: #fff;

    box-shadow: 1px 5px 9px rgba(0,0,0,0.20);

}

.hdrList ul{

    padding: 0;

}
.couponSec input[type="text"]{height: 52px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 0 !important;
    font-family: 'Gotham-Book' !important;
    font-size: 14px !important;background: #fff !important;}
    .couponBtn{background-color: #f93822 !important;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    height: auto;
    border-radius: 0;
    display: block;
    margin-top: 10px;
    width: 100% !important;
    text-decoration: none !important;
    padding: 14px;
    white-space: normal;}

@media (max-width:1199px){

    .hdrList{

        top: 61px;

    }

}

@media (max-width:767px){

    .hdrList{

        width: 100%;

        top: 63px;

    }

}




@media (max-width:1199px){

    .steps{

        max-width: 62%;

    }

}

@media (max-width:992px){

    .steps li{

        margin: 0px 5px;

    }

    .checkoutForm select,.checkoutForm input{

        font-size: 14px!important;

    }

}

@media (max-width:767px){

    .steps li{

        margin: 0px 3px;

    }

    .steps {

        margin-bottom: 2rem;

    }

    .step1 h2{

        font-size: 28px;

        margin-bottom: 2rem;

    }

    .step1 h3, .step2 h3, .step3 h3{

        font-size: 20px;

        margin-bottom: 3rem;

    }

    .contiBtn{

        margin-top: 2rem;

    }

    .steps{

        max-width: 100%;

    }

    .step1{

        margin-top: 9rem;

    }

}


.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6H20M4 12H20M4 18H20'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")!important;
}

.nav-link{
    color: #000!important;
}
.hdrList ul {
    padding-top: 12px;
}

 .gradSec {
    background: linear-gradient(45deg,  #f2f2f2 0%,#e7e7e7 33%,#fbfbfb 63%,#e0e0e0 100%);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.mbgSec {
    width: 16%;
}
.mbgTxt {
    width: 74%;
}
.mbgTxt p {
    color: #333;
    font-weight: 400;
    font-size: 17px;
    margin-bottom: 0;
    padding-top: 20px;
}
.mbgTxt p span {
    text-transform: uppercase;
}
.termsTxt.nwChk {
    padding: 6px;
    background: #EEEEEE;
    margin-bottom: 2rem;
    border: 1px solid #D8D8D8;
    font-weight: bold;
    color: #000;
    font-size: 12px;
    line-height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.termsTxt input {
    position: relative;
    top: 0px;
    width: 19px;
    height: 19px;
    border-radius: 0;
}
.termsTxt label {
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 6px;
}

@media screen and (max-width: 767px) {
    .gradSec {
        display: block;
    }
    .mbgSec, .mbgTxt {
    width: 100%;
}
.whiteSec p {
    font-size: 14px;
    line-height: 25px;
    margin-top: 20px;
}
.termsTxt.nwChk img {
    display: none;
}
}