/*! CSS Used from: https://palomino.webpal.net/css/app.css */
body > header > div.pt-8.bg-brand-700 > div > div.px-4.sm\:px-6 > div > div.flex.justify-start > a > img{
    height:4rem;
}
#home-banner > div > div.flex.items-center.w-full.h-full > div > div > div > div.mt-3.text-base.text-gray-100.lg\:max-w-xl > div > div.font-display.font-semibold.mb-6.md\:text-5xl.text-4xl.text-white.xl\:text-6xl > h1{
    font-size:70px;
}
@media (max-width: 1024px) {
    #home-banner > div > div.flex.items-center.w-full.h-full > div > div > div > div.mt-3.text-base.text-gray-100.lg\:max-w-xl > div > div.font-display.font-semibold.mb-6.md\:text-5xl.text-4xl.text-white.xl\:text-6xl > h1{
    font-size:50px;
}
}


.plans-holder {
    position: relative;
    z-index: 1;
}

.card-item {
    padding: 16px;
    background: #FFFFFF;
    border-radius: 8px;
    position: relative;
}

@media (min-width: 1024px) {
    .card-item {
        padding: 40px;
    }
}

.card-item:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    right: -8%;
    border-radius: 8px;
    bottom: -22px;
    background: #285BAE;
    border-radius: 8px;
    z-index: -1;
}

.card-item:nth-child(2):after {
    background: #CA5B41;
}

.plans-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 20px;
}

@media (min-width: 1024px) {
    .plans-wrapper {
        padding: 0;
    }
}

.plans-wrapper:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-image: url('templates/{$template}/img/dots.svg');
    background-position: right;
    background-repeat: no-repeat;
}

.plan-wrapper-title {
    max-width: 780px;
    margin: auto;
    margin-bottom: 72px;
}

.plan-heading {
    margin-top: 24px;
}

.plan-content {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #5E6A75;
    margin-top: 32px;
}

.plan-item {
    padding-bottom: 10px;
}

.plan-item-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #4B555E;
    margin-left: 8px;
}

.plan-items {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ECECEC;
}

.plan-button {
    margin-top: 28px;
}

.plan-button a {
    width: 100%;
    display: block;
    width: 100%;
    text-align: center;
}

.plans-holder {
    gap: 80px;
}

.plan-users {
    font-weight: 400;
    font-size: 17px;
    color: #888A8E;
    margin-left: 8px;
}


