@font-face {
  font-family: fago;
  src: url("https://sqiffonts.s3.eu-west-1.amazonaws.com/Sqiffer/Kostic-Roc-Grotesk-Regular.woff")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

body {
  font-family: "fago", sans-serif !important;
  font-weight: 400;
}

html {
  touch-action: manipulation;
}

.placeholder {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 100vh;
  width: 100%;
  font-size: 25px;
  color: #000;
}

.subprog {
  min-height: 2px !important;
  max-height: 20px;
  padding: 0 16px 30px !important;
}

.subprog .flex-70 {
  margin-left: 20px;
}

.img-placeholder md-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
}

.img-placeholder {
  position: absolute;
  background: lightgray;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

md-list-item .md-secondary-container {
  flex-shrink: unset !important;
  width: 30%;
}

.sms-button {
  padding: 10px;
  background: #0d47a1;
  color: #fff;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 200;
}

.custom-icon {
  margin: 0 10px 0 0;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  height: 20px;
  width: 20px;
  min-height: 20px;
  min-width: 20px;
  background-size: contain;
  background-image: url("../img/trophy.png");
}

.team1 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team2 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team3 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team4 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team5 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team6 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team7 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team8 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team9 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team10 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team11 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team12 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team13 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team14 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team15 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team17 {
  background: #0d47a1 !important;
  color: #fff !important;
}

.team18 {
  background: #0d47a1 !important;
  color: #fff !important;
}

md-progress-circular path {
  stroke: #0d47a1 !important;
}

.reserved {
  background: #0d47a1;
  color: #fff;
}

.reserved md-icon,
.reserved span:not(.theme-span) {
  color: #fff !important;
}

.mention {
  margin: 0;
  min-height: unset;
  min-width: unset;
  max-width: 100px !important;
  max-height: 40px !important;
  margin-top: 5px;
  font-family: fago !important;
  background: #fff !important;
  color: #0d47a1 !important;
  line-height: unset;
  display: flex;
  justify-content: center;
}

.breakout-live {
  transition: opacity 0.45s;
  background-color: rgba(33, 33, 33, 0.9);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.breakout-live.ng-enter,
.breakout-live.ng-leave {
  -webkit-transition: opacity ease-in-out 0.4s;
  -moz-transition: opacity ease-in-out 0.4s;
  -ms-transition: opacity ease-in-out 0.4s;
  -o-transition: opacity ease-in-out 0.4s;
  transition: opacity ease-in-out 0.4s;
}
.breakout-live.ng-enter,
.breakout-live.ng-leave.ng-leave-active {
  opacity: 0;
}
.breakout-live.ng-leave,
.breakout-live.ng-enter.ng-enter-active {
  opacity: 1;
}

.input {
  border: none;
  border-bottom: 1px solid #0d47a1;
  outline: none;
}

.md-toast-content {
  background-color: #000 !important;
  text-align: center;
  font-family: inherit;
}

.home-marker {
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  cursor: pointer;
}

#menu {
  background: #0d47a1;
  position: absolute;
  font-weight: 900;
  font-family: fago;
  height: 30px;
  width: 100px;
  left: 10px;
  z-index: 30;
  top: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sidebar {
  position: absolute;
  width: 58.3333%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  background: #fff;
  overflow: hidden;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
  visibility: visible;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.showsidebar {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pad2 {
  padding: 20px;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  height: 100%;

  /* Allows you to scroll below the viewport; default value is visible */
  overflow-y: scroll;

  /* To smooth any scrolling behavior */
  -webkit-overflow-scrolling: touch;
}

h1,
h2,
h3,
h4 {
  color: #0d47a1;
}

h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 400;
  line-height: 20px;
  padding: 20px 2px;
}

a {
  color: #404040;
  text-decoration: none;
}

a:hover {
  color: #101010;
}

.heading {
  background: #fff;
  border-bottom: 1px solid #eee;
  min-height: 60px;
  line-height: 60px;
  padding: 0 10px;
  background-color: #0d47a1;
  color: #fff;
}

.listings {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 60px;
}

.listings .item {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 10px;
  text-decoration: none;
}

.listings .item:last-child {
  border-bottom: none;
}
.listings .item .title {
  display: block;
  color: #0d47a1;
  font-weight: 700;
}

.listings .item .title small {
  font-weight: 400;
}
.listings .item.active .title,
.listings .item .title:hover {
  color: #8cc63f;
}
.listings .item.active {
  background-color: #f8f8f8;
}
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-left: 0;
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: #0d47a1;
  border-radius: 0;
}

.md-sidenav-backdrop-custom {
  z-index: 400 !important;
}

.md-select-menu-container {
  z-index: 250;
}

#mapwize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.mapboxgl-marker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  width: 20px;
  height: 20px;
  color: #fff;
  display: flex;
  justify-content: center;
  font-weight: 900;
}

.disabled {
  opacity: 0.6;
}

.md-subheader .md-subheader-inner {
  padding-left: 0;
}

.btn {
  background: #0d47a1 !important;
  color: #fff !important;
  font-family: fago !important;
}

.back-btn {
  color: #0d47a1 !important;
  font-family: fago !important;
  width: 0.001px;
}

.back-btn md-icon {
  background: #fff !important;
  color: #0d47a1 !important;
}

.sq-header {
  background: #fff;
  display: flex;
  max-height: 64px;
  align-items: center;
}

.fade-in-load {
  opacity: 0;

  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.btn md-icon {
  color: #fff !important;
}

.fago {
  font-family: fago !important;
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-input {
  font: inherit;
  width: 100%;
  height: 40px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTMgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW9zLXNlYXJjaC1pbnB1dC1pY29uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImNvbXBvbmVudHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpb3Mtc2VhcmNoLWlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDguMDAwMDAwLCAtNDMuMDAwMDAwKSIgZmlsbD0iIzdBNzk3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTcyNDgyLDE1LjUwNDE0NjYgQzE3LjA3NzM2NTcsMTUuNTQwNTkzOCAxNy4xNTIyNzMxLDE1LjU5MTYxMjkgMTcuMjE3NzUxNiwxNS42NTcwOTE0IEwyMC42NDk5OTEsMTkuMDg5MzMwOCBDMjAuOTQ0ODQ0OSwxOS4zODQxODQ3IDIwLjk0ODQ3NjQsMTkuODU4NjA2IDIwLjY1MzU0MTIsMjAuMTUzNTQxMiBDMjAuMzYwNjQ4LDIwLjQ0NjQzNDQgMTkuODgxMjcxNiwyMC40NDE5MzE3IDE5LjU4OTMzMDgsMjAuMTQ5OTkxIEwxNi4xNTcwOTE0LDE2LjcxNzc1MTYgQzE2LjA5MTM3LDE2LjY1MjAzMDEgMTYuMDQwMTE3MSwxNi41NzczODc0IDE2LjAwMzQxNDEsMTYuNDk3Nzk5NSBDMTUuMTY3MTY5NCwxNy4xMjcwNDExIDE0LjEyNzEzOTMsMTcuNSAxMywxNy41IEMxMC4yMzg1NzYzLDE3LjUgOCwxNS4yNjE0MjM3IDgsMTIuNSBDOCw5LjczODU3NjI1IDEwLjIzODU3NjMsNy41IDEzLDcuNSBDMTUuNzYxNDIzNyw3LjUgMTgsOS43Mzg1NzYyNSAxOCwxMi41IEMxOCwxMy42Mjc0Njg1IDE3LjYyNjgyMzIsMTQuNjY3Nzc2OCAxNi45OTcyNDgyLDE1LjUwNDE0NjYgWiBNMTMsMTYuNSBDMTUuMjA5MTM5LDE2LjUgMTcsMTQuNzA5MTM5IDE3LDEyLjUgQzE3LDEwLjI5MDg2MSAxNS4yMDkxMzksOC41IDEzLDguNSBDMTAuNzkwODYxLDguNSA5LDEwLjI5MDg2MSA5LDEyLjUgQzksMTQuNzA5MTM5IDEwLjc5MDg2MSwxNi41IDEzLDE2LjUgWiIgaWQ9Imlvcy1zZWFyY2gtaW5wdXQtaWNvbiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)
    8px center no-repeat;
  border: none;
  vertical-align: top;
  outline: 0;
  font-family: "fago" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  box-sizing: border-box;
  font-size: 14px;
  background-color: rgba(3, 3, 3, 0.09);
  box-shadow: none;
  color: #1f1f21;
  line-height: 1.3;
  padding: 0 8px 0 28px;
  margin: 0;
  border-radius: 5.5px;
  background-size: 13px;
  font-weight: 400;
  display: inline-block;
  text-indent: 0;
}

.textarea {
  font-size: 16px;
  letter-spacing: 0;
  background: #ffffff;
  border: 0 solid #e7e7e7;
  padding: 15px;
  -webkit-appearance: none;
  box-shadow: 0 0 10px 0 #0d47a1;
  border-radius: 8px;
  outline: none;
  margin-bottom: 10px;
  color: #0d47a1;
  font-family: fago;
}

.animationIff.ng-enter {
  -webkit-transition: opacity ease-in-out 0.3s;
  -moz-transition: opacity ease-in-out 0.3s;
  -ms-transition: opacity ease-in-out 0.3s;
  -o-transition: opacity ease-in-out 0.3s;
  transition: opacity ease-in-out 0.3s;
}
.animationIff.ng-enter,
.animationIff.ng-leave.ng-leave-active {
  opacity: 0;
}
.animationIff.ng-leave,
.animationIff.ng-enter.ng-enter-active {
  opacity: 1;
}

.processing {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.get-distance {
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

md-backdrop {
  position: fixed !important;
  z-index: 800;
}

.bottom-sheet {
  position: fixed;
  background: #0d47a1;
  color: #ffffff;
  font-family: fago;
  height: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  font-weight: 900;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.full-height-column {
  min-height: 100%;
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  flex-direction: column;
  flex: 1;
}

ng-view {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-container {
  position: relative;
  margin: 35px 0 0 -125px;
  overflow: hidden;
  height: 270px;
  width: 250px;
  left: 50%;
  top: 50%;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.file-input {
  z-index: 101;
  position: relative;
  max-height: 100%;
  width: 250px;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
  font-size: 200px;
  direction: ltr;
  cursor: pointer;
}

::-webkit-input-placeholder {
  font-family: Montserrat;
}
::-moz-placeholder {
  font-family: Montserrat;
}
:-ms-input-placeholder {
  font-family: Montserrat;
}
:-moz-placeholder {
  font-family: Montserrat;
}

#restartbtn {
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin: 20px;
}
.table {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  width: 100%;
  text-align: center;
}

button {
  touch-action: manipulation;
}

/*------
  # Pincode
  ----*/

#pincode {
  position: fixed;
  overflow: hidden;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  color: #0d47a1;
  text-align: center;
}

#numbers {
  max-width: 300px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
  display: block;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  transition: all 1s ease-out;
  opacity: 1;
}

#numbers.hide {
  opacity: 0.3;
}

#pincode button:not(.back-btn) {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  background-color: #0d47a1;
  border: 0;
  color: #fff;
  font-size: 25px;
  line-height: 50px;
  border-radius: 100%;
  opacity: 1;
  outline: 0;
  border: 2px solid #0d47a1;
}

#pincode button:active {
  background-color: #0d47a1;
  outline: 0;
}

#fields {
  max-width: 200px;
  padding: 0 20px;
  margin: 50px auto;
  position: relative;
  display: block;
}

