#step1 {
    opacity:1;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
#step2,#step3 {
    opacity:0;
    height:0;
    z-index:-1;
    visibility: hidden;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.leftStatus {
    background: #fff;
    width: 50%;
    height: fit-content;
    position: absolute;
    left: 0%;
    margin-top: 6%;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    font-size: 16px;
    text-align: left;
    padding: 6% 5%;
    transition: .4s ease-in-out;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -ms-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    opacity: 0;
} 
.leftStatus div:not(:last-child) {    
    margin-bottom: 2%;
}
.leftStatus div i {   
    margin-right: 2%;
}
#mobileMenu{
    position: fixed;  
    min-height: 100%;
    top:-100%;
    left:0; 
    right:50%; 
    z-index: 3;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out; 
    box-shadow: 1px 1px 20px 0px #232323;
    background: #2d2d2d;
}
#mobileTitleMenu {
    width: 70%;
    position: absolute;
    opacity: 0;
    left: 15%;
    top: 150%;
    color: #232323;
    z-index: -1;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 25px;
    font-weight: bold;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
} 
.mobileBG {
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    background: #000000;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.menuNavHeader div #searchField:focus{ 
    border: 1px solid #256e37;
}
#searchFieldCB,#allSoftware,#newSoftware,#mostPurchased {
    display:none; 
    cursor: pointer !important;
}
#searchFieldCB:checked ~ #searchField {
    visibility: visible;
    height:auto;
    width:75%;
    padding:2% 5%;
}
#mobileMenuCB:checked ~  .mobileBG{
    opacity: 0.7;
    right: 0;
    left: 0;
} 
#mobileMenuCB:checked ~  #mobileTitleMenu{
    opacity: 1; 
    z-index: 11;
}
#mobileMenuCB:checked ~ #mobileMenuLBL > .mobileContainer > img{
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
} 
#mobileMenuCB:checked ~ #mobileMenuLBL > .mobileContainer > #menuExpand {
    bottom: -100%;
}
#mobileMenuCB:checked ~ #mobileMenuLBL > .mobileContainer > #menuRetract {
    bottom: -7%;
} 
#mobileMenuCB:checked ~ #mobileMenu {
    top: 0;
}   
#mobileMenuCB:checked ~ #mobileSearchInput {
    top:-100%;
}   
#mobileMenuCB:checked ~ #mobileTitleMenu {
    top:50%;
}   
#mobileSearchInput:focus { 
    border: 1px solid #256e37;
    left: 3%;
    width:85%;
} 
#mobileMenuSearchRB:checked  ~ #closeSearchContainer { 
    z-index: 11;
    top:50%;
} 
#mobileMenuSearchRB:checked ~ .searchExpanded  { 
    left:0;
}  

#mobileMenuSearchRB:checked  ~ #mobileSearchInput {  
    left: 3%;
    width:85%;
}  
#mobileMenuSearchRB:checked  ~ #searchResults { 
    top:0;
    z-index: 3;
    overflow-y: scroll;
}  
#mobileMenuSearchRB:checked  ~ #searchResults > #mobileSearchResultsContainer {  
    top:57%;    
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}  
.mobileLoginSignUp { 
    padding-bottom: 2%;
    display: block;
    color: #fff;
}
.mobileLoginSignUp div:first-child { 
    margin-top: 17%;
    margin-bottom: 2%;
}
.mobileLoginSignUp div:last-child { 
    position: relative;
    margin-left: 4%;
}
.mobileLoginSignUp div i { 
    font-size:40px;
}
.mobileLoginSignUp div i:last-child { 
    position: absolute;
    right: 3%; 
    color: #7b7b7b;
}
.mobileLoginSignUp div span {
    font-size:20px;
    position: absolute;
    top:50%;
    bottom:0;
    margin-left:3%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.mobileMenuList div,.mobileSupportMenu div,
.mobileLoginSignUp div:first-child {    
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 1% 0;  
}
.mobileLoginSignUp div:first-child {     
    background: #801213;  
}
.mobileMenuList div{     
    background: #256e37;  
}
.mobileSupportMenu div{     
    background: #045061;  
}
.mobileMenuList a {
    display:block;
    font-size: 20px;
    color: #fff;
    text-indent: 5%;
    text-decoration: none;
    padding: 2% 0;
    position:relative;
}
.mobileMenuList a:not(:last-child) {
    border-bottom: 1px solid #656565;
}
.mobileActivePage::after {
    content: '\25c4'; 
    position: absolute;
    color:#256e37;
    top: 50%;
    transform: translateY(-50%);
}
.mobileSupportMenu a {
    display:inline-block;
    color:#fff;
    text-decoration: none;
    width:33%;
    padding-top:2%;
}
.mobileSupportMenu a i {
    display:block;
    font-size:40px;
    text-align: center;
}
.mobileSupportMenu a span {
    display:block;
    font-size:20px; 
    text-align: center;
}
.showSearchBG {
    z-index: 3;
    opacity: .6;
    height:100%;
}
.showSearchResults {    
    z-index: 6;         
    height: 70%;
}
.desktopSearchResults span:hover {
    color:#860002;
}
#desktopSearchContainer {
    padding: 0;
    margin: auto;
    display: block;
    width: 95%;
    overflow-y: auto;
    height: 85%;
}
.searchItemDesktop {
    position: relative;
    display: inline-block  !important;
    padding: .5% !important;
    margin: .5% !important;
    background: #fff  !important;
    width: 300px !important;
    height: 275px  !important;
    border-radius: 5px  !important;
    overflow: hidden  !important;
    text-decoration: none !important;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2)  !important;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2)  !important;
    transition: 0.3s ease-in-out !important;
    -o-transition: 0.3s ease-in-out !important;
    -webkit-transition: 0.3s ease-in-out !important;
    -moz-transition: 0.3s ease-in-out !important;
    -ms-transition: 0.3s ease-in-out !important;
    float: unset !important;
    -webkit-padding-start: unset !important;
    -moz-padding-start: unset !important;
    padding-inline-start: unset !important;
    font-size: unset !important;
    font-weight: unset !important;
    line-height: unset !important;
    vertical-align: unset !important;
    text-align: unset !important;
    -webkit-box-align: unset !important;
    -ms-flex-align: unset !important;
    align-items: unset !important;
    -webkit-box-pack: unset !important;
    -ms-flex-pack: unset !important;
    justify-content: unset !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
    -webkit-border-radius: 5px  !important;
    -moz-border-radius: 5px  !important;
    -ms-border-radius: 5px  !important;
    -o-border-radius: 5px  !important;
}
.searchItemDesktop:hover {
    color:#256e37 !important;
    text-decoration: none !important;
}
.searchItemDesktop:hover span {
    color:#256e37 !important; 
    border-bottom: 0px !important;   
    padding-bottom: unset !important;
}
.searchItemDesktop:hover > img {    
    padding:1%;
}
.searchItemDesktop img {
    width: 65% !important;
    padding:5%;
    margin: auto;
    display: block;
    transition: .7s ease-in-out;
    -webkit-transition: .7s ease-in-out;
    -moz-transition: .7s ease-in-out;
    -ms-transition: .7s ease-in-out;
    -o-transition: .7s ease-in-out;
} 
.deviceTypeSearch {
    background: #065061;
    position: absolute;
    right: 0;
    top: 0;
    padding: 2%;
    font-size: 12px;
    font-weight: bold;
    color: #fff;

}
.detailsDesktopSearchMain span {
    position: unset;
    top: unset;
    right:unset; 
    color: unset; 
}
#searchResultTitle {    
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-align: center;
}
.detailsDesktopSearchMain span {
    font-size:16px;
} 
.detailsDesktopSearchSub {
    display: block;
    text-align: center;
}
.detailsDesktopSearchSub span:last-child, .detailsDesktopSearchSub span:nth-child(1) {
    font-size:13px;
} 
.detailsDesktopSearchSub span:last-child span, .detailsDesktopSearchSub span:nth-child(1) span {
    font-weight:bold;
}
.searchItemDesktop div div span {
    font-weight:normal;
} 
#mobileSearchResultsContainer {
    display: block;
    height: 85%;
    font-size: 16px;
    top: -100%;
    position: fixed;
    width: 100%;
    overflow: auto;
    border-radius: 10px;
    transition: .7s ease-in-out;
    -webkit-transition: .7s ease-in-out;
    -moz-transition: .7s ease-in-out;
    -ms-transition: .7s ease-in-out;
    -o-transition: .7s ease-in-out;
}
.mobileSearchResultsItem {    
    width: 95%;
    padding: 1% 2%;
    display: block;
    background: #fff;
    margin: 1% auto;
    border-radius: 10px;
    color: #595959;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    overflow: hidden;
    position: relative;
}
.mobileSearchResultsItem img {       
    width: 20%;
    float: left;
}
.mobileSearchResultsItem .mobileSearchDetailsCont {         
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 27%;
}
.mobileSearchResultsItem .mobileSearchDetailsCont .mobileSoftwareTitle { 
    font-size: 25px;
    margin-bottom: 3%;
    font-weight: bold;
}
.mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan {    
    font-size: 16px;
    color: #1d5028;
} 
.mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan {
    float:left;
}
.mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan {
    float:right;
}
.mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan span, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan span {        
    font-size: 17px;
    font-weight: bold;
    color: #595959;
}
.deviceTypeMobileSearch {
    text-decoration: none;
    position: absolute;
    right: 0%;
    top: 0%;
    color: #fff;
    background: #045061;   
    padding: .5% 1%;
    font-size: 16px;
}
/*mainpagebody*/
.bottomBanner{
    background: -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0.5))),url(https://www.kreativeteksolutions.com/retrieveImages.php?imageID=bg.jpg) no-repeat center;
    background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://www.kreativeteksolutions.com/retrieveImages.php?imageID=bg.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    padding-top: 2%;
}
.bannerContainer{
    width: 80%;
    margin: auto;
    text-align: center;
}
.bannerContainer h3{
    color:#fff;
    text-align:center;
    font-size: 18px;
}
.bannerContainer div{
    color:#fff;
    text-align:center; 
    display:inline-block;
    margin: 3% 0;
}

