/* 
/* 
/*  custom.css
/*
/*  If not using Gulp and Sass, add your custom CSS below then include it
/*  in your page by adding a reference to assets/css/custom.css in the head of each page.
/*
*/
/* VE: adjustment for xtra large screens (1440px+) 
================================================= */
@media only screen and (min-width: 1440px) {
.container {
    max-width: 1440px;
}
}
/* VE: end adjustment for xtra large screens (1440px+) 
================================================= */
.modal-content iframe{
    background: transparent !important;
}
.zoomeffect{
    
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1); 
}
.zoomeffect:hover{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}
.highlight:hover {
    transform: scale(1.02);
}
/* VE: 6-2-2020: appwiki landingpages  */
.bg-purple-gradient {
    background: linear-gradient(45deg,#688dfc,#673ab7);
}
.toggle {
  display: none;
}

.toggle__label {
  padding-left: 45px;
  position: relative;
  height: 30px;
  line-height: 30px;
  color: white;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
}


.toggle__label:hover {
  color: white;
}


.toggle__label:before {
  content: '';
  height: 20px;
  border-radius: 10px;
  position: absolute;
  top: 5px;
  width: 35px;
  left: 0;
  background-color: white;
}

.toggle__label:after {
  content: '';
  height: 18px;
  border-radius: 9px;
  position: absolute;
  top: 6px;
  width: 18px;
  left: 2px;
  background-color: #688dfc;
  transition: left 150ms ease-in-out;
}

.toggle:checked + .toggle__label {
  color: white;
}


.toggle:disabled + .toggle__label:after {
  opacity: 0.7;
  cursor: not-allowed;
  background-color: #aaa;
}

.toggle:checked + .toggle__label:after {
  left: 15px;
}
.tabs {
  text-align: center;
  display: block;
  color: white;
  padding: 0;
  margin-bottom: 0;

  &__radio{
    display: none;
  }

  &__tab {
    display: inline-block;
    list-style: none;
    border-bottom: 2px solid transparent;
    margin: 0 10px 20px 10px;
    padding: 0 5px;
    cursor: pointer;

    &:hover {
        display: inline-block;
        list-style: none;
        border-color: rgba(255,255,255,0.5);
    }

  }

  &__radio:checked + .tabs__tab {
    border-color: white;
  }
}
.tabs__radio{
  display: none;
}
.tabs__tab {
  display: inline-block;
  list-style: none;
  border-bottom: 2px solid transparent;
  margin: 0 10px 20px 10px;
  padding: 0 5px;
  cursor: pointer;
}
.tabs__tab:hover {
  display: inline-block;
  list-style: none;
  border-color: rgba(255,255,255,0.5);
}

.tabs__radio:checked + .tabs__tab {
  border-color: white;
}
.bg-skewed-grey-white {
    background: linear-gradient(178.5deg,#f0f0f0 50%,#fff 51%,#fff);
    min-height: 60px;
}
.bg-skewed-white-grey {
    background: linear-gradient(178.5deg,#fff 50%,#f0f0f0 51%,#f0f0f0);
    min-height: 60px;
}
.pricing-card__btn {
    /*display: block;*/
    border-radius: 4px;
    background-color: #fff;
    color: #688dfc;
    line-height: 44px;
    text-align: center;
    text-decoration: none;
    border: 2px solid #688dfc;
    -webkit-transition: background-color .2s,border-color .2s;
    transition: background-color .2s,border-color .2s;
    box-shadow: 0 0 10px rgba(104,141,252,.3);
    font-weight: bolder;
    padding: 0 10px;
}
.pricing-card__btn--filled{
    background-color: #688dfc !important;
    border-color: #688dfc !important;
    color: #fff !important;
}
.pricing-card__btn--filled:hover {
        background-color: #4f7afb !important;
        border-color: #4f7afb !important;
        color: white !important;
}


/* VE: special card css (4/8)
====================================== */
.beam-left{
  border-left: 30px solid rgba(82, 170, 221, 0.85);
    box-shadow: 4px 4px 12px rgba(0,0,0,.25);
    padding: 20px 24px 30px;
    transition: all 150ms ease-in;
}

.card[data-toggle=tab]:not([aria-selected=true]) .beam-left{
  border-left-color: rgb(241, 248, 252);
  box-shadow: 1px 2px 6px rgba(0,0,0,.25);
  padding: 20px 24px 30px;
  transition: all 150ms ease-in;  
}
.card[data-toggle=tab]:not([aria-selected=true]):hover {
    background-color: #f2f3f5; /*yoobi software bg color*/
} 
/* VE: card-columns adjustments 
===================================== */
@media only screen and (min-width: 576px) {
.card-columns {  
    column-count: 1;
  }
}
@media only screen and (min-width: 768px) {
.card-columns {  
    column-count: 2;
  }
}
@media only screen and (min-width: 992px) {
.card-columns {
    column-count: 3;
  }
}
@media only screen and (min-width: 1200px) {
.card-columns {
    column-count: 3;
  }
}
@media only screen and (min-width: 1440px) {
.card-columns {
    column-count: 4;
  }
}
/* VE: fix for anchor links and header
===================================== */
:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

.card-border-primary {
    border-left: 10px solid #0052CC;
    box-shadow: 1px 2px 6px rgba(0,0,0,.25);
    transition: all 150ms ease-in;
}
.card-border-primary:not(.active) {
    border-left: 10px solid #B3D4FF;

}

/* APPWIKI MOBILE RESPONSIVE
===================================== */

@media only screen and (max-width: 35rem) {
/* VE: special card css (4/8) */
.card[data-toggle=tab]:not([aria-selected=true]) .card-body:not(.active) p  {
    opacity: 0;
    line-height: 0 !important;
    transition: line-height 150ms ease-in;
}
.card-body h3,h5,p  {
	margin:0 !important;
	padding: 0 !important;
}
.beam-left{
    box-shadow: 1px 2px 6px rgba(0,0,0,.25);
    padding: 4px 4px 6px;
}
.card[data-toggle=tab]:not([aria-selected=true]) .beam-left{
  	box-shadow: 1px 2px 6px rgba(0,0,0,.25);
    padding: 4px 4px 6px;
}
/* P - tekst */
h3,
h5 {
padding: 0 1rem;
/*text-align: center; 4/8 niet compatibel*/
}
p{
padding: 0.5rem 1rem;
line-height: 2rem;
}

p.lead {
padding: 0.5rem 1rem;
line-height: 2rem;
 
}
/* Intro afbeelding */
.main-container>section .mura-object-content>div div:nth-child(2)> div:first-child {
padding-bottom: 1rem;
}

/*   div verbergen */
.main-container>section .mura-object-content>div div:nth-child(2)>div:nth-child(2) {
display: none;
}

.main-container>section span.lead {
max-width: 85% !important;
}

/* Intro Sterren centreren */
.main-container>section > .container .mura-region-local > div:nth-child(2) {
width: unset !important;
}

/* Features afbeeldingen */
.mura-body > div > div div:nth-child(3) .feature-list li>div {
padding-top: 1rem;
}

/* Reviews sterretjes */
.mura-body > div > div div:nth-child(3) h4.text-center span.text-orange {
display:block;
}

/* Reviews tekst */
.mura-body > div > div div:nth-child(3) div:nth-child(4) .mura-object-content .container p.lead {
text-align: left !important;
}
}
.text-light a {
    color: #d4d4d4;
    transition: color .2s ease;
}