#fields .numberfield {
  text-align: center;
}

#fields .numberfield span {
  height: 10px;
  width: 10px;
  border: 2px solid #0d47a1;
  background-color: transparent;
  border-radius: 100%;
  position: relative;
  display: inline-block;
  text-align: center;
}

#fields .numberfield.active span {
  background-color: #0d47a1;
}

#fields .numberfield.right span {
  background-color: #272a2f;
  border-color: #272a2f;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

/*------
  # Toast Grid
  ----*/

.grid {
  list-style: none;
  margin-left: -20px;
}

.grid__col--1-of-3,
.grid__col--2-of-6,
.grid__col--4-of-12 {
  width: 33.33333%;
}

.grid__col--1-of-4,
.grid__col--2-of-8,
.grid__col--3-of-12 {
  width: 25%;
}

.grid__col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -0.25em;
  min-height: 1px;
  padding-left: 20px;
  vertical-align: top;
}

.grid__col--centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.grid__col--d-first {
  float: left;
}

.grid__col--d-last {
  float: right;
}

.grid--no-gutter {
  margin-left: 0;
  width: 100%;
}

.grid--no-gutter .grid__col {
  padding-left: 0;
}

.grid--no-gutter .grid__col--span-all {
  margin-left: 0;
  width: 100%;
}

