@media (min-width: 200px) {
    .contact-btn {
        text-align: center;
    }
    .logo-position {
        text-align: center;
    }
    .queries-pd-top {
        padding-top: 40px;
    }
    .logo-pd-top {
        padding-top: 20px;
    }
    .better {
        text-align: center;
        line-height: 1.0;
    }
    .sbs {
        line-height: 1.15;
        text-align: center;
        padding-top: 15px;
    }
    .btn-spotpos {
        text-align: center;
        padding-bottom: 20px;
    }
    .btn-support {
        text-align: center;
        padding-bottom: 20px;
    }
    .btn-general {
        text-align: center;
    }
    .comp-users {
        text-align: center;
        line-height: 1.0;
    }
    .foot-font {
        font-size: 12px;
    }
    .girl-hide {
        display: none;
    }
    .bg-spots {
        background-image: linear-gradient(to right, #f4bd46, #f4d846, #f4bd46);
        background-repeat: no-repeat;
        background-size: 100% 100%; 
        height: 240px;
    }

}

@media (min-width: 992px) {
    .contact-btn {
        text-align: right;
    }
    .logo-position {
        text-align: left;
    }
    .queries-pd-top {
        padding-top: 100px;
    }
    .logo-pd-top {
        padding-top: 0px;
    }
    .better {
        text-align: left;
        line-height: 1.5;
    }
    .sbs {
        line-height: 1.25;
        text-align: left;
    }
    .btn-spotpos {
        text-align: left;
        float: left;
        padding-right: 20px;
    }
    .btn-support {
        text-align: left;
        float: left;
        padding-right: 20px;
    }
    .btn-general {
        text-align: left;
    }
    .comp-users {
        text-align: left;
    }
    .foot-font {
        font-size: 14px;
    }
    .girl-hide {
        display: block;
    }
    .bg-spots {
        background-image: url('../img/mobile-app/Header_BG_1920x240.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%; 
        height: 240px;
    }
}

body {
    font-family: 'Open Sans', sans-serif;
}

/*chat button*/
.feedback {
    background-color: #000;
    color: #fff;
    padding: 0px;
    border-radius: 30px;
    border-color: #fff;
    font-size: 20px;
    width: 50px;
    height: 50px;
}

.feedback:hover {
    background-color: #f4bd46;
    color: #fff;
    padding: 0px;
    border-radius: 30px;
    border-color: #fff;
    font-size: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#mybutton {
    position: fixed;
    bottom: 15px;
    right: 30px;
    z-index: 9999;
}
/*chat button*/

.btn-outline-dark:hover {
    background-color: #000;
}

.bg-clr-yellow {
    background-image: linear-gradient(to right, #f4bd46, #f4d846, #f4bd46);
    /*background-color: #f4d846;*/
}

.bg-yellow {
    background-color: #f4d846;
    background-image: url("https://www.spotpos.com/img/home/Mock_Background_1920x947.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

.bg-yellow-new {
    background-color: #f4d846;
    background-image: url("https://www.spotpos.com/img/home/Background_1920x947.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}
.bg-grey {background-color: #F8F8F8;}
.bg-black {background-color: #000;}

.bg-img-1 {
    background-image: url("https://www.spotpos.com/img/home/CTA_640x250-1.png");
    background-repeat: no-repeat;
    /*background-size: 100%;*/
}

.bg-img-2 {
    background-image: url("https://www.spotpos.com/img/home/CTA_640x250-2.png");
    background-repeat: no-repeat;
    /*background-size: 100%;*/
}

.bg-img-3 {
    background-image: url("https://www.spotpos.com/img/home/CTA_640x250-3.png");
    background-repeat: no-repeat;
    /*background-size: 100%;*/
}

.bdr-features {
    border: 1px solid #dcdcdc; 
    border-radius: 5px; 
    padding: 30px 30px 20px 30px;
    margin-bottom: 15px;
    color: #000;
    text-decoration: none;
}

.thebox a {
    text-decoration: none;
}

.bdr-features:hover {
    /*background-color: yellow;*/
    background: linear-gradient(to bottom right, #f4d846, #f4bd46);
}

.bdr-footer {
    border: 1px solid #fff;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
}

.footer-links a:hover {
    color: #5a5a5a;
}

.bdr-new {
    border-bottom: 1px solid #d5d5d5;
}

.bdr-top-gray {
    border-top: 1px solid #dcdcdc;
}

.bdr-btm-gray {
    border-bottom: 1px solid #dcdcdc;
}

.bdr-yellow1 {
    border: 1px solid #f4bd46;
}

.quicksand-bold {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
}

.quicksand-reg {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
}

.open-sans {
    font-family: 'Open Sans', sans-serif;
}

.font-12 {font-size: 12px;}
.font-14 {font-size: 14px;}
.font-15 {font-size: 15px;}
.font-16 {font-size: 16px;}
.font-18 {font-size: 18px;}
.font-20 {font-size: 20px;}
.font-24 {font-size: 24px;}
.font-26 {font-size: 26px;}
.font-28 {font-size: 28px;}
.font-32 {font-size: 32px;}
.font-40 {font-size: 40px;}
.font-45 {font-size: 45px;}
.font-50 {font-size: 50px;}
.font-60 {font-size: 60px;}

.text-decor-none a {
	text-decoration: none !important;
}

.text-justify {
	text-align: justify;
}

.ln-hgt-0-5 {line-height: 0.5em;}
.ln-hgt-0-9 {line-height: 0.9em;}
.ln-hgt-1-0 {line-height: 1.0em;}
.ln-hgt-1-15 {line-height: 1.15;}
.ln-hgt-1-2 {line-height: 1.2em;}
.ln-hgt-1-5 {line-height: 1.5em;}
.ln-hgt-1-7 {line-height: 1.7em;}
.ln-hgt-2-0 {line-height: 2.0em;}

.ls-2 {letter-spacing: 2px;}

.clr-yellow1 {color: #f4bd46;}
.clr-yellow2 {color: #f4d846;}
.clr-yellow2-u {color: #f4d846; text-decoration: underline;}
.clr-lite-grey {color: #dcdcdc;}
.clr-white {color: #fff;}
.clr-black {color: #000;}
.clr-gray {color: #5a5a5a;}
.clr-red {color: red;}

.bg-clr-red {background-color: #da2f37;}
.bg-clr-grey {background-color: #dcdcdc;}

.pd-0 {padding: 0px;}
.pd-10 {padding: 10px;}
.pd-20 {padding: 20px;}
.pd-30 {padding: 30px;}
.pd-50 {padding: 50px;}
.pd-65 {padding: 65px;}
.pd-10-35 {padding: 10px 35px;}

.pd-top-5 {padding-top: 5px;}
.pd-top-10 {padding-top: 10px;}
.pd-top-15 {padding-top: 15px;}
.pd-top-20 {padding-top: 20px;}
.pd-top-21 {padding-top: 21px;}
.pd-top-25 {padding-top: 25px;}
.pd-top-30 {padding-top: 30px;}
.pd-top-35 {padding-top: 35px;}
.pd-top-40 {padding-top: 40px;}
.pd-top-45 {padding-top: 45px;}
.pd-top-50 {padding-top: 50px;}
.pd-top-55 {padding-top: 55px;}
.pd-top-60 {padding-top: 60px;}
.pd-top-65 {padding-top: 65px;}
.pd-top-70 {padding-top: 70px;}
.pd-top-75 {padding-top: 75px;}
.pd-top-80 {padding-top: 80px;}
.pd-top-85 {padding-top: 85px;}
.pd-top-90 {padding-top: 90px;}
.pd-top-100 {padding-top: 100px;}
.pd-top-120 {padding-top: 120px;}
.pd-top-130 {padding-top: 130px;}
.pd-top-150 {padding-top: 150px;}
.pd-top-250 {padding-top: 250px;}

.pd-tb-2 {padding-top: 2px; padding-bottom: 2px;}
.pd-tb-50 {padding-top: 50px; padding-bottom: 50px;}
.pd-tb-80 {padding-top: 80px; padding-bottom: 80px;}
.pd-tb-90 {padding-top: 90px; padding-bottom: 90px;}

.pd-btm-0 {padding-bottom: 0px;}
.pd-btm-5 {padding-bottom: 5px;}
.pd-btm-10 {padding-bottom: 10px;}
.pd-btm-15 {padding-bottom: 15px;}
.pd-btm-20 {padding-bottom: 20px;}
.pd-btm-30 {padding-bottom: 30px;}
.pd-btm-35 {padding-bottom: 35px;}
.pd-btm-50 {padding-bottom: 50px;}
.pd-btm-55 {padding-bottom: 55px;}
.pd-btm-65 {padding-bottom: 65px;}
.pd-btm-80 {padding-bottom: 80px;}
.pd-btm-85 {padding-bottom: 85px;}

.pd-lr-0 {padding-left: 0px; padding-right: 0px;}
.pd-lr-2 {padding-left: 2px !important; padding-right: 2px !important;}
.pd-lr-15 {padding-left: 15px; padding-right: 15px;}
.pd-lr-20 {padding-left: 20px; padding-right: 20px;}
.pd-lr-30 {padding-left: 30px; padding-right: 30px;}
.pd-lr-50 {padding-left: 50px; padding-right: 50px;}

.pd-l-2 {padding-left: 2px;}
.pd-l-20 {padding-left: 20px;}
.pd-l-50 {padding-left: 50px;}
.pd-l-60 {padding-left: 60px;}

.pd-l20-r50 {padding-left: 20px;padding-right: 50px;}
.pd-l10-r50 {padding-left: 10px;padding-right: 50px;}
.pd-l50-r10 {padding-left: 50px; padding-right: 10px;}
.pd-l50-r20 {padding-left: 50px; padding-right: 20px;}

.mgn-btm-0 {margin-bottom: 0px;}

.width-75 {width: 75%;}
.width-100 {width: 100%;}

.height-45 {height: 45px;}
.height-64 {height: 64px;}

/* CAROUSEL */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 50px;
    width: 50px;
    outline: black;
    background-size: 100%, 100%;
    background-image: none;
}

.carousel-control-next-icon:after {
    content: '>';
    font-size: 30px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: #000;
}

.carousel-control-prev-icon:after {
    content: '<';
    font-size: 30px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: #000;
}

.carousel-indicators {
    bottom: -45px;
    z-index: 0 !important;
}

.carousel-indicators > li {
    background-color: #dcdcdc;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0px 6px;
    margin-top: 290px;
}

.carousel-indicators > .active {
    background-color: #000;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}


/* HAMBURGER */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    /*background-color: #111;*/
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 60px;
    font-size: 36px;
    margin-left: 50px;
}

.whatsnew-home {
    position: absolute;
    top: 14px;
    right: 55px;
    font-size: 14px;
    margin-left: 44px;
}

.whatsnew {
    position: absolute;
    top: 25px;
    right: 100px;
    font-size: 14px;
    margin-left: 44px;
}

.theHoverBox {
    color: red;
}

.theHoverBox:hover {
    background-color: green;
}



/*HOVER NAV MENU*/
#sideNav { 
  font-size:1em;
  width:150px;

}

#sideNav ul {
  margin:0;
  padding:0;
  line-height: 0.5;
}

#sideNav a {
  color: #000;
  /*display:block;*/
  text-indent: -31px;
  width: 100%;
  /*height:25px;*/
  /*line-height:25px;*/
  font-size: 14px;
}

#sideNav a:hover {
  color: #fff;
  background-color: #000;
}

h2.topm {
  font-size:1.2em;
  color:#99002A;
  border-bottom:3px solid #333333;
}
ul.top {
  background:white;
  
}
ul.top li a {
  text-decoration:none;
}
#sideNav li {
  list-style: none;
  width: 250px;
}
#sideNav li:hover {
  position:relative;
}

ul.sub {
  visibility:hidden;
  display:none;
  -webkit-transition-property:opacity, margin-top, visibility, margin-left; 
  -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  -moz-transition-property:opacity, margin-top, visibility, margin-left; 
  -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  -o-transition-property:opacity, margin-top, visibility, margin-left; 
  -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  transition-property:opacity, margin-top, visibility, margin-left; 
  transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  
}

li:hover .sub {
  background:#ededed;
  visibility:visible;
  display:block;
  position: absolute;
  opacity:1;
  left: 90px;
  top: 5px;
  width:225px;
  z-index: 9999;
  
}
ul.sub li {
  background:#ededed;
  border: none;
  float:left;
  width:225px;
  margin-left:10px;
  
}

/*RESET STYLES*/
li:hover .sub .sub {
  visibility:hidden;
  display:none;
}
.sub li:hover .sub {
  visibility:visible;
  display:block;
}

li.level {
  position:relative;
}

/*li.level > a:after {
  content:"";
  width:0px;
  height:0px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #99002A;
  position:absolute;
  top: 12px;
  right:55px;  
}*/


.btn-hover-gray:hover {
  background-color: #5a5a5a !important;
}

.bdr-features > .gray-to-black {
  color: #5a5a5a;
}

.bdr-features:hover > .gray-to-black {
  color: #000;
}

.bdr-features-mob {
  border: 1px solid #dcdcdc; 
  border-radius: 5px; 
  padding: 30px 30px 20px 30px;
  margin-bottom: 15px;
  color: #000;
  text-decoration: none;
}

.bdr-features-mob:hover {
  color: #000;
  -webkit-box-shadow: 1px 2px 2px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 2px 2px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 2px 2px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.bdr-features-mob > .gray-to-black {
  color: #5a5a5a;
}

.bdr-features-mob:hover > .gray-to-black {
  color: #000;
}

.bdr-contact {
  border: 1px solid #dcdcdc; 
  border-radius: 5px; 
  padding: 15px 30px 20px 30px;
  margin-bottom: 15px;
  color: #000;
  text-decoration: none;
}

.bdr-contact:hover {
  color: #000;
  -webkit-box-shadow: 1px 2px 2px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 2px 2px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 2px 2px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.bdr-contact > .gray-to-black {
  color: #5a5a5a;
}

.bdr-contact:hover > .gray-to-black {
  color: #000;
}

/*.bg-spots {
  background-image: url('../img/mobile-app/Header_BG_1920x240.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%; 
  height: 240px;
}*/

/*.top-header {
  position: relative;
  text-align: center;
}*/

.center-this {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mob-app-height {
  height: 260px;
}

.mob-asset-height {
  height: 180px;
}

.contact-box-height {
  height: 220px;
}

.nav-tabs .nav-link.active {
  color: #000;
  /*background-color: #fff;*/
  border-color: #fff #fff;
  border-bottom: 5px solid #f4bd46;
}

.app-gallery:hover {
  border: 1px solid #000;
}

.img-check ul, .img-check-ots {
    list-style-image: url('../img/credit-gift-card-management/Checkmark_20x20.png');
}

.img-check ul li {
    padding-left: 20px;
    line-height: 1.7;
    font-size: 14px;
    text-align: justify;
    color: #5a5a5a;
}

.img-check-ots ul li {
    padding-left: 20px;
    line-height: 1.7;
    font-size: 14px;
    color: #5a5a5a;
}

.img-check-new ul li {
    font-size: 14px;
    color: #5a5a5a;
}

.img-check ul li:not(:first-child), .img-check-ots ul li:not(:first-child) {
    padding-top: 25px;
}

.cgc-hr {
    border-bottom: 1px solid #dcdcdc; 
    width: 60px;
}

.clearent-sales {
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}

.clearent-sales:hover {
    color: #dcdcdc;
    font-weight: bold;
    text-decoration: underline;
}

.merge-contact {
    border-radius: 30px; 
    padding: 10px 40px; 
    background-color: #000;
}

.merge-contact:hover {
    color: #000;
    border-radius: 30px; 
    padding: 10px 40px;
    background-color: #f4bd46;
}

.merge-spot {
    border-radius: 30px; 
    border: none; 
    padding: 10px 40px; 
    background-color: #f4bd46; 
    color: #000;
}

.merge-spot:hover {
    border-radius: 30px; 
    border: none; 
    padding: 10px 40px; 
    background-color: #000; 
    color: #fff;
}

.merge-support {
    border-radius: 30px; 
    padding: 10px 40px; 
    background-color: #000;
}

.merge-support:hover {
    color: #000;
    border-radius: 30px; 
    padding: 10px 40px;
    background-color: #f4bd46;
}

.merge-general {
    border-radius: 30px; 
    padding: 10px 40px; 
    background-color: #000;
}

.merge-general:hover {
    color: #000;
    border-radius: 30px; 
    padding: 10px 40px;
    background-color: #f4bd46;
}

.merge-buttons a {
    text-decoration: none;
}

.net-serv-brdr {
    border-left: 1px solid #fff; 
    border-right: 1px solid #fff;
}

.open-nav {
    font-size: 30px; 
    cursor: pointer;
}

.abt-bdr {
    border: 1px solid #d3d3d3;
    padding-bottom: 18px;
    border-radius: 6px;
}

.abt-bdr img {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.nav-title-brdr-btm {
    border-bottom: 1px solid #5a5a5a;
}

.btn-partners {
    background-color: transparent;
    font-size: 20px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    padding-left: 14px;
}

.btn-partners:hover {
    background-color: transparent;
    font-size: 20px;
    color: #f4d846;
    /*color: #f4bd46;*/
}

.card-partners {
    padding: 5px 0px 5px 5px;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-paras {
    flex: 1 1 auto;
    padding: 1.25rem;
    font-size: 14px;
    color: #5a5a5a;
}

.links-new {
    color: #f4bd46;
}

.contact-bdrs {
    border: 1px solid #d5d5d5; 
    padding: 20px 20px; 
    border-radius: 10px;
    font-size: 12px;
}

.contact-forms-bdrs {
    border: 1px solid #d5d5d5; 
    padding: 50px; 
    border-radius: 10px;
}

.news-hov a {
    color: #000;
}

.news-hov a:hover {
    color: #f4bd46;
}

.events-hov img:hover {
    border: 1px solid #f4bd46;
}

.support-info a {
    color: #f4bd46;
}

.btn-contact {
    border-radius: 15px; 
    padding: 10px 40px; 
    background-color: #000;
}

.btn-contact:hover {
    color: #000;
    border-radius: 15px; 
    padding: 10px 40px;
    background-color: #f4bd46;
}

label {
    font-weight: bold;
}

/*STATUS PAGE START*/

.net-td td {
    vertical-align: middle;
    font-size: 14px;
}

.net-td .net-icons {
    text-align: center;
    font-size: 24px;
    padding: 0px;
}

.fa-check-circle {
    color: green;
}

.fa-times-circle {
    color: red;
}

.fa-exclamation-circle {
    color: #f4d846;
}

/*STATUS PAGE END*/