.bannerContainer div span {
    background: #065061;
    padding: 25px 24px;
    border-radius: 100%;
    color: #f3f3f3;
    font-size: 24px;
}
.bannerContainer div h4 {
    color: #fff;
    font-size: 12px;
    font-weight:100;
    text-transform: uppercase;
    margin: 20% 10% 5% 10%;
}
.hvr-outline-out:hover, .hvr-outline-out:focus {   
    background: #1d5028;
}
.addCartInnerContainer {
    background: #3c3c3c;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin-top: 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    display: -webkit-flex;
}
.addCartInnerContainer button {
    width: 33%;
    float: left; 
    height: -moz-available;
    height: -webkit-fill-available;
    height: stretch;
    background: #232323;
    border: 0px; 
    transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    cursor:pointer;
    outline: 0;
} 
.addCartInnerContainer button:first-child:hover {
    background: #860002;
} 
.addCartInnerContainer button:last-child:hover {
    background: #256e37;
} 
.addCartInnerContainer button i{    
    color: #fff;
    font-size: 40px;
}
.addCartInnerContainer div {    
    width: 34%;
    color: #fff;
    float: left;
    margin: auto;
    text-align: center;
    font-size: 20px;
}
.productDetailsLink h4,.productDetailsLink h5{    
    margin:0;
    transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
}
.productDetailsLink h4:hover{    
    color:#065061;
}
/*footer*/
footer{
    width:100%;
    background:#212020;
    color:#eeeeee;
}
.footerContainer{
    width: 80%;
    margin: auto; 
}
.footerContainer div{
    margin:auto;
    padding:1%;
    text-align: left;
    vertical-align: top;
    font-size:16px;
}
.footerContainer div div:not(:first-child) { 
    margin-left:5%;
}
.footerContainer div div:first-child{
    display:inline-block;
    width:40%;
}
.footerContainer div div:nth-child(2){
    display:inline-block;
    width:20%;
}
.footerContainer div div:last-child{
    display:inline-block;
    width:28%;
}
.footerContainer div div a{
    display:block; 
    margin:1%; 
    color:#fff;
    text-decoration: none;
}
.copyright {
    display:block; 
    color:#fff;
    text-align:center;
    padding: 0 0 1% 0;
    font-size: 16px;
}
.copyright a{
    color:#ea4e52;
    text-decoration: none;
}
.showProduct{
    display: block;
    width: 24%;
    max-height: 500px;
    margin: .5%;
}
.overlay{
    position: absolute; 
    top: 100%;
    bottom: -100%;  
    background:rgba(33, 33, 33, 1);
    color: #f1f1f1;
    width: 100%;
    transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); 
    -o-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -webkit-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -moz-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}
