@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* Material Icons */
.material-icons {
  /* required */
  font-family: "Material Icons";
  font-feature-settings: "liga";
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  vertical-align: top;
  display: inline-block;
  /* resetters */
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* optimizers */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-30 {
  font-size: 30px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-40 {
  font-size: 40px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* HTML5 Tags */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

/* Misc */
input[type=button], input[type=submit] {
  border-radius: 0;
}

::-webkit-input-placeholder {
  color: #b7b7b7 !important;
  font-size: 14px;
  line-height: 25px;
}

:-moz-placeholder {
  color: #b7b7b7 !important;
  font-size: 14px;
  line-height: 25px;
}

::-moz-placeholder {
  color: #b7b7b7 !important;
  font-size: 14px;
  line-height: 25px;
}

:-ms-input-placeholder {
  color: #b7b7b7 !important;
  font-size: 14px;
  line-height: 25px;
}

/* Required Asterisk */
.form-group.required .control-label:after {
  content: " *";
  color: red;
}

/* Form Error */
select.error, input[type=text].error, input[type=password].error, input[type=email].error, input[type=tel].error, textarea.error, button.error {
  border: dotted 1px #d9534f;
}

label.error {
  color: #d9534f;
  margin-bottom: 0px;
}

/* Responsive items */
table {
  max-width: 100%;
  height: auto !important;
}

img {
  max-width: 100%;
  height: auto !important;
}

iframe {
  max-width: 100%;
  max-height: auto !important;
}

/* Fluid Youtube Video */
.vdowrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.vdowrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Main */
* {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

html, body {
  height: 100% !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: roboto;
  font-size: 16px;
}

body:after {
  content: "desktop";
  display: none;
}

@media (max-width: 991px) {
  body:after {
    content: "tablet";
  }
}
@media (max-width: 766px) {
  body:after {
    content: "mobile";
  }
}
.left {
  float: left;
}

.right {
  float: right;
}

.clr {
  clear: both;
}

.img-responsive {
  width: 100%;
  display: block;
}

.vdo-responsive {
  width: 100%;
  display: block;
}

.border {
  border: solid 1px red !important;
}

/* Buttons */
.btn-group .btn {
  width: 120px;
}

.btn {
  font-size: 14px;
  border-radius: 0.25em !important;
}

.btn-outline-dark {
  border-color: rgb(211, 211, 211);
  color: #505050;
}

.btn-outline-dark:hover, .btn-outline-dark:active {
  background-color: #e9e9e9 !important;
  border-color: #ececec !important;
  color: #505050 !important;
}

.btn-kbblue {
  color: #fff;
  background-color: #3290c5;
  border-color: #3290c5;
}

.btn-kbblue:hover {
  color: #fff;
  background-color: #1875aa;
  border-color: #1875aa;
}

.btn-kbdark {
  color: #fff;
  background-color: #434343;
  border-color: #434343;
}

.btn-kbdark:hover {
  color: #fff;
  background-color: #343434;
  border-color: #343434;
}

/* MobilePay Button */
.btn-kbmobilepay {
  margin-top: 10px;
  background-color: #5a78ff;
  background-image: url(/media/1150/mobilepay.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

.btn-link.blue {
  color: #3290c5;
  padding: 0px;
  font-weight: 700;
  text-transform: uppercase;
}

.btn-link.grey {
  color: #616161;
}

.modal-footer {
  background-color: #f9f9f9 !important;
  border: none;
}