/* ----- TOUR ---- */
/*! CSS Used from: https://palomino.webpal.net/css/app.css */
div.tour {
  padding: 8%;
}
.tour{padding:140px 0;position:relative;background-color:#f9fafb;background-image:url(/templates/kohost-professional/img/application-background.svg);background-repeat:no-repeat;background-position:25% 70%;}
.tour::before{content:"";position:absolute;left:0;bottom:7%;background-repeat:no-repeat;background-position:top right;width:180px;height:172px;}
.tour__wrapper{display:grid;gap:40px; margin-right:auto;
  margin-left:auto;}
@media (min-width: 992px){
    .tour__wrapper{grid-template-columns:repeat(2, 1fr);
    gap:7%;}
}
.tour__content{position:relative;}
.tour__content::after{content:"";position:absolute;right:0;bottom:30%;background-image:url(https://palomino.webpal.net/images/tour-dots.svg?9b6820d74d0a144384b34b0076be6824);background-repeat:no-repeat;background-position:top right;width:240px;height:237px;}
.tour__content h3{margin-top:44px;font-weight:600;font-size:18px;letter-spacing:0.06em;color:#3272d9;position:relative;}
.tour__content h2{margin-top:8px;font-weight:800;font-size:48px;color:#0a172b;position:relative;}
.tour__content p{font-weight:400;font-size:18px;line-height:24px;color:#4b555e;margin-top:10px;position:relative;z-index:1;}
.tour__content-brick{display:flex;justify-content:flex-end;margin-top:100px;position:relative;}
.tour__item{display:flex;margin-bottom:30px;}
.tour__item-image{margin-right:30px; min-width:70px;}
.tour__item h2{font-weight:600;font-size:24px;color:#0a172b;}
.tour__item p{font-weight:400;font-size:16px;line-height:24px;color:#384046;}
.tour__item a{display:flex;text-decoration:none;align-items:center;color:#3272d9;margin-top:16px;}
.tour__item a img{margin-left:10px;}
#applications > div > div{
     margin-right:auto;
  margin-left:auto;
}

/* ---- get starter ----- */
/*! CSS Used from: https://palomino.webpal.net/css/app.css */
.email-input-wrapper{height:56px;}
.email-input-wrapper input{padding-left:32px;color:#FFFF;}
.email-input-wrapper input::-moz-placeholder{color:#84AAE8;}
.email-input-wrapper input:-ms-input-placeholder{color:#84AAE8;}
.email-input-wrapper input::-ms-input-placeholder{color:#84AAE8;}
.email-input-wrapper input::placeholder{color:#84AAE8;}
.email-button{right:3px;}
.email-button button{height:50px; min-width:150px;}
div.bg-brand-800.bg-email-cta.bg-cover{
    background-image:url(/templates/kohost-professional/img/get-started-background.svg);background-repeat:no-repeat;background-position:top right;
}
#get-started > div > div > form > div > div > input{
    height:110%;
}
#get-started > div > div > form > div > div > div{
    margin:0;
}
@media (max-width: 1023px){
    #get-started > div > div > form > div > div > div{
        margin-top:20px;
    }
    #get-started > div > div > form > div > div > div > button > span{
        display:block !important;
    }
}


/*---- service tiers ----*/
div.bg-brand-900.pt-20.pb-20.plans-wrapper {
   background-image:url(/templates/kohost-professional/img/services-tiers-background.svg);background-repeat:no-repeat;background-position:top right;
}
div.bg-brand-900.pt-20.pb-20.plans-wrapper {
  padding-right: 10%;
  padding-left: 10%;
}
/* ----- FOOTER ------ */
body > footer > div > div > div.xl\:grid.xl\:grid-cols-2.xl\:gap-8{
  display: flex;
}
body > footer > div > div > div.xl\:grid.xl\:grid-cols-2.xl\:gap-8 > div.mt-4.mb-8.xl\:mt-0{
  margin-right: auto;
}
footer.bg-gray-800 {
  background-color: #0A172B;
}
@media (max-width: 700px){
    #webpalFooter > div > div > div.xl\:grid.xl\:grid-cols-2.xl\:gap-8{
        display:block;
    }
    #webpalFooter div div.grid.grid-cols-2{
        margin: 20px;
        display: flex;
    }
}
#notificationIcon{
    color:white;
}
.nav-divider{
  display: none;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color:rgba(229, 231, 235);
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li.dropdown > a:after {
color:white;
}
.navbar-nav > li.dropdown ,.dropdown, .notificationDropdown{
  position: relative;
}
.navbar-nav > li.dropdown > a {
  padding-right: 20px;
}
.navbar-nav > li.dropdown > a:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(229, 231, 235);
}
.navbar-nav > li.dropdown > ul ,.dropdown-menu,#notificationPopUp{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width:180px;
}
#notificationPopUp{
    left:-100px;
    width:200px;
    margin-right:auto;
}
.navbar-nav > li.dropdown > ul > li,#notificationPopUp li {
  float: none;
}

.navbar-nav > li.dropdown > ul > li > a{
  color: #757575;
  padding: 10px 18px ;
  text-decoration: none;
  font-size:14px;
}
#notificationPopUp li a ,#notificationPopUp li{
  color: #757575;
  padding: 5px ;
  text-decoration: none;
  font-size:14px;
 }
#Primary_Navbar-Store:hover ul{
  display: block;
}
#Primary_Navbar-Support:hover ul{
  display: block;
}
.dropdown:hover > div{
    display:block;
}
.notificationDropdown:hover #notificationPopUp{
    display:block;
}
@media (min-width: 768px) {
  .navbar-nav > li.dropdown:hover > ul {
    display: block;
  }
}
.dropdown-menu ,#notificationPopUp{
    background-color:white;
    padding: 10px;
    border-radius: 5px;
    
}
/* Style the navigation menu links */
.navbar-nav a {
  color: rgba(229, 231, 235);
  text-decoration: none;
  display: block;
  padding: 10px 15px;
}

/* Change the color of the links on hover */
.navbar-nav a:hover {
  color: #fff;
}

/* Style the dropdown menu */
.navbar-nav .dropdown-menu {
  background-color: #fff;
  border: 0;
}

/* Style the dropdown menu links */
.navbar-nav .dropdown-menu a {
  color: #757575;
}

/* Change the color of the dropdown menu links on hover */
.navbar-nav .dropdown-menu a:hover {
  color: #1E4482;
}

/* Style the active link */
.navbar-nav .active a {
  background-color: #444;
  color: #fff;
}

/* Add a grey horizontal line between the top nav and the dropdown menu */
.navbar-nav .nav-divider {
  border-top: 1px solid #555;
}