.pricingContainer:hover > .overlay{
    top:0;
    right:0;
    bottom:0;
}
.detailedview {
    background: #781920 none repeat scroll 0 0;
    color: #fff;
    display: block;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    transition: all .5s ease-out 0s; 
    -o-transition: all .5s ease-out 0s;
    -webkit-transition: all .5s ease-out 0s;
    -moz-transition: all .5s ease-out 0s;
    text-decoration: none;
}
.detailedview:hover,.detailedview:focus{    
    background: #a50813;
}
.strikethrough {
    position: relative;
}
.strikethrough:before {
    border-bottom: 1px solid red;
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
}
.rating {
    display:inline-block;
    margin-top:5%;
}
.rating img {
    display: inline-block;
    margin: unset;
    width: 12%;
}
.bottomOverlayContainer{
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}
.outterContainer{    
    width: 100%;
    height: 100%;
    background: #000000a8;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 
    transition: all 1s ease-out; 
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    font-size:18px;
    
}
.loginSignUpContainer{
    position: absolute;
    margin: 1% auto;
    text-align: center;
    width: 75%;
    background: #fff;
    right: 0;
    left: 0;
    z-index: 2;
    border-radius: 10px;
    overflow: hidden;
    display:block;
    transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    padding: 3%;
    height:75%;
    top: -100%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
}
#closeModal{
    position: absolute;
    top: 0;
    right: 3%;
    padding: 2% 3%;
    color: #065061;
    font-size: 20px;  
    transition: all .5s ease-in; 
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    cursor:pointer;
}
#closeModal:hover,.closeModal:focus{
    color:#981b1e;
}
.selectorContainer{    
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    z-index: 60;
    top: 0;
    bottom: 0;
    padding: 0% 10%;
}
.left,.right {
    width:48%;
    margin:1%;
    float:left;
    display:block
}
.left img {
    width: 75%;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
#loginCont,#signUpCont,#forgotPassCont{
    position: absolute;
    height: -webkit-fit-content;
    height: fit-content;
    height: -moz-fit-content;
    width: 100%;    
    transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}
#loginCont {
    top:0;
    left:-100%;
}
#signUpCont {
    top:0;
    right:-100%;
}
#forgotPassCont {
    left: 0;
    right: 0;
    opacity:0; 
    z-index:-1;
}
.signUpSelector,.logInSelector{
    display: inline-block;
    background: #2f2f2f;
    color: #fff;
    padding: 2% 0%;
    width: 25%;
    opacity: .8;
    border-radius: 10px;     
    transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    cursor:pointer;
} 
.containerSelected{    
    opacity: 1;
}
.signUpSelector:hover,.logInSelector:hover{
    opacity: 1;
}
.contContainer{
    padding: 2%;
    position: relative;
}
.rightCont{
    text-align:left;
}
.logInRight h3{
    text-align: center;
    font-size:x-large;
}
.sign-in {
    margin: 2% 5%;
}
.sign-in label{ 
    text-align:left;
    display: block;
    margin-bottom:.5%; 
}
.sign-in input[type="text"],.sign-in input[type="password"],.sign-in select {
    width: 100%;
    padding: 2%;
    outline: none;
    border: 1.5px solid #c5c5c5;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
} 
.sign-in select {
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.sign-in input[type="text"]:focus,.sign-in input[type="password"]:focus {
    border-color: #256e37;
} 
.sign-in a {
    text-align:left;
    display:block;
    margin-top:1%;
    color:#065061;
    transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    cursor:pointer;
}
.sign-in a:hover {
    color:#256e37;
}
.cbContainer {
    margin: 0 5%;
    display:block;
    text-align: left;
}
.signInBTN {    
    background: #065061;
    border: none;
    padding: 3%;
    color: #fff;
    border-radius: 10px;
    width: 100%;    
    transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    margin:2% 0;
    cursor: pointer;
}
.signInBTN:hover {
    background: #256e37;
}

.customCB {
    position: absolute;
    opacity: 0;
    transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}
.customCB + label {
    position: relative;
    cursor: pointer;
    padding: 0;

}
.customCB + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 15px;
    height: 15px;
    background: white;  
    border: 2px solid #b8b8b8;
    vertical-align: middle;    
    transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
}
.customCB:hover + label:before {  
    border: 2px solid #256e37;
}
.customCB:focus + label:before {
    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.customCB:checked + label:before {
    border: 2px solid #256e37;
}
.customCB:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
.customCB:disabled + label:before {
    -webkit-box-shadow: none;
            box-shadow: none;
    background: #ddd;
}
.customCB:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    background: #256e37;
    width: 2px;
    height: 2px;
    -webkit-box-shadow: 2px 0 0 #256e37, 4px 0 0 #256e37, 4px -2px 0 #256e37, 4px -4px 0 #256e37, 4px -6px 0 #256e37, 4px -8px 0 #256e37;
            box-shadow: 2px 0 0 #256e37, 4px 0 0 #256e37, 4px -2px 0 #256e37, 4px -4px 0 #256e37, 4px -6px 0 #256e37, 4px -8px 0 #256e37;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*cart*/
.fieldInfo:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #860002;
    position: absolute; 
    z-index: -1;
}
.fieldInfo {
    position: absolute;
    background: #860002;
    width: 264px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin-left: 4%;
    margin-top: .5%;
    z-index: -1;
    opacity: 0;
    transition: all .2s ease-in; 
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    color: #fff;
    padding: .5%;
    font-size: 14px;
} 
#subTotal,#discount,#coupon{
    cursor: pointer;
}
#couponDesc:before{     
    right: 29%;
    top: -6%;
}
#subTotalDesc:before{    
    left: 1%;
    top: -11%;
}
#discountDesc:before{    
    left: 28%;
    top: -11%;
}
#subTotal:hover ~ #subTotalDesc,#discount:hover ~ #discountDesc,#coupon:hover ~ #couponDesc{
    opacity: 1;
    z-index: 1;
}
#couponInput{
    padding:3%;
    padding: 3%;
    border-radius: 5px 0 0 5px;
    border:.5px solid #cdcdcd;
    outline: none;
    width: 80%;
}
#couponInput:focus{ 
    border:1px solid #256e37;
}
#couponForm input[type="submit"]{    
    padding: 3.2%;
    border: 0px;
    color: #fff;
    outline: 0px;
    background:#2c6271;
    border-radius: 0 5px 5px 0;    
    -webkit-border-radius:0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0; 
    width: 20%;
    cursor:pointer;    
    transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}
#couponForm input[type="submit"]:hover,#couponForm input[type="submit"]:focus{    
    background:  #256e37;
}
@-webkit-keyframes marquee {
    0%   { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
}
@keyframes marquee {
    0%   { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
}
#incrementArrow, #decrementArrow {
    color:#2c6271;
    cursor: pointer;
    transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
} 
#decrementArrow:hover,#incrementArrow:hover {
    color:#860002;
}
.deleteContainer{ 
    height: unset;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0%;
    transition: all .7s ease-in; 
    -o-transition: all .7s ease-in;
    -webkit-transition: all .7s ease-in;
    -moz-transition: all .7s ease-in;
    z-index:2;
    background: rgba(56, 0, 0, 0.8);
}
.deleteContainer span {
    display: block;
    text-align: center;
    padding: 5% 5% 2% 5%;
    color: #fff;
}
.deleteContainer div {    
    display: block;
    margin: auto;
    max-width: 300px;
}
.deleteContainer div button{      
    background: #212020;
    border: 0px;
    padding: 3%;
    color: #fff;
    border-radius: 5px;
    cursor:pointer;
    transition: all .7s ease-in-out; 
    -o-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    outline: none;
}

