/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: #666666;
  font-family: "brandon-regular", sans-serif;
  overflow-x: hidden;
  background-color: rgba(110, 2, 232, 0.9);
}
.dalla-promo{
  text-align:end
}.loyalty-in-cloud{
  text-align: left;
}
a {
  text-decoration: none;
  color: #909090;
}

a:hover, a:active, a:focus {
  color: #484848;
  outline: none;
  text-decoration: none;
}
p {
  padding: 0;
}
/*#in-logo{
    position: absolute;
    margin-top: -0.4%;
    left:  86%;
    width: 1.8%;
}
#lang{
  position: absolute;
    margin-top: -0.7%;
    left: 88%;
    width: 4.5%;
}*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}
ol{
  padding-left: 1rem !important;
}
button{
  border: 0;
}
button:hover{
  background:  #21cfb7;
}
@font-face {
  font-family: 'brandon-regular';
  src: url("/fonts/Brandon_reg.otf");
  font-style: normal;
}
@font-face {
  font-family: 'brandon-black';
  src: url("/fonts/Brandon_blk.otf");
  font-style: normal;
}
@font-face {
  font-family: 'brandon-bold';
  src: url("/fonts/Brandon_bld.otf");
  font-style: normal;
}
@font-face {
  font-family: 'brandon-medium';
  src: url("/fonts/Brandon_med.otf");
  font-style: normal;
}
@font-face {
  font-family: 'brandon-thin';
  src: url("/fonts/Brandon_thin.otf");
  font-style: normal;
}
@font-face {
  font-family: 'brandon-light';
  src: url("/fonts/Brandon_light.otf");
  font-style: normal;
}
.brandon-regular{
  font-family: 'brandon-regular', sans-serif !important;
}
.brandon-thin{
  font-family: 'brandon-thin', sans-serif !important;
}
.brandon-black{
  font-family: 'brandon-black', sans-serif !important;
}
.brandon-bold{
  font-family: 'brandon-bold', sans-serif !important;
}
.brandon-medium{
  font-family: 'brandon-medium', sans-serif !important;
}
.brandon-light{
  font-family: 'brandon-light', sans-serif !important;
}
b{
  font-family: 'brandon-bold';
}
p{
  font-family: 'brandon-light';
}
.fixed-top{
  position: absolute !important;
}
.font-10{
  font-size: 10px;
}
.font-12{
  font-size: 12px;
}
.font-16{
  font-size: 16px;
}
.font-20{
  font-size: 20px;
}
.font-29{
  font-size: 29px;
}
.font-30{
  font-size: 30px;
}
.font-40{
  font-size: 40px;
}
.font-50{
  font-size: 50px;
}
.font-66{
  font-size: 66px;
}
.color-ciano{
  color: #25e8ce;
}
.bg-ciano{
  background: #25e8ce;
}
.color-white{
  color: white;
}
.bg-white{
  background:  white;
}
.color-purple{
  color:  #6e02e8;
}
.color-orange{
  color: #e9500e;
}
.color-darkgrey{
  color:  #222222;
}
.bg-darkgrey{
  background:  #222222;
}
.color-gray{
  color:  #909090;
}
.color-grey{
  color:#222222;
}
.bg-purple{
  background:  #310869;
}
.bg-purple-faded{
  background: #6e02e8;
}
.bg-lightgray{
  background: #ededed;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
}
.bold{
  font-weight: bold;
}

/* Track */
::-webkit-scrollbar-track {
    background: #984fea; 
    border-radius: 30px;
    width: 50%;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: white; 
    border-radius: 30px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: ; 
}
.display{
  display: flex !important;
}
.no-display{
  display: none !important;
}
#mouse{
  position: absolute;
  width: 3%;
  top:  75%;
}
#trattino{
  position: absolute;
  width: 3%;
  top:  75%;
  transition: 0.5s;
}
#trattino:hover{
  top:  80%;
  transition: 0.5s;
}
.title{
    margin-top: 20%;
  }
