/*
####################
###   BUTTONS   ####
####################
*/

.btn-primary { 
  color: #FFFFFF; 
  background-color: #280D67; 
  border-color: #280D67; 
} 
 
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #FFFFFF; 
  background-color: #511C96; 
  border-color: #280D67; 
} 
 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 
 
.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #280D67; 
  border-color: #280D67; 
} 
 
.btn-primary .badge { 
  color: #280D67; 
  background-color: #FFFFFF; 
}



.btn-secondary { 
  color: #ffffff; 
  background-color: #845EC2; 
  border-color: #845EC2; 
} 
 
.btn-secondary:hover, 
.btn-secondary:focus, 
.btn-secondary:active, 
.btn-secondary.active, 
.open .dropdown-toggle.btn-secondary { 
  color: #ffffff; 
  background-color: #6839A6; 
  border-color: #845EC2; 
} 
 
.btn-secondary:active, 
.btn-secondary.active, 
.open .dropdown-toggle.btn-secondary { 
  background-image: none; 
} 
 
.btn-secondary.disabled, 
.btn-secondary[disabled], 
fieldset[disabled] .btn-secondary, 
.btn-secondary.disabled:hover, 
.btn-secondary[disabled]:hover, 
fieldset[disabled] .btn-secondary:hover, 
.btn-secondary.disabled:focus, 
.btn-secondary[disabled]:focus, 
fieldset[disabled] .btn-secondary:focus, 
.btn-secondary.disabled:active, 
.btn-secondary[disabled]:active, 
fieldset[disabled] .btn-secondary:active, 
.btn-secondary.disabled.active, 
.btn-secondary[disabled].active, 
fieldset[disabled] .btn-secondary.active { 
  background-color: #845EC2; 
  border-color: #845EC2; 
} 
 
.btn-secondary .badge { 
  color: #845EC2; 
  background-color: #ffffff; 
}

/*
####################
###  UTILITIES  ####
####################
*/

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/*
####################
###  TRIANGLES  ####
####################
*/

.triangle{
    width: 0px;
    height: 0px;
    transform: rotate(0deg);
    border-style: solid;
}

.triangle.top-left-secondary {
    border-width: 15px 0 0 100vw;
    border-color: transparent transparent transparent #845EC2;
}
.triangle.top-right-secondary {
    border-width: 0 0 15px 100vw;
    border-color: transparent transparent #845EC2 transparent;
}
.triangle.bottom-right-secondary {
    border-width: 0 100vw 15px 0;
    border-color: transparent #845EC2 transparent transparent;
}
.triangle.bottom-left-secondary {
    border-width: 15px 100vw 0 0;
    border-color: #845EC2 transparent transparent transparent;
}


.triangle.top-left-primary {
    border-width: 15px 0 0 100vw;
    border-color: transparent transparent transparent #280D67;
    transform: rotate(0deg);
}
.triangle.top-right-primary {
    border-width: 0 0 15px 100vw;
    border-color: transparent transparent #280D67 transparent;
}
.triangle.bottom-right-primary {
    border-width: 0 100vw 15px 0;
    border-color: transparent #280D67 transparent transparent;
}
.triangle.bottom-left-primary {
    border-width: 15px 100vw 0 0;
    border-color: #280D67 transparent transparent transparent;
}



@media (min-width:768px){
  .triangle.top-left-secondary {
      border-width: 40px 0 0 100vw;
  }
  .triangle.top-right-secondary {
      border-width: 0 0 40px 100vw;
  }
  .triangle.bottom-right-secondary {
      border-width: 0 100vw 40px 0;
  }
  .triangle.bottom-left-secondary {
      border-width: 40px 100vw 0 0;
  }


  .triangle.top-left-primary {
      border-width: 40px 0 0 100vw;
  }
  .triangle.top-right-primary {
      border-width: 0 0 40px 100vw;
  }
  .triangle.bottom-right-primary {
      border-width: 0 100vw 40px 0;
  }
  .triangle.bottom-left-primary {
      border-width: 40px 100vw 0 0;
  }
}