.deleteContainer div button:first-child:hover,.deleteContainer div button:first-child:focus{      
    background: #981a1e;
    border-radius: 10px; 
}
.deleteContainer div button:last-child:hover,.deleteContainer div button:last-child:focus{      
    background: #256e37;
    border-radius: 10px; 
}
.removeActive{ 
    top: 0; 
}
.productDetails .bottom span:hover{ 
    color:#981a1e;
}
.notLoggedInMSG a:hover {
    color: #256e37;
    text-decoration:underline;
}
.menuNavHeader a:hover span {    
    transition: all .5s cubic-bezier(0.45, 0.05, 0.55, 0.95); ; 
    -o-transition: all .5s cubic-bezier(0.45, 0.05, 0.55, 0.95); ;
    -webkit-transition: all .5s cubic-bezier(0.45, 0.05, 0.55, 0.95); ;
    -moz-transition: all .5s cubic-bezier(0.45, 0.05, 0.55, 0.95); ;
    border-bottom: 2px solid #256e37;
    padding-bottom: 3%;
}
.loginheader a:hover {
    color:#fff;
}
.loginheader a:nth-child(4):hover > .cartTotal {
    visibility: visible;
    opacity: 1;
    top: 5%;
}
.detailsRelatedItemsList {
    -webkit-overflow-scrolling: touch;
}
.detailsRelatedItemsList::-webkit-scrollbar {
    display: none;
  }
.sectionTitle { 
    font-size: 18px;
    font-weight: bold;
    font-family: serif;
    margin-bottom: 1%;
    letter-spacing: .5px; 
}
.next,.prev {
    position: absolute;
    font-size: 60px;
    bottom: 10%;
    transform: translate(-50%, -50%);
    cursor:pointer;
    font-family: monospace;
    transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}
.prev {
    left: 4.5%;
}
.prev:before {
    content: "<";
}
.next{
    right:1%;
}
.next:before{
    content:">";
}
.next:hover,.prev:hover {
    color:#256e37;
}

.detailsRatingBottom img{
    width:45px !important;
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.detailsRatingBottom { 
    position: relative;
    cursor:pointer; 
    float:left;
    margin: 3% auto !important;
}
.detailsRatingBottom div{    
    font-size: 34px; 
    float: right;
    cursor: auto;
}
.detailsRatingBottom div span{
   margin-left:5%;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transition: .5s ease-in-out;
   -webkit-transition: .5s ease-in-out;
   -moz-transition: .5s ease-in-out;
   -ms-transition: .5s ease-in-out;
   -o-transition: .5s ease-in-out;
   font-size:30px;
}
.detailsRatingBottom img:hover ~ img{
    filter: grayscale(1) !important;
    -webkit-filter: grayscale(1) !important;
} 
#ratingFive img:hover ~ img,#ratingFour img:hover ~ img,#ratingThree img:hover ~ img,#ratingTwo img:hover ~ img,#ratingOne img:hover ~ img {
    filter: grayscale(1) !important;
    -webkit-filter: grayscale(1) !important;
}
#ratingFive img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
} 
#ratingFour img:nth-child(5) {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
} 
#ratingThree img:nth-child(4),#ratingThree img:nth-child(5) {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
} 
#ratingTwo img:nth-child(3),#ratingTwo img:nth-child(4),#ratingTwo img:nth-child(5) {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
} 