.slideRight{
    -webkit-animation: ease-out;
  -webkit-animation-name: slideRight;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode:  forwards;
}
@keyframes slideRight{
  0%{
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px)
    }
    100%{
        -webkit-transform:translateX(10vw);
        -ms-transform:translateX(10vw);
        transform:translateX(10vw)} 
}
.show-on-desktop{
  display: block;
}
.show-on-mobile{
  display: none;
}
.show-on-mobile-768{
      display: none !important;
    }
@keyframes bannermove{
  0%{transform: translate(0,0);}
  100%{transform: translate(-50%,0);}
}
.photobanner{
  white-space: nowrap;
  animation: bannermove 60s linear infinite;
  overflow: hidden !important;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: url(../img/hero-bg.jpg) top center;
  /*background-size: cover;*/
  position: relative;
}
@media (max-width: 1199px) {
  .font-14 {
    font-size: 12px;
  }
    #in-logo{
    width: 28%!important;
  }
  #lang{
      width: 65%!important;
  }
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}
#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.wellcome-section{
  background-image: url(/img/bg.png);
  background-size: cover;
  padding-bottom: 10%;
  padding-top: 10%;
}
.color-underlayer{
  background-color: rgb(110, 2, 232);
  height: 100vh;
    position: absolute;
    top: 0;
    width: 100%;
}
.color-underlayer-demo{
  background-color: rgb(110, 2, 232);
    min-height: 100vh;
    position: absolute;
    top: 0;
    width: 100%;
}
.from-conversion-to-loyalty-section{
  background: rgba(49, 8, 105);
}
#hero h1 {
  margin: 30px 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
    .dalla-promo{
    text-align:center!important
    }
  .loyalty-in-cloud{
    text-align: center!important;
  }
  .loyalty{
    width: 50%;
  }
}
#hero h2 {
  color: #eee;
  margin-bottom: 50px;
  font-size: 24px;
}
@media (max-width: 768px) {
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
  .color-underlayer-demo{
  background-color: rgb(110, 2, 232);
    min-height: 100vh;
    position: absolute;
    top: 0;
    width: 100%;
}
}
#hero .btn-get-started {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}
#hero .btn-get-started:hover {
  background: #2dc997;
  border: 2px solid #2dc997;
}
/****************************
 * MEDIA QUERIES
 ***************************/
 @media(max-width: 991px){
  .show-on-desktop{
  display: block !important;
    }
  .show-on-mobile{
    display: none !important;
  }
  .show-on-mobile-768{
      display: none !important;
    }
}
@media(max-width: 768px){
  .show-on-desktop{
  display: none !important;
    }
    .show-on-mobile-768{
      display: block !important;
    }
      .show-on-mobile{
    display: block !important;
  }
  #mouse{
  position: absolute;
  width: 4%;
  top:  75%;
  left: 50%;
  }
  #trattino{
    position: absolute;
    width: 4%;
    top:  75%;
    transition: 0.5s;
    left: 50%;
  }
  #trattino:hover{
    top:  80%;
    transition: 0.5s;
  }
  .title{
    margin-top: 33%;
  }
}
@media(max-width: 576px){
  #mouse{
  width: 5%;
  }
  #trattino{
    width: 5%;
  }
  .font-12 {
    font-size: 14px;
  }
  #in-logo{
    width: 25%!important;
  }
  #lang{
      width: 58%!important;
  }
}
@media(max-width: 487px){
#mouse{
  position: absolute;
  width: 8%;
  top:  80%;
  left: 50%;
  }
  #trattino{
    position: absolute;
    width: 8%;
    top:  80%;
    transition: 0.5s;
    left: 50%;
  }
  #trattino:hover{
    top:  80%;
    transition: 0.5s;
  }  
}

.hero-container .container .row > div {
  margin-bottom: 2rem;
}
.hero-container img.logo {
  max-width: 25%;
  margin-bottom: 1rem;
}