.grid__col--ab {
  vertical-align: bottom;
}

.grid__col--am {
  vertical-align: middle;
}

.miss {
  -webkit-animation: miss 0.8s ease-out 1;
  animation: miss 0.8s ease-out 1;
}

@-webkit-keyframes miss {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  20% {
    -webkit-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  30% {
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }
  40% {
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  70% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
  80% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes miss {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  20% {
    -webkit-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  30% {
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }
  40% {
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  70% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
  80% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

#hastylink {
  position: fixed;
  bottom: 5px;
  left: 0;
  right: 0;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d47a1;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1000px) {
  .waypoint-img {
    height: 200px !important;
  }
}

.grid {
  max-width: 1200px;
}

/* reveal grid after images loaded */
.grid.are-images-unloaded {
  opacity: 0;
}

.grid__item,
.grid__col-sizer {
  width: 32%;
}

.grid__gutter-sizer {
  width: 2%;
}

/* hide by default */
.grid.are-images-unloaded .image-grid__item {
  opacity: 0;
}

.grid__item {
  margin-bottom: 20px;
  float: left;
}

.grid__item--height1 {
  height: 140px;
  background: #ea0;
}
.grid__item--height2 {
  height: 220px;
  background: #c25;
}
.grid__item--height3 {
  height: 300px;
  background: #19f;
}

.grid__item--width2 {
  width: 66%;
}

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

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #777;
}

.loader-start {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  color: #dd0000;
  left: -100px;
  box-sizing: border-box;
  animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #dd0000, 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #dd0000, 100px 0 #dd0000, 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #dd0000, 110px 0 #dd0000, 100px 0 #dd0000,
      0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #dd0000, 120px 0 #dd0000, 110px 0 #dd0000,
      100px 0 #dd0000;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #dd0000, 120px 0 #dd0000,
      110px 0 #dd0000;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      130px 0 #dd0000, 120px 0 #dd0000;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      200px 0 rgba(255, 255, 255, 0), 130px 0 #dd0000;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) {
  left: 1.5em;
}
.loader-ellips__dot:nth-child(4) {
  left: 3em;
}

@keyframes reveal {
  from {
    transform: scale(0.001);
  }
  to {
    transform: scale(1);
  }
}

@keyframes slide {
  to {
    transform: translateX(1.5em);
  }
}

.masonry-brick.loaded {
  display: block;
}

.masonry-brick {
  display: none;
  cursor: pointer;
  width: 300px;
  background-color: rgba(175, 175, 175, 0.1);
}

.masonry-brick img {
  width: 100%;
  height: 100%;
  display: inline-block;
  opacity: 1;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}