#ratingOne img:nth-child(2),#ratingOne img:nth-child(3),#ratingOne img:nth-child(4),#ratingOne img:nth-child(5) { 
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
} 
.reviewContainer {
    display:block;
    width:85%;
    font-size: 14px;
    padding: 0 0 2% 0;
    margin: auto auto 10% auto;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.reviewArea {
    width:29%;
    background:#fff;
    height:fit-content;
    border-radius: 10px;
    padding: 2%;
    float:left;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.reviewArea h4 {
    margin:0 0 2% 0;
    font-size:18px;
}
.reviewArea textarea {
    width: 100%;
    height: 15vh;
    resize: none;
    margin: auto auto 1% auto;
    display:block;
    outline:none;
    border: .5px solid grey;
    padding: 3%;
    font-size:12px;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.reviewArea input{
    width: 100%; 
    margin: 1% auto;
    display: block;
    outline: none;
    border: .5px solid grey;
    padding: 3%;
    transition: 1s ease-in-out;
    font-size:12px;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.reviewArea textarea:focus,.reviewArea input:focus,.settingsTable > tbody > tr > td > input:not(:disabled):focus,#couponModal .left input:focus, #couponModal .right input:focus  {    
    border: .8px solid #256e37;
}
.reviewBTNContainer {
    display:block;
    text-align:center
}
.reviewBTN {
    width: 49%;
    padding: 3%;
    margin-top: 2%;
    background: #232323;
    color: #fff;
    border: 0px;
    outline: none;
    cursor:pointer;
    border-radius: 20px;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.reviewBTN:hover {
    background:#3c3c3c;
} 
.userReviewsContainer{
    width:69%;
    background:#fff; 
    border-radius: 10px;
    float:left;
    margin-left: 1%;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.userReviewsContainer li{   
    padding-bottom: 2%;
    overflow: hidden;
}
.userReviewsContainer li:not(:last-child){
    border-bottom: 1px solid #bdbdbd;
}
.userReviewsContainer li:not(:first-child){
    padding-top:2%;
}
.userReviewsContainer li .rCont{  
    padding: 0 3%;
}
.filterDetails span:nth-child(2){
    margin-left:2%;
}
.filterDetails span:last-child{
    float:right;
}
.filterDetails span{
    font-weight: bold;
}
.filterDetails{    
    padding: 2% 3% 0 3%;
}
.filterDetails span select { 
    border-radius: 10px;
    cursor:pointer;
    outline:none;
}
#reviewList{
    margin-top:4%;
    display: block;
    list-style: none;
    padding-bottom: 2%;
}
.reviewRating {
    float: right;
}
.reviewTitle {
    float:left; 
    width: 75%;
    font-weight: bold;
    font-size: 18px;
}
.reviewContent {
    margin-top:1%;
}
.reviewAuthor {
    float:left;
    font-weight: bold;
}
.reviewAuthor img{
    width:30px;
    height:30px;
    position: relative;
    bottom: 30%;
    transform: translateY(30%);
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
}
.reviewAuthor span{
    height: 30px;
    position: relative;
    top: 50%;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
}
.reviewDate {
    float:right;
    font-weight: bold;
    height: 30px;
    position: relative;
    top: 50%;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
} 
.orderModal:before {
    content: "";
    display: none;
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.orderModal-dialog {
    background: #fff;
    border: #333 solid 1px;
    border-radius: 5px;
    position: fixed;
    font-size:14px;
    left: 25%;
    top: -100%;
    z-index: 11;
    width: 50%;
    -webkit-transform: translate(0,-500%);
    -ms-transform: translate(0,-500%);
    transform: translate(0,-500%);
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.orderModal-footer {
    border-top: #eee solid 1px;
    text-align: right;
    background: rgba(255,255,255,.8);
}
.orderModal-header {
    padding: 10px 20px;
    background: rgba(255,255,255,.8);
}
.orderModal-footer {
    padding: 2% 25px;
    position: relative;
}
.orderModal-dialog > .orderModal-header #modalTitle {
    text-align: center;
}  
.orderModal-dialog > .orderModal-footer > #oTotalTitle  {
    position: absolute;
    left: 2.5%;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.orderModal-dialog > .orderModal-header #orderNumbTitle,.orderModal-dialog > .orderModal-footer > #oTotalTitle  {
    text-align: left;
    font-weight:bold;    
    font-size: 1.5em;
}  
.orderModal-dialog > .orderModal-header > #orderNumbTitle > #orderNumber,.orderModal-dialog > .orderModal-footer > #oTotalTitle > #oTotal {
    font-weight: normal; 
}      
.showModalDiagContainer { 
    width:100%; 
}
.showModalDiagContainer > .orderModal-dialog { 
    top: 20%;
    left: 50%;
    transform: translate(-50%,-20%);
    -webkit-transform: translate(-50%,-20%);
    -moz-transform: translate(-50%,-20%);
    -ms-transform: translate(-50%,-20%);
    -o-transform: translate(-50%,-20%);
}
.showModalDiagContainer:before { 
    display:block;
}
.orderModal-footer a {
    text-decoration: none;
    background:#333333;
    color:#fff;
    padding: 1.5% 5%;
    border-radius:20px;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
#copyReferralBTN {
    width:7%;
    margin:0 1% 0 0;
    border: 0;
    padding: .5%;
    cursor:pointer;
    outline: 0;
    background: #333333;
    color:#fff;    
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
#copyReferralBTN:hover,.orderModal-footer a:hover,.manageCouponDiv button:hover,#couponModal button:hover,.btnContainer > button:hover,.btnContainer > input[type="submit"]:hover { 
    background: #545454;

}
.manageCouponDiv {
    margin: 1% auto;
    text-align:center;}
.manageCouponDiv button {
    border: 0;
    background: #232323;
    color: #fff;
    padding: 1%;
    font-size: 16px;
    font-weight: bold;
    margin: 1% .5%;
    width: fit-content;
    outline:none;
    cursor:pointer;
} 
#couponModal .left input, #couponModal .right input {
    width: 100%;
    padding: 2%;
    outline: none;
    border: 1.5px solid #c5c5c5;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
} 
#couponModal button {
    display: block;
    background: #333333;
    color: #fff;
    padding: 1.5% 5%;
    cursor: pointer;
    border:0;
    margin:1% auto;
    outline: 0;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
 
}
.settingsLeftContainerParent{
    width: 40%;
    display: block;
    float: left;
    margin: auto 1% auto 2%;
}
.settingsLeftContainer {
    background: #fff;
    width: 100%;
    display: block;
    text-align: center; 
    font-size: 16px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom:3%;
    position: relative;
}
#settingsConfirmationOverlay {
    position: absolute;
    background: rgba(0,0,0,.8);
    width: 100%;
    height: 100%;
    top: -100%;
    z-index: -1;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.showConfirmationOverlay {
    top: 0 !important;
    z-index:10 !important;
}
.alertContainer .alertContQuestion {
    display: block;
    margin-bottom: 2%;
    font-weight: bold;
}
.alertContainer button {
    cursor: pointer;
}
.alertContainer {
    font-size: 18px;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #fff;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.avatarParentContainer {
    background:#232323;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#updateDetailsStatus {
    position: absolute;
    color: #fff;
    width: 75%;
    margin-top: 0%;
    left: 50%;
    transform: translateX(-50%);
}
.avatarParentContainer i {
    color:#fff;
    position: absolute;
    right:0;
    top:0;
    font-size: 30px;
    cursor: pointer;
    padding: 3%;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
.avatarParentContainer i:hover {
    color:#acacac; 
}
.avatarParentContainer #avatar {
    width: fit-content;
    display: block;
    margin: auto;
    padding: 10% 10% 14% 10%;
}
.avatarParentContainer #avatar #avatarIMG {
    border-radius: 50%;
    border: 5px solid #fff;
    width:130px;
    height:130px;
}
.avatarParentContainer #avatar #uploadAvatar {
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    width: 119px;
    height: 121px;
    position: absolute;
    top: 49%;
    right: 50%;
    overflow: hidden;
    opacity:0;
    z-index:-1;
    transition:.3s ease-in-out;
    -webkit-transition:.3s ease-in-out;
    -moz-transition:.3s ease-in-out;
    -ms-transition:.3s ease-in-out;
    -o-transition:.3s ease-in-out;
    transform: translate(50%,-60%);
    -webkit-transform: translate(50%,-60%);
    -moz-transform: translate(50%,-60%);
    -ms-transform: translate(50%,-60%);
    -o-transform: translate(50%,-60%);
}
.avatarParentContainer #avatar #uploadAvatar i {
    color:#fff;
    position: absolute;
    right:50%;
    top:50%;
    font-size: 30px;
    cursor: pointer;
    padding: 3%;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transform: translate(50%,-50%);
    -webkit-transform: translate(50%,-50%);
    -moz-transform: translate(50%,-50%);
    -ms-transform: translate(50%,-50%);
    -o-transform: translate(50%,-50%);
}
.showAvatarUpdate {
    z-index: unset !important;
    opacity:1 !important;

}
.settingsTable {
    width: 100%;
    font-size: 18px;
}
.settingsTable > thead > tr > th {    
    padding: 1% 0;
}
.settingsTable > tbody > tr > td { 
    padding: 0 0 2% 0;
    position: relative;
    text-align: center;
}
#updatePassword,#updatePasswordConfirm {
    display:block;
    width: fit-content;
    text-align: left;
    margin: auto;
}
.settingsTable > tbody > tr > td > input:not(:disabled),.settingsTable > tbody > tr > td > textarea {
    width: 90%;
    padding: 2% 5%;
    border-radius: 20px;
    border: 0;
    outline: 0;
    outline: none;
    border: 1.5px solid #c5c5c5;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px; 
}
.settingsTable > tbody > tr > td > input:disabled {
    background: transparent;
    border: 0;
    font-size: inherit;    
    width: 100%;
    margin: auto;
    display: block;
    text-align: center;
}
.settingsTableEmailUserName > tbody > tr > td > span {
   color:#efefef;
}
.settingsTableEmailUserName {
    position:absolute;
    bottom: 0;
    color:#fff;
    text-align:center;
}
.settingPasswordHeader,.settingSecurityQuestionHeader {
    text-align:left;    
    font-size: 16px;
    margin-left: 7%;
    display: block;
    width: fit-content;
}
.showHideSensitive {
    position: absolute;
    right: 8%;
    top: 50%;
    cursor: pointer;
    transform: translateY(-80%);
    -webkit-transform: translateY(-80%);
    -moz-transform: translateY(-80%);
    -ms-transform: translateY(-80%);
    -o-transform: translateY(-80%);
}
.btnContainer {
    padding-bottom: 5%;
}
.btnContainer > button,.btnContainer > input[type="submit"] {
    display: block;
    background: #333333;
    color: #fff;
    padding: 1.5% 5%;
    cursor: pointer;
    border: 0;
    margin: 1% auto;
    outline: 0;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.settingsRightContainerParent{
    width: 54%;
    display: block;
    float: left;
    margin: auto 1% auto 2%;
}
.settingsRightContainer {
    background: #fff;
    width: 100%;
    display: block;
    text-align: center; 
    font-size: 16px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    border-radius: 10px;
    margin-bottom:3%;
}
.settingsTable > tbody > tr > td select {
    width: 90%;
    padding: 2% 5%;
    outline: none;
    border: 1.5px solid #c5c5c5;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;    
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 14px; 
}
.settingsTable > tbody > tr > td select option {
    background-color: #333333;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    color: #ffffff;
    font-size:16px;
}
.avatarUploadProgress {
    position: absolute;
    top: 45%;
    right: 50%;
    transform-origin: center;
    transform: translate(50%,-50%) rotate(-90deg) scaleY(-1);
    -webkit-transform: translate(50%,-50%) rotate(-90deg) scaleY(-1);
    -moz-transform: translate(50%,-50%) rotate(-90deg) scaleY(-1);
    -ms-transform: translate(50%,-50%) rotate(-90deg) scaleY(-1);
    -o-transform: translate(50%,-50%) rotate(-90deg) scaleY(-1);
}
.progressBG,.progressVal {
  fill: none;
}
.progressBG {
  stroke: #ffffff;
}
.progressVal {
  stroke: #f77a52;
  stroke-linecap: round;
}
.reviewRow > td {
    font-size:20px;  
    padding: 2% .5%;
}
.editReview {
    outline:auto;
    cursor:auto !important;
}
.reviewRow > td:last-child > span {
    font-size:35px;   
    margin: 5% 2%;
    cursor:pointer; 
}
.reviewRow > td:nth-child(4) {    
    width: 50%;
    text-align: left !important;
}
.reviewRow > td:nth-child(4)[data-title]:before {
    content:"" !important;
}
.orderdetailsOutterContainer {
    width:80%;
}
.orderdetailsContainer {
    height: 75vh;
    overflow-y: scroll;
}
.orderdetailsContainer > .innerOrderContainer{
    padding:0% 2% 2% 2%;    
    display: block;
    margin: auto;
    overflow: hidden;
}
.orderDetailsItem {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    background: #fff;
    width:23%;
    display:inline-block;
    margin:1%;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.orderDetailsItem > a > img {
    width: 75%;
    display: block;
    margin: auto;
}
.orderDetailsItem:hover {
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.orderDetailsControlContainer {
    padding: 2% 5%;
} 
.orderDetailsControlContainer > input {
    outline: none;
    border: 1px solid #9a9797;
    background: #f2f2f2;
    padding: 1% 3%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 85%;
    float: left;
    border-right: 0px; 
}
.orderDetailsControlContainer > button {
    width: 13%;
    background: #232323;
    outline: 0;
    padding: 1% 4%;
    color: #fff;
    float: left;
    cursor:pointer;
    border: 1px solid #232323;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
.orderDetailsControlContainer > button:hover { 
    background: #256e37; 
}
@media screen and (min-width: 1446px) {
    .orderdetailsOutterContainer {
        width: 80% !important;
    }
}
@media screen and (min-width: 1438px) {
    .overlay span {
        font-size:16px;
        color:#fff;
        display:block;
    }
    .overlay span > span {
        display: unset;
    }
    .detailedview {
        font-size: 16px;
    }
    .searchItemDesktop {
        width:20% !important;
        height: auto !important;
    }
    .deviceTypeSearch {
        padding:2% 4%;
    }
    .desktopSearchResults {        
        width: 95%;
    }
    .showModalDiagContainer {        
        top:20%;
    }    
}
@media screen and (max-width: 1437px) {
    .overlay span {
        font-size:16px;
        color:#fff;
        display:block;
    }
    .overlay span > span {
        display: unset;
    }
    .detailedview {
        font-size: 16px;
    }
    #couponDesc:before{     
        right: 28% !important;
        top: -6%;
    } 
   
} 
@media screen and (max-width: 1400px) {
    .footerContainer {
        width:90%;
    }
    #couponDesc:before{     
        right: 26% !important;
        top: -6%;
    } 
} 
@media screen and (max-width: 1350px) {
    .searchItemDesktop {
        width: 23% !important;
    }
    .deviceTypeSearch {
        font-size:11px;
    }
    .leftStatus {
        font-size:14px;
    }    
} 
@media screen and (max-width: 1300px) {    
    #subTotalDesc:before{    
        left: 3%;
        top: -11%;
    }
    #discountDesc:before{    
        left: 28%;
        top: -11%;
    }
    .userReviewsContainer {
        width:65%;
    }
    .reviewArea {
        width:34%;
    }
    .showModalDiagContainer > .orderModal-dialog { 
        width:75%;
    }
    .orderdetailsOutterContainer {
        width: 80% !important;
    }
} 
@media screen and (max-width: 1245px) {
    .footerContainer {
        width:95%;
    }
    .left img {
        width:100%;
    }
    .loginSignUpContainer {
        height:65%;
    }
    #couponDesc:before{     
        right: 24% !important;
        top: -6%;
    } 
    #subTotalDesc:before{    
        left: 4%;
        top: -11%;
    }
    #discountDesc:before{    
        left: 29%;
        top: -11%;
    }
    .reviewContainer {
        width:90%;
    }     
}  
@media screen and (max-width: 1200px) {
    .orderdetailsOutterContainer {
        width: 90% !important;
    }
}
@media screen and (max-width: 1115px) {
    .searchItemDesktop {
        width: 31% !important;
    }
}
@media screen and (max-width: 1110px) {
    .footerContainer div {
        font-size: 14px;
    }
    .copyright {
        font-size:14px;
    }
    .loginSignUpContainer {
        width:90%;
    }
    #couponDesc:before{     
        right: 22% !important;
        top: -6%;
    }
    #subTotalDesc:before{    
        left: 6%;
        top: -9%;
    }
    #discountDesc:before{    
        left: 31%;
        top: -9%;
    }
    .reviewContainer {
        width:95%;
    }
    .orderdetailsOutterContainer {
        width: 95% !important;
    }
} 
@media screen and (max-width: 1000px) {
    #subTotalDesc:before{    
        left: 8%;
        top: -9%;
    }
    #discountDesc:before{    
        left: 33%;
        top: -9%;
    }
    .detailsRatingBottom div span {
        margin-left:2%;
        font-size: 28px;
    }
} 

@media screen and (max-width: 974px) {  
    .bannerContainer {
        width:95% !important;
    }
    .footerContainer div {
        font-size: 12px;
    }
    .copyright {
        font-size:12px;
    }
    #couponDesc:before{     
        right: 12.5% !important;
        top: -5%;
    }
    #subTotalDesc:before{    
        left: 21%;
        top: -9%;
    }
    #discountDesc:before{    
        left: 44%;
        top: -9%;
    }
    .fieldInfo {
        margin-left: 0;
        width: 250px;
    }
    .reviewArea h4 {
        font-size:16px;
    }
    .detailsRatingBottom div span {
        font-size: 22px;
        margin-left: 2%;
    }
    .reviewBTN {
        font-size: 11px;
        padding: 5% 1%;
    }
    .detailsRatingBottom img {
        width:40px !important;
    }
    #searchResultTitle {
        font-size: 14px;
    }    
    .leftStatus {
        font-size:12px;
    }
    .orderDetailsItem {
        width:31%
    }
}  
@media screen and (max-width: 850px) {
    .overlay span {
        font-size:14px; 
    } 
    .footerContainer div {
        width: 100% !important;
    }
    .footerContainer div div:first-child {
        width: 100% !important;
    }
    .footerContainer div div:nth-child(2){
        width: 43% !important;
    }
    .footerContainer div div:last-child {
        width: 56% !important;
    } 
    .footerContainer div div:first-child h4 {
        text-align: center
    }
    .footerContainer div {
        font-size: 18px;
    }
    .copyright {
        font-size:14px;
    }
    .footerContainer div div:not(:first-child) {
        margin-left:unset;
    }   
    .loginSignUpContainer {
        height: 100%;
        width: 100%;
        margin-top: 5%;
        padding-top: 10%;
        top: -1% !important;
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
    #closeModal {
        top:5%;
    }
    .loginCont, .signUpCont, .forgotPassCont {    
        overflow: scroll;
        height: 100vh;
    }
    .next,.prev { 
        bottom:7%;
        font-size:50px;
    }
    .reviewArea {
        width: 75%;
        margin: auto;
        float: unset;
        margin-bottom: 3%;
    }
    .userReviewsContainer {
        width: 100%;
        margin: auto;
        float: unset; 
    }
    .detailsRatingBottom {
        float: unset;
    }
    .detailsRatingBottom img {
        width: 60px !important;
    }
    .detailsRatingBottom div span {
        font-size:36px;
    }
    .reviewBTN {
        font-size: 16px;
        padding: 2% 1%;
    }    
    .showModalDiagContainer > .orderModal-dialog { 
        width:85%;
    }
} 
 
@media screen and (max-width: 760px) {
    .overlay span {
        font-size:18px; 
    } 
    .detailedview {
        font-size: 14px;
    }     
    #mobileMenu { 
        right:45%; 
    }
    .left, .right {
        width:75%;
        margin: 1% auto;
        float:unset;
    }
    .left img {
        width:50%;
    }
    .right h3 {
        margin:1% 0;
        font-size:18px;
    }
    .sign-in label,.customCB + label, .sign-in a { 
        font-size: 14px;
    } 
    .signUpSelector, .logInSelector {
        width:49%;
    }
    #couponDesc:before{     
        right: 9% !important;
        top: -5%;
    }
    #subTotalDesc:before{    
        left: 21%;
        top: -9%;
    }
    #discountDesc:before{    
        left: 45%;
        top: -9%;
    }
    .fieldInfo {
        margin-top: 1%;
        width: 225px;
    }
    .next { 
        right:0;
    }    
    .leftStatus { 
        width: 90%;
        left: 5%;
        margin-top: 2%;
        font-size: 16px;
        padding: 2% 5%;
    }
    #couponModal .left, #couponModal .right {
        width: 48%;
        margin: 1%;
        float: left;
        display: block;
    }
}
@media screen and (max-width: 720px) {
    .loginSignUpContainer { 
        margin-top: 10%; 
    }
    .leftStatus {  
        font-size: 14px; 
    }    
    .showModalDiagContainer > .orderModal-dialog { 
        width:95%;
    }
}
@media screen and (max-width: 676px) {
    #couponDesc:before{     
        right: 44.5% !important;
        top: -10%;
    }
    #subTotalDesc:before{    
        left: 1%;
        top: -11%;
    }
    #discountDesc:before{    
        left: 28%;
        top: -11%;
    }
    .fieldInfo {            
        margin-top: 1%;
        width: 450px;
        margin-left: 4%;
    }
    #closeModal {
        top: 2%;
    }
}
@media screen and (max-width: 658px) {
    .mobileLoginSignUp div:first-child {        
        margin-top: 18%;
    }
    .left, .right {
        width:85%; 
    }
    .next,.prev { 
        bottom:5%;
    }
    #searchResults .resultsTitle {
        top:9%;
    } 
    .leftStatus {  
        padding:3% 5%;
    }
    
    .orderDetailsItem {
        width:48%
    }     
}
@media screen and (max-width: 620px) {
    .mobileLoginSignUp div:first-child {        
        margin-top: 19%;
    }
    #couponDesc:before{     
        right: 43% !important;
        top: -10%;
    }
    #subTotalDesc:before{    
        left: 15%;
        top: -9%;
    }
    #discountDesc:before{    
        left: 28%;
        top: -15%;
    }
    .loginSignUpContainer { 
        padding: 10% 0 0 0;
    }
    #closeModal {
        top:3%;
    }
    .next { 
        right:-1%;
    }     
    .mobileSearchResultsItem .mobileSearchDetailsCont .mobileSoftwareTitle {
        font-size: 20px;
    }
    .leftStatus {   
        padding: 4% 3%; 
    }
}
@media screen and (max-width: 575px) {
    .overlay span {
        font-size:16px; 
    } 
    #mobileMenu {
        right:40%;
    }
    .mobileMenuList div, .mobileSupportMenu div, .mobileLoginSignUp div:first-child {
        font-size: 22px;
    }
    .left, .right {
        width: 95%; 
    }
    .reviewArea {
        width:100%;
        margin-bottom:5%;
    }
    .sign-in {
        margin: 2%;
    }
}
@media screen and (max-width: 556px) {
    .footerContainer div div:nth-child(2), .footerContainer div div:last-child {
        width: 100% !important;
    }
    .footerContainer div div:nth-child(2) h4, .footerContainer div div:last-child h4 {
        margin: 0 0 1% 0;
        text-align: center;
    }
    .footerContainer div div:last-child {
        margin: 0 0 2% 0; 
    }
    #couponDesc:before{     
        right: 27% !important;
        top: -8%;
    }
    #subTotalDesc:before{    
        left: 13%;
        top: -15%;
    }
    #discountDesc:before{    
        left: 34.5%;
        top: -15%;
    }
    .fieldInfo {            
        margin-top: 1%;
        width: 350px;
        margin-left: 4%;
    }
    .sectionTitle { 
        font-size: 16px; 
    }
    .next { 
        right:-2%;
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .mobileSoftwareTitle {
        font-size: 18px;
    }
}
@media screen and (max-width: 531px) {     
    .bannerContainer div span{
        padding:15px 15px !important;
    }
    .bannerContainer div h4 {
        margin:10% 1% 7% 1%;
    }
    .bannerContainer div {
        margin:1% 0;
    }
    .mobileLoginSignUp div:first-child {        
        margin-top: 20%;
    }
    .left img {
        width: 60%;
    }
    .leftStatus {  
        padding: 6% 3%; 
    }
} 
@media screen and (max-width: 524px) {
    #couponDesc:before{     
        right: 39.5% !important;
        top: -7%;
    } 
    .loginSignUpContainer {
        padding: 12% 0 0 0;
    }
    #close {
        top:4%;
    }
}
@media screen and (max-width: 521px) {
    .bannerContainer div:not(:last-child) h4 {
        padding: 2% 0;
        width: 100%;
    }   
    .bannerContainer div:not(:last-child) {
        display:block; 
    }
    .bannerContainer div:nth-child(3) {
        margin:0;
    }
    .bannerContainer div {
        margin:1% 0 0 0;
    }
    .bottomBanner {
        margin-top: 5%;
    }
}  
@media screen and (max-width: 520px) {
    .overlay span {
        font-size:14px; 
    }  
}
@media screen and (max-width: 500px) {
    .overlay span {
        font-size:18px; 
    } 
    .rating img{
        width:11%;
    }
    .mobileLoginSignUp div:first-child {        
        margin-top: 17%;
    }
    #mobileMenu{ 
        right:30%; 
    } 
    .next { 
        right:-3%;
    }
    .reviewFooterContainer {
        padding-bottom:10%;
    }
    .filterDetails {
        padding: 2% 2% 0 2%;
        display: block;
        margin: auto;
        width: fit-content;
        position: relative; 
    }
    .filterDetails span:last-child {
        position: relative; 
        float: unset;
        display: block;
        margin: auto;
        width: fit-content;
        margin-top: 2%;
        font-size: 14px;
    }   
    #couponModal .left, #couponModal .right {
        width: 99%;
        margin: 1%;
        float: unset;
        display: block;
    }
}
@media screen and (max-width: 475px) {
    .mobileLoginSignUp div:first-child {        
        margin-top: 20%;
    }
    .mobileBreak {
        display: block;
        margin-bottom: 1%;
    }
    .pipe {
        display: none;
    }
    #couponDesc:before{     
        right: 38% !important;
        top: -7%;
    }
    #subTotalDesc:before{    
        left: 10%;
        top: -15%;
    }
    #discountDesc:before{    
        left: 28%;
        top: -15%;
    } 
    .loginSignUpContainer {
        padding: 17% 0 0 0;
    }
    #closeModal {
        top:5%;
    } 
    .mobileSearchResultsItem .mobileSearchDetailsCont { 
        left: 22%;
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan span, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan span {
        font-size: 14px;
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan {
        font-size: 12px; 
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .mobileSoftwareTitle {
        font-size: 16px;
    }
    .deviceTypeMobileSearch {
        font-size: 12px;
    }
    .mobileSearchResultsItem {
        margin:2% auto;
    }
    .orderDetailsItem {
        width:98%
    } 
    .orderDetailsItem > a > img {
        width:50%;
    }

}
@media screen and (max-width: 430px) {
    .leftStatus {  
        padding: 5%;  
    }
}
@media screen and (max-width: 425px) {
    .mobileLoginSignUp div:first-child {        
        margin-top: 21%;
    }
    .next,.prev { 
        bottom:4%;
    }
    .next { 
        right:-4%;
    }
    .filterDetails span:nth-child(2) {
        margin-left:unset; 
    }
    .filterDetails {
        padding: 5% 1% 0 1%;
    }
    .filterDetails span:last-child {
        margin-top:5%;
    }
    .detailsRatingBottom img {
        width: 50px !important;
    }
    .detailsRatingBottom div span {
        font-size:30px;
    }
    .reviewBTN {
        font-size:14px;
    } 
    .loginSignUpContainer {
        padding: 20% 0 0 0;
    }
    #closeModal {
        top:6%;
    } 
}
@media screen and (max-width: 400px) {
    .mobileLoginSignUp div:first-child {        
        margin-top: 19%;
    }
    #mobileMenu{ 
        right:20%; 
    }
    #couponDesc:before{     
        right: 27.5% !important;
        top: -8%;
    }
    #subTotalDesc:before{    
        left: 13%;
        top: -15%;
    }
    #discountDesc:before{    
        left: 34%;
        top: -15%;
    }
    .fieldInfo {            
        margin-top: 2%;
        width: 300px;
        margin-left: 4%;
    }
    .next,.prev { 
        bottom:8%;
        font-size:40px;
    }
    .next { 
        right:-2%;
    }
    .filterDetails span:last-child {
        position: relative;
        top: 25%;
        float: unset;
    }
    .reviewFooterContainer {
        padding-bottom:12%;
    } 
    .mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan span, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan span {
        font-size:12px;
    }
    .leftStatus {  
        padding: 6% 3%; 
        font-size:13px;
    }
}
@media screen and (max-width: 375px) {
    .overlay span {
        font-size:14px; 
    } 
    .rating img{
        width:9%;
    }
    .mobileLoginSignUp div:first-child {        
        margin-top: 22%;
    }
    #mobileMenu{ 
        right:18%; 
    }
    .mobileLoginSignUp div:first-child {        
        margin-top: 20%;
    }    
    .left img {
        width: 75%;
    }
    .mobileLoginSignUp div:first-child {        
        margin-top: 20%;
    }
    .loginSignUpContainer {
        padding: 25% 0 0 0;
    }
    #closeModal {
        top:7%;
    } 
    .leftStatus {  
        padding: 8% 3%;          
        width: 95%;
        left: 2.5%;
    }
} 
 
@media screen and (max-width: 360px) {
    .mobileLoginSignUp div:first-child {        
        margin-top: 22%;
    }
    .reviewArea h4 {
        font-size: 14px;
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .mobileSoftwareTitle {
        font-size: 14px;
    }

}
 
@media screen and (max-width: 345px) {
    #couponDesc:before{     
        right: 12% !important;
        top: -7%;
    }
    #subTotalDesc:before{    
        left: 17%;
        top: -15%;
    }
    #discountDesc:before{    
        left: 42%;
        top: -11%;
    }
    .fieldInfo {            
        margin-top: 2%;
        width: 250px;
        margin-left: 4%;
    }
    .next { 
        right:-3%;
    }
    .reviewFooterContainer {
        padding-bottom:15%;
    }
    .detailsRatingBottom img {
        width: 40px !important;
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan span, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan span {
        font-size: 11px;
    }
    .mobileSearchResultsItem .mobileSearchDetailsCont .durationSpan, .mobileSearchResultsItem .mobileSearchDetailsCont .priceSpan {
        font-size: 11px; 
    }
    .deviceTypeMobileSearch {
        font-size: 11px;
    }
    .loginSignUpContainer {
        padding: 30% 0 0 0;
    }
    #closeModal {
        top:8%;
    } 
    .leftStatus {  
        font-size:12